Skip to content

Commit 638fd58

Browse files
authored
Merge pull request NomicFoundation#89 from NomicFoundation/change-chain-id
Use default chain id and add coinbase wallet
2 parents d3d8169 + 5c3a2f3 commit 638fd58

File tree

5 files changed

+25
-33
lines changed

5 files changed

+25
-33
lines changed

README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ npm start
4242
```
4343

4444
Open [http://localhost:3000/](http://localhost:3000/) to see your Dapp. You will
45-
need to have [Metamask](https://metamask.io) installed and listening to
45+
need to have [Coinbase Wallet](https://www.coinbase.com/wallet) or [Metamask](https://metamask.io) installed and listening to
4646
`localhost 8545`.
4747

4848
## User Guide
@@ -52,7 +52,7 @@ You can find detailed instructions on using this repository and many tips in [it
5252
- [Writing and compiling contracts](https://hardhat.org/tutorial/writing-and-compiling-contracts/)
5353
- [Setting up the environment](https://hardhat.org/tutorial/setting-up-the-environment/)
5454
- [Testing Contracts](https://hardhat.org/tutorial/testing-contracts/)
55-
- [Setting up Metamask](https://hardhat.org/tutorial/boilerplate-project#how-to-use-it)
55+
- [Setting up your wallet](https://hardhat.org/tutorial/boilerplate-project#how-to-use-it)
5656
- [Hardhat's full documentation](https://hardhat.org/docs/)
5757

5858
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
7575
- `Invalid nonce` errors: if you are seeing this error on the `npx hardhat node`
7676
console, try resetting your Metamask account. This will reset the account's
7777
transaction history and also the nonce. Open Metamask, click on your account
78-
followed by `Settings > Advanced > Reset Account`.
78+
followed by `Settings > Advanced > Clear activity tab data`.
7979

8080
## Setting up your editor
8181

frontend/src/components/ConnectWallet.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export function ConnectWallet({ connectWallet, networkError, dismiss }) {
77
<div className="container">
88
<div className="row justify-content-md-center">
99
<div className="col-12 text-center">
10-
{/* Metamask network should be set to Localhost:8545. */}
10+
{/* Wallet network should be set to Localhost:8545. */}
1111
{networkError && (
1212
<NetworkErrorMessage
1313
message={networkError}

frontend/src/components/Dapp.js

+16-23
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,8 @@ import { TransactionErrorMessage } from "./TransactionErrorMessage";
1919
import { WaitingForTransactionMessage } from "./WaitingForTransactionMessage";
2020
import { NoTokensMessage } from "./NoTokensMessage";
2121

22-
// This is the Hardhat Network id that we set in our hardhat.config.js.
23-
// Here's a list of network ids https://docs.metamask.io/guide/ethereum-provider.html#properties
24-
// to use when deploying to other networks.
25-
const HARDHAT_NETWORK_ID = '1337';
22+
// This is the default id used by the Hardhat Network
23+
const HARDHAT_NETWORK_ID = '31337';
2624

2725
// This is an error code that indicates that the user canceled a transaction
2826
const ERROR_CODE_TX_REJECTED_BY_USER = 4001;
@@ -60,7 +58,7 @@ export class Dapp extends React.Component {
6058

6159
render() {
6260
// Ethereum wallets inject the window.ethereum object. If it hasn't been
63-
// injected, we instruct the user to install MetaMask.
61+
// injected, we instruct the user to install a wallet.
6462
if (window.ethereum === undefined) {
6563
return <NoWalletDetected />;
6664
}
@@ -178,9 +176,7 @@ export class Dapp extends React.Component {
178176
// Once we have the address, we can initialize the application.
179177

180178
// First we check the network
181-
if (!this._checkNetwork()) {
182-
return;
183-
}
179+
this._checkNetwork();
184180

185181
this._initialize(selectedAddress);
186182

@@ -197,12 +193,6 @@ export class Dapp extends React.Component {
197193

198194
this._initialize(newAddress);
199195
});
200-
201-
// We reset the dapp state if the network is changed
202-
window.ethereum.on("chainChanged", ([networkId]) => {
203-
this._stopPollingData();
204-
this._resetState();
205-
});
206196
}
207197

208198
_initialize(userAddress) {
@@ -354,16 +344,19 @@ export class Dapp extends React.Component {
354344
this.setState(this.initialState);
355345
}
356346

357-
// This method checks if Metamask selected network is Localhost:8545
358-
_checkNetwork() {
359-
if (window.ethereum.networkVersion === HARDHAT_NETWORK_ID) {
360-
return true;
361-
}
362-
363-
this.setState({
364-
networkError: 'Please connect Metamask to Localhost:8545'
347+
async _switchChain() {
348+
const chainIdHex = `0x${HARDHAT_NETWORK_ID.toString(16)}`
349+
await window.ethereum.request({
350+
method: "wallet_switchEthereumChain",
351+
params: [{ chainId: chainIdHex }],
365352
});
353+
await this._initialize(this.state.selectedAddress);
354+
}
366355

367-
return false;
356+
// This method checks if the selected network is Localhost:8545
357+
_checkNetwork() {
358+
if (window.ethereum.networkVersion !== HARDHAT_NETWORK_ID) {
359+
this._switchChain();
360+
}
368361
}
369362
}

frontend/src/components/NoWalletDetected.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,14 @@ export function NoWalletDetected() {
99
No Ethereum wallet was detected. <br />
1010
Please install{" "}
1111
<a
12-
href="http://metamask.io"
12+
href="https://www.coinbase.com/wallet"
1313
target="_blank"
1414
rel="noopener noreferrer"
1515
>
16+
Coinbase Wallet
17+
</a>
18+
or{" "}
19+
<a href="http://metamask.io" target="_blank" rel="noopener noreferrer">
1620
MetaMask
1721
</a>
1822
.

hardhat.config.js

-5
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,4 @@ require("./tasks/faucet");
88
/** @type import('hardhat/config').HardhatUserConfig */
99
module.exports = {
1010
solidity: "0.8.17",
11-
networks: {
12-
hardhat: {
13-
chainId: 1337 // We set 1337 to make interacting with MetaMask simpler
14-
}
15-
}
1611
};

0 commit comments

Comments
 (0)