About

My note and code for the tutorial at https://dev.to/dabit3/the-complete-guide-to-full-stack-ethereum-development-3j13

Setup

The followings are used in this tutorial:

Solidity
Hardhat
Alchemy
Rinkeby
OpenZeppelin
React with CRA
ethers.js

Local Node

npx create-react-app react-dapp

cd react-dapp
npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers
npx hardhat  # you need to delete the readme from create-react-app

new files:

contacts
scripts
test
hardhat.config.js

change hardhat.config.js and update the module.exports to look like this:

module.exports = {
  solidity: "0.8.4",
  paths: {
    artifacts: './src/artifacts',
  },
  networks: {
    hardhat: {
      chainId: 1337
    }
  }
};

compile the contracts

npx hardhat compile

start the local node:

npx hardhat node

20 test accounts have been created:

WARNING: These accounts, and their private keys, are publicly known.
Any funds sent to them on Mainnet or any other live network WILL BE LOST.

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (10000 ETH)
Private Key: 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d

rename scripts/deploy.js and deploy the contract to local node - the first account is used to pay the gas fee:

NOTE: same contract can be deployed multiple times into different addresses

npx hardhat run scripts/deploy.js --network localhost

Deploying contracts with the account: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
Greeter deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

and the test node terminal console has the output:

web3_clientVersion
eth_chainId
eth_accounts
eth_blockNumber
eth_chainId (2)
eth_estimateGas
eth_getBlockByNumber
eth_feeHistory
eth_sendTransaction
  Contract deployment: Greeter
  Contract address:    0x5fbdb2315678afecb367f032d93f642f64180aa3
  Transaction:         0x7269d154f4fe421d28cd94b0f36485036b4fd82a48d623148c2d61c1484e42b2
  From:                0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266
  Value:               0 ETH
  Gas used:            497026 of 497026
  Block #1:            0x5395d9352ce665c73f7466e73487d13a750cdd1fe99b74c2d90e7cba6727ea8e

  console.log:
    Deploying a Greeter with greeting: Hello, Hardhat!

eth_chainId
eth_getTransactionByHash
eth_chainId
eth_getTransactionReceipt

Change contract address in App.js, then test using

npm start

click Fetch, you should see the message shown in the Chrome Inspector Console:

import the test account into MetaMask using private key, connect to the React site page and change the greeting by linking to the account and pay the gas fee.

if running into this issue: https://medium.com/@thelasthash/solved-nonce-too-high-error-with-metamask-and-hardhat-adc66f092cd

Open up your MetaMask window and click on the icon in the top right to display accounts. Go to Settings, then Advanced and hit Reset Account.

if successful, you should see the output in the Chrome console:

committed and added a git tag local-greeting

git checkout local-greeting to come to this snapshot.

Rinkeby Testnet

Get test either from https://rinkebyfaucet.com/

Go to https://www.alchemy.com/ to register an account. Create a new app:

npm install dotenv --save

if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config();
}

get the private key for the rinkeby test account and put the key in .env file which should be gitignored.

PRIVATE_KEY='xxxx475819ff278c127f877cf9dc998f0609eb9'
ALCHEMY_URL='https://eth-rinkeby.alchemyapi.io/v2/WDL-ZpOtJ3Yxxx'

change hardhat.config.js:

module.exports = {
  defaultNetwork: "hardhat",
  paths: {
    artifacts: './src/artifacts',
  },
  networks: {
    hardhat: {},
    rinkeby: {
      url: "https://eth-rinkeby.alchemyapi.io/v2/0_9y9twl9AjteiyKkWszAFySVqjZioi7",
      accounts: [process.env.PRIVATE_KEY]
    }
  },
  solidity: "0.8.4",
};

Deploy to rinkeby:

npx hardhat run scripts/deploy.js --network rinkeby

Greeter deployed to: 0xd9945E118a2e2a98d68B0778a652EA839129F6ec

Gas fee is 0.00124 ether

Check at https://rinkeby.etherscan.io/tx/0xb702b0cbfd43be4afdbeae29da1165509bbc020632b4930d5e4791a80533930c

change App.js to the rinkeby address and run npm start to test.

Use the Rinkeby account to connect and it should work.

added a git tag: rinkeby-greeting.

git checkout rinkeby-greeting to get to this point.

Issue Token on Rinkeby

add the Token contract Token.sol, compile it: npx hardhat compile

update the deploy.js file to add the new contract.

(I had to only deploy one contract to avoid this error: Error: replacement fee too low)

npx hardhat run scripts/deploy.js --network rinkeby
Deploying contracts with the account: xx2d57Fd71dc38BE362ab6f7
Token deployed to: 0xC6f1f574F56F6e484eBA944e39fC00Eecc11fcFf

Check out the contract at https://rinkeby.etherscan.io/address/0xC6f1f574F56F6e484eBA944e39fC00Eecc11fcFf

The account used to deploy the contract get 1M WIT tokens.

update App.js with two contacts and then run npm start, send 1000 WIT tokens to another account:

Verify the contract:

Make sure to use the compiler version as specified in hardhat.config.js:

committed and added a git tag rinkeby-token

git checkout rinkeby-token to come to this snapshot.

Issue ERC20 Token

npm install @openzeppelin/contracts

a new ERC20 contract, a new deploy script.

npx hardhat compile
npx hardhat run scripts/deploy-erc20.js --network rinkeby

Token deployed to: 0xbDb07bB0Bbb0dbD35AcDD20Ac379C192ba2CBcbF

Check at https://rinkeby.etherscan.io/address/0xbDb07bB0Bbb0dbD35AcDD20Ac379C192ba2CBcbF

Only when you issue ERC20 Tokens, you can see the Token page on Etherscan:

Now when you import the ERC20 tokens, the decimal is 18:

committed and added a git tag rinkeby-erc20