docs: goerli -> sepolia (#1090)

* docs: typo * docs: goerli -> sepolia * docs: dead code & space * docs: typo * docs: Spin -> btn loading * docs: button loading & waitForTransactionReceipt
ant-design · Aug 13, 2024 · e4dccd0 · e4dccd0
1 parent 2c7e9e9
commit e4dccd0
Show file tree

Hide file tree

Showing 10 changed files with 193 additions and 65 deletions.
diff --git a/docs/course/contract-compile-deploy.zh-CN.md b/docs/course/contract-compile-deploy.zh-CN.md
@@ -39,7 +39,7 @@ order: 3
 
 ## 部署
 
-点击 `Deploy&Run` 可以将将交易发送到当前的 `ENVIRONMENT` 中。
+点击 `Deploy&Run` 可以将交易发送到当前的 `ENVIRONMENT` 中。
 
 接下来我们尝试通过 MetaMask 部署合约到测试网 Goerli 中，请先将你的 MetaMask 切换到测试网 Goerli（当然你也可以切换到其它你习惯使用的测试网）。
 

diff --git a/docs/course/contract-dapp.md b/docs/course/contract-dapp.md
@@ -19,11 +19,11 @@ In addition to the address, we also need to switch to the testnet. The specific
 ```diff
 import { createConfig, http, useReadContract, useWriteContract } from "wagmi";
 - import { mainnet } from "wagmi/chains";
-+ import { mainnet, goerli } from "wagmi/chains";
++ import { mainnet, sepolia } from "wagmi/chains";
 import {
   WagmiWeb3ConfigProvider,
   MetaMask,
-+  Goerli,
++  Sepolia,
 } from "@ant-design/web3-wagmi";
 import {
   Address,
@@ -38,10 +38,10 @@ import { parseEther } from "viem";
 
 const config = createConfig({
 -  chains: [mainnet],
-+  chains: [mainnet, goerli],
++  chains: [mainnet, sepolia],
   transports: {
      [mainnet.id]: http(),
-+    [goerli.id]: http(),
++    [sepolia.id]: http(),
   },
   connectors: [
     injected({
@@ -50,6 +50,9 @@ const config = createConfig({
   ],
 });
 
+- const CONTRACT_ADDRESS = "0xEcd0D12E21805803f70de03B72B1C162dB0898d9";
++ const CONTRACT_ADDRESS = "0x81BaD6F768947D7741c83d9EB9007e1569115703"; // use your own contract address
+
 const CallTest = () => {
   const { account } = useAccount();
   const result = useReadContract({
@@ -62,17 +65,28 @@ const CallTest = () => {
         outputs: [{ type: "uint256" }],
       },
     ],
--    address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
-+    address: "0x418325c3979b7f8a17678ec2463a74355bdbe72c", // use your own contract address
+    address: CONTRACT_ADDRESS,
     functionName: "balanceOf",
     args: [account?.address as `0x${string}`],
   });
-  const { writeContract } = useWriteContract();
+  const { data: hash, writeContract } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess: isConfirmed } =
+    useWaitForTransactionReceipt({
+      hash,
+    });
+
+  useEffect(() => {
+    if (isConfirmed) {
+      message.success("Mint Success");
+      result.refetch();
+    }
+  }, [isConfirmed]);
 
   return (
     <div>
       {result.data?.toString()}
       <Button
+        loading={isConfirming}
         onClick={() => {
           writeContract(
             {
@@ -91,16 +105,12 @@ const CallTest = () => {
                   outputs: [],
                 },
               ],
--             address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
-+             address: "0x418325c3979b7f8a17678ec2463a74355bdbe72c", // use your own contract address
+              address: CONTRACT_ADDRESS,
               functionName: "mint",
-              args: [1],
+              args: [BigInt(1)],
               value: parseEther("0.01"),
             },
             {
-              onSuccess: () => {
-                message.success("Mint Success");
-              },
               onError: (err) => {
                 message.error(err.message);
               },
@@ -118,7 +128,7 @@ export default function Web3() {
   return (
     <WagmiWeb3ConfigProvider
       config={config}
-+      chains={[Goerli]}
++      chains={[Sepolia]}
       wallets={[MetaMask()]}
     >
       <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
@@ -140,7 +150,7 @@ Switch to the Goerli testnet in the DApp page, and if you click the `mint` butto
 
 ![](./img/mint-test-net.png)
 
-After the transaction is completed, refresh the page, and you will find that the previous `balanceOf` result has become `1`, which means that you have successfully minted an NFT. Of course, a truly good DApp will add events to the smart contract, listen to contract events on the front end, and then automatically update the results. But we will not introduce the event part in this introductory course.
+After the transaction is online, and you will find that the previous `balanceOf` result has become `1`, which means that you have successfully minted an NFT. Of course, a truly good DApp will add events to the smart contract, listen to contract events on the front end, and then automatically update the results. But we will not introduce the event part in this introductory course.
 
 ## Complete example
 

diff --git a/docs/course/contract-dapp.zh-CN.md b/docs/course/contract-dapp.zh-CN.md
@@ -18,11 +18,11 @@ order: 4
 ```diff
 import { createConfig, http, useReadContract, useWriteContract } from "wagmi";
 - import { mainnet } from "wagmi/chains";
-+ import { mainnet, goerli } from "wagmi/chains";
++ import { mainnet, sepolia } from "wagmi/chains";
 import {
   WagmiWeb3ConfigProvider,
   MetaMask,
-+  Goerli,
++  Sepolia,
 } from "@ant-design/web3-wagmi";
 import {
   Address,
@@ -37,10 +37,10 @@ import { parseEther } from "viem";
 
 const config = createConfig({
 -  chains: [mainnet],
-+  chains: [mainnet, goerli],
++  chains: [mainnet, sepolia],
   transports: {
      [mainnet.id]: http(),
-+    [goerli.id]: http(),
++    [sepolia.id]: http(),
   },
   connectors: [
     injected({
@@ -49,6 +49,9 @@ const config = createConfig({
   ],
 });
 
+- const CONTRACT_ADDRESS = "0xEcd0D12E21805803f70de03B72B1C162dB0898d9";
++ const CONTRACT_ADDRESS = "0x81BaD6F768947D7741c83d9EB9007e1569115703"; // use your own contract address
+
 const CallTest = () => {
   const { account } = useAccount();
   const result = useReadContract({
@@ -61,17 +64,28 @@ const CallTest = () => {
         outputs: [{ type: "uint256" }],
       },
     ],
--    address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
-+    address: "0x418325c3979b7f8a17678ec2463a74355bdbe72c", // use your own contract address
+    address: CONTRACT_ADDRESS,
     functionName: "balanceOf",
     args: [account?.address as `0x${string}`],
   });
-  const { writeContract } = useWriteContract();
+  const { data: hash, writeContract } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess: isConfirmed } =
+    useWaitForTransactionReceipt({
+      hash,
+    });
+
+  useEffect(() => {
+    if (isConfirmed) {
+      message.success("Mint Success");
+      result.refetch();
+    }
+  }, [isConfirmed]);
 
   return (
     <div>
       {result.data?.toString()}
       <Button
+        loading={isConfirming}
         onClick={() => {
           writeContract(
             {
@@ -90,16 +104,12 @@ const CallTest = () => {
                   outputs: [],
                 },
               ],
--             address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
-+             address: "0x418325c3979b7f8a17678ec2463a74355bdbe72c", // use your own contract address
+              address: CONTRACT_ADDRESS,
               functionName: "mint",
-              args: [1],
+              args: [BigInt(1)],
               value: parseEther("0.01"),
             },
             {
-              onSuccess: () => {
-                message.success("Mint Success");
-              },
               onError: (err) => {
                 message.error(err.message);
               },
@@ -117,7 +127,7 @@ export default function Web3() {
   return (
     <WagmiWeb3ConfigProvider
       config={config}
-+      chains={[Goerli]}
++      chains={[Sepolia]}
       wallets={[MetaMask()]}
     >
       <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
@@ -135,11 +145,11 @@ export default function Web3() {
 
 ```
 
-然后在 DApp 页面中切换到 Goerli 测试网，点击 `mint` 按钮后如果顺利会触发 MetaMask 的交易确认弹窗：
+然后在 DApp 页面中切换到 Sepolia 测试网，点击 `mint` 按钮后如果顺利会触发 MetaMask 的交易确认弹窗：
 
 ![](./img/mint-test-net.png)
 
-交易完成后再刷新页面，你会发现之前 `balanceOf` 的结果变成了 `1`，这代表你已经成功铸造了一个 NFT。当然，一个真正体验好的 DApp 会在智能合约中添加事件，在前端监听合约事件，然后自动更新结果。但是关于事件这部分内容我们就不在这个入门的课程中介绍了。
+交易上链后，你会发现之前 `balanceOf` 的结果变成了 `1`，这代表你已经成功铸造了一个 NFT。当然，一个真正体验好的 DApp 会在智能合约中添加事件，在前端监听合约事件，然后自动更新结果。但是关于事件这部分内容我们就不在这个入门的课程中介绍了。
 
 ## 完整示例
 

diff --git a/docs/course/demos/call-contract.tsx b/docs/course/demos/call-contract.tsx
@@ -1,8 +1,15 @@
+import React, { useEffect } from 'react';
 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 {
+  createConfig,
+  http,
+  useReadContract,
+  useWaitForTransactionReceipt,
+  useWriteContract,
+} from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 import { injected } from 'wagmi/connectors';
 
@@ -18,6 +25,8 @@ const config = createConfig({
   ],
 });
 
+const CONTRACT_ADDRESS = '0xEcd0D12E21805803f70de03B72B1C162dB0898d9';
+
 const CallTest = () => {
   const { account } = useAccount();
   const result = useReadContract({
@@ -30,17 +39,27 @@ const CallTest = () => {
         outputs: [{ type: 'uint256' }],
       },
     ],
-    // Goerli test contract 0x418325c3979b7f8a17678ec2463a74355bdbe72c
-    address: '0xEcd0D12E21805803f70de03B72B1C162dB0898d9',
+    address: CONTRACT_ADDRESS,
     functionName: 'balanceOf',
     args: [account?.address as `0x${string}`],
   });
-  const { writeContract } = useWriteContract();
+  const { writeContract, data: hash } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
+    hash,
+  });
+
+  useEffect(() => {
+    if (isConfirmed) {
+      message.success('Mint Success');
+      result.refetch();
+    }
+  }, [isConfirmed]);
 
   return (
     <div>
       {result.data?.toString()}
       <Button
+        loading={isConfirming}
         onClick={() => {
           writeContract(
             {
@@ -59,15 +78,12 @@ const CallTest = () => {
                   outputs: [],
                 },
               ],
-              address: '0xEcd0D12E21805803f70de03B72B1C162dB0898d9',
+              address: CONTRACT_ADDRESS,
               functionName: 'mint',
               args: [BigInt(1)],
               value: parseEther('0.01'),
             },
             {
-              onSuccess: () => {
-                message.success('Mint Success');
-              },
               onError: (err) => {
                 message.error(err.message);
               },

diff --git a/docs/course/demos/dapp.tsx b/docs/course/demos/dapp.tsx
@@ -1,16 +1,23 @@
+import React, { useEffect } from 'react';
 import { Address, ConnectButton, Connector, NFTCard, useAccount } from '@ant-design/web3';
-import { Goerli, MetaMask, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
+import { MetaMask, Sepolia, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
 import { Button, message } from 'antd';
 import { parseEther } from 'viem';
-import { createConfig, http, useReadContract, useWriteContract } from 'wagmi';
-import { goerli, mainnet } from 'wagmi/chains';
+import {
+  createConfig,
+  http,
+  useReadContract,
+  useWaitForTransactionReceipt,
+  useWriteContract,
+} from 'wagmi';
+import { mainnet, sepolia } from 'wagmi/chains';
 import { injected } from 'wagmi/connectors';
 
 const config = createConfig({
-  chains: [mainnet, goerli],
+  chains: [mainnet, sepolia],
   transports: {
     [mainnet.id]: http(),
-    [goerli.id]: http(),
+    [sepolia.id]: http(),
   },
   connectors: [
     injected({
@@ -19,6 +26,9 @@ const config = createConfig({
   ],
 });
 
+// Sepolia test contract 0x81BaD6F768947D7741c83d9EB9007e1569115703
+const CONTRACT_ADDRESS = '0x81BaD6F768947D7741c83d9EB9007e1569115703';
+
 const CallTest = () => {
   const { account } = useAccount();
   const result = useReadContract({
@@ -31,17 +41,27 @@ const CallTest = () => {
         outputs: [{ type: 'uint256' }],
       },
     ],
-    // Goerli test contract 0x418325c3979b7f8a17678ec2463a74355bdbe72c
-    address: '0xEcd0D12E21805803f70de03B72B1C162dB0898d9',
+    address: CONTRACT_ADDRESS,
     functionName: 'balanceOf',
     args: [account?.address as `0x${string}`],
   });
-  const { writeContract } = useWriteContract();
+  const { writeContract, data: hash } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
+    hash,
+  });
+
+  useEffect(() => {
+    if (isConfirmed) {
+      message.success('Mint Success');
+      result.refetch();
+    }
+  }, [isConfirmed]);
 
   return (
     <div>
       {result.data?.toString()}
       <Button
+        loading={isConfirming}
         onClick={() => {
           writeContract(
             {
@@ -60,15 +80,12 @@ const CallTest = () => {
                   outputs: [],
                 },
               ],
-              address: '0xEcd0D12E21805803f70de03B72B1C162dB0898d9',
+              address: CONTRACT_ADDRESS,
               functionName: 'mint',
               args: [BigInt(1)],
               value: parseEther('0.01'),
             },
             {
-              onSuccess: () => {
-                message.success('Mint Success');
-              },
               onError: (err) => {
                 message.error(err.message);
               },
@@ -84,7 +101,7 @@ const CallTest = () => {
 
 export default function Web3() {
   return (
-    <WagmiWeb3ConfigProvider config={config} chains={[Goerli]} wallets={[MetaMask()]}>
+    <WagmiWeb3ConfigProvider config={config} chains={[Sepolia]} wallets={[MetaMask()]}>
       <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
       <NFTCard address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" tokenId={641} />
       <Connector>