UseWalletDetailsModalOptions

Array of chains that your app supports. They will be displayed in the network selector in the screen.

This is only relevant if your app is a multi-chain app and works across multiple blockchains. If your app only works on a single blockchain, you should only specify the chain prop.

You can create a Chain object using the defineChain function. At minimum, you need to pass the id of the blockchain to defineChain function to create a Chain object.

import { defineChain } from "thirdweb/react";
 
const polygon = defineChain({
  id: 137,
});

type chains = Array<Chain>;

A client is the entry point to the thirdweb SDK. It is required for all other actions. You can create a client using the createThirdwebClient function. Refer to the Creating a Client documentation for more information.

You must provide a clientId or secretKey in order to initialize a client. Pass clientId if you want for client-side usage and secretKey for server-side usage.

import { createThirdwebClient } from "thirdweb";
 
const client = createThirdwebClient({
  clientId: "<your_client_id>",
});

type client = ThirdwebClient;

Options to configure the Connect UI shown when user clicks the "Connect Wallet" button in the Wallet Switcher screen.

type connectOptions = DetailsModalConnectOptions;

Use custom avatar URL for the connected wallet image in the ConnectButton Details Modal, overriding ENS avatar or Blobbie icon.

type connectedAccountAvatarUrl = string;

Render custom UI for the connected wallet name in the ConnectButton Details Modal, overriding ENS name or wallet address.

type connectedAccountName = React.ReactNode;

Display the balance of a token instead of the native token

type displayBalanceToken = Record<number, string>;

const displayBalanceToken = {
  // show USDC balance when connected to Ethereum mainnet or Polygon
  [ethereum.id]: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599",
  [polygon.id]: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
};

Hide the "Buy Funds" button in the Details Modal.

By default the "Buy Funds" button is shown.

type hideBuyFunds = boolean;

Hide the "Disconnect Wallet" button in the Wallet Details Modal.

By default it is false

type hideDisconnect = boolean;

Hide the "Receive Funds" button in the Details Modal.

By default the "Receive Funds" button is shown.

type hideReceiveFunds = boolean;

Hide the "Send Funds" button in the Details Modal.

By default the "Send Funds" button is shown.

type hideSendFunds = boolean;

Hide the "Switch Wallet" button in the Wallet Details Modal.

By default it is false

type hideSwitchWallet = boolean;

By default - Details Modal UI uses the en-US locale for english language users.

You can customize the language used in the Details Modal UI by setting the locale prop.

Refer to the LocaleId type for supported locales.

type locale = LocaleId;

customize the Network selector shown in the Wallet Details Modal

type networkSelector = NetworkSelectorProps;

Configure options for thirdweb Pay.

thirdweb Pay allows users to buy tokens using crypto or fiat currency.

type payOptions = Extract<PayUIOptions, { mode?: "fund_wallet" }>;

Show a "Request Testnet funds" link in Wallet Details Modal when user is connected to a testnet.

By default it is false , If you want to show the "Request Testnet funds" link when user is connected to a testnet, set this prop to true

type showTestnetFaucet = boolean;

Customize the NFTs shown in the "View Funds" screen in Details Modal for various networks.

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

type supportedNFTs = SupportedNFTs;

supportedTokens prop allows you to customize this list as shown below which shows "Pudgy Penguins" when a users wallet is connected to Ethereum mainnet.

import { ConnectButton } from "thirdweb/react";
 
function Example() {
  return (
    <ConnectButton
      supportedNFTs={{
        // when connected to Ethereum mainnet - show Pudgy Penguins
        1: ["0xBd3531dA5CF5857e7CfAA92426877b022e612cf8"],
      }}
    />
  );
}

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

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

type supportedTokens = SupportedTokens;

supportedTokens prop allows you to customize this list as shown below which shows "Dai Stablecoin" when users wallet is connected to the "Base" mainnet.

import { useWalletDetailsModal } from "thirdweb/react";
 
function Example() {
  const detailsModal = useWalletDetailsModal();
 
  function handleClick() {
    detailsModal.open({
      client,
      supportedTokens: {
        84532: [
          {
            address: "0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb", // token contract address
            name: "Dai Stablecoin",
            symbol: "DAI",
            icon: "https://assets.coingecko.com/coins/images/9956/small/Badge_Dai.png?1687143508",
          },
        ],
      },
    });
  }
 
  return <button onClick={handleClick}> show wallet details </button>;
}

Set the theme for the Wallet Details Modal. By default it is set to "dark"

theme can be set to either "dark" , "light" or a custom theme object. You can also import lightTheme or darkTheme functions from thirdweb/react to use the default themes as base and overrides parts of it.

type theme = "light" | "dark" | Theme;

import { lightTheme } from "thirdweb/react";
 
const customTheme = lightTheme({
  colors: {
    modalBg: "red",
  },
});