feat: add code files

Likang0122 · Mar 8, 2024 · 25ac9f8 · 25ac9f8
1 parent bf75b8b
commit 25ac9f8
Show file tree

Hide file tree

Showing 7 changed files with 209 additions and 30 deletions.
diff --git a/01_QuickStart/readme.md b/01_QuickStart/readme.md
@@ -144,14 +144,7 @@ import { Address } from "@ant-design/web3";
 export default function Web3() {
   return (
 +     <WagmiWeb3ConfigProvider config={config}>
-      <div
-        style={{
-          height: "100vh",
-          padding: 64,
-        }}
-      >
         <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
-      </div>
 +    </WagmiWeb3ConfigProvider>
   );
 };
@@ -179,15 +172,8 @@ const config = createConfig({
 export default function Web3() {
   return (
     <WagmiWeb3ConfigProvider config={config}>
-      <div
-        style={{
-          height: "100vh",
-          padding: 64,
-        }}
-      >
-         <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
-+        <NFTCard address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" tokenId={641} />
-      </div>
+      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
++     <NFTCard address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" tokenId={641} />
     </WagmiWeb3ConfigProvider>
   );
 };

diff --git a/01_QuickStart/web3.tsx b/01_QuickStart/web3.tsx
@@ -0,0 +1,23 @@
+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(),
+  },
+});
+
+export default function Web3() {
+  return (
+    <WagmiWeb3ConfigProvider config={config}>
+      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+      <NFTCard
+        address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
+        tokenId={641}
+      />
+    </WagmiWeb3ConfigProvider>
+  );
+}
diff --git a/02_NodeService/web3.tsx b/02_NodeService/web3.tsx
@@ -0,0 +1,25 @@
+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(
+      "https://api.zan.top/node/v1/eth/mainnet/{YourZANApiKey}"
+    ),
+  },
+});
+
+export default function Web3() {
+  return (
+    <WagmiWeb3ConfigProvider config={config}>
+      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+      <NFTCard
+        address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
+        tokenId={641}
+      />
+    </WagmiWeb3ConfigProvider>
+  );
+}
diff --git a/03_ConnectWallet/web3.tsx b/03_ConnectWallet/web3.tsx
@@ -0,0 +1,32 @@
+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",
+    }),
+  ],
+});
+
+export default function Web3() {
+  return (
+    <WagmiWeb3ConfigProvider config={config} wallets={[MetaMask()]}>
+      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+      <NFTCard
+        address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
+        tokenId={641}
+      />
+      <Connector>
+        <ConnectButton />
+      </Connector>
+    </WagmiWeb3ConfigProvider>
+  );
+}
diff --git a/04_CallContract/web3.tsx b/04_CallContract/web3.tsx
@@ -0,0 +1,104 @@
+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 } 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();
+
+  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()]}>
+      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+      <NFTCard
+        address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
+        tokenId={641}
+      />
+      <Connector>
+        <ConnectButton />
+      </Connector>
+      <CallTest />
+    </WagmiWeb3ConfigProvider>
+  );
+}
diff --git a/09_EIP1193/demo.js b/09_EIP1193/demo.js
@@ -0,0 +1,9 @@
+ethereum
+  .request({ method: "eth_chainId" })
+  .then((chainId) => {
+    console.log(`hexadecimal string: ${chainId}`);
+    console.log(`decimal number: ${parseInt(chainId, 16)}`);
+  })
+  .catch((error) => {
+    console.error(`Error fetching chainId: ${error.code}: ${error.message}`);
+  });
diff --git a/README.md b/README.md
@@ -1,33 +1,33 @@
 # WTF-Dapp
 
-Minimal tutorials to build Dapps.
+DApp 开发极简入门
 
 ## 基础
 
-**第 1 讲：快速开始（三分钟展示 NFT）**：【[教程](./01_QuickStart/readme.md)】
+**第 1 讲：快速开始（三分钟展示 NFT）**：[教程](./01_QuickStart/readme.md) | [代码](./01_QuickStart/web3.tsx)
 
-**第 2 讲：节点服务**：【[教程](./02_NodeService/readme.md)】
+**第 2 讲：节点服务**：[教程](./02_NodeService/readme.md) | [代码](./02_NodeService/web3.tsx)
 
-**第 3 讲：连接钱包**：【[教程](./03_ConnectWallet/readme.md)】
+**第 3 讲：连接钱包**：[教程](./03_ConnectWallet/readme.md) | [代码](./03_ConnectWallet/web3.tsx)
 
-**第 4 讲：调用合约**：【[教程](./04_CallContract/readme.md)】
+**第 4 讲：调用合约**：[教程](./04_CallContract/readme.md) | [代码](./04_CallContract/web3.tsx)
 
-**第 5 讲：监听事件**：【[教程](./05_Events/readme.md)】
+**第 5 讲：监听事件**：[教程](./05_Events/readme.md)
 
-**第 6 讲：Next.js 部署**：【[教程](./06_NextJS/readme.md)】
+**第 6 讲：Next.js 部署**：[教程](./06_NextJS/readme.md)
 
-**第 7 讲：合约开发和测试**：【[教程](./07_ContractDev/readme.md)】
+**第 7 讲：合约开发和测试**：[教程](./07_ContractDev/readme.md)
 
-**第 8 讲：合约部署**：【[教程](./08_ContractDeploy/readme.md)】
+**第 8 讲：合约部署**：[教程](./08_ContractDeploy/readme.md)
 
 ## 进阶
 
-**第 9 讲：EIP1193 和 EIP6963**：【[教程](./09_EIP1193/readme.md)】
+**第 9 讲：EIP1193 和 EIP6963**：[教程](./09_EIP1193/readme.md) | [代码](./09_EIP1193/demo.js)
 
-**第 10 讲：通过 WalletConnect 连接移动端钱包**：【[教程](./10_WalletConnect/readme.md)】
+**第 10 讲：通过 WalletConnect 连接移动端钱包**：[教程](./10_WalletConnect/readme.md)
 
-**第 11 讲：支持多链**：【[教程](./11_MultipleChain/readme.md)】
+**第 11 讲：支持多链**：[教程](./11_MultipleChain/readme.md)
 
-**第 12 讲：签名和验签**：【[教程](./12_Signature/readme.md)】
+**第 12 讲：签名和验签**：[教程](./12_Signature/readme.md)
 
-**第 13 讲：转账和收款**：【[教程](./13_Payment/readme.md)】
+**第 13 讲：转账和收款**：[教程](./13_Payment/readme.md)