save changes with everything working

src/App.js

@@ -8,7 +8,7 @@ import {
 import { localhost, goerli } from 'wagmi/chains';
 import { publicProvider } from 'wagmi/providers/public';
 import { InjectedConnector } from 'wagmi/connectors/injected';
-import { readContract } from '@wagmi/core'
+import { readContract, writeContract, prepareWriteContract, waitForTransaction } from '@wagmi/core'
 import { ethers, BigNumber } from 'ethers';
 import Noty from 'noty';
 
@@ -32,17 +32,6 @@ const client = createClient({
   provider
 });
 
-function GetClaimable(contract, tokenId) {
-  useContractRead({
-    ...contract,
-    functionName: 'winningTokens',
-    args: [tokenId],
-    onSuccess(data) {
-      console.log(data);
-    }
-  });
-}
-
 function Contract() {
   const { address, isConnected } = useAccount();
   const { connect } = useConnect({connector});
@@ -96,7 +85,7 @@ function Contract() {
   });
   useContractRead({
     ..._contract,
-    enabled: options.totalSupply > 0 && options.totalSupply == options.max && options.tokensSet,
+    enabled: options.totalSupply > 0 && options.totalSupply === options.max && options.tokensSet,
     functionName: 'getWinningTokens',
     watch: true,
     cacheTime: 8000,
@@ -124,6 +113,7 @@ function Contract() {
         type: 'error',
         text: `Tx rejected`,
         theme: 'relax',
+        layout: 'topCenter',
         timeout: 3000
       }).show();
       mintWrite.reset();
@@ -134,6 +124,7 @@ function Contract() {
         type: 'info',
         text: `Tx ${data.hash} sent...pending confirmation`,
         theme: 'relax',
+        layout: 'topCenter',
         timeout: 3000
       }).show();
     }
@@ -147,6 +138,7 @@ function Contract() {
         type: 'success',
         text: `Tx ${data.transactionHash} confirmed`,
         theme: 'relax',
+        layout: 'topCenter',
         timeout: 3000
       }).show();
     }
@@ -156,13 +148,29 @@ function Contract() {
     let claimable = [];
     for (let i = 0; i < tokens.length; i++) {
       const tokenId = BigNumber.from(tokens[i]).toString();
-      const data = await readContract({
+      const ownerOf = await readContract({
         address: contractAddress,
         abi: ABI,
         functionName: 'ownerOf',
         args: [tokenId]
       });
-      if (data === address) {
+      const isWinner = await readContract({
+        address: contractAddress,
+        abi: ABI,
+        functionName: 'winningTokens',
+        args: [tokenId]
+      });
+      const isClaimed = await readContract({
+        address: contractAddress,
+        abi: ABI,
+        functionName: 'tokenClaimed',
+        args: [tokenId]
+      });
+      if (
+        ownerOf === address &&
+        isWinner === true &&
+        isClaimed === false
+      ) {
         claimable.push(tokenId);
       }
     }
@@ -172,6 +180,7 @@ function Contract() {
         type: 'success',
         text: `Winner! Congratulations, you have ${claimable.length} tokens elligible to claim the Ether prize for.`,
         theme: 'relax',
+        layout: 'topCenter',
         timeout: 8000
       }).show();
     } else {
@@ -179,11 +188,39 @@ function Contract() {
         type: 'error',
         text: `Too bad! None of your tokens are elligible to claim`,
         theme: 'relax',
+        layout: 'topCenter',
+        timeout: 8000
+      }).show();
+    }
+  }
+  async function claimToken(tokenId) {
+    const config = await prepareWriteContract({
+      ..._contract,
+      functionName: 'claimToken',
+      args: [tokenId]
+    });
+    const { hash } = await writeContract(config);
+    new Noty({
+      type: 'info',
+      text: `Claim for token ${tokenId} has been sent in Tx ${hash}.`,
+      theme: 'relax',
+      layout: 'topCenter',
+      timeout: 8000
+    }).show();
+    const receipt = await waitForTransaction({
+      hash,
+      timeout: 90000
+    });
+    if (receipt) {
+      new Noty({
+        type: 'success',
+        text: `Claim for token ${tokenId} has succeeded!`,
+        theme: 'relax',
+        layout: 'topCenter',
         timeout: 8000
       }).show();
     }
   }
-  
   if (isConnected && options.phraseSet)
     return (
       <>
@@ -198,7 +235,13 @@ 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'}}>{tokenId}</button>
+              <button key={idx} className="button is-success" style={{marginBottom: '1em', marginRight: '1em'}} onClick={async () => {
+                await claimToken(tokenId).then(async d => {
+                  await checkClaimable();
+                });
+              }}>
+                Claim Token {tokenId}
+              </button>
             ))}
           </div>
         )}