docs: Add Ethereum Tooling Guides (#474)

* Add Ethereum Tooling Guides

* Apply suggestions from code review

* fix tabs

* review comments addressed and some cleanup

Co-authored-by: Federico Kunze Küllmer <31522760+fedekunze@users.noreply.github.com>
Co-authored-by: Federico Kunze <federico.kunze94@gmail.com>

docs/.vuepress/config.js

@@ -12,24 +12,27 @@ module.exports = {
     },
   },
   head: [
-      [
+    [
-          "link",
+      "link",
-          {
+      {
-              rel: "stylesheet",
+        rel: "stylesheet",
-              href:
+        href:
-                  "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css",
+          "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css",
-          },
+      },
-      ],
+    ],
-      [
+    [
-          "link",
+      "link",
-          {
+      {
-              rel: "stylesheet",
+        rel: "stylesheet",
-              href:
+        href:
-                  "https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css",
+          "https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css",
-          },
+      },
-      ],
+    ],
   ],
   base: process.env.VUEPRESS_BASE || '/',
+  plugins: [
+    'vuepress-plugin-element-tabs'
+  ],
   themeConfig: {
     repo: 'tharsis/ethermint',
     docsRepo: 'tharsis/ethermint',
@@ -37,6 +40,15 @@ module.exports = {
     docsDir: 'docs',
     editLinks: true,
     custom: true,
+    project: {
+      name: 'Ethermint',
+      denom: 'PHOTON',
+      ticker: 'ETHM',
+      rpc_url: '',
+      rpc_url_local: 'http://localhost:8545/',
+      chain_id: '9000',
+      block_explorer_url: '',
+    },
     logo: {
       src: '/ethermint-logo-horizontal-alpha.svg',
     },
@@ -201,50 +213,50 @@ module.exports = {
         {
           service: "linkedin",
           url: "https://www.linkedin.com/company/tharsis-finance/",
-      },
+        },
-      {
+        {
           service: "medium",
           url: "https://medium.com/@tharsis_labs",
-      },
+        },
       ],
       smallprint: 'This website is maintained by Tharsis Labs Ltd.',
       links: [{
-          title: 'Documentation',
+        title: 'Documentation',
-          children: [{
+        children: [{
-              title: 'Cosmos SDK Docs',
+          title: 'Cosmos SDK Docs',
-              url: 'https://docs.cosmos.network/master/'
+          url: 'https://docs.cosmos.network/master/'
-            },
-            {
-              title: 'Ethereum Docs',
-              url: 'https://ethereum.org/developers'
-            },
-            {
-              title: 'Tendermint Core Docs',
-              url: 'https://docs.tendermint.com'
-            }
-          ]
         },
         {
-          title: 'Community',
+          title: 'Ethereum Docs',
-          children: [{
+          url: 'https://ethereum.org/developers'
-              title: 'Ethermint Community',
-              url: 'https://discord.gg/3ZbxEq4KDu'
-            },
-            {
-              title: 'Ethermint Forum',
-              url: 'https://forum.cosmos.network/c/ethermint'
-            }
-          ]
         },
         {
-          title: 'Tharsis',
+          title: 'Tendermint Core Docs',
-          children: [
+          url: 'https://docs.tendermint.com'
-            {
-              title: 'Jobs at Tharsis',
-              url: 'https://tharsis.notion.site/Jobs-at-Tharsis-5a1642eb89b34747ae6f2db2d356fc0d'
-            }
-          ]
         }
+        ]
+      },
+      {
+        title: 'Community',
+        children: [{
+          title: 'Ethermint Community',
+          url: 'https://discord.gg/3ZbxEq4KDu'
+        },
+        {
+          title: 'Ethermint Forum',
+          url: 'https://forum.cosmos.network/c/ethermint'
+        }
+        ]
+      },
+      {
+        title: 'Tharsis',
+        children: [
+          {
+            title: 'Jobs at Tharsis',
+            url: 'https://tharsis.notion.site/Jobs-at-Tharsis-5a1642eb89b34747ae6f2db2d356fc0d'
+          }
+        ]
+      }
       ]
     },
     versions: [

docs/guides/README.md

@@ -7,13 +7,14 @@ parent:
 # Guides
 
 1. Localnet
-  * [Single Node Localnet](./localnet/single_node)
+    * [Single Node Localnet](./localnet/single_node)
-  * [Multi Node Localnet](./localnet/multi_node)
+    * [Multi Node Localnet](./localnet/multi_node)
 2. Keys and Wallets
-  * [Keyring](./keys-wallets/keyring)
+    * [Keyring](./keys-wallets/keyring)
-  * [Metamask](./keys-wallets/metamask)
+    * [MetaMask](./keys-wallets/metamask)
 3. Ethereum Tooling
-  * [Truffle](./tools/truffle)
+    * [Remix](./tools/remix)
-  * [Remix](./tools/remix)
+    * [Hardhat](./tools/hardhat)
+    * [Truffle](./tools/truffle)
 4. [Validators](./validators/overview)
 5. [Key Management System](./kms/kms)

docs/guides/keys-wallets/metamask.md

@@ -2,32 +2,45 @@
 order: 2
 -->
 
-# Metamask
+# MetaMask
 
-Connect your Metamask wallet with Ethermint. {synopsis}
+Connect your MetaMask wallet with Ethermint {synopsis}
 
-## Adding a custom Network for Ethermint
+The MetaMask browser extension is a wallet for accessing Ethereum-enabled applications and managing user identities. It can be used to connect to Ethermint through the official testnet or via a locally-running Ethermint node.
-
-Open the Metamask extension on your browser, you may have to log in to your Metamask account if you
-are not already. Then click the top right circle and go to `Settings` > `Networks` > `Add
-Network` and fill the form as shown below.
 
 ::: tip
-You can also find the full `ChainID` form the `genesis.json` file. To get the
+If you are planning on developing on Ethermint locally and you haven’t already set up your own local node, refer to [the quickstart tutorial](../../quickstart/run_node/), or follow the instructions in the [GitHub repository](https://github.com/tharsis/ethermint/).
-[EIP155](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md) chain ID from the Cosmos
+:::
-chain ID, check the [Chain ID](./../../basics/chain_id) documentation page.
+
+## Adding a New Network
+
+Open the MetaMask extension on your browser, you may have to log in to your MetaMask account if you are not already. Then click the top right circle and go to `Settings` > `Networks` > `Add Network` and fill the form as shown below.
+
+::: tip
+You can also find the full `ChainID` form the `genesis.json` file. To get the [EIP155](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md) chain ID from the Cosmos chain ID, check the [Chain ID](./../../basics/chain_id) documentation page.
 :::
 
 ![metamask networks settings](./../img/metamask_network_settings.png)
 
 Here is the list of fields that you can use to paste on Metamask:
 
-- **Network Name**: Ethermint
+:::: tabs
-<!-- TODO: add RPC URL -->
+::: tab Local Node
-- **New RPC URL**: http://localhost:8545
+
-- **Chain ID**: 9000
+- **Network Name:** `{{ $themeConfig.project.name }} Local`
-- **Currency Symbol (optional)**: PHOTON
+- **New RPC URL:** `{{ $themeConfig.project.rpc_url_local }}`
-- **Block Explorer URL (optional)**:
+- **Chain ID:** `{{ $themeConfig.project.chain_id }}`
+- **Currency Symbol (optional):** `{{ $themeConfig.project.ticker }}-LOCAL`
+- **Block Explorer URL (optional):** `n/a`
+:::
+::: tab Testnet
+- **Network Name:** `{{ $themeConfig.project.name }}`
+- **New RPC URL:** `{{ $themeConfig.project.rpc_url }}`
+- **Chain ID:** `{{ $themeConfig.project.chain_id }}`
+- **Currency Symbol (optional):** `{{ $themeConfig.project.ticker }}`
+- **Block Explorer URL (optional):** `{{ $themeConfig.project.block_explorer_url }}`
+:::
+::::
 
 ## Import Account to Metamask
 
@@ -35,15 +48,13 @@ Then close the settings, and go to `My Accounts` (top right circle) and select `
 
 ![metamask import account page](./../img/metamask_import.png)
 
-Now you can export your private key from the terminal using the following command. Again, make sure
+Now you can export your private key from the terminal using the following command. Again, make sure to replace `mykey` with the name of the key that you want to export and use the correct `keyring-backend`:
-to replace `mykey` with the name of the key that you want to export and use the correct `keyring-backend`:
 
 ```bash
 ethermintd keys unsafe-export-eth-key mykey --keyring-backend test
 ```
 
-Go back to the browser and select the `Private Key` option. Then paste the private key exported from
+Go back to the browser and select the `Private Key` option. Then paste the private key exported from the `unsafe-export-eth-key` command.
-the `unsafe-export-eth-key` command.
 
 Your account balance should show up as `1 APHOTON` and do transfers as usual.
 
@@ -54,5 +65,4 @@ Network` (or any other than `Localhost 8545` or `Ethermint`) and then switch bac
 
 ## Downloading State
 
-To see your Metamask logs, click the top right circle and go to `Settings` > `Advanced` > `Download State Logs`.
+To see your Metamask logs, click the top right circle and go to `Settings` > `Advanced` > `Download State Logs`. If you search through the JSON file for the account address you'll find the transaction history.
-If you search through the JSON file for the account address you'll find the transaction history.

docs/guides/tools/hardhat.md

@@ -0,0 +1,200 @@
+<!--
+order: 2
+-->
+
+# Hardhat: Deploying a Smart Contract
+
+Learn how to deploy a simple Solidity-based smart contract to Ethermint using the Hardhat environment {synopsis}
+
+[Hardhat](https://hardhat.org/) is a flexible development environment for building Ethereum-based smart contracts. It is designed with integrations and extensibility in mind
+
+## Pre-requisite Readings
+
+- [Installation](./../../quickstart/installation.md) {prereq}
+- [Run a node](./../../quickstart/run_node.md) {prereq}
+
+## Install Dependencies
+
+Before proceeding, you need to install Node.js (we'll use v16.x) and the npm package manager. You can download directly from [Node.js](https://nodejs.org/en/download/) or in your terminal:
+
+:::: tabs
+::: tab Ubuntu
+
+```bash
+curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
+
+sudo apt install -y nodejs
+```
+
+:::
+::: tab MacOS
+
+```bash
+# You can use homebrew (https://docs.brew.sh/Installation)
+$ brew install node
+
+# Or you can use nvm (https://github.com/nvm-sh/nvm)
+$ nvm install node
+```
+
+:::
+::::
+
+You can verify that everything is installed correctly by querying the version for each package:
+
+```bash
+$ node -v
+...
+
+$ npm -v
+...
+```
+
+::: tip
+If you haven't already, you will also need to install Ethermint if you plan on deploying your smart contracts locally. Check this [document](./../../quickstart/installation.md) for the full instructions.
+:::
+
+## Create Hardhat Project
+
+To create a new project, navigate to your project directory and run:
+
+```bash
+$ npx hardhat
+
+888    888                      888 888               888
+888    888                      888 888               888
+888    888                      888 888               888
+8888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
+888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
+888    888 .d888888 888    888  888 888  888 .d888888 888
+888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
+888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888
+
+Welcome to Hardhat v2.0.8
+
+? What do you want to do? …
+❯ Create a sample project
+  Create an empty hardhat.config.js
+```
+
+Following the prompts should create a new project structure in your directory. Consult the [Hardhat config page](https://hardhat.org/config/) for a list of configuration options to specify in `hardhat.config.js`. Most importantly, you should set the `defaultNetwork` entry to point to your desired JSON-RPC network:
+
+:::: tabs
+::: tab Local Node
+
+```javascript
+module.exports = {
+  defaultNetwork: "local",
+  networks: {
+    hardhat: {
+    },
+    local: {
+      url: "http://localhost:8545/",
+      accounts: [privateKey1, privateKey2, ...]
+    }
+  },
+  ...
+}
+```
+
+:::
+::: tab Testnet
+
+```javascript
+module.exports = {
+  defaultNetwork: "testnet",
+  networks: {
+    hardhat: {
+    },
+    testnet: {
+      url: "",
+      accounts: [privateKey1, privateKey2, ...]
+    }
+  },
+  ...
+}
+```
+
+:::
+::::
+
+To ensure you are targeting the correct network, you can query for a list of accounts available to you from your default network provider:
+
+```bash
+$ npx hardhat accounts
+0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
+0x70997970C51812dc3A010C7d01b50e0d17dc79C8
+0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC
+0x90F79bf6EB2c4f870365E785982E1f101E93b906
+...
+```
+
+## Deploying a Smart Contract
+
+You will see that a default smart contract, written in Solidity, has already been provided under `contracts/Greeter.sol`:
+
+```javascript
+pragma solidity ^0.8.0;
+
+import "hardhat/console.sol";
+
+contract Greeter {
+    string private greeting;
+
+    constructor(string memory _greeting) {
+        console.log("Deploying a Greeter with greeting:", _greeting);
+        greeting = _greeting;
+    }
+
+    function greet() public view returns (string memory) {
+        return greeting;
+    }
+
+    function setGreeting(string memory _greeting) public {
+        console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
+        greeting = _greeting;
+    }
+}
+```
+
+This contract allows you to set and query a string `greeting`. Hardhat also provides a script to deploy smart contracts to a target network; this can be invoked via the following command, targeting your default network:
+
+```bash
+npx hardhat run scripts/sample-script.js
+```
+
+Hardhat also lets you manually specify a target network via the `--network <your-network>` flag:
+
+:::: tabs
+::: tab Local Node
+
+```bash
+npx hardhat run --network {{ $themeConfig.project.rpc_url_local }} scripts/sample-script.js
+```
+
+:::
+::: tab Testnet
+
+```bash
+npx hardhat run --network {{ $themeConfig.project.rpc_url }} scripts/sample-script.js
+```
+
+:::
+::::
+
+Finally, try running a Hardhat test:
+
+```bash
+$ npx hardhat test
+Compiling 1 file with 0.8.4
+Compilation finished successfully
+
+
+  Greeter
+Deploying a Greeter with greeting: Hello, world!
+Changing greeting from 'Hello, world!' to 'Hola, mundo!'
+    ✓ Should return the new greeting once it's changed (803ms)
+
+
+  1 passing (805ms)
+```

docs/guides/tools/remix.md

@@ -1,26 +1,48 @@
 <!--
-order: 2
+order: 1
 -->
 
-# Remix
+# Remix: Deploying a Smart Contract
 
-Set up a Remix Ethermint local development environment. {synopsis}
+Learn how to deploy a simple Solidity-based smart contract to Ethermint using the Remix in-browser IDE {synopsis}
 
 ## Pre-requisite Readings
 
 - [Installation](./../../quickstart/installation.md) {prereq}
 - [Run a node](./../../quickstart/run_node.md) {prereq}
-- [Metamask](./../wallets/metamask.md) {prereq}
+- [MetaMask](../keys-wallets/metamask.md) {prereq}
 
 [Remix](http://remix.ethereum.org/) is an in-browser IDE for [Solidity](https://github.com/ethereum/solidity) smart contracts. In this guide, we will learn how to deploy a contract to a running Ethermint network through Remix and interact with it.
 
 ## Connect Ethermint account to Remix
 
-First, follow the steps in the [Metamask guide](./../wallets/metamask.md) to import your Ethermint private key into Metamask. Start the Ethermint daemon and rest server.
+::: tip
+If you haven’t already, follow the steps in the [Metamask guide](.//metamask.md) to import your Ethermint private key into Metamask. Start the Ethermint daemon and REST server.
+:::
 
-Once that is complete, go to [Remix](http://remix.ethereum.org/). There are some contracts in the File Explorer. Select any of these contracts.  In this example, we use `Counter.sol` from the [Truffle](./truffle.md) guide. On the left-most bar, select the Solidity Compiler and compile the contract.
+Go to [Remix](http://remix.ethereum.org/). There are some contracts in the File Explorer. Replace these with the source code to `Counter.sol` below. On the left-most bar, select the Solidity Compiler and compile the contract.
 
-Next, select the `Deploy and Run` option. Select `injected web3` as the environment. This will open a metamask popup for you to confirm connecting your Metamask to Remix. Hit confirm.
+```javascript
+pragma solidity >=0.7.0 <0.9.0;
+
+contract Counter {
+  uint256 counter = 0;
+
+  function add() public {
+    counter++;
+  }
+
+  function subtract() public {
+    counter--;
+  }
+
+  function getCounter() public view returns (uint256) {
+    return counter;
+  }
+}
+```
+
+Next, select the `Deploy and Run` option. Select `Injected Web3` as the `Environment`. This will open a metamask popup for you to connect your Metamask to Remix. Select `Connect` to confirm.
 
 You should see your account show up in the left-hand panel.
 
@@ -28,7 +50,7 @@ You should see your account show up in the left-hand panel.
 
 ## Deploy and Interact
 
-Now that your account is connected, you are able to deploy the contract. Press the `Deploy` button. A metamask pop-up will appear asking you to confirm.  Confirm the transaction.  You should see a log for the deployment transaction in the ethermint daemon logs:
+Now that your account is connected, you are able to deploy the contract. Press the `Deploy` button. A metamask pop-up will appear asking you to confirm. Confirm the transaction.  You should see a log for the deployment transaction in the Ethermint daemon logs:
 
 ```bash
 I[2020-07-15|17:26:43.155] Added good transaction                       module=mempool tx=877A8E6600FA27EC2B2362719274314977B243671DC4E5F8796ED97FFC0CBE42 res="&{CheckTx:log:\"[]\" gas_wanted:121193 }" height=31 total=1

docs/guides/tools/truffle.md

@@ -1,19 +1,19 @@
 <!--
-order: 1
+order: 3
 -->
 
-# Truffle
+# Truffle: Deploying a Smart Contract
 
-Set up a Truffle Ethermint local development environment. {synopsis}
+Learn how to deploy a simple Solidity-based smart contract to Ethermint using the Truffle environment {synopsis}
 
 ## Pre-requisite Readings
 
 - [Installation](./../quickstart/installation.md) {prereq}
 - [Run a node](./../quickstart/run_node.md) {prereq}
 
-[Truffle](https://www.trufflesuite.com/truffle) is a development framework for deploying and managing [Solidity](https://github.com/ethereum/solidity) smart contracts. In this guide, we will learn how to deploy a contract to a running Ethermint network.
+[Truffle](https://www.trufflesuite.com/truffle) is a development framework for deploying and managing [Solidity](https://github.com/ethereum/solidity) smart contracts.
 
-## Install dependencies
+## Install Dependencies
 
 First, install the latest Truffle version on your machine globally.
 
@@ -21,15 +21,17 @@ First, install the latest Truffle version on your machine globally.
 yarn install truffle -g
 ```
 
-You will also need to install Ethermint. Check this [document](./../../quickstart/installation.md) for the full instructions.
+::: tip
+If you haven't already, you will also need to install Ethermint if you plan on deploying your smart contracts locally. Check this [document](./../../quickstart/installation.md) for the full instructions.
+:::
 
 ## Create Truffle Project
 
 In this step we will create a simple counter contract. Feel free to skip this step if you already have your own compiled contract.
 
-Create a new directory to host the contracts and initialize it
+Create a new directory to host the contracts and initialize it:
 
-```bash
+```console
 mkdir ethermint-truffle
 cd ethermint-truffle
 ```
@@ -43,7 +45,7 @@ truffle init
 Create `contracts/Counter.sol` containing the following contract:
 
 ```javascript
-pragma solidity ^0.5.11;
+pragma solidity >=0.7.0 <0.9.0;
 
 contract Counter {
   uint256 counter = 0;
@@ -95,9 +97,9 @@ Open `truffle-config.js` and uncomment the `development` section in `networks`:
 
 ```javascript
     development: {
-     host: "127.0.0.1",     // Localhost (default: none)
+      host: "127.0.0.1",     // Localhost (default: none)
-     port: 8545,            // Standard Ethereum port (default: none)
+      port: 8545,            // Standard Ethereum port (default: none)
-     network_id: "*",       // Any network (default: none)
+      network_id: "*",       // Any network (default: none)
     },
 ```
 
@@ -108,17 +110,17 @@ This will allow your contract to connect to your Ethermint local node.
 Start your local node using the following command on the Terminal
 
 ```bash
-# on the ~/ethermint/ directory
+# from the ~/ethermint/ directory
-init.sh
+$ init.sh
 ```
 
 ::: tip
-For further information on how to run a node, please refer to [this](./../../quickstart/run_node.md) quickstart document.
+For further information on how to run a node, please refer to the [quickstart guide](./../../quickstart/run_node.md).
 :::
 
 ## Deploy contract
 
-Back in the Truffle terminal, migrate the contract using
+In the Truffle terminal, migrate the contract using:
 
 ```bash
 truffle migrate --network development
@@ -127,7 +129,7 @@ truffle migrate --network development
 You should see incoming deployment logs in the Ethermint daemon Terminal tab for each transaction (one to deploy `Migrations.sol` and the other to deploy `Counter.sol`).
 
 ```bash
-I[2020-07-15|17:35:59.934] Added good transaction                       module=mempool tx=22245B935689918D332F58E82690F02073F0453D54D5944B6D64AAF1F21974E2 res="&{CheckTx:log:\"[]\" gas_wanted:6721975 }" height=3 total=1
+$ I[2020-07-15|17:35:59.934] Added good transaction                       module=mempool tx=22245B935689918D332F58E82690F02073F0453D54D5944B6D64AAF1F21974E2 res="&{CheckTx:log:\"[]\" gas_wanted:6721975 }" height=3 total=1
 I[2020-07-15|17:36:02.065] Executed block                               module=state height=4 validTxs=1 invalidTxs=0
 I[2020-07-15|17:36:02.068] Committed state                              module=state height=4 txs=1 appHash=76BA85365F10A59FE24ADCA87544191C2D72B9FB5630466C5B71E878F9C0A111
 I[2020-07-15|17:36:02.981] Added good transaction                       module=mempool tx=84516B4588CBB21E6D562A6A295F1F8876076A0CFF2EF1B0EC670AD8D8BB5425 res="&{CheckTx:log:\"[]\" gas_wanted:6721975 }" height=4 total=1
@@ -138,7 +140,7 @@ I[2020-07-15|17:36:02.981] Added good transaction                       module=m
 Now, you can run the Truffle tests using the Ethermint node using the `test` command:
 
 ```bash
-truffle test --network development
+$ truffle test --network development
 
 Using network 'development'.
 
@@ -155,7 +157,3 @@ Compiling your contracts...
 
   1 passing (10s)
 ```
-
-## Next {hide}
-
-Learn how to connect Ethermint to [Metamask](./../wallets/metamask.md) {hide}

docs/package.json

@@ -29,6 +29,7 @@
     "vuepress-theme-cosmos": "^1.0.182"
   },
   "devDependencies": {
+    "vuepress-plugin-element-tabs": "^0.2.8",
     "watchpack": "^1.7.2"
   },
   "resolutions": {