diff --git a/docs/pages/features/MagicSpend.mdx b/docs/pages/features/MagicSpend.mdx new file mode 100644 index 0000000..81afff4 --- /dev/null +++ b/docs/pages/features/MagicSpend.mdx @@ -0,0 +1,21 @@ +# MagicSpend + +MagicSpend enables Smart Wallet users to spend their Coinbase balances directly onchain. Users can connect their Coinbase account during the transaction flow, eliminating the need for manual onramps or transfers. + +## Benefits for Your App +- Remove funding friction for new users +- Tap into Coinbase's massive user base +- Enable instant transactions without waiting for onramps + +## Supported Assets and Networks +- Assets: ETH +- Networks: Base + +## Best Practices +Some apps check user's onchain balance and block certain interactions if the user +has insufficient funds. This is a problem for MagicSpend users, who can access +their Coinbase funds during the transaction flow. + +Apps can detect whether the connected address may have other funds accessible +via `auxiliaryFunds` capability, which can be discovered via a [`wallet_getCapabilities` RPC call](https://eip5792.xyz/reference/getCapabilities). +If a user has `auxiliaryFunds`, apps should not block interactions based on onchain balance. diff --git a/docs/pages/features/batch-operations.mdx b/docs/pages/features/batch-operations.mdx new file mode 100644 index 0000000..27c6df2 --- /dev/null +++ b/docs/pages/features/batch-operations.mdx @@ -0,0 +1,8 @@ +# Batch Operations + +Smart Wallet supports batch operations, which allow developers to perform multiple operations in a single transaction. +This is useful for reducing the number of transactions required to perform a complex operation, such as a swap or a multi-step transaction. + +## Technical Details + +- Batch operations are facilitated via the [wallet_sendCalls](https://www.eip5792.xyz/reference/sendCalls) RPC. \ No newline at end of file diff --git a/docs/pages/features/custom-gas-tokens.mdx b/docs/pages/features/custom-gas-tokens.mdx new file mode 100644 index 0000000..bdd84f9 --- /dev/null +++ b/docs/pages/features/custom-gas-tokens.mdx @@ -0,0 +1,9 @@ +# ERC20 Paymasters + +Smart Wallet enables users to pay for gas in ERC20 tokens! This enables users to use app-specific tokens as payment for gas. + + +## Technical Details + +- We recommend the [Coinbase Developer Platform](https://www.coinbase.com/developer-platform) paymaster, as it is [fully set up to work with Smart Wallet ERC-20 token gas payments](https://docs.base.org/tutorials/enable-erc20-gas-payments/). +- Developers pay gas for their users in ETH and choose an exchange rate at which to receive an ERC-20 token as payment. \ No newline at end of file diff --git a/docs/pages/features/gas-free-transactions.mdx b/docs/pages/features/gas-free-transactions.mdx new file mode 100644 index 0000000..20649d9 --- /dev/null +++ b/docs/pages/features/gas-free-transactions.mdx @@ -0,0 +1,8 @@ +# Gas-free Transactions + +Smart Wallet enables apps to pay for users' transaction gas fees, allowing free transactions or removing the need for users to hold native tokens. + +## Technical Details +- Sponsored transactions are facilitated onchain via [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) compliant paymasters. +- Apps must have a [ERC-7677](https://eips.ethereum.org/EIPS/eip-7677) compliant paymaster service. +- Apps can share this paymaster to Smart Wallet via the ERC-7677 `paymasterService` capability on a `wallet_sendCalls` request. \ No newline at end of file diff --git a/docs/pages/features/networks.mdx b/docs/pages/features/networks.mdx index 1788452..df5103c 100644 --- a/docs/pages/features/networks.mdx +++ b/docs/pages/features/networks.mdx @@ -1,6 +1,8 @@ import { Callout } from "vocs/components"; # Networks +The Smart Wallet contracts can be [permissionlessly deployed](https://github.com/coinbase/smart-wallet/tree/main?tab=readme-ov-file#deployments) on any EVM-compatible network. +Our SDK and client support the following networks. ## Mainnet Networks - Base @@ -17,37 +19,3 @@ import { Callout } from "vocs/components"; - Base Sepolia - Optimism Sepolia -## Details - -### Addresses across Networks -Users have the same Smart Wallet address across supported networks. - -### Deployment -- Smart Wallets are deployed using the "counterfactual deployment" pattern -- The wallet contract is deployed on first transaction -- Same address is reserved across all chains through CREATE2 -- Deployment costs are included in the first transaction - -### `initCode` -- `initCode` determines the wallet's address -- Contains factory address and initialization parameters -- Ensures consistent address across all chains -- Used by bundlers to deploy the wallet if needed - -### tx.origin Behavior -- `tx.origin` will be the bundler EOA address, not the Smart Wallet address -- Consider this when integrating with existing contracts - -## Adding Network Support - - - To add a network, it will require the Smart Wallet team to prioritize it. There is no support for custom networks or [EIP-3085](https://eips.ethereum.org/EIPS/eip-3085) (wallet_addEthereumChain). Users cannot add custom networks to Smart Wallet. Only officially supported networks listed above can be used. - - -For a network to be supported, it needs: - -- [Safe Singleton Factory](https://github.com/safe-global/safe-singleton-factory?tab=readme-ov-file#how-to-get-the-singleton-deployed-to-your-network) (CREATE2 deployer) deployed at `0x914d7Fec6aaC8cd542e72Bca78B30650d45643d7` -- [ERC-4337 Entrypoint v0.6](https://github.com/eth-infinitism/account-abstraction/releases/tag/v0.6.0) deployed at `0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789` -- [Smart Wallet Factory](https://github.com/coinbase/smart-wallet/tree/main?tab=readme-ov-file#deployments) deployed at `0x0BA5ED0c6AA8c49038F819E587E2633c4A9F428a` -- ERC-4337 bundler meeting Coinbase's standards (availability, latency, security) -- Integration work from the Smart Wallet team diff --git a/docs/pages/features/passkeys.mdx b/docs/pages/features/passkeys.mdx index 2362738..da20fe7 100644 --- a/docs/pages/features/passkeys.mdx +++ b/docs/pages/features/passkeys.mdx @@ -2,43 +2,25 @@ import { Callout } from "vocs/components"; ## Passkeys - - It's crucial to understand how passkeys work and how they are managed by the passkey provider (eg: Apple, Google, Microsoft) before using them. If a user loses access to their passkey, they will not be able to access their smart wallet. - +Passkeys enable instant account creation and seamless authentication for Smart Wallet users, dramatically simplifying onboarding. By leveraging FIDO2-compliant authentication, passkeys eliminate seed phrases while providing enterprise-grade security for both wallet access and onchain ownership. -### Overview -Smart Wallet uses passkeys as the primary authentication method for both wallet access and transaction signing, replacing traditional private keys with a more secure and user-friendly solution. +During account creation, a cryptographic key pair is generated and the private key is securely stored on the user's device, while the public key is registered onchain as an owner of the user's Smart Wallet. The passkey serves two core functions: -There is no way for developers to configure passkey options. This page is focused on how passkeys work for users. +1. **Authentication**: Replaces passwords for wallet access. +2. **Transaction Signing**: Functions as the signing key for onchain transactions, replacing private keys and seed phrases. -What is it used for? -- Required for wallet sign-in and transaction approval -- Used for adding additional passkeys and recovery -- Managed by your passkey provider (eg: Apple, Google, Microsoft) -- Supports cross-device access through provider sync +### Cross-Device Support -### Adding Passkeys -- New passkeys can be added using recovery keys -- Multiple passkeys can be added to a Smart Wallet -- Adding a passkey requires a transaction on each chain -- Previous passkeys are not automatically removed +Passkeys leverage platform authenticator APIs for cross-device synchronization through: +- iCloud Keychain (Apple devices) +- Google Password Manager +- 1Password +- Any WebAuthn-compatible password manager -### Removing Passkeys +This enables seamless multi-device support without exposing the underlying cryptographic material. - Removing keys is currently not supported in keys.coinbase.com. - + Account Recovery Considerations -### Considerations -When using passkeys, consider checking with your provider about: -- Backup and sync capabilities across devices -- Recovery procedures and options -- Device and operating system compatibility -- Security and privacy practices - -### Platform Support and Resources -Passkeys work with any platform that supports the WebAuthn standard, allowing for wide compatibility across different devices and browsers. While many providers offer passkey support, here are documentation links for some common ones: -- iOS/macOS: [Apple Support - Use passkeys](https://support.apple.com/guide/iphone/use-passkeys-to-sign-in-to-websites-and-apps-iphf538ea8d0/ios) -- Android: [Google Help - About passkeys](https://support.google.com/android/answer/13462838https://support.google.com/android/answer/14124480?hl=en-GB&sjid=5621630875911120810-NC) -- Windows: [Microsoft Account - Passkey sign in](https://support.microsoft.com/windows/passkey-sign-in-windows-301c8944-5ea2-452b-9886-97e4d2ef4422) -- Chrome: [Google Chrome Help - Use passkeys](https://support.google.com/chrome/answer/13168025) + Without access to their passkey or a configured recovery key, users will permanently lose wallet access. + diff --git a/docs/pages/features/recovery-keys.mdx b/docs/pages/features/recovery-keys.mdx index 4d30622..fc3a099 100644 --- a/docs/pages/features/recovery-keys.mdx +++ b/docs/pages/features/recovery-keys.mdx @@ -2,77 +2,18 @@ import { Callout } from "vocs/components"; # Recovery Keys - - Generate a recovery key before you need it. Recovery keys are essential for maintaining access to your wallet. - +Recovery keys provide a fallback authentication and signing mechanism for Smart Wallets when passkey access is lost. +## Implementation +A recovery key is a standard Ethereum private key. When generated, its corresponding Ethereum address is registered onchain as an owner of the Smart Wallet. This enables two key capabilities: -## Overview +1. In the event a user loses their passkey, the recovery key can be used to add new passkey owners to the Smart Wallet through the [wallet recovery flow](https://help.coinbase.com/en/wallet/getting-started/smart-wallet-recovery). +2. The recovery key can be used to sign transactions as an owner of the Smart Wallet without the use of our website (though specialized wallet software is needed to properly construct the Smart Wallet transactions). -Smart Wallet provides backup access for users through recovery keys: +## Technical Details +- The recovery key has equivalent permissions to passkey owners at the contract level. +- Recovery keys use standard ECDSA signatures, making them compatible with existing Ethereum tooling. +- Multiple recovery keys can be registered to a single Smart Wallet. +- Recovery keys can be added or removed by any existing owner of the Smart Wallet. -- Multiple recovery keys can be generated for backup -- Recovery keys can be used to add new passkeys if keys.coinbase.com is not accessible -- Chain selection for recovery transactions is automated based on wallet balance -- Each recovery key addition requires a transaction with gas fees -- Recovery keys work across all supported chains through replay -- Cannot be used for regular transactions in keys.coinbase.com -- No automatic key rotation -## Generate a Recovery Key -
- 1. Navigate to the "Account Recovery" tab in [Smart Wallet settings](https://keys.coinbase.com/settings) -
- ![Recovery Key Step 1: Access Account Recovery settings](/accountRecovery.png) -
- - 2. Click "Generate Recovery Key" to start the process -
- ![Recovery Key Step 2: Generate a new recovery key](/generateRecoveryKey.png) -
- - 3. Submit the recovery key to complete the process -
- ![Recovery Key Step 3: Submit recovery key](/submitRecoveryKey.png) -
- - 4. Your recovery key will be displayed - save it securely -
- ![Recovery Key Step 4: Recovery key generated successfully](/recoveryKeyCreated.png) -
- - 5. You will need to replay the ownership change transaction in your wallet when using another network. -
- ![Recovery Key Step 5: Transaction pending confirmation](/pendingOwnershipChange.png) -
-
- -## Use a Recovery Key to Add a Passkey - -
- 1. Sign in with your recovery key -
- ![Recovery Key Step 1: Sign in with recovery key](/recoveryKeySignIn.png) -
- - 2. Review the security warning about recovery key scams -
- ![Recovery Key Step 2: Security warning about scams](/recoveryKeyScamWarning.png) -
- - 3. Add a new passkey to regain access to your wallet -
- ![Recovery Key Step 3: Add a new passkey](/recoveryKeyAddPasskey.png) -
-
- - - If you need to recover access to your passkey, please refer to your passkey provider's documentation: - - [Apple Support - Use passkeys](https://support.apple.com/guide/iphone/use-passkeys-to-sign-in-to-websites-and-apps-iphf538ea8d0/ios) - - [Google Help - About passkeys](https://support.google.com/android/answer/13462838) - - [Microsoft Account - Passkey sign in](https://support.microsoft.com/windows/passkey-sign-in-windows-301c8944-5ea2-452b-9886-97e4d2ef4422) - - - - Removing keys is currently not supported in keys.coinbase.com. - diff --git a/docs/pages/features/single-sign-on.mdx b/docs/pages/features/single-sign-on.mdx new file mode 100644 index 0000000..b3d8a88 --- /dev/null +++ b/docs/pages/features/single-sign-on.mdx @@ -0,0 +1,9 @@ +# Single Sign On + +Smart Wallet is a single sign on for onchain apps. Users bring the same account, identity, and assets across apps. + +## How it works + +1. Smart Wallet relies on [passkeys](/features/passkeys), stored on users' devices, which can be used on our website (keys.coinbase.com) and [mobile app](https://www.coinbase.com/wallet). +2. Our SDK, which developers integrate into their apps, uses keys.coinbase.com popups to allow users to see requests and sign with their passkey. +3. The SDK and the popup use cross domain messaging to share information back to the app. diff --git a/docs/pages/features/spend-permissions.mdx b/docs/pages/features/spend-permissions.mdx new file mode 100644 index 0000000..1732730 --- /dev/null +++ b/docs/pages/features/spend-permissions.mdx @@ -0,0 +1,10 @@ +# Spend Permissions + +Spend Permissions enable third-party signers to spend assets (native and ERC-20 tokens) from a user's Smart Wallet. Once granted, Spend Permissions +allow developers to move users' assets without any further signatures, unlocking use cases like subscriptions & trading bots. + +## Technical Details + +- Spend Permissions **supports all ERC-20 assets** +- Spend Permissions **enable spending native tokens** +- Spend Permissions offers granular **controls for recurrence**, e.g. "10 USDC per week" diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 2940343..2c04ac9 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -2,7 +2,7 @@ import { useEffect } from 'react'; export default function Redirect() { useEffect(() => { - window.location.href = "/why"; + window.location.href = "/introduction/install-web"; }, []); return null; diff --git a/docs/pages/base-gasless-campaign.mdx b/docs/pages/introduction/base-gasless-campaign.mdx similarity index 100% rename from docs/pages/base-gasless-campaign.mdx rename to docs/pages/introduction/base-gasless-campaign.mdx diff --git a/docs/pages/introduction/install-react-native.mdx b/docs/pages/introduction/install-react-native.mdx new file mode 100644 index 0000000..85d001e --- /dev/null +++ b/docs/pages/introduction/install-react-native.mdx @@ -0,0 +1,19 @@ +# Install for React Native + +:::code-group +```bash [npm] +npm i @mobile-wallet-protocol/client +``` + +```bash [pnpm] +pnpm i @mobile-wallet-protocol/client +``` + +```bash [yarn] +yarn add @mobile-wallet-protocol/client +``` + +```bash [bun] +bun i @mobile-wallet-protocol/client +``` +::: \ No newline at end of file diff --git a/docs/pages/introduction/install-web.mdx b/docs/pages/introduction/install-web.mdx new file mode 100644 index 0000000..c5f1d62 --- /dev/null +++ b/docs/pages/introduction/install-web.mdx @@ -0,0 +1,19 @@ +# Install for Web + +:::code-group +```bash [npm] +npm i @coinbase/wallet-sdk +``` + +```bash [pnpm] +pnpm i @coinbase/wallet-sdk +``` + +```bash [yarn] +yarn add @coinbase/wallet-sdk +``` + +```bash [bun] +bun i @coinbase/wallet-sdk +``` +::: \ No newline at end of file diff --git a/docs/pages/introduction/recommended-libraries.mdx b/docs/pages/introduction/recommended-libraries.mdx new file mode 100644 index 0000000..5d9f2cf --- /dev/null +++ b/docs/pages/introduction/recommended-libraries.mdx @@ -0,0 +1,22 @@ +# Recommended Libraries + +| Library | Description | +|---------|-------------| +| [OnchainKit](https://onchainkit.xyz/) | Ready made React components for wallet connection, transacting, and more. | +| [Wagmi](https://wagmi.sh/) | React and Vite tools that provides hooks for wallet connection, contract interaction, and more.| +| [Viem](https://viem.sh/) | TypeScript Interface for Ethereum that provides low-level primitives and wallet client abstractions. | + +## Wallet Aggregators +[Dynamic](https://docs.dynamic.xyz/wallets/advanced-wallets/coinbase-smart-wallet) + +[Privy]( https://docs.privy.io/guide/react/recipes/misc/coinbase-smart-wallets) + +[ThirdWeb](http://portal.thirdweb.com/connect) + +[ConnectKit](https://docs.family.co/connectkit) + +[Web3Modal](https://docs.walletconnect.com/web3modal/react/smart-accounts) + +[Web3-Onboard](https://www.blocknative.com/coinbase-wallet-integration) + +[RainbowKit](https://www.rainbowkit.com/) diff --git a/docs/pages/introduction/templates.mdx b/docs/pages/introduction/templates.mdx new file mode 100644 index 0000000..c4230db --- /dev/null +++ b/docs/pages/introduction/templates.mdx @@ -0,0 +1,2 @@ +# Templates +[Onchain App Template](https://github.com/coinbase/onchain-app-template) \ No newline at end of file diff --git a/docs/pages/sdk/create-coinbase-wallet-sdk.mdx b/docs/pages/sdk/create-coinbase-wallet-sdk.mdx index 7d5165a..623cc7b 100644 --- a/docs/pages/sdk/create-coinbase-wallet-sdk.mdx +++ b/docs/pages/sdk/create-coinbase-wallet-sdk.mdx @@ -4,16 +4,7 @@ import SdkParameters from './snippets/sdk-paramaters.mdx' Creates a new `sdk` object for getting a `CoinbaseWalletProvider` instance. ## Usage -:::code-group -```ts twoslash [provider.ts] -import { sdk } from './setup' - -// Create provider -export const provider = sdk.getProvider(); -// Use provider -const addresses = provider.request({method: 'eth_requestAccounts'}); -``` -```ts twoslash [setup.ts] filename="setup.ts" +```ts twoslash import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk'; export const sdk = createCoinbaseWalletSDK({ @@ -27,8 +18,13 @@ export const sdk = createCoinbaseWalletSDK({ } }, }); + +// Create provider +export const provider = sdk.getProvider(); +// Use provider +const addresses = provider.request({method: 'eth_requestAccounts'}); ``` -::: + ## Returns An object with related SDK methods diff --git a/docs/pages/usage-details/gas-usage.mdx b/docs/pages/usage-details/gas-usage.mdx new file mode 100644 index 0000000..6838bdc --- /dev/null +++ b/docs/pages/usage-details/gas-usage.mdx @@ -0,0 +1,18 @@ +# Gas Usage + +Smart Wallets use more gas for transactions than traditional Ethereum accounts. On L2 networks, the cost difference to the user is a matter of cents. +The gas difference is due to the additional overhead required for: + +1. **ERC-4337 Bundling** +2. **Smart Contract Operations**, including one time deployment of the Smart Wallet contract +3. **Signature Verification** + +## Gas Usage Breakdown + +Here's a rough comparison of gas usage per account: + +| Operation Type | Traditional Ethereum Account | Smart Wallet | +|---------------|------------|--------------| +| Native Token Transfer | ~21,000 gas | ~100,000 gas | +| ERC-20 Token Transfer | ~65,000 gas | ~150,000 gas | +| First Deployment | N/A | ~300,000+ gas | \ No newline at end of file diff --git a/docs/pages/usage-details/popups.mdx b/docs/pages/usage-details/popups.mdx new file mode 100644 index 0000000..1c7c83d --- /dev/null +++ b/docs/pages/usage-details/popups.mdx @@ -0,0 +1,34 @@ +# Popup Tips + +## Overview +When a Smart Wallet is connected and Coinbase Wallet SDK receives a request, it opens +[keys.coinbase.com](https://keys.coinbase.com/) in a popup window and passes the request to the popup for handling. +Keep the following points in mind when working with the Smart Wallet popup. + +## Default blocking behavior +- Most modern browsers block all popups by default, unless they are triggered by a click. +- If a popup is blocked the browser shows a notification to the user, allowing them to manage popup settings. + +### What to do about it +- Ensure there is no additional logic between the button click and the request to open the Smart Wallet popup, +as browsers might perceive the request as programmatically initiated. +- If logic is unavoidable, keep it minimal and test thoroughly in all supported browsers. + +## `Cross-Origin-Opener-Policy` +If the Smart Wallet popup opens and displays an error or infinite spinner, it may be due to the dapp's `Cross-Origin-Opener-Policy`. Be sure to use a directive that allows the Smart Wallet popup to function. + +- ✅ Allows Smart Wallet popup to function + - `unsafe-none` (default) + - `same-origin-allow-popups` (recommended) +- ❌ Breaks Smart Wallet popup + - `same-origin` + +For more detailed information refer to the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy). + + +## Smart Wallet popup 'linger' behavior +- Sometimes a dapp may programmatically make a followup request based on the response to a previous request. +Normally, browsers block these programmatic requests to open popups. +- To address this, after the Smart Wallet popup responds to a request, it will linger for 200ms to listen for another incoming request before closing. + - If a request is received *during* this 200ms window, it will be received and handled within the same popup window. + - If a request is received *after* the 200ms window and the popup has closed, opening the Smart Wallet popup will be blocked by the browser. \ No newline at end of file diff --git a/docs/pages/usage-details/self-calls.mdx b/docs/pages/usage-details/self-calls.mdx new file mode 100644 index 0000000..75e4af1 --- /dev/null +++ b/docs/pages/usage-details/self-calls.mdx @@ -0,0 +1,4 @@ +# Self Calls + +For security reasons, we do not allow 3rd party apps to make calls to a user's own Smart Wallet address. +This could allow apps to change owners, upgrade the user's account, or cause other issues. \ No newline at end of file diff --git a/docs/pages/usage-details/signature-verification.mdx b/docs/pages/usage-details/signature-verification.mdx new file mode 100644 index 0000000..b9e370b --- /dev/null +++ b/docs/pages/usage-details/signature-verification.mdx @@ -0,0 +1,41 @@ +# Signature Verification + +There are important details to verifying smart contract wallet signatures. The smart contract itself +cannot produce a signature. Instead, the contract has a function +```solidity +function isValidSignature(bytes32 _hash, bytes memory _signature) returns (bytes4 magicValue); +``` +which can be called to determine if signature should be considered valid (defined in [EIP-1271](https://eips.ethereum.org/EIPS/eip-1271)). + +In the case of Smart Wallet, a signature is considered valid if it was signed by a current signer (aka "owner") of the Smart Wallet. +For example, a user can sign a message with their passkey, and when `isValidSignature` is called on their Smart Wallet, +it would return that the signature is valid because their passkey is an owner. + +There is also an additional complexity: users receive their Smart Wallet address immediately upon passkey registration, +and are able to begin signing for their Smart Wallet, +but their Smart Wallet is not deployed on a chain until the first transaction on that chain. + +[ERC-6492](https://eips.ethereum.org/EIPS/eip-6492) describes +> With the rising popularity of account abstraction, we often find that the best user experience +for contract wallets is to defer contract deployment until the first user transaction, +therefore not burdening the user with an additional deploy step before they can use their account. +However, at the same time, many dApps expect signatures, not only for interactions, but also just for logging in. + +So the challenge is, how do we verify signatures in a way that works for both deployed and undeployed Smart Wallets? +ERC-6492 has a solution for this, which Smart Wallet has adopted. +We won't go unto all the details here, read the ERC linked above, if you're looking for that. +Below we cover the minimum work needed to support on and off chain signature validation for Smart Wallet. + +## Offchain +For purely offchain signature verification––such as "Sign-In With Ethereum"––ensure you are using +a ERC-6492-compliant signature verification library. +We recommend Viem's [`verifyMessage`](https://viem.sh/docs/actions/public/verifyMessage#verifymessage) ([example](https://github.com/wilsoncusack/wagmi-scw/blob/main/src/components/SignMessage.tsx#L28)) +and [verifyTypedData](https://viem.sh/docs/actions/public/verifyTypedData) ([example](https://github.com/wilsoncusack/wagmi-scw/blob/main/src/components/TypedSign.tsx#L46)). + + +## Onchain +For signatures that will be used onchain, such as with [Permit2](https://github.com/Uniswap/permit2) +or [Seaport](https://github.com/ProjectOpenSea/seaport) developers will need to inspect the signature offchain +and remove unneeded ERC-6492 data, if it is present. +We recommend using the [parseErc6492Signature](https://viem.sh/docs/utilities/parseErc6492Signature#parseerc6492signature) +util from Viem. \ No newline at end of file diff --git a/docs/pages/usage-details/simulations.mdx b/docs/pages/usage-details/simulations.mdx new file mode 100644 index 0000000..f525ad0 --- /dev/null +++ b/docs/pages/usage-details/simulations.mdx @@ -0,0 +1,11 @@ +# Transaction Simulation Data +There is a hidden feature which enables you to easily copy transaction simulation request and response data which can then be pasted it in a text editor to inspect. + +## Instructions +- Click the area defined in red **_five times_**, then paste the copied data in a text editor. + +
+
+ ![Copy transaction simulation data click zone](/copyTxnSimClickZone.png) +
+
\ No newline at end of file diff --git a/vocs.config.tsx b/vocs.config.tsx index e862e62..6392111 100644 --- a/vocs.config.tsx +++ b/vocs.config.tsx @@ -41,210 +41,57 @@ export default defineConfig({ ], sidebar: [ { - text: "Why Smart Wallet?", - link: "/why", - }, - { - text: "Quick Start", - link: "/quick-start", - }, - { - text: "FAQ", - link: "/FAQ", - }, - { - text: "Launch Ready Checklist", - link: "/checklist", - }, - { - text: "Wallet Library Support", - link: "/wallet-library-support", - }, - { - text: "Base Gasless Campaign", - link: "/base-gasless-campaign", - }, - { - text: "Features", - collapsed: false, + text: "Introduction", items: [ - { - text: "Networks", - link: "/features/networks", - }, - { - text: "Key Management", - items: [ - { - text: "Passkeys", - link: "/features/passkeys", - }, - { - text: "Recovery Keys", - link: "/features/recovery-keys", - }, - ], - }, - ], - }, - { - text: "Guides", - collapsed: false, - items: [ - { - text: "Create a New Web App", - items: [ - { - text: "Using Onchain App Template", - link: "/guides/create-app/using-onchain-app-template", - }, - { - text: "Using Wagmi Template", - link: "/guides/create-app/using-wagmi", - }, - ], - }, - { - text: "Update an Existing Web App", - link: "/guides/update-existing-app", - }, - { - text: "Integrate with a React Native App", - link: "/guides/react-native-integration", - }, - { - text: "Create Wallet Button", - link: "/guides/components/create-wallet-button", - }, - { - text: "Signature Verification", - link: "/guides/signature-verification", - }, - { - text: "Sign-In with Ethereum", - link: "/guides/siwe", - }, - { - text: "Batch Transactions", - link: "/guides/batch-transactions", - }, - { - text: "Spend Permissions", - collapsed: true, - items: [ - { - text: "Overview", - link: "/guides/spend-permissions/overview", - }, - { - text: "Quick Start", - link: "/guides/spend-permissions/quick-start", - }, - { - text: "API Reference", - items: [ - { - text: "SpendPermissionManager Contract", - link: "/guides/spend-permissions/api-reference/spendpermissionmanager", - }, - { - text: "Fetch Permissions API", - link: "/guides/spend-permissions/api-reference/coinbase-fetchpermissions", - }, - { - text: "Client Resources", - link: "/guides/spend-permissions/api-reference/client-resources", - }, - ], - }, - ], - }, - { - text: "Paymasters (Sponsored Transactions)", - link: "/guides/paymasters", - }, - { - text: "Token Paymasters (Gas Tokens)", - link: "/guides/erc20-paymasters", - }, - { - text: "MagicSpend Support", - link: "/guides/magic-spend", - }, - { - text: "Tips & Tricks", - items: [ - { - text: "Inspect Transaction Simulation", - link: "/guides/tips/inspect-txn-simulation", - }, - { - text: "Popup Tips", - link: "/guides/tips/popup-tips", - }, - ], - }, + { text: "Install for Web", link: "/introduction/install-web" }, + { text: "Install for React Native", link: "/introduction/install-react-native" }, + { text: "Recommend Libraries", link: "/introduction/recommended-libraries" }, + { text: "Starter Templates", link: "/introduction/templates" }, + { text: "Base Gasless Campaign", link: "/introduction/base-gasless-campaign" }, ], }, + { - text: "SDK", - collapsed: false, + text: "Features", items: [ { - text: "Getting Started (v4.2.0+)", - link: "/sdk/getting-started", + text: "Built-in Features", items: [ - { - text: "createCoinbaseWalletSDK", - link: "/sdk/create-coinbase-wallet-sdk", - }, + { text: "Single Sign On", link: "/features/single-sign-on" }, + { text: "Networks", link: "/features/networks" }, + { text: "Passkeys", link: "/features/passkeys" }, + { text: "Recovery", link: "/features/recovery-keys" }, + { text: "MagicSpend", link: "/features/MagicSpend" }, ], }, { - text: "Legacy Setup", - link: "/sdk/legacy-setup", + text: "Optional Features", items: [ - { - text: "makeWeb3Provider", - link: "/sdk/make-web3-provider", - }, + { text: "Gas-free Transactions", link: "/features/gas-free-transactions" }, + { text: "Spend Permissions", link: "/features/spend-permissions" }, + { text: "Batch Transactions", link: "/features/batch-operations" }, + { text: "Custom Gas Tokens", link: "/features/custom-gas-tokens" }, ], }, - { - text: "Upgrading from 3.x", - link: "/sdk/v3-to-v4-changes", - }, ], }, { - text: "Smart Contracts", - collapsed: false, + text: "Usage Details", items: [ - { - text: "Smart Wallet", - link: "https://github.com/coinbase/smart-wallet", - }, - { - text: "Spend Permissions", - link: "https://github.com/coinbase/spend-permissions", - }, - { - text: "MagicSpend", - link: "https://github.com/coinbase/magic-spend", - }, + { text: "Signature Verification", link: "/usage-details/signature-verification" }, + { text: "Popups", link: "/usage-details/popups" }, + { text: "Simulations", link: "/usage-details/Simulations" }, + { text: "Gas Usage", link: "/usage-details/gas-usage" }, + { text: "Self Calls", link: "/usage-details/self-calls" }, ], }, { - text: "FAQ", + text: "SDK", collapsed: false, items: [ { - text: "Why does it cost more on Ethereum L1?", - link: "/faq/why-does-it-cost-more-on-ethereum-l1", - }, - { - text: "What happens if keys.coinbase.com is unavailable?", - link: "/faq/what-happens-if-keys-coinbase-com-is-unavailable", + text: "createCoinbaseWalletSDK", + link: "/sdk/create-coinbase-wallet-sdk", }, ], },