fix: When a wireframe token is present, adapt the style of the connect-modal accordingly.

.changeset/itchy-lands-stare.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+fix: When a wireframe token is present, adapt the style of the connect-modal accordingly.

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

@@ -0,0 +1,80 @@
+import { ConnectModal } from '@ant-design/web3';
+import { fireEvent, render } from '@testing-library/react';
+import { theme as antTheme, ConfigProvider } from 'antd';
+import { describe, expect, it, vi } from 'vitest';
+
+import { groupOrder, walletList } from './mock';
+
+describe('ConnectModal without guide', () => {
+  it.each(['light', 'dark'] as const)('should render in %s mode', async (theme) => {
+    const App = () => (
+      <ConfigProvider
+        theme={{
+          algorithm: theme === 'light' ? antTheme.defaultAlgorithm : antTheme.darkAlgorithm,
+          token: {
+            wireframe: true,
+          },
+        }}
+      >
+        <ConnectModal
+          open
+          title="ConnectModal"
+          footer="Powered by AntChain"
+          group={{
+            groupOrder,
+          }}
+          walletList={walletList}
+        />
+      </ConfigProvider>
+    );
+    const { baseElement } = render(<App />);
+    expect(baseElement).toMatchSnapshot();
+    const headerStyle = window.getComputedStyle(
+      baseElement.querySelector('.ant-web3-connect-modal-header')!,
+    );
+    // header have borderBlockEnd & paddingBlockEnd
+    expect(headerStyle.borderBlockEnd).toBe('1px solid rgba(0, 0, 0, 0.06)');
+    expect(headerStyle.paddingBlockEnd).toBe('16px');
+
+    // should have ant-web3-connect-modal class
+    expect(baseElement.querySelector('.ant-modal')?.className).toContain('ant-web3-connect-modal');
+    // should have simple class when without guide
+    expect(baseElement.querySelector('.ant-web3-connect-modal-body')?.className).toContain(
+      'simple',
+    );
+
+    // should have title and footer
+    expect(baseElement.querySelector('.ant-web3-connect-modal-title')?.textContent).toBe(
+      'ConnectModal',
+    );
+    expect(baseElement.querySelector('.ant-web3-connect-modal-footer')?.textContent).toBe(
+      'Powered by AntChain',
+    );
+
+    // group order
+    expect(baseElement.querySelectorAll('.ant-web3-connect-modal-group-title')[0].textContent).toBe(
+      'Popular',
+    );
+    expect(baseElement.querySelectorAll('.ant-web3-connect-modal-group-title')[1].textContent).toBe(
+      'More',
+    );
+
+    // wallet list items
+    expect(baseElement.querySelectorAll('.ant-web3-connect-modal-wallet-item').length).toBe(
+      walletList.length,
+    );
+  });
+  it('render with mode simple', async () => {
+    const App = () => (
+      <ConnectModal open groupOrder={groupOrder} walletList={walletList} mode="simple" />
+    );
+    const { baseElement } = render(<App />);
+    const btn = baseElement.querySelector('.ant-web3-connect-modal-simple-guide-right');
+    fireEvent.click(btn!);
+    await vi.waitFor(() => {
+      expect(baseElement.querySelector('.ant-web3-connect-modal-simple-guide-panel')).not.toBe(
+        null,
+      );
+    });
+  });
+});

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { ConnectModalProps } from '@ant-design/web3';
+import { ConnectModal } from '@ant-design/web3';
+import { metadata_MetaMask, metadata_WalletConnect } from '@ant-design/web3-assets';
+import { Button, ConfigProvider } from 'antd';
+
+import type { Wallet } from '../interface';
+
+const walletList: Wallet[] = [
+  metadata_MetaMask,
+  {
+    ...metadata_WalletConnect,
+    getQrCode: () => {
+      return new Promise<{
+        uri: string;
+      }>((resolve) =>
+        setTimeout(
+          () =>
+            resolve({
+              uri: `https://ant.design/docs/react/migrate-less-variables-cn#avatar-%E5%A4%B4%E5%83%8F?timestamp=${Date.now()}&random=${Math.random()}`,
+            }),
+          2000,
+        ),
+      );
+    },
+  },
+  {
+    icon: 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*8LhqSZ_KatsAAAAAAAAAAAAAelrGAQ/fmt.webp',
+    name: 'Test Wallet3',
+    remark: 'remark 3',
+    app: {
+      link: 'https://test.com/xxx',
+    },
+    getQrCode: () => {
+      return new Promise<{
+        uri: string;
+      }>((resolve) =>
+        setTimeout(
+          () =>
+            resolve({
+              uri: `https://ant.design/docs/react/migrate-less-variables-cn#avatar-%E5%A4%B4%E5%83%8F?timestamp=${Date.now()}&random=${Math.random()}`,
+            }),
+          2000,
+        ),
+      );
+    },
+  },
+];
+const groupOrder = (a: string, b: string) => {
+  if (a === 'Popular') return -1;
+  if (b === 'Popular') return 1;
+  return a.localeCompare(b);
+};
+
+const App: React.FC<ConnectModalProps> = (props) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        Open with simple
+      </Button>
+      <ConfigProvider
+        theme={{
+          token: {
+            wireframe: true,
+          },
+        }}
+      >
+        <ConnectModal
+          open={open}
+          group={{
+            groupOrder,
+          }}
+          walletList={walletList}
+          onCancel={() => setOpen(false)}
+          mode="simple"
+          {...props}
+        />
+      </ConfigProvider>
+    </>
+  );
+};
+
+export default App;

packages/web3/src/connect-modal/index.md

@@ -1,8 +1,5 @@
----
-nav: Components
-group: UI Components
-cover: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*mUC3SYLpq0AAAAAAAAAAAAAADlrGAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*dmHOSI_kdd0AAAAAAAAAAAAADlrGAQ/original
+c--- nav: Components group: UI Components cover: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*mUC3SYLpq0AAAAAAAAAAAAAADlrGAQ/original coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*dmHOSI_kdd0AAAAAAAAAAAAADlrGAQ/original
+
 ---
 
 # ConnectModal
@@ -31,6 +28,10 @@ The connection wallet popup, used with [ConnectButton](../connect-button/index.m
 
 <code src="./demos/simple.tsx"></code>
 
+## Wireframe Mode
+
+<code src="./demos/wireframe.tsx"></code>
+
 ## Dark Mode
 
 <code src="./demos/dark.tsx"></code>

packages/web3/src/connect-modal/index.zh-CN.md

@@ -32,6 +32,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*dmHOSI_kdd0AAA
 
 <code src="./demos/simple.tsx"></code>
 
+## 线框模式
+
+<code src="./demos/wireframe.tsx"></code>
+
 ## 暗黑模式
 
 <code src="./demos/dark.tsx"></code>

packages/web3/src/connect-modal/style/index.tsx

@@ -38,6 +38,9 @@ const resetStyle = (token: ConnectModalToken): CSSInterpolation => {
         '.ant-modal-content': {
           padding: 0,
         },
+        '.ant-modal-body': {
+          padding: 0,
+        },
         '.ant-list-split .ant-list-item': {
           borderBlockEnd: 'none',
         },
@@ -92,6 +95,8 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
           [`${componentCls}-header`]: {
             paddingInline: token.paddingMD,
             height: 30,
+            borderBlockEnd: token.wireframe ? '1px solid rgba(0, 0, 0, 0.06)' : 'none',
+            paddingBlockEnd: token.wireframe ? '16px' : 0,
           },
           [`${componentCls}-list`]: {
             display: 'flex',