Can redeem on front

Author: danitome24

packages/nextjs/components/kiddo-perks/ChildDashboard/PerksListGrid.tsx

@@ -1,11 +1,24 @@
 import { usePerksManager } from "~~/hooks/kiddo-perks";
+import { useDeployedContractInfo, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
+import { Perk } from "~~/types/kiddoPerks";
 
 type PerksListGridProps = {
   childTokens: number;
 };
 
 export const PerksListGrid = ({ childTokens }: PerksListGridProps) => {
-  const { perks } = usePerksManager();
+  const { writeContractAsync: writeTokenContractAsync } = useScaffoldWriteContract("KDOToken");
+  const { data: kiddoPerksContractInfo } = useDeployedContractInfo("KiddoPerks");
+
+  const { perks, redeemPerk } = usePerksManager();
+
+  const handleRedeemPerk = async (perk: Perk) => {
+    await writeTokenContractAsync({
+      functionName: "approve",
+      args: [kiddoPerksContractInfo?.address, BigInt(perk.tokensRequired)],
+    });
+    await redeemPerk(perk.id);
+  };
 
   if (perks.length === 0) {
     return (
@@ -28,10 +41,12 @@ export const PerksListGrid = ({ childTokens }: PerksListGridProps) => {
               <h3 className="text-sm font-medium ">{perk.title}</h3>
               <p className="text-xs text-gray-600">Cost: {Number(perk.tokensRequired) / 10 ** 18} KDO</p>
             </div>
-            {perk.redeemedBy ? (
+            {perk.isRedeemed ? (
               <span className="text-xs bg-base px-2 py-1 rounded-full">Redeemed</span>
             ) : childTokens >= Number(perk.tokensRequired) ? (
-              <button className="btn btn-primary">Redeem</button>
+              <button onClick={() => handleRedeemPerk(perk)} className="btn btn-primary">
+                Redeem
+              </button>
             ) : (
               <span className="text-xs bg-accent text-accent-content px-2 py-1 rounded-full">Not Enough Points</span>
             )}

packages/nextjs/contracts/deployedContracts.ts

@@ -7,7 +7,7 @@ import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 const deployedContracts = {
   31337: {
     KDOToken: {
-      address: "0x700b6a60ce7eaaea56f065753d8dcb9653dbad35",
+      address: "0xf7cd8fa9b94db2aa972023b379c7f72c65e4de9d",
       abi: [
         {
           type: "constructor",
@@ -450,7 +450,7 @@ const deployedContracts = {
       },
     },
     KiddoPerks: {
-      address: "0xa15bb66138824a1c7167f5e85b957d04dd34e468",
+      address: "0x12975173b87f7595ee45dffb2ab812ece596bf84",
       abi: [
         {
           type: "constructor",
@@ -772,6 +772,19 @@ const deployedContracts = {
           ],
           stateMutability: "view",
         },
+        {
+          type: "function",
+          name: "redeemPerk",
+          inputs: [
+            {
+              name: "perkId",
+              type: "uint256",
+              internalType: "uint256",
+            },
+          ],
+          outputs: [],
+          stateMutability: "nonpayable",
+        },
         {
           type: "function",
           name: "removeChild",
@@ -936,6 +949,30 @@ const deployedContracts = {
           ],
           stateMutability: "view",
         },
+        {
+          type: "function",
+          name: "s_perksRedeemedBy",
+          inputs: [
+            {
+              name: "perkId",
+              type: "uint256",
+              internalType: "uint256",
+            },
+            {
+              name: "by",
+              type: "address",
+              internalType: "address",
+            },
+          ],
+          outputs: [
+            {
+              name: "isRedeemed",
+              type: "bool",
+              internalType: "bool",
+            },
+          ],
+          stateMutability: "view",
+        },
         {
           type: "function",
           name: "s_taskNextId",
@@ -1133,6 +1170,25 @@ const deployedContracts = {
           ],
           anonymous: false,
         },
+        {
+          type: "event",
+          name: "PerkRedeemed",
+          inputs: [
+            {
+              name: "perkId",
+              type: "uint256",
+              indexed: false,
+              internalType: "uint256",
+            },
+            {
+              name: "by",
+              type: "address",
+              indexed: false,
+              internalType: "address",
+            },
+          ],
+          anonymous: false,
+        },
         {
           type: "event",
           name: "PerkRemoved",
@@ -1238,6 +1294,27 @@ const deployedContracts = {
             },
           ],
         },
+        {
+          type: "error",
+          name: "KiddoPerks__NotEnoughTokenBalance",
+          inputs: [
+            {
+              name: "id",
+              type: "uint256",
+              internalType: "uint256",
+            },
+            {
+              name: "by",
+              type: "address",
+              internalType: "address",
+            },
+            {
+              name: "tokensRequired",
+              type: "uint256",
+              internalType: "uint256",
+            },
+          ],
+        },
         {
           type: "error",
           name: "KiddoPerks__NotValidId",
@@ -1249,6 +1326,22 @@ const deployedContracts = {
             },
           ],
         },
+        {
+          type: "error",
+          name: "KiddoPerks__PerkAlreadyRedemmed",
+          inputs: [
+            {
+              name: "id",
+              type: "uint256",
+              internalType: "uint256",
+            },
+            {
+              name: "by",
+              type: "address",
+              internalType: "address",
+            },
+          ],
+        },
         {
           type: "error",
           name: "KiddoPerks__PerkAlreadyRemoved",

packages/nextjs/hooks/kiddo-perks/usePerksManager.ts

@@ -22,6 +22,7 @@ export const usePerksManager = () => {
               title: perk.title,
               removed: perk.removed,
               tokensRequired: perk.tokensRequired,
+              isRedeemed: false,
             } as Perk),
         );
 
@@ -34,7 +35,7 @@ export const usePerksManager = () => {
       functionName: "createPerk",
       args: [title, BigInt(tokensRequired)],
     });
-    setPerks([...perks, { id: perks.length + 1, title, removed: false, tokensRequired }]);
+    setPerks([...perks, { id: perks.length + 1, title, removed: false, tokensRequired, isRedeemed: false }]);
   };
 
   const removePerk = async (perkId: number) => {
@@ -45,5 +46,23 @@ export const usePerksManager = () => {
     setPerks(perks.filter(perk => perk.id !== perkId));
   };
 
-  return { perks, addPerk, removePerk };
+  const redeemPerk = async (perkId: number) => {
+    await writeKiddoPerksContract({
+      functionName: "redeemPerk",
+      args: [BigInt(perkId)],
+    });
+
+    const updatedPerks = perks.map(perk => {
+      if (perk.id == perkId) {
+        return {
+          ...perk,
+          isRedeemed: true,
+        };
+      }
+      return perk;
+    });
+    setPerks(updatedPerks);
+  };
+
+  return { perks, addPerk, removePerk, redeemPerk };
 };

packages/nextjs/types/kiddoPerks.ts

@@ -11,7 +11,7 @@ export type Perk = {
   title: string;
   tokensRequired: bigint;
   removed: boolean;
-  redeemedBy?: string[];
+  isRedeemed: boolean;
 };
 
 export type Task = {