Docs

Integrate with ConnectWallet

If you also want to integrate this wallet with ConnectWallet component in React SDK or React Native SDK, You have to create a Wallet Configurator function which can be passed to ThirdwebProvider component

import { WalletConfig } from '@thirdweb-dev/react'
 
function myWallet (options?: MyWalletConfig): WalletConfig<MyWallet> {
  return {
    id: 'my-wallet',
    meta: {
      name: "My Wallet",
      iconURL: "https://...", // or ipfs://...
 
      // optional
      urls: {
        chrome: "https://...",
        firefox: "https://...",
        android: "https://...",
        ios: "https://...",
      },
    },
 
    // create and return wallet instance
    create(walletOptions) {
      return new MyWallet({ ...walletOptions, ...options })
    }
 
    // optional - render a UI for connecting your wallet
    connectUI(props) {
      return <MyWalletConnectionUI {...props} />;
    },
 
    // optional - override the default UI for selecting your wallet in the wallet selector screen
    selectUI(props) {
      return <MyWalletSelectionUI {...props} />
    }
 
    // optional
    isInstalled() {
      // detect if your wallet extension is installed on the user's browser/device
      return true; // or false
    },
 
    // optional - show a "recommended" badge below your wallet's name in the wallet selector screen
    recommended: true,
  };
};

Required

Optional


Creating wallet connection UI

import { ConnectUIProps } from '@thirdweb-dev/react';
 
function MyWalletConnectionUI(props: ConnectUIProps<MyWallet>) {
  return <div> ... </div>
}
 
function myWallet (options?: MyWalletConfig): WalletConfig<MyWallet> {
  // ...
  connectUI(props) {
    return <MyWalletConnectionUI {...props} />;
  }
}

Connecting your wallet in wallet connection UI

There are two ways to connect your wallet in connectUI

Rendering a custom UI for selecting your wallet

Instead of the default icon + name in the wallet selector screen, you can render a custom UI for your wallet.

Take in-app wallet for example, It renders Social Icons + Email Input.


This can be done by specifying a React component in the selectUI property of your wallet config.

import { SelectUIProps, ConnectionUIProps, WalletConfig } from '@thirdweb-dev/react';
 
// example: render an input field where the user can enter their email address
function MyWalletSelectionUI(props: SelectUIProps<MyWallet>) {
  const [email, setEmail] = useState('');
  const usesMoreWallets = props.supportedWallets.length > 1;
 
  return (
    <div>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <button
        onClick={() => {
          props.onSelect(email);
        }}
      >
        submit
      </button>
      {usesMoreWallets && <p> --- OR --- </p>}
    </div>
  );
}
 
function MyWalletConnectionUI(props: SelectUIProps<MyWallet>) {
  // Get the email address entered by the user in MyWalletSelectionUI
  const email = props.selectionData as string;
 
  return <div> ... </div>;
}
 
function myWallet (options?: MyWalletConfig): WalletConfig<MyWallet> {
  // ...
  selectUI(props) {
    return <MyWalletSelectionUI {...props} />;
  },
  connectUI(props) {
    return <MyWalletConnectionUI {...props} />
  }
}

Add your wallet to ThirdwebProvider

You can now use your wallet with the Connect Wallet button! Simply add it to the supportedWallets prop of the ThirdwebProvider.

<ThirdwebProvider
  supportedWallets={[myWallet()]}
  clientId="your-client-id"
>
  <App />
</ThirdwebProvider>;

Examples

You can look at how thirdweb-dev/react package's built-in wallets are implemented for reference:

Contributing to the Wallets package

If you think your wallet implementation would be useful to others, please consider sharing it by opening a PR to the @thirdweb-dev/wallets package.

View on GitHub