UseWalletDetailsModalOptions
type UseWalletDetailsModalOptions = { connectOptions?: DetailsModalConnectOptions; connectedAccountAvatarUrl?: string; connectedAccountName?: React.ReactNode; displayBalanceToken?: Record<number, string>; footer?: (props: { close: () => void }) => JSX.Element; hideBuyFunds?: boolean; hideDisconnect?: boolean; hideReceiveFunds?: boolean; hideSendFunds?: boolean; hideSwitchWallet?: boolean; showTestnetFaucet?: boolean; supportedNFTs?: SupportedNFTs;};
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>",});
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;
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 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", },});