compilable

ATXDAO · Jan 27, 2024 · 5d29a4e · 5d29a4e
1 parent 18ce863
commit 5d29a4e
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 123 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,45 +27,41 @@ 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}
         />
       ) : (
         <></>
       )}
       {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}
         />
       ) : (
         <></>
       )}
       {elementsProps?.nameProp ? (
         <StringCard
           value={elementsProps?.nameProp?.value}
-          elementClasses={elementsProps?.nameProp?.classes}
-          prettifyLoading={elementsProps?.nameProp?.isPrettyLoading}
+          classes={elementsProps?.nameProp?.classes}
+          isPrettyLoading={elementsProps?.nameProp?.isPrettyLoading}
         />
       ) : (
         <></>
       )}
       {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
@@ -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,25 +14,24 @@ export interface TokenCardClasses {
 }
 
 export const TokenCard = ({
-  token,
   elementsClasses,
   isBeautifyingTokenCardLoadingProps = false,
   elementsProps,
 }: TokenCardProps) => {
   const output = (
     <>
-      <BaseTokenCard token={token} elementsProps={elementsProps} />
+      <BaseTokenCard elementsProps={elementsProps} />
     </>
   );
 
   return (
     <>
       <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
@@ -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
@@ -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: {