Add support for Hardhat Ignition

README.md

@@ -7,12 +7,11 @@ smart contract development.
 This project is intended to be used with the
 [Hardhat Beginners Tutorial](https://hardhat.org/tutorial), but you should be
 able to follow it by yourself by reading the README and exploring its
-`contracts`, `tests`, `scripts` and `frontend` directories.
+`contracts`, `tests`, `ignition`, `scripts` and `frontend` directories.
 
 ## Quick start
 
-The first things you need to do are cloning this repository and installing its
-dependencies:
+First clone this repository and install its dependencies:
 
 ```sh
 git clone https://github.com/NomicFoundation/hardhat-boilerplate.git
@@ -51,8 +50,9 @@ You can find detailed instructions on using this repository and many tips in [it
 
 - [Writing and compiling contracts](https://hardhat.org/tutorial/writing-and-compiling-contracts/)
 - [Setting up the environment](https://hardhat.org/tutorial/setting-up-the-environment/)
-- [Testing Contracts](https://hardhat.org/tutorial/testing-contracts/)
+- [Testing contracts](https://hardhat.org/tutorial/testing-contracts/)
 - [Setting up your wallet](https://hardhat.org/tutorial/boilerplate-project#how-to-use-it)
+- [Deploying your contracts](https://hardhat.org/ignition/docs/getting-started#quick-start)
 - [Hardhat's full documentation](https://hardhat.org/docs/)
 
 For a complete introduction to Hardhat, refer to [this guide](https://hardhat.org/getting-started/#overview).
@@ -61,7 +61,8 @@ For a complete introduction to Hardhat, refer to [this guide](https://hardhat.or
 
 This repository uses our recommended hardhat setup, by using our [`@nomicfoundation/hardhat-toolbox`](https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-toolbox). When you use this plugin, you'll be able to:
 
-- Deploy and interact with your contracts using [ethers.js](https://docs.ethers.io/v5/) and the [`hardhat-ethers`](https://hardhat.org/hardhat-runner/plugins/nomiclabs-hardhat-ethers) plugin.
+- Deploy and verify your contracts using [Hardhat Ignition](https://hardhat.org/ignition/docs/getting-started#quick-start).
+- Interact with your contracts using [ethers.js](https://docs.ethers.io/v6/) and the [`hardhat-ethers`](https://hardhat.org/hardhat-runner/plugins/nomiclabs-hardhat-ethers) plugin.
 - Test your contracts with [Mocha](https://mochajs.org/), [Chai](https://chaijs.com/) and our own [Hardhat Chai Matchers](https://hardhat.org/hardhat-chai-matchers) plugin.
 - Interact with Hardhat Network with our [Hardhat Network Helpers](https://hardhat.org/hardhat-network-helpers).
 - Verify the source code of your contracts with the [hardhat-etherscan](https://hardhat.org/hardhat-runner/plugins/nomiclabs-hardhat-etherscan) plugin.

frontend/src/components/Dapp.js

@@ -72,8 +72,8 @@ export class Dapp extends React.Component {
     // clicks a button. This callback just calls the _connectWallet method.
     if (!this.state.selectedAddress) {
       return (
-        <ConnectWallet 
-          connectWallet={() => this._connectWallet()} 
+        <ConnectWallet
+          connectWallet={() => this._connectWallet()}
           networkError={this.state.networkError}
           dismiss={() => this._dismissNetworkError()}
         />
@@ -176,26 +176,26 @@ export class Dapp extends React.Component {
     // Once we have the address, we can initialize the application.
 
     // First we check the network
-    this._checkNetwork();
+    await this._checkNetwork();
 
-    this._initialize(selectedAddress);
+    await 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 
+      // To avoid errors, we reset the dapp state
       if (newAddress === undefined) {
         return this._resetState();
       }
-      
+
       this._initialize(newAddress);
     });
   }
 
-  _initialize(userAddress) {
+  async _initialize(userAddress) {
     // This method initializes the dapp
 
     // We first store the user's address in the component's state
@@ -255,8 +255,10 @@ export class Dapp extends React.Component {
   }
 
   async _updateBalance() {
-    const balance = await this._token.balanceOf(this.state.selectedAddress);
-    this.setState({ balance });
+    if (this.state.selectedAddress) {
+      const balance = await this._token.balanceOf(this.state.selectedAddress);
+      this.setState({ balance });
+    }
   }
 
   // This method sends an ethereum transaction to transfer tokens.
@@ -345,7 +347,7 @@ export class Dapp extends React.Component {
   }
 
   async _switchChain() {
-    const chainIdHex = `0x${HARDHAT_NETWORK_ID.toString(16)}`
+    const chainIdHex = `0x${HARDHAT_NETWORK_ID.toString(16)}`;
     await window.ethereum.request({
       method: "wallet_switchEthereumChain",
       params: [{ chainId: chainIdHex }],
@@ -354,9 +356,16 @@ export class Dapp extends React.Component {
   }
 
   // This method checks if the selected network is Localhost:8545
-  _checkNetwork() {
-    if (window.ethereum.networkVersion !== HARDHAT_NETWORK_ID) {
-      this._switchChain();
+  async _checkNetwork() {
+    // The method returns a 0x-prefixed hexadecimal number, so we convert it into a numerical string
+    const currentChainId = Number(
+      await window.ethereum.request({
+        method: "eth_chainId",
+      })
+    ).toString();
+
+    if (currentChainId !== HARDHAT_NETWORK_ID) {
+      await this._switchChain();
     }
   }
 }

ignition/modules/Token.js

@@ -0,0 +1,9 @@
+const { buildModule } = require('@nomicfoundation/hardhat-ignition/modules');
+
+const TokenModule = buildModule('TokenModule', (m) => {
+  const token = m.contract('Token');
+
+  return { token };
+});
+
+module.exports = TokenModule;