better optional rendering of components

ATXDAO · Jan 26, 2024 · e429ba3 · e429ba3
1 parent 5e49fac
commit e429ba3
Show file tree

Hide file tree

Showing 8 changed files with 231 additions and 117 deletions.
diff --git a/packages/nextjs/components/rep-tokens-demo/Index.tsx b/packages/nextjs/components/rep-tokens-demo/Index.tsx
@@ -2,34 +2,34 @@ 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 {
   tokenCardPrettifyLoadingProps as isBeautifyingMainTokenCardLoadingProps,
-  tokensCardPrettifyLoadingProps as isBeautifyingMainTokenGroupCardLoadingProps,
-  isRenderingTokenCardProps as isRenderingMainTokenCardProps,
-  tokensCardRenderProps as isRenderingMainTokenGroupCardProps,
+  tokensCardPrettifyLoadingProps as isBeautifyingMainTokenGroupCardLoadingProps, // isRenderingTokenCardProps as isRenderingMainTokenCardProps,
+  // tokensCardRenderProps as isRenderingMainTokenGroupCardProps,
   tokenCardPropertiesClasses as mainTokenCardPropertiesClasses,
   tokensCardPropertiesClasses as mainTokenGroupCardElementsClassess,
 } 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 {
+//   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 navBarCardImageProperties = new ImageProperties("Token", 64, 64);
   const mainCardImageProperties = new ImageProperties("Token", 256, 256);
 
   const { address } = useAccount();
@@ -40,36 +40,38 @@ export const Index = () => {
     tokensData.tokens[i].image = tokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
   }
 
-  const navBarTokenCard = buildTokenGroupCard(
-    tokensData.tokens,
-    tokensData.address,
-    navBarCardImageProperties,
-    navBarElementsClasses,
-    isRenderingNavBarCardProps,
-    isBeautifyingNavBarLoadingProps,
-  );
+  // const navBarTokenCard = buildTokenGroupCard(
+  //   tokensData.tokens,
+  //   tokensData.address,
+  //   navBarCardImageProperties,
+  //   navBarElementsClasses,
+  //   isRenderingNavBarCardProps,
+  //   isBeautifyingNavBarLoadingProps,
+  // );
 
   const mainTokenGroupCard = buildTokenGroupCard(
     tokensData.tokens,
     tokensData.address,
     mainCardImageProperties,
     mainTokenCardPropertiesClasses,
-    isRenderingMainTokenCardProps,
+    // isRenderingMainTokenCardProps,
     isBeautifyingMainTokenCardLoadingProps,
   );
 
-  const mainNumberOverlayTokenCard = buildTokenGroupCard(
-    tokensData.tokens,
-    tokensData.address,
-    mainCardImageProperties,
-    mainNumberOverlayTokenCardPropertiesClasses,
-    isRenderingMainTokenCardOverlayProps,
-    isBeautifyingMainTokenCardOverlayLoadingProps,
-  );
+  // const mainNumberOverlayTokenCard = buildTokenGroupCard(
+  //   tokensData.tokens,
+  //   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] ">
+      {/* <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}
@@ -79,20 +81,20 @@ export const Index = () => {
             isBeautifyingTokenGroupCardLoadingProps={isBeuatyingNavBarTokenGroupCardLoadingProps}
           />
         </div>
-      </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>
           <TokenGroupCard
             address={tokensData.address}
             tokenCardsProps={mainTokenGroupCard}
             elementsClasses={mainTokenGroupCardElementsClassess}
-            isRenderingTokenGroupCardProps={isRenderingMainTokenGroupCardProps}
+            // 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>
           <TokenGroupCard
@@ -103,7 +105,7 @@ export const Index = () => {
             isBeautifyingTokenGroupCardLoadingProps={mainNumberOverlayTokensCardPrettifyLoadingProps}
           />
         </div>
-      </div>
+      </div> */}
     </>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
@@ -4,8 +4,7 @@ import {
   TokenCardElementsClasses,
 } from "../rep-tokens/cards/token-card/TokenCard";
 import {
-  IsBeautifyingTokenGroupCardLoadingProps,
-  IsRenderingTokenGroupCardProps,
+  IsBeautifyingTokenGroupCardLoadingProps, // IsRenderingTokenGroupCardProps,
 } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 
@@ -44,10 +43,10 @@ export const tokenCardPropertiesClasses = {
   },
 } as TokenCardElementsClasses;
 
-export const tokensCardRenderProps = {
-  card: true,
-  address: true,
-} as IsRenderingTokenGroupCardProps;
+// export const tokensCardRenderProps = {
+//   card: true,
+//   address: true,
+// } as IsRenderingTokenGroupCardProps;
 
 export const isRenderingTokenCardProps = {
   card: true,

diff --git a/packages/nextjs/components/rep-tokens-demo/MainTokensCardWithNumberOverlayConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardWithNumberOverlayConfig.tsx
@@ -4,8 +4,7 @@ import {
   TokenCardElementsClasses,
 } from "../rep-tokens/cards/token-card/TokenCard";
 import {
-  IsBeautifyingTokenGroupCardLoadingProps,
-  IsRenderingTokenGroupCardProps,
+  IsBeautifyingTokenGroupCardLoadingProps, // IsRenderingTokenGroupCardProps,
 } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 
@@ -33,10 +32,10 @@ export const tokenCardPropertiesClasses = {
   },
 } as TokenCardElementsClasses;
 
-export const tokensCardRenderProps = {
-  card: true,
-  address: true,
-} as IsRenderingTokenGroupCardProps;
+// export const tokensCardRenderProps = {
+//   card: true,
+//   address: true,
+// } as IsRenderingTokenGroupCardProps;
 
 export const isRenderingTokenCardProps = {
   card: true,

diff --git a/packages/nextjs/components/rep-tokens-demo/NavBarCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/NavBarCardConfig.tsx
@@ -4,8 +4,7 @@ import {
   TokenCardElementsClasses,
 } from "../rep-tokens/cards/token-card/TokenCard";
 import {
-  IsBeautifyingTokenGroupCardLoadingProps,
-  IsRenderingTokenGroupCardProps,
+  IsBeautifyingTokenGroupCardLoadingProps, // IsRenderingTokenGroupCardProps,
 } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 
@@ -31,10 +30,10 @@ export const tokenCardPropertiesClasses = {
   },
 } as TokenCardElementsClasses;
 
-export const tokensCardRenderProps = {
-  card: true,
-  address: true,
-} as IsRenderingTokenGroupCardProps;
+// export const tokensCardRenderProps = {
+//   card: true,
+//   address: true,
+// } as IsRenderingTokenGroupCardProps;
 
 export const isRenderingTokenCardProps = {
   card: 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
@@ -12,7 +12,43 @@ export interface BaseTokenCardProps {
   imageProperties?: ImageProperties;
   elementsClasses?: BaseTokenCardElementsClasses;
   isBeautifyLoadingElementsProps?: BaseTokenCardElementsSetOfBooleans;
-  isRenderingElementsProps?: BaseTokenCardElementsSetOfBooleans;
+  // isRenderingElementsProps?: BaseTokenCardElementsSetOfBooleans;
+  balanceProp?: BalanceProp;
+  nameProp?: NameProp;
+  descriptionProp?: DescriptionProp;
+  imageProp?: ImageProp;
+  addressProp?: AddressProp;
+}
+
+export interface BalanceProp {
+  value: bigint;
+  classes?: ElementClasses;
+  isBeautifyLoading?: boolean;
+}
+
+export interface NameProp {
+  value: string;
+  classes?: ElementClasses;
+  isBeautifyLoading?: boolean;
+}
+
+export interface DescriptionProp {
+  value: string;
+  classes?: ElementClasses;
+  isBeautifyLoading?: boolean;
+}
+
+export interface ImageProp {
+  value: string;
+  properties?: ImageProperties;
+  classes?: ElementClasses;
+  isBeautifyLoading?: boolean;
+}
+
+export interface AddressProp {
+  value: string | undefined;
+  classes?: ElementClasses;
+  isBeautifyLoading?: boolean;
 }
 
 export interface BaseTokenCardElementsClasses {
@@ -32,25 +68,69 @@ export interface BaseTokenCardElementsSetOfBooleans {
 }
 
 export const BaseTokenCard = ({
-  token,
+  // token,
   address,
-  imageProperties,
+  // imageProperties,
   elementsClasses,
-  isRenderingElementsProps = { balance: true, image: true, name: true, description: true, address: true },
-  isBeautifyLoadingElementsProps = { balance: false, image: false, name: false, description: false, address: false },
+  // isBeautifyLoadingElementsProps = { balance: false, image: false, name: false, description: false, address: false },
+  balanceProp,
+  nameProp,
+  descriptionProp,
+  imageProp,
+  addressProp,
 }: BaseTokenCardProps) => {
   return (
     <>
-      {isRenderingElementsProps.balance ? (
+      {balanceProp ? (
+        <BalanceCard
+          value={balanceProp.value}
+          elementClasses={balanceProp.classes}
+          prettifyLoading={balanceProp.isBeautifyLoading}
+        />
+      ) : (
+        <></>
+      )}
+      {imageProp ? (
+        <ImageCard
+          value={imageProp.value}
+          imageProperties={imageProp.properties}
+          elementClasses={imageProp.classes}
+          prettifyLoading={imageProp.isBeautifyLoading}
+        />
+      ) : (
+        <></>
+      )}
+      {nameProp ? (
+        <StringCard
+          value={nameProp.value}
+          elementClasses={nameProp.classes}
+          prettifyLoading={nameProp.isBeautifyLoading}
+        />
+      ) : (
+        <></>
+      )}
+      {descriptionProp ? (
+        <StringCard
+          value={descriptionProp.value}
+          elementClasses={descriptionProp.classes}
+          prettifyLoading={descriptionProp.isBeautifyLoading}
+        />
+      ) : (
+        <></>
+      )}
+      {addressProp ? <Address address={address} propertyClasses={elementsClasses?.address} /> : <></>}
+
+      {/* {isRenderingElementsProps.balance ? (
         <BalanceCard
           value={token.balance}
           elementClasses={elementsClasses?.balance}
           prettifyLoading={isBeautifyLoadingElementsProps?.balance}
         />
       ) : (
         <></>
-      )}
-      {isRenderingElementsProps.image ? (
+      )} */}
+
+      {/* {isRenderingElementsProps.image ? (
         <ImageCard
           value={token.image}
           imageProperties={imageProperties}
@@ -82,7 +162,7 @@ export const BaseTokenCard = ({
         <Address address={address} propertyClasses={elementsClasses?.address} />
       ) : (
         <></>
-      )}
+      )} */}
     </>
   );
 };