Add to Existing React Native App
This guide helps you add support for Smart Wallet into a React Native app by integrating the Mobile Wallet Protocol Client.
Before You Start
This guide walks you through adding support for Smart Wallet into an existing React Native app or starter project.
If you prefer to skip ahead and start with a working example, navigate to the repository or run the following command to clone it locally:
git clone https://github.com/MobileWalletProtocol/smart-wallet-expo-example.git
If you are looking to integrate Smart Wallet into an existing React Native app or starter project, follow the instructions below.
Step 1: Install Mobile Wallet Protocol Client
Add the latest version of Mobile Wallet Protocol Client to your project.
npm i @mobile-wallet-protocol/client@latest
Step 2: Add Polyfills
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;
Step 3: Usage
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 EIP1193Provider
instance, which is EIP-1193 compliant.
import { EIP1193Provider } from "@mobile-wallet-protocol/client";
// Step 1. Initialize provider with your dapp's metadata and target wallet
const metadata = {
name: "My App Name",
customScheme: "myapp://", // only custom scheme (e.g. `myapp://`) is supported in v1.0.0
chainIds: [8453],
logoUrl: "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 version 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 = {
name: "My App Name",
customScheme: "myapp://", // only custom scheme (e.g. `myapp://`) is supported in v1.0.0
chainIds: [8453],
logoUrl: "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] });
}}
/>
);
Give feedback!
Send us feedback on the Coinbase Developer Platform Discord or create a new issue on the MobileWalletProtocol/react-native-client repository.
::::