faet: init new component connect-panel

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

@@ -0,0 +1,59 @@
+# ConnectPanel
+
+A card-style wallet connect panel component for Web3 DApps, similar in function to ConnectButton but with a modern card UI.
+
+## Usage
+
+```tsx
+import { ConnectPanel } from '@ant-design/web3';
+
+<ConnectPanel
+  wallets={[
+    {
+      key: 'metamask',
+      name: 'MetaMask',
+      icon: <img src="/path/to/metamask.svg" width={64} height={64} />,
+      actionText: 'Connect',
+      onClick: () => {
+        /* connect logic */
+      },
+    },
+    {
+      key: 'okx',
+      name: 'OKX Wallet',
+      icon: <img src="/path/to/okx.svg" width={64} height={64} />,
+      actionText: 'Connect',
+      onClick: () => {
+        /* connect logic */
+      },
+    },
+    {
+      key: 'add',
+      name: 'Add Address',
+      icon: <img src="/path/to/edit.svg" width={64} height={64} />,
+      actionText: 'Enter',
+      onClick: () => {
+        /* add address logic */
+      },
+    },
+  ]}
+/>;
+```
+
+## API
+
+| Property  | Description       | Type   | Default |
+| --------- | ----------------- | ------ | ------- |
+| wallets   | Wallet card list  | array  | []      |
+| className | Custom class name | string | -       |
+| style     | Custom style      | object | -       |
+
+Each wallet item:
+
+| Property   | Description        | Type            |
+| ---------- | ------------------ | --------------- |
+| key        | Unique key         | string          |
+| name       | Wallet name        | string          |
+| icon       | Wallet icon        | React.ReactNode |
+| actionText | Action button text | string          |
+| onClick    | Click handler      | () => void      |

packages/web3/src/connect-panel/index.ts

@@ -0,0 +1 @@
+export * from './index';

packages/web3/src/connect-panel/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Wallet } from '@ant-design/web3-common';
+import classNames from 'classnames';
+
+import { useStyle } from './style';
+
+export interface ConnectPanelProps {
+  wallets?: Array<{
+    key: string;
+    name: string;
+    icon: React.ReactNode;
+    actionText: string;
+    onClick?: () => void;
+  }>;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const ConnectPanel: React.FC<ConnectPanelProps> = ({ wallets = [], className, style }) => {
+  const prefixCls = 'web3-connect-panel';
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+
+  return wrapSSR(
+    <div className={classNames(prefixCls, hashId, className)} style={style}>
+      {wallets.map((wallet) => (
+        <div
+          key={wallet.key}
+          className={classNames(`${prefixCls}-card`, hashId)}
+          onClick={wallet.onClick}
+        >
+          <div className={classNames(`${prefixCls}-icon`, hashId)}>{wallet.icon}</div>
+          <div className={classNames(`${prefixCls}-name`, hashId)}>{wallet.name}</div>
+          <div className={classNames(`${prefixCls}-action`, hashId)}>{wallet.actionText} &gt;</div>
+        </div>
+      ))}
+    </div>,
+  );
+};
+
+export default ConnectPanel;

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

@@ -0,0 +1,59 @@
+# ConnectPanel
+
+卡片式 Web3 钱包连接面板组件，功能与 ConnectButton 类似，但采用现代卡片 UI。
+
+## 用法
+
+```tsx
+import { ConnectPanel } from '@ant-design/web3';
+
+<ConnectPanel
+  wallets={[
+    {
+      key: 'metamask',
+      name: 'MetaMask',
+      icon: <img src="/path/to/metamask.svg" width={64} height={64} />,
+      actionText: '连接',
+      onClick: () => {
+        /* 连接逻辑 */
+      },
+    },
+    {
+      key: 'okx',
+      name: 'OKX Wallet',
+      icon: <img src="/path/to/okx.svg" width={64} height={64} />,
+      actionText: '连接',
+      onClick: () => {
+        /* 连接逻辑 */
+      },
+    },
+    {
+      key: 'add',
+      name: '添加地址',
+      icon: <img src="/path/to/edit.svg" width={64} height={64} />,
+      actionText: '输入',
+      onClick: () => {
+        /* 添加地址逻辑 */
+      },
+    },
+  ]}
+/>;
+```
+
+## API
+
+| 属性      | 说明         | 类型   | 默认值 |
+| --------- | ------------ | ------ | ------ |
+| wallets   | 钱包卡片列表 | array  | []     |
+| className | 自定义类名   | string | -      |
+| style     | 自定义样式   | object | -      |
+
+每个钱包项：
+
+| 属性       | 说明         | 类型            |
+| ---------- | ------------ | --------------- |
+| key        | 唯一 key     | string          |
+| name       | 钱包名称     | string          |
+| icon       | 钱包图标     | React.ReactNode |
+| actionText | 操作按钮文案 | string          |
+| onClick    | 点击事件     | () => void      |

packages/web3/src/connect-panel/style/index.ts

@@ -0,0 +1,59 @@
+import {
+  useStyle as useAntdStyle,
+  type GenerateStyle,
+  type UseStyleResult,
+  type Web3AliasToken,
+} from '../../theme/useStyle';
+
+export interface ConnectPanelToken extends Web3AliasToken {
+  componentCls: string;
+}
+
+const genConnectPanelStyle: GenerateStyle<ConnectPanelToken> = (token) => {
+  return {
+    [token.componentCls]: {
+      display: 'flex',
+      gap: 32,
+      justifyContent: 'center',
+      alignItems: 'center',
+      [`${token.componentCls}-card`]: {
+        width: 240,
+        height: 260,
+        background: '#fafaff',
+        borderRadius: 20,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.03)',
+        transition: 'box-shadow 0.2s',
+        cursor: 'pointer',
+        ':hover': {
+          boxShadow: '0 4px 16px rgba(0,0,0,0.06)',
+        },
+      },
+      [`${token.componentCls}-icon`]: {
+        marginBottom: 24,
+      },
+      [`${token.componentCls}-name`]: {
+        fontSize: 28,
+        fontWeight: 500,
+        marginBottom: 12,
+      },
+      [`${token.componentCls}-action`]: {
+        color: '#666',
+        fontSize: 22,
+      },
+    },
+  };
+};
+
+export function useStyle(prefixCls: string): UseStyleResult {
+  return useAntdStyle('ConnectPanel', (token) => {
+    const panelToken: ConnectPanelToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+    };
+    return [genConnectPanelStyle(panelToken)];
+  });
+}

packages/web3/src/index.ts

@@ -13,3 +13,4 @@ export * from '@ant-design/web3-common';
 // export Web3ConfigProvider in ./web3-config-provider for replace the one in @ant-design/web3-common
 export { Web3ConfigProvider, type Web3ThemeConfig } from './web3-config-provider';
 export * from './pay-panel';
+export * from './connect-panel';