Smart Wallet Setup

This page explains how to install and upgrade Coinbase Wallet SDK.

Installing or upgrading package version

The Smart Wallet features are available in version .

{
  "dependencies": {
    "@coinbase/wallet-sdk": "^4.0.0-beta.6"
  }
}

If you are using an aggregator library, such as wagmi, you will need to specify a resolution to use the appropriate beta library version. Yarn is recommended in this case to simplify transitive dependencies.

{
  "resolutions": {
    "@coinbase/wallet-sdk": "npm:@coinbase/wallet-sdk@4.0.0-beta.6"
  }
}

Usage

With SDK ^4.0, Smart Wallet should work just like Externally Owned Account, with no modification needed.

1. Initialize SDK

// Initialize Coinbase Wallet SDK
export const coinbaseWalletSdk = new CoinbaseWalletSDK({
  appName: APP_NAME,
});

SDK Option Details

• appName: string
  • Your dapp's name to display in wallet with requests
• appLogoUrl?: string
  • Your dapp's logo
  • Favicon is used if unspecified
• chainIds?: number[]
  • An array of chain ids your dapp supports
  • The first chain in this array will be used as the default chain.
  • Removes the need for non-mainnet dapps to request switching chains immediately.
  • Default value is [1] (mainnet)
• smartWalletOnly?: boolean;
  • If true, hides options to connect via Coinbase Wallet mobile and Coinbase Wallet extension
  • Default value is false

// For example, initialize Coinbase Wallet SDK, if your dapp would like to only support Smart Wallet
export const coinbaseWalletSdk = new CoinbaseWalletSDK({
  appName: "My Example App",
  chainIds: ["8453", "84532"],
  smartWalletOnly: true,
});

2. Make web3 Provider

const provider = coinbaseWalletSdk.makeWeb3Provider();

3. Request accounts to initialize connection to wallet

const addresses = provider.request('eth_requestAccounts')

4. Make more requests

provider.request('personal_sign', [`0x${Buffer.from('test message', 'utf8').toString('hex')}`, addresses[0]])

For more examples rpc requests, see the ethereum spec.

5. Handle provider events as needed

provider.on('connect', (info) => {
    setConnect(info);
});

provider.on('disconnect', (error) => {
    setDisconnect({ code: error.code, message: error.message });
});

provider.on('accountsChanged', (accounts) => {
    setAccountsChanged(accounts);
});

provider.on('chainChanged', (chainId) => {
    setChainChanged(chainId);
});

provider.on('message', (message) => {
    setMessage(message);
});

Create a new wallet passkey

Once the wallet starts the connection process, the end user can create, select an existing passkey wallet, or QR connect with an existing wallet. To highlight the create flow, the user will be prompted to create a passkey. The available options are based on browser, operating system, and peripherals.

1. Select Create a wallet.
2. Choose a provider to create a passkey.
3. Click Continue to use this passkey as the primary signer for your new Smart Wallet.

Expand for images and click to enlarge

Select Create a wallet

Choose a provider to create a passkey

Click Continue to use this passkey