basic minting

components/minter.tsx

@@ -0,0 +1,88 @@
+import ReturnWagmi from "@hooks/mounted";
+import { BLOCKTRACKER, CHAIN_ID, CONTRACT_ADDRESS } from "@lib/constants";
+import { Base1155__factory } from "@lib/generated";
+import { useContractWrite, useNetwork, usePrepareContractWrite } from "wagmi";
+import Button from "./button";
+
+export const Minter = () => {
+  const tokenId = 0;
+  const quantity = 1;
+
+  const { isConnected, openConnectModal, openChainModal } = ReturnWagmi();
+  const chain = useNetwork().chain?.id;
+  const chainIsValid = chain === CHAIN_ID;
+
+  const { config } = usePrepareContractWrite({
+    addressOrName: CONTRACT_ADDRESS,
+    contractInterface: Base1155__factory.abi,
+    functionName: "mint",
+    args: [tokenId, quantity],
+    onSettled(data, error) {
+      console.log("Settled", { data, error });
+    },
+  });
+
+  const { data, isLoading, isSuccess, write, error, status, writeAsync } =
+    useContractWrite(config);
+
+  const link = `${BLOCKTRACKER}${data?.hash}`;
+
+  return (
+    <div className="m-auto">
+      {!isConnected && openConnectModal && (
+        <div>
+          <h2>Connect Wallet To Claim Trophy</h2>
+          <Button
+            text="Connect Wallet"
+            type="submit"
+            onClick={openConnectModal}
+          />
+        </div>
+      )}
+
+      {!chainIsValid && isConnected && !isLoading && openChainModal && (
+        <div>
+          <h2 className="mt-10 text-xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-2xl lg:mt-8 xl:text-2xl mb-8">
+            Switch Chain To Claim Trophy
+          </h2>
+          <Button text="Switch Chain" type="submit" onClick={openChainModal} />
+        </div>
+      )}
+
+      {isConnected && chainIsValid && (
+        <div>
+          {error && error.message !== "User rejected request" && (
+            <div className="mb-6">Error: {JSON.stringify(error.message)}</div>
+          )}
+
+          {!isLoading && isConnected && (
+            <>
+              <h2>Claim NFT</h2>
+
+              <button
+                disabled={!write}
+                onClick={async () => await writeAsync?.()}
+              >
+                Claim
+                <br />
+                {status.toString()}
+              </button>
+            </>
+          )}
+        </div>
+      )}
+
+      {isLoading && isConnected && (
+        <div>
+          <h2>Minting NFT...</h2>
+        </div>
+      )}
+
+      {isSuccess && (
+        <div>
+          <a href={link}>View Transaction here</a>
+        </div>
+      )}
+    </div>
+  );
+};

hooks/mounted.tsx

@@ -1,4 +1,4 @@
-import { useConnectModal } from "@rainbow-me/rainbowkit";
+import { useChainModal, useConnectModal } from "@rainbow-me/rainbowkit";
 import { useEffect, useState } from "react";
 import { useAccount } from "wagmi";
 
@@ -10,11 +10,13 @@ export default function ReturnWagmi() {
   }, []);
 
   const { openConnectModal } = useConnectModal();
+  const { openChainModal } = useChainModal();
   const { address, isConnected } = useAccount();
 
   return {
     address: mounted && address,
     isConnected: mounted && isConnected,
     openConnectModal: mounted && openConnectModal,
+    openChainModal: mounted && openChainModal,
   };
 }

lib/constants.ts

@@ -3,7 +3,8 @@ import { Base1155__factory } from "./generated";
 
 export const CONTRACT_ADDRESS = "0x4665cab32fa90686bda9d02f0ee69ec24411748b";
 
-export const BLOCKTRACKER = "https://etherscan.io";
+export const CHAIN_ID = 5; //goerli
+export const BLOCKTRACKER = "https://goerli.etherscan.io/tx/"; //goerli
 export const RPC_ID = "9b52e43b93e14ee983c8d25f23b90f21";
 export const RPC = `https://goerli.infura.io/v3/${RPC_ID}`;
 export const MARKETPLACE_LINK = "https://opensea.io/assets/ethereum/";

pages/_app.tsx

@@ -12,7 +12,7 @@ import { publicProvider } from "wagmi/providers/public";
 import { infuraProvider } from "wagmi/providers/infura";
 
 const { chains, provider } = configureChains(
-  [chain.mainnet],
+  [chain.mainnet, chain.goerli],
   [infuraProvider({ apiKey: process.env.INFURA_KEY }), publicProvider()]
 );
 

pages/index.tsx

@@ -4,7 +4,8 @@ import Head from "next/head";
 import { useEffect, useState } from "react";
 import Navbar from "../components/navbar";
 
-import { Hero } from "./hero";
+import { Hero } from "@components/hero";
+import { Minter } from "@components/minter";
 
 const Home: NextPage = () => {
   return (
@@ -18,7 +19,7 @@ const Home: NextPage = () => {
       <Navbar />
 
       <div className="w-full h-[calc(100vh-80px)] text-center flex flex-col">
-        <Hero />
+        <Minter />
       </div>
 
       <Footer />