Hardhat : Deployment and Upgradable Contract 👷

Independence DEV — Sun, 24 Jul 2022 07:50:00 +0000

Deploying your smart contracts in a professional way is important to maintain them properly. Hardhat is the perfect solution for that!

Installation & configuration

To install and initialize a HardHat project, use these commands :
npm install hardhat npx hardhat
You will have a file "Greeter.sol" in the "contracts" folder.
You can compile this Smart Contract with :
npx hardhat compile
In the "hardhat.config.js" file we will set the path of the artfifacts (Smart contracts compiled) and the BNB Smart chain testnet network for the future deployments.
paths: { artifacts: './src/artifacts', }, networks: { bsctestnet: { url: "https://speedy-nodes-nyc.moralis.io/c96c432c75339d23af5d7364/bsc/testnet", chainId: 97, accounts: [secret.key] }
In the "secret.json" file I put the private key of my wallet.
{ "key": "myPrivateKey" }

Deployment of a smart contract

To deploy the Smart Contract, we will have to create a script in the "scripts" folder. We have the "sample-script.js".
const hre = require("hardhat"); async function main() { const Greeter = await hre.ethers.getContractFactory("Greeter"); const greeter = await Greeter.deploy("Hello, Hardhat!"); await greeter.deployed(); console.log("Greeter deployed to:", greeter.address); }
Use this command to launch it :
npx hardhat run scripts/sample-script.js --network bsctestnet

Interaction with the smart contract

Now we deployed the Smart Contract and have the Address on the Blockchain, so we can interact with it.
Example of script to set new value :
const hre = require("hardhat"); async function main() { const GreeterContract = await ethers.getContractFactory("Greeter"); const Greeter = await GreeterContract.attach("0xC9f9f144f58d590B136D526d43E9eDE8aa24Cd91"); const greet = await Greeter.setGreeting("Nouvelle valeur"); const newValue = await Greeter.greet(); console.log(newValue); }

Upgradable Smart Contract

A Smart Contract is immutable but we can use proxy to solve this problem. HardHat provide all the tools to do it easily.

Deployment with proxy

Script to deploy a Smart Contract with a proxy.
const { ethers, upgrades } = require("hardhat"); async function main() { const Greeter = await ethers.getContractFactory("Greeter"); const greeter = await upgrades.deployProxy(Greeter, ["Hello, Hardhat!"]); await greeter.deployed(); console.log("Greeter deployed to:", greeter.address); }

Upgrade with proxy

Script to change the implementation of the Smart Contract behind the proxy. (Need the proxy address)
const { ethers, upgrades } = require("hardhat"); async function main() { const Greeter = await ethers.getContractFactory("Greeter"); const greeter = await upgrades.upgradeProxy("0xC9f9f144f58d590B136D526d43E9eDE8aa24Cd91", Greeter); console.log("Greeter upgraded"); }

Verify Smart Contract

To verify a Smart Contract on the explorer (bscscan.com) we need to install the package "@nomiclabs/hardhat-etherscan" and get an API key from BscScan.
Add this code in the "hardhat.config.js" :
etherscan: { apiKey: { bsctestnet: "yourApiKey" } }
And you just have to launch this command :
npx hardhat verify --network bsctestnet

Create connect wallet button with React + Web3.js + Bootstrap

Independence DEV — Thu, 09 Jun 2022 12:30:04 +0000

I will teach you how to create a button that will interact with MetaMask to let the user connect their wallet on your app.

npx create-react-app wallet-connect cd wallet-connect

Check the react-scripts version in package.json, the version need to be 4.0.3 to be compatible with web3.js

Run this command line to install everything we need :
yarn add web3 react-bootstrap bootstrap react-bootstrap-icons

add this line in index.js :

import 'bootstrap/dist/css/bootstrap.css';

Final App.js file :

import React from 'react';
import Web3 from "web3";
import { Button } from 'react-bootstrap';
import { Wallet } from 'react-bootstrap-icons';
import './App.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      web3: null,
      currentAccount: null,
      ethBalance: 0,
      networkId: null
    };
  }

  componentDidMount = async () => {
    this.connectWalletHandler();
  };

  connectWalletHandler = async () => {
    try {
      const web3 = new Web3(Web3.givenProvider);
      this.setState({ web3: web3});
      const accounts = await web3.eth.requestAccounts();
      if (accounts.length !== 0) {
        const networkId = await web3.eth.net.getId();
        const ethBalance = await web3.eth.getBalance(accounts[0]);
        this.setState({currentAccount: accounts[0], ethBalance: Web3.utils.fromWei(ethBalance), networkId: networkId});
      } 
    } catch (error) {
      console.error(error);
    }
  }

  connectedWallet = () => {
    return (
      <div>
        <p>{parseFloat(this.state.ethBalance).toFixed(4)} ETH</p>
        <p>{this.state.currentAccount.slice(0,5)+'...'+this.state.currentAccount.slice(38,42)}<br />WALLET CONNECTED</p>
      </div>
    )
  }

  connectWalletButton = () => {
    return (
      <Button variant="outline-primary" onClick={() => this.connectWalletHandler()}><Wallet />&ensp;Connect wallet</Button>
    )
  }

  render() {
    return (
      <div className="App">
         {this.state.currentAccount ? this.connectedWallet() : this.connectWalletButton()}
      </div>
    );
  }
}

export default App;

DEV Community: Independence DEV