abstracted address as optional in tokengroupcard

ATXDAO · Jan 29, 2024 · ab266f4 · ab266f4
1 parent 0c0de67
commit ab266f4
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 38 deletions.
diff --git a/packages/nextjs/components/rep-tokens-demo/Index.tsx b/packages/nextjs/components/rep-tokens-demo/Index.tsx
@@ -15,6 +15,7 @@ import { tokenGroupCardConfigProps } from "./MainTokensCardConfig";
 //   tokensCardPropertiesClasses as navBarTokenGroupCardElementsClasses,
 // } from "./NavBarCardConfig";
 import { useAccount } from "wagmi";
+import { Address } from "~~/components/scaffold-eth";
 
 export const Index = () => {
   const { address } = useAccount();
@@ -40,7 +41,11 @@ export const Index = () => {
     tokensData.address,
     tokenGroupCardConfigProps.tokenCardProps,
   );
-  const mainTokenGroupCard = buildTokenGroupCard(tokenGroupCardConfigProps, mainTokenCards, tokensData.address);
+  const mainTokenGroupCardProps = buildTokenGroupCard(tokenGroupCardConfigProps, mainTokenCards, tokensData.address);
+
+  if (tokenGroupCardConfigProps.address?.isRendering) {
+    mainTokenGroupCardProps.addressOutput = <Address props={mainTokenGroupCardProps.addressProps} />;
+  }
 
   return (
     <>
@@ -57,7 +62,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={mainTokenGroupCard} />
+          <TokenGroupCard props={mainTokenGroupCardProps} />
         </div>
       </div>
 

diff --git a/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
@@ -69,18 +69,18 @@ export const tokenCardProps = {
 
 export const tokenGroupCardConfigProps = {
   isRendering: true,
-  classes: {
-    tokenCardsContainer: "flex justify-center bg bg-slate-1000 p-3",
-    card: "bg-slate-800 flex flex-col items-center",
+  cardClasses: {
+    card: "bg-slate-900 flex flex-col items-center p-5",
+    value: "bg-slate-800 flex justify-center p-5",
   },
   address: {
     isRendering: true,
     classes: {
-      card: "flex items-center justify-center bg-slate-300",
+      card: "m-5 flex items-center justify-center bg-slate-300",
       value: "rounded mx-auto",
     },
     isPrettyLoading: true,
-  },
+  } as ValueCardConfigProps,
 
   isPrettyLoading: true,
   tokenCardProps,

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
@@ -2,19 +2,13 @@ import { CardClasses } from "../../types/Types";
 import { TokenCard } from "../token-card/TokenCard";
 import { TokenCardProps } from "../token-card/TokenCard";
 import { StringCardProps } from "../value-cards/StringCard";
-import { Address } from "~~/components/scaffold-eth";
 
 export interface TokenGroupProps {
-  address: StringCardProps;
-  tokenCardsProps: TokenCardProps[];
-  classes?: TokenGroupCardElementsClasses;
+  cardClasses?: CardClasses;
   isPrettyLoading?: boolean;
-}
-
-export interface TokenGroupCardElementsClasses {
-  card?: string;
-  tokenCardsContainer?: string;
-  address?: CardClasses;
+  addressProps?: StringCardProps;
+  tokenCardsProps: TokenCardProps[];
+  addressOutput?: JSX.Element;
 }
 
 export interface TokenGroupCardInternalProps {
@@ -27,10 +21,10 @@ export const TokenGroupCard = ({ props }: TokenGroupCardInternalProps) => {
   ));
 
   let output = (
-    <>
-      <Address props={props.address}></Address>
-      <div className={props.classes?.tokenCardsContainer}>{tokenCards}</div>
-    </>
+    <div>
+      {props.addressOutput}
+      <div className={props.cardClasses?.value}>{tokenCards}</div>
+    </div>
   );
 
   if (props.isPrettyLoading) {
@@ -58,7 +52,7 @@ export const TokenGroupCard = ({ props }: TokenGroupCardInternalProps) => {
 
   return (
     <>
-      <div className={props?.classes?.card}>{output}</div>
+      <div className={props?.cardClasses?.card}>{output}</div>
     </>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens/types/Types.tsx b/packages/nextjs/components/rep-tokens/types/Types.tsx
@@ -1,5 +1,4 @@
 import { ImageProps } from "../cards/value-cards/ImageCard";
-import { StringCardProps } from "../cards/value-cards/StringCard";
 
 export interface CardClasses {
   card?: string;
@@ -33,13 +32,8 @@ export interface TokenCardConfigProps {
 
 export interface TokenGroupCardConfigProps {
   isRendering: boolean;
-  classes: TokenGroupCardClasses;
-  address: StringCardProps;
+  cardClasses: CardClasses;
+  address?: ValueCardConfigProps;
   isPrettyLoading: boolean;
   tokenCardProps: TokenCardConfigProps;
 }
-
-export interface TokenGroupCardClasses {
-  tokenCardsContainer: string;
-  card: string;
-}
diff --git a/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx b/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx
@@ -7,13 +7,15 @@ 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,
+    cardClasses: config.cardClasses,
+    addressProps: config?.address?.isRendering
+      ? {
+          value: address,
+          classes: config?.address?.classes,
+          isPrettyLoading: config?.isPrettyLoading,
+        }
+      : undefined,
+    isPrettyLoading: config?.isPrettyLoading,
   };
 
   return tokenGroupCard;
@@ -69,6 +71,5 @@ export function buildTokenCards(tokens: Token[], address?: string, tokenCardProp
     arr.push(tokenCardProp);
   }
 
-  console.log(arr);
   return arr;
 }