Support Custome ConnectModal design token

.changeset/sour-planets-eat.md

@@ -0,0 +1,6 @@
+---
+'@ant-design/web3-common': minor
+'@ant-design/web3': minor
+---
+
+feat: Support custom ConnectModal design token with Web3ConfigProvider

docs/guide/demos/custom-token-web3.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ConnectModal, Web3ConfigProvider, type Wallet } from '@ant-design/web3';
+import { metadata_MetaMask, metadata_WalletConnect } from '@ant-design/web3-assets';
+import { Card, ConfigProvider, Space } from 'antd';
+
+const App: React.FC = () => {
+  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,
+          ),
+        );
+      },
+    },
+  ];
+
+  return (
+    <Web3ConfigProvider
+      theme={{
+        web3Components: {
+          ConnectModal: {
+            walletGroupTextColor: 'red',
+            descriptionColor: 'blue',
+          },
+        },
+        components: {
+          Button: {
+            borderRadius: 20,
+            borderRadiusLG: 24,
+          },
+        },
+      }}
+    >
+      <Space>
+        <Card
+          styles={{
+            body: {
+              padding: 0,
+              maxWidth: 795,
+            },
+          }}
+        >
+          <ConnectModal.ModalPanel walletList={walletList} />
+        </Card>
+      </Space>
+    </Web3ConfigProvider>
+  );
+};
+
+export default App;

docs/guide/demos/custom-token.tsx

@@ -26,28 +26,6 @@ const App: React.FC = () => {
         );
       },
     },
-    {
-      icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=3',
-      group: 'More',
-      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,
-          ),
-        );
-      },
-    },
   ];
 
   return (

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',
+};

docs/guide/theme.md

@@ -15,8 +15,16 @@ Ant Design Web3 has built-in support for dark mode, which inherits the configura
 
 ## Custom Design Token
 
-You can also completely customize Ant Design's [Design Token](https://ant.design/docs/react/customize-theme#customize-design-token), which we will inherit and use in Ant Design Web3. If you find that the Design Token is not supported or used incorrectly, please [submit an issue](https://github.com/ant-design/ant-design-web3/issues) to tell us.
+### Customize Ant Design's Design Token
 
-We provide a [theme editor](/theme-editor) where you can modify the Design Token online and see the effects.
+You can fully customize Ant Design's [Design Token](https://ant.design/docs/react/customize-theme-cn#%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%8F%98%E9%87%8F), which we will inherit and use in Ant Design Web3. If you find any unsupported or incorrectly used Design Tokens, please [submit an issue](https://github.com/ant-design/ant-design-web3/issues) to let us know.
+
+We provide a [theme editor](/theme-editor-cn) where you can modify Design Tokens online and see the effects.
 
 <code src="./demos/custom-token.tsx"></code>
+
+### Customize More Design Tokens for Ant Design Web3
+
+In addition to Ant Design's Design Tokens, Ant Design Web3 also offers some additional Design Tokens that you can customize. The Design Tokens for components are continuously being supplemented, and you can view the supported Design Tokens on the corresponding component documentation pages. If you find any unsupported or incorrectly used Design Tokens, please [submit an issue](https://github.com/ant-design/ant-design-web3/issues) to let us know.
+
+<code src="./demos/custom-token-web3.tsx"></code>

docs/guide/theme.zh-CN.md

@@ -15,8 +15,16 @@ Ant Design Web3 内置了对暗黑模式的支持，继承自 Ant Design 的配
 
 ## 自定义 Design Token
 
-你也可以完全自定义 Ant Design 的 [Design Token](https://ant.design/docs/react/customize-theme-cn#%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%8F%98%E9%87%8F)，我们会在 Ant Design Web3 中继承使用。如果你发现不支持或者使用有误的 Design Token，请[提交 issue](https://github.com/ant-design/ant-design-web3/issues) 告诉我们。
+### 自定义 Ant Design 的 Design Token
+
+你可以完全自定义 Ant Design 的 [Design Token](https://ant.design/docs/react/customize-theme-cn#%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%8F%98%E9%87%8F)，我们会在 Ant Design Web3 中继承使用。如果你发现不支持或者使用有误的 Design Token，请[提交 issue](https://github.com/ant-design/ant-design-web3/issues) 告诉我们。
 
 我们提供了一个[主题编辑器](/theme-editor-cn)，你可以在线修改 Design Token 查看效果。
 
 <code src="./demos/custom-token.tsx"></code>
+
+### 自定义更多 Ant Design Web3 的 Design Token
+
+除了 Ant Design 的 Design Token，Ant Design Web3 还提供了一些额外的 Design Token，你也可以自定义这些 Design Token。组件的 Design Token 在持续的补充中，你可以在对应的组件文档页面查看支持的 Design Token。如果你发现不支持或者使用有误的 Design Token，请[提交 issue](https://github.com/ant-design/ant-design-web3/issues) 告诉我们。
+
+<code src="./demos/custom-token-web3.tsx"></code>

packages/common/src/web3-config-provider/index.tsx

@@ -48,6 +48,6 @@ const Web3ConfigProvider: React.FC<Web3ConfigProviderProps> = (props) => {
   );
 };
 
-export { Web3ConfigProvider };
+export { Web3ConfigProvider, Web3ConfigProviderProps };
 
 export * from './context';

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 | Default |
+| --- | --- | --- | --- |
+| selectedWalletBg | Background color of selected wallet | `string` | `rgb(39, 39, 39)` |
+| selectedWalletColor | Color of selected wallet | `string` | `#141414` |
+| hoverWalletBg | Background color when hovering over wallet | `string` | `rgb(39, 39, 39)` |
+| panelSplitLineColor | Color of panel split line | `string` | `rgba(255, 255, 255, 0.06)` |
+| modalTitleStartColor | Start color of modal title | `string` | `#1668dc` |
+| modalTitleEndColor | End color of modal title | `string` | `rgba(255, 255, 255, 0.85)` |
+| walletGroupTextColor | Text color of wallet group | `string` | `rgba(255, 255, 255, 0.65)` |
+| descriptionColor | Color of description text | `string` | `rgba(255, 255, 255, 0.65)` |
+| getWalletCardBg | Background color of get wallet card | `string` | `rgba(255, 255, 255, 0.03)` |
+| walletIconSize | Size of wallet icon | `number` | `32` |
+| simpleGuideBg | Background color of simple guide | `string` | `rgba(255, 255, 255, 0.06)` |
+| walletListWidth | Width of wallet list | `number` | `328` |
+| modalMinHeight | Minimum height of modal | `number` | `518` |

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` | `rgb(39, 39, 39)`           |
+| selectedWalletColor  | 选中钱包的颜色     | `string` | `#141414`                   |
+| hoverWalletBg        | 悬停钱包的背景色   | `string` | `rgb(39, 39, 39)`           |
+| panelSplitLineColor  | 面板分割线颜色     | `string` | `rgba(255, 255, 255, 0.06)` |
+| modalTitleStartColor | 弹窗标题起始颜色   | `string` | `#1668dc`                   |
+| modalTitleEndColor   | 弹窗标题结束颜色   | `string` | `rgba(255, 255, 255, 0.85)` |
+| walletGroupTextColor | 钱包分组文字颜色   | `string` | `rgba(255, 255, 255, 0.65)` |
+| descriptionColor     | 描述文字颜色       | `string` | `rgba(255, 255, 255, 0.65)` |
+| getWalletCardBg      | 获取钱包卡片背景色 | `string` | `rgba(255, 255, 255, 0.03)` |
+| walletIconSize       | 钱包图标大小       | `number` | `32`                        |
+| simpleGuideBg        | 简易指引背景色     | `string` | `rgba(255, 255, 255, 0.06)` |
+| walletListWidth      | 钱包列表宽度       | `number` | `328`                       |
+| modalMinHeight       | 弹窗最小高度       | `number` | `518`                       |