chore: update docs and add test case

ant-design · Feb 8, 2025 · 1f5ff19 · 1f5ff19
1 parent c05df50
commit 1f5ff19
Show file tree

Hide file tree

Showing 7 changed files with 458 additions and 22 deletions.
diff --git a/docs/guide/demos/custom-token-web3.tsx b/docs/guide/demos/custom-token-web3.tsx
@@ -35,30 +35,26 @@ const App: React.FC = () => {
             descriptionColor: 'blue',
           },
         },
+        components: {
+          Button: {
+            borderRadius: 20,
+            borderRadiusLG: 24,
+          },
+        },
       }}
     >
-      <ConfigProvider
-        theme={{
-          components: {
-            Alert: {
-              defaultPadding: 56,
+      <Space>
+        <Card
+          styles={{
+            body: {
+              padding: 0,
+              maxWidth: 795,
             },
-          },
-        }}
-      >
-        <Space>
-          <Card
-            styles={{
-              body: {
-                padding: 0,
-                maxWidth: 795,
-              },
-            }}
-          >
-            <ConnectModal.ModalPanel walletList={walletList} />
-          </Card>
-        </Space>
-      </ConfigProvider>
+          }}
+        >
+          <ConnectModal.ModalPanel walletList={walletList} />
+        </Card>
+      </Space>
     </Web3ConfigProvider>
   );
 };

diff --git a/docs/guide/demos/mock.ts b/docs/guide/demos/mock.ts
@@ -0,0 +1,140 @@
+/* v8 ignore start */
+import type { DefaultGuide } from '@ant-design/web3';
+
+export const walletList = [
+  {
+    icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=0',
+    name: 'Test Wallet',
+    remark: '备注',
+    app: {
+      link: 'https://test.com/xxx',
+    },
+    extensions: [
+      {
+        key: 'Chrome',
+        link: 'https://test.com/xxx',
+        browserIcon:
+          'https://github.com/ant-design/ant-design/assets/10286961/0d4e4ac7-8f89-4147-a06a-de72c02e85cb',
+        browserName: 'Chrome',
+        description: 'Access your wallet right from your favorite web browser.',
+      },
+      {
+        key: 'Firefox',
+        link: 'https://test.com/xxx',
+        browserIcon:
+          'https://github.com/ant-design/ant-design/assets/10286961/a6559d9b-d20a-4ac7-a263-53c04b9038a4',
+        browserName: 'Firefox',
+        description: 'Access your wallet right from your favorite web browser.',
+      },
+    ],
+    group: 'Popular',
+  },
+  {
+    icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=1',
+    name: 'Test Wallet2',
+    remark: '备注2',
+    app: {
+      link: 'https://test.com/xxx',
+    },
+    extensions: [
+      {
+        key: 'Firefox',
+        link: 'https://test.com/xxx',
+        browserIcon:
+          'https://github.com/ant-design/ant-design/assets/10286961/a6559d9b-d20a-4ac7-a263-53c04b9038a4',
+        browserName: 'Firefox',
+        description: 'Access your wallet right from your favorite web browser.',
+      },
+    ],
+  },
+  {
+    icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=3',
+    name: 'Test Wallet3',
+    remark: 'remark 3',
+    group: 'Popular',
+    app: {
+      link: 'https://test.com/xxx',
+    },
+  },
+  {
+    name: 'Test Wallet4',
+    remark: '备注4',
+    extensions: [
+      {
+        key: 'Safari',
+        link: 'https://test.com/xxx',
+        browserIcon:
+          'https://github.com/ant-design/ant-design/assets/10286961/9d56eba7-84d7-4360-b013-bf57d419b058',
+        browserName: 'Safari',
+        description: 'Access your wallet right from your favorite web browser.',
+      },
+    ],
+  },
+  {
+    name: 'Test Wallet5',
+    remark: '备注5',
+    app: {
+      link: 'https://test.com/xxx',
+    },
+  },
+  {
+    name: 'Test Wallet6',
+    remark: '备注6',
+    key: 6,
+    app: {
+      link: 'https://test.com/xxx',
+    },
+    extensions: [
+      {
+        key: 'Chrome',
+        link: 'https://test.com/xxx',
+        browserIcon:
+          'https://github.com/ant-design/ant-design/assets/10286961/0d4e4ac7-8f89-4147-a06a-de72c02e85cb',
+        browserName: 'Chrome',
+        description: 'Access your wallet right from your favorite web browser.',
+      },
+    ],
+  },
+  {
+    name: 'Test Wallet6',
+    remark: '备注6',
+    key: 7,
+  },
+];
+
+export const groupOrder = (a: string, b: string) => {
+  if (a === 'Popular') return -1;
+  if (b === 'Popular') return 1;
+  return a.localeCompare(b);
+};
+
+export const guide: DefaultGuide = {
+  title: 'What is a Wallet?',
+  infos: [
+    {
+      title: 'A Home for your Digital Assets',
+      description:
+        'Wallets are used to send, receive, store, and display digital assets like Ethereum and NFTs.',
+      icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=4',
+    },
+    {
+      title: 'A New Way to Log In',
+      description:
+        'Instead of creating new accounts and passwords on every website, just connect your wallet.',
+      icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=5',
+    },
+    {
+      title: 'A New Way to Log In2',
+      description:
+        'Instead of creating new accounts and passwords on every website, just connect your wallet.',
+      icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=5',
+    },
+    {
+      title: 'A New Way to Log In3',
+      description:
+        'Instead of creating new accounts and passwords on every website, just connect your wallet.',
+      icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=5',
+    },
+  ],
+  moreLink: 'https://test.com/xxx',
+};
diff --git a/packages/web3/src/connect-modal/index.md b/packages/web3/src/connect-modal/index.md
@@ -90,3 +90,21 @@ Other modal properties see: [ModalProps](https://ant.design/components/modal#API
 ### ConnectModal.ModalPanel
 
 Besides properties related to controlling pop-ups, it is the same as `ConnectModal`.
+
+## Design Token
+
+| Token Name           | Description                                | Type     |
+| -------------------- | ------------------------------------------ | -------- |
+| selectedWalletBg     | Background color of selected wallet        | `string` |
+| selectedWalletColor  | Color of selected wallet                   | `string` |
+| hoverWalletBg        | Background color when hovering over wallet | `string` |
+| panelSplitLineColor  | Color of panel split line                  | `string` |
+| modalTitleStartColor | Start color of modal title                 | `string` |
+| modalTitleEndColor   | End color of modal title                   | `string` |
+| walletGroupTextColor | Text color of wallet group                 | `string` |
+| descriptionColor     | Color of description text                  | `string` |
+| getWalletCardBg      | Background color of get wallet card        | `string` |
+| walletIconSize       | Size of wallet icon                        | `number` |
+| simpleGuideBg        | Background color of simple guide           | `string` |
+| walletListWidth      | Width of wallet list                       | `number` |
+| modalMinHeight       | Minimum height of modal                    | `number` |
diff --git a/packages/web3/src/connect-modal/index.zh-CN.md b/packages/web3/src/connect-modal/index.zh-CN.md
@@ -91,3 +91,21 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*dmHOSI_kdd0AAA
 ### ConnectModal.ModalPanel
 
 除了和控制弹窗相关属性外，其它和 `ConnectModal` 相同。
+
+## 主题变量（Design Token）
+
+| Token 名称           | 描述               | 类型     |
+| -------------------- | ------------------ | -------- |
+| selectedWalletBg     | 选中钱包的背景色   | `string` |
+| selectedWalletColor  | 选中钱包的颜色     | `string` |
+| hoverWalletBg        | 悬停钱包的背景色   | `string` |
+| panelSplitLineColor  | 面板分割线颜色     | `string` |
+| modalTitleStartColor | 弹窗标题起始颜色   | `string` |
+| modalTitleEndColor   | 弹窗标题结束颜色   | `string` |
+| walletGroupTextColor | 钱包分组文字颜色   | `string` |
+| descriptionColor     | 描述文字颜色       | `string` |
+| getWalletCardBg      | 获取钱包卡片背景色 | `string` |
+| walletIconSize       | 钱包图标大小       | `number` |
+| simpleGuideBg        | 简易指引背景色     | `string` |
+| walletListWidth      | 钱包列表宽度       | `number` |
+| modalMinHeight       | 弹窗最小高度       | `number` |
diff --git a/packages/web3/src/web3-config-provider/__tests__/mock/index.ts b/packages/web3/src/web3-config-provider/__tests__/mock/index.ts
@@ -0,0 +1,140 @@
+/* v8 ignore start */
+import type { DefaultGuide } from '@ant-design/web3';
+
+export const walletList = [
+  {
+    icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=0',
+    name: 'Test Wallet',
+    remark: '备注',
+    app: {
+      link: 'https://test.com/xxx',
+    },
+    extensions: [
+      {
+        key: 'Chrome',
+        link: 'https://test.com/xxx',
+        browserIcon:
+          'https://github.com/ant-design/ant-design/assets/10286961/0d4e4ac7-8f89-4147-a06a-de72c02e85cb',
+        browserName: 'Chrome',
+        description: 'Access your wallet right from your favorite web browser.',
+      },
+      {
+        key: 'Firefox',
+        link: 'https://test.com/xxx',
+        browserIcon:
+          'https://github.com/ant-design/ant-design/assets/10286961/a6559d9b-d20a-4ac7-a263-53c04b9038a4',
+        browserName: 'Firefox',
+        description: 'Access your wallet right from your favorite web browser.',
+      },
+    ],
+    group: 'Popular',
+  },
+  {
+    icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=1',
+    name: 'Test Wallet2',
+    remark: '备注2',
+    app: {
+      link: 'https://test.com/xxx',
+    },
+    extensions: [
+      {
+        key: 'Firefox',
+        link: 'https://test.com/xxx',
+        browserIcon:
+          'https://github.com/ant-design/ant-design/assets/10286961/a6559d9b-d20a-4ac7-a263-53c04b9038a4',
+        browserName: 'Firefox',
+        description: 'Access your wallet right from your favorite web browser.',
+      },
+    ],
+  },
+  {
+    icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=3',
+    name: 'Test Wallet3',
+    remark: 'remark 3',
+    group: 'Popular',
+    app: {
+      link: 'https://test.com/xxx',
+    },
+  },
+  {
+    name: 'Test Wallet4',
+    remark: '备注4',
+    extensions: [
+      {
+        key: 'Safari',
+        link: 'https://test.com/xxx',
+        browserIcon:
+          'https://github.com/ant-design/ant-design/assets/10286961/9d56eba7-84d7-4360-b013-bf57d419b058',
+        browserName: 'Safari',
+        description: 'Access your wallet right from your favorite web browser.',
+      },
+    ],
+  },
+  {
+    name: 'Test Wallet5',
+    remark: '备注5',
+    app: {
+      link: 'https://test.com/xxx',
+    },
+  },
+  {
+    name: 'Test Wallet6',
+    remark: '备注6',
+    key: 6,
+    app: {
+      link: 'https://test.com/xxx',
+    },
+    extensions: [
+      {
+        key: 'Chrome',
+        link: 'https://test.com/xxx',
+        browserIcon:
+          'https://github.com/ant-design/ant-design/assets/10286961/0d4e4ac7-8f89-4147-a06a-de72c02e85cb',
+        browserName: 'Chrome',
+        description: 'Access your wallet right from your favorite web browser.',
+      },
+    ],
+  },
+  {
+    name: 'Test Wallet6',
+    remark: '备注6',
+    key: 7,
+  },
+];
+
+export const groupOrder = (a: string, b: string) => {
+  if (a === 'Popular') return -1;
+  if (b === 'Popular') return 1;
+  return a.localeCompare(b);
+};
+
+export const guide: DefaultGuide = {
+  title: 'What is a Wallet?',
+  infos: [
+    {
+      title: 'A Home for your Digital Assets',
+      description:
+        'Wallets are used to send, receive, store, and display digital assets like Ethereum and NFTs.',
+      icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=4',
+    },
+    {
+      title: 'A New Way to Log In',
+      description:
+        'Instead of creating new accounts and passwords on every website, just connect your wallet.',
+      icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=5',
+    },
+    {
+      title: 'A New Way to Log In2',
+      description:
+        'Instead of creating new accounts and passwords on every website, just connect your wallet.',
+      icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=5',
+    },
+    {
+      title: 'A New Way to Log In3',
+      description:
+        'Instead of creating new accounts and passwords on every website, just connect your wallet.',
+      icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=5',
+    },
+  ],
+  moreLink: 'https://test.com/xxx',
+};