/coinbase-wallet-sdk

An open protocol that lets users connect their mobile wallets to your DApp

Primary LanguageTypeScriptMIT LicenseMIT

Coinbase Wallet SDK

npm npm npm

If you'd like to build a dapp for Coinbase smart wallet using our v4 beta release, check out our step by step instructions to get started with Coinbase Wallet SDK v4 and wagmi.

Coinbase Wallet SDK lets developers connect their dapps to Coinbase Wallet in the following ways:

  1. Coinbase smart wallet (v4 only)

    • EIP-4337 account abstraction using passkeys
      • No passwords or PIN
      • No seed phrase management
      • No extension or app downloads
    • Near instant onboarding
    • Spend with Coinbase balance
    • Gas sponsorship via paymasters
    • Batch transactions
    • Desktop and mobile compatible

  2. Coinbase Wallet mobile for Android and iOS

    • Desktop: Users can connect to your dapp by scanning a QR code
    • Mobile: Users can connect to your mobile dapp through a deeplink to the dapp browser

  3. Coinbase Wallet extension for Chrome and Brave

    • Desktop: Users can connect by clicking the connect with extension option.

Installing and Upgrading

Migrating from v3 to v4? Please see our v4 migration guide for a full list of breaking changes.

Installing Wallet SDK

  1. Check available versions:

      # yarn
  yarn info @coinbase/wallet-sdk versions

  # npm
  npm view @coinbase/wallet-sdk versions

  2. Install latest version:

    # yarn
yarn add @coinbase/wallet-sdk

# npm
npm install @coinbase/wallet-sdk

  3. Check installed version:

    # yarn
yarn list @coinbase/wallet-sdk

# npm
npm list @coinbase/wallet-sdk

Upgrading Wallet SDK

Upgrade Coinbase Wallet SDK using yarn or npm.

yarn/npm

  1. Compare installed version with latest:

    # yarn
yarn outdated @coinbase/wallet-sdk

# npm
npm outdated @coinbase/wallet-sdk

  2. Update to latest:

    # yarn
yarn upgrade @coinbase/wallet-sdk --latest

# npm
npm update @coinbase/wallet-sdk

Basic Usage

  1. Initialize SDK

    const sdk = new CoinbaseWalletSDK({
  appName: 'SDK Playground',
});

  2. Make web3 Provider

    const provider = sdk.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],
]);

    See more example methods in apps/testapp/src/components/RpcMethods/method

  5. Handle provider events

    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);
});

Developing locally and running the test dapp

  • The Coinbase Wallet SDK test dapp can be viewed here https://coinbase.github.io/coinbase-wallet-sdk/.

  • To run it locally follow these steps:

    1. Fork this repo and clone it
    2. From the root dir run yarn install
    3. cd apps/testapp && yarn install to install testapp dependencies
    4. From the root dir run yarn dev
    • starts two dev servers in parallel:
      • @coinbase/wallet-sdk-testapp
      • @coinbase/wallet-sdk
    1. Visit localhost:3001 in your browser to view the testapp

Attributions