DEV Community: Wasim

Deploying DApp to Heroku: Part (4/4)

Wasim — Sun, 28 Nov 2021 09:57:54 +0000

In this part of the tutorial we'll be deploying the react app we built in the previous section.

This project is hosted here.
Link to Github Repo of the project here. This will serve as a reference for you, if at some point you are not able to follow the tutorial.

For this tutorial you need to have your repo on github. If you haven't done it yet follow these instructions to do so.

Signup on Heroku and create new app.

Go to Heroku and signup.
Create a new app Give a unique name and select a region.

Adding Buildpacks

Buildpacks are scripts that are run when your app is deployed. They are used to install dependencies for your app and configure your environment.

Go to app settings.

Here we need to add two buildpacks, one because the project we want to host frontend is a subdir in the project and second because heroku doesn't have a official builtpack for react.

Scroll down, click on Add Buildpacks and add

https://github.com/timanovsky/subdir-heroku-buildpack.git

https://github.com/mars/create-react-app-buildpack.git

Make sure they are in the right order as shown above.

Setting Config Vars

Go to Config Vars section and set up these two variables, PROJECT_PATH: frontend and REACT_APP_ALCHEMY_KEY: <YOUR_ALCHEMY_KEY>.

Deploy

Now go to the deploy tab, here we have three different deployment methods. We will use the GitHub method. Click on it and it will ask you to connect to your github account.

Now, search for your github repo and click on connect.

Select your branch and Enable Automatic Deploys, this will enable continuous integration as and when you push new changes to your deployed branch.

After that click on Deploy Branch and we are done. We have now successfully deployed our project on heroku. Click on open app at the top to view your project.

I hope this tutorial series helped you understand things a little better and thank you for reading.

Building a frontend react app for Dapp from scratch: Part (3/4)

Wasim — Sun, 28 Nov 2021 09:56:20 +0000

This part is the primary reason that motivated me to write this tutorial series in the first place. Tutorials on solidity were easy to find and they were good enough, but the problem was finding a good tutorial on how to build a frontend, how it interacts with the deployed smart contract and how to host it on cloud platforms like heroku.

This section requires you to have some basic understanding of react such as components, useState, useEffect, etc. There are a ton of good resources on react, so please check them out if you are not familiar with these concepts.

This project is hosted here.
Link to Github Repo of the project here. This will serve as a reference for you, if at some point you are not able to follow the tutorial.

Creating a react app

In the root directory, run

npx create-react-app frontend

This will create a react app named frontend.

npm install @alch/alchemy-web3
npm install react-bootstrap bootstrap@5.1.3
npm install dotenv
npm install react-icons --save

This will install all the necessary packages for our project.

Alchemy Web3 is a wrapper around Web3.js which provides some enhanced API methods.

Setup

create-react-app initiates with some boilerplate code when we can get rid off.

Delete App.test.js logo.svg reportWebVitals.js, and setupTests.js from the src folder.

And make changes to your index.js and App.js file to look like this.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import './App.css'

function App() {
  return (
    <>
    </>
  )
}

export default App

Now, go to frontend/public/index.html and add bootstrap CDN into the head tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Create a .env file in the frontend directory and add your Alchemy API Key which we used in the previous section.

REACT_APP_ALCHEMY_KEY = <YOUR_API_KEY>

Now, we are all set to building our project.

Getting artifacts

We need certain data about our deployed smart contract in the frontend in order to interact with it. In order to get that data we'll modify our deployment script at SimpleBank/scripts/deploy.js.

deploy.js

const { ethers, artifacts } = require('hardhat')

async function main() {
  const [deployer] = await ethers.getSigners()

  console.log('Deploying contracts with the account: ', deployer.address)

  const Bank = await ethers.getContractFactory('Bank')
  const bank = await Bank.deploy()

  console.log('Bank address: ', bank.address)

  saveArtifacts(bank)
}

// save the address and artifact of the deployed contract in the frontend
const saveArtifacts = (bank) => {
  const fs = require('fs')
  const artifactDir = __dirname + '/../frontend/src/artifacts'

  if (!fs.existsSync(artifactDir)) {
    fs.mkdirSync(artifactDir)
  }

  const bankArtifact = artifacts.readArtifactSync('Bank')

  const artifact = {
    address: bank.address,
    abi: bankArtifact.abi,
  }

  console.log('Saving artifacts to: ', artifactDir)

  fs.writeFileSync(artifactDir + '/Bank.json', JSON.stringify(artifact))
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error)
    process.exit(1)
  })

We have added a new function saveArtifacts() and calling it at the end of main will save the deployed contract address and abi to frontend/src/artifacts when the contract is deployed.

We'll need to deploy our contract once again to get this data.

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

This should create a artifacts folder in frontend/src with a Bank.json file.

Utility Functions

This is the part were we'll write the code to interact with our deployed smart contract.

Create a folder in frontend/src called utils and add the following files into it. This is where we'll write all our functions.

walletFunctions.js

export const connectWallet = async () => {
  if (window.ethereum) {
    try {
      const addresses = await window.ethereum.request({
        method: 'eth_requestAccounts',
      })
      const obj = {
        address: addresses[0],
        connected: true,
        status: '',
      }
      return obj
    } catch (error) {
      return {
        address: '',
        connected: false,
        status: error.message,
      }
    }
  } else {
    return {
      address: '',
      connected: false,
      status: (
        <a href="https://metamask.io/" target="_blank" rel="noreferrer">
          {' '}
          You need to install Metamask
        </a>
      ),
    }
  }
}

export const getWalletStatus = async () => {
  if (window.ethereum) {
    try {
      const addresses = await window.ethereum.request({
        method: 'eth_requestAccounts',
      })
      if (addresses.length > 0) {
        return {
          address: addresses[0],
          connected: true,
          status: '',
        }
      } else {
        return {
          address: '',
          connected: false,
          status: '🦊 Please connect to Metamask Wallet',
        }
      }
    } catch (error) {
      return {
        address: '',
        connected: false,
        status: error.message,
      }
    }
  } else {
    return {
      address: '',
      connected: false,
      status: (
        <a href="https://metamask.io/" target="_blank" rel="noreferrer">
          {' '}
          You need to install Metamask
        </a>
      ),
    }
  }
}

Here we have two functions, both are quite similar so I'll try to explain the key parts of both of them together.

if (window.ethereum) {
    //does someting
} else {
    return {
      address: '',
      connected: false,
      status: (
        <a href="https://metamask.io/" target="_blank" rel="noreferrer">
          {' '}
          You need to install Metamask
        </a>
      ),
    }
  }

Here, window.ethereum checks if the browser has a wallet. If yes, it proceeds else we return an instruction to install metamask wallet.

try {
      const addresses = await window.ethereum.request({
        method: 'eth_requestAccounts',
      })
      const obj = {
        address: addresses[0],
        connected: true,
        status: '',
      }
      return obj
    } catch (error) {
      return {
        address: '',
        connected: false,
        status: error.message,
      }
    }

Now, if there is a wallet available, we use const addresses = await window.ethereum.request({ method: 'eth_requestAccounts', }) to request the wallet to connect an account to the app. If the connection was successful we get all the connected addresses and we return the first one, else we return the error message.

The getWalletStatus function also works pretty much the same. It checks the accounts that are connected to the wallet, if none it responds with request to connect.

bankFunctions.js

const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
const { createAlchemyWeb3 } = require('@alch/alchemy-web3')
const web3 = createAlchemyWeb3(alchemyKey)

const { abi, address } = require('../artifacts/Bank.json')

export const depositEth = async (amount) => {
  if (parseFloat(amount) <= 0) {
    return {
      status: 'Please enter a valid amount',
    }
  }

  window.contract = await new web3.eth.Contract(abi, address)

  const WeiAmount = web3.utils.toHex(web3.utils.toWei(amount, 'ether'))

  const txParams = {
    to: address,
    from: window.ethereum.selectedAddress,
    value: WeiAmount,
    data: window.contract.methods.deposit().encodeABI(),
  }

  try {
    await window.ethereum.request({
      method: 'eth_sendTransaction',
      params: [txParams],
    })
    return {
      status: 'Transaction Successful. Refresh in a moment.',
    }
  } catch (error) {
    return {
      status: 'Transaction Failed' + error.message,
    }
  }
}

export const withdrawEth = async (amount) => {
  window.contract = await new web3.eth.Contract(abi, address)

  const WeiAmount = web3.utils.toWei(amount, 'ether')

  const txParams = {
    to: address,
    from: window.ethereum.selectedAddress,
    data: window.contract.methods.withdraw(WeiAmount).encodeABI(),
  }

  try {
    await window.ethereum.request({
      method: 'eth_sendTransaction',
      params: [txParams],
    })
    return {
      status: 'Transaction Successful. Refresh in a moment',
    }
  } catch (error) {
    return {
      status: 'Transaction Failed' + error.message,
    }
  }
}

export const getBalance = async () => {
  window.contract = await new web3.eth.Contract(abi, address)

  const reqParams = {
    to: address,
    from: window.ethereum.selectedAddress,
    data: window.contract.methods.getBalance().encodeABI(),
  }

  try {
    const response = await window.ethereum.request({
      method: 'eth_call',
      params: [reqParams],
    })
    const exhRate = await exchangeRate()
    const balance = web3.utils.fromWei(response, 'ether')
    return {
      inr: balance * exhRate,
      eth: balance,
      exhRate: exhRate,
    }
  } catch (error) {
    return {
      status: 'Check Failed ' + error.message,
    }
  }
}

export const exchangeRate = async () => {
  const response = await fetch(
    'https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=inr',
  )
  const data = await response.json()
  return data.ethereum.inr
}

These are the functions that will handle app the bank features.

const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
const { createAlchemyWeb3 } = require('@alch/alchemy-web3')
const web3 = createAlchemyWeb3(alchemyKey)

const { abi, address } = require('../artifacts/Bank.json')

Firstly, we'll use out API Key to initialize our web3 instance and import address and abi from artifacts/Bank.json.

if (parseFloat(amount) <= 0) {
    return {
      status: 'Please enter a valid amount',
    }
}

Then we have the depositEth function, which will be used to deposit amount. amount parameter will be in string format, so we convert it to float and ensure it is greater than 0.

window.contract = await new web3.eth.Contract(abi, address)

Here we get an instance of our contract using abi and address.

const WeiAmount = web3.utils.toHex(web3.utils.toWei(amount, 'ether'))

We convert the received parameter to Wei, which is the smallest denomination of ether ( 1 ether = 10^18 Wei). Then we convert it into Hex value which we'll use as a transaction parameter.

const txParams = {
    to: address,
    from: window.ethereum.selectedAddress,
    value: WeiAmount,
    data: window.contract.methods.deposit().encodeABI(),
  }

Transaction parameters include to: <contract_address>, from: <address_of_account_connected_to_app>, value: <amount_to_be_deposited>, data: <call_to_contract_function>.

try {
    await window.ethereum.request({
      method: 'eth_sendTransaction',
      params: [txParams],
    })
    return {
      status: 'Transaction Successful. Refresh in a moment.',
    }
  } catch (error) {
    return {
      status: 'Transaction Failed' + error.message,
    }
  }
}

Finally, we send the transaction. If successful we return a success message else we return the error message.

withdrawEth function as the name suggests is for transferring back the amount from bank to wallet. Its almost same are earlier, just instead of sending amount as a transaction parameter we'll send it as a parameter to the call function.

getBalance function return the balance available for the amount which calls it. The major difference here is that we use method: 'eth_call' since it is just a view function. We also use a exchangeRate function which is a simple fetch request to an api to get the current exchange rate of ETH to INR and return balance in both format.

Components & CSS

Create a components folder in frontend/src and add these components to it.

These components are build pretty basic with some bootstrap elements and CSS is minimal, so we won't into too much detail for them.

NavBar.jsx

import { Container, Navbar } from 'react-bootstrap'

export default function NavBar() {
  return (
    <div>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand>SimpleBank & Co.</Navbar.Brand>
        </Container>
      </Navbar>
    </div>
  )
}

This is a simple navbar with a brand which we'll use in our app.

StatusBox.jsx

import { Alert, Container, Row, Col } from 'react-bootstrap'

const StatusBox = ({ status }) => {
  return (
    <Container
      className={status.length === 0 ? 'status-box-null' : 'status-box'}
    >
      <Row className="justify-content-center">
        <Col lg="6">
          <Alert variant="danger">{status}</Alert>
        </Col>
      </Row>
    </Container>
  )
}

export default StatusBox

This status bar will be used to inform the user whenever anything goes wrong.

BankInfo.jsx

import { IoIosRefresh } from 'react-icons/io'
import {
  Button,
  Container,
  FormControl,
  InputGroup,
  Col,
  Row,
  Alert,
} from 'react-bootstrap'
import { useState, useEffect } from 'react'

import { getBalance, depositEth, withdrawEth } from '../utils/bankFunctions'

const BankInfo = ({ onAccoutChange }) => {
  const [balanceINR, setBalanceINR] = useState(0)
  const [balanceETH, setBalanceETH] = useState(0)
  const [showDeposit, setShowDeposit] = useState(false)
  const [showWithdraw, setShowWithdraw] = useState(false)
  const [exhRate, setExhRate] = useState(0)
  const [inputINR, setInputINR] = useState(null)
  const [inputETH, setInputETH] = useState(null)
  const [response, setResponse] = useState(null)

  const handleShowDeposit = () => {
    setShowDeposit(true)
  }

  const handleShowWithdraw = () => {
    setShowWithdraw(true)
  }

  const handleClose = () => {
    setShowDeposit(false)
    setShowWithdraw(false)
    setInputINR(null)
    setInputETH(null)
    setResponse(null)
  }

  const checkBalance = async () => {
    const balance = await getBalance()
    setBalanceETH(balance.eth)
    setBalanceINR(balance.inr)
    setExhRate(balance.exhRate)
  }

  const handleInoutINR = (e) => {
    setInputINR(e.target.value)
    setInputETH((e.target.value / exhRate).toFixed(18))
  }

  const handleDeposit = async () => {
    setResponse(null)
    const deposit = await depositEth(inputETH.toString())
    setInputETH(null)
    setInputINR(null)
    setResponse(deposit.status)
  }

  const handleWithdraw = async () => {
    if (inputINR > balanceINR) {
      setResponse('Insufficient Balance')
    } else {
      setResponse(null)
      const withdraw = await withdrawEth(inputETH.toString())
      setInputETH(null)
      setInputINR(null)
      setResponse(withdraw.status)
    }
  }

  useEffect(() => {
    checkBalance()
  }, [onAccoutChange])

  return (
    <>
      <div className="balance-card">
        <h1>
          Your Balance
          <IoIosRefresh className="refresh-icon" onClick={checkBalance} />
        </h1>
        <h3 className="balance-inr">{parseFloat(balanceINR).toFixed(2)} INR</h3>
        <h3 className="balance-eth">{parseFloat(balanceETH).toFixed(4)} ETH</h3>
        {!showDeposit && !showWithdraw && (
          <div className="btn-grp">
            <Button
              className="deposit-btn"
              variant="success"
              onClick={handleShowDeposit}
            >
              Deposit
            </Button>
            <Button
              className="withdraw-btn"
              variant="warning"
              onClick={handleShowWithdraw}
            >
              Withdraw
            </Button>
          </div>
        )}
        {showDeposit || showWithdraw ? (
          <>
            <Container>
              <Row className="justify-content-center ">
                <Col md="6">
                  <InputGroup className="amount-input">
                    <FormControl
                      placeholder="Enter Amount in INR"
                      type="number"
                      value={inputINR > 0 ? inputINR : ''}
                      onChange={handleInoutINR}
                    />
                    <InputGroup.Text>INR</InputGroup.Text>
                  </InputGroup>
                </Col>
              </Row>
              <Row className="justify-content-center">
                <Col md="6">
                  <InputGroup className="amount-input">
                    <FormControl
                      placeholder="ETH Equivalent"
                      type="number"
                      value={inputETH > 0 ? inputETH : ''}
                      readOnly
                    />
                    <InputGroup.Text>ETH</InputGroup.Text>
                  </InputGroup>
                </Col>
              </Row>
            </Container>
            <div className="btn-grp">
              <Button
                className="deposit-btn"
                variant="success"
                onClick={showDeposit ? handleDeposit : handleWithdraw}
              >
                {showDeposit ? 'Deposit' : 'Withdraw'}
              </Button>
              <Button
                className="withdraw-btn"
                variant="info"
                onClick={handleClose}
              >
                Close
              </Button>
            </div>
            {response && (
              <Container>
                <Row className="justify-content-center">
                  <Col md="6">
                    <Alert variant="info">{response}</Alert>
                  </Col>
                </Row>
              </Container>
            )}
          </>
        ) : null}
      </div>
    </>
  )
}

export default BankInfo

This is the component that shows the account balance in INR and ETH and handles deposit and withdrawal. A bunch of state variables are used for smooth functioning of UI.

ConnectBtn.jsx

import { useState, useEffect } from 'react'
import { Button } from 'react-bootstrap'

import { connectWallet, getWalletStatus } from '../utils/walletFunctions'

export const ConnectBtn = ({ setStatus, setConnected, setWallet }) => {
  const [walletAddress, setWalletAddress] = useState('')

  const handleConnect = async () => {
    const walletResponse = await connectWallet()
    setStatus(walletResponse.status)
    setConnected(walletResponse.connected)
    setWalletAddress(walletResponse.address)
    setWallet(walletResponse.address)
  }

  useEffect(() => {
    const checkWalletStatus = async () => {
      const walletResponse = await getWalletStatus()
      setStatus(walletResponse.status)
      setConnected(walletResponse.connected)
      setWalletAddress(walletResponse.address)
      setWallet(walletResponse.address)
    }

    const walletListener = () => {
      if (window.ethereum) {
        window.ethereum.on('accountsChanged', (accounts) => {
          checkWalletStatus()
        })
      }
    }

    checkWalletStatus()
    walletListener()
  }, [setConnected, setStatus, setWallet])

  return (
    <div className="connect-btn">
      <Button variant="primary" onClick={handleConnect}>
        {walletAddress.length === 0
          ? 'Connet Wallet'
          : 'Connected: ' +
            String(walletAddress).substring(0, 6) +
            '...' +
            String(walletAddress).substring(38)}
      </Button>
    </div>
  )
}

export default ConnectBtn

ConnectBtn component displays the status of wallet connection to the app and also used to request connection when not connected.

Footer.jsx

import { IoIosInformationCircleOutline } from 'react-icons/io'

const Footer = () => {
  return (
    <footer className="footer">
      <p className="footer-text">
        <IoIosInformationCircleOutline className="info-icon" /> This application
        in running on rinkeby test network. Please only use test Ethers.
      </p>
    </footer>
  )
}

export default Footer

A simple footer component to warn the user to only use test ethers.

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.amount-input {
  margin: 10px;
}

.balance-card {
  margin-top: 20px;
  text-align: center;
}

.balance-eth {
  color: rgb(19, 202, 28);
}

.balance-inr {
  color: rgb(25, 214, 214);
}

.btn-grp {
  margin: 20px;
}

.deposit-btn {
  margin-right: 20px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 5px;
  background-color: teal;
  color: white;
  text-align: center;
}

.footer-text {
  font-size: large;
}

.info-icon {
  font-size: x-large;
}

.withdraw-btn {
  margin-left: 20px;
}

.connect-btn {
  text-align: center;
  margin: 20px;
}

.refresh-icon {
  margin-left: 10px;
  font-size: 28px;
  cursor: pointer;
}

.status-box {
  margin-top: 20px;
  text-align: center;
}

.status-box-null {
  display: none;
}

Styling is nothing fancy, just to align all the components properly.

Adding all components to App.js

App.js

import { useState } from 'react'

import NavBar from './components/NavBar'
import ConnectBtn from './components/ConnectBtn'
import StatusBox from './components/StatusBox'
import BankInfo from './components/BankInfo'
import Footer from './components/Footer'

function App() {
  const [status, setStatus] = useState('')
  const [connected, setConnected] = useState()
  const [wallet, setWallet] = useState()
  return (
    <>
      <NavBar />
      <ConnectBtn
        setStatus={setStatus}
        setConnected={setConnected}
        setWallet={setWallet}
      />
      <StatusBox status={status} />
      {connected && <BankInfo onAccoutChange={wallet} />}
      <Footer />
    </>
  )
}

export default App

Add all the components to App.js in order to render them in our app.

This wraps up our react app. Run the following command to run it on localhost.

npm start

If things doesn't work as expected, checkout github repo here for reference.

In the next tutorial, we'll see how to host this app on heroku. Click here.

Creating a project & Deploying smart contract to test network: Part (2/4)

Wasim — Sun, 28 Nov 2021 07:55:40 +0000

In this part of the tutorial we'll create a local node project with hardhat, write our smart contract in it, compile our smart contract and deployed our smart contract to a test network.

This project is hosted here.
Link to Github Repo of the project here. This will serve as a reference for you, if at some point you are not able to follow the tutorial.

For this project we'll using some tools and services such as

Hardhat
Alchemy
Metamask
Rinkeby Test Network

What is hardhat?

Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software. It helps developers manage and automate the recurring tasks that are inherent to the process of building smart contracts and dApps, as well as easily introducing more functionality around this workflow.

What is alchemy?

Alchemy is a blockchain developer platform focused on making blockchain development easy. We've built a suite of developer tools, enhanced APIs, and superior node infrastructure to make building and running blockchain applications seamless.

What is Metamask?

Metamask is a software cryptocurrency wallet used to interact with the Ethereum blockchain. It allows users to access their Ethereum wallet through a browser extension or mobile app, which can then be used to interact with decentralized applications.

What is a Test Network(testnet)?

These are networks used by protocol developers or smart contract developers to test both protocol upgrades as well as potential smart contracts in a production-like environment before deployment to Mainnet.

There are multiple testnets available like Görli, Kovan, Rinkeby and Ropsten. For this project we'll be using Rinkeby.

Creating a Node Project.

mkdir SimpleBank
cd SimpleBank
npm init --yes
npm install --save-dev hardhat

This will create a directory called SimpleBank (name of the project) and initialize it as a node project and install hardhat.

npx hardhat

Select Create an empty hardhat.config.js when prompted. This will create an empty hardhat config file.

Installing plugins and dependencies

npm install --save-dev @nomiclabs/hardhat-ethers ethers @nomiclabs/hardhat-waffle ethereum-waffle chai

These plugins will allow us to interact with ethereum and test our contract.

npm install dotenv

We'll use dotenv to store our API Key and Private Key as environment variables.

Git

git init

Initialize a git reop, if you plan on using version control and uploading it to github, which will come handy at the end when we host our project.

Make sure you make regular commits when you see fit and push it to the remote server. Here is how to for the same.

For .gitignore configuration refer repo.

Writing and Compiling Smart Contract.

Create a directory called contracts and create a file inside it called Bank.sol. This is where smart contract goes.

// SPDX-License-Identifier: MIT
pragma solidity ^0.7.0;

contract Bank {

    // Mapping of user address to their balance
    mapping(address => uint256) private balance;


    // Deposit function (payable)
    function deposit() public payable {
        require(msg.value > 0);

        if (balance[msg.sender] > 0) {
            balance[msg.sender] = balance[msg.sender] + msg.value;
        }else{
            balance[msg.sender] = msg.value;
        }
    }

    // Withdraw function (payable)
    function withdraw(uint256 amount) public payable {
        address payable client = msg.sender;
        require(balance[msg.sender] >= amount);
        client.transfer(amount);
        balance[msg.sender] = balance[msg.sender] - amount;
    }

    // Check balance function (view)
    function getBalance() public view returns(uint256){
        return (balance[msg.sender]);
    }
}

Explanation for this contract is provided in part 1.

Now, add the following to hardhat.config.js

require("@nomiclabs/hardhat-waffle");

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.7.3",
};

In order to compile the smart contract, run

npx hardhat compile

If successful, you'll get an output like this

Compiling 1 file with 0.7.3
Compilation finished successfully

Deploying contract to test network

Before we are able to deploy our contract to a test network, we need to setup certain things.

Setup

Install Metamask to your browser. Follow their instructions to setup an account.
Go to rinkeby faucet and follow the instructions to receive some test ethers to your account.
Signup on Alchemy.
Create a new app with configurations as shown below.

Setting up `.env` file

Create a .env file in the root directory and add the following

ALCHEMY_API_URL = <YOUR_API_URL>
RINKEBY_PRIVATE_KEY = <YOUR_PRIVATE_KEY>

You can get the alchemy API URL from the app you created earlier, copy the http version.

And you can get your private key from metamask as shown here. This is needed to deploy our contract to the test network.

Private Key is a very sensitive information, so make sure not to reveal it to anyone. Do not forget to add .env to .gitignore file if you have a remote repository for the project on github.

Update `hardhat.config.js`

require('dotenv').config()
require('@nomiclabs/hardhat-waffle')

/**
 * @type import('hardhat/config').HardhatUserConfig
 */

const ALCHEMY_API_URL = process.env.ALCHEMY_API_URL
const RINKEBY_PRIVATE_KEY = process.env.RINKEBY_PRIVATE_KEY

module.exports = {
  solidity: '0.7.3',
  networks: {
    rinkeby: {
      url: ALCHEMY_API_URL,
      accounts: [`0x${RINKEBY_PRIVATE_KEY}`],
    },
  },
}

Writing script for deployment

Create a folder called scripts and inside it add a file deploy.js.

const { ethers, artifacts } = require('hardhat')

async function main() {
  const [deployer] = await ethers.getSigners()

  console.log('Deploying contracts with the account: ', deployer.address)

  const Bank = await ethers.getContractFactory('Bank')
  const bank = await Bank.deploy()

  console.log('Bank address: ', bank.address)

}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error)
    process.exit(1)
  })

This script will be used for deploying our contract. Here is a quick explanation.

const [deployer] = await ethers.getSigners()

A Signer in ethers.js is an object that represents an Ethereum account. It's used to send transactions to contracts and other accounts. Here we're getting a list of the accounts in the node we're connected to and only keeping the first one.

const Bank = await ethers.getContractFactory('Bank')

A ContractFactory in ethers.js is an abstraction used to deploy new smart contracts, so Bank here is a factory for instances of our bank contract.

const bank = await Bank.deploy()

Calling deploy() on aContractFactory will start the deployment, and return a Promise that resolves to a Contract.

Deploying contract

Now, we are all set to deploy our contract to rinkeby testnet.

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

If the deployment was successful, you'll get something similar

Deploying contracts with the account:  0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
Bank address:  0x5FbDB2315678afecb367f032d93F642f64180aa3

Before running this command, ensure that you have received your test ethers to your account or else it will though an error saying insufficient fund.

We have successfully deployed our smart contract to rinkeby test network which your can verify by going to etherscan and searching for your deployed contract address.

In the next part, we'll build an frontend react application for our end users. Click here.

Intro & Writing a smart contract: Part (1/4)

Wasim — Sun, 28 Nov 2021 07:54:09 +0000

What project are we building?

We are building a simple banking application that lets people deposit and withdraw ethers using a crypto wallet.

The objective of this project is to cover the basic concepts of developing a full stack decentralized application on the blockchain, which includes

Writing a smart contract.
Deploying the smart contract to a test network.
Creating a frontend react application.
Finally, hosting the application on heroku.

Why this project & blog?

A while ago, I wanted to build a similar project, that's when I noticed a lack of resources or a clear guide for the process. It took some digging and trial & errors to figure it out. So I though through this blog series I could help out someone understand these concepts a little easily.

This project is hosted here.
Link to Github Repo of the project here. This will serve as a reference for you, if at some point you are not able to follow the tutorial.

Writing Smart Contract

What Is A Smart Contract?

A "smart contract" is simply a program that runs on the Ethereum blockchain. It's a collection of code (its functions) and data (its state) that resides at a specific address on the Ethereum blockchain.

Smart contracts are popularly writing in a language called Solidity. You can learn more about the same here.

Smart contracts can be written and tested on Remix which is a open source tool that helps you write Solidity contracts straight from the browser.

Bank.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.7.0;

contract Bank {

    // Mapping of user address to their balance
    mapping(address => uint256) private balance;


    // Deposit function (payable)
    function deposit() public payable {
        require(msg.value > 0);

        if (balance[msg.sender] > 0) {
            balance[msg.sender] = balance[msg.sender] + msg.value;
        }else{
            balance[msg.sender] = msg.value;
        }
    }

    // Withdraw function (payable)
    function withdraw(uint256 amount) public payable {
        address payable client = msg.sender;
        require(balance[msg.sender] >= amount);
        client.transfer(amount);
        balance[msg.sender] = balance[msg.sender] - amount;
    }

    // Check balance function (view)
    function getBalance() public view returns(uint256){
        return (balance[msg.sender]);
    }
}

Let's understand what all these data structures and functions are for and what do they do.

mapping(address => uint256) private balance;

Mapping balance is used to keep track of the balance of different users by their address.

function deposit() public payable {
        require(msg.value > 0);

        if (balance[msg.sender] > 0) {
            balance[msg.sender] = balance[msg.sender] + msg.value;
        }else{
            balance[msg.sender] = msg.value;
        }
    }

deposit function as the name suggests, is a function used to deposit amount. It checks first if the value (the amount to be deposited) is greater than 0. If affirmative, it updates the users balance.

function withdraw(uint256 amount) public payable {
        address payable client = msg.sender;
        require(balance[msg.sender] >= amount);
        client.transfer(amount);
        balance[msg.sender] = balance[msg.sender] - amount;
    }

withdraw function is for users to withdraw their money, it checks if the user has sufficient funds, if yes the amount is transferred to the user's wallet.

 function getBalance() public view returns(uint256){
        return (balance[msg.sender]);
    }

getBalance function is used to get the account balance of the caller.

This smart contract can be compiled, tested and deployed on Remix IDE. Here is the documentation for reference.

In the next part, we'll see how to create a local project and deploy our smart contract to a test network. Click here.

DEV Community: Wasim

Deploying DApp to Heroku: Part (4/4)

Signup on Heroku and create new app.

Adding Buildpacks

Setting Config Vars

Deploy

Building a frontend react app for Dapp from scratch: Part (3/4)

Creating a react app

Setup

index.js

App.js

Getting artifacts

deploy.js

Utility Functions

walletFunctions.js

bankFunctions.js

Components & CSS

NavBar.jsx

StatusBox.jsx

BankInfo.jsx

ConnectBtn.jsx

Footer.jsx

index.css

Adding all components to App.js

App.js

Creating a project & Deploying smart contract to test network: Part (2/4)

What is hardhat?

What is alchemy?

What is Metamask?

What is a Test Network(testnet)?

Creating a Node Project.

Installing plugins and dependencies

Git

Writing and Compiling Smart Contract.

Deploying contract to test network

Setup

Setting up .env file

Update hardhat.config.js

Writing script for deployment

Deploying contract

Intro & Writing a smart contract: Part (1/4)

What project are we building?

Why this project & blog?

Writing Smart Contract

What Is A Smart Contract?

Bank.sol

Setting up `.env` file

Update `hardhat.config.js`