added balance card support

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

@@ -1,14 +1,21 @@
 "use client";
 
 import { tokenCardConfigProps as singleCardConfig } from "./configs/SingleCardConfig";
+import { balanceConfigProps } from "./configs/values/BalanceCardConfig";
 import { useAccount } from "wagmi";
 import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/configs/MainTokensCardConfig";
 import { tokenGroupCardConfigProps as mainTokenGroupOverlayCardConfigProps } from "~~/app/rep-tokens-demo/_components/configs/MainTokensCardWithNumberOverlayConfig";
 import { tokenGroupCardConfigProps as navBarTokenGroupConfigProps } from "~~/app/rep-tokens-demo/_components/configs/NavBarCardConfig";
 import { TokenCard } from "~~/components/rep-tokens/cards/token-card/TokenCard";
 import { TokenGroupCard } from "~~/components/rep-tokens/cards/token-group-card/TokenGroupCard";
+import { BalanceCard } from "~~/components/rep-tokens/cards/value-cards/BalanceCard";
 import { useRepTokens } from "~~/components/rep-tokens/hooks/Hooks";
-import { buildTokenCard, buildTokenCards, buildTokenGroupCard } from "~~/components/rep-tokens/utils/buildTokensCard";
+import {
+  buildBalanceCard,
+  buildTokenCard,
+  buildTokenCards,
+  buildTokenGroupCard,
+} from "~~/components/rep-tokens/utils/buildTokensCard";
 import { Address } from "~~/components/scaffold-eth";
 
 export function RepTokensDemo() {
@@ -66,8 +73,16 @@ export function RepTokensDemo() {
 
   const singleCard0 = buildTokenCard(tokensData?.tokens[0], tokensData.address, singleCardConfig);
 
+  const balanceProps = buildBalanceCard(tokensData?.tokens[0]?.balance, balanceConfigProps);
+
   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>
+          <BalanceCard props={balanceProps} />
+        </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>
           <TokenCard props={singleCard0} />

packages/nextjs/app/rep-tokens-demo/_components/configs/values/BalanceCardConfig.ts

@@ -0,0 +1,10 @@
+import { ValueCardConfigProps } from "~~/components/rep-tokens/types/Types";
+
+export const balanceConfigProps = {
+  isRendering: true,
+  classes: {
+    card: "rounded-lg bg-slate-300",
+    value: "text-4xl mx-auto text-center text-black",
+  },
+  isPrettyLoading: true,
+} as ValueCardConfigProps;

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

@@ -1,7 +1,8 @@
 import { TokenCardProps } from "../cards/token-card/TokenCard";
 import { TokenGroupProps } from "../cards/token-group-card/TokenGroupCard";
+import { BigIntCardProps } from "../cards/value-cards/BalanceCard";
 import { Token } from "../hooks/Hooks";
-import { TokenCardConfigProps } from "../types/Types";
+import { TokenCardConfigProps, ValueCardConfigProps } from "../types/Types";
 import { TokenGroupCardConfigProps } from "../types/Types";
 
 export function buildTokenGroupCard(config: TokenGroupCardConfigProps, tokenCards: TokenCardProps[], address?: string) {
@@ -21,20 +22,28 @@ export function buildTokenGroupCard(config: TokenGroupCardConfigProps, tokenCard
   return tokenGroupCard;
 }
 
+export function buildBalanceCard(value: bigint, configProps?: ValueCardConfigProps) {
+  if (!value) return {} as BigIntCardProps;
+
+  return (
+    configProps?.isRendering
+      ? {
+          value,
+          classes: configProps?.classes,
+          isPrettyLoading: configProps?.isPrettyLoading,
+        }
+      : undefined
+  ) as BigIntCardProps;
+}
+
 export function buildTokenCard(token: Token, address?: string, tokenCardProps?: TokenCardConfigProps) {
   if (!token) return {} as TokenCardProps;
 
   return {
     isPrettyLoading: tokenCardProps?.isPrettyLoading,
     cardClasses: tokenCardProps?.cardClasses,
     valuesProps: {
-      balanceProps: tokenCardProps?.valuesProps?.balanceConfigProps?.isRendering
-        ? {
-            value: token.balance,
-            classes: tokenCardProps?.valuesProps?.balanceConfigProps?.classes,
-            isPrettyLoading: tokenCardProps?.valuesProps?.balanceConfigProps?.isPrettyLoading,
-          }
-        : undefined,
+      balanceProps: buildBalanceCard(token.balance, tokenCardProps?.valuesProps?.balanceConfigProps),
       nameProps: tokenCardProps?.valuesProps?.nameConfigProps?.isRendering
         ? {
             value: token.name,