@coinbase/wallet-sdk

What is @coinbase/wallet-sdk?

@coinbase/wallet-sdk is a JavaScript library that allows developers to integrate Coinbase Wallet into their web applications. It provides functionalities for connecting to the wallet, managing user accounts, and interacting with the Ethereum blockchain.

What are @coinbase/wallet-sdk's main functionalities?

Connect to Coinbase Wallet

This feature allows you to connect to the Coinbase Wallet. You can specify the app name, logo URL, and whether to use dark mode. The `makeWeb3Provider` method creates a Web3 provider instance connected to the Ethereum mainnet.

const { CoinbaseWalletSDK } = require('@coinbase/wallet-sdk');
const wallet = new CoinbaseWalletSDK({ appName: 'My App', appLogoUrl: 'https://example.com/logo.png', darkMode: false });
const ethereum = wallet.makeWeb3Provider('https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID', 1);

Request Account Access

This feature allows you to request access to the user's Ethereum accounts. The `eth_requestAccounts` method prompts the user to connect their wallet and grants access to their accounts.

ethereum.request({ method: 'eth_requestAccounts' }).then(accounts => {
  console.log(accounts);
}).catch(error => {
  console.error(error);
});

Send Transactions

This feature allows you to send transactions from the connected wallet. You can specify the recipient address, sender address, value, and gas limit. The `eth_sendTransaction` method sends the transaction and returns the transaction hash.

const transactionParameters = {
  to: '0xRecipientAddress',
  from: '0xYourAddress',
  value: '0x29a2241af62c0000', // 0.1 ETH
  gas: '0x5208', // 21000 GWEI
};
ethereum.request({ method: 'eth_sendTransaction', params: [transactionParameters] }).then(txHash => {
  console.log(txHash);
}).catch(error => {
  console.error(error);
});

Other packages similar to @coinbase/wallet-sdk

web3

Web3.js is a collection of libraries that allow you to interact with a local or remote Ethereum node using HTTP, IPC, or WebSocket. It provides functionalities for sending transactions, interacting with smart contracts, and more. Compared to @coinbase/wallet-sdk, Web3.js is more general-purpose and can be used with various Ethereum wallets and providers.

ethers

Ethers.js is a library for interacting with the Ethereum blockchain and its ecosystem. It provides a concise and consistent interface for sending transactions, interacting with smart contracts, and more. Ethers.js is known for its simplicity and ease of use, making it a popular choice among developers. Unlike @coinbase/wallet-sdk, it is not specific to Coinbase Wallet and can be used with various providers.

walletconnect

WalletConnect is an open protocol for connecting desktop DApps to mobile wallets using end-to-end encryption by scanning a QR code. It supports multiple wallets and provides a secure way to connect and interact with decentralized applications. Compared to @coinbase/wallet-sdk, WalletConnect offers broader wallet compatibility and focuses on secure connections between DApps and mobile wallets.

README

Coinbase Wallet SDK

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

• Coinbase Smart Wallet
  • Docs
• 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
• Coinbase Wallet extension for Chrome and Brave
  • Desktop: Users can connect by clicking the connect with extension option.

Installing Wallet SDK

• Check available versions:

    # yarn
    yarn info @coinbase/wallet-sdk versions
  
    # npm
    npm view @coinbase/wallet-sdk versions
  

• Install latest version:

  # yarn
  yarn add @coinbase/wallet-sdk
  
  # npm
  npm install @coinbase/wallet-sdk
  

• 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

• Compare installed version with latest:

  # yarn
  yarn outdated @coinbase/wallet-sdk
  
  # npm
  npm outdated @coinbase/wallet-sdk
  

• Update to latest:

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

Basic Usage

• Initialize SDK

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

• Make web3 Provider

  const provider = sdk.makeWeb3Provider();
  

• Request accounts to initialize connection to wallet

  const addresses = provider.request({
    method: 'eth_requestAccounts',
  });
  

• Make more requests

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

• 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:

  • Fork this repo and clone it
  • From the root dir run yarn install
  • From the root dir run yarn dev