UI improvements

Author: danitome24

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

@@ -22,12 +22,9 @@ export const ChildDashboard = () => {
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <TasksProgress completed={completedTasksNumber} pending={pendingTasksNumber} />
-
-        <TokensBalance />
+        <TokensBalance balanceOf={account?.address || ""} />
       </div>
-
       <TasksList />
-
       <PerksListGrid childTokens={rawTokenBalance} />
     </div>
   );

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

@@ -35,7 +35,7 @@ export const PerksListGrid = ({ childTokens }: PerksListGridProps) => {
   return (
     <section className="mt-6">
       <h2 className="text-lg font-semibold mb-4">Available Perks</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         {perks.map(perk => (
           <PerkRedeemCard key={perk.id} perk={perk} childTokens={childTokens} handleRedeemPerk={handleRedeemPerk} />
         ))}

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

@@ -0,0 +1,29 @@
+import { useAccount } from "wagmi";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+import { Task } from "~~/types/kiddoPerks";
+
+type TaskCardProps = {
+  task: Task;
+};
+
+export const TaskCard = ({ task }: TaskCardProps) => {
+  const account = useAccount();
+
+  const { data: isTaskCompleted } = useScaffoldReadContract({
+    contractName: "KiddoPerks",
+    functionName: "s_completedTasksByUser",
+    args: [account.address, BigInt(task.id)],
+  });
+
+  return (
+    <div key={task.id} className="p-4 flex justify-between items-center">
+      <div>
+        <h3 className="text-lg font-medium">{task.title}</h3>
+        <p className={`text-sm font-semibold ${isTaskCompleted ? "text-success" : "text-warning"}`}>
+          {isTaskCompleted ? "Completed" : "Pending"}{" "}
+        </p>
+      </div>
+      {/* <button className="btn btn-success text-sm text-success-content hover:underline">Mark as Done</button> */}
+    </div>
+  );
+};

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

@@ -1,3 +1,4 @@
+import { TaskCard } from "./TaskCard";
 import { useTaskManager } from "~~/hooks/kiddo-perks/useTasksManager";
 
 export const TasksList = () => {
@@ -19,13 +20,7 @@ export const TasksList = () => {
       <h2 className="text-xl font-semibold mb-4">Your Tasks</h2>
       <div className="bg-primary shadow-md rounded-lg divide-y divide-base">
         {tasks.map(task => (
-          <div key={task.id} className="p-4 flex justify-between items-center">
-            <div>
-              <h3 className="text-lg font-medium">{task.title}</h3>
-              <p className="text-sm font-semibold text-warning">Pending</p>
-            </div>
-            <button className="btn btn-success text-sm text-success-content hover:underline">Mark as Done</button>
-          </div>
+          <TaskCard key={task.id} task={task} />
         ))}
       </div>
     </section>

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

@@ -10,7 +10,7 @@ export const TasksProgress = ({ completed, pending }: TasksProgressProps) => {
   return (
     <section className="bg-primary shadow-md rounded-lg p-4">
       <h2 className="text-lg font-semibold mb-4">Your Progress</h2>
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between gap-10">
         <div>
           <p className="text-sm ">Tasks Completed</p>
           <p className="text-xl font-bold text-success">{completed}</p>

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

@@ -1,15 +1,17 @@
-import { useAccount } from "wagmi";
 import { useTokenBalance } from "~~/hooks/kiddo-perks/useTokenBalance";
 
-export const TokensBalance = () => {
-  const account = useAccount();
-  const { formattedTokenBalance } = useTokenBalance(account.address || "");
+type TokensBalanceProps = {
+  balanceOf: string;
+};
+
+export const TokensBalance = ({ balanceOf }: TokensBalanceProps) => {
+  const { formattedTokenBalance } = useTokenBalance(balanceOf);
   return (
     <section className="bg-secondary shadow-md rounded-lg p-4">
       <h2 className="text-lg font-semibold mb-4">Your Tokens</h2>
       <div className="text-center">
         <p className="text-3xl font-bold text-primary">{formattedTokenBalance}</p>
-        <p className="text-sm ">Current Tokens</p>
+        <p className="text-sm ">KDO</p>
       </div>
     </section>
   );

packages/nextjs/contracts/deployedContracts.ts

@@ -7,7 +7,7 @@ import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 const deployedContracts = {
   31337: {
     KDOToken: {
-      address: "0xf7cd8fa9b94db2aa972023b379c7f72c65e4de9d",
+      address: "0x700b6a60ce7eaaea56f065753d8dcb9653dbad35",
       abi: [
         {
           type: "constructor",
@@ -450,7 +450,7 @@ const deployedContracts = {
       },
     },
     KiddoPerks: {
-      address: "0x12975173b87f7595ee45dffb2ab812ece596bf84",
+      address: "0xa15bb66138824a1c7167f5e85b957d04dd34e468",
       abi: [
         {
           type: "constructor",

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

@@ -8,6 +8,10 @@ export const useTokenBalance = (address: Address) => {
     args: [address],
   });
 
+  if (userTokenBalance == undefined) {
+    return { rawTokenBalance: 0, formattedTokenBalance: 0 };
+  }
+
   const rawTokenBalance = Number(userTokenBalance);
   const formattedTokenBalance = Number(userTokenBalance) / 10 ** 18;