- 组件总览
- 通用
- 连接链
- UI 组件
- 高级
连接区块链钱包的按钮。通常来说,你需要配合 Connector 组件使用。
注:本文档中的示例仅仅是纯 UI 的示例,在 Ant Design Web3 中。UI 模块和连接模块是分离的。要想真正的连接钱包,请参考以太坊适配器的文档,或阅读适配器文档了解更多。
配置了 quickConnect
属性后,会在按钮上直接展示已安装的钱包和通用协议(比如 WalletConnect)的钱包。
属性 | 描述 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
account | 当前连接账号 | Account | - | - |
tooltip | 鼠标移入地址时展示提示 | boolean | ConnectButtonTooltipProps | false | - |
actionsMenu | 配置菜单项 | boolean | ActionsMenu | - | - |
profileModal | 配置信息弹框 | boolean | ProfileModal | - | - |
avatar | 配置头像,用于在个人信息弹框中展示用户头像 | AvatarProps | - | - |
onMenuItemClick | 菜单项点击事件 | (e: NonNullable<MenuProps['items']>[number]) => void | - | - |
balance | 余额 | Balance | - | - |
availableChains | 可以连接的链列表 | Chain[] | - | - |
availableWallets | 可用的钱包列表 | Wallet[] | - | - |
quickConnect | 快速连接钱包 | boolean | false | - |
locale | 多语言设置 | Locale["ConnectButton"] | - | - |
chainSelect | 是否显示选择链 | boolean | true | - |
属性 | 描述 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
value | 余额 | bigint | number | - | - |
symbol | 代币符号 | string | - | - |
decimals | 代币精度 | number | - | - |
属性 | 描述 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
copyable | 是否可复制 | boolean | - | - |
title | 展示内容 | boolean | string | React.ReactNode | - | - |
format | 格式化展示内容 | boolean | (address: string) => React.ReactNode | - | - |
更多属性继承自 Ant Design 的 Tooltip 组件,你可以查看组件文档了解更多。
属性 | 描述 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
extraItems | 额外菜单 | MenuItemType[] | - | - |
更多属性继承自 Ant Design 的 Menu 组件,你可以查看组件文档了解更多。
ProfileModal
属性继承自 Ant Design 的 Modal 组件,你可以查看组件文档了解更多。