Docs

ConnectWallet

ConnectWallet component renders a button which when clicked opens a modal to allow users to connect to various wallets. It is extremely customizable and very easy to use.

Usage

  • Configure supportedWallets in ThirdwebProvider

    To Configure which wallets to show in the ConnectWallet Modal, you need to configure the supportedWallets prop in the ThirdwebProvider component which wraps your entire application.

    To display a Recommended tag below a wallet provider, pass in the recommended: true property in the wallet configurator function.

    import {
      ThirdwebProvider,
      metamaskWallet,
      coinbaseWallet,
      walletConnect,
    } from "@thirdweb-dev/react";
     
    function AppWithProviders() {
      return (
        <ThirdwebProvider
          supportedWallets={[
            metamaskWallet({
              recommended: true,
            }),
            coinbaseWallet(),
            walletConnect(),
          ]}
          clientId="<your_client_id>"
        >
          <App />
        </ThirdwebProvider>
      );
    }

    If supportedWallets is not configured in the ThirdwebProvider, the ConnectWallet Modal show the default wallets:

  • Configure ConnectWallet

    Render the ConnectWallet component anywhere in your application. Refer to Props to see the configuration options available

    import { ConnectWallet } from "@thirdweb-dev/react";
     
    function Example() {
      return (
        <div>
          <ConnectWallet />
        </div>
      );
    }

Props

Localization

You can set the locale prop of ThirdwebProvider component to change the language used in the ConnectWallet Modal.

Override UI and Metadata of wallets

Each Wallet Configurator function returns an object. This object contains the metadata and UI of the Wallet. You can choose to override them according to your needs.

import { metamaskWallet } from "@thirdweb-dev/react";
 
const metamaskConfig = metamaskWallet({ ... });
 
// override metadata
metamaskConfig.meta.name = "..."; // change the name
metamaskConfig.meta.iconURL = "..."; // change the icon
metamaskConfig.meta.urls = {
  // change urls to download the wallet on various platforms
  android: "https://...",
  ios: "https://...",
  chrome: "https://...",
};
 
// override connection UI by passing a react component
metamaskConfig.connectUI = () => {
	return <div> ... </div>;
};
 
// custom selection UI by passing a react component
metamaskConfig.selectUI = () => {
	return <div> ... </div>;
};
 
// custom logic to check if the wallet extension is installed or not
metamaskConfig.isInstalled = () => {
	if (window.ethereum) {
		return true;
	}
};

You can then pass the modified config to the supportedWallets prop in the ThirdwebProvider component.

<ThirdwebProvider
  supportedWallets={[metamaskConfig]}
  clientId="your-client-id"
/>;

Embed Modal UI in page

If you want to embed the ConnectWallet Modal UI directly in page instead of opening a Modal, you can use the ConnectEmbed component instead.