setup minting

src/App.js

@@ -1,9 +1,14 @@
 import { useState } from 'react';
-import { WagmiConfig, createClient, useAccount, useConnect, useDisconnect, useContractReads, configureChains } from 'wagmi';
+import { 
+  WagmiConfig, createClient, useAccount, 
+  useConnect, useDisconnect, useContractReads, 
+  configureChains, useContractWrite, usePrepareContractWrite,
+  useWaitForTransaction
+} from 'wagmi';
 import { localhost, goerli } from 'wagmi/chains';
 import { publicProvider } from 'wagmi/providers/public';
 import { InjectedConnector } from 'wagmi/connectors/injected';
-import { ethers, getDefaultProvider } from 'ethers';
+import { ethers, BigNumber } from 'ethers';
 import ABI from './abi.json';
 import 'bulma/css/bulma.min.css';
 
@@ -36,12 +41,13 @@ function Contract() {
     phraseSet: false,
     mintAmount: 1,
     balance: 0,
-    hash: ''
+    hash: '',
+    txPending: false
   });
   function handleStateChange(obj) {
     setOptions(preState => ({...preState , ...obj}));
   }
-  const { data, isError, isLoading } = useContractReads({
+  useContractReads({
     contracts: [
       {..._contract, functionName: 'totalSupply'},
       {..._contract, functionName: 'max'},
@@ -49,7 +55,7 @@ function Contract() {
       {..._contract, functionName: 'winners'},
       {..._contract, functionName: 'winningAmount'},
       {..._contract, functionName: 'phraseSet'},
-      {..._contract, functionName: 'balanceOf'},
+      {..._contract, functionName: 'balanceOf', args: [address]},
       {..._contract, functionName: 'winningPhraseHash'},
     ],
     watch: true,
@@ -61,27 +67,55 @@ function Contract() {
           price: Number(data[2]),
           winners: Number(data[3]),
           winningAmount: Number(data[4]),
-          phraseSet: Number(data[5]),
+          phraseSet: data[5],
           balance: Number(data[6]),
           hash: data[7].toString()
       });
     }
   });
- 
-  if (isConnected)
+  const mintPrepare = usePrepareContractWrite({
+    address: contractAddress,
+    abi: ABI,
+    enabled: isConnected && options.mintAmount > 0,
+    functionName: 'mint',
+    args: [options.mintAmount],
+    overrides: {
+        from: address,
+        value: BigNumber.from((options.price * options.mintAmount).toString())
+    }
+  });
+  const mintWrite = useContractWrite({
+      ...mintPrepare.config,
+      onError(data) {
+          // if (data.message.startsWith('user rejected transaction')) NotificationManager.info(`tx cancelled`, 'ok', 4000);
+          mintWrite.reset();
+      }
+  });
+  useWaitForTransaction({
+    hash: mintWrite.data?.hash,
+    enabled: mintWrite.status === 'success',
+    onSuccess() {
+        handleStateChange({txPending: false});
+        mintWrite.reset();
+    }
+  });
+  if (isConnected && options.phraseSet)
     return (
       <>
         <button className="button" style={{marginBottom: '1em'}} onClick={() => disconnect()}>Disconnect Wallet</button>
         <div className="block">
           <h1 className="heading">Price: {ethers.utils.formatEther((options.price * options.mintAmount).toString())} ETH</h1>
-          <div class="field has-addons">
-            <div class="control">
-              <input class="input" type="text" placeholder="Mint amount" value={options.mintAmount} onChange={(v) => {
+          <div className="field has-addons">
+            <div className="control">
+              <input className="input" type="text" placeholder="Mint amount" value={options.mintAmount} onChange={(v) => {
                 if (v.target.value >= 0) handleStateChange({mintAmount: Number(v.target.value)})}
               }></input>
             </div>
-            <div class="control">
-              <a class="button is-info">
+            <div className="control">
+              <a className={"button is-info " + ((options.txPending) && "is-loading")} disabled={mintPrepare.status == 'error'} onClick={() => {
+                mintWrite.write?.();
+                handleStateChange({txPending: true});
+              }}>
                 Mint
               </a>
             </div>
@@ -93,11 +127,17 @@ function Contract() {
           <h1 className="heading">Minted {options.totalSupply} / {options.max}</h1>
           <progress className="progress is-primary" value={options.totalSupply} max={options.max}></progress>
         </div>
-        <div class="notification is-info" style={{marginTop: '2em'}}>
+        <div className="notification is-info" style={{marginTop: '2em'}}>
           The secret phrase containing the pre-determined winners is: <strong>{options.hash}</strong>
         </div>
       </>
     )
+  if (isConnected && !options.phraseSet)
+    return (
+      <>
+        <h3 style={{fontSize: '2em'}}>Not minting yet. Come back later.</h3>
+      </>
+    )
   return <button className="button is-dark" onClick={() => connect()}>Connect Wallet</button>
 }
 
@@ -111,7 +151,8 @@ function App() {
               A Few Of Us Are Going To Make It.
             </p>
             <p className="subtitle">
-              An NFT Lottery. Mint a token for your chance to win 1 ETH. 10 tokens are pre-determined to win.
+              An NFT Lottery. 10 tokens are pre-determined to win.<br />
+              Mint one for your chance to win 1 ETH!
             </p>
             <Contract />
           </div>