[01_QuickStart] wagmi adapter adopt a new approach (#141)

* feat(adapter): adopt a new approach in 01_QuickStart (#122) * refactor: remove Goerli * docs: optimize formatting, add author
WTFAcademy · Oct 23, 2024 · d4c9aad · d4c9aad
1 parent a1fa69c
commit d4c9aad
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 50 deletions.
diff --git a/01_QuickStart/readme.md b/01_QuickStart/readme.md
@@ -1,4 +1,4 @@
-本节作者：[@愚指导](https://x.com/yudao1024)
+本节作者：[@愚指导](https://x.com/yudao1024)、[@小符](https://x.com/smallfu666)
 
 这一讲，我们会引导你快速创建一个 React 项目，并在其中展示一个 NFT 的图片。
 
@@ -57,7 +57,9 @@ npm i
 npm i antd @ant-design/web3 @ant-design/web3-wagmi wagmi @tanstack/react-query --save
 ```
 
-- `@ant-design/web3` 是一个 UI 组件库，它通过不同的[适配器](../guide/adapter.zh-CN.md)和不同的区块链连接。本课程中，我们主要基于的是[以太坊](https://ethereum.org/zh/)。对应的，我们也将使用[以太坊的适配器](../../packages/web3/src/wagmi/index.zh-CN.md)来实现课程的需求。
+- `@ant-design/web3` 是一个 UI 组件库，它通过不同的[适配器](https://web3.ant.design/guide/adapter-cn)和不同的区块链连接。本课程中，我们主要基于的是[以太坊](https://ethereum.org/zh/)上的 DApp 开发。
+
+- `@ant-design/web3-wagmi` 是一个基于[wagmi 2.x](https://wagmi.sh/) 的 Ant Design Web3 以太坊适配器，它为 `@ant-design/web3` 的组件提供了连接以太坊等 EVM 兼容链的能力。通过它，你不需要自己处理组件的连接状态，链数据请求等逻辑。它会通过 [Web3ConfigProvider](https://web3.ant.design/components/web3-config-provider-cn] 为组件提供相关全局状态和接口。
 
 - [wagmi](https://wagmi.sh/) 是一个开源的服务以太坊的 React Hooks 库，并依赖 `@tanstack/react-query`。Ant Design Web3 的适配器 `@ant-design/web3-wagmi` 就是基于它实现的，在本课程的后面部分，如果没有特殊说明，那提到的适配器就是指 `@ant-design/web3-wagmi`。
 
@@ -89,7 +91,7 @@ export default function Web3() {
 
 ![](./img/dev-success.png)
 
-为了让页面更美观，避免上图中的横条样式，你可以在项目中的 `styles/global.css` 的第八十多行添加如下内容：
+为了让页面更美观，避免上图中的横条样式，你可以在项目中的 `styles/global.css` 的第`85`行添加如下内容：
 
 ```diff
 html,
@@ -104,14 +106,13 @@ body {
 
 ## 配置适配器
 
-适配器的配置直接采用 [wagmi 的官方配置](https://wagmi.sh/core/getting-started)，对于实际项目来说你通常需要配置 JSON RPC 的地址和各种钱包，在该课程中，我们会先采用最简单的配置，再逐步引导你了解你实际项目中所需要的配置。
+适配器可以连接 Ant Design Web3 的 UI 组件和区块链，让这些 UI 组件可以快速连接上区块链。比如，当你使用了 `@ant-design/web3-wagmi` 后，Connector、NFTCard 等组件就可以直接连接上以太坊了。 适配器的配置可以参考[以太坊推荐配置](https://web3.ant.design/components/ethereum-cn#%E6%8E%A8%E8%8D%90%E9%85%8D%E7%BD%AE)，在该课程中，我们会先采用最简单的配置，再逐步引导你了解你实际项目中所需要的配置。
 
 首先，请继续编辑 `pages/web3.tsx` 文件，引入所需要的内容：
 
 ```diff
-+ import { createConfig, http } from 'wagmi';
-+ import { mainnet } from 'wagmi/chains';
-+ import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
++ import { http } from "wagmi";
++ import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
 import { Address } from "@ant-design/web3";
 
 export default function Web3() {
@@ -123,65 +124,61 @@ export default function Web3() {
 
 其中引入的内容说明如下：
 
-- [createConfig](https://wagmi.sh/react/config)：wagmi 用来创建配置的方法。
 - http：wagmi 用来创建 [HTTP JSON RPC](https://wagmi.sh/core/api/transports/http) 连接的方法，通过它你可以通过 HTTP 请求访问区块链。
-- [mainnet](https://wagmi.sh/react/chains)：代表以太坊主网，除了 `mainnet` 以外还会有类似 `sepolia` 的测速网和类似 `bsc` 和 `base` 的 EVM 兼容的其它公链，有的是和以太坊一样的 L1 公链，有的是 L2 公链，这里先暂不展开。
-- [WagmiWeb3ConfigProvider](https://web3.ant.design/zh-CN/components/wagmi#wagmiweb3configproviderprops)：Ant Design Web3 用来接收 wagmi 配置的 Provider。
+- Mainnet：代表以太坊主网，除了 `Mainnet` 以外还支持 `Sepolia` 测试网以及 `BSC` 和 `Arbitrum` 等 L2 链；支持的链参考[这里](https://github.com/ant-design/ant-design-web3/blob/main/packages/wagmi/src/chains.ts)。
+- [WagmiWeb3ConfigProvider](https://web3.ant.design/components/web3-config-provider-cn)：Ant Design Web3 用来接收 wagmi 配置的 Provider。
 
 接着创建配置：
 
 ```diff
-import { createConfig, http } from "wagmi";
-import { mainnet } from "wagmi/chains";
-import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
+import { http } from "wagmi";
+import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
 import { Address } from "@ant-design/web3";
 
-+ const config = createConfig({
-+   chains: [mainnet],
-+   transports: {
-+     [mainnet.id]: http(),
-+   },
-+ });
-
 export default function Web3() {
   return (
-+     <WagmiWeb3ConfigProvider config={config}>
-        <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
-+    </WagmiWeb3ConfigProvider>
++    <WagmiWeb3ConfigProvider
++      chains={[Mainnet]}
++      transports={{
++        [Mainnet.id]: http(),
++      }}
++    >
+      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
++	 </WagmiWeb3ConfigProvider>
   );
 };
 
 ```
 
-这样，我们就完成了 wagmi 的基础配置，接下来我们就可以通过 Ant Design Web3 的组件来获取链上的数据了。
+这样，我们就完成了适配器的配置，接下来我们就可以通过 Ant Design Web3 的组件来获取链上的数据了。
 
-我们试一试使用 [NFTCard](../../packages/web3/src/nft-card/index.zh-CN.md) 组件：
+我们试一试使用 [NFTCard](https://web3.ant.design/components/nft-card-cn) 组件：
 
 ```diff
-import { createConfig, http } from "wagmi";
-import { mainnet } from "wagmi/chains";
-import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
+import { http } from "wagmi";
+import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
 - import { Address } from "@ant-design/web3";
 + import { Address, NFTCard } from "@ant-design/web3";
 
-const config = createConfig({
-  chains: [mainnet],
-  transports: {
-    [mainnet.id]: http(),
-  },
-});
-
 export default function Web3() {
   return (
-    <WagmiWeb3ConfigProvider config={config}>
+    <WagmiWeb3ConfigProvider
+      chains={[Mainnet]}
+      transports={{
+        [Mainnet.id]: http(),
+      }}
+    >
       <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
-+     <NFTCard address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" tokenId={641} />
++     <NFTCard
++       address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
++       tokenId={641}
++     />
     </WagmiWeb3ConfigProvider>
   );
 };
 ```
 
-`NFTCard` 组件会从 [0xEcd0D12E21805803f70de03B72B1C162dB0898d9](https://etherscan.io/address/0xEcd0D12E21805803f70de03B72B1C162dB0898d9) NFT 合约中获取 tokenId 为 641 的 NFT 信息，然后展示在页面上。
+`NFTCard` 组件会从 [0xEcd0D12E21805803f70de03B72B1C162dB0898d9](https://etherscan.io/address/0xEcd0D12E21805803f70de03B72B1C162dB0898d9) NFT 合约中获取 tokenId 为 `641` 的 NFT 信息，然后展示在页面上。
 
 效果如下：
 

diff --git a/01_QuickStart/web3.tsx b/01_QuickStart/web3.tsx
@@ -1,18 +1,15 @@
-import { createConfig, http } from "wagmi";
-import { mainnet } from "wagmi/chains";
-import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
-import { Address, NFTCard } from "@ant-design/web3";
-
-const config = createConfig({
-  chains: [mainnet],
-  transports: {
-    [mainnet.id]: http(),
-  },
-});
+import { http } from "wagmi";
+import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
+import { Address, NFTCard} from "@ant-design/web3";
 
 export default function Web3() {
   return (
-    <WagmiWeb3ConfigProvider config={config}>
+    <WagmiWeb3ConfigProvider
+      chains={[Mainnet]}
+      transports={{
+        [Mainnet.id]: http(),
+      }}
+    >
       <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
       <NFTCard
         address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"