renamed and added address to cards

packages/nextjs/components/Header.tsx

@@ -23,8 +23,8 @@ export const menuLinks: HeaderMenuLink[] = [
     icon: <BugAntIcon className="h-4 w-4" />,
   },
   {
-    label: "Example UI",
-    href: "/example-ui",
+    label: "Demo",
+    href: "/repTokensDemo",
     icon: <SparklesIcon className="h-4 w-4" />,
   },
 ];

packages/nextjs/components/example-ui/ContractData.tsx → packages/nextjs/components/rep-tokens-demo/Index.tsx

@@ -1,34 +1,34 @@
-import { useRepTokens } from "./tokens/TokenInteractions";
+import { useRepTokens } from "./tokens/Hooks";
 import { ImageProperties } from "./tokens/token-card/ImageCard";
-import { DefaultTokenGroupCard } from "./tokens/token-group-card/DefaultTokenGroupCard";
+import { TokensCard } from "./tokens/tokens-card/TokensCard";
 import {
   mainCardPropertiesClasses,
   mainCardRenderProps,
   mainCardWithNumberOverlayPropertiesClasses,
   navBarPropertiesClasses,
   navBarRenderProps,
   prettifyLoadingProps,
-} from "./tokens/token-group-card/TokenGroupCardConfig";
+} from "./tokens/tokens-card/TokensCardConfig";
 import { useAccount } from "wagmi";
 
-export const ContractData = () => {
+export const Index = () => {
   const { address } = useAccount();
 
-  const { tokens } = useRepTokens(address);
+  const { tokensData } = useRepTokens(address);
 
-  for (let i = 0; i < tokens.length; i++) {
-    tokens[i].image = tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
+  for (let i = 0; i < tokensData.tokens.length; i++) {
+    tokensData.tokens[i].image = tokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
   }
 
-  const navBarCardImageProperties = new ImageProperties("Token 0", 64, 64);
-  const mainCardImageProperties = new ImageProperties("Token 0", 256, 256);
+  const navBarCardImageProperties = new ImageProperties("Token", 64, 64);
+  const mainCardImageProperties = new ImageProperties("Token", 256, 256);
 
   return (
     <>
       <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
         <div>
-          <DefaultTokenGroupCard
-            tokens={tokens}
+          <TokensCard
+            tokensData={tokensData}
             imageProperties={navBarCardImageProperties}
             prettifyLoadingProps={prettifyLoadingProps}
             propertiesClasses={navBarPropertiesClasses}
@@ -39,8 +39,8 @@ export const ContractData = () => {
 
       <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
         <div>
-          <DefaultTokenGroupCard
-            tokens={tokens}
+          <TokensCard
+            tokensData={tokensData}
             imageProperties={mainCardImageProperties}
             prettifyLoadingProps={prettifyLoadingProps}
             propertiesClasses={mainCardPropertiesClasses}
@@ -51,8 +51,8 @@ export const ContractData = () => {
 
       <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
         <div>
-          <DefaultTokenGroupCard
-            tokens={tokens}
+          <TokensCard
+            tokensData={tokensData}
             imageProperties={mainCardImageProperties}
             prettifyLoadingProps={prettifyLoadingProps}
             propertiesClasses={mainCardWithNumberOverlayPropertiesClasses}

packages/nextjs/components/example-ui/tokens/TokenInteractions.tsx → packages/nextjs/components/rep-tokens-demo/tokens/Hooks.tsx

@@ -175,5 +175,7 @@ export const useRepTokens = (address?: string) => {
     tokens.push(token);
   }
 
-  return { tokens };
+  const addr = repTokensInstance?.address ?? "";
+
+  return { tokensData: { address: addr, tokens: tokens } };
 };

packages/nextjs/components/example-ui/tokens/token-card/BaseTokenCard.tsx → packages/nextjs/components/rep-tokens-demo/tokens/token-card/BaseTokenCard.tsx

@@ -1,4 +1,4 @@
-import { Token } from "../TokenInteractions";
+import { Token } from "../Hooks";
 import { BalanceCard } from "./BalanceCard";
 import { ImageCard } from "./ImageCard";
 import { ImageProperties } from "./ImageCard";

packages/nextjs/components/example-ui/tokens/token-card/DefaultTokenCard.tsx → packages/nextjs/components/rep-tokens-demo/tokens/token-card/DefaultTokenCard.tsx

@@ -1,4 +1,4 @@
-import { Token } from "../TokenInteractions";
+import { Token } from "../Hooks";
 import {
   BaseTokenCard,
   TBaseTokenCardBooleanSet, // TBaseTokenCardRenderSettings, // TBaseTokenCardPrettifyLoadingProps,

packages/nextjs/components/rep-tokens-demo/tokens/tokens-card/TokensCard.tsx

@@ -0,0 +1,90 @@
+import { Token } from "../Hooks";
+import { TBaseTokenCardBooleanSet } from "../token-card/BaseTokenCard";
+import { DefaultTokenCard, TTokenCardPrettifyLoadingProps } from "../token-card/DefaultTokenCard";
+import { TTokenCardPropertiesClasses } from "../token-card/DefaultTokenCard";
+import { ImageProperties } from "../token-card/ImageCard";
+import { Address } from "~~/components/scaffold-eth";
+
+type TTokenGroupCardProps = {
+  tokensData: { address: string; tokens: Token[] };
+  imageProperties: ImageProperties;
+  propertiesClasses?: TTokenCardGroupPropertiesClasses;
+  prettifyLoadingProps?: TTokenGroupCardPrettifyLoadingProps;
+  renderProps?: TTokensCardRenderProps;
+};
+
+export type TTokenCardGroupPropertiesClasses = {
+  card: string;
+  container: string;
+  adddress: string;
+  tokenCardPropertyClasses?: TTokenCardPropertiesClasses;
+};
+
+export type TTokenGroupCardPrettifyLoadingProps = {
+  card: boolean;
+  tokenCardPrettifyLoadingProps: TTokenCardPrettifyLoadingProps;
+};
+
+export type TTokensCardRenderProps = {
+  address: boolean;
+  tokenCardRenderProps: TBaseTokenCardBooleanSet;
+};
+
+export const TokensCard = ({
+  tokensData,
+  imageProperties,
+  propertiesClasses,
+  prettifyLoadingProps,
+  renderProps,
+}: TTokenGroupCardProps) => {
+  const components = tokensData.tokens.map((token, index) => (
+    <DefaultTokenCard
+      key={`${token.id}+${index}`}
+      token={token}
+      imageProperties={imageProperties}
+      propertiesClasses={propertiesClasses?.tokenCardPropertyClasses}
+      prettifyLoadingProps={prettifyLoadingProps?.tokenCardPrettifyLoadingProps}
+      renderProps={renderProps?.tokenCardRenderProps}
+    ></DefaultTokenCard>
+  ));
+
+  let output;
+
+  if (prettifyLoadingProps) {
+    if (prettifyLoadingProps?.card) {
+      let isLoaded = true;
+      for (let i = 0; i < tokensData.tokens.length; i++) {
+        if (
+          tokensData.tokens[i].balance === undefined &&
+          tokensData.tokens[i].name === undefined &&
+          tokensData.tokens[i].description === undefined &&
+          tokensData.tokens[i].image === undefined &&
+          tokensData.tokens[i].properties === undefined
+        ) {
+          isLoaded = false;
+          break;
+        }
+      }
+
+      if (tokensData.tokens.length === 0) isLoaded = !isLoaded;
+
+      if (!isLoaded) {
+        output = <>Loading Reputation Tokens...</>;
+      } else output = components;
+    } else {
+      output = components;
+    }
+  } else {
+    output = components;
+  }
+
+  return (
+    <>
+      <div className={propertiesClasses?.card}>
+        {renderProps?.address ? <Address address={tokensData.address}></Address> : <></>}
+
+        <div className={propertiesClasses?.container}>{output}</div>
+      </div>
+    </>
+  );
+};