給初學者的 Hello World 智慧型合約 - 全端

1{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" }
複製

1mkdir hello-world
2cd hello-world

1套件名稱：(hello-world)
2版本：(1.0.0)
3描述：hello world 智慧型合約
4進入點：(index.js)
5測試指令：
6git 儲存庫：
7關鍵字：
8作者：
9授權：(ISC)
10
11即將寫入 /Users/.../.../.../hello-world/package.json：
12
13{
14   "name": "hello-world",
15   "version": "1.0.0",
16   "description": "hello world 智慧型合約",
17   "main": "index.js",
18   "scripts": {
19      "test": "echo \"Error: no test specified\" && exit 1"
20   },
21   "author": "",
22   "license": "ISC"
23}
顯示全部

1npm install --save-dev hardhat

1npx hardhat

1888    888                      888 888               888
2888    888                      888 888               888
3888    888                      888 888               888
48888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
5888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
6888    888 .d888888 888    888  888 888  888 .d888888 888
7888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
8888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888
9
10👷 歡迎使用 Hardhat v2.0.11 👷‍
11
12您想做什麼？…
13建立範例專案
14❯ 建立一個空的 hardhat.config.js
15退出
顯示全部

1mkdir contracts
2mkdir scripts

1// 指定 Solidity 的版本，使用語意化版本控制。
2// 了解更多：https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
3pragma solidity >=0.7.3;
4
5// 定義一個名為「HelloWorld」的合約。
6// 合約是函式和資料 (其狀態) 的集合。部署後，合約會存放在以太坊區塊鏈的特定地址上。了解更多：https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
7contract HelloWorld {
8
9   // 呼叫更新函式時發出
10   // 智慧型合約事件是您合約的一種方式，可將區塊鏈上發生的事情傳達給您的應用程式前端，前端可以「監聽」某些事件並在事件發生時採取行動。
11   event UpdatedMessages(string oldStr, string newStr);
12
13   // 宣告一個「string」類型的狀態變數「message」。
14   // 狀態變數是其值永久儲存在合約儲存空間中的變數。關鍵字「public」可讓變數從合約外部存取，並建立一個其他合約或用戶端可呼叫以存取該值的函式。
15   string public message;
16
17   // 與許多以類別為基礎的物件導向語言相似，建構函式是一個特殊函式，只在合約建立時執行。
18   // 建構函式用於初始化合約的資料。了解更多：https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
19   constructor(string memory initMessage) {
20
21      // 接受一個字串引數「initMessage」，並將該值設定到合約的「message」儲存變數中)。
22      message = initMessage;
23   }
24
25   // 一個公共函式，接受一個字串引數並更新「message」儲存變數。
26   function update(string memory newMessage) public {
27      string memory oldMsg = message;
28      message = newMessage;
29      emit UpdatedMessages(oldMsg, newMessage);
30   }
31}
顯示全部

1npm install dotenv --save

1API_URL = "https://eth-goerli.alchemyapi.io/v2/your-api-key"
2PRIVATE_KEY = "your-metamask-private-key"

npm install --save-dev @nomiclabs/hardhat-ethers "ethers@^5.0.0"

1/**
2 * @type import('hardhat/config').HardhatUserConfig
3 */
4
5require("dotenv").config()
6require("@nomiclabs/hardhat-ethers")
7
8const { API_URL, PRIVATE_KEY } = process.env
9
10module.exports = {
11  solidity: "0.7.3",
12  defaultNetwork: "goerli",
13  networks: {
14    hardhat: {},
15    goerli: {
16      url: API_URL,
17      accounts: [`0x${PRIVATE_KEY}`],
18    },
19  },
20}
顯示全部

npx hardhat compile

1async function main() {
2  const HelloWorld = await ethers.getContractFactory("HelloWorld")
3
4  // 開始部署，回傳一個解析為合約物件的 promise
5  const hello_world = await HelloWorld.deploy("Hello World!")
6  console.log("合約已部署至地址：", hello_world.address)
7}
8
9main()
10  .then(() => process.exit(0))
11  .catch((error) => {
12    console.error(error)
13    process.exit(1)
14  })
顯示全部

1const HelloWorld = await ethers.getContractFactory("HelloWorld")

1const hello_world = await HelloWorld.deploy()

npx hardhat run scripts/deploy.js --network goerli

合約已部署至地址：0x6cd7d44516a20882cEa2DE9f205bF401c0d23570

1// interact.js
2
3const API_KEY = process.env.API_KEY
4const PRIVATE_KEY = process.env.PRIVATE_KEY
5const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS

# .env

API_URL = "https://eth-goerli.alchemyapi.io/v2/<your-api-key>"
API_KEY = "<your-api-key>"
PRIVATE_KEY = "<your-metamask-private-key>"
CONTRACT_ADDRESS = "0x<your contract address>"

1// interact.js
2const contract = require("../artifacts/contracts/HelloWorld.sol/HelloWorld.json")

1console.log(JSON.stringify(contract.abi))

npx hardhat run scripts/interact.js

1// interact.js
2
3// Provider
4const alchemyProvider = new ethers.providers.AlchemyProvider(
5  (network = "goerli"),
6  API_KEY
7)
8
9// Signer
10const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider)
11
12// Contract
13const helloWorldContract = new ethers.Contract(
14  CONTRACT_ADDRESS,
15  contract.abi,
16  signer
17)
顯示全部

1// interact.js
2
3// ...
4
5async function main() {
6  const message = await helloWorldContract.message()
7  console.log("訊息是：" + message)
8}
9main()
顯示全部

1訊息是：Hello world!

1// interact.js
2
3// ...
4
5async function main() {
6  const message = await helloWorldContract.message()
7  console.log("訊息是：" + message)
8
9  console.log("正在更新訊息...")
10  const tx = await helloWorldContract.update("這是新訊息。")
11  await tx.wait()
12}
13main()
顯示全部

1// interact.js
2
3const API_KEY = process.env.API_KEY
4const PRIVATE_KEY = process.env.PRIVATE_KEY
5const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS
6
7const contract = require("../artifacts/contracts/HelloWorld.sol/HelloWorld.json")
8
9// 提供者 - Alchemy
10const alchemyProvider = new ethers.providers.AlchemyProvider(
11  (network = "goerli"),
12  API_KEY
13)
14
15// 簽署者 - 您
16const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider)
17
18// 合約執行個體
19const helloWorldContract = new ethers.Contract(
20  CONTRACT_ADDRESS,
21  contract.abi,
22  signer
23)
24
25async function main() {
26  const message = await helloWorldContract.message()
27  console.log("訊息是：" + message)
28
29  console.log("正在更新訊息...")
30  const tx = await helloWorldContract.update("這是新訊息")
31  await tx.wait()
32
33  const newMessage = await helloWorldContract.message()
34  console.log("新訊息是：" + newMessage)
35}
36
37main()
顯示全部

1訊息是：Hello World!
2正在更新訊息...
3新訊息是：這是新訊息。

1API_URL = "https://eth-goerli.alchemyapi.io/v2/your-api-key"
2PUBLIC_KEY = "your-public-account-address"
3PRIVATE_KEY = "your-private-account-address"
4CONTRACT_ADDRESS = "your-contract-address"
5ETHERSCAN_API_KEY = "your-etherscan-key"

1npm install --save-dev @nomiclabs/hardhat-etherscan

1// hardhat.config.js
2
3require("dotenv").config()
4require("@nomiclabs/hardhat-ethers")
5require("@nomiclabs/hardhat-etherscan")
6
7const { API_URL, PRIVATE_KEY, ETHERSCAN_API_KEY } = process.env
8
9module.exports = {
10  solidity: "0.7.3",
11  defaultNetwork: "goerli",
12  networks: {
13    hardhat: {},
14    goerli: {
15      url: API_URL,
16      accounts: [`0x${PRIVATE_KEY}`],
17    },
18  },
19  etherscan: {
20    // Your API key for Etherscan
21    // 在 https://etherscan.io/ 取得一個
22    apiKey: ETHERSCAN_API_KEY,
23  },
24}
顯示全部

1npx hardhat verify --network goerli DEPLOYED_CONTRACT_ADDRESS 'Hello World!'

1Successfully submitted source code for contract
2contracts/HelloWorld.sol:HelloWorld at 0xdeployed-contract-address
3for verification on Etherscan. Waiting for verification result...
4
5
6Successfully verified contract HelloWorld on Etherscan.
7https://goerli.etherscan.io/address/<contract-address>#contracts

cd starter-files
npm install

npm start

1// HelloWorld.js
2
3import React from "react"
4import { useEffect, useState } from "react"
5import {
6  helloWorldContract,
7  connectWallet,
8  updateMessage,
9  loadCurrentMessage,
10  getCurrentWalletConnected,
11} from "./util/interact.js"
12
13import alchemylogo from "./alchemylogo.svg"
顯示全部

1// HelloWorld.js
2
3//狀態變數
4const [walletAddress, setWallet] = useState("")
5const [status, setStatus] = useState("")
6const [message, setMessage] = useState("未連線至網路。")
7const [newMessage, setNewMessage] = useState("")

1// HelloWorld.js
2
3//僅呼叫一次
4useEffect(async () => {
5  //TODO: 實作
6}, [])
7
8function addSmartContractListener() {
9  //TODO: 實作
10}
11
12function addWalletListener() {
13  //TODO: 實作
14}
15
16const connectWalletPressed = async () => {
17  //TODO: 實作
18}
19
20const onUpdatePressed = async () => {
21  //TODO: 實作
22}
顯示全部

1// HelloWorld.js
2
3//我們元件的 UI
4return (
5  <div id="container">
6    <img id="logo" src={alchemylogo}></img>
7    <button id="walletButton" onClick={connectWalletPressed}>
8      {walletAddress.length > 0 ? (
9        "已連線：" +
10        String(walletAddress).substring(0, 6) +
11        "..." +
12        String(walletAddress).substring(38)
13      ) : (
14        <span>連線錢包</span>
15      )}
16    </button>
17
18    <h2 style={{ paddingTop: "50px" }}>目前訊息：</h2>
19    <p>{message}</p>
20
21    <h2 style={{ paddingTop: "18px" }}>新訊息：</h2>
22
23    <div>
24      <input
25        type="text"
26        placeholder="更新您智慧型合約中的訊息。"
27        onChange={(e) => setNewMessage(e.target.value)}
28        value={newMessage}
29      />
30      <p id="status">{status}</p>
31
32      <button id="publishButton" onClick={onUpdatePressed}>
33        更新
34      </button>
35</div>
36 
37</div>
38)
顯示全部

1// interact.js
2
3//export const helloWorldContract;
4
5export const loadCurrentMessage = async () => {}
6
7export const connectWallet = async () => {}
8
9const getCurrentWalletConnected = async () => {}
10
11export const updateMessage = async (message) => {}
顯示全部

1npm install @alch/alchemy-web3

1npm install dotenv --save

1REACT_APP_ALCHEMY_KEY = wss://eth-goerli.ws.alchemyapi.io/v2/<key>

1// interact.js
2
3require("dotenv").config()
4const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
5const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
6const web3 = createAlchemyWeb3(alchemyKey)
7
8//export const helloWorldContract;

1// interact.js
2
3const contractABI = require("../contract-abi.json")
4const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"

1// interact.js
2export const helloWorldContract = new web3.eth.Contract(
3  contractABI,
4  contractAddress
5)

1// interact.js
2
3require("dotenv").config()
4const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
5const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
6const web3 = createAlchemyWeb3(alchemyKey)
7
8const contractABI = require("../contract-abi.json")
9const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"
10
11export const helloWorldContract = new web3.eth.Contract(
12  contractABI,
13  contractAddress
14)
顯示全部

1// interact.js
2
3export const loadCurrentMessage = async () => {
4  const message = await helloWorldContract.methods.message().call()
5  return message
6}

1// HelloWorld.js
2
3//僅呼叫一次
4useEffect(async () => {
5  const message = await loadCurrentMessage()
6  setMessage(message)
7}, [])

1// HelloWorld.sol
2
3// 指定 Solidity 的版本，使用語意化版本控制。
4// 了解更多：https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
5pragma solidity ^0.7.3;
6
7// 定義一個名為「HelloWorld」的合約。
8// 合約是函式和資料 (其狀態) 的集合。部署後，合約會存放在以太坊區塊鏈的特定地址上。了解更多：https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
9contract HelloWorld {
10
11   // 呼叫更新函式時發出
12   // 智慧型合約事件是您合約的一種方式，可將區塊鏈上發生的事情傳達給您的應用程式前端，前端可以「監聽」某些事件並在事件發生時採取行動。
13   event UpdatedMessages(string oldStr, string newStr);
14
15   // 宣告一個「string」類型的狀態變數「message」。
16   // 狀態變數是其值永久儲存在合約儲存空間中的變數。關鍵字「public」可讓變數從合約外部存取，並建立一個其他合約或用戶端可呼叫以存取該值的函式。
17   string public message;
18
19   // 與許多以類別為基礎的物件導向語言相似，建構函式是一個特殊函式，只在合約建立時執行。
20   // 建構函式用於初始化合約的資料。了解更多：https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
21   constructor(string memory initMessage) {
22
23      // 接受一個字串引數「initMessage」，並將該值設定到合約的「message」儲存變數中)。
24      message = initMessage;
25   }
26
27   // 一個公共函式，接受一個字串引數並更新「message」儲存變數。
28   function update(string memory newMessage) public {
29      string memory oldMsg = message;
30      message = newMessage;
31      emit UpdatedMessages(oldMsg, newMessage);
32   }
33}
顯示全部

1// HelloWorld.js
2
3function addSmartContractListener() {
4  helloWorldContract.events.UpdatedMessages({}, (error, data) => {
5    if (error) {
6      setStatus("😥 " + error.message)
7    } else {
8      setMessage(data.returnValues[1])
9      setNewMessage("")
10      setStatus("🎉 您的訊息已更新！")
11    }
12  })
13}
顯示全部

1// HelloWorld.js
2
3useEffect(async () => {
4  const message = await loadCurrentMessage()
5  setMessage(message)
6  addSmartContractListener()
7}, [])

1{"jsonrpc": "2.0", "id": 0, "result": "0xde0b6b3a7640000"}

1// interact.js
2
3export const connectWallet = async () => {
4  if (window.ethereum) {
5    try {
6      const addressArray = await window.ethereum.request({
7        method: "eth_requestAccounts",
8      })
9      const obj = {
10        status: "👆🏽 在上方的文字欄位中寫一則訊息。",
11        address: addressArray[0],
12      }
13      return obj
14    } catch (err) {
15      return {
16        address: "",
17        status: "😥 " + err.message,
18      }
19    }
20  } else {
21    return {
22      address: "",
23      status: (
24        <span>
25          <p>
26            {" "}
27            🦊 <a target="_blank" href={`https://metamask.io/download`}>
28              您必須在瀏覽器中安裝 MetaMask，這是一款虛擬以太坊錢包。
29            </a>
30          </p>
31        </span>
32      ),
33    }
34  }
35}
顯示全部

1// HelloWorld.js
2
3const connectWalletPressed = async () => {
4  const walletResponse = await connectWallet()
5  setStatus(walletResponse.status)
6  setWallet(walletResponse.address)
7}

1// interact.js
2
3export const getCurrentWalletConnected = async () => {
4  if (window.ethereum) {
5    try {
6      const addressArray = await window.ethereum.request({
7        method: "eth_accounts",
8      })
9      if (addressArray.length > 0) {
10        return {
11          address: addressArray[0],
12          status: "👆🏽 在上方的文字欄位中寫一則訊息。",
13        }
14      } else {
15        return {
16          address: "",
17          status: "🦊 使用右上角按鈕連線至 MetaMask。",
18        }
19      }
20    } catch (err) {
21      return {
22        address: "",
23        status: "😥 " + err.message,
24      }
25    }
26  } else {
27    return {
28      address: "",
29      status: (
30        <span>
31          <p>
32            {" "}
33            🦊 <a target="_blank" href={`https://metamask.io/download`}>
34              您必須在瀏覽器中安裝 MetaMask，這是一款虛擬以太坊錢包。
35            </a>
36          </p>
37        </span>
38      ),
39    }
40  }
41}
顯示全部

1// HelloWorld.js
2
3useEffect(async () => {
4  const message = await loadCurrentMessage()
5  setMessage(message)
6  addSmartContractListener()
7
8  const { address, status } = await getCurrentWalletConnected()
9  setWallet(address)
10  setStatus(status)
11}, [])
顯示全部

1// HelloWorld.js
2
3function addWalletListener() {
4  if (window.ethereum) {
5    window.ethereum.on("accountsChanged", (accounts) => {
6      if (accounts.length > 0) {
7        setWallet(accounts[0])
8        setStatus("👆🏽 在上方的文字欄位中寫一則訊息。")
9      } else {
10        setWallet("")
11        setStatus("🦊 使用右上角按鈕連線至 MetaMask。")
12      }
13    })
14  } else {
15    setStatus(
16      <p>
17        {" "}
18        🦊 <a target="_blank" href={`https://metamask.io/download`}>
19          您必須在瀏覽器中安裝 MetaMask，這是一款虛擬以太坊錢包。
20        </a>
21      </p>
22    )
23  }
24}
顯示全部

1// HelloWorld.js
2
3useEffect(async () => {
4  const message = await loadCurrentMessage()
5  setMessage(message)
6  addSmartContractListener()
7
8  const { address, status } = await getCurrentWalletConnected()
9  setWallet(address)
10  setStatus(status)
11
12  addWalletListener()
13}, [])
顯示全部

1// interact.js
2
3export const updateMessage = async (address, message) => {
4  if (!window.ethereum || address === null) {
5    return {
6      status:
7        "💡 連線您的 MetaMask 錢包以更新區塊鏈上的訊息。",
8    }
9  }
10
11  if (message.trim() === "") {
12    return {
13      status: "❌ 您的訊息不能是空字串。",
14    }
15  }
16}
顯示全部

1// interact.js
2
3//設定交易參數
4const transactionParameters = {
5  to: contractAddress, // 合約發布期間除外為必要
6  from: address, // 必須與使用者目前的地址相符
7  data: helloWorldContract.methods.update(message).encodeABI(),
8}
9
10//簽署交易
11try {
12  const txHash = await window.ethereum.request({
13    method: "eth_sendTransaction",
14    params: [transactionParameters],
15  })
16  return {
17    status: (
18      <span>
19        ✅{" "}
20        <a target="_blank" href={`https://goerli.etherscan.io/tx/${txHash}`}>
21          在 Etherscan 上查看您交易的狀態！
22        </a>
23        <br />
24        ℹ️ 交易一旦經網路驗證，訊息將自動更新。
25      </span>
26    ),
27  }
28} catch (error) {
29  return {
30    status: "😥 " + error.message,
31  }
32}
顯示全部

1// interact.js
2
3export const updateMessage = async (address, message) => {
4  //輸入錯誤處理
5  if (!window.ethereum || address === null) {
6    return {
7      status:
8        "💡 連線您的 MetaMask 錢包以更新區塊鏈上的訊息。",
9    }
10  }
11
12  if (message.trim() === "") {
13    return {
14      status: "❌ 您的訊息不能是空字串。",
15    }
16  }
17
18  //設定交易參數
19  const transactionParameters = {
20    to: contractAddress, // 合約發布期間除外為必要
21    from: address, // 必須與使用者目前的地址相符
22    data: helloWorldContract.methods.update(message).encodeABI(),
23  }
24
25  //簽署交易
26  try {
27    const txHash = await window.ethereum.request({
28      method: "eth_sendTransaction",
29      params: [transactionParameters],
30    })
31    return {
32      status: (
33        <span>
34          ✅{" "}
35          <a target="_blank" href={`https://goerli.etherscan.io/tx/${txHash}`}>
36            在 Etherscan 上查看您交易的狀態！
37          </a>
38          <br />
39          ℹ️ 交易一旦經網路驗證，訊息將自動更新。
40        </span>
41      ),
42    }
43  } catch (error) {
44    return {
45      status: "😥 " + error.message,
46    }
47  }
48}
顯示全部

1// HelloWorld.js
2
3const onUpdatePressed = async () => {
4  const { status } = await updateMessage(walletAddress, newMessage)
5  setStatus(status)
6}