demo

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+/node_modules

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Nomic Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

artifacts/contracts/Token.sol/Token.dbg.json

@@ -0,0 +1,4 @@
+{
+  "_format": "hh-sol-dbg-1",
+  "buildInfo": "../../build-info/6cf5fc7f8f3a5c23028a1838520c3187.json"
+}

artifacts/hardhat/console.sol/console.dbg.json

@@ -0,0 +1,4 @@
+{
+  "_format": "hh-sol-dbg-1",
+  "buildInfo": "../../build-info/a94026f84ea9eac73eedff0349d4d183.json"
+}

artifacts/hardhat/console.sol/console.json

@@ -0,0 +1,10 @@
+{
+  "_format": "hh-sol-artifact-1",
+  "contractName": "console",
+  "sourceName": "hardhat/console.sol",
+  "abi": [],
+  "bytecode": "0x60566050600b82828239805160001a6073146043577f4e487b7100000000000000000000000000000000000000000000000000000000600052600060045260246000fd5b30600052607381538281f3fe73000000000000000000000000000000000000000030146080604052600080fdfea264697066735822122023ed7727ab4a3926687af4d4c2d34d1104da736a65dadf10a6bb9551cb1c779564736f6c63430008090033",
+  "deployedBytecode": "0x73000000000000000000000000000000000000000030146080604052600080fdfea264697066735822122023ed7727ab4a3926687af4d4c2d34d1104da736a65dadf10a6bb9551cb1c779564736f6c63430008090033",
+  "linkReferences": {},
+  "deployedLinkReferences": {}
+}

cache/solidity-files-cache.json

@@ -0,0 +1,75 @@
+{
+  "_format": "hh-sol-cache-2",
+  "files": {
+    "/Users/lihai/Remix/hardhat-boilerplate/contracts/Token.sol": {
+      "lastModificationDate": 1671500749681,
+      "contentHash": "8db5419daad0c435bdc5276ce4eb8b7e",
+      "sourceName": "contracts/Token.sol",
+      "solcConfig": {
+        "version": "0.8.9",
+        "settings": {
+          "optimizer": {
+            "enabled": false,
+            "runs": 200
+          },
+          "outputSelection": {
+            "*": {
+              "*": [
+                "abi",
+                "evm.bytecode",
+                "evm.deployedBytecode",
+                "evm.methodIdentifiers",
+                "metadata"
+              ],
+              "": [
+                "ast"
+              ]
+            }
+          }
+        }
+      },
+      "imports": [],
+      "versionPragmas": [
+        "^0.8.9"
+      ],
+      "artifacts": [
+        "Token"
+      ]
+    },
+    "/Users/lihai/Remix/hardhat-boilerplate/node_modules/hardhat/console.sol": {
+      "lastModificationDate": 1671092320072,
+      "contentHash": "4ff3cd2f6272c9a6516e9ee4f2b967d3",
+      "sourceName": "hardhat/console.sol",
+      "solcConfig": {
+        "version": "0.8.9",
+        "settings": {
+          "optimizer": {
+            "enabled": false,
+            "runs": 200
+          },
+          "outputSelection": {
+            "*": {
+              "*": [
+                "abi",
+                "evm.bytecode",
+                "evm.deployedBytecode",
+                "evm.methodIdentifiers",
+                "metadata"
+              ],
+              "": [
+                "ast"
+              ]
+            }
+          }
+        }
+      },
+      "imports": [],
+      "versionPragmas": [
+        ">= 0.4.22 <0.9.0"
+      ],
+      "artifacts": [
+        "console"
+      ]
+    }
+  }
+}

contracts/Token.sol

@@ -0,0 +1,99 @@
+
+pragma solidity ^0.8.9;
+
+contract Token {
+
+    // Public variable of type unsigned int to keep the number of counts
+    uint256 public count = 0;
+
+    // Function that increments our counter
+    function increment() public {
+        count += 1;
+    }
+
+    // Not necessary getter to get the count value
+    function getCount() public view returns (uint256) {
+        return count;
+    }
+
+}
+
+
+//SPDX-License-Identifier: UNLICENSED
+
+// Solidity files have to start with this pragma.
+// It will be used by the Solidity compiler to validate its version.
+// pragma solidity ^0.8.9;
+
+// // We import this library to be able to use console.log
+// import "hardhat/console.sol";
+
+
+// // This is the main building block for smart contracts.
+// contract Token {
+//     // Some string type variables to identify the token.
+//     string public name = "My Hardhat Token";
+//     string public symbol = "MHT";
+
+//     // The fixed amount of tokens stored in an unsigned integer type variable.
+//     uint256 public totalSupply = 1000000;
+
+//     // An address type variable is used to store ethereum accounts.
+//     address public owner;
+
+//     // A mapping is a key/value map. Here we store each account balance.
+//     mapping(address => uint256) balances;
+
+//     // The Transfer event helps off-chain aplications understand
+//     // what happens within your contract.
+//     event Transfer(address indexed _from, address indexed _to, uint256 _value);
+
+//     /**
+//      * Contract initialization.
+//      */
+//     constructor() {
+//         // The totalSupply is assigned to the transaction sender, which is the
+//         // account that is deploying the contract.
+//         balances[msg.sender] = totalSupply;
+//         owner = msg.sender;
+//     }
+
+//     /**
+//      * A function to transfer tokens.
+//      *
+//      * The `external` modifier makes a function *only* callable from outside
+//      * the contract.
+//      */
+//     function transfer(address to, uint256 amount) external {
+//         // Check if the transaction sender has enough tokens.
+//         // If `require`'s first argument evaluates to `false` then the
+//         // transaction will revert.
+//         require(balances[msg.sender] >= amount, "Not enough tokens");
+
+//         // We can print messages and values using console.log, a feature of
+//         // Hardhat Network:
+//         console.log(
+//             "Transferring from %s to %s %s tokens",
+//             msg.sender,
+//             to,
+//             amount
+//         );
+
+//         // Transfer the amount.
+//         balances[msg.sender] -= amount;
+//         balances[to] += amount;
+
+//         // Notify off-chain applications of the transfer.
+//         emit Transfer(msg.sender, to, amount);
+//     }
+
+//     /**
+//      * Read only function to retrieve the token balance of a given account.
+//      *
+//      * The `view` modifier indicates that it doesn't modify the contract's
+//      * state, which allows us to call it without executing a transaction.
+//      */
+//     function balanceOf(address account) external view returns (uint256) {
+//         return balances[account];
+//     }
+// }

frontend/.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+src/contracts
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/README.md

@@ -0,0 +1,38 @@
+# Sample React Dapp
+
+This directory has a sample Dapp to interact with your contracts, built using
+React.
+
+## Running the Dapp
+
+This project uses [`create-react-app`](https://create-react-app.dev/), so most
+configuration files are handled by it.
+
+To run it, you just need to execute `npm start` in a terminal, and open
+[http://localhost:3000](http://localhost:3000).
+
+To learn more about what `create-react-app` offers, you can read
+[its documentation](https://create-react-app.dev/docs/getting-started).
+
+## Architecture of the Dapp
+
+This Dapp consists of multiple React Components, which you can find in
+`src/components`.
+
+Most of them are presentational components, have no logic, and just render HTML.
+
+The core functionality is implemented in `src/components/Dapp.js`, which has
+examples of how to connect to the user's wallet, initialize your Ethereum
+connection and contracts, read from the contract's state, and send transactions.
+
+You can use the `Dapp` component as a starting point for your project. It has
+comments explaining each part of its code, and indicating what's specific to
+this project, and what can be reused.
+
+## Getting help and news
+
+If you need help with this project or with Hardhat in general, please read [this guide](https://hardhat.org/hardhat-runner/docs/guides/getting-help) to learn where and how to get it.
+
+[Follow us on Twitter](https://twitter.com/HardhatHQ) to get the latest news about Hardhat, and don't forget to star [our GitHub repository](https://github.com/NomicFoundation/hardhat)!
+
+**Happy _building_!**

frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "^4.4.1",
+    "ethers": "^5.4.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Hardhat React Dapp"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Hardhat + React App = Dapp</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Hardhat React Dapp",
+  "name": "Hardhat Create React Dapp Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo310.png",
+      "type": "image/png",
+      "sizes": "310x310"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/src/components/ConnectWallet.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+import { NetworkErrorMessage } from "./NetworkErrorMessage";
+
+export function ConnectWallet({ connectWallet, networkError, dismiss }) {
+  return (
+    <div className="container">
+      <div className="row justify-content-md-center">
+        <div className="col-12 text-center">
+          {/* Metamask network should be set to Localhost:8545. */}
+          {networkError && (
+            <NetworkErrorMessage 
+              message={networkError} 
+              dismiss={dismiss} 
+            />
+          )}
+        </div>
+        <div className="col-6 p-4 text-center">
+          <p>Please connect to your wallet.</p>
+          <button
+            className="btn btn-warning"
+            type="button"
+            onClick={connectWallet}
+          >
+            Connect Wallet
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Dapp.js

@@ -0,0 +1,370 @@
+import React from "react";
+
+// We'll use ethers to interact with the Ethereum network and our contract
+import { ethers } from "ethers";
+
+// We import the contract's artifacts and address here, as we are going to be
+// using them with ethers
+import TokenArtifact from "../contracts/Token.json";
+import contractAddress from "../contracts/contract-address.json";
+
+// All the logic of this dapp is contained in the Dapp component.
+// These other components are just presentational ones: they don't have any
+// logic. They just render HTML.
+import { NoWalletDetected } from "./NoWalletDetected";
+import { ConnectWallet } from "./ConnectWallet";
+import { Loading } from "./Loading";
+import { Transfer } from "./Transfer";
+import { TransactionErrorMessage } from "./TransactionErrorMessage";
+import { WaitingForTransactionMessage } from "./WaitingForTransactionMessage";
+import { NoTokensMessage } from "./NoTokensMessage";
+
+// This is the Hardhat Network id that we set in our hardhat.config.js.
+// Here's a list of network ids https://docs.metamask.io/guide/ethereum-provider.html#properties
+// to use when deploying to other networks.
+const HARDHAT_NETWORK_ID = '5';
+
+// This is an error code that indicates that the user canceled a transaction
+const ERROR_CODE_TX_REJECTED_BY_USER = 4001;
+
+// This component is in charge of doing these things:
+//   1. It connects to the user's wallet
+//   2. Initializes ethers and the Token contract
+//   3. Polls the user balance to keep it updated.
+//   4. Transfers tokens by sending transactions
+//   5. Renders the whole application
+//
+// Note that (3) and (4) are specific of this sample application, but they show
+// you how to keep your Dapp and contract's state in sync,  and how to send a
+// transaction.
+export class Dapp extends React.Component {
+  constructor(props) {
+    super(props);
+
+    // We store multiple things in Dapp's state.
+    // You don't need to follow this pattern, but it's an useful example.
+    this.initialState = {
+      // The info of the token (i.e. It's Name and symbol)
+      tokenData: undefined,
+      // The user's address and balance
+      selectedAddress: undefined,
+      balance: undefined,
+      // The ID about transactions being sent, and any possible error with them
+      txBeingSent: undefined,
+      transactionError: undefined,
+      networkError: undefined,
+    };
+
+    this.state = this.initialState;
+  }
+
+  render () {
+    // Ethereum wallets inject the window.ethereum object. If it hasn't been
+    // injected, we instruct the user to install MetaMask.
+    if (window.ethereum === undefined) {
+      return <NoWalletDetected />;
+    }
+
+    // The next thing we need to do, is to ask the user to connect their wallet.
+    // When the wallet gets connected, we are going to save the users's address
+    // in the component's state. So, if it hasn't been saved yet, we have
+    // to show the ConnectWallet component.
+    //
+    // Note that we pass it a callback that is going to be called when the user
+    // clicks a button. This callback just calls the _connectWallet method.
+    if (!this.state.selectedAddress) {
+      return (
+        <ConnectWallet
+          connectWallet={() => this._connectWallet()}
+          networkError={this.state.networkError}
+          dismiss={() => this._dismissNetworkError()}
+        />
+      );
+    }
+
+    // If the token data or the user's balance hasn't loaded yet, we show
+    // a loading component.
+    if (!this.state.tokenData || !this.state.balance) {
+      return <Loading />;
+    }
+
+    // If everything is loaded, we render the application.
+    return (
+      <div className="container p-4">
+        <div className="row">
+          <div className="col-12">
+            <h1>
+              {this.state.tokenData.name} ({this.state.tokenData.symbol})
+            </h1>
+            <p>
+              Welcome <b>{this.state.selectedAddress}</b>, you have{" "}
+              <b>
+                {this.state.balance.toString()} {this.state.tokenData.symbol}
+              </b>
+              .
+            </p>
+          </div>
+        </div>
+
+        <hr />
+
+        <div className="row">
+          <div className="col-12">
+            {/* 
+              Sending a transaction isn't an immediate action. You have to wait
+              for it to be mined.
+              If we are waiting for one, we show a message here.
+            */}
+            {this.state.txBeingSent && (
+              <WaitingForTransactionMessage txHash={this.state.txBeingSent} />
+            )}
+
+            {/* 
+              Sending a transaction can fail in multiple ways. 
+              If that happened, we show a message here.
+            */}
+            {this.state.transactionError && (
+              <TransactionErrorMessage
+                message={this._getRpcErrorMessage(this.state.transactionError)}
+                dismiss={() => this._dismissTransactionError()}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col-12">
+            {/*
+              If the user has no tokens, we don't show the Transfer form
+            */}
+            {this.state.balance.eq(0) && (
+              <NoTokensMessage selectedAddress={this.state.selectedAddress} />
+            )}
+
+            {/*
+              This component displays a form that the user can use to send a 
+              transaction and transfer some tokens.
+              The component doesn't have logic, it just calls the transferTokens
+              callback.
+            */}
+            {this.state.balance.gt(0) && (
+              <Transfer
+                transferTokens={(to, amount) =>
+                  this._transferTokens(to, amount)
+                }
+                tokenSymbol={this.state.tokenData.symbol}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  componentWillUnmount () {
+    // We poll the user's balance, so we have to stop doing that when Dapp
+    // gets unmounted
+    this._stopPollingData();
+  }
+
+  async _connectWallet () {
+    console.log('_connectWallet');
+    // This method is run when the user clicks the Connect. It connects the
+    // dapp to the user's wallet, and initializes it.
+
+    // To connect to the user's wallet, we have to run this method.
+    // It returns a promise that will resolve to the user's address.
+    const [selectedAddress] = await window.ethereum.request({ method: 'eth_requestAccounts' });
+
+    // Once we have the address, we can initialize the application.
+
+    // First we check the network
+    if (!this._checkNetwork()) {
+      return;
+    }
+
+    this._initialize(selectedAddress);
+
+    // We reinitialize it whenever the user changes their account.
+    window.ethereum.on("accountsChanged", ([newAddress]) => {
+      this._stopPollingData();
+      // `accountsChanged` event can be triggered with an undefined newAddress.
+      // This happens when the user removes the Dapp from the "Connected
+      // list of sites allowed access to your addresses" (Metamask > Settings > Connections)
+      // To avoid errors, we reset the dapp state 
+      if (newAddress === undefined) {
+        return this._resetState();
+      }
+
+      this._initialize(newAddress);
+    });
+
+    // We reset the dapp state if the network is changed
+    window.ethereum.on("chainChanged", ([networkId]) => {
+      this._stopPollingData();
+      this._resetState();
+    });
+  }
+
+  _initialize (userAddress) {
+    // This method initializes the dapp
+
+    // We first store the user's address in the component's state
+    this.setState({
+      selectedAddress: userAddress,
+    });
+
+    //然后，我们初始化ethers，获取令牌的数据，并开始轮询
+    //用于用户的平衡。
+    //获取令牌数据和用户余额是特定于此的
+    //示例项目，但您可以重用相同的初始化模式。
+    this._initializeEthers();
+    this._getTokenData();
+    this._startPollingData();
+  }
+
+  async _initializeEthers () {
+    // 我们首先通过使用window.ethereum创建提供程序来初始化ethers
+    this._provider = new ethers.providers.Web3Provider(window.ethereum);
+
+    //然后，我们使用该提供程序和令牌的
+    //人工制品。你可以对你的合同做同样的事情。
+    console.log(contractAddress.Token,
+      TokenArtifact.abi,
+      this._provider.getSigner(0), '===');
+    this._token = new ethers.Contract(
+      contractAddress.Token,
+      TokenArtifact.abi,
+      this._provider.getSigner(0)
+    );
+  }
+
+  //接下来需要两种方法来启动和停止轮询数据。虽然
+  //此处轮询的数据特定于此示例，您可以使用
+  //模式读取合同中的任何数据。
+  //请注意，如果您不需要它近实时更新，您可能会
+  //不需要轮询。如果是这样的话，您可以在
+  //初始化应用程序，就像我们处理令牌数据一样。
+  _startPollingData () {
+    this._pollDataInterval = setInterval(() => this._updateBalance(), 1000);
+
+    //我们立即运行一次，这样就不必等待
+    this._updateBalance();
+  }
+
+  _stopPollingData () {
+    clearInterval(this._pollDataInterval);
+    this._pollDataInterval = undefined;
+  }
+
+  //接下来的两个方法只是读取合同并存储结果
+  //处于组件状态。
+  async _getTokenData () {
+    const name = await this._token.name();
+    const symbol = await this._token.symbol();
+
+    this.setState({ tokenData: { name, symbol } });
+  }
+
+  async _updateBalance () {
+    const balance = await this._token.balanceOf(this.state.selectedAddress);
+    this.setState({ balance });
+  }
+
+  //此方法发送一个ethereum事务以传输令牌。
+  //虽然此操作特定于此应用程序，但它说明了如何
+  //发送交易。
+  async _transferTokens (to, amount) {
+    //发送事务是一项复杂的操作：
+    //-用户可以拒绝
+    //-它可能在到达ethereum网络之前失败（即，如果用户
+    //没有用于支付tx汽油的ETH）
+    //-必须开采，因此无法立即确认。
+    //请注意，一些测试网络，如Hardhat网络，是我的
+    //立即进行交易，但您的dapp应该做好准备
+    //其他网络。
+    //-一旦开采，可能会失败。
+    //这种方法可以处理所有这些事情，所以请继续阅读以了解如何
+    //做到这一点。
+
+    try {
+      //如果事务失败，我们会将该错误保存在组件的状态中。
+      //我们只保存一个这样的错误，因此在发送第二个事务之前，我们
+      //清除它。
+      this._dismissTransactionError();
+
+      //我们发送事务，并将其哈希保存在Dapp的状态中。这
+      //我们可以表示我们正在等待它被开采。
+      const tx = await this._token.transfer(to, amount);
+      this.setState({ txBeingSent: tx.hash });
+
+      //我们使用.wait（）等待事务被挖掘。此方法
+      //返回交易的收据。
+      const receipt = await tx.wait();
+
+      //收据包含一个状态标志，0表示错误。
+      if (receipt.status === 0) {
+        // We can't know the exact error that made the transaction fail when it
+        // was mined, so we throw this generic one.
+        throw new Error("Transaction failed");
+      }
+
+      // If we got here, the transaction was successful, so you may want to
+      // update your state. Here, we update the user's balance.
+      await this._updateBalance();
+    } catch (error) {
+      // We check the error code to see if this error was produced because the
+      // user rejected a tx. If that's the case, we do nothing.
+      if (error.code === ERROR_CODE_TX_REJECTED_BY_USER) {
+        return;
+      }
+
+      // Other errors are logged and stored in the Dapp's state. This is used to
+      // show them to the user, and for debugging.
+      console.error(error);
+      this.setState({ transactionError: error });
+    } finally {
+      // If we leave the try/catch, we aren't sending a tx anymore, so we clear
+      // this part of the state.
+      this.setState({ txBeingSent: undefined });
+    }
+  }
+
+  // This method just clears part of the state.
+  _dismissTransactionError () {
+    this.setState({ transactionError: undefined });
+  }
+
+  // This method just clears part of the state.
+  _dismissNetworkError () {
+    this.setState({ networkError: undefined });
+  }
+
+  // This is an utility method that turns an RPC error into a human readable
+  // message.
+  _getRpcErrorMessage (error) {
+    if (error.data) {
+      return error.data.message;
+    }
+
+    return error.message;
+  }
+
+  // This method resets the state
+  _resetState () {
+    this.setState(this.initialState);
+  }
+
+  // This method checks if Metamask selected network is Localhost:8545 
+  _checkNetwork () {
+    if (window.ethereum.networkVersion === HARDHAT_NETWORK_ID) {
+      return true;
+    }
+
+    this.setState({
+      networkError: 'Please connect Metamask to Localhost:8545'
+    });
+
+    return false;
+  }
+}

frontend/src/components/Loading.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+export function Loading() {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        zIndex: 2,
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        background: "rgba(255, 255, 255, 0.5)",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          zIndex: 3,
+          top: "50%",
+          left: "50%",
+          width: "100px",
+          height: "50px",
+          marginLeft: "-50px",
+          marginTop: " -25px",
+          textAlign: "center",
+        }}
+      >
+        <div className="spinner-border" role="status">
+          <span className="sr-only">Loading...</span>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/NetworkErrorMessage.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+export function NetworkErrorMessage({ message, dismiss }) {
+  return (
+    <div className="alert alert-danger" role="alert">
+      {message}
+      <button
+        type="button"
+        className="close"
+        data-dismiss="alert"
+        aria-label="Close"
+        onClick={dismiss}
+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  );
+}

frontend/src/components/NoTokensMessage.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+export function NoTokensMessage({ selectedAddress }) {
+  return (
+    <>
+      <p>You don't have tokens to transfer</p>
+      <p>
+        To get some tokens, open a terminal in the root of the repository and run: 
+        <br />
+        <br />
+        <code>npx hardhat --network localhost faucet {selectedAddress}</code>
+      </p>
+    </>
+  );
+}

frontend/src/components/NoWalletDetected.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+export function NoWalletDetected() {
+  return (
+    <div className="container">
+      <div className="row justify-content-md-center">
+        <div className="col-6 p-4 text-center">
+          <p>
+            No Ethereum wallet was detected. <br />
+            Please install{" "}
+            <a
+              href="http://metamask.io"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              MetaMask
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/TransactionErrorMessage.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+export function TransactionErrorMessage({ message, dismiss }) {
+  return (
+    <div className="alert alert-danger" role="alert">
+      Error sending transaction: {message.substring(0, 100)}
+      <button
+        type="button"
+        className="close"
+        data-dismiss="alert"
+        aria-label="Close"
+        onClick={dismiss}
+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  );
+}

frontend/src/components/Transfer.js

@@ -0,0 +1,43 @@
+import React from "react";
+
+export function Transfer({ transferTokens, tokenSymbol }) {
+  return (
+    <div>
+      <h4>Transfer</h4>
+      <form
+        onSubmit={(event) => {
+          // This function just calls the transferTokens callback with the
+          // form's data.
+          event.preventDefault();
+
+          const formData = new FormData(event.target);
+          const to = formData.get("to");
+          const amount = formData.get("amount");
+
+          if (to && amount) {
+            transferTokens(to, amount);
+          }
+        }}
+      >
+        <div className="form-group">
+          <label>Amount of {tokenSymbol}</label>
+          <input
+            className="form-control"
+            type="number"
+            step="1"
+            name="amount"
+            placeholder="1"
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label>Recipient address</label>
+          <input className="form-control" type="text" name="to" required />
+        </div>
+        <div className="form-group">
+          <input className="btn btn-primary" type="submit" value="Transfer" />
+        </div>
+      </form>
+    </div>
+  );
+}

frontend/src/components/WaitingForTransactionMessage.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export function WaitingForTransactionMessage({ txHash }) {
+  return (
+    <div className="alert alert-info" role="alert">
+      Waiting for transaction <strong>{txHash}</strong> to be mined
+    </div>
+  );
+}

frontend/src/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Dapp } from "./components/Dapp";
+
+// We import bootstrap here, but you can remove if you want
+import "bootstrap/dist/css/bootstrap.css";
+
+// This is the entry point of your application, but it just renders the Dapp
+// react component. All of the logic is contained in it.
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Dapp />
+  </React.StrictMode>,
+  document.getElementById("root")
+);

frontend/src/translate.py

@@ -0,0 +1,92 @@
+import hashlib
+import random
+import re
+import time
+import requests
+import os
+
+# 百度api
+apiurl = 'https://fanyi-api.baidu.com/api/trans/vip/translate'
+appid = '20221216001499032'  # 百度翻译api的appid
+secretKey = 'pwKjgqPgaAWIP9d31fTr'  # 百度翻译api的secretKey
+
+# 查找文本中的中文字符，并将连续的中文字符以列表返回
+
+
+def find_chinese(text):
+    regStr = '[a-zA-Z0-9]+'
+    aa = re.findall(regStr, text)
+    return aa
+
+# 翻译内容 源语言 翻译后的语言
+
+def translateBaidu(content, fromLang='en', toLang='zh'):
+    salt = str(random.randint(32768, 65536))
+    sign = appid + content + salt + secretKey  # appid+q+salt+密钥 的MD5值
+    # 对sign做md5，得到32位小写的sign
+    sign = hashlib.md5(sign.encode("utf-8")).hexdigest()
+    try:
+        # 根据技术手册中的接入方式进行设定
+        paramas = {
+            'appid': appid,
+            'q': content,
+            'from': fromLang,
+            'to': toLang,
+            'salt': salt,
+            'sign': sign
+        }
+        response = requests.get(apiurl, paramas)
+        jsonResponse = response.json()  # 获得返回的结果，结果为json格式
+        dst = str(jsonResponse["trans_result"][0]["dst"])  # 取得翻译后的文本结果
+        return dst
+    except Exception as e:
+        print(e)
+
+# 读取文件，翻译成中文，返回一个翻译好的文档的每行的list
+
+
+def text_deal(filename, fromLang='zh', toLang='pt'):
+    '''
+    读取文件，翻译成中文，返回一个翻译好的文档的每行的list
+    :param filename: 翻译的文档路径
+    :return: 翻译好的每行的list
+    '''
+    file = open(filename, encoding="utf-8")
+    while 1:
+        lines = file.readlines(100000)
+        if not lines:
+            break
+        # 遍历每一行代码
+        i = 0
+        newline = []
+        for line in lines:
+            i += 1
+            linea = line.lstrip()  # 去除了左方空行
+            # 判断是否是注释，是注释则跳过
+            if linea[0:2] == "//":
+                # 查找英文字符
+                chineses = find_chinese(linea)
+                print(chineses,'en====')
+                print("[" + str(i) + "]: ", linea)
+                # 查找到中文字符，并调用翻译api翻译进行字符串替换
+                for c in chineses:
+                    time.sleep(2)
+                    translate_str = translateBaidu(c, fromLang, toLang)
+                    print(translate_str,'translate_str')
+                    line = line.replace(c, translate_str)
+                    print(c + " ----> " + translate_str)
+            newline.append(line)
+    file.close()
+    return newline
+
+
+# 调用函数处理文档
+files = os.listdir("./components")
+for file in files:
+    print("=====================")
+    print("正在处理文件：" + file)
+    newlines = text_deal("./components/" + file, "en", "zh")
+    fw = open("./componentsed/" + file, "a", encoding="utf-8")
+    for l in newlines:
+        fw.write(l)
+    fw.close()

hardhat.config.js

@@ -0,0 +1,28 @@
+require("@nomicfoundation/hardhat-toolbox");
+
+// The next line is part of the sample project, you don't need it in your
+// project. It imports a Hardhat task definition, that can be used for
+// testing the frontend.
+require("./tasks/faucet");
+
+
+//转到https://www.alchemyapi.io，注册，创建
+//在仪表板中安装一个新的应用程序，并用其键替换“KEY”
+const ALCHEMY_API_KEY = "1DMM5KirKK3HriaDHRxrTFjYNKko9Kwn";
+
+
+//用Goerli帐户私钥替换此私钥
+//要从Metamask导出私钥，请打开Metamask并
+//转到帐户详细信息>导出私钥
+//小心：切勿将真实以太币放入测试账户
+const GOERLI_PRIVATE_KEY = "511348790f6c17d7fbafdb7108307698542acef8ca01e7d263d8367cc412015a";
+/** @type import('hardhat/config').HardhatUserConfig */
+module.exports = {
+  solidity: "0.8.9",
+  networks: {
+    goerli: {
+      url: `https://eth-goerli.alchemyapi.io/v2/${ALCHEMY_API_KEY}`,
+      accounts: [GOERLI_PRIVATE_KEY]
+    }
+  }
+};

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "hardhat-boilerplate",
+  "version": "1.0.0",
+  "description": "A boilerplate repository to get you started with Hardhat and Ethereum development",
+  "scripts": {
+    "test": "hardhat test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NomicFoundation/hardhat-boilerplate.git"
+  },
+  "author": "Nomic Foundation",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NomicFoundation/hardhat-boilerplate/issues"
+  },
+  "homepage": "https://github.com/NomicFoundation/hardhat-boilerplate#readme",
+  "devDependencies": {
+    "@ethersproject/abi": "^5.4.7",
+    "@ethersproject/providers": "^5.4.7",
+    "@nomicfoundation/hardhat-chai-matchers": "^1.0.0",
+    "@nomicfoundation/hardhat-network-helpers": "^1.0.0",
+    "@nomicfoundation/hardhat-toolbox": "^1.0.1",
+    "@nomiclabs/hardhat-ethers": "^2.0.0",
+    "@nomiclabs/hardhat-etherscan": "^3.0.0",
+    "chai": "^4.2.0",
+    "ethers": "^5.4.7",
+    "hardhat": "^2.12.4",
+    "hardhat-gas-reporter": "^1.0.8",
+    "solidity-coverage": "^0.7.21"
+  }
+}

scripts/deploy.js

@@ -0,0 +1,61 @@
+// This is a script for deploying your contracts. You can adapt it to deploy
+// yours, or create new ones.
+
+const path = require("path");
+
+async function main() {
+  // This is just a convenience check
+  if (network.name === "hardhat") {
+    console.warn(
+      "You are trying to deploy a contract to the Hardhat Network, which" +
+        "gets automatically created and destroyed every time. Use the Hardhat" +
+        " option '--network localhost'"
+    );
+  }
+
+  // ethers is available in the global scope
+  const [deployer] = await ethers.getSigners();
+  console.log(
+    "Deploying the contracts with the account:",
+    await deployer.getAddress()
+  );
+
+  console.log("Account balance:", (await deployer.getBalance()).toString());
+
+  const Token = await ethers.getContractFactory("Token");
+  const token = await Token.deploy();
+  await token.deployed();
+
+  console.log("Token address:", token.address);
+
+  // We also save the contract's artifacts and address in the frontend directory
+  saveFrontendFiles(token);
+}
+
+function saveFrontendFiles(token) {
+  const fs = require("fs");
+  const contractsDir = path.join(__dirname, "..", "frontend", "src", "contracts");
+
+  if (!fs.existsSync(contractsDir)) {
+    fs.mkdirSync(contractsDir);
+  }
+
+  fs.writeFileSync(
+    path.join(contractsDir, "contract-address.json"),
+    JSON.stringify({ Token: token.address }, undefined, 2)
+  );
+
+  const TokenArtifact = artifacts.readArtifactSync("Token");
+
+  fs.writeFileSync(
+    path.join(contractsDir, "Token.json"),
+    JSON.stringify(TokenArtifact, null, 2)
+  );
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });

tasks/faucet.js

@@ -0,0 +1,46 @@
+const fs = require("fs");
+
+// This file is only here to make interacting with the Dapp easier,
+// feel free to ignore it if you don't need it.
+
+task("faucet", "Sends ETH and tokens to an address")
+  .addPositionalParam("receiver", "The address that will receive them")
+  .setAction(async ({ receiver }, { ethers }) => {
+    if (network.name === "hardhat") {
+      console.warn(
+        "You are running the faucet task with Hardhat network, which" +
+          "gets automatically created and destroyed every time. Use the Hardhat" +
+          " option '--network localhost'"
+      );
+    }
+
+    const addressesFile =
+      __dirname + "/../frontend/src/contracts/contract-address.json";
+
+    if (!fs.existsSync(addressesFile)) {
+      console.error("You need to deploy your contract first");
+      return;
+    }
+
+    const addressJson = fs.readFileSync(addressesFile);
+    const address = JSON.parse(addressJson);
+
+    if ((await ethers.provider.getCode(address.Token)) === "0x") {
+      console.error("You need to deploy your contract first");
+      return;
+    }
+
+    const token = await ethers.getContractAt("Token", address.Token);
+    const [sender] = await ethers.getSigners();
+
+    const tx = await token.transfer(receiver, 100);
+    await tx.wait();
+
+    const tx2 = await sender.sendTransaction({
+      to: receiver,
+      value: ethers.constants.WeiPerEther,
+    });
+    await tx2.wait();
+
+    console.log(`Transferred 1 ETH and 100 tokens to ${receiver}`);
+  });

test/Token.js

@@ -0,0 +1,111 @@
+// This is an example test file. Hardhat will run every *.js file in `test/`,
+// so feel free to add new ones.
+
+// Hardhat tests are normally written with Mocha and Chai.
+
+// We import Chai to use its asserting functions here.
+const { expect } = require("chai");
+
+// We use `loadFixture` to share common setups (or fixtures) between tests.
+// Using this simplifies your tests and makes them run faster, by taking
+// advantage or Hardhat Network's snapshot functionality.
+const { loadFixture } = require("@nomicfoundation/hardhat-network-helpers");
+
+// `describe` is a Mocha function that allows you to organize your tests.
+// Having your tests organized makes debugging them easier. All Mocha
+// functions are available in the global scope.
+//
+// `describe` receives the name of a section of your test suite, and a
+// callback. The callback must define the tests of that section. This callback
+// can't be an async function.
+describe("Token contract", function () {
+  // We define a fixture to reuse the same setup in every test. We use
+  // loadFixture to run this setup once, snapshot that state, and reset Hardhat
+  // Network to that snapshot in every test.
+  async function deployTokenFixture() {
+    // Get the ContractFactory and Signers here.
+    const Token = await ethers.getContractFactory("Token");
+    const [owner, addr1, addr2] = await ethers.getSigners();
+
+    // To deploy our contract, we just have to call Token.deploy() and await
+    // for it to be deployed(), which happens onces its transaction has been
+    // mined.
+    const hardhatToken = await Token.deploy();
+
+    await hardhatToken.deployed();
+
+    // Fixtures can return anything you consider useful for your tests
+    return { Token, hardhatToken, owner, addr1, addr2 };
+  }
+
+  // You can nest describe calls to create subsections.
+  describe("Deployment", function () {
+    // `it` is another Mocha function. This is the one you use to define your
+    // tests. It receives the test name, and a callback function.
+//
+    // If the callback function is async, Mocha will `await` it.
+    it("Should set the right owner", async function () {
+      // We use loadFixture to setup our environment, and then assert that
+      // things went well
+      const { hardhatToken, owner } = await loadFixture(deployTokenFixture);
+
+      // Expect receives a value and wraps it in an assertion object. These
+      // objects have a lot of utility methods to assert values.
+
+      // This test expects the owner variable stored in the contract to be
+      // equal to our Signer's owner.
+      expect(await hardhatToken.owner()).to.equal(owner.address);
+    });
+
+    it("Should assign the total supply of tokens to the owner", async function () {
+      const { hardhatToken, owner } = await loadFixture(deployTokenFixture);
+      const ownerBalance = await hardhatToken.balanceOf(owner.address);
+      expect(await hardhatToken.totalSupply()).to.equal(ownerBalance);
+    });
+  });
+
+  describe("Transactions", function () {
+    it("Should transfer tokens between accounts", async function () {
+      const { hardhatToken, owner, addr1, addr2 } = await loadFixture(deployTokenFixture);
+      // Transfer 50 tokens from owner to addr1
+      await expect(hardhatToken.transfer(addr1.address, 50))
+        .to.changeTokenBalances(hardhatToken, [owner, addr1], [-50, 50]);
+
+      // Transfer 50 tokens from addr1 to addr2
+      // We use .connect(signer) to send a transaction from another account
+      await expect(hardhatToken.connect(addr1).transfer(addr2.address, 50))
+        .to.changeTokenBalances(hardhatToken, [addr1, addr2], [-50, 50]);
+    });
+
+    it("should emit Transfer events", async function () {
+      const { hardhatToken, owner, addr1, addr2 } = await loadFixture(deployTokenFixture);
+
+      // Transfer 50 tokens from owner to addr1
+      await expect(hardhatToken.transfer(addr1.address, 50))
+        .to.emit(hardhatToken, "Transfer").withArgs(owner.address, addr1.address, 50)
+
+      // Transfer 50 tokens from addr1 to addr2
+      // We use .connect(signer) to send a transaction from another account
+      await expect(hardhatToken.connect(addr1).transfer(addr2.address, 50))
+        .to.emit(hardhatToken, "Transfer").withArgs(addr1.address, addr2.address, 50)
+    });
+
+    it("Should fail if sender doesn't have enough tokens", async function () {
+      const { hardhatToken, owner, addr1 } = await loadFixture(deployTokenFixture);
+      const initialOwnerBalance = await hardhatToken.balanceOf(
+        owner.address
+      );
+
+      // Try to send 1 token from addr1 (0 tokens) to owner (1000 tokens).
+      // `require` will evaluate false and revert the transaction.
+      await expect(
+        hardhatToken.connect(addr1).transfer(owner.address, 1)
+      ).to.be.revertedWith("Not enough tokens");
+
+      // Owner balance shouldn't have changed.
+      expect(await hardhatToken.balanceOf(owner.address)).to.equal(
+        initialOwnerBalance
+      );
+    });
+  });
+});