From e39064ba41482c467bacc7b2d90a4d3afed3fe06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=84=9A=E6=8C=87=E5=AF=BC?= Date: Fri, 1 Nov 2024 17:45:01 +0800 Subject: [PATCH] fix: hide group when only one group (#1227) * fix: hide group when only one group * Update packages/web3/src/connect-modal/components/WalletList.tsx Co-authored-by: thinkasany <480968828@qq.com> * Update packages/web3/src/connect-modal/components/WalletList.tsx Co-authored-by: thinkasany <480968828@qq.com> --------- Co-authored-by: tingzhao.ytz Co-authored-by: thinkasany <480968828@qq.com> --- .changeset/chilly-apricots-complain.md | 5 ++++ .../config-with-eip6963-and-wallets.test.tsx | 6 ++++- .../config-with-eip6963-wallet.test.tsx | 6 ++++- .../connect-modal/__tests__/basic.test.tsx | 23 +++++++++++++++++++ .../connect-modal/components/ModalPanel.tsx | 2 +- .../connect-modal/components/WalletList.tsx | 7 ++++-- packages/web3/src/connect-modal/index.md | 2 +- .../web3/src/connect-modal/index.zh-CN.md | 2 +- 8 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 .changeset/chilly-apricots-complain.md diff --git a/.changeset/chilly-apricots-complain.md b/.changeset/chilly-apricots-complain.md new file mode 100644 index 000000000..b6fef6720 --- /dev/null +++ b/.changeset/chilly-apricots-complain.md @@ -0,0 +1,5 @@ +--- +'@ant-design/web3': patch +--- + +fix: hide group when only one group diff --git a/packages/wagmi/src/wagmi-provider/__tests__/config-with-eip6963-and-wallets.test.tsx b/packages/wagmi/src/wagmi-provider/__tests__/config-with-eip6963-and-wallets.test.tsx index 766080a3f..ee63b2f6d 100644 --- a/packages/wagmi/src/wagmi-provider/__tests__/config-with-eip6963-and-wallets.test.tsx +++ b/packages/wagmi/src/wagmi-provider/__tests__/config-with-eip6963-and-wallets.test.tsx @@ -91,7 +91,11 @@ describe('WagmiWeb3ConfigProvider with EIP6963 and custom wallets', () => { }} config={config} > - + diff --git a/packages/wagmi/src/wagmi-provider/__tests__/config-with-eip6963-wallet.test.tsx b/packages/wagmi/src/wagmi-provider/__tests__/config-with-eip6963-wallet.test.tsx index cf33fd9fb..94a958b70 100644 --- a/packages/wagmi/src/wagmi-provider/__tests__/config-with-eip6963-wallet.test.tsx +++ b/packages/wagmi/src/wagmi-provider/__tests__/config-with-eip6963-wallet.test.tsx @@ -48,7 +48,11 @@ describe('WagmiWeb3ConfigProvider with EIP6963 Wallet', () => { }} config={config} > - + diff --git a/packages/web3/src/connect-modal/__tests__/basic.test.tsx b/packages/web3/src/connect-modal/__tests__/basic.test.tsx index 6afc9a0ec..990975df2 100644 --- a/packages/web3/src/connect-modal/__tests__/basic.test.tsx +++ b/packages/web3/src/connect-modal/__tests__/basic.test.tsx @@ -230,6 +230,29 @@ describe('ConnectModal with guide', () => { expect(baseElement.querySelector('.ant-web3-connect-modal-group-title')).toBeNull(); }); + it('Wallets are not grouped when on one group', async () => { + const App = () => ( + + ); + const { baseElement } = render(); + expect(baseElement.querySelector('.ant-web3-connect-modal-group-title')).toBeNull(); + }); + it('wallets empty', async () => { const App = () => ( = (props) => { walletList = availableWallets, emptyProps, guide, - group = true, + group, groupOrder, mode, onWalletSelected, diff --git a/packages/web3/src/connect-modal/components/WalletList.tsx b/packages/web3/src/connect-modal/components/WalletList.tsx index 9742f3bb8..7ca9c3afb 100644 --- a/packages/web3/src/connect-modal/components/WalletList.tsx +++ b/packages/web3/src/connect-modal/components/WalletList.tsx @@ -40,6 +40,9 @@ const WalletList = forwardRef((props, r return Object.keys(dataSource).sort(orderFn); }, [dataSource, internalGroup, groupOrder]); + const needGrouping = + internalGroup !== false && (internalGroup !== undefined || groupKeys.length > 1); + const selectWallet = async (wallet: Wallet) => { const hasWalletReady = await wallet.hasWalletReady?.(); if (hasWalletReady) { @@ -77,7 +80,7 @@ const WalletList = forwardRef((props, r return ( itemLayout="horizontal" - dataSource={internalGroup ? dataSource[group!] : walletList} + dataSource={group ? dataSource[group!] : walletList} rowKey="key" renderItem={(item) => ( ((props, r return (
- {internalGroup ? ( + {needGrouping ? ( groupKeys.map((group) => (
{group}
diff --git a/packages/web3/src/connect-modal/index.md b/packages/web3/src/connect-modal/index.md index 666e80b9a..f0b140e40 100644 --- a/packages/web3/src/connect-modal/index.md +++ b/packages/web3/src/connect-modal/index.md @@ -58,7 +58,7 @@ The connection wallet popup, used with [ConnectButton](../connect-button/index.m | onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | `(e:React.SyntheticEvent) => void` | - | - | | footer | Custom footer | `React.ReactNode` | - | - | | walletList | Wallet list | `Wallet[]` | - | - | -| group | Does the wallet need to be grouped | `boolean` \| `{groupOrder: (a: string, b: string) => number}` | `true` | - | +| group | Does the wallet need to be grouped | `boolean` \| `{groupOrder: (a: string, b: string) => number}` | `true` when there are multiple groups | - | | mode | Popup mode | `'simple' \| 'normal' \| 'auto'` | `'auto'` | - | | guide | Newbie guide content | `DefaultGuide` | [DefaultGuide](#defaultguide) | - | | actionRef | Used to control the component | `MutableRefObject` | - | - | diff --git a/packages/web3/src/connect-modal/index.zh-CN.md b/packages/web3/src/connect-modal/index.zh-CN.md index 21f014fe8..de2f66416 100644 --- a/packages/web3/src/connect-modal/index.zh-CN.md +++ b/packages/web3/src/connect-modal/index.zh-CN.md @@ -59,7 +59,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*dmHOSI_kdd0AAA | onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | `(e:React.SyntheticEvent) => void` | - | - | | footer | 自定义 footer | `React.ReactNode` | - | - | | walletList | 钱包列表 | [Wallet](./types#wallet)\[\] | - | - | -| group | 钱包是否需要分组 | `boolean` \| `{groupOrder: (a: string, b: string) => number}` | `true` | - | +| group | 钱包是否需要分组 | `boolean` \| `{groupOrder: (a: string, b: string) => number}` | 有多个分组情况下为 `true` | - | | mode | 弹窗模式 | `'simple' \| 'normal' \| 'auto'` | `'auto'` | - | | guide | 新手指引内容 | `DefaultGuide` | [DefaultGuide](#defaultguide) | - | | actionRef | 用于控制组件 | `MutableRefObject` | - | - |