colorized single card

packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx

@@ -1,10 +1,8 @@
 "use client";
 
+import { tokenCardConfigProps as singleCardConfig } from "./SingleCardConfig";
 import { useAccount } from "wagmi";
-import {
-  tokenGroupCardConfigProps as mainTokenGroupCardConfigProps,
-  tokenCardConfigProps,
-} from "~~/app/rep-tokens-demo/_components/MainTokensCardConfig";
+import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardConfig";
 import { tokenGroupCardConfigProps as mainTokenGroupOverlayCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig";
 import { tokenGroupCardConfigProps as navBarTokenGroupConfigProps } from "~~/app/rep-tokens-demo/_components/NavBarCardConfig";
 import { TokenCard } from "~~/components/rep-tokens/cards/token-card/TokenCard";
@@ -66,7 +64,7 @@ export function RepTokensDemo() {
     navBarTokenGroupCardProps.addressOutput = <Address props={navBarTokenGroupCardProps.addressProps} />;
   }
 
-  const singleCard0 = buildTokenCard(tokensData.tokens[0], tokensData.address, tokenCardConfigProps);
+  const singleCard0 = buildTokenCard(tokensData?.tokens[0], tokensData.address, singleCardConfig);
 
   return (
     <>

packages/nextjs/app/rep-tokens-demo/_components/SingleCardConfig.tsx

@@ -0,0 +1,67 @@
+import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+import {
+  ImageValueCardConfigProp,
+  TokenCardConfigProps,
+  TokenCardValuesConfigProps,
+  ValueCardConfigProps,
+} from "../../../components/rep-tokens/types/Types";
+
+export const balanceProps = {
+  isRendering: true,
+  classes: {
+    card: "bg-red-300 rounded-lg bg-slate-300",
+    value: "text-4xl mx-auto text-center text-black",
+  },
+  isPrettyLoading: true,
+} as ValueCardConfigProps;
+
+export const imageProps = {
+  isRendering: true,
+  classes: {
+    card: "bg-cyan-300 rounded-lg bg-slate-300 p-1",
+    value: "rounded-lg mx-auto",
+  },
+  imageProperties: new ImageProps("Token", 256, 256),
+  isPrettyLoading: true,
+} as ImageValueCardConfigProp;
+
+export const nameProps = {
+  isRendering: true,
+  classes: {
+    card: "bg-lime-300 rounded-lg bg-slate-300",
+    value: "text-1xl text-center object-center mx-auto font-bold break-all text-black",
+  },
+  isPrettyLoading: true,
+} as ValueCardConfigProps;
+
+export const descriptionProps = {
+  isRendering: true,
+  classes: {
+    card: "bg-violet-300 rounded-lg bg-slate-300",
+    value: "text-1xl mx-auto text-center break-words text-black",
+  },
+  isPrettyLoading: true,
+} as ValueCardConfigProps;
+
+export const addressProps = {
+  isRendering: true,
+  classes: {
+    card: "bg-pink-300 rounded-lg flex items-center justify-center bg-slate-300",
+    value: " ml-1.5 text-base font-normal text-cyan-800",
+  },
+  isPrettyLoading: true,
+} as ValueCardConfigProps;
+
+export const tokenCardValuesProps = {
+  balanceProps,
+  imageProps,
+  nameProps,
+  descriptionProps,
+  addressProps,
+} as TokenCardValuesConfigProps;
+
+export const tokenCardConfigProps = {
+  isRendering: true,
+  cardClasses: "bg-slate-600 rounded-lg p-5 m-4 w-64",
+  valuesProps: tokenCardValuesProps,
+} as TokenCardConfigProps;

packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx

@@ -22,6 +22,8 @@ export function buildTokenGroupCard(config: TokenGroupCardConfigProps, tokenCard
 }
 
 export function buildTokenCard(token: Token, address?: string, tokenCardProps?: TokenCardConfigProps) {
+  if (!token) return {} as TokenCardProps;
+
   return {
     isPrettyLoading: tokenCardProps?.isPrettyLoading,
     cardClasses: tokenCardProps?.cardClasses,