abstracted token group config

ATXDAO · Jan 27, 2024 · 3b583f1 · 3b583f1
1 parent 8045397
commit 3b583f1
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 128 deletions.
diff --git a/packages/nextjs/components/rep-tokens-demo/Index.tsx b/packages/nextjs/components/rep-tokens-demo/Index.tsx
@@ -1,7 +1,7 @@
-import { TokenGroupCard, TokenGroupProps } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
+import { TokenGroupCard } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 import { useRepTokens } from "../rep-tokens/hooks/Hooks";
-import { buildTokenCards } from "../rep-tokens/utils/buildTokensCard";
-import { tokenGroupCardProps } from "./MainTokensCardConfig";
+import { buildTokenCards, buildTokenGroupCard } from "../rep-tokens/utils/buildTokensCard";
+import { tokenGroupCardConfigProps } from "./MainTokensCardConfig";
 // import {
 //   tokenCardPrettifyLoadingProps as isBeautifyingMainTokenCardOverlayLoadingProps,
 //   tokenCardPropertiesClasses as mainNumberOverlayTokenCardPropertiesClasses,
@@ -17,11 +17,7 @@ import { tokenGroupCardProps } from "./MainTokensCardConfig";
 import { useAccount } from "wagmi";
 
 export const Index = () => {
-  // const navBarCardImageProperties = new ImageProperties("Token", 64, 64);
-  // const mainCardImageProperties = new ImageProperties("Token", 256, 256);
-
   const { address } = useAccount();
-
   const { tokensData } = useRepTokens(address);
 
   for (let i = 0; i < tokensData.tokens.length; i++) {
@@ -39,30 +35,12 @@ export const Index = () => {
 
   // );
 
-  const mainTokenCards = buildTokenCards(tokensData.tokens, tokensData.address, tokenGroupCardProps.tokenCardProps);
-
-  // tokenGroupCardProps.address = tokensData.address;
-
-  // const mainNumberOverlayTokenCard = buildTokenGroupCard(
-  //   tokensData.tokens,
-  //   true,
-  //   true,
-  //   tokensData.address,
-  //   mainCardImageProperties,
-  //   mainNumberOverlayTokenCardPropertiesClasses,
-  //   isBeautifyingMainTokenCardOverlayLoadingProps,
-  // );
-
-  const tokenGroupCard: TokenGroupProps = {
-    tokenCardsProps: mainTokenCards,
-    classes: tokenGroupCardProps.classes,
-    address: {
-      value: tokensData.address,
-      classes: tokenGroupCardProps.address.classes,
-      isPrettyLoading: tokenGroupCardProps.isPrettyLoading,
-    },
-    isPrettyLoading: tokenGroupCardProps.isPrettyLoading,
-  };
+  const mainTokenCards = buildTokenCards(
+    tokensData.tokens,
+    tokensData.address,
+    tokenGroupCardConfigProps.tokenCardProps,
+  );
+  const mainTokenGroupCard = buildTokenGroupCard(tokenGroupCardConfigProps, mainTokenCards, tokensData.address);
 
   return (
     <>
@@ -79,13 +57,7 @@ export const Index = () => {
 
       <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>
-          <TokenGroupCard
-            props={tokenGroupCard}
-            // address={tokenGroupCard.address}
-            // tokenCardsProps={tokenGroupCard.tokenCardsProps}
-            // classes={tokenGroupCard.classes}
-            // isPrettyLoading={tokenGroupCard.isPrettyLoading}
-          />
+          <TokenGroupCard props={mainTokenGroupCard} />
         </div>
       </div>
 

diff --git a/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
@@ -5,6 +5,7 @@ import {
   TokenCardConfigProps,
   TokenElementsConfigProps,
 } from "../rep-tokens/types/Types";
+import { TokenGroupCardConfigProps } from "../rep-tokens/types/Types";
 
 export const balanceProps = {
   isRendering: true,
@@ -62,21 +63,15 @@ export const elementsProps = {
 
 export const tokenCardProps = {
   isRendering: true,
-  classes: {
-    card: "bg-slate-600 p-5 m-4 w-64",
-  },
+  cardClasses: "bg-slate-600 p-5 m-4 w-64",
   elementsProps,
 } as TokenCardConfigProps;
 
-export const tokenGroupCardProps = {
+export const tokenGroupCardConfigProps = {
   isRendering: true,
   classes: {
     container: "flex justify-center bg bg-slate-1000 p-3",
     card: "bg-slate-800 flex flex-col items-center",
-    address: {
-      container: "flex items-center justify-center bg-slate-600",
-      value: "ml-1.5 text-${size} font-normal text-white",
-    },
   },
   address: {
     isRendering: true,
@@ -89,4 +84,4 @@ export const tokenGroupCardProps = {
 
   isPrettyLoading: true,
   tokenCardProps,
-};
+} as TokenGroupCardConfigProps;
diff --git a/packages/nextjs/components/rep-tokens-demo/MainTokensCardWithNumberOverlayConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardWithNumberOverlayConfig.tsx
@@ -1,26 +1,26 @@
-import { TokenCardClasses } from "../rep-tokens/cards/token-card/TokenCard";
-import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
+// import { TokenCardClasses } from "../rep-tokens/cards/token-card/TokenCard";
+// import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 
-export const tokensCardPropertiesClasses = {
-  card: "bg-base-300 flex flex-col items-center",
-  container: "flex justify-center",
-} as TokenGroupCardElementsClasses;
+// export const tokensCardPropertiesClasses = {
+//   card: "bg-base-300 flex flex-col items-center",
+//   container: "flex justify-center",
+// } as TokenGroupCardElementsClasses;
 
-export const tokenCardPropertiesClasses = {
-  card: "px-5 py-5 relative w-64",
-  baseTokenCardElementsClasses: {
-    balance: {
-      container: "absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/3",
-      value: "text-9xl mx-auto text-center",
-    },
-    name: {
-      value: "text-1xl text-center object-center mx-auto font-bold break-all",
-    },
-    description: {
-      value: "text-1xl mx-auto text-center break-words",
-    },
-    image: {
-      value: "rounded mx-auto",
-    },
-  },
-} as TokenCardClasses;
+// export const tokenCardPropertiesClasses = {
+//   card: "px-5 py-5 relative w-64",
+//   baseTokenCardElementsClasses: {
+//     balance: {
+//       container: "absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/3",
+//       value: "text-9xl mx-auto text-center",
+//     },
+//     name: {
+//       value: "text-1xl text-center object-center mx-auto font-bold break-all",
+//     },
+//     description: {
+//       value: "text-1xl mx-auto text-center break-words",
+//     },
+//     image: {
+//       value: "rounded mx-auto",
+//     },
+//   },
+// } as TokenCardClasses;
diff --git a/packages/nextjs/components/rep-tokens-demo/NavBarCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/NavBarCardConfig.tsx
@@ -1,24 +1,24 @@
-import { TokenCardClasses } from "../rep-tokens/cards/token-card/TokenCard";
-import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
+// import { TokenCardClasses } from "../rep-tokens/cards/token-card/TokenCard";
+// import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 
-export const tokensCardPropertiesClasses = {
-  container: "flex justify-center",
-  card: "bg-slate-800 flex flex-col items-center",
-  address: {
-    container: "flex items-center justify-center bg-slate-600",
-    value: "ml-1.5 text-${size} font-normal text-white",
-  },
-} as TokenGroupCardElementsClasses;
+// export const tokensCardPropertiesClasses = {
+//   container: "flex justify-center",
+//   card: "bg-slate-800 flex flex-col items-center",
+//   address: {
+//     container: "flex items-center justify-center bg-slate-600",
+//     value: "ml-1.5 text-${size} font-normal text-white",
+//   },
+// } as TokenGroupCardElementsClasses;
 
-export const tokenCardPropertiesClasses = {
-  card: "px-1 py-1 relative w-20 ",
-  baseTokenCardElementsClasses: {
-    balance: {
-      container: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",
-      value: "text-4xl text-center justify-center",
-    },
-    image: {
-      value: "rounded mx-auto",
-    },
-  },
-} as TokenCardClasses;
+// export const tokenCardPropertiesClasses = {
+//   card: "px-1 py-1 relative w-20 ",
+//   baseTokenCardElementsClasses: {
+//     balance: {
+//       container: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",
+//       value: "text-4xl text-center justify-center",
+//     },
+//     image: {
+//       value: "rounded mx-auto",
+//     },
+//   },
+// } as TokenCardClasses;
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,37 +1,32 @@
 import { BaseTokenCard } from "./BaseTokenCard";
 import { BaseTokenCardElementsProps } from "./BaseTokenCard";
 
-export interface TokenCardProps {
-  // id: number;
-  elementsClasses?: TokenCardClasses;
-  isBeautifyingTokenCardLoadingProps?: boolean;
-  elementsProps: BaseTokenCardElementsProps;
+export interface TokenCardInternalProps {
+  props: TokenCardProps;
 }
 
-export interface TokenCardClasses {
-  card: string;
+export interface TokenCardProps {
+  cardClasses?: string;
+  isPrettyLoading?: boolean;
+  elementsProps: BaseTokenCardElementsProps;
 }
 
-export const TokenCard = ({
-  elementsClasses,
-  isBeautifyingTokenCardLoadingProps = false,
-  elementsProps,
-}: TokenCardProps) => {
+export const TokenCard = ({ props }: TokenCardInternalProps) => {
   const output = (
     <>
-      <BaseTokenCard elementsProps={elementsProps} />
+      <BaseTokenCard elementsProps={props?.elementsProps} />
     </>
   );
 
   return (
     <>
-      <div className={elementsClasses?.card}>
-        {isBeautifyingTokenCardLoadingProps ? (
-          elementsProps.imageProp?.value !== undefined &&
-          elementsProps.balanceProp?.value !== undefined &&
-          elementsProps.nameProp?.value !== undefined &&
-          elementsProps.descriptionProp?.value !== undefined &&
-          elementsProps?.addressProp?.value !== undefined ? (
+      <div className={props?.cardClasses}>
+        {props?.isPrettyLoading ? (
+          props?.elementsProps?.imageProp?.value !== undefined &&
+          props?.elementsProps?.balanceProp?.value !== undefined &&
+          props?.elementsProps?.nameProp?.value !== undefined &&
+          props?.elementsProps?.descriptionProp?.value !== undefined &&
+          props?.elementsProps?.addressProp?.value !== undefined ? (
             <div>{output}</div>
           ) : (
             <>Loading Token...</>

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
@@ -23,12 +23,7 @@ export interface TokenGroupCardElementsClasses {
 
 export const TokenGroupCard = ({ props }: TokenGroupCardInternalProps) => {
   const components = props?.tokenCardsProps.map((cardProps, index) => (
-    <TokenCard
-      key={`tokenCard+${index}`}
-      elementsClasses={cardProps.elementsClasses}
-      isBeautifyingTokenCardLoadingProps={cardProps.isBeautifyingTokenCardLoadingProps}
-      elementsProps={cardProps.elementsProps}
-    ></TokenCard>
+    <TokenCard key={`tokenCard+${index}`} props={cardProps}></TokenCard>
   ));
 
   let output = (
@@ -42,10 +37,10 @@ export const TokenGroupCard = ({ props }: TokenGroupCardInternalProps) => {
     let isLoaded = true;
     for (let i = 0; i < props?.tokenCardsProps.length; i++) {
       if (
-        props?.tokenCardsProps[i].elementsProps.balanceProp?.value === undefined &&
-        props?.tokenCardsProps[i].elementsProps.nameProp?.value === undefined &&
-        props?.tokenCardsProps[i].elementsProps.descriptionProp?.value === undefined &&
-        props?.tokenCardsProps[i].elementsProps.imageProp?.value === undefined
+        props?.tokenCardsProps[i].elementsProps?.balanceProp?.value === undefined &&
+        props?.tokenCardsProps[i].elementsProps?.nameProp?.value === undefined &&
+        props?.tokenCardsProps[i].elementsProps?.descriptionProp?.value === undefined &&
+        props?.tokenCardsProps[i].elementsProps?.imageProp?.value === undefined
       ) {
         isLoaded = false;
         break;

diff --git a/packages/nextjs/components/rep-tokens/types/Types.tsx b/packages/nextjs/components/rep-tokens/types/Types.tsx
@@ -1,4 +1,5 @@
 import { ImageProps } from "../cards/property-cards/ImageCard";
+import { StringCardProps } from "../cards/property-cards/StringCard";
 
 export interface ElementClasses {
   container?: string;
@@ -25,9 +26,20 @@ export interface TokenElementsConfigProps {
 
 export interface TokenCardConfigProps {
   isRendering: true;
-  classes: {
-    card: string;
-  };
+  cardClasses: string;
   elementsProps: TokenElementsConfigProps;
   isPrettyLoading: true;
 }
+
+export interface TokenGroupCardConfigProps {
+  isRendering: boolean;
+  classes: TokenGroupCardClasses;
+  address: StringCardProps;
+  isPrettyLoading: boolean;
+  tokenCardProps: TokenCardConfigProps;
+}
+
+export interface TokenGroupCardClasses {
+  container: string;
+  card: string;
+}
diff --git a/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx b/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx
@@ -1,14 +1,31 @@
 import { TokenCardProps } from "../cards/token-card/TokenCard";
+import { TokenGroupProps } from "../cards/token-group-card/TokenGroupCard";
 import { Token } from "../hooks/Hooks";
 import { TokenCardConfigProps } from "../types/Types";
+import { TokenGroupCardConfigProps } from "../types/Types";
+
+export function buildTokenGroupCard(config: TokenGroupCardConfigProps, tokenCards: TokenCardProps[], address?: string) {
+  const tokenGroupCard: TokenGroupProps = {
+    tokenCardsProps: tokenCards,
+    classes: config.classes,
+    address: {
+      value: address,
+      classes: config.address.classes,
+      isPrettyLoading: config.isPrettyLoading,
+    },
+    isPrettyLoading: config.isPrettyLoading,
+  };
+
+  return tokenGroupCard;
+}
 
 export function buildTokenCards(tokens: Token[], address?: string, tokenCardProps?: TokenCardConfigProps) {
   const arr = [];
 
   for (let i = 0; i < tokens.length; i++) {
     const tokenCardProp: TokenCardProps = {
-      isBeautifyingTokenCardLoadingProps: tokenCardProps?.isPrettyLoading,
-      elementsClasses: tokenCardProps?.classes,
+      isPrettyLoading: tokenCardProps?.isPrettyLoading,
+      cardClasses: tokenCardProps?.cardClasses,
       elementsProps: {
         balanceProp: tokenCardProps?.elementsProps?.balanceProps?.isRendering
           ? {