Skip to main content

Connect Wallet Button

Button to connect a user’s wallet to your app, with support for MetaMask, Coinbase, Rainbow, TrustWallet and will add all other WalletConnect wallets.

Wallets you provide to the ThirdwebProvider's supportedWallets prop are shown as options to connect to (if not configured, the default options are shown: MetaMask and CoinbaseWallet).

import { ConnectWallet } from "@thirdweb-dev/react-native";

Usage​

Render the ConnectWallet component to display the button.

import { ConnectWallet } from "@thirdweb-dev/react-native";

function App() {
  return <ConnectWallet />;
}

Configuration​

theme (optional)​

You can pass a custom theme object that will control the colors of the button or pass one of our default themes: light or dark.

The default value is "dark".

Here's a complete walk through on how to fully customize the theme and pass your own fonts: Pixels case-study

import { ConnectWallet } from "@thirdweb-dev/react-native";

function App() {
  return (
    <ConnectWallet
      theme="dark"
    />
  );
}

You could also define custom background and text color for the button:

import { ConnectWallet, lightTheme } from "@thirdweb-dev/react-native";

function App() {
  return (
    <ConnectWallet
      theme={lightTheme({
        buttonBackgroundColor: 'black'
        buttonTextColor: 'white'
      })}
    />
  );
}

Or you can fully customize the theme:

import { ConnectWallet, darkTheme } from "@thirdweb-dev/react-native";

const darkThemeCustom = darkTheme();

function App() {
  return (
    <ConnectWallet
      theme={{
        ...darkThemeCustom,
        colors: {
          ...darkThemeCustom.colors,
          backgroundHighlight: "blue",
        },
      }}
    />
  );
}

buttonTitle (optional)​

Change the text the button displays while in the disconnected state.

The default value is "Connect Wallet".

import { ConnectWallet } from "@thirdweb-dev/react-native";

function App() {
  return (
    <ConnectWallet
      buttonTitle="Connect Wallet"
    />
  );
}

modalTitle (optional)​

Change the title of Connect Wallet Modal's title

The default is "Connect".

import { ConnectWallet } from "@thirdweb-dev/react-native";

function App() {
  return (
    <ConnectWallet
      modalTitle="Login"
    />
  );
}

modalTitleIconUrl (optional)​

Change the icon of the Connect Wallet Modal's title.

The default is the thirdweb logo.

If you pass an empty url, the icon will be hidden.

It accepts regular image extensions and svgs.

import { ConnectWallet } from "@thirdweb-dev/react-native";

function App() {
  return (
    <ConnectWallet
      modalTitleIconUrl="https://path-to-the-icon"
    />
  );
}

detailsButton (optional)​

Render a custom button to display connected wallet details

import { ConnectWallet } from "@thirdweb-dev/react-native";

function App() {
  return (
    <ConnectWallet
      detailsButton={() => {
        return <Button title="My Button" />;
      }}
    />
  );
}

switchToActiveChain (optional)​

Specify whether to show a "Switch Network" button after the wallet is connected but it is not connected to the activeChain set in ThirdwebProvider to encourage the user to switch to the correct network in their wallet.

activeChain must be explicitly set in ThirdwebProvider for this to work.

By default, it is set to false.

<ConnectWallet switchToActiveChain={true} />

hideTestnetFaucet (optional)​

Hide option to request testnet funds for testnets in dropdown

<ConnectWallet hideTestnetFaucet={true} />

You can show a "Terms of Service" and/or "Privacy Policy" link in the ConnectWallet Modal by passing the termsOfServiceUrl and/or privacyPolicyUrl props

<ConnectWallet
  termsOfServiceUrl="https://...."
  privacyPolicyUrl="https://...."
/>

supportedTokens (optional)​

Customize the tokens shown in the "Send Funds" screen for various networks.

By default, The "Send Funds" screen shows a few popular tokens on for default chains and the native token. For other chains it only shows the native token.

import { Base } from "@thirdweb-dev/chains";

<ConnectWallet
  supportedTokens={{
    // Show "Dai Stablecoin" when connected to the "Base" mainnet
    [Base.chainId]: [
      {
        address: "0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb",
        name: "Dai Stablecoin",
        symbol: "DAI",
        icon: "https://assets.coingecko.com/coins/images/9956/small/Badge_Dai.png?1687143508",
      },
      // ...etc
    ],
  }}
/>;

displayBalanceToken​

Display the balance of a token instead of the native token in ConnectWallet details button.

<ConnectWallet
  displayBalanceToken={{
    // show Wrapped BTC balance if connected to Ethereum mainnet
    1: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599",
  }}
/>

Localizing the component​

We support localization of our SDK with support for a few languages. You can pass a locale prop to our ThirdwebProvider, see more info in Localizing our UI components.