working abstraction of token config

ATXDAO · Jan 26, 2024 · 51da217 · 51da217
1 parent e429ba3
commit 51da217
Show file tree

Hide file tree

Showing 11 changed files with 173 additions and 155 deletions.
diff --git a/packages/nextjs/components/rep-tokens-demo/Index.tsx b/packages/nextjs/components/rep-tokens-demo/Index.tsx
@@ -1,36 +1,33 @@
-import { ImageProperties } from "../rep-tokens/cards/property-cards/ImageCard";
+// import { ImageProperties } from "../rep-tokens/cards/property-cards/ImageCard";
 import { TokenGroupCard } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 import { useRepTokens } from "../rep-tokens/hooks/Hooks";
-import { buildTokenGroupCard } from "../rep-tokens/utils/buildTokensCard";
-// import { BalanceProp } from "../rep-tokens/cards/token-card/BaseTokenCard";
+import {
+  buildTokenGroupCard, //  RenderProps, TokenElementsClasses
+} from "../rep-tokens/utils/buildTokensCard";
 import {
   tokenCardPrettifyLoadingProps as isBeautifyingMainTokenCardLoadingProps,
   tokensCardPrettifyLoadingProps as isBeautifyingMainTokenGroupCardLoadingProps, // isRenderingTokenCardProps as isRenderingMainTokenCardProps,
-  // tokensCardRenderProps as isRenderingMainTokenGroupCardProps,
   tokenCardPropertiesClasses as mainTokenCardPropertiesClasses,
   tokensCardPropertiesClasses as mainTokenGroupCardElementsClassess,
+  tokenCardElementsProps,
 } from "./MainTokensCardConfig";
 // import {
 //   tokenCardPrettifyLoadingProps as isBeautifyingMainTokenCardOverlayLoadingProps,
-//   isRenderingTokenCardProps as isRenderingMainTokenCardOverlayProps,
 //   tokenCardPropertiesClasses as mainNumberOverlayTokenCardPropertiesClasses,
 //   tokensCardPropertiesClasses as mainNumberOverlayTokensCardElementsClasses,
 //   tokensCardPrettifyLoadingProps as mainNumberOverlayTokensCardPrettifyLoadingProps,
-//   // tokensCardRenderProps as mainNumberOverlayTokensCardRenderProps,
 // } from "./MainTokensCardWithNumberOverlayConfig";
 // import {
 //   tokenCardPrettifyLoadingProps as isBeautifyingNavBarLoadingProps,
 //   tokensCardPrettifyLoadingProps as isBeuatyingNavBarTokenGroupCardLoadingProps,
-//   isRenderingTokenCardProps as isRenderingNavBarCardProps,
-//   // tokensCardRenderProps as isRenderingNavBarTokenGroupCardProps,
 //   tokenCardPropertiesClasses as navBarElementsClasses,
 //   tokensCardPropertiesClasses as navBarTokenGroupCardElementsClasses,
 // } from "./NavBarCardConfig";
 import { useAccount } from "wagmi";
 
 export const Index = () => {
   // const navBarCardImageProperties = new ImageProperties("Token", 64, 64);
-  const mainCardImageProperties = new ImageProperties("Token", 256, 256);
+  // const mainCardImageProperties = new ImageProperties("Token", 256, 256);
 
   const { address } = useAccount();
 
@@ -42,33 +39,35 @@ export const Index = () => {
 
   // const navBarTokenCard = buildTokenGroupCard(
   //   tokensData.tokens,
-  //   tokensData.address,
   //   navBarCardImageProperties,
   //   navBarElementsClasses,
-  //   isRenderingNavBarCardProps,
   //   isBeautifyingNavBarLoadingProps,
+  //   false,
+  //   false,
+  //   undefined,
+
   // );
 
+  console.log(tokenCardElementsProps);
+
   const mainTokenGroupCard = buildTokenGroupCard(
     tokensData.tokens,
     tokensData.address,
-    mainCardImageProperties,
+    tokenCardElementsProps,
     mainTokenCardPropertiesClasses,
-    // isRenderingMainTokenCardProps,
     isBeautifyingMainTokenCardLoadingProps,
   );
 
   // const mainNumberOverlayTokenCard = buildTokenGroupCard(
   //   tokensData.tokens,
+  //   true,
+  //   true,
   //   tokensData.address,
   //   mainCardImageProperties,
   //   mainNumberOverlayTokenCardPropertiesClasses,
-  //   isRenderingMainTokenCardOverlayProps,
   //   isBeautifyingMainTokenCardOverlayLoadingProps,
   // );
 
-  console.log(mainTokenGroupCard);
-
   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] ">
@@ -77,7 +76,6 @@ export const Index = () => {
             address={tokensData.address}
             tokenCardsProps={navBarTokenCard}
             elementsClasses={navBarTokenGroupCardElementsClasses}
-            isRenderingTokenGroupCardProps={isRenderingNavBarTokenGroupCardProps}
             isBeautifyingTokenGroupCardLoadingProps={isBeuatyingNavBarTokenGroupCardLoadingProps}
           />
         </div>
@@ -89,19 +87,17 @@ export const Index = () => {
             address={tokensData.address}
             tokenCardsProps={mainTokenGroupCard}
             elementsClasses={mainTokenGroupCardElementsClassess}
-            // isRenderingTokenGroupCardProps={isRenderingMainTokenGroupCardProps}
             isBeautifyingTokenGroupCardLoadingProps={isBeautifyingMainTokenGroupCardLoadingProps}
           />
         </div>
       </div>
-      {/* 
-      <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 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
             address={tokensData.address}
             tokenCardsProps={mainNumberOverlayTokenCard}
             elementsClasses={mainNumberOverlayTokensCardElementsClasses}
-            isRenderingTokenGroupCardProps={mainNumberOverlayTokensCardRenderProps}
             isBeautifyingTokenGroupCardLoadingProps={mainNumberOverlayTokensCardPrettifyLoadingProps}
           />
         </div>

diff --git a/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
@@ -1,3 +1,4 @@
+import { ImageProperties } from "../rep-tokens/cards/property-cards/ImageCard";
 import {
   IsBeautifyingTokenCardLoadingProps,
   IsRenderingTokenCardProps,
@@ -17,6 +18,75 @@ 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;
+
+export const imageProps = {
+  isRendering: true,
+  classes: {
+    container: "bg-slate-300 p-1",
+    value: "rounded mx-auto",
+  },
+  imageProperties: new ImageProperties("Token", 256, 256),
+} as ImageConfigProp;
+
+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;
+
+export const descriptionProps = {
+  isRendering: true,
+  classes: {
+    container: "bg-slate-300",
+    value: "text-1xl mx-auto text-center break-words",
+  },
+} as BaseConfigProp;
+
+export const addressProps = {
+  isRendering: true,
+  classes: {
+    container: "flex items-center justify-center bg-slate-300",
+    value: "rounded mx-auto",
+  },
+} as BaseConfigProp;
+
+export const tokenCardElementsProps = {
+  balanceProps,
+  imageProps,
+  nameProps,
+  descriptionProps,
+  addressProps,
+} as TokenCardConfigProps;
+
 export const tokenCardPropertiesClasses = {
   card: "bg-slate-600 p-5 m-4 w-64",
   baseTokenCardElementsClasses: {

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,4 +1,4 @@
-import { ElementClasses } from "../types/Types";
+import { ElementClasses } from "../../types/Types";
 
 type TBalanceCardProps = {
   value: bigint;

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,5 +1,5 @@
 import Image from "next/image";
-import { ElementClasses } from "../types/Types";
+import { ElementClasses } from "../../types/Types";
 
 type TImageCardProps = {
   value: string;

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,4 +1,4 @@
-import { ElementClasses } from "../types/Types";
+import { ElementClasses } from "../../types/Types";
 
 type TStringCardProps = {
   value: string;

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,18 +1,21 @@
 import { Token } from "../../hooks/Hooks";
+import { ElementClasses } from "../../types/Types";
 import { BalanceCard } from "../property-cards/BalanceCard";
 import { ImageCard } from "../property-cards/ImageCard";
 import { ImageProperties } from "../property-cards/ImageCard";
 import { StringCard } from "../property-cards/StringCard";
-import { ElementClasses } from "../types/Types";
 import { Address } from "~~/components/scaffold-eth";
 
 export interface BaseTokenCardProps {
   token: Token;
-  address?: string;
-  imageProperties?: ImageProperties;
-  elementsClasses?: BaseTokenCardElementsClasses;
-  isBeautifyLoadingElementsProps?: BaseTokenCardElementsSetOfBooleans;
-  // isRenderingElementsProps?: BaseTokenCardElementsSetOfBooleans;
+  balanceProp?: BalanceProp;
+  nameProp?: NameProp;
+  descriptionProp?: DescriptionProp;
+  imageProp?: ImageProp;
+  addressProp?: AddressProp;
+}
+
+export interface BaseTokenCardElementsProps {
   balanceProp?: BalanceProp;
   nameProp?: NameProp;
   descriptionProp?: DescriptionProp;
@@ -51,28 +54,7 @@ export interface AddressProp {
   isBeautifyLoading?: boolean;
 }
 
-export interface BaseTokenCardElementsClasses {
-  balance: ElementClasses;
-  name: ElementClasses;
-  description: ElementClasses;
-  image: ElementClasses;
-  address: ElementClasses;
-}
-
-export interface BaseTokenCardElementsSetOfBooleans {
-  balance: boolean;
-  name: boolean;
-  description: boolean;
-  image: boolean;
-  address: boolean;
-}
-
 export const BaseTokenCard = ({
-  // token,
-  address,
-  // imageProperties,
-  elementsClasses,
-  // isBeautifyLoadingElementsProps = { balance: false, image: false, name: false, description: false, address: false },
   balanceProp,
   nameProp,
   descriptionProp,
@@ -118,51 +100,7 @@ export const BaseTokenCard = ({
       ) : (
         <></>
       )}
-      {addressProp ? <Address address={address} propertyClasses={elementsClasses?.address} /> : <></>}
-
-      {/* {isRenderingElementsProps.balance ? (
-        <BalanceCard
-          value={token.balance}
-          elementClasses={elementsClasses?.balance}
-          prettifyLoading={isBeautifyLoadingElementsProps?.balance}
-        />
-      ) : (
-        <></>
-      )} */}
-
-      {/* {isRenderingElementsProps.image ? (
-        <ImageCard
-          value={token.image}
-          imageProperties={imageProperties}
-          elementClasses={elementsClasses?.image}
-          prettifyLoading={isBeautifyLoadingElementsProps?.image}
-        />
-      ) : (
-        <></>
-      )}
-      {isRenderingElementsProps.name ? (
-        <StringCard
-          value={token.name}
-          elementClasses={elementsClasses?.name}
-          prettifyLoading={isBeautifyLoadingElementsProps?.name}
-        />
-      ) : (
-        <></>
-      )}
-      {isRenderingElementsProps.description ? (
-        <StringCard
-          value={token.description}
-          elementClasses={elementsClasses?.description}
-          prettifyLoading={isBeautifyLoadingElementsProps?.description}
-        />
-      ) : (
-        <></>
-      )}
-      {isRenderingElementsProps.address ? (
-        <Address address={address} propertyClasses={elementsClasses?.address} />
-      ) : (
-        <></>
-      )} */}
+      {addressProp ? <Address address={addressProp.value} propertyClasses={addressProp?.classes} /> : <></>}
     </>
   );
 };