add loading icons

src/App.js

@@ -37,6 +37,7 @@ function Contract() {
   const { connect } = useConnect({connector});
   const { disconnect } = useDisconnect();
   const _contract = {address: contractAddress, abi: ABI}
+  const [isLoading, setIsLoading] = useState(0);
   const [options, setOptions] = useState({ 
     totalSupply: null,
     max: null,
@@ -226,7 +227,10 @@ function Contract() {
       <>
         <button className="button" style={{marginBottom: '1em'}} onClick={() => disconnect()}>Disconnect Wallet</button>
         {options.totalSupply === options.max && options.tokensSet === true && (
-          <button className="button is-info" style={{marginBottom: '1em', marginLeft: '1em'}} onClick={async () => await checkClaimable()}>Check Claimable Tokens</button>
+          <button className={"button is-info " + (isLoading === 1 && "is-loading")} style={{marginBottom: '1em', marginLeft: '1em'}} onClick={async () => {
+            setIsLoading(1);
+            await checkClaimable().then(() => setIsLoading(0));
+          }}>Check Claimable Tokens</button>
         )}
         {options.totalSupply === options.max && options.tokensSet === false && (
           <button className="button is-warning" style={{marginBottom: '1em', marginLeft: '1em'}} disabled>Tokens not entered yet. Go degen.</button>
@@ -235,10 +239,11 @@ function Contract() {
         {options.claimableTokens !== '' && (
           <div className="buttons">
             {JSON.parse(options.claimableTokens).map((tokenId, idx) => (
-              <button key={idx} className="button is-success" style={{marginBottom: '1em', marginRight: '1em'}} onClick={async () => {
+              <button key={idx} className={"button is-success " + (isLoading === 1 && "is-loading")} style={{marginBottom: '1em', marginRight: '1em'}} onClick={async () => {
+                setIsLoading(1);
                 await claimToken(tokenId).then(async d => {
-                  await checkClaimable();
-                });
+                  await checkClaimable().then(() => setIsLoading(0));
+                }).catch(() => setIsLoading(0));
               }}>
                 Claim Token {tokenId}
               </button>
@@ -249,25 +254,25 @@ function Contract() {
         <hr></hr>
 
         {options.totalSupply < options.max && (
-        <div className="block">
-          <h1 className="heading">Price: {ethers.utils.formatEther((options.price * options.mintAmount).toString())} ETH</h1>
-          <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 className="control">
-              <button className={"button is-info " + ((options.txPending) && "is-loading")} disabled={mintPrepare.status === 'error'} onClick={() => {
-                mintWrite.write?.();
-                handleStateChange({txPending: true});
-              }}>
-                Mint
-              </button>
+          <div className="block">
+            <h1 className="heading">Price: {ethers.utils.formatEther((options.price * options.mintAmount).toString())} ETH</h1>
+            <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 className="control">
+                <button className={"button is-info " + ((options.txPending) && "is-loading")} disabled={mintPrepare.status === 'error'} onClick={() => {
+                  mintWrite.write?.();
+                  handleStateChange({txPending: true});
+                }}>
+                  Mint
+                </button>
+              </div>
             </div>
+            <h1 className="heading"><strong>You'll have a ~{((options.balance + options.mintAmount) / options.max * 100).toFixed(2)}% chance to win 1 ETH</strong></h1>
           </div>
-          <h1 className="heading"><strong>You'll have a ~{((options.balance + options.mintAmount) / options.max * 100).toFixed(2)}% chance to win 1 ETH</strong></h1>
-        </div>
         )}
         <div className="block">
           <h1 className="heading">Connected to {address.slice(0,6) + '...' + address.slice(-4)} :: <strong>You own {options.balance} tokens</strong></h1>
@@ -290,7 +295,7 @@ function Contract() {
         )}
         {options.totalSupply === options.max && (
           <div className="notification is-success">
-            All lottery tokens have been sold! ETH claims will be made available to winners approximately 48 hours after mint out.
+            All lottery tokens have been sold! Ether claims will be made available to winners approximately 48 hours after mint out.
           </div>
         )}
         <div className="notification is-info">