Merge pull request NomicFoundation#89 from NomicFoundation/change-chain-id

Use default chain id and add coinbase wallet

Author: fvictorio

README.md

@@ -42,7 +42,7 @@ npm start
 ```
 
 Open [http://localhost:3000/](http://localhost:3000/) to see your Dapp. You will
-need to have [Metamask](https://metamask.io) installed and listening to
+need to have [Coinbase Wallet](https://www.coinbase.com/wallet) or [Metamask](https://metamask.io) installed and listening to
 `localhost 8545`.
 
 ## User Guide
@@ -52,7 +52,7 @@ 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/)
-- [Setting up Metamask](https://hardhat.org/tutorial/boilerplate-project#how-to-use-it)
+- [Setting up your wallet](https://hardhat.org/tutorial/boilerplate-project#how-to-use-it)
 - [Hardhat's full documentation](https://hardhat.org/docs/)
 
 For a complete introduction to Hardhat, refer to [this guide](https://hardhat.org/getting-started/#overview).
@@ -75,7 +75,7 @@ This project also includes [a sample frontend/Dapp](./frontend), which uses [Cre
 - `Invalid nonce` errors: if you are seeing this error on the `npx hardhat node`
   console, try resetting your Metamask account. This will reset the account's
   transaction history and also the nonce. Open Metamask, click on your account
-  followed by `Settings > Advanced > Reset Account`.
+  followed by `Settings > Advanced > Clear activity tab data`.
 
 ## Setting up your editor
 

frontend/src/components/ConnectWallet.js

@@ -7,7 +7,7 @@ export function ConnectWallet({ connectWallet, networkError, dismiss }) {
     <div className="container">
       <div className="row justify-content-md-center">
         <div className="col-12 text-center">
-          {/* Metamask network should be set to Localhost:8545. */}
+          {/* Wallet network should be set to Localhost:8545. */}
           {networkError && (
             <NetworkErrorMessage 
               message={networkError} 

frontend/src/components/Dapp.js

@@ -19,10 +19,8 @@ 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 = '1337';
+// This is the default id used by the Hardhat Network
+const HARDHAT_NETWORK_ID = '31337';
 
 // This is an error code that indicates that the user canceled a transaction
 const ERROR_CODE_TX_REJECTED_BY_USER = 4001;
@@ -60,7 +58,7 @@ export class Dapp extends React.Component {
 
   render() {
     // Ethereum wallets inject the window.ethereum object. If it hasn't been
-    // injected, we instruct the user to install MetaMask.
+    // injected, we instruct the user to install a wallet.
     if (window.ethereum === undefined) {
       return <NoWalletDetected />;
     }
@@ -178,9 +176,7 @@ export class Dapp extends React.Component {
     // Once we have the address, we can initialize the application.
 
     // First we check the network
-    if (!this._checkNetwork()) {
-      return;
-    }
+    this._checkNetwork();
 
     this._initialize(selectedAddress);
 
@@ -197,12 +193,6 @@ export class Dapp extends React.Component {
 
       this._initialize(newAddress);
     });
-    
-    // We reset the dapp state if the network is changed
-    window.ethereum.on("chainChanged", ([networkId]) => {
-      this._stopPollingData();
-      this._resetState();
-    });
   }
 
   _initialize(userAddress) {
@@ -354,16 +344,19 @@ export class Dapp extends React.Component {
     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'
+  async _switchChain() {
+    const chainIdHex = `0x${HARDHAT_NETWORK_ID.toString(16)}`
+    await window.ethereum.request({
+      method: "wallet_switchEthereumChain",
+      params: [{ chainId: chainIdHex }],
     });
+    await this._initialize(this.state.selectedAddress);
+  }
 
-    return false;
+  // This method checks if the selected network is Localhost:8545
+  _checkNetwork() {
+    if (window.ethereum.networkVersion !== HARDHAT_NETWORK_ID) {
+      this._switchChain();
+    }
   }
 }

frontend/src/components/NoWalletDetected.js

@@ -9,10 +9,14 @@ export function NoWalletDetected() {
             No Ethereum wallet was detected. <br />
             Please install{" "}
             <a
-              href="http://metamask.io"
+              href="https://www.coinbase.com/wallet"
               target="_blank"
               rel="noopener noreferrer"
             >
+              Coinbase Wallet
+            </a>
+            or{" "}
+            <a href="http://metamask.io" target="_blank" rel="noopener noreferrer">
               MetaMask
             </a>
             .

hardhat.config.js

@@ -8,9 +8,4 @@ require("./tasks/faucet");
 /** @type import('hardhat/config').HardhatUserConfig */
 module.exports = {
   solidity: "0.8.17",
-  networks: {
-    hardhat: {
-      chainId: 1337 // We set 1337 to make interacting with MetaMask simpler
-    }
-  }
 };