Merge branch 'main' into feature-shanchuan-beta.5

ant-design · Jan 18, 2024 · f3e13bb · f3e13bb
2 parents da85ee3 + fbccc75
commit f3e13bb
Show file tree

Hide file tree

Showing 18 changed files with 107 additions and 93 deletions.
diff --git a/.changeset/five-buses-hug.md b/.changeset/five-buses-hug.md
@@ -0,0 +1,6 @@
+---
+'@ant-design/web3-wagmi': patch
+'@ant-design/web3': patch
+---
+
+chore: Optimize import type
diff --git a/.changeset/green-clocks-smell.md b/.changeset/green-clocks-smell.md
@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+refactor: optimization crypto-price code && add APIS from docs
diff --git a/docs/course/demos/connect.tsx b/docs/course/demos/connect.tsx
@@ -1,24 +1,26 @@
-import { ConnectButton, Connector } from '@ant-design/web3';
-import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
+import { Address, ConnectButton, Connector, NFTCard } from '@ant-design/web3';
+import { MetaMask, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
 import { createConfig, http } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 import { injected } from 'wagmi/connectors';
 
 const config = createConfig({
   chains: [mainnet],
+  transports: {
+    [mainnet.id]: http(),
+  },
   connectors: [
     injected({
       target: 'metaMask',
     }),
   ],
-  transports: {
-    [mainnet.id]: http(),
-  },
 });
 
 export default () => {
   return (
-    <WagmiWeb3ConfigProvider config={config}>
+    <WagmiWeb3ConfigProvider config={config} wallets={[MetaMask()]}>
+      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+      <NFTCard address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={8540} />
       <Connector>
         <ConnectButton />
       </Connector>

diff --git a/docs/course/dev-connect.zh-CN.md b/docs/course/dev-connect.zh-CN.md
@@ -32,45 +32,38 @@ order: 2
 首先，请继续编辑 `pages/web3.tsx` 文件，引入所需要的内容：
 
 ```diff
-+ import { createConfig, configureChains, mainnet } from 'wagmi';
-+ import { publicProvider } from 'wagmi/providers/public';
++ import { createConfig, http } from 'wagmi';
++ import { mainnet } from 'wagmi/chains';
 + import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
 import { Address } from "@ant-design/web3";
 
 export default () => {
   return (
-    <div
-      style={{
-        height: "100vh",
-        padding: 64,
-      }}
-    >
-      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
-    </div>
+    <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
   );
 };
 ```
 
 其中引入的内容说明如下：
 
 - [createConfig](https://wagmi.sh/react/config)：wagmi 用来创建配置的方法。
-- [configureChains](https://wagmi.sh/react/providers/configuring-chains)：wagmi 暴露的配置你要链接的区块链的方法，DApp 要获取链上数据，需要通过 JSON RPC 与链上节点进行通信。从前端的角度来说，就是配置一个 http 的请求地址。在区块链中，我们称之为节点服务。
+- [http]：wagmi 用来创建 [HTTP JSON RPC](https://wagmi.sh/core/api/transports/http) 连接的方法，通过它你可以通过 HTTP 请求访问区块链。
 - [mainnet](https://wagmi.sh/react/chains)：代表以太坊主网，除了 `mainnet` 以外还会有类似 `goerli` 的测速网和类似 `bsc` 和 `base` 的 EVM 兼容的其它公链，有的是和以太坊一样的 L1 公链，有的是 L2 公链，这里先暂不展开。
-- [publicProvider](https://wagmi.sh/react/providers/public)：一个公共的节点服务，用于学习或者测试。实际项目中你通常需要换成其它正式的节点服务，比如 [ZAN](https://zan.top/home/node-service)、[alchemy](https://www.alchemy.com/) 等。
 - [WagmiWeb3ConfigProvider](https://web3.ant.design/zh-CN/components/wagmi#wagmiweb3configproviderprops)：Ant Design Web3 用来接收 wagmi 配置的 Provider。
 
 接着创建配置：
 
 ```diff
-import { createConfig, configureChains, mainnet } from "wagmi";
-import { publicProvider } from "wagmi/providers/public";
+import { createConfig, http } from "wagmi";
+import { mainnet } from "wagmi/chains";
 import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
 import { Address } from "@ant-design/web3";
 
-+ const { publicClient } = configureChains([mainnet], [publicProvider()]);
-
 + const config = createConfig({
-+   publicClient,
++   chains: [mainnet],
++   transports: {
++     [mainnet.id]: http(),
++   },
 + });
 
 export default () => {
@@ -95,16 +88,17 @@ export default () => {
 我们试一试使用 [NFTCard](../../packages/web3/src/nft-card/index.zh-CN.md) 组件：
 
 ```diff
-import { createConfig, configureChains, mainnet } from "wagmi";
-import { publicProvider } from "wagmi/providers/public";
+import { createConfig, http } from "wagmi";
+import { mainnet } from "wagmi/chains";
 import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
 - import { Address } from "@ant-design/web3";
-+ import { NFTCard } from "@ant-design/web3";
-
-const { publicClient } = configureChains([mainnet], [publicProvider()]);
++ import { Address, NFTCard } from "@ant-design/web3";
 
 const config = createConfig({
-  publicClient,
+  chains: [mainnet],
+  transports: {
+    [mainnet.id]: http(),
+  },
 });
 
 export default () => {
@@ -116,7 +110,7 @@ export default () => {
           padding: 64,
         }}
       >
--        <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+         <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
 +        <NFTCard address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={8540} />
       </div>
     </WagmiWeb3ConfigProvider>
@@ -139,42 +133,44 @@ export default () => {
 我们以 [MetaMask](https://metamask.io/) 为例，看一下如何配置钱包。
 
 ```diff
-import { createConfig, configureChains, mainnet } from "wagmi";
-import { publicProvider } from "wagmi/providers/public";
-import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
-+ import { MetaMaskConnector } from "wagmi/connectors/metaMask";
-import { Connector, ConnectButton } from "@ant-design/web3";
 
-- const { publicClient } = configureChains([mainnet], [publicProvider()]);
-+ const { publicClient, chains } = configureChains([mainnet], [publicProvider()]);
+import { createConfig, http } from "wagmi";
+import { mainnet } from "wagmi/chains";
+- import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
++ import { WagmiWeb3ConfigProvider, MetaMask } from "@ant-design/web3-wagmi";
+- import { Address, NFTCard } from "@ant-design/web3";
++ import { Address, NFTCard, Connector, ConnectButton } from "@ant-design/web3";
++ import { injected } from "wagmi/connectors";
 
 const config = createConfig({
-  publicClient,
-+  connectors: [
-+    new MetaMaskConnector({
-+      chains,
-+    }),
-  ],
+  chains: [mainnet],
+  transports: {
+    [mainnet.id]: http(),
+  },
++   connectors: [
++     injected({
++       target: "metaMask",
++     }),
++   ],
 });
 
 export default () => {
   return (
-    <WagmiWeb3ConfigProvider config={config}>
-      <div
-        style={{
-          height: "100vh",
-          padding: 64,
-        }}
-      >
+-   <WagmiWeb3ConfigProvider config={config}>
++    <WagmiWeb3ConfigProvider config={config} wallets={[MetaMask()]}>
+      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+      <NFTCard
+        address="0x79fcdef22feed20eddacbb2587640e45491b757f"
+        tokenId={8540}
+      />
 +       <Connector>
--         <NFTCard address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={8540} />
 +         <ConnectButton />
 +       </Connector>
-      </div>
     </WagmiWeb3ConfigProvider>
   );
 };
 
+
 ```
 
 最终完整的代码如下（去掉了部分 Demo 中不需要的 div 样式）：
@@ -185,4 +181,4 @@ export default () => {
 
 ![](./img/connect.png)
 
-你可以尝试参考[这篇文档](http://localhost:8000/zh-CN/components/wagmi#%E6%B7%BB%E5%8A%A0%E6%9B%B4%E5%A4%9A%E9%92%B1%E5%8C%85)配置支持更多钱包。
+你可以尝试参考[这篇文档](../../packages/web3/src/wagmi/index.zh-CN.md#添加更多钱包)配置支持更多钱包。
diff --git a/docs/course/dev-init.zh-CN.md b/docs/course/dev-init.zh-CN.md
@@ -69,7 +69,7 @@ npm i antd @ant-design/web3 --save
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-+ transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", "rc-tree", "rc-table" ],
++ transpilePackages: [  "@ant-design", "antd", "rc-util", "rc-pagination", "rc-picker" ],
 }
 
 module.exports = nextConfig
@@ -81,19 +81,23 @@ module.exports = nextConfig
 import { Address } from '@ant-design/web3';
 
 export default () => {
-  return (
-    <div
-      style={{
-        height: '100vh',
-        padding: 64,
-      }}
-    >
-      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
-    </div>
-  );
+  return <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />;
 };
 ```
 
 然后访问 [http://localhost:3000/web3](http://localhost:3000/web3) 可以看到你已经在项目中成功使用 Ant Design Web3 了 🎉
 
 ![](./img/dev-success.png)
+
+为了让页面更美观，避免上图中的横条样式，你可以在项目中的 `styles/global.css` 的第八十多行添加如下内容：
+
+```diff
+html,
+body {
+  max-width: 100vw;
++  min-height: 100vh;
+  overflow-x: hidden;
+}
+```
+
+当然，这并不是必须的。
diff --git a/docs/course/img/connect.png b/docs/course/img/connect.png
diff --git a/docs/course/img/dev-success.png b/docs/course/img/dev-success.png
diff --git a/docs/course/img/nft-card.png b/docs/course/img/nft-card.png
diff --git a/packages/wagmi/src/wagmi-provider/__tests__/connect.test.tsx b/packages/wagmi/src/wagmi-provider/__tests__/connect.test.tsx
@@ -4,7 +4,7 @@ import { useProvider } from '@ant-design/web3';
 import { Mainnet } from '@ant-design/web3-assets';
 import { fireEvent, render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { Connector } from 'wagmi';
+import type { Connector } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 
 import { MetaMask } from '../../wallets';

diff --git a/packages/wagmi/src/wagmi-provider/config-provider.tsx b/packages/wagmi/src/wagmi-provider/config-provider.tsx
@@ -7,7 +7,7 @@ import {
   type Locale,
   type Wallet,
 } from '@ant-design/web3-common';
-import { Chain as WagmiChain } from 'viem';
+import type { Chain as WagmiChain } from 'viem';
 import {
   useAccount,
   useBalance,

diff --git a/packages/wagmi/src/wallets/__tests__/safeheron.test.tsx b/packages/wagmi/src/wallets/__tests__/safeheron.test.tsx
@@ -1,5 +1,5 @@
 import { SafeheronWallet } from '@ant-design/web3-wagmi';
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { createConfig, http } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 import { injected } from 'wagmi/connectors';

diff --git a/packages/wagmi/src/wallets/okx-wallet.tsx b/packages/wagmi/src/wallets/okx-wallet.tsx
@@ -1,6 +1,6 @@
 import { metadata_OkxWallet } from '@ant-design/web3-assets';
 
-import { EthereumWallet } from '../interface';
+import type { EthereumWallet } from '../interface';
 import { UniversalWallet } from './universal-wallet';
 
 export const OkxWallet: EthereumWallet = (metadata) => {

diff --git a/packages/wagmi/src/wallets/token-pocket.tsx b/packages/wagmi/src/wallets/token-pocket.tsx
@@ -1,6 +1,6 @@
 import { metadata_TokenPocket } from '@ant-design/web3-assets';
 
-import { EthereumWallet } from '../interface';
+import type { EthereumWallet } from '../interface';
 import { UniversalWallet } from './universal-wallet';
 
 export const TokenPocket: EthereumWallet = (metadata) => {

diff --git a/packages/wagmi/src/wallets/wallet-connect.ts b/packages/wagmi/src/wallets/wallet-connect.ts
@@ -1,5 +1,5 @@
 import { metadata_WalletConnect } from '@ant-design/web3-assets';
-import { WalletMetadata, type Wallet } from '@ant-design/web3-common';
+import type { Wallet, WalletMetadata } from '@ant-design/web3-common';
 import type { Connector } from 'wagmi';
 
 import type { WalletFactory } from '../interface';

diff --git a/packages/web3/src/connect-button/connect-button.tsx b/packages/web3/src/connect-button/connect-button.tsx
@@ -9,7 +9,6 @@ import classNames from 'classnames';
 import { Address } from '../address';
 import { CryptoPrice } from '../crypto-price';
 import useIntl from '../hooks/useIntl';
-import type { IntlType } from '../hooks/useIntl';
 import { fillWith0x, writeCopyText } from '../utils';
 import { ChainSelect } from './chain-select';
 import type { ChainSelectProps } from './chain-select';

diff --git a/packages/web3/src/crypto-price/index.md b/packages/web3/src/crypto-price/index.md
@@ -24,6 +24,7 @@ You can customize the chain through the `chain` property. If you don't customize
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| className | The className of the CryptoPrice | `string` | - | - |
 | value | Value, based on the minimum unit of the token | `bigint` | `0` | - |
 | icon | Icon | `boolean` \| `ReactNode` | `true` | - |
 | decimals | Number of decimal places | `number` | `18` | - |

diff --git a/packages/web3/src/crypto-price/index.tsx b/packages/web3/src/crypto-price/index.tsx
@@ -4,7 +4,7 @@ import type { Chain } from '@ant-design/web3-common';
 import { ConfigProvider } from 'antd';
 
 import useProvider from '../hooks/useProvider';
-import { CryptoPriceBalance } from './balance';
+import { CryptoPriceBalance, type CryptoPriceBalanceProps } from './balance';
 import { useStyle } from './style';
 
 export interface CryptoPriceProps {
@@ -21,29 +21,29 @@ export const CryptoPrice: React.FC<CryptoPriceProps> = (props) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('web3-crypto-balance');
   const { wrapSSR, hashId } = useStyle(prefixCls);
-  const { className, chain: userConfigChain } = props;
   const { chain = Mainnet } = useProvider({
-    chain: userConfigChain,
+    chain: props.chain,
   });
   const {
     value = 0n,
     symbol = chain.nativeCurrency?.symbol ?? 'ETH',
     decimals = chain.nativeCurrency?.decimals ?? 18,
     fixed,
     icon = false,
+    className,
   } = props;
 
-  return wrapSSR(
-    <CryptoPriceBalance
-      fixed={fixed}
-      value={value}
-      symbol={symbol}
-      decimals={decimals}
-      className={className}
-      hashId={hashId}
-      icon={icon === true ? chain.nativeCurrency?.icon : icon}
-    />,
-  );
+  const cryptoPriceBalanceProps: CryptoPriceBalanceProps = {
+    fixed,
+    value,
+    symbol,
+    decimals,
+    className,
+    hashId,
+    icon: icon === true ? chain.nativeCurrency?.icon : icon,
+  };
+
+  return wrapSSR(<CryptoPriceBalance {...cryptoPriceBalanceProps} />);
 };
 
 CryptoPrice.displayName = 'CryptoPrice';
diff --git a/packages/web3/src/crypto-price/index.zh-CN.md b/packages/web3/src/crypto-price/index.zh-CN.md
@@ -22,11 +22,12 @@ group:
 
 ## API
 
-| 属性     | 描述                   | 类型                   | 默认值    | 版本 |
-| -------- | ---------------------- | ---------------------- | --------- | ---- |
-| value    | 值，基于代币的最小单位 | `bigint`               | `0`       | -    |
-| icon     | 图标                   | `boolean \| ReactNode` | `true`    | -    |
-| decimals | 小数位数               | `number`               | `18`      | -    |
-| symbol   | 代币符号               | `string`               | `ETH`     | -    |
-| chain    | 链                     | `Chain`                | `Mainnet` | -    |
-| fixed    | 小数点后固定位数       | `number`               | -         | -    |
+| 属性      | 描述                   | 类型                   | 默认值    | 版本 |
+| --------- | ---------------------- | ---------------------- | --------- | ---- |
+| className | 加密货币的类名         | `string`               | -         | -    |
+| value     | 值，基于代币的最小单位 | `bigint`               | `0`       | -    |
+| icon      | 图标                   | `boolean \| ReactNode` | `true`    | -    |
+| decimals  | 小数位数               | `number`               | `18`      | -    |
+| symbol    | 代币符号               | `string`               | `ETH`     | -    |
+| chain     | 链                     | `Chain`                | `Mainnet` | -    |
+| fixed     | 小数点后固定位数       | `number`               | -         | -    |