From 4857f11d12a99d5ac203e4c9733a1d5d3286a5fc Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Wed, 30 Aug 2023 16:58:48 -0700 Subject: [PATCH 1/4] Replace Ganache with Hardhat --- wallet/how-to/connect/detect-network.md | 14 ++--- .../how-to/get-started-building/run-devnet.md | 52 ++++++++++++------- 2 files changed, 39 insertions(+), 27 deletions(-) diff --git a/wallet/how-to/connect/detect-network.md b/wallet/how-to/connect/detect-network.md index d76494dbecc..2fc76e16176 100644 --- a/wallet/how-to/connect/detect-network.md +++ b/wallet/how-to/connect/detect-network.md @@ -31,10 +31,10 @@ function handleChainChanged(chainId) { These are the chain IDs of the Ethereum networks that MetaMask supports by default. Consult [chainid.network](https://chainid.network) for more. -| Hex | Decimal | Network | -|----------|----------|---------------------------------------------------------------------------| -| 0x1 | 1 | Ethereum main network (Mainnet) | -| 0x5 | 5 | Goerli test network | -| 0xaa36a7 | 11155111 | Sepolia test network | -| 0xe704 | 59140 | [Linea Goerli test network](https://docs.linea.build/) | -| 0x539 | 1337 | Localhost test networks (including [Ganache](../get-started-building/run-devnet.md)) | +| Hex | Decimal | Network | +|----------|----------|--------------------------------------------------------| +| 0x1 | 1 | Ethereum main network (Mainnet) | +| 0x5 | 5 | Goerli test network | +| 0xaa36a7 | 11155111 | Sepolia test network | +| 0xe704 | 59140 | [Linea Goerli test network](https://docs.linea.build/) | +| 0x539 | 1337 | Localhost test networks | diff --git a/wallet/how-to/get-started-building/run-devnet.md b/wallet/how-to/get-started-building/run-devnet.md index 10c1ac3931f..f81dbd5d04e 100644 --- a/wallet/how-to/get-started-building/run-devnet.md +++ b/wallet/how-to/get-started-building/run-devnet.md @@ -5,24 +5,40 @@ sidebar_position: 2 # Run a development network -You can run a personal Ethereum development network using [Ganache](https://www.trufflesuite.com/ganache), +You can run a personal Ethereum development network using [Hardhat](https://hardhat.org/), which allows you to develop a dapp in a secure test environment. :::note -When using a local development blockchain such as Ganache or +When using a local development blockchain such as Hardhat or [anvil](https://book.getfoundry.sh/anvil/#overview-of-anvil), your node must calculate gas to make transactions on MetaMask. ::: -## Connect to Ganache - -Follow the [Ganache quickstart](https://trufflesuite.com/docs/ganache/quickstart/) to set -up a development network. +## Connect to Hardhat + +Follow the [Hardhat Quick Start](https://hardhat.org/hardhat-runner/docs/getting-started#quick-start) +to set up a Hardhat development network. + +In your `hardhat.config.js` file, specify your +[MetaMask seed phrase](https://support.metamask.io/hc/en-us/articles/360015290032-How-to-reveal-your-Secret-Recovery-Phrase) +in the [`accounts`](https://hardhat.org/hardhat-network/docs/reference#accounts) field of the +`networks.hardhat` configuration: + +```js title="hardhat.config.js" +module.exports = { + networks: { + hardhat: { + accounts: { + mnemonic: "", + }, + }, + }, +}; +``` -When you create a Ganache workspace, enter your MetaMask seed phrase into -the **Account & Keys** setting. -Ganache automatically gives each of your first 10 accounts 100 test ether (you can configure -these numbers in **Accounts & Keys**), which makes it easy to start development. +Hardhat automatically gives each of your first 20 accounts 10000 test ether (you can modify +these numbers in the [`accounts`](https://hardhat.org/hardhat-network/docs/reference#accounts) +configuration), which makes it easy to start development. :::caution important Your seed phrase controls all your accounts, so we recommend keeping at least one seed phrase for @@ -31,20 +47,16 @@ You can manage multiple seed phrases by using multiple browser profiles, each wi MetaMask installation. ::: -In the **Server** setting of your workspace, find the hostname and port of your Ganache -network, which comprises the RPC URL of your network: - -```text -http://: -``` +To run a Hardhat development network and expose a JSON-RPC interface, run `npx hardhat node`. +You can now connect MetaMask to your development network RPC URL, `http://127.0.0.1:8545/`. -In the MetaMask extension, connect to your Ganache network: +In the MetaMask extension: -1. Select the network you're currently connected to. +1. In the upper left corner, select the network you're currently connected to. 1. Select **Add network**. 1. Select **Add a network manually**. -1. Enter the RPC URL of your network. -1. Enter MetaMask's default [chain ID](../connect/detect-network.md#chain-ids) for Ganache, `1337`. +1. Enter the RPC URL of your Hardhat network, `http://127.0.0.1:8545/`. +1. Enter MetaMask's default chain ID for Hardhat, `31337`. ## Reset your local nonce calculation From f43a91cf3d98b652d9864d01e9650c13940f155e Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Wed, 30 Aug 2023 17:56:15 -0700 Subject: [PATCH 2/4] minor fix --- wallet/concepts/convenience-libraries.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/wallet/concepts/convenience-libraries.md b/wallet/concepts/convenience-libraries.md index 0a83719b15c..0455014b9b3 100644 --- a/wallet/concepts/convenience-libraries.md +++ b/wallet/concepts/convenience-libraries.md @@ -13,8 +13,8 @@ contracts, for a variety of API preferences (for example, promises, callbacks, a The [MetaMask Ethereum provider API](../reference/provider-api.md) is very simple, and wraps [Ethereum JSON-RPC](../reference/rpc-api.md) formatted messages, which is why some developers use a convenience library for interacting with the provider, such as -[Ethers](https://www.npmjs.com/package/ethers), [web3.js](https://www.npmjs.com/package/web3), -[Truffle](https://www.trufflesuite.com/), and [Embark](https://framework.embarklabs.io/). +[Ethers](https://www.npmjs.com/package/ethers), [web3.js](https://www.npmjs.com/package/web3), and +[Embark](https://framework.embarklabs.io/). You can refer to those tools' documentation to use them. :::tip Use MetaMask SDK From fa8f4e399e42d7cc2c98ba9fa9aeec153d0c3baf Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Thu, 7 Sep 2023 15:09:18 -0700 Subject: [PATCH 3/4] address reviewer feedback --- .../how-to/get-started-building/run-devnet.md | 104 +++++++++++------- 1 file changed, 65 insertions(+), 39 deletions(-) diff --git a/wallet/how-to/get-started-building/run-devnet.md b/wallet/how-to/get-started-building/run-devnet.md index f81dbd5d04e..0163efc22bf 100644 --- a/wallet/how-to/get-started-building/run-devnet.md +++ b/wallet/how-to/get-started-building/run-devnet.md @@ -16,47 +16,73 @@ transactions on MetaMask. ## Connect to Hardhat -Follow the [Hardhat Quick Start](https://hardhat.org/hardhat-runner/docs/getting-started#quick-start) -to set up a Hardhat development network. - -In your `hardhat.config.js` file, specify your -[MetaMask seed phrase](https://support.metamask.io/hc/en-us/articles/360015290032-How-to-reveal-your-Secret-Recovery-Phrase) -in the [`accounts`](https://hardhat.org/hardhat-network/docs/reference#accounts) field of the -`networks.hardhat` configuration: - -```js title="hardhat.config.js" -module.exports = { - networks: { - hardhat: { - accounts: { - mnemonic: "", +Follow these steps to connect MetaMask to a Hardhat development network. + +1. Follow the [Hardhat Quick Start](https://hardhat.org/hardhat-runner/docs/getting-started#quick-start) + to set up a Hardhat development network. + +2. Create a new + [MetaMask seed phrase](https://support.metamask.io/hc/en-us/articles/360060826432-What-is-a-Secret-Recovery-Phrase-and-how-to-keep-your-crypto-wallet-secure#:~:text=Your%20Secret%20Recovery%20Phrase%20(SRP,are%20connected%20to%20that%20phrase.)) + specifically for development. + + :::caution important + Your seed phrase controls all your accounts, so we recommend keeping at least one seed phrase for + development, separate from any used to store real value. + You can manage multiple seed phrases by using multiple browser profiles, each with its own + MetaMask installation. + ::: + +3. In your `hardhat.config.js` file, in the `networks.hardhat` configuration: + + - Specify your MetaMask seed phrase in the + [`accounts`](https://hardhat.org/hardhat-network/docs/reference#accounts) field. + + :::tip + Alternatively, to prevent committing your seed phrase, we recommend adding your seed phrase to a + [`.env` file](https://docs.infura.io/tutorials/developer-tools/javascript-dotenv) and using the + `process.env` global variable in `hardhat.config.js`. + ::: + + - Specify the [chain ID `1337`](https://hardhat.org/hardhat-network/docs/metamask-issue) in the + [`chainId`](https://hardhat.org/hardhat-network/docs/reference#chainid) field. + + ```js title="hardhat.config.js" + module.exports = { + networks: { + hardhat: { + accounts: { + mnemonic: "", + }, + chainId: 1337 + }, }, - }, - }, -}; -``` - -Hardhat automatically gives each of your first 20 accounts 10000 test ether (you can modify -these numbers in the [`accounts`](https://hardhat.org/hardhat-network/docs/reference#accounts) -configuration), which makes it easy to start development. - -:::caution important -Your seed phrase controls all your accounts, so we recommend keeping at least one seed phrase for -development, separate from any used to store real value. -You can manage multiple seed phrases by using multiple browser profiles, each with its own -MetaMask installation. -::: + }; + ``` + + Hardhat automatically gives each of your first 20 accounts 10000 test ether (you can modify + these numbers in the [`accounts`](https://hardhat.org/hardhat-network/docs/reference#accounts) + configuration), which makes it easy to start development. + +4. Run `npx hardhat node` to run a Hardhat development network and expose a JSON-RPC interface. + +5. You can now connect MetaMask to your development network RPC URL, `http://127.0.0.1:8545/`. + In the MetaMask extension: -To run a Hardhat development network and expose a JSON-RPC interface, run `npx hardhat node`. -You can now connect MetaMask to your development network RPC URL, `http://127.0.0.1:8545/`. + 1. In the upper left corner, select the network you're currently connected to. -In the MetaMask extension: + 2. Select **Add network**. + + 3. Select **Add a network manually**. + + 4. Enter the RPC URL of your Hardhat network, `http://127.0.0.1:8545/` (or `http://localhost:8545`). + + 5. Enter the chain ID of your Hardhat network, `1337` (or `0x539` in hexadecimal format). -1. In the upper left corner, select the network you're currently connected to. -1. Select **Add network**. -1. Select **Add a network manually**. -1. Enter the RPC URL of your Hardhat network, `http://127.0.0.1:8545/`. -1. Enter MetaMask's default chain ID for Hardhat, `31337`. + :::tip + Alternatively, you can add your Hardhat network to MetaMask using + [`wallet_addEthereumChain`](/wallet/reference/wallet_addethereumchain/?AddEthereumChainParameter[rpcUrls][0]=http://127.0.0.1:8545&AddEthereumChainParameter[chainId]=0x539&AddEthereumChainParameter[chainName]=Hardhat&AddEthereumChainParameter[nativeCurrency][name]=testEth&AddEthereumChainParameter[nativeCurrency][symbol]=testEth&AddEthereumChainParameter[nativeCurrency][decimals]=18) + in the interactive API playground. + ::: ## Reset your local nonce calculation @@ -70,8 +96,8 @@ and select **Reset account**. ## Next steps Once you have your development environment set up and development network running, you can -[connect to MetaMask](/wallet/how-to/connect) by setting up MetaMask SDK, detecting MetaMask, detecting a user's -network, and accessing a user's accounts. +[connect your dapp to MetaMask](/wallet/how-to/connect) by setting up MetaMask SDK, detecting +MetaMask, detecting a user's network, and accessing a user's accounts. For an end-to-end example, you can also follow the [Create a simple React dapp](../../tutorials/react-dapp-local-state.md) tutorial. From 3760c8e2a33db2d17b737759327b181046835b11 Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Sun, 10 Sep 2023 14:35:24 -0700 Subject: [PATCH 4/4] address reviewer feedback --- .../how-to/get-started-building/run-devnet.md | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/wallet/how-to/get-started-building/run-devnet.md b/wallet/how-to/get-started-building/run-devnet.md index 0163efc22bf..d75b086c19f 100644 --- a/wallet/how-to/get-started-building/run-devnet.md +++ b/wallet/how-to/get-started-building/run-devnet.md @@ -5,21 +5,20 @@ sidebar_position: 2 # Run a development network -You can run a personal Ethereum development network using [Hardhat](https://hardhat.org/), +You can run a personal Ethereum development network using [Hardhat](https://hardhat.org/hardhat-network/docs/overview#hardhat-network), which allows you to develop a dapp in a secure test environment. :::note -When using a local development blockchain such as Hardhat or +When using a local development blockchain such as Hardhat Network or [anvil](https://book.getfoundry.sh/anvil/#overview-of-anvil), your node must calculate gas to make transactions on MetaMask. ::: -## Connect to Hardhat +## Connect to Hardhat Network -Follow these steps to connect MetaMask to a Hardhat development network. +Follow these steps to connect MetaMask to Hardhat Network. -1. Follow the [Hardhat Quick Start](https://hardhat.org/hardhat-runner/docs/getting-started#quick-start) - to set up a Hardhat development network. +1. [Set up a Hardhat project.](https://hardhat.org/hardhat-runner/docs/guides/project-setup) 2. Create a new [MetaMask seed phrase](https://support.metamask.io/hc/en-us/articles/360060826432-What-is-a-Secret-Recovery-Phrase-and-how-to-keep-your-crypto-wallet-secure#:~:text=Your%20Secret%20Recovery%20Phrase%20(SRP,are%20connected%20to%20that%20phrase.)) @@ -32,10 +31,13 @@ Follow these steps to connect MetaMask to a Hardhat development network. MetaMask installation. ::: -3. In your `hardhat.config.js` file, in the `networks.hardhat` configuration: +3. In your `hardhat.config.js` file, specify a + [`networks` configuration](https://hardhat.org/hardhat-runner/docs/config#networks-configuration) + with a `hardhat` network. + In this `networks.hardhat` configuration: - Specify your MetaMask seed phrase in the - [`accounts`](https://hardhat.org/hardhat-network/docs/reference#accounts) field. + [`accounts.mnemonic`](https://hardhat.org/hardhat-network/docs/reference#accounts) field. :::tip Alternatively, to prevent committing your seed phrase, we recommend adding your seed phrase to a @@ -46,12 +48,14 @@ Follow these steps to connect MetaMask to a Hardhat development network. - Specify the [chain ID `1337`](https://hardhat.org/hardhat-network/docs/metamask-issue) in the [`chainId`](https://hardhat.org/hardhat-network/docs/reference#chainid) field. + For example: + ```js title="hardhat.config.js" module.exports = { networks: { hardhat: { accounts: { - mnemonic: "", + mnemonic: process.env.SEED_PHRASE, }, chainId: 1337 }, @@ -63,9 +67,9 @@ Follow these steps to connect MetaMask to a Hardhat development network. these numbers in the [`accounts`](https://hardhat.org/hardhat-network/docs/reference#accounts) configuration), which makes it easy to start development. -4. Run `npx hardhat node` to run a Hardhat development network and expose a JSON-RPC interface. +4. Run `npx hardhat node` to run Hardhat Network and expose a JSON-RPC interface. -5. You can now connect MetaMask to your development network RPC URL, `http://127.0.0.1:8545/`. +5. You can now connect MetaMask to your Hardhat Network RPC URL, `http://127.0.0.1:8545/`. In the MetaMask extension: 1. In the upper left corner, select the network you're currently connected to. @@ -74,12 +78,12 @@ Follow these steps to connect MetaMask to a Hardhat development network. 3. Select **Add a network manually**. - 4. Enter the RPC URL of your Hardhat network, `http://127.0.0.1:8545/` (or `http://localhost:8545`). + 4. Enter your Hardhat Network RPC URL, `http://127.0.0.1:8545/` (or `http://localhost:8545`). - 5. Enter the chain ID of your Hardhat network, `1337` (or `0x539` in hexadecimal format). + 5. Enter your Hardhat Network chain ID, `1337` (or `0x539` in hexadecimal format). :::tip - Alternatively, you can add your Hardhat network to MetaMask using + Alternatively, you can add Hardhat Network to MetaMask using [`wallet_addEthereumChain`](/wallet/reference/wallet_addethereumchain/?AddEthereumChainParameter[rpcUrls][0]=http://127.0.0.1:8545&AddEthereumChainParameter[chainId]=0x539&AddEthereumChainParameter[chainName]=Hardhat&AddEthereumChainParameter[nativeCurrency][name]=testEth&AddEthereumChainParameter[nativeCurrency][symbol]=testEth&AddEthereumChainParameter[nativeCurrency][decimals]=18) in the interactive API playground. :::