feat: ConnectModal support disabled & banner props (#1434)

* chore: update

* chore: update disable demo

* test: add test case

* docs: update changelog and doc

* chore: support custom banner

* feat: support design token walletListHeight

* fix: demo

* docs: update doc

* test: update test

* feat: add banner prop

Author: yutingzhao1991

.changeset/giant-squids-open.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': minor
+---
+
+feat: ConnectModal support new prop disabled

.changeset/smooth-boats-rest.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': minor
+---
+
+feat: ConnectModal support banner prop

packages/web3/src/connect-modal/__tests__/banner.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import { describe, expect, it } from 'vitest';
+
+import { ConnectModal } from '../index';
+import { walletList } from './mock';
+
+describe('ConnectModal banner functionality', () => {
+  it('should render with custom banner', async () => {
+    const testBannerText = 'This is a custom banner for testing';
+
+    render(
+      <ConfigProvider>
+        <ConnectModal
+          open
+          walletList={walletList}
+          banner={<div className="test-banner">{testBannerText}</div>}
+        />
+      </ConfigProvider>,
+    );
+
+    // Find the banner container
+    const bannerContainer = document.querySelector('.ant-web3-connect-modal-banner');
+
+    // Assert banner container exists
+    expect(bannerContainer).not.toBeNull();
+
+    // Assert our custom banner element exists
+    const customBanner = document.querySelector('.test-banner');
+    expect(customBanner).not.toBeNull();
+
+    // Assert banner text is correct
+    expect(customBanner?.textContent).toBe(testBannerText);
+  });
+
+  it('should not render banner when banner prop is not provided', async () => {
+    render(
+      <ConfigProvider>
+        <ConnectModal open walletList={walletList} />
+      </ConfigProvider>,
+    );
+
+    // Banner container should not exist
+    const bannerContainer = document.querySelector('.ant-web3-connect-modal-banner');
+    expect(bannerContainer).toBeNull();
+  });
+
+  it('should render complex banner element with interactive components', async () => {
+    render(
+      <ConfigProvider>
+        <ConnectModal
+          open
+          walletList={walletList}
+          banner={
+            <div className="complex-banner">
+              <button className="banner-button">Click me</button>
+              <span className="banner-text">Banner with button</span>
+            </div>
+          }
+        />
+      </ConfigProvider>,
+    );
+
+    // Find the banner container
+    const bannerContainer = document.querySelector('.ant-web3-connect-modal-banner');
+    expect(bannerContainer).not.toBeNull();
+
+    // Check complex elements exist
+    const button = document.querySelector('.banner-button');
+    expect(button).not.toBeNull();
+    expect(button?.textContent).toBe('Click me');
+
+    const text = document.querySelector('.banner-text');
+    expect(text).not.toBeNull();
+    expect(text?.textContent).toBe('Banner with button');
+  });
+});

packages/web3/src/connect-modal/__tests__/disabled.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { metadata_MetaMask, metadata_WalletConnect } from '@ant-design/web3-assets';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ConnectModal } from '../index';
+import type { Wallet } from '../interface';
+
+const walletList: Wallet[] = [
+  {
+    ...metadata_MetaMask,
+    hasWalletReady: async () => true,
+    hasExtensionInstalled: async () => true,
+  },
+  {
+    ...metadata_WalletConnect,
+    getQrCode: () => {
+      return Promise.resolve({
+        uri: 'https://example.com',
+      });
+    },
+  },
+];
+
+describe('ConnectModal disabled functionality', () => {
+  it('should render disabled wallets correctly', async () => {
+    const onWalletSelected = vi.fn();
+
+    render(
+      <ConfigProvider>
+        <ConnectModal open walletList={walletList} onWalletSelected={onWalletSelected} disabled />
+      </ConfigProvider>,
+    );
+
+    // Find all wallet items
+    const walletItems = document.querySelectorAll('.ant-web3-connect-modal-wallet-item');
+
+    expect(walletItems.length).toBe(2);
+
+    // Verify that the wallet items have the disabled class
+    walletItems.forEach((item) => {
+      expect(item.classList.contains('disabled')).toBe(true);
+    });
+
+    // Attempt to click on the first wallet
+    fireEvent.click(walletItems[0]);
+
+    // The onWalletSelected callback should still not have been called
+    await vi.waitFor(() => {
+      expect(onWalletSelected).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should allow wallet selection when not disabled', async () => {
+    const onWalletSelected = vi.fn();
+
+    render(
+      <ConfigProvider>
+        <ConnectModal
+          open
+          walletList={walletList}
+          onWalletSelected={onWalletSelected}
+          disabled={false}
+        />
+      </ConfigProvider>,
+    );
+
+    // Find all wallet items
+    const walletItems = document.querySelectorAll('.ant-web3-connect-modal-wallet-item');
+
+    expect(walletItems.length).toBe(2);
+
+    // Verify that the wallet items do not have the disabled class
+    walletItems.forEach((item) => {
+      expect(item.classList.contains('disabled')).toBe(false);
+    });
+
+    // Click on the first wallet
+    fireEvent.click(walletItems[0]);
+
+    await vi.waitFor(() => {
+      // Verify that the onWalletSelected callback was called
+      expect(onWalletSelected).toHaveBeenCalled();
+    });
+  });
+});

packages/web3/src/connect-modal/components/ModalPanel.tsx

@@ -31,6 +31,8 @@ const ModalPanel: React.FC<ModalPanelProps> = (props) => {
     defaultSelectedWallet,
     locale,
     connecting,
+    disabled = false,
+    banner,
   } = props;
   const intl = useIntl('ConnectModal', locale);
   const showQRCoodByDefault = defaultSelectedWallet?.getQrCode;
@@ -118,6 +120,7 @@ const ModalPanel: React.FC<ModalPanelProps> = (props) => {
         {(panelRoute === 'init' || !isSimple) && (
           <div className={classNames(`${prefixCls}-list-panel`)}>
             <div className={`${prefixCls}-header`}>{mergedTitle}</div>
+            {banner && <div className={`${prefixCls}-banner`}>{banner}</div>}
             <div className={`${prefixCls}-list`}>
               <div className={`${prefixCls}-list-container`}>
                 <WalletList
@@ -126,6 +129,7 @@ const ModalPanel: React.FC<ModalPanelProps> = (props) => {
                   group={group}
                   groupOrder={groupOrder}
                   emptyProps={emptyProps}
+                  disabled={disabled}
                 />
               </div>
               <div className={`${prefixCls}-footer-container`}>

packages/web3/src/connect-modal/components/WalletItem.tsx

@@ -15,6 +15,7 @@ export interface WalletItemProps {
   onSelect: (wallet: Wallet) => void;
   onQrCodeSelect: (wallet: Wallet) => void;
   showQrPlaceholder?: boolean;
+  disabled?: boolean;
 }
 
 const WalletItem: React.FC<WalletItemProps> = ({
@@ -24,6 +25,7 @@ const WalletItem: React.FC<WalletItemProps> = ({
   onSelect,
   onQrCodeSelect,
   showQrPlaceholder,
+  disabled = false,
 }) => {
   const useUniversalLink: boolean = !!(mobile() && wallet.deeplink);
   const [showPluginTag, setShowPluginTag] = useState(!useUniversalLink);
@@ -44,8 +46,9 @@ const WalletItem: React.FC<WalletItemProps> = ({
           wallet.key !== undefined
             ? selectedWallet?.key === wallet.key
             : selectedWallet?.name === wallet.name,
+        disabled,
       })}
-      onClick={() => onSelect(wallet)}
+      onClick={disabled ? undefined : () => onSelect(wallet)}
     >
       <div className={`${prefixCls}-content`}>
         <WalletIcon wallet={wallet} />
@@ -61,8 +64,11 @@ const WalletItem: React.FC<WalletItemProps> = ({
             className={`${prefixCls}-qr-btn`}
             onClick={(e) => {
               e.stopPropagation();
-              onQrCodeSelect(wallet);
+              if (!disabled) {
+                onQrCodeSelect(wallet);
+              }
             }}
+            disabled={disabled}
           >
             <QrcodeOutlined />
           </Button>

packages/web3/src/connect-modal/components/WalletList.tsx

@@ -15,14 +15,14 @@ import WalletItem from './WalletItem';
 
 export type WalletListProps = Pick<
   ConnectModalProps,
-  'walletList' | 'group' | 'groupOrder' | 'emptyProps'
+  'walletList' | 'group' | 'groupOrder' | 'emptyProps' | 'disabled'
 >;
 
 const WalletList: ForwardRefRenderFunction<ConnectModalActionType, WalletListProps> = (
   props,
   ref,
 ) => {
-  const { walletList = [], group: internalGroup, groupOrder, emptyProps } = props;
+  const { walletList = [], group: internalGroup, groupOrder, emptyProps, disabled = false } = props;
   const { prefixCls, updateSelectedWallet, selectedWallet, localeMessage, updatePanelRoute } =
     useContext(connectModalContext);
   const dataSource: Record<string, Wallet[]> = useMemo(() => {
@@ -134,6 +134,7 @@ const WalletList: ForwardRefRenderFunction<ConnectModalActionType, WalletListPro
               });
             }}
             showQrPlaceholder={walletList.some((w) => w.getQrCode && w.hasExtensionInstalled)}
+            disabled={disabled}
           />
         )}
       />

packages/web3/src/connect-modal/demos/banner.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { ConnectModal, Web3ConfigProvider } from '@ant-design/web3';
+import {
+  metadata_MetaMask,
+  metadata_TokenPocket,
+  metadata_Trust,
+  metadata_WalletConnect,
+} from '@ant-design/web3-assets';
+import { Alert, Button, Checkbox, Space, theme, Typography } from 'antd';
+
+import type { Wallet } from '../interface';
+
+const walletList: Wallet[] = [
+  metadata_MetaMask,
+  metadata_WalletConnect,
+  metadata_TokenPocket,
+  metadata_Trust,
+];
+
+// Define banner height (in pixels)
+const BANNER_HEIGHT = 48;
+
+const App: React.FC = () => {
+  const [open, setOpen] = React.useState(false);
+  const [termsAgreed, setTermsAgreed] = React.useState(false);
+  const { token } = theme.useToken();
+
+  return (
+    <Web3ConfigProvider
+      theme={{
+        web3Components: {
+          ConnectModal: {
+            walletListHeight: 436 - BANNER_HEIGHT,
+          },
+        },
+      }}
+    >
+      <Button type="primary" onClick={() => setOpen(true)}>
+        Open with terms agreement banner
+      </Button>
+      <ConnectModal
+        open={open}
+        walletList={walletList}
+        onCancel={() => {
+          setOpen(false);
+          setTermsAgreed(false);
+        }}
+        disabled={!termsAgreed}
+        banner={
+          <div
+            style={{
+              height: BANNER_HEIGHT - 16,
+              backgroundColor: token.colorPrimaryBg,
+              margin: '8px 20px',
+              paddingInline: 8,
+              display: 'flex',
+              alignItems: 'center',
+              borderRadius: token.borderRadius,
+              borderLeft: `4px solid ${token.colorPrimary}`,
+              boxShadow: token.boxShadowTertiary,
+            }}
+          >
+            <Checkbox checked={termsAgreed} onChange={(e) => setTermsAgreed(e.target.checked)}>
+              <Typography.Text
+                strong
+                style={{
+                  fontSize: token.fontSizeSM,
+                  color: token.colorTextSecondary,
+                }}
+              >
+                I have read and agree to the{' '}
+                <Typography.Link href="https://zan.top/" target="_blank" rel="noopener noreferrer">
+                  terms
+                </Typography.Link>
+                .
+              </Typography.Text>
+            </Checkbox>
+          </div>
+        }
+      />
+    </Web3ConfigProvider>
+  );
+};
+
+export default App;