Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wilson/update #120

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions docs/pages/features/MagicSpend.mdx
Original file line number Diff line number Diff line change
@@ -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.
8 changes: 8 additions & 0 deletions docs/pages/features/batch-operations.mdx
Original file line number Diff line number Diff line change
@@ -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.
9 changes: 9 additions & 0 deletions docs/pages/features/custom-gas-tokens.mdx
Original file line number Diff line number Diff line change
@@ -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.
8 changes: 8 additions & 0 deletions docs/pages/features/gas-free-transactions.mdx
Original file line number Diff line number Diff line change
@@ -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.
36 changes: 2 additions & 34 deletions docs/pages/features/networks.mdx
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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

<Callout type="warning">
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.
</Callout>

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
46 changes: 14 additions & 32 deletions docs/pages/features/passkeys.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,25 @@ import { Callout } from "vocs/components";

## Passkeys

<Callout type="info">
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.
</Callout>
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.

<Callout type="warning">
Removing keys is currently not supported in keys.coinbase.com.
</Callout>
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.
</Callout>
79 changes: 10 additions & 69 deletions docs/pages/features/recovery-keys.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,18 @@ import { Callout } from "vocs/components";

# Recovery Keys

<Callout type="warning">
Generate a recovery key before you need it. Recovery keys are essential for maintaining access to your wallet.
</Callout>
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
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
1. Navigate to the "Account Recovery" tab in [Smart Wallet settings](https://keys.coinbase.com/settings)
<div style={{ maxWidth: '400px' }}>
![Recovery Key Step 1: Access Account Recovery settings](/accountRecovery.png)
</div>

2. Click "Generate Recovery Key" to start the process
<div style={{ maxWidth: '400px' }}>
![Recovery Key Step 2: Generate a new recovery key](/generateRecoveryKey.png)
</div>

3. Submit the recovery key to complete the process
<div style={{ maxWidth: '400px' }}>
![Recovery Key Step 3: Submit recovery key](/submitRecoveryKey.png)
</div>

4. Your recovery key will be displayed - save it securely
<div style={{ maxWidth: '400px' }}>
![Recovery Key Step 4: Recovery key generated successfully](/recoveryKeyCreated.png)
</div>

5. You will need to replay the ownership change transaction in your wallet when using another network.
<div style={{ maxWidth: '400px' }}>
![Recovery Key Step 5: Transaction pending confirmation](/pendingOwnershipChange.png)
</div>
</div>

## Use a Recovery Key to Add a Passkey

<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
1. Sign in with your recovery key
<div style={{ maxWidth: '400px' }}>
![Recovery Key Step 1: Sign in with recovery key](/recoveryKeySignIn.png)
</div>

2. Review the security warning about recovery key scams
<div style={{ maxWidth: '400px' }}>
![Recovery Key Step 2: Security warning about scams](/recoveryKeyScamWarning.png)
</div>

3. Add a new passkey to regain access to your wallet
<div style={{ maxWidth: '400px' }}>
![Recovery Key Step 3: Add a new passkey](/recoveryKeyAddPasskey.png)
</div>
</div>

<Callout type="info">
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)
</Callout>

<Callout type="warning">
Removing keys is currently not supported in keys.coinbase.com.
</Callout>
9 changes: 9 additions & 0 deletions docs/pages/features/single-sign-on.mdx
Original file line number Diff line number Diff line change
@@ -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.
10 changes: 10 additions & 0 deletions docs/pages/features/spend-permissions.mdx
Original file line number Diff line number Diff line change
@@ -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"
2 changes: 1 addition & 1 deletion docs/pages/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
19 changes: 19 additions & 0 deletions docs/pages/introduction/install-react-native.mdx
Original file line number Diff line number Diff line change
@@ -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
```
:::
19 changes: 19 additions & 0 deletions docs/pages/introduction/install-web.mdx
Original file line number Diff line number Diff line change
@@ -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
```
:::
22 changes: 22 additions & 0 deletions docs/pages/introduction/recommended-libraries.mdx
Original file line number Diff line number Diff line change
@@ -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/)
2 changes: 2 additions & 0 deletions docs/pages/introduction/templates.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Templates
[Onchain App Template](https://github.com/coinbase/onchain-app-template)
18 changes: 7 additions & 11 deletions docs/pages/sdk/create-coinbase-wallet-sdk.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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
Expand Down
18 changes: 18 additions & 0 deletions docs/pages/usage-details/gas-usage.mdx
Original file line number Diff line number Diff line change
@@ -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 |
Loading
Loading