feat: update demo for add eip6963 and wallet connect

Likang0122 · Mar 29, 2024 · 6405852 · 6405852
1 parent 260361b
commit 6405852
Show file tree

Hide file tree

Showing 7 changed files with 268 additions and 26 deletions.
diff --git a/09_EIP1193/demo.js b/09_EIP1193/demo.js
diff --git a/09_EIP1193/readme.md b/09_EIP1193/readme.md
@@ -54,6 +54,34 @@ EIP6963 不再通过 `window.ethereum` 对象来和钱包进行交互，而是
 
 如果你使用了 [Ant Design Web3](https://web3.ant.design/zh-CN/components/wagmi#eip6963)，通过配置 `WagmiWeb3ConfigProvider` 的 `eip6963` 即可在 DApp 中使用 EIP6963。它的连接钱包的弹窗会自动添加检测到的钱包。
 
+下面是我们基于之前的课程例子的修改示例：
+
+```diff
+export default function Web3() {
+  return (
+    <WagmiWeb3ConfigProvider
+      config={config}
+      wallets={[MetaMask()]}
++     eip6963={{
++       autoAddInjectedWallets: true,
++     }}
+    >
+      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+      <NFTCard
+        address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
+        tokenId={641}
+      />
+      <Connector>
+        <ConnectButton />
+      </Connector>
+      <CallTest />
+    </WagmiWeb3ConfigProvider>
+  );
+}
+```
+
+其中配置了 `eip6963` 使得使用通过 EIP6963 协议连接钱包，避免了多个钱包之间可能出现的冲突。另外添加了 `autoAddInjectedWallets` 配置使得自动添加检测到的钱包到 Ant Design Web3 的 UI 中，提升用户体验，让用户可以自由选择他已经安装的钱包。
+
 ## 总结
 
 不管是 EIP1193 还是 EIP6963，它们都是通过浏览器的 JavaScript API 来和钱包进行交互的。它要求钱包可以向 DApp 的运行时注入对象或者发送事件，比如通过 Chrome 浏览器插件，或者你在钱包内置的浏览器中访问 DApp。

diff --git a/09_EIP1193/web3.tsx b/09_EIP1193/web3.tsx
@@ -0,0 +1,145 @@
+import {
+  Address,
+  ConnectButton,
+  Connector,
+  NFTCard,
+  useAccount,
+} from "@ant-design/web3";
+import { MetaMask, WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
+import { Button, message } from "antd";
+import { parseEther } from "viem";
+import {
+  createConfig,
+  http,
+  useReadContract,
+  useWriteContract,
+  useWatchContractEvent,
+} 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",
+    }),
+  ],
+});
+
+const CallTest = () => {
+  const { account } = useAccount();
+  const result = useReadContract({
+    abi: [
+      {
+        type: "function",
+        name: "balanceOf",
+        stateMutability: "view",
+        inputs: [{ name: "account", type: "address" }],
+        outputs: [{ type: "uint256" }],
+      },
+    ],
+    // Goerli test contract 0x418325c3979b7f8a17678ec2463a74355bdbe72c
+    address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
+    functionName: "balanceOf",
+    args: [account?.address as `0x${string}`],
+  });
+  const { writeContract } = useWriteContract();
+
+  useWatchContractEvent({
+    address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
+    abi: [
+      {
+        anonymous: false,
+        inputs: [
+          {
+            indexed: false,
+            internalType: "address",
+            name: "minter",
+            type: "address",
+          },
+          {
+            indexed: false,
+            internalType: "uint256",
+            name: "amount",
+            type: "uint256",
+          },
+        ],
+        name: "Minted",
+        type: "event",
+      },
+    ],
+    eventName: "Minted",
+    onLogs() {
+      message.success("new minted!");
+    },
+  });
+
+  return (
+    <div>
+      {result.data?.toString()}
+      <Button
+        onClick={() => {
+          writeContract(
+            {
+              abi: [
+                {
+                  type: "function",
+                  name: "mint",
+                  stateMutability: "payable",
+                  inputs: [
+                    {
+                      internalType: "uint256",
+                      name: "quantity",
+                      type: "uint256",
+                    },
+                  ],
+                  outputs: [],
+                },
+              ],
+              address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
+              functionName: "mint",
+              args: [1],
+              value: parseEther("0.01"),
+            },
+            {
+              onSuccess: () => {
+                message.success("Mint Success");
+              },
+              onError: (err) => {
+                message.error(err.message);
+              },
+            }
+          );
+        }}
+      >
+        mint
+      </Button>
+    </div>
+  );
+};
+
+export default function Web3() {
+  return (
+    <WagmiWeb3ConfigProvider
+      config={config}
+      wallets={[MetaMask()]}
+      eip6963={{
+        autoAddInjectedWallets: true,
+      }}
+    >
+      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+      <NFTCard
+        address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
+        tokenId={641}
+      />
+      <Connector>
+        <ConnectButton />
+      </Connector>
+      <CallTest />
+    </WagmiWeb3ConfigProvider>
+  );
+}
diff --git a/10_WalletConnect/readme.md b/10_WalletConnect/readme.md
@@ -70,7 +70,7 @@ const config = createConfig({
       target: "metaMask",
     }),
 +    walletConnect({
-+      projectId: 'c07c0051c2055890eade3556618e38a6'
++      projectId: 'c07c0051c2055890eade3556618e38a6',
 +      showQrModal: false,
 +    }),
   ],

diff --git a/10_WalletConnect/web3.tsx b/10_WalletConnect/web3.tsx
@@ -12,7 +12,13 @@ import {
 } from "@ant-design/web3-wagmi";
 import { Button, message } from "antd";
 import { parseEther } from "viem";
-import { createConfig, http, useReadContract, useWriteContract } from "wagmi";
+import {
+  createConfig,
+  http,
+  useReadContract,
+  useWriteContract,
+  useWatchContractEvent,
+} from "wagmi";
 import { mainnet } from "wagmi/chains";
 import { injected, walletConnect } from "wagmi/connectors";
 
@@ -51,6 +57,35 @@ const CallTest = () => {
   });
   const { writeContract } = useWriteContract();
 
+  useWatchContractEvent({
+    address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
+    abi: [
+      {
+        anonymous: false,
+        inputs: [
+          {
+            indexed: false,
+            internalType: "address",
+            name: "minter",
+            type: "address",
+          },
+          {
+            indexed: false,
+            internalType: "uint256",
+            name: "amount",
+            type: "uint256",
+          },
+        ],
+        name: "Minted",
+        type: "event",
+      },
+    ],
+    eventName: "Minted",
+    onLogs() {
+      message.success("new minted!");
+    },
+  });
+
   return (
     <div>
       {result.data?.toString()}
@@ -100,6 +135,9 @@ export default function Web3() {
     <WagmiWeb3ConfigProvider
       config={config}
       wallets={[MetaMask(), WalletConnect()]}
+      eip6963={{
+        autoAddInjectedWallets: true,
+      }}
     >
       <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
       <NFTCard

diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ WTF Dapp 是一个 DApp 极简入门教程，帮助开发者入门去中心应
 
 ## 进阶
 
-**第 9 讲：EIP1193 和 EIP6963**：[教程](./09_EIP1193/readme.md) | [代码](./09_EIP1193/demo.js)
+**第 9 讲：EIP1193 和 EIP6963**：[教程](./09_EIP1193/readme.md) | [代码](./09_EIP1193/web3.tsx)
 
 **第 10 讲：通过 WalletConnect 连接移动端钱包**：[教程](./10_WalletConnect/readme.md) | [代码](./10_WalletConnect/web3.tsx)
 

diff --git a/demo/pages/web3.tsx b/demo/pages/web3.tsx
@@ -1,31 +1,40 @@
-import { createConfig, http, useReadContract, useWriteContract } from "wagmi";
-import { mainnet, goerli } from "wagmi/chains";
-import {
-  WagmiWeb3ConfigProvider,
-  MetaMask,
-  Goerli,
-} from "@ant-design/web3-wagmi";
 import {
   Address,
-  NFTCard,
-  Connector,
   ConnectButton,
+  Connector,
+  NFTCard,
   useAccount,
 } from "@ant-design/web3";
-import { injected } from "wagmi/connectors";
+import {
+  MetaMask,
+  WagmiWeb3ConfigProvider,
+  WalletConnect,
+} from "@ant-design/web3-wagmi";
 import { Button, message } from "antd";
 import { parseEther } from "viem";
+import {
+  createConfig,
+  http,
+  useReadContract,
+  useWriteContract,
+  useWatchContractEvent,
+} from "wagmi";
+import { mainnet } from "wagmi/chains";
+import { injected, walletConnect } from "wagmi/connectors";
 
 const config = createConfig({
-  chains: [mainnet, goerli],
+  chains: [mainnet],
   transports: {
     [mainnet.id]: http(),
-    [goerli.id]: http(),
   },
   connectors: [
     injected({
       target: "metaMask",
     }),
+    walletConnect({
+      projectId: "c07c0051c2055890eade3556618e38a6",
+      showQrModal: false,
+    }),
   ],
 });
 
@@ -48,6 +57,35 @@ const CallTest = () => {
   });
   const { writeContract } = useWriteContract();
 
+  useWatchContractEvent({
+    address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
+    abi: [
+      {
+        anonymous: false,
+        inputs: [
+          {
+            indexed: false,
+            internalType: "address",
+            name: "minter",
+            type: "address",
+          },
+          {
+            indexed: false,
+            internalType: "uint256",
+            name: "amount",
+            type: "uint256",
+          },
+        ],
+        name: "Minted",
+        type: "event",
+      },
+    ],
+    eventName: "Minted",
+    onLogs() {
+      message.success("new minted!");
+    },
+  });
+
   return (
     <div>
       {result.data?.toString()}
@@ -96,8 +134,10 @@ export default function Web3() {
   return (
     <WagmiWeb3ConfigProvider
       config={config}
-      chains={[Goerli]}
-      wallets={[MetaMask()]}
+      wallets={[MetaMask(), WalletConnect()]}
+      eip6963={{
+        autoAddInjectedWallets: true,
+      }}
     >
       <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
       <NFTCard