[Academy] Lesson 5 failed to build NFT frontend

Hi I want to build the web3 frontend for the TierNFT. If I run

npm run dev

I get the following:

Server Error
TypeError: Cannot read property ‘polygonMumbai’ of undefined

My _app.js:

import '../styles/globals.css'
import '@rainbow-me/rainbowkit/styles.css';
import {
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { useEffect, useState } from 'react';

const { chains, provider } = configureChains(
  [chain.polygonMumbai],
  [
    alchemyProvider({ apiKey: process.env.API_KEY }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App',
  chains
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})

function MyApp({ Component, pageProps }) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider >
    </WagmiConfig >
  );
};

export default MyApp

and my index.js

import Head from 'next/head';
import Image from 'next/image';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useAccount, useContractRead, useContractWrite } from 'wagmi';
import TierABI from '../../artifacts/contracts/TierNFT.sol/TierNFT.json';
import styles from '../styles/Home.module.css';
import { ethers } from 'ethers';
import { useEffect, useState } from 'react';

export default function Home() {
  const CONTRACT_ADDRESS = '0xD0d6a02BA2dE0e7770e179985fEfB0Cac0870cd5';

  const { isConnected } = useAccount();

  const [isUserConnected, setIsUserConnected] = useState(false);
  const [latestNFTMinted, setLatestNFTMinted] = useState(0);
  const [modalShow, setModalShow] = useState(false);
  const [isMinting, setIsMinting] = useState(false);

  const {
    data: mintData,
    writeAsync: mint,
    isLoading: isMintLoading,
  } = useContractWrite({
    addressOrName: CONTRACT_ADDRESS,
    contractInterface: TierABI.abi,
    functionName: "mint",
  });

  useEffect(() => {
    try {
      setIsUserConnected(isConnected);
    } catch (error) {
      console.log("Error connecting to user", error.message);
    }
  }, [isConnected]);

  const mintToken = async (e) => {
    try {
      let mintTxn = await mint({
        recklesslySetUnpreparedOverrides: {
          value: ethers.utils.parseEther(e.target.value),
        }
      });
      await mintTxn.wait();
      console.log("This is the mint data", mintData);
    } catch (error) {
      console.log("Error minting NFT", error.message);
    }
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>NFT Minter</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <header style={header}>
        <h1>TierNFTs</h1>
        <ConnectButton />
      </header>
      {isUserConnected ?
        <main className={styles.main}>
          <div style={NFTFlex}>
            <div style={NFTCard}>
              Tier 0
              <Image
                src='/nfts/0_basic.svg'
                width='200px'
                height='200px' />
              <button
                value='0.01'
                onClick={(e) => mintToken(e)}
                style={NFTMint}
                disabled={isMintLoading}>
                Mint
              </button>
            </div>
            <div style={NFTCard} >
              Tier 1
              <Image
                src='/nfts/1_medium.svg'
                width='200px'
                height='200px' />
              <button
                value='0.02'
                onClick={(e) => mintToken(e)}
                style={NFTMint}
                disabled={isMintLoading}>
                Mint
              </button>
            </div>
            <div style={NFTCard} >
              Tier 2
              <Image
                src='/nfts/2_premium.svg'
                width='200px'
                height='200px' />
              <button
                value='0.05'
                onClick={(e) => mintToken(e)}
                style={NFTMint}
                disabled={isMintLoading}>
                Mint
              </button>
            </div>
          </div>
        </main>
        :
        <main className={styles.main}>
          <div>Please connect your wallet.</div>
        </main>
      }
    </div>
  )
}

const header = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between'
}

const NFTFlex = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-evenly',
  gap: '50px',
}

const NFTCard = {
  display: 'flex',
  flexDirection: 'column',
  border: '2px solid white',
  borderRadius: '10px',
  padding: '20px',
  alignItems: 'center',
  gap: '10px',
  fontWeight: 'bold',
}

const NFTMint = {
  fontWeight: '700',
  padding: '5px 20px',
  border: '2px solid white',
  color: 'white',
  backgroundColor: 'black',
  borderRadius: '5px',
  cursor: 'pointer',
}

const modal = {
  position: 'fixed',
  left: '0',
  top: '0',
  right: '0',
  bottom: '0',
  backgroundColor: 'rgba(0, 0, 0, 0.8)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center',
  zIndex: '1',
}

const modalContent = {
  backgroundColor: '#fff',
  padding: '10px 30px',
  borderRadius: '16px',
  color: '#000'
}

const modalBody = {
  padding: '20px',
  borderTop: '1px solid #eee',
  borderBottom: '1px solid #eee',
}

const modalFooter = {
  display: 'flex',
  flexDirection: 'column',
  gap: '10px',
  padding: '20px',
  justifyContent: 'space-evenly'
}

const modalButton = {
  padding: '10px 20px',
  backgroundColor: '#fff',
  color: '#666',
  border: '0',
  borderRadius: '10px',
  fontSize: '18px',
  fontWeight: '700',
  boxShadow: '0 0.2em 0.4em 0 rgba(0, 0, 0, 0.2), 0 0.3em 1em 0 rgba(0, 0, 0, 0.19)',
}
1 Like

Could you please post your package.json?

Also what framework are you using for this build? React?

Thanks for your fast reply. I’m using NextJS like in

My package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.1",
    "@rainbow-me/rainbowkit": "^0.8.1",
    "eslint": "8.30.0",
    "eslint-config-next": "13.1.1",
    "ethers": "^5.7.2",
    "next": "13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "wagmi": "^0.10.1"
  }
}

Try this. Apparently WAGMI changed how we import

import {
  polygonMumbai,
} from "wagmi/chains";

const { chains, provider } = configureChains(
  [polygonMumbai],
  [
    alchemyProvider({ apiKey: process.env.API_KEY }),
    publicProvider()
  ]
);
2 Likes

Thanks, that worked. But I have another issue now, if I click “Mint” with wallet connected, it stays like this:

No error message in console