Children can redeem nowgit add .! :)

Author: danitome24

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

@@ -0,0 +1,36 @@
+import { useAccount } from "wagmi";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+import { Perk } from "~~/types/kiddoPerks";
+
+type PerkRedeemCardProps = {
+  perk: Perk;
+  childTokens: number;
+  handleRedeemPerk: (perk: Perk) => void;
+};
+
+export const PerkRedeemCard = ({ perk, childTokens, handleRedeemPerk }: PerkRedeemCardProps) => {
+  const account = useAccount();
+  const { data: isRedeemed } = useScaffoldReadContract({
+    contractName: "KiddoPerks",
+    functionName: "s_perksRedeemedBy",
+    args: [BigInt(perk.id), account.address],
+  });
+
+  return (
+    <div key={perk.id} className="bg-secondary shadow-md rounded-lg p-4 flex justify-between items-center">
+      <div>
+        <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>
+      {isRedeemed ? (
+        <span className="text-xs bg-base px-2 py-1 rounded-full">Redeemed</span>
+      ) : childTokens >= Number(perk.tokensRequired) ? (
+        <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>
+      )}
+    </div>
+  );
+};

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

@@ -1,3 +1,4 @@
+import { PerkRedeemCard } from "./PerkRedeemCard";
 import { usePerksManager } from "~~/hooks/kiddo-perks";
 import { useDeployedContractInfo, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
 import { Perk } from "~~/types/kiddoPerks";
@@ -36,21 +37,7 @@ export const PerksListGrid = ({ childTokens }: PerksListGridProps) => {
       <h2 className="text-lg font-semibold mb-4">Available Perks</h2>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {perks.map(perk => (
-          <div key={perk.id} className="bg-secondary shadow-md rounded-lg p-4 flex justify-between items-center">
-            <div>
-              <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.isRedeemed ? (
-              <span className="text-xs bg-base px-2 py-1 rounded-full">Redeemed</span>
-            ) : childTokens >= Number(perk.tokensRequired) ? (
-              <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>
-            )}
-          </div>
+          <PerkRedeemCard key={perk.id} perk={perk} childTokens={childTokens} handleRedeemPerk={handleRedeemPerk} />
         ))}
       </div>
     </section>