Create a React Native App

To make these instructions concrete, we have created a sample ecosystem wallet called Rapidfire ID. To interact with it, you can find its SDK in the NPM package directory: @rapidfire/id.

You can check out the GitHub repository for Rapidfire Wallet to learn how to create your own wallet.

This guide will walk you through adding support for any ecosystem wallet into a React Native app by integrating the Mobile Wallet Protocol Client.

If you need a template or scaffold to start with, you can check out the Ecosystem Wallet Expo Example.

Prerequisites#

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]

[yarn]

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]

[yarn]

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

[polyfills.js]

[App.tsx]

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

Setup#

Install Mobile Wallet Protocol Client#

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

[npm]

[yarn]

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

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.

If your app is using wallet aggregator, go straight to Option 2: Wagmi Connector for 1-line integration. :)

Option 1: EIP-1193 Provider#

Create a new EIP1193Provider instance, which is EIP-1193 compliant.

[App.tsx]

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: {
        type: 'web',
        name: "Rapid fire wallet",
        scheme: 'https://id.sample.openfort.xyz',
        iconUrl: 'https://purple-magnificent-bat-958.mypinata.cloud/ipfs/QmfQrh2BiCzugFauYF9Weu9SFddsVh9qV82uw43cxH8UDV',
    },
});
// ...
// 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]

[yarn]

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.

[config.ts]

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: {
        type: 'web',
        name: "Rapid fire wallet",
        scheme: 'https://id.sample.openfort.xyz',
        iconUrl: 'https://purple-magnificent-bat-958.mypinata.cloud/ipfs/QmfQrh2BiCzugFauYF9Weu9SFddsVh9qV82uw43cxH8UDV',
      },
    }),
  ],
  transports: {
    [base.id]: http(),
  },
});

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

[App.tsx]

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

Gas Sponsorship#

If you want to sponsor transactions, you need to add #policy=POLICY_ID to the wallet scheme.

#policy=POLICY_ID

For example:

[config.ts]

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: {
        type: 'web',
        name: "Rapid fire wallet",
        scheme: 'https://id.sample.openfort.xyz#policy=pol_a909d815-9b6c-40b2-9f6c-e93505281137',
        iconUrl: 'https://purple-magnificent-bat-958.mypinata.cloud/ipfs/QmfQrh2BiCzugFauYF9Weu9SFddsVh9qV82uw43cxH8UDV',
      },
    }),
  ],
  transports: {
    [base.id]: http(),
  },
});