From 66ffd50239967f7777ea484aca0c8ab00a08e891 Mon Sep 17 00:00:00 2001 From: Amie Corso Date: Mon, 11 Nov 2024 08:56:51 -0800 Subject: [PATCH 1/2] one more walkthrough --- .../guides/spend-permissions/overview.mdx | 2 +- .../guides/spend-permissions/quick-start.mdx | 50 ++++++++----------- 2 files changed, 23 insertions(+), 29 deletions(-) diff --git a/docs/pages/guides/spend-permissions/overview.mdx b/docs/pages/guides/spend-permissions/overview.mdx index 1f6ca07..8016433 100644 --- a/docs/pages/guides/spend-permissions/overview.mdx +++ b/docs/pages/guides/spend-permissions/overview.mdx @@ -1,7 +1,7 @@ # Spend Permissions Spend Permissions enable third-party signers to spend assets (native and ERC-20 tokens) from users' wallets. Once granted, spend permissions -allow you to move your users' assets without any further of signatures, unlocking use cases like subscriptions & trading bots. The reduced signing friction +allow you to move your users' assets without any further signatures, unlocking use cases like subscriptions & trading bots. The reduced signing friction can also be leveraged to enhance UX for high-frequency use cases such as onchain games. Differences between Spend Permissions and ERC-20 permits: diff --git a/docs/pages/guides/spend-permissions/quick-start.mdx b/docs/pages/guides/spend-permissions/quick-start.mdx index 53077c8..9a59912 100644 --- a/docs/pages/guides/spend-permissions/quick-start.mdx +++ b/docs/pages/guides/spend-permissions/quick-start.mdx @@ -12,32 +12,25 @@ Smart contract deployment addresses for `SpendPermissionManager.sol` can be foun ### Set up a basic app template using OnchainKit -Set up a boilerplate React/Next app by running the following command and following the instructions. Don't worry about your Coinbase -Developer Platform API Key, we'll get one of those later. When prompted to use Coinbase Smart Wallet select "yes". +Set up a boilerplate React/Next app by running the following command and following the instructions. Don't worry about getting a Coinbase +Developer Platform API Key, you don't need one for this example. When prompted to use Coinbase Smart Wallet select "yes". ```bash -bun create onchain@latest +npm create onchain@latest ``` - - You may need to install the package manager - [`bun`](https://bun.sh/docs/installation) - - This will generate an app that is ready to run and contains a wallet connection button that users can use to connect their smart wallet to the application. From here, we'll modify the app to assemble, sign, approve and use a spend permission to spend our users' funds! -### Set up your spender wallet and environment +### Set up your spender wallet Add the following variables to your `.env`: ``` SPENDER_PRIVATE_KEY= NEXT_PUBLIC_SPENDER_ADDRESS= -NEXT_PUBLIC_CDP_API_KEY= -BASE_SEPOLIA_PAYMASTER_URL= ``` @@ -46,16 +39,10 @@ BASE_SEPOLIA_PAYMASTER_URL= Our spender will need to sign transactions from our app, so we'll create a wallet (private key and address) for our spender. -If you have [Foundry](https://book.getfoundry.sh/) installed, you can generate a new wallet via `cast wallet new`. Assign the private key and address to +If you have [Foundry](https://book.getfoundry.sh/) installed, you can generate a new wallet via `cast wallet new`. If you already have a +development keypair you can use that too. Assign the private key and address to `SPENDER_PRIVATE_KEY` and `NEXT_PUBLIC_SPENDER_ADDRESS`, respectively. -Next, make sure you have a Coinbase Developer Platform Client API key (different from Secret API Key), which you can get [here](https://portal.cdp.coinbase.com/). -Assign this key to `NEXT_PUBLIC_CDP_API_KEY` in your `.env`. - -You'll need one more environment variable, which is `BASE_SEPOLIA_PAYMASTER_URL`. -This one's easy if you already have your CDP API key: - `"https://api.developer.coinbase.com/rpc/v1/base-sepolia/{YOUR_CDP_API_KEY}"` - ### Create a spender client Our client is what our app will use to communicate with the blockchain. @@ -159,7 +146,7 @@ import { } from "wagmi"; import { Address, Hex, parseUnits } from "viem"; import { useQuery } from "@tanstack/react-query"; -import { spendPermissionManagerAddress } from "@/app/lib/abi/SpendPermissionManager"; +import { spendPermissionManagerAddress } from "@/lib/abi/SpendPermissionManager"; export default function Subscribe() { const [isDisabled, setIsDisabled] = useState(false); @@ -355,18 +342,25 @@ export default function Subscribe() { } ``` -Also be sure to add this new `Subscribe` button component to the top level component in `page.tsx`. You can put it somewhere between the `
` tags: +Also be sure to add this new `Subscribe` button component to the top level component in `page.tsx`. +You can delete lines 77-127 and put your button there. ```tsx [page.tsx] ... -
- ... - -
+
+
+
+ +
+
+ +
+
+
... ``` -### Assemble a `SpendPermission` object for the user to sign +### Examine the `SpendPermission` object our user will sign A `SpendPermission` is the struct that defines the parameters of the permission. See the solidity struct [here](https://github.com/coinbase/spend-permissions/blob/07067168108b83d9662435b056a2a580c08be214/src/SpendPermissionManager.sol#L20). @@ -415,7 +409,7 @@ export default function Subscribe() { } ``` -### Prompt the user to sign the spend permission data from their Smart Wallet. +### Observe the `signTypedData` hook As part of our button handler `handleSubmit`, in lines 61-91 of our subscribe component we call [`signTypedDataAsync`](https://wagmi.sh/react/api/hooks/useSignTypedData), a Wagmi hook that will prompt our user to create a signature from their wallet across the details of the spend permission. @@ -584,7 +578,7 @@ This code is using our spender client to do two things: ### Try out your app -Run your app locally with `bun run dev` and visit `localhost:3000`. +Run your app locally with `npm run dev` and visit `localhost:3000`. When you click the "Subscribe" button you should be prompted to create or connect your Smart Wallet. From 245394c5f86cf79440cca90cd0757d9929c3452d Mon Sep 17 00:00:00 2001 From: Amie Corso Date: Mon, 11 Nov 2024 09:01:07 -0800 Subject: [PATCH 2/2] remove from api endpoint --- .../spend-permissions/api-reference/wallet-fetchpermissions.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/guides/spend-permissions/api-reference/wallet-fetchpermissions.mdx b/docs/pages/guides/spend-permissions/api-reference/wallet-fetchpermissions.mdx index 1532a94..99cd548 100644 --- a/docs/pages/guides/spend-permissions/api-reference/wallet-fetchpermissions.mdx +++ b/docs/pages/guides/spend-permissions/api-reference/wallet-fetchpermissions.mdx @@ -7,7 +7,7 @@ Excludes permissions that have expired or been revoked. #### Schema -**Endpoint:** `https://chain-proxy.wallet.coinbase.com?targetName=base-sepolia`. +**Endpoint:** `https://chain-proxy.wallet.coinbase.com` ```typescript type FetchPermissionsRequest = {