Create a React Native App

Deeplink handling

Your app needs to be able to handle Universal Links (iOS) and App Links (Android). Opening https://your-app.example.com/coinbase-wallet-sdk should open up your app. You can see more detailed instructions on setting up deeplinks in the Expo docs.

Install peer dependencies

The Mobile Wallet Protocol Client library requires the Expo WebBrowser and Async Storage packages to be installed. Follow the instructions on the respective pages for any additional setup.

npm i expo expo-web-browser @react-native-async-storage/async-storage

Polyfills

Mobile Wallet Protocol Client requires crypto.randomUUID, crypto.getRandomValues, and URL to be polyfilled globally since they are not available in the React Native environment.

Below is an example of how to polyfill these functions in your app using the expo-crypto and expo-standard-web-crypto packages.

npm i expo-crypto expo-standard-web-crypto react-native-url-polyfill

import 'react-native-url-polyfill/auto'
import { polyfillWebCrypto } from 'expo-standard-web-crypto'
import { randomUUID } from "expo-crypto"
 
polyfillWebCrypto()
crypto.randomUUID = randomUUID

Install Mobile Wallet Protocol Client

Add the latest version of Mobile Wallet Protocol Client to your project.

npm i @mobile-wallet-protocol/client@latest

Configuration

Next, set up your app to pass in deeplinks coming from Smart Wallet to Mobile Wallet Protocol Client so that it can handle responses to the requests you make. In your app, this might look something like the following.

Below is an example of how to set up deeplink handling in your app using the Expo Linking module.

import { handleResponse } from '@mobile-wallet-protocol/client'
import * as Linking from 'expo-linking'
 
// ...
 
useEffect(() => {
  const subscription = Linking.addEventListener('url', ({ url }) => {
    const handled = handleResponse(url)
    if (!handled) {
      // handle other deeplinks
    }
  })
 
  return () => subscription.remove()
}, [])

Mobile Wallet Protocol Client provides 2 interfaces for mobile app to interact with the Smart Wallet, an EIP-1193 compliant provider interface and a wagmi connector.

Option 1: EIP-1193 Provider

Create a new CoinbaseWalletSDK instance and use the makeWeb3Provider function to create an EIP-1193 compliant provider.

The appDeeplinkUrl is required and should match the deeplink URL you set up earlier.

import { EIP1193Provider } from '@mobile-wallet-protocol/client'
 
// Step 1. Initialize provider with your dapp's metadata and target wallet
const metadata = {
  appDeeplinkUrl: 'https://your-app.example.com', // required
  appName: "My App Name",
  appChainIds: [8453],
  appLogoUrl: 'https://example.com/logo.png'
}
const provider = new EIP1193Provider({
  metadata,
  wallet: Wallets.CoinbaseSmartWallet,
});
 
// ...
 
// 2. Use the provider
const addresses = await provider.request({method: 'eth_requestAccounts'})
const signedData = await provider.request({
  method: "personal_sign",
  params: ["0x48656c6c6f20776f726c6421", addresses[0]],
})

Option 2: Wagmi Connector

Add the latest verion of Mobile Wallet Protocol wagmi-connectors to your project.

npm i @mobile-wallet-protocol/wagmi-connectors@latest

Simply import the createConnectorFromWallet function and pass in the wallet you want to use to wagmi config.

import {
  createConnectorFromWallet,
  Wallets,
} from "@mobile-wallet-protocol/wagmi-connectors";
 
const metadata = {
  appDeeplinkUrl: 'https://your-app.example.com', // required
  appName: "My App Name",
  appChainIds: [8453],
  appLogoUrl: 'https://example.com/logo.png'
}
 
export const config = createConfig({
  chains: [base],
  connectors: [
    createConnectorFromWallet({
      metadata,
      wallet: Wallets.CoinbaseSmartWallet,
    }),
  ],
  transports: {
    [base.id]: http(),
  },
});

Then you can use wagmi's react interface to interact with the Smart Wallet.

import { useConnect } from "wagmi";
 
// ...
 
const { connect, connectors } = useConnect();
 
return (
  <Button
    title={"Connect"}
    onPress={() => {
      connect({ connector: connectors[0] })
    }}
  />
)

Send us feedback on the Coinbase Developer Platform Discord or create a new issue on the MobileWalletProtocol/react-native-client repository.