added address to renderable props

packages/nextjs/components/rep-tokens-demo/Index.tsx

@@ -1,10 +1,10 @@
 import { useRepTokens } from "./tokens/Hooks";
 import { Token } from "./tokens/Hooks";
-import { TBaseTokenCardBooleanSet } from "./tokens/token-card/BaseTokenCard";
 import { ImageProperties } from "./tokens/token-card/ImageCard";
-import { TTokenCardPrettifyLoadingProps } from "./tokens/token-card/TokenCard";
-import { TTokenCardPropss } from "./tokens/token-card/TokenCard";
-import { TTokenCardPropertiesClasses } from "./tokens/token-card/TokenCard";
+import { TBaseTokenCardBooleanSet } from "./tokens/token-card/TokenCard";
+import { TTokenCardPrettifyLoadingProps } from "./tokens/token-card/TokenCardWithContainer";
+import { TTokenCardPropertiesClasses } from "./tokens/token-card/TokenCardWithContainer";
+import { TTokenCardProps } from "./tokens/token-card/TokenCardWithContainer";
 import {
   tokenCardPrettifyLoadingProps as mainTokenCardPrettifyLoadingProps,
   tokenCardPropertiesClasses as mainTokenCardPropertiesClasses,
@@ -34,15 +34,17 @@ import { useAccount } from "wagmi";
 
 function buildTokensCard(
   tokens: Token[],
+  address?: string,
   imageProperties?: ImageProperties,
   propertiesClasses?: TTokenCardPropertiesClasses,
   renderProps?: TBaseTokenCardBooleanSet,
   prettifyLoadingProps?: TTokenCardPrettifyLoadingProps,
 ) {
   const arr = [];
   for (let i = 0; i < tokens.length; i++) {
-    const tokenCardProp: TTokenCardPropss = {
+    const tokenCardProp: TTokenCardProps = {
       token: tokens[i],
+      address,
       imageProperties,
       prettifyLoadingProps: prettifyLoadingProps,
       propertiesClasses,
@@ -69,6 +71,7 @@ export const Index = () => {
 
   const navBarTokenCard = buildTokensCard(
     tokensData.tokens,
+    tokensData.address,
     navBarCardImageProperties,
     navBarTokenCardPropertiesClasses,
     navBarTokenCardRenderProps,
@@ -77,6 +80,7 @@ export const Index = () => {
 
   const mainTokenCard = buildTokensCard(
     tokensData.tokens,
+    tokensData.address,
     mainCardImageProperties,
     mainTokenCardPropertiesClasses,
     mainTokenCardRenderProps,
@@ -85,6 +89,7 @@ export const Index = () => {
 
   const mainNumberOverlayTokenCard = buildTokensCard(
     tokensData.tokens,
+    tokensData.address,
     mainCardImageProperties,
     mainNumberOverlayTokenCardPropertiesClasses,
     mainNumberOverlayTokenCardRenderProps,

packages/nextjs/components/rep-tokens-demo/tokens/token-card/BalanceCard.tsx

@@ -1,4 +1,4 @@
-import { TContainerAndValuePair } from "./BaseTokenCard";
+import { TContainerAndValuePair } from "./TokenCard";
 
 type TBalanceCardProps = {
   value: bigint;

packages/nextjs/components/rep-tokens-demo/tokens/token-card/ImageCard.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { TContainerAndValuePair } from "./BaseTokenCard";
+import { TContainerAndValuePair } from "./TokenCard";
 
 type TImageCardProps = {
   value: string;

packages/nextjs/components/rep-tokens-demo/tokens/token-card/StringCard.tsx

@@ -1,4 +1,4 @@
-import { TContainerAndValuePair } from "./BaseTokenCard";
+import { TContainerAndValuePair } from "./TokenCard";
 
 type TStringCardProps = {
   value: string;

packages/nextjs/components/rep-tokens-demo/tokens/token-card/TokenCard.tsx

@@ -1,70 +1,88 @@
 import { Token } from "../Hooks";
-import {
-  BaseTokenCard,
-  TBaseTokenCardBooleanSet, // TBaseTokenCardRenderSettings, // TBaseTokenCardPrettifyLoadingProps,
-  TBaseTokenCardPropertiesClasses,
-} from "./BaseTokenCard";
+import { BalanceCard } from "./BalanceCard";
+import { ImageCard } from "./ImageCard";
 import { ImageProperties } from "./ImageCard";
+import { StringCard } from "./StringCard";
+import { Address } from "~~/components/scaffold-eth";
 
-export interface TTokenCardPropss {
-  token: Token;
-  imageProperties?: ImageProperties;
-  propertiesClasses?: TTokenCardPropertiesClasses;
-  prettifyLoadingProps?: TTokenCardPrettifyLoadingProps;
-  renderProps?: TBaseTokenCardBooleanSet;
-}
+export type TContainerAndValuePair = {
+  container: string;
+  value: string;
+};
 
-export type TTokenCardProps = {
+type TTokenProps = {
   token: Token;
+  address?: string;
   imageProperties?: ImageProperties;
-  propertiesClasses?: TTokenCardPropertiesClasses;
-  prettifyLoadingProps?: TTokenCardPrettifyLoadingProps;
+  propertiesClasses?: TBaseTokenCardPropertiesClasses;
+  prettifyLoadingProps?: TBaseTokenCardBooleanSet;
   renderProps?: TBaseTokenCardBooleanSet;
 };
 
-export type TTokenCardPropertiesClasses = {
-  card: string;
-  baseTokenCardPropertyClasses?: TBaseTokenCardPropertiesClasses;
+export type TBaseTokenCardPropertiesClasses = {
+  balance: TContainerAndValuePair;
+  name: TContainerAndValuePair;
+  description: TContainerAndValuePair;
+  image: TContainerAndValuePair;
+  address: TContainerAndValuePair;
 };
 
-export type TTokenCardPrettifyLoadingProps = {
-  card: boolean;
-  baseTokenCardPrettifyLoadingProps: TBaseTokenCardBooleanSet;
+export type TBaseTokenCardBooleanSet = {
+  balance: boolean;
+  name: boolean;
+  description: boolean;
+  image: boolean;
+  address: boolean;
 };
 
-export const DefaultTokenCard = ({
+export const BaseTokenCard = ({
   token,
+  address,
   imageProperties,
-  prettifyLoadingProps,
   propertiesClasses,
-  renderProps,
-}: TTokenCardProps) => {
-  const output = (
-    <>
-      <BaseTokenCard
-        token={token}
-        imageProperties={imageProperties}
-        propertiesClasses={propertiesClasses?.baseTokenCardPropertyClasses}
-        prettifyLoadingProps={prettifyLoadingProps?.baseTokenCardPrettifyLoadingProps}
-        renderProps={renderProps}
-      />
-    </>
-  );
-
+  prettifyLoadingProps,
+  renderProps = { balance: true, image: true, name: true, description: true, address: true },
+}: TTokenProps) => {
   return (
-    <div className={propertiesClasses?.card}>
-      {prettifyLoadingProps?.card ? (
-        token?.image !== undefined &&
-        token?.balance !== undefined &&
-        token?.name !== undefined &&
-        token?.description !== undefined ? (
-          <div>{output}</div>
-        ) : (
-          <>Loading Token...</>
-        )
+    <>
+      {renderProps.balance ? (
+        <BalanceCard
+          value={token.balance}
+          propertyClasses={propertiesClasses?.balance}
+          prettifyLoading={prettifyLoadingProps?.balance}
+        ></BalanceCard>
       ) : (
-        <div>{output}</div>
+        <></>
       )}
-    </div>
+      {renderProps.image ? (
+        <ImageCard
+          value={token.image}
+          imageProperties={imageProperties}
+          propertyClasses={propertiesClasses?.image}
+          prettifyLoading={prettifyLoadingProps?.image}
+        ></ImageCard>
+      ) : (
+        <></>
+      )}
+      {renderProps.name ? (
+        <StringCard
+          value={token.name}
+          propertyClasses={propertiesClasses?.name}
+          prettifyLoading={prettifyLoadingProps?.name}
+        ></StringCard>
+      ) : (
+        <></>
+      )}
+      {renderProps.description ? (
+        <StringCard
+          value={token.description}
+          propertyClasses={propertiesClasses?.description}
+          prettifyLoading={prettifyLoadingProps?.description}
+        ></StringCard>
+      ) : (
+        <></>
+      )}
+      {renderProps.address ? <Address address={address} propertyClasses={propertiesClasses?.address}></Address> : <></>}
+    </>
   );
 };

packages/nextjs/components/rep-tokens-demo/tokens/token-card/TokenCardWithContainer.tsx

@@ -0,0 +1,62 @@
+import { Token } from "../Hooks";
+import { ImageProperties } from "./ImageCard";
+import { BaseTokenCard, TBaseTokenCardBooleanSet, TBaseTokenCardPropertiesClasses } from "./TokenCard";
+
+export interface TTokenCardProps {
+  token: Token;
+  address?: string;
+  imageProperties?: ImageProperties;
+  propertiesClasses?: TTokenCardPropertiesClasses;
+  prettifyLoadingProps?: TTokenCardPrettifyLoadingProps;
+  renderProps?: TBaseTokenCardBooleanSet;
+}
+
+export type TTokenCardPropertiesClasses = {
+  card: string;
+  baseTokenCardPropertyClasses?: TBaseTokenCardPropertiesClasses;
+};
+
+export type TTokenCardPrettifyLoadingProps = {
+  card: boolean;
+  baseTokenCardPrettifyLoadingProps: TBaseTokenCardBooleanSet;
+};
+
+export const DefaultTokenCard = ({
+  token,
+  address,
+  imageProperties,
+  prettifyLoadingProps,
+  propertiesClasses,
+  renderProps,
+}: TTokenCardProps) => {
+  const output = (
+    <>
+      <BaseTokenCard
+        token={token}
+        address={address}
+        imageProperties={imageProperties}
+        propertiesClasses={propertiesClasses?.baseTokenCardPropertyClasses}
+        prettifyLoadingProps={prettifyLoadingProps?.baseTokenCardPrettifyLoadingProps}
+        renderProps={renderProps}
+      />
+    </>
+  );
+
+  return (
+    <div className={propertiesClasses?.card}>
+      {prettifyLoadingProps?.card ? (
+        token?.image !== undefined &&
+        token?.balance !== undefined &&
+        token?.name !== undefined &&
+        token?.description !== undefined &&
+        address !== undefined ? (
+          <div>{output}</div>
+        ) : (
+          <>Loading Token...</>
+        )
+      ) : (
+        <div>{output}</div>
+      )}
+    </div>
+  );
+};