yes

ATXDAO · Jan 27, 2024 · 1ef3bc6 · 1ef3bc6
1 parent 51da217
commit 1ef3bc6
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 198 deletions.
diff --git a/packages/nextjs/components/rep-tokens-demo/Index.tsx b/packages/nextjs/components/rep-tokens-demo/Index.tsx
@@ -2,14 +2,12 @@
 import { TokenGroupCard } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 import { useRepTokens } from "../rep-tokens/hooks/Hooks";
 import {
-  buildTokenGroupCard, //  RenderProps, TokenElementsClasses
+  buildTokenCards, //  RenderProps, TokenElementsClasses
 } from "../rep-tokens/utils/buildTokensCard";
 import {
-  tokenCardPrettifyLoadingProps as isBeautifyingMainTokenCardLoadingProps,
-  tokensCardPrettifyLoadingProps as isBeautifyingMainTokenGroupCardLoadingProps, // isRenderingTokenCardProps as isRenderingMainTokenCardProps,
-  tokenCardPropertiesClasses as mainTokenCardPropertiesClasses,
-  tokensCardPropertiesClasses as mainTokenGroupCardElementsClassess,
-  tokenCardElementsProps,
+  // tokensCardPropertiesClasses as mainTokenGroupCardElementsClassess,
+  tokenCardProps,
+  tokenGroupCardProps,
 } from "./MainTokensCardConfig";
 // import {
 //   tokenCardPrettifyLoadingProps as isBeautifyingMainTokenCardOverlayLoadingProps,
@@ -48,15 +46,9 @@ export const Index = () => {
 
   // );
 
-  console.log(tokenCardElementsProps);
+  // console.log(tokenCardElementsProps);
 
-  const mainTokenGroupCard = buildTokenGroupCard(
-    tokensData.tokens,
-    tokensData.address,
-    tokenCardElementsProps,
-    mainTokenCardPropertiesClasses,
-    isBeautifyingMainTokenCardLoadingProps,
-  );
+  const mainTokenCards = buildTokenCards(tokensData.tokens, tokensData.address, tokenCardProps);
 
   // const mainNumberOverlayTokenCard = buildTokenGroupCard(
   //   tokensData.tokens,
@@ -85,9 +77,9 @@ export const Index = () => {
         <div>
           <TokenGroupCard
             address={tokensData.address}
-            tokenCardsProps={mainTokenGroupCard}
-            elementsClasses={mainTokenGroupCardElementsClassess}
-            isBeautifyingTokenGroupCardLoadingProps={isBeautifyingMainTokenGroupCardLoadingProps}
+            tokenCardsProps={mainTokenCards}
+            elementsClasses={tokenGroupCardProps.classes}
+            isBeautifyingTokenGroupCardLoadingProps={tokenGroupCardProps.isPrettyLoading}
           />
         </div>
       </div>

diff --git a/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
@@ -1,13 +1,14 @@
 import { ImageProperties } from "../rep-tokens/cards/property-cards/ImageCard";
-import {
-  IsBeautifyingTokenCardLoadingProps,
-  IsRenderingTokenCardProps,
-  TokenCardElementsClasses,
-} from "../rep-tokens/cards/token-card/TokenCard";
-import {
-  IsBeautifyingTokenGroupCardLoadingProps, // IsRenderingTokenGroupCardProps,
-} from "../rep-tokens/cards/token-group-card/TokenGroupCard";
+// import {
+//   IsBeautifyingTokenCardLoadingProps,
+//   IsRenderingTokenCardProps,
+//   TokenCardElementsClasses,
+// } from "../rep-tokens/cards/token-card/TokenCard";
+// import {
+//   IsBeautifyingTokenGroupCardLoadingProps
+// } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
+import { BaseElementConfigProp, ImageElementConfigProp, TokenElementsConfigProps } from "../rep-tokens/types/Types";
 
 export const tokensCardPropertiesClasses = {
   container: "flex justify-center",
@@ -18,33 +19,14 @@ export const tokensCardPropertiesClasses = {
   },
 } as TokenGroupCardElementsClasses;
 
-export interface BaseConfigProp {
-  isRendering: boolean;
-  classes: {
-    container: string;
-    value: string;
-  };
-}
-
-export interface ImageConfigProp extends BaseConfigProp {
-  imageProperties: ImageProperties;
-}
-
-export interface TokenCardConfigProps {
-  balanceProps?: BaseConfigProp;
-  imageProps?: ImageConfigProp;
-  nameProps?: BaseConfigProp;
-  descriptionProps?: BaseConfigProp;
-  addressProps?: BaseConfigProp;
-}
-
 export const balanceProps = {
   isRendering: true,
   classes: {
     container: "bg-slate-300",
     value: "text-4xl mx-auto text-center",
   },
-} as BaseConfigProp;
+  isPrettyLoading: true,
+} as BaseElementConfigProp;
 
 export const imageProps = {
   isRendering: true,
@@ -53,93 +35,71 @@ export const imageProps = {
     value: "rounded mx-auto",
   },
   imageProperties: new ImageProperties("Token", 256, 256),
-} as ImageConfigProp;
+  isPrettyLoading: true,
+} as ImageElementConfigProp;
 
 export const nameProps = {
   isRendering: true,
   classes: {
     container: "bg-slate-300",
     value: "text-1xl text-center object-center mx-auto font-bold break-all",
   },
-} as BaseConfigProp;
+  isPrettyLoading: true,
+} as BaseElementConfigProp;
 
 export const descriptionProps = {
   isRendering: true,
   classes: {
     container: "bg-slate-300",
     value: "text-1xl mx-auto text-center break-words",
   },
-} as BaseConfigProp;
+  isPrettyLoading: true,
+} as BaseElementConfigProp;
 
 export const addressProps = {
   isRendering: true,
   classes: {
     container: "flex items-center justify-center bg-slate-300",
     value: "rounded mx-auto",
   },
-} as BaseConfigProp;
+  isPrettyLoading: true,
+} as BaseElementConfigProp;
 
-export const tokenCardElementsProps = {
+export const elementsProps = {
   balanceProps,
   imageProps,
   nameProps,
   descriptionProps,
   addressProps,
+} as TokenElementsConfigProps;
+
+export const tokenCardProps = {
+  isRendering: true,
+  classes: {
+    card: "bg-slate-600 p-5 m-4 w-64",
+  },
+  elementsProps,
 } as TokenCardConfigProps;
 
-export const tokenCardPropertiesClasses = {
-  card: "bg-slate-600 p-5 m-4 w-64",
-  baseTokenCardElementsClasses: {
-    balance: {
-      container: "bg-slate-300",
-      value: "text-4xl mx-auto text-center",
-    },
-    image: {
-      container: "bg-slate-300 p-1",
-      value: "rounded mx-auto",
-    },
-    name: {
-      container: "bg-slate-300",
-      value: "text-1xl text-center object-center mx-auto font-bold break-all",
-    },
-    description: {
-      container: "bg-slate-300",
-      value: "text-1xl mx-auto text-center break-words",
-    },
+export const tokenGroupCardProps = {
+  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-300",
-      value: "rounded mx-auto",
+      container: "flex items-center justify-center bg-slate-600",
+      value: "ml-1.5 text-${size} font-normal text-white",
     },
   },
-} as TokenCardElementsClasses;
-
-// export const tokensCardRenderProps = {
-//   card: true,
-//   address: true,
-// } as IsRenderingTokenGroupCardProps;
-
-export const isRenderingTokenCardProps = {
-  card: true,
-  isRenderingElementsProps: {
-    balance: true,
-    image: true,
-    name: true,
-    description: true,
-    address: true,
-  },
-} as IsRenderingTokenCardProps;
-
-export const tokensCardPrettifyLoadingProps = {
-  card: true,
-} as IsBeautifyingTokenGroupCardLoadingProps;
+  isPrettyLoading: true,
+  tokenCardProps,
+};
 
-export const tokenCardPrettifyLoadingProps = {
-  card: false,
-  isBeautifyLoadingElementsProps: {
-    balance: false,
-    image: false,
-    name: false,
-    description: false,
-    address: false,
-  },
-} as IsBeautifyingTokenCardLoadingProps;
+export interface TokenCardConfigProps {
+  isRendering: true;
+  classes: {
+    card: string;
+  };
+  elementsProps: TokenElementsConfigProps;
+  isPrettyLoading: true;
+}
diff --git a/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx
@@ -26,32 +26,32 @@ export interface BaseTokenCardElementsProps {
 export interface BalanceProp {
   value: bigint;
   classes?: ElementClasses;
-  isBeautifyLoading?: boolean;
+  isPrettyLoading?: boolean;
 }
 
 export interface NameProp {
   value: string;
   classes?: ElementClasses;
-  isBeautifyLoading?: boolean;
+  isPrettyLoading?: boolean;
 }
 
 export interface DescriptionProp {
   value: string;
   classes?: ElementClasses;
-  isBeautifyLoading?: boolean;
+  isPrettyLoading?: boolean;
 }
 
 export interface ImageProp {
   value: string;
   properties?: ImageProperties;
   classes?: ElementClasses;
-  isBeautifyLoading?: boolean;
+  isPrettyLoading?: boolean;
 }
 
 export interface AddressProp {
   value: string | undefined;
   classes?: ElementClasses;
-  isBeautifyLoading?: boolean;
+  isPrettyLoading?: boolean;
 }
 
 export const BaseTokenCard = ({
@@ -67,7 +67,7 @@ export const BaseTokenCard = ({
         <BalanceCard
           value={balanceProp.value}
           elementClasses={balanceProp.classes}
-          prettifyLoading={balanceProp.isBeautifyLoading}
+          prettifyLoading={balanceProp.isPrettyLoading}
         />
       ) : (
         <></>
@@ -77,7 +77,7 @@ export const BaseTokenCard = ({
           value={imageProp.value}
           imageProperties={imageProp.properties}
           elementClasses={imageProp.classes}
-          prettifyLoading={imageProp.isBeautifyLoading}
+          prettifyLoading={imageProp.isPrettyLoading}
         />
       ) : (
         <></>
@@ -86,7 +86,7 @@ export const BaseTokenCard = ({
         <StringCard
           value={nameProp.value}
           elementClasses={nameProp.classes}
-          prettifyLoading={nameProp.isBeautifyLoading}
+          prettifyLoading={nameProp.isPrettyLoading}
         />
       ) : (
         <></>
@@ -95,7 +95,7 @@ export const BaseTokenCard = ({
         <StringCard
           value={descriptionProp.value}
           elementClasses={descriptionProp.classes}
-          prettifyLoading={descriptionProp.isBeautifyLoading}
+          prettifyLoading={descriptionProp.isPrettyLoading}
         />
       ) : (
         <></>

diff --git a/packages/nextjs/components/rep-tokens/cards/token-card/TokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/token-card/TokenCard.tsx
@@ -13,7 +13,7 @@ import {
 export interface TokenCardProps {
   token: Token;
   elementsClasses?: TokenCardElementsClasses;
-  isBeautifyingTokenCardLoadingProps?: IsBeautifyingTokenCardLoadingProps;
+  isBeautifyingTokenCardLoadingProps?: boolean;
   balanceProp?: BalanceProp;
   nameProp?: NameProp;
   descriptionProp?: DescriptionProp;
@@ -39,10 +39,7 @@ export interface IsBeautifyingTokenCardLoadingProps {
 export const TokenCard = ({
   token,
   elementsClasses,
-  isBeautifyingTokenCardLoadingProps = {
-    card: false,
-    // isBeautifyLoadingElementsProps: { balance: false, image: false, name: false, description: false, address: false },
-  },
+  isBeautifyingTokenCardLoadingProps = false,
   balanceProp,
   nameProp,
   descriptionProp,
@@ -65,7 +62,7 @@ export const TokenCard = ({
   return (
     <>
       <div className={elementsClasses?.card}>
-        {isBeautifyingTokenCardLoadingProps?.card ? (
+        {isBeautifyingTokenCardLoadingProps ? (
           token?.image !== undefined &&
           token?.balance !== undefined &&
           token?.name !== undefined &&