The button to connect to the blockchain wallet. Usually, you need to use it with the Connector component.
Note: The examples in this document are just pure UI examples. In Ant Design Web3, the UI module and the connection module are separated. To connect to the wallet, please refer to the documentation of Ethereum Adapter or read the Adapter documentation for more information.
After configuring the quickConnect property, the installed wallets and universal protocols (such as WalletConnect) will be displayed directly on the button.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| account | Current connected account | Account | - | - |
| tooltip | Show tooltip when mouse enter address | boolean | ConnectButtonTooltipProps | false | - |
| actionsMenu | Config menu items | boolean | ActionsMenu | - | - |
| profileModal | Config profile modal | boolean | ProfileModal | - | - |
| avatar | Config avatar, used to display user avatar in profile modal | AvatarProps | - | - |
| onMenuItemClick | Menu item click event | (e: NonNullable<MenuProps['items']>[number]) => void | - | - |
| balance | Balance | Balance | - | - |
| availableChains | List of available chains | Chain[] | - | - |
| availableWallets | List of available wallets | Wallet[] | - | - |
| quickConnect | Quick connect | boolean | false | - |
| locale | Multilingual settings | Locale["ConnectButton"] | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| value | Balance | bigint | number | - | - |
| symbol | Token symbol | string | - | - |
| decimals | Token decimals | number | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| title | Tooltip title | ReactNode | - | - |
| copyable | Whether to copy | boolean | - | - |
| format | Format address | boolean | (address: string) => React.ReactNode | - | - |
More properties inherit from Ant Design's Tooltip component, you can check the component documentation for more information.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| extraItems | Extra menu items | MenuItemType[] | - | - |
More properties inherit from Ant Design's Menu component, you can check the component documentation for more information.
ProfileModal properties inherit from Ant Design's Modal component, you can check the component documentation for more information.
