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

1. Coinbase Smart Wallet
   • Docs
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 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({
     method: '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