From 5d29a4e437ff10d939822a587199dd1203f7e700 Mon Sep 17 00:00:00 2001
From: Jacob Homanics <homanicsjake@gmail.com>
Date: Fri, 26 Jan 2024 23:51:19 -0600
Subject: [PATCH] compilable

---
 .../rep-tokens-demo/MainTokensCardConfig.tsx  |  1 +
 .../cards/property-cards/BalanceCard.tsx      | 20 +++--
 .../cards/property-cards/ImageCard.tsx        | 26 +++----
 .../cards/property-cards/StringCard.tsx       | 18 ++---
 .../cards/token-card/BaseTokenCard.tsx        | 75 ++++++-------------
 .../rep-tokens/cards/token-card/TokenCard.tsx | 18 ++---
 .../cards/token-group-card/TokenGroupCard.tsx | 26 +++----
 .../rep-tokens/utils/buildTokensCard.tsx      |  2 +-
 .../components/scaffold-eth/Address.tsx       | 39 ++++++----
 9 files changed, 102 insertions(+), 123 deletions(-)

diff --git a/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
index d639447..c4db59c 100644
--- a/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
+++ b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
@@ -78,6 +78,7 @@ export const tokenGroupCardProps = {
       value: "ml-1.5 text-${size} font-normal text-white",
     },
   },
+
   isPrettyLoading: true,
   tokenCardProps,
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/property-cards/BalanceCard.tsx b/packages/nextjs/components/rep-tokens/cards/property-cards/BalanceCard.tsx
index 5e2c7b1..f24924c 100644
--- a/packages/nextjs/components/rep-tokens/cards/property-cards/BalanceCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/property-cards/BalanceCard.tsx
@@ -1,15 +1,19 @@
 import { ElementClasses } from "../../types/Types";
 
-type TBalanceCardProps = {
+export interface BalanceCardProps {
+  props: BigIntProps;
+}
+
+export interface BigIntProps {
   value: bigint;
-  elementClasses?: ElementClasses;
-  prettifyLoading?: boolean;
-};
+  classes?: ElementClasses;
+  isPrettyLoading?: boolean;
+}
 
-export const BalanceCard = ({ value, prettifyLoading, elementClasses }: TBalanceCardProps) => {
+export const BalanceCard = ({ value, classes, isPrettyLoading }: BigIntProps) => {
   let output;
 
-  prettifyLoading
+  isPrettyLoading
     ? value !== undefined
       ? (output = Number(value))
       : (output = "Loading Balance...")
@@ -18,8 +22,8 @@ export const BalanceCard = ({ value, prettifyLoading, elementClasses }: TBalance
     : (output = 0);
 
   return (
-    <div className={elementClasses?.container}>
-      <p className={elementClasses?.value}>{output}</p>
+    <div className={classes?.container}>
+      <p className={classes?.value}>{output}</p>
     </div>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/property-cards/ImageCard.tsx b/packages/nextjs/components/rep-tokens/cards/property-cards/ImageCard.tsx
index cade74b..a21f694 100644
--- a/packages/nextjs/components/rep-tokens/cards/property-cards/ImageCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/property-cards/ImageCard.tsx
@@ -1,12 +1,12 @@
 import Image from "next/image";
 import { ElementClasses } from "../../types/Types";
 
-type TImageCardProps = {
+export interface ImageCardProps {
   value: string;
-  imageProperties?: ImageProperties;
-  elementClasses?: ElementClasses;
-  prettifyLoading?: boolean;
-};
+  properties?: ImageProperties;
+  classes?: ElementClasses;
+  isPrettyLoading?: boolean;
+}
 
 export class ImageProperties {
   alt: string;
@@ -19,21 +19,21 @@ export class ImageProperties {
   }
 }
 
-export const ImageCard = ({ value, imageProperties, prettifyLoading, elementClasses }: TImageCardProps) => {
+export const ImageCard = ({ value, properties, classes, isPrettyLoading }: ImageCardProps) => {
   const output = (
-    <div className={elementClasses?.container}>
+    <div className={classes?.container}>
       <Image
-        className={elementClasses?.value}
+        className={classes?.value}
         src={value}
-        alt={imageProperties?.alt || "Image"}
-        width={imageProperties?.width}
-        height={imageProperties?.height}
+        alt={properties?.alt || "Image"}
+        width={properties?.width}
+        height={properties?.height}
       />
     </div>
   );
   return (
-    <div className={elementClasses?.container}>
-      {prettifyLoading ? (
+    <div className={classes?.container}>
+      {isPrettyLoading ? (
         value !== undefined && value !== "" ? (
           output
         ) : (
diff --git a/packages/nextjs/components/rep-tokens/cards/property-cards/StringCard.tsx b/packages/nextjs/components/rep-tokens/cards/property-cards/StringCard.tsx
index abe1809..cfafa46 100644
--- a/packages/nextjs/components/rep-tokens/cards/property-cards/StringCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/property-cards/StringCard.tsx
@@ -1,17 +1,17 @@
 import { ElementClasses } from "../../types/Types";
 
-type TStringCardProps = {
-  value: string;
-  elementClasses?: ElementClasses;
-  prettifyLoading?: boolean;
-};
+export interface StringCardProps {
+  value?: string;
+  classes?: ElementClasses;
+  isPrettyLoading?: boolean;
+}
 
-export const StringCard = ({ value, prettifyLoading, elementClasses }: TStringCardProps) => {
-  const output = prettifyLoading ? (value !== undefined ? value : "Loading...") : value;
+export const StringCard = ({ value, classes, isPrettyLoading }: StringCardProps) => {
+  const output = isPrettyLoading ? (value !== undefined ? value : "Loading...") : value;
 
   return (
-    <div className={elementClasses?.container}>
-      <p className={elementClasses?.value}>{output}</p>
+    <div className={classes?.container}>
+      <p className={classes?.value}>{output}</p>
     </div>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx
index 5a77799..5bded38 100644
--- a/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx
@@ -1,53 +1,24 @@
-import { Token } from "../../hooks/Hooks";
-import { ElementClasses } from "../../types/Types";
+// import { Token } from "../../hooks/Hooks";
+// import { ElementClasses } from "../../types/Types";
 import { BalanceCard } from "../property-cards/BalanceCard";
+import { BigIntProps } from "../property-cards/BalanceCard";
 import { ImageCard } from "../property-cards/ImageCard";
-import { ImageProperties } from "../property-cards/ImageCard";
+import { ImageCardProps } from "../property-cards/ImageCard";
+// import { ImageProperties } from "../property-cards/ImageCard";
 import { StringCard } from "../property-cards/StringCard";
+import { StringCardProps } from "../property-cards/StringCard";
 import { Address } from "~~/components/scaffold-eth";
 
 export interface BaseTokenCardProps {
-  token: Token;
   elementsProps: BaseTokenCardElementsProps;
 }
 
 export interface BaseTokenCardElementsProps {
-  balanceProp?: BalanceProp;
-  nameProp?: NameProp;
-  descriptionProp?: DescriptionProp;
-  imageProp?: ImageProp;
-  addressProp?: AddressProp;
-}
-
-export interface BalanceProp {
-  value: bigint;
-  classes?: ElementClasses;
-  isPrettyLoading?: boolean;
-}
-
-export interface NameProp {
-  value: string;
-  classes?: ElementClasses;
-  isPrettyLoading?: boolean;
-}
-
-export interface DescriptionProp {
-  value: string;
-  classes?: ElementClasses;
-  isPrettyLoading?: boolean;
-}
-
-export interface ImageProp {
-  value: string;
-  properties?: ImageProperties;
-  classes?: ElementClasses;
-  isPrettyLoading?: boolean;
-}
-
-export interface AddressProp {
-  value: string | undefined;
-  classes?: ElementClasses;
-  isPrettyLoading?: boolean;
+  balanceProp?: BigIntProps;
+  nameProp?: StringCardProps;
+  descriptionProp?: StringCardProps;
+  imageProp?: ImageCardProps;
+  addressProp?: StringCardProps;
 }
 
 export const BaseTokenCard = ({ elementsProps }: BaseTokenCardProps) => {
@@ -56,8 +27,8 @@ export const BaseTokenCard = ({ elementsProps }: BaseTokenCardProps) => {
       {elementsProps?.balanceProp ? (
         <BalanceCard
           value={elementsProps?.balanceProp?.value}
-          elementClasses={elementsProps?.balanceProp?.classes}
-          prettifyLoading={elementsProps?.balanceProp?.isPrettyLoading}
+          classes={elementsProps?.balanceProp?.classes}
+          isPrettyLoading={elementsProps?.balanceProp?.isPrettyLoading}
         />
       ) : (
         <></>
@@ -65,9 +36,9 @@ export const BaseTokenCard = ({ elementsProps }: BaseTokenCardProps) => {
       {elementsProps?.imageProp ? (
         <ImageCard
           value={elementsProps?.imageProp?.value}
-          imageProperties={elementsProps?.imageProp?.properties}
-          elementClasses={elementsProps?.imageProp?.classes}
-          prettifyLoading={elementsProps?.imageProp?.isPrettyLoading}
+          properties={elementsProps?.imageProp?.properties}
+          classes={elementsProps?.imageProp?.classes}
+          isPrettyLoading={elementsProps?.imageProp?.isPrettyLoading}
         />
       ) : (
         <></>
@@ -75,8 +46,8 @@ export const BaseTokenCard = ({ elementsProps }: BaseTokenCardProps) => {
       {elementsProps?.nameProp ? (
         <StringCard
           value={elementsProps?.nameProp?.value}
-          elementClasses={elementsProps?.nameProp?.classes}
-          prettifyLoading={elementsProps?.nameProp?.isPrettyLoading}
+          classes={elementsProps?.nameProp?.classes}
+          isPrettyLoading={elementsProps?.nameProp?.isPrettyLoading}
         />
       ) : (
         <></>
@@ -84,17 +55,13 @@ export const BaseTokenCard = ({ elementsProps }: BaseTokenCardProps) => {
       {elementsProps?.descriptionProp ? (
         <StringCard
           value={elementsProps?.descriptionProp?.value}
-          elementClasses={elementsProps?.descriptionProp?.classes}
-          prettifyLoading={elementsProps?.descriptionProp?.isPrettyLoading}
+          classes={elementsProps?.descriptionProp?.classes}
+          isPrettyLoading={elementsProps?.descriptionProp?.isPrettyLoading}
         />
       ) : (
         <></>
       )}
-      {elementsProps?.addressProp ? (
-        <Address address={elementsProps?.addressProp?.value} propertyClasses={elementsProps?.addressProp?.classes} />
-      ) : (
-        <></>
-      )}
+      {elementsProps?.addressProp ? <Address props={elementsProps?.addressProp} /> : <></>}
     </>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/token-card/TokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/token-card/TokenCard.tsx
index 2396a18..b8b62a4 100644
--- a/packages/nextjs/components/rep-tokens/cards/token-card/TokenCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/token-card/TokenCard.tsx
@@ -1,8 +1,9 @@
-import { Token } from "../../hooks/Hooks";
-import { BaseTokenCard, BaseTokenCardElementsProps } from "./BaseTokenCard";
+// import { Token } from "../../hooks/Hooks";
+import { BaseTokenCard } from "./BaseTokenCard";
+import { BaseTokenCardElementsProps } from "./BaseTokenCard";
 
 export interface TokenCardProps {
-  token: Token;
+  id: number;
   elementsClasses?: TokenCardClasses;
   isBeautifyingTokenCardLoadingProps?: boolean;
   elementsProps: BaseTokenCardElementsProps;
@@ -13,14 +14,13 @@ export interface TokenCardClasses {
 }
 
 export const TokenCard = ({
-  token,
   elementsClasses,
   isBeautifyingTokenCardLoadingProps = false,
   elementsProps,
 }: TokenCardProps) => {
   const output = (
     <>
-      <BaseTokenCard token={token} elementsProps={elementsProps} />
+      <BaseTokenCard elementsProps={elementsProps} />
     </>
   );
 
@@ -28,10 +28,10 @@ export const TokenCard = ({
     <>
       <div className={elementsClasses?.card}>
         {isBeautifyingTokenCardLoadingProps ? (
-          token?.image !== undefined &&
-          token?.balance !== undefined &&
-          token?.name !== undefined &&
-          token?.description !== undefined &&
+          elementsProps.imageProp?.value !== undefined &&
+          elementsProps.balanceProp?.value !== undefined &&
+          elementsProps.nameProp?.value !== undefined &&
+          elementsProps.descriptionProp?.value !== undefined &&
           elementsProps?.addressProp?.value !== undefined ? (
             <div>{output}</div>
           ) : (
diff --git a/packages/nextjs/components/rep-tokens/cards/token-group-card/TokenGroupCard.tsx b/packages/nextjs/components/rep-tokens/cards/token-group-card/TokenGroupCard.tsx
index f16b952..b51b93e 100644
--- a/packages/nextjs/components/rep-tokens/cards/token-group-card/TokenGroupCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/token-group-card/TokenGroupCard.tsx
@@ -1,7 +1,8 @@
 import { ElementClasses } from "../../types/Types";
 import { TokenCard } from "../token-card/TokenCard";
 import { TokenCardProps } from "../token-card/TokenCard";
-import { Address } from "~~/components/scaffold-eth";
+
+// import { Address } from "~~/components/scaffold-eth";
 
 export interface TokenGroupProps {
   address?: string;
@@ -11,21 +12,21 @@ export interface TokenGroupProps {
 }
 
 export interface TokenGroupCardElementsClasses {
-  card: string;
-  container: string;
-  address: ElementClasses;
+  card?: string;
+  container?: string;
+  address?: ElementClasses;
 }
 
 export const TokenGroupCard = ({
-  address,
+  // address,
   tokenCardsProps,
   elementsClasses,
   isBeautifyingTokenGroupCardLoadingProps,
 }: TokenGroupProps) => {
   const components = tokenCardsProps.map((props, index) => (
     <TokenCard
-      key={`${props.token.id}+${index}`}
-      token={props.token}
+      key={`${props.id}+${index}`}
+      id={props.id}
       elementsClasses={props.elementsClasses}
       isBeautifyingTokenCardLoadingProps={props.isBeautifyingTokenCardLoadingProps}
       elementsProps={props.elementsProps}
@@ -34,7 +35,7 @@ export const TokenGroupCard = ({
 
   const loadedOutput = (
     <>
-      <Address address={address} propertyClasses={elementsClasses?.address}></Address>
+      {/* <Address valu classes={elementsClasses?.address}></Address> */}
       <div className={elementsClasses?.container}>{components}</div>
     </>
   );
@@ -45,11 +46,10 @@ export const TokenGroupCard = ({
     let isLoaded = true;
     for (let i = 0; i < tokenCardsProps.length; i++) {
       if (
-        tokenCardsProps[i].token.balance === undefined &&
-        tokenCardsProps[i].token.name === undefined &&
-        tokenCardsProps[i].token.description === undefined &&
-        tokenCardsProps[i].token.image === undefined &&
-        tokenCardsProps[i].token.properties === undefined
+        tokenCardsProps[i].elementsProps.balanceProp?.value === undefined &&
+        tokenCardsProps[i].elementsProps.nameProp?.value === undefined &&
+        tokenCardsProps[i].elementsProps.descriptionProp?.value === undefined &&
+        tokenCardsProps[i].elementsProps.imageProp?.value === undefined
       ) {
         isLoaded = false;
         break;
diff --git a/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx b/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx
index 648ad7b..3537f74 100644
--- a/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx
+++ b/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx
@@ -7,7 +7,7 @@ export function buildTokenCards(tokens: Token[], address?: string, tokenCardProp
 
   for (let i = 0; i < tokens.length; i++) {
     const tokenCardProp: TokenCardProps = {
-      token: tokens[i],
+      id: i,
       isBeautifyingTokenCardLoadingProps: tokenCardProps?.isPrettyLoading,
       elementsClasses: tokenCardProps?.classes,
       elementsProps: {
diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
index bea630f..00a410b 100644
--- a/packages/nextjs/components/scaffold-eth/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { ElementClasses } from "../rep-tokens/types/Types";
+import { StringCardProps } from "../rep-tokens/cards/property-cards/StringCard";
+// import { ElementClasses } from "../rep-tokens/types/Types";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { isAddress } from "viem";
 import { hardhat } from "viem/chains";
@@ -14,7 +15,8 @@ type TAddressProps = {
   disableAddressLink?: boolean;
   format?: "short" | "long";
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
-  propertyClasses?: ElementClasses;
+  // classes?: ElementClasses;
+  props?: StringCardProps;
 };
 
 const blockieSizeMap = {
@@ -31,17 +33,22 @@ const blockieSizeMap = {
  * Displays an address (or ENS) with a Blockie image and option to copy address.
  */
 export const Address = ({
-  address,
+  // address,
   disableAddressLink,
   format,
   size = "base",
-  propertyClasses = { container: "flex items-center", value: "ml-1.5 text-${size} font-normal" },
+  // classes = { container: "flex items-center", value: "ml-1.5 text-${size} font-normal" },
+  props,
 }: TAddressProps) => {
   const [ens, setEns] = useState<string | null>();
   const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const [addressCopied, setAddressCopied] = useState(false);
 
-  const { data: fetchedEns } = useEnsName({ address, enabled: isAddress(address ?? ""), chainId: 1 });
+  const { data: fetchedEns } = useEnsName({
+    address: props?.value,
+    enabled: isAddress(props?.value ?? ""),
+    chainId: 1,
+  });
   const { data: fetchedEnsAvatar } = useEnsAvatar({
     name: fetchedEns,
     enabled: Boolean(fetchedEns),
@@ -59,7 +66,7 @@ export const Address = ({
   }, [fetchedEnsAvatar]);
 
   // Skeleton UI
-  if (!address) {
+  if (!props?.value) {
     return (
       <div className="animate-pulse flex space-x-4">
         <div className="rounded-md bg-slate-300 h-6 w-6"></div>
@@ -70,38 +77,38 @@ export const Address = ({
     );
   }
 
-  if (!isAddress(address)) {
+  if (!isAddress(props?.value)) {
     return <span className="text-error">Wrong address</span>;
   }
 
-  const blockExplorerAddressLink = getBlockExplorerAddressLink(getTargetNetwork(), address);
-  let displayAddress = address?.slice(0, 5) + "..." + address?.slice(-4);
+  const blockExplorerAddressLink = getBlockExplorerAddressLink(getTargetNetwork(), props?.value);
+  let displayAddress = props?.value?.slice(0, 5) + "..." + props?.value?.slice(-4);
 
   if (ens) {
     displayAddress = ens;
   } else if (format === "long") {
-    displayAddress = address;
+    displayAddress = props?.value;
   }
 
   // let textClass = `ml-1.5 text-${size} font-normal text-white`;
 
   return (
-    <div className={propertyClasses?.container}>
+    <div className={props?.classes?.container}>
       <div className="flex-shrink-0">
         <BlockieAvatar
-          address={address}
+          address={props?.value}
           ensImage={ensAvatar}
           size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
         />
       </div>
       {disableAddressLink ? (
-        <span className={propertyClasses?.value}>{displayAddress}</span>
+        <span className={props?.classes?.value}>{displayAddress}</span>
       ) : getTargetNetwork().id === hardhat.id ? (
-        <span className={propertyClasses?.value}>
+        <span className={props?.classes?.value}>
           <Link href={blockExplorerAddressLink}>{displayAddress}</Link>
         </span>
       ) : (
-        <a className={propertyClasses?.value} target="_blank" href={blockExplorerAddressLink} rel="noopener noreferrer">
+        <a className={props?.classes?.value} target="_blank" href={blockExplorerAddressLink} rel="noopener noreferrer">
           {displayAddress}
         </a>
       )}
@@ -112,7 +119,7 @@ export const Address = ({
         />
       ) : (
         <CopyToClipboard
-          text={address}
+          text={props?.value}
           onCopy={() => {
             setAddressCopied(true);
             setTimeout(() => {