Code for course Fundamental Steps of Building a Dapp #527

yutingzhao1991 · 2024-01-23T03:43:25Z

yutingzhao1991
Jan 23, 2024
Maintainer

This is the key code that will be used in the course Fundamental Steps of Building a Dapp.

yutingzhao1991 · 2024-01-23T03:45:07Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step1: Init frontend project with Next.js:

npx [email protected]

0 replies

yutingzhao1991 · 2024-01-23T03:47:52Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step2: Init app/web3/page.tsx page code:

export default () => {
  return (
    <div>Hello Web3!</div>
  );
};

0 replies

yutingzhao1991 · 2024-01-23T03:48:53Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step3: Install dependencies:

npm install @ant-design/web3 wagmi @ant-design/web3-wagmi --save

0 replies

yutingzhao1991 · 2024-01-23T03:50:07Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step4: Use @ant-design/web3:

import { Address } from "@ant-design/web3";

export default () => {
  return (
    <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
  );
};

0 replies

yutingzhao1991 · 2024-01-23T03:50:49Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step5: Add "use client"; for fix error:

Code diff:

+ "use client";

import { Address } from "@ant-design/web3";

export default () => {
  return (
    <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
  );
};

Full code:

"use client";

import { Address } from "@ant-design/web3";

export default () => {
  return (
    <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
  );
};

0 replies

yutingzhao1991 · 2024-01-23T04:35:26Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step6: Config wagmi:

Add imports:

"use client";

+ 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 (
    <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
  );
};

Add config:

"use client";

import { createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";
import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
import { Address } from "@ant-design/web3";

+ const config = createConfig({
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ });
export default () => {
  return (
+     <WagmiWeb3ConfigProvider config={config}>
        <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+     </WagmiWeb3ConfigProvider>
  );
};

Full code:

"use client";

import { createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";
import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
import { Address } from "@ant-design/web3";

const config = createConfig({
   chains: [mainnet],
   transports: {
     [mainnet.id]: http(),
   },
});
export default () => {
  return (
     <WagmiWeb3ConfigProvider config={config}>
        <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
     </WagmiWeb3ConfigProvider>
  );
};

0 replies

yutingzhao1991 · 2024-01-23T05:49:43Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step7: Config ZAN Node Service JSON RPC url:

Code diff:

"use client";
import { createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";
import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
import { Address } from "@ant-design/web3";

 const config = createConfig({
   chains: [mainnet],
   transports: {
-     [mainnet.id]: http(),
+     [mainnet.id]: http("https://api.zan.top/node/v1/eth/mainnet/{YOUR_ZAN_API_KEY}"),
   },
 });
export default () => {
  return (
     <WagmiWeb3ConfigProvider config={config}>
        <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
     </WagmiWeb3ConfigProvider>
  );
};

YOUR_ZAN_API_KEY needs to be replaced with the actual key.

Full code:

"use client";
import { createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";
import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
import { Address } from "@ant-design/web3";

const config = createConfig({
   chains: [mainnet],
   transports: {
     [mainnet.id]: http(),
   },
});

export default () => {
  return (
     <WagmiWeb3ConfigProvider config={config}>
        <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
     </WagmiWeb3ConfigProvider>
  );
};

0 replies

yutingzhao1991 · 2024-01-23T05:54:24Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step8: Add NFTCard:

"use client";
import { createConfig, http } from 'wagmi'; 
import { mainnet } from "wagmi/chains";
import { 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 () => {
  return (
     <WagmiWeb3ConfigProvider config={config}>
       <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+      <NFTCard address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={8540} />
     </WagmiWeb3ConfigProvider>
  );
};

0 replies

yutingzhao1991 · 2024-01-23T05:57:53Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step9: Support connect wallet:

Code diff:

"use client";
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";
const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
});

export default () => {
  return (
-   <WagmiWeb3ConfigProvider config={config}>
+    <WagmiWeb3ConfigProvider config={config} eip6963 wallets={[MetaMask()]}>
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
      <NFTCard
        address="0x79fcdef22feed20eddacbb2587640e45491b757f"
        tokenId={8540}
      />
+       <Connector>
+         <ConnectButton />
+       </Connector>
    </WagmiWeb3ConfigProvider>
  );
};

Full Code:

"use client";
import { createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";
import { WagmiWeb3ConfigProvider, MetaMask } from "@ant-design/web3-wagmi";
import { Address, NFTCard, Connector, ConnectButton } from "@ant-design/web3";

const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
});

export default () => {
  return (
    <WagmiWeb3ConfigProvider config={config} eip6963 wallets={[MetaMask()]}>
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
      <NFTCard
        address="0x79fcdef22feed20eddacbb2587640e45491b757f"
        tokenId={8540}
      />
      <Connector>
        <ConnectButton />
      </Connector>
    </WagmiWeb3ConfigProvider>
  );
};

0 replies

yutingzhao1991 · 2024-01-23T06:01:24Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step 10: Add call contract code:

Code diff:

"use client";
- import { createConfig, http } from "wagmi";
+ import { createConfig, http, useWriteContract } from "wagmi";
import { mainnet } from "wagmi/chains";
import { WagmiWeb3ConfigProvider, MetaMask } from "@ant-design/web3-wagmi";
import { Address, NFTCard, Connector, ConnectButton } from "@ant-design/web3";
import { injected } from "wagmi/connectors";
+ import { Button, message } from "antd";
+ import { parseEther } from "viem";

const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  connectors: [
    injected({
      target: "metaMask",
    }),
  ],
});

+ const CallTest = () => {
+  const { writeContract } = useWriteContract();
+  return (
+      <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>
+  );
+ }

export default () => {
  return (
    <WagmiWeb3ConfigProvider config={config} wallets={[MetaMask()]}>
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
      <NFTCard
        address="0x79fcdef22feed20eddacbb2587640e45491b757f"
        tokenId={8540}
      />
      <Connector>
        <ConnectButton />
      </Connector>
+    <CallTest />
    </WagmiWeb3ConfigProvider>
  );
};

Full code:

"use client";
import { createConfig, http, useWriteContract } from "wagmi";
import { mainnet } from "wagmi/chains";
import { WagmiWeb3ConfigProvider, MetaMask } from "@ant-design/web3-wagmi";
import { Address, NFTCard, Connector, ConnectButton } from "@ant-design/web3";
import { Button, message } from "antd";
import { parseEther } from "viem";

const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
});

const CallTest = () => {
  const { writeContract } = useWriteContract();
  return (
    <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>
  );
};
export default () => {
  return (
    <WagmiWeb3ConfigProvider config={config} wallets={[MetaMask()]}>
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
      <NFTCard
        address="0x79fcdef22feed20eddacbb2587640e45491b757f"
        tokenId={8540}
      />
      <Connector>
        <ConnectButton />
      </Connector>
      <CallTest />
    </WagmiWeb3ConfigProvider>
  );
};

0 replies

yutingzhao1991 · 2024-01-23T06:06:21Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step 11: Add test contract with ChainIDE:

// contracts/GameItem.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract GameItem is ERC721URIStorage, Ownable {
    uint256 private _nextTokenId;

    constructor() 
        ERC721("GameItem", "ITM") 
        Ownable(msg.sender) 
    {}

+   function mint(uint256 quantity) public payable {
+       require(quantity == 1, "quantity must be 1");
+       require(msg.value == 0.01 ether, "must pay 0.01 ether");
+       uint256 tokenId = _nextTokenId++;
+       _mint(msg.sender, tokenId);
+   }

    function awardItem(address player, string memory tokenURI)
        public
        onlyOwner
        returns (uint256)
    {
        uint256 tokenId = _nextTokenId++;
        _mint(player, tokenId);
        _setTokenURI(tokenId, tokenURI);

        return tokenId;
    }
}

Full code:

// contracts/GameItem.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract GameItem is ERC721URIStorage, Ownable {
    uint256 private _nextTokenId;

    constructor() 
        ERC721("GameItem", "ITM") 
        Ownable(msg.sender) 
    {}

    function mint(uint256 quantity) public payable {
        require(quantity == 1, "quantity must be 1");
        require(msg.value == 0.01 ether, "must pay 0.01 ether");
        uint256 tokenId = _nextTokenId++;
        _mint(msg.sender, tokenId);
    }

    function awardItem(address player, string memory tokenURI)
        public
        onlyOwner
        returns (uint256)
    {
        uint256 tokenId = _nextTokenId++;
        _mint(player, tokenId);
        _setTokenURI(tokenId, tokenURI);

        return tokenId;
    }
}

0 replies

yutingzhao1991 · 2024-01-23T06:13:45Z

yutingzhao1991
Jan 23, 2024
Maintainer Author

Step 12: Using deployed test smart contract in Dapp:

Code diff:

import { createConfig, http, useWriteContract } from "wagmi";
- import { mainnet } from "wagmi/chains";
+ import { mainnet, goerli } from "wagmi/chains";
import {
  WagmiWeb3ConfigProvider,
  MetaMask,
+ Goerli,
} from "@ant-design/web3-wagmi";
import { Address, NFTCard, Connector, ConnectButton } from "@ant-design/web3";
import { injected } from "wagmi/connectors";
import { Button, message } from "antd";
import { parseEther } from "viem";

const config = createConfig({
-  chains: [mainnet],
+  chains: [mainnet, goerli],
  transports: {
     [mainnet.id]: http(),
+    [goerli.id]: http(),
  },
  connectors: [
    injected({
      target: "metaMask",
    }),
  ],
});

const CallTest = () => {
  const { writeContract } = useWriteContract();

  return (
      <Button
        onClick={() => {
          writeContract(
            {
              abi: [
                {
                  type: "function",
                  name: "mint",
                  stateMutability: "payable",
                  inputs: [
                    {
                      internalType: "uint256",
                      name: "quantity",
                      type: "uint256",
                    },
                  ],
                  outputs: [],
                },
              ],
-             address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
+             address: "0x20436469ddc92b4e8333ea91e496debbb67bc30b", // use your own contract address
              functionName: "mint",
              args: [1],
              value: parseEther("0.01"),
            },
            {
              onSuccess: () => {
                message.success("Mint Success");
              },
              onError: (err) => {
                message.error(err.message);
              },
            }
          );
        }}
      >
        mint
      </Button>
  );
};

export default () => {
  return (
    <WagmiWeb3ConfigProvider
      config={config}
+     chains={[Goerli]}
      wallets={[MetaMask()]}
    >
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
      <NFTCard
        address="0x79fcdef22feed20eddacbb2587640e45491b757f"
        tokenId={8540}
      />
      <Connector>
        <ConnectButton />
      </Connector>
      <CallTest />
    </WagmiWeb3ConfigProvider>
  );
};

Full code:

import { createConfig, http, useWriteContract } from "wagmi";
import { mainnet, goerli } from "wagmi/chains";
import {
  WagmiWeb3ConfigProvider,
  MetaMask,
  Goerli,
} from "@ant-design/web3-wagmi";
import { Address, NFTCard, Connector, ConnectButton } from "@ant-design/web3";
import { injected } from "wagmi/connectors";
import { Button, message } from "antd";
import { parseEther } from "viem";

const config = createConfig({
  chains: [mainnet, goerli],
  transports: {
    [mainnet.id]: http(),
    [goerli.id]: http(),
  },
  connectors: [
    injected({
      target: "metaMask",
    }),
  ],
});

const CallTest = () => {
  const { writeContract } = useWriteContract();

  return (
    <Button
      onClick={() => {
        writeContract(
          {
            abi: [
              {
                type: "function",
                name: "mint",
                stateMutability: "payable",
                inputs: [
                  {
                    internalType: "uint256",
                    name: "quantity",
                    type: "uint256",
                  },
                ],
                outputs: [],
              },
            ],
            address: "0x20436469ddc92b4e8333ea91e496debbb67bc30b", // use your own contract address
            functionName: "mint",
            args: [1],
            value: parseEther("0.01"),
          },
          {
            onSuccess: () => {
              message.success("Mint Success");
            },
            onError: (err) => {
              message.error(err.message);
            },
          }
        );
      }}
    >
      mint
    </Button>
  );
};

export default () => {
  return (
    <WagmiWeb3ConfigProvider
      config={config}
      chains={[Goerli]}
      wallets={[MetaMask()]}
    >
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
      <NFTCard
        address="0x79fcdef22feed20eddacbb2587640e45491b757f"
        tokenId={8540}
      />
      <Connector>
        <ConnectButton />
      </Connector>
      <CallTest />
    </WagmiWeb3ConfigProvider>
  );
};

0 replies

yutingzhao1991 · 2024-01-25T03:24:05Z

yutingzhao1991
Jan 25, 2024
Maintainer Author

Complete project code: https://github.com/yutingzhao1991/fundamental-dapp-demo

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Code for course Fundamental Steps of Building a Dapp #527

{{title}}

Replies: 13 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Code for course Fundamental Steps of Building a Dapp #527

yutingzhao1991 Jan 23, 2024 Maintainer

Replies: 13 comments

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 23, 2024 Maintainer Author

yutingzhao1991 Jan 25, 2024 Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 23, 2024
Maintainer Author

yutingzhao1991
Jan 25, 2024
Maintainer Author