ConnectButton_detailsButtonOptions
Options for configuring the ConnectButton
's Details Button
type ConnectButton_detailsButtonOptions = { className?: string; connectedAccountAvatarUrl?: string; connectedAccountName?: React.ReactNode; displayBalanceToken?: Record<number, string>; render?: () => JSX.Element; showBalanceInFiat?: SupportedFiatCurrency; style?: React.CSSProperties;};
CSS class to apply to the details button element
type className = string;
Use custom avatar URL for the connected wallet image in the ConnectButton
details button, overriding ENS avatar or Blobbie icon.
type connectedAccountAvatarUrl = string;
Render custom UI for the connected wallet name in the ConnectButton
details button, overriding ENS name or wallet address.
type connectedAccountName = React.ReactNode;
Display the balance of a token instead of the native token in ConnectButton
details button.
type displayBalanceToken = Record<number, string>;
<ConnectButton detailsButton={{ displayBalanceToken:{ // show USDC balance when connected to Ethereum mainnet or Polygon [ethereum.id]: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599", [polygon.id]: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359", } })/>
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;
CSS styles to apply to the details button element
type style = React.CSSProperties;