From ddd13abd04f46cf04ddef967b71bb929508faaea Mon Sep 17 00:00:00 2001
From: Jacob Homanics <homanicsjake@gmail.com>
Date: Sat, 6 Apr 2024 01:15:13 -0500
Subject: [PATCH] renamed tokenGroup to tokens

---
 .../_components/RepTokensDemo.tsx             | 24 +++++++++----------
 packages/nextjs/components/Header.tsx         | 13 ++++------
 .../cards/ReputationTokenGroupCard.tsx        |  9 +++----
 .../components/rep-tokens/hooks/Hooks.tsx     | 12 +++++-----
 4 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
index 72028ab..37b3b63 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -18,18 +18,16 @@ import { useScaffoldContract, useScaffoldContractWrite } from "~~/hooks/scaffold
 export function RepTokensDemo() {
   const { address } = useAccount();
 
-  const { data: faucet } = useScaffoldContract({ contractName: "ReputationFaucet" });
-
+  const { data: reputationTokens } = useScaffoldContract({ contractName: "ReputationTokens" });
   const { token, refetchBalance } = useGetRepToken(address, BigInt(0), "nftstorage");
-  const { tokensData: tokens, refetchBalances: refetchUserBalances } = useRepTokens(address, "nftstorage");
+  const { tokens: userTokens, refetchBalances: refetchUserBalances } = useRepTokens(address, "nftstorage");
   const { writeAsync: claim } = useScaffoldContractWrite({
     contractName: "ReputationFaucet",
     functionName: "claim",
   });
-  const { tokensData: faucetTokens, refetchBalances: refetchFaucetBalances } = useRepTokens(
-    faucet?.address,
-    "nftstorage",
-  );
+
+  const { data: faucet } = useScaffoldContract({ contractName: "ReputationFaucet" });
+  const { tokens: faucetTokens, refetchBalances: refetchFaucetBalances } = useRepTokens(faucet?.address, "nftstorage");
 
   return (
     <>
@@ -48,24 +46,24 @@ export function RepTokensDemo() {
           <TabPanel>
             <p className="text-center text-4xl">Multi-Card</p>
             <ReputationTokenGroupCard
-              tokens={tokens}
-              preChildren={<AddressCard address={tokens.address} isGroup={true} />}
+              tokens={userTokens}
+              preChildren={<AddressCard address={reputationTokens?.address} isGroup={true} />}
             />
           </TabPanel>
 
           <TabPanel>
             <p className="text-center text-4xl">Multi-Card w/ Overlay</p>
             <ReputationTokenGroupCard
-              tokens={tokens}
+              tokens={userTokens}
               isBalanceOverlayed={true}
-              preChildren={<AddressCard address={tokens.address} isGroup={true} />}
+              preChildren={<AddressCard address={reputationTokens?.address} isGroup={true} />}
             />
           </TabPanel>
 
           <TabPanel>
             <p className="text-center text-4xl">Small</p>
             <ReputationTokenGroupCard
-              tokens={tokens}
+              tokens={userTokens}
               components={["Balance", "Image"]}
               isBalanceOverlayed={true}
               size="sm"
@@ -75,7 +73,7 @@ export function RepTokensDemo() {
           <TabPanel>
             <p className="text-center text-4xl">Widget</p>
             <ReputationTokenGroupCard
-              tokens={tokens}
+              tokens={userTokens}
               components={["Balance", "Image"]}
               isBalanceOverlayed={true}
               size="xs"
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index ea829a7..bc008d5 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -73,10 +73,10 @@ export const Header = () => {
 
   const { address } = useAccount();
 
-  const { tokensData } = useRepTokens(address);
+  const { tokens } = useRepTokens(address);
 
-  for (let i = 0; i < tokensData.tokens.length; i++) {
-    tokensData.tokens[i].image = tokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
+  for (let i = 0; i < tokens.length; i++) {
+    tokens[i].image = tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
   }
 
   const widgetComponents: ReputationComponent[] = ["Balance", "Image"];
@@ -120,12 +120,7 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
-        <ReputationTokenGroupCard
-          tokens={tokensData}
-          components={widgetComponents}
-          isBalanceOverlayed={true}
-          size="xs"
-        />
+        <ReputationTokenGroupCard tokens={tokens} components={widgetComponents} isBalanceOverlayed={true} size="xs" />
         <RainbowKitCustomConnectButton />
         <FaucetButton />
       </div>
diff --git a/packages/nextjs/components/rep-tokens/cards/ReputationTokenGroupCard.tsx b/packages/nextjs/components/rep-tokens/cards/ReputationTokenGroupCard.tsx
index 8d0bad7..47788f6 100644
--- a/packages/nextjs/components/rep-tokens/cards/ReputationTokenGroupCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/ReputationTokenGroupCard.tsx
@@ -1,8 +1,9 @@
-import { TokenGroup } from "../hooks/Hooks";
+// import { TokenGroup } from "../hooks/Hooks";
+import { Token } from "../hooks/Hooks";
 import { ReputationTokenCard } from "./ReputationTokenCard";
 
 export interface TokenCardInternalProps {
-  tokens: TokenGroup;
+  tokens: Token[];
   components?: ReputationComponent[];
   isBalanceOverlayed?: boolean;
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
@@ -39,12 +40,12 @@ export const ReputationTokenGroupCard = ({
 }: TokenCardInternalProps) => {
   const output: any[] = [];
 
-  for (let i = 0; i < tokens?.tokens?.length; i++) {
+  for (let i = 0; i < tokens?.length; i++) {
     const card = (
       <ReputationTokenCard
         key={i}
         size={size}
-        token={tokens.tokens[i]}
+        token={tokens[i]}
         components={components}
         isBalanceOverlayed={isBalanceOverlayed}
       />
diff --git a/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx b/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx
index 8e28f2b..7fce654 100644
--- a/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx
+++ b/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx
@@ -242,12 +242,12 @@ export const useRepTokens = (address?: string, replacementType: ReplacementType
     tokens.push(token);
   }
 
-  const addr = repTokensInstance?.address ?? "";
+  // const addr = repTokensInstance?.address ?? "";
 
-  return { tokensData: { address: addr, tokens: tokens } as TokenGroup, refetchBalances };
+  return { tokens: tokens, refetchBalances };
 };
 
-export type TokenGroup = {
-  address: string;
-  tokens: Token[];
-};
+// export type TokenGroup = {
+//   address: string;
+//   tokens: Token[];
+// };