From f161a8a4766c7aaec93899e569e4f25918a66e05 Mon Sep 17 00:00:00 2001
From: Jacob Homanics <homanicsjake@gmail.com>
Date: Thu, 1 Feb 2024 05:11:42 -0600
Subject: [PATCH] added balance card support

---
 .../_components/RepTokensDemo.tsx             | 17 ++++++++++++-
 .../configs/values/BalanceCardConfig.ts       | 10 ++++++++
 .../rep-tokens/utils/buildTokensCard.tsx      | 25 +++++++++++++------
 3 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 packages/nextjs/app/rep-tokens-demo/_components/configs/values/BalanceCardConfig.ts

diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
index d1d5bc8..5c2bb45 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
+++ b/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} />
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/configs/values/BalanceCardConfig.ts b/packages/nextjs/app/rep-tokens-demo/_components/configs/values/BalanceCardConfig.ts
new file mode 100644
index 0000000..6f4008d
--- /dev/null
+++ b/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;
diff --git a/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx b/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx
index 768355d..6b05536 100644
--- a/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx
+++ b/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,6 +22,20 @@ 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;
 
@@ -28,13 +43,7 @@ export function buildTokenCard(token: Token, address?: string, tokenCardProps?:
     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,