UseWalletDetailsModalOptions
type UseWalletDetailsModalOptions = { assetTabs?: Array<AssetTabs>; connectedAccountAvatarUrl?: string; connectedAccountName?: React.ReactNode; connectOptions?: DetailsModalConnectOptions; displayBalanceToken?: Record<number, string>; footer?: (props: { close: () => void }) => JSX.Element; hideBuyFunds?: boolean; hideDisconnect?: boolean; hideReceiveFunds?: boolean; hideSendFunds?: boolean; hideSwitchWallet?: boolean; onClose?: (screen: string) => void; showBalanceInFiat?: SupportedFiatCurrency; showTestnetFaucet?: boolean; supportedNFTs?: SupportedNFTs;};
When you click on "View Assets", by default the "Tokens" tab is shown first. If you want to show the "NFTs" tab first, change the order of the asset tabs to: ["nft", "token"] Note: If an empty array is passed, the [View Funds] button will be hidden
type assetTabs = Array<AssetTabs>;
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,});
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>",});
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;
Options to configure the Connect UI shown when user clicks the "Connect Wallet" button in the Wallet Switcher screen.
type connectOptions = DetailsModalConnectOptions;
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;
customize the Network selector shown in the Wallet Details Modal
Configure options for thirdweb Pay.
thirdweb Pay allows users to buy tokens using crypto or fiat currency.
Show the token balance's value in fiat. Note: Not all tokens are resolvable to a fiat value. In that case, nothing will be shown.
type showBalanceInFiat = SupportedFiatCurrency;
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.
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.
import { lightTheme } from "thirdweb/react"; const customTheme = lightTheme({ colors: { modalBg: "red", },});