Skip to main content

Wallets

We have added support for a the following wallets in React Native:

  • MetaMask
  • Rainbow
  • Trust
  • Coinbase
  • Local Wallet
  • Smart Wallet

Below we'll show how to use them with our ThirdwebProvider.

Adding the wallets to the ThirdwebProvider​

App.tsx
import {
  metamaskWallet,
  trustWallet,
  localWallet,
} from "@thirdweb-dev/react-native";

const App = () => {
  return (
    <ThirdwebProvider
      dAppMeta={{
        name: "Example App",
        description: "This is an example app",
        logoUrl: "https://example.com/logo.png",
        url: "https://example.com",
      }}
      supportedWallets={[metamaskWallet(), trustWallet(), localWallet()]}
    >
      <AppInner />
    </ThirdwebProvider>
  );
};

By default, supportedWallets will have rainbowWallet and metamaskWallet since these two are the easiest to configure.

Configuring wallets​

MetaMask, Rainbow and Trust wallets​

These wallets are implementations of Wallet Connect V1 and V2. The dAppMeta prop passed in the ThirdwebProvider above will be used when connecting to the wallets to show your app's information.

For more information on these wallets config, please see their base WalletConnectV1 and WalletConnectV2 specific info:

MetaMask and Rainbow are extensions of WalletConnectV1 since they have not added support for WC V2 and Trust is an extension of WalletConnectV2, this means that you can call:

metamaskWallet(config); // this config is the same as the one for wallet connect v1
rainbowWallet(config); // this config is the same as the one for wallet connect v1

trustWallet(config); // this config is the same as the one for wallet connect v2

Coinbase Wallet​

To configure the Coinbase Wallet you need to follow the steps outlined in their Setup Guide. A few caveats before going through the guide:

  1. For Android, you only need to declare the <queries> tag in the AndroidManifest.xml if your app targets Android 11 (API level 30)
  2. For iOS, you need to setup UniversalLinks to allow the wallet to communicate back to your app, otherwise the wallet will not redirect you back to the app. You can pass your app's UniversalLink when you create the Coinbase Wallet:
App.tsx
import { coinbaseWallet } from "@thirdweb-dev/react-native";

const App = () => {
  return (
    <ThirdwebProvider
      supportedWallets={[
        coinbaseWallet({
          callbackURL: new URL("https://youruniversal.link"),
        }),
      ]}
    >
      <AppInner />
    </ThirdwebProvider>
  );
};

Local Wallet​

The local wallet works mostly the same as the web version, below we outline the key differences:

Configuration​

storage (optional)

This is the storage used for storing the private key, mnemonic or encrypted JSON. On React Native we need this storage to be encrypted since we store the private key to be able to recover your wallet for reconnections.

You can use any implementation of encrypted storage you want, as long as it conforms to the AsyncStorage interface:

export interface AsyncStorage {
  getItem(key: string): Promise<string | null>;
  setItem(key: string, value: string): Promise<void>;
  removeItem(key: string): Promise<void>;
}

If omitted, it defaults to Expo Secure Store, which stores the private key in your device in encrypted storage. We expose the createSecureStorage(name: string) utility function which creates a SecureStore instance that conforms to our AsyncStorage interface (see it in our GitHub)

Example:

import { createSecureStorage, LocalWallet } from "@thirdweb-dev/react-native";

const walletWithOptions = new LocalWallet(
  {
    storage: createSecureStorage("my-wallet"),
  },
);

Smart Wallet​

See our Smart Wallet documentation

Building your own wallet​

With our @thirdweb-dev/wallets sdk you can build your own wallets and integrate it into our ConnectWallet button. You can see how to build one in the Building a Wallet section of our wallets documentation.

Built-in wallets​

You can look at how the built-in wallets in the @thirdweb-dev/react-native package are implemented for reference: