7: Nextjs Frontend Application

Proposed routes:

The important stuff

I basically skipped through most of the work... the important parts are understanding how to inject web3:

import Web3 from "web3"

let web3

if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
  // We are in the browser and metamask is running.
  window.ethereum.request({ method: "eth_requestAccounts" })
  web3 = new Web3(window.ethereum)
} else {
  // We are on the server *OR* the user is not running metamask
  const provider = new Web3.providers.HttpProvider(
    process.env.NEXT_PUBLIC_INFURA_URL
  )
  web3 = new Web3(provider)
}

export default web3
copy

We also have a factory.js file that is a helper to get our contract instance:

import web3 from "./web3"
import CampaignFactory from "./build/CampaignFactory.json"

const instance = new web3.eth.Contract(
  JSON.parse(CampaignFactory.interface),
  process.env.NEXT_PUBLIC_CONTRACT_ADDRESS
)

export default instance
copy