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 <[email protected]> * Update packages/web3/src/connect-modal/components/WalletList.tsx Co-authored-by: thinkasany <[email protected]> --------- Co-authored-by: tingzhao.ytz <[email protected]> Co-authored-by: thinkasany <[email protected]>
ant-design · Nov 1, 2024 · e39064b · e39064b
1 parent 7d32958
commit e39064b
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 7 deletions.
diff --git a/.changeset/chilly-apricots-complain.md 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
@@ -91,7 +91,11 @@ describe('WagmiWeb3ConfigProvider with EIP6963 and custom wallets', () => {
         }}
         config={config}
       >
-        <Connector>
+        <Connector
+          modalProps={{
+            group: true,
+          }}
+        >
           <ConnectButton />
         </Connector>
       </WagmiWeb3ConfigProvider>

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
@@ -48,7 +48,11 @@ describe('WagmiWeb3ConfigProvider with EIP6963 Wallet', () => {
         }}
         config={config}
       >
-        <Connector>
+        <Connector
+          modalProps={{
+            group: true,
+          }}
+        >
           <ConnectButton />
         </Connector>
       </WagmiWeb3ConfigProvider>

diff --git 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 = () => (
+      <ConnectModal
+        open
+        title="ConnectModal"
+        footer="Powered by AntChain"
+        walletList={[
+          {
+            ...walletList[0],
+            group: 'Test',
+          },
+          {
+            ...walletList[1],
+            group: 'Test',
+          },
+        ]}
+        guide={guide}
+      />
+    );
+    const { baseElement } = render(<App />);
+    expect(baseElement.querySelector('.ant-web3-connect-modal-group-title')).toBeNull();
+  });
+
   it('wallets empty', async () => {
     const App = () => (
       <ConnectModal

diff --git a/packages/web3/src/connect-modal/components/ModalPanel.tsx b/packages/web3/src/connect-modal/components/ModalPanel.tsx
@@ -23,7 +23,7 @@ const ModalPanel: React.FC<ModalPanelProps> = (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
@@ -40,6 +40,9 @@ const WalletList = forwardRef<ConnectModalActionType, WalletListProps>((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<ConnectModalActionType, WalletListProps>((props, r
     return (
       <List<Wallet>
         itemLayout="horizontal"
-        dataSource={internalGroup ? dataSource[group!] : walletList}
+        dataSource={group ? dataSource[group!] : walletList}
         rowKey="key"
         renderItem={(item) => (
           <List.Item
@@ -138,7 +141,7 @@ const WalletList = forwardRef<ConnectModalActionType, WalletListProps>((props, r
 
   return (
     <div className={`${prefixCls}-wallet-list`}>
-      {internalGroup ? (
+      {needGrouping ? (
         groupKeys.map((group) => (
           <div className={`${prefixCls}-group`} key={group}>
             <div className={`${prefixCls}-group-title`}>{group}</div>

diff --git 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<ConnectModalActionType>` | - | - |

diff --git 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<ConnectModalActionType>` | - | - |