add bal

src/components/domains/profile/Billing/Billing.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 
 import { Button, Typography } from "@/components/ui";
+import { useUserBalance } from "@/hooks/balance/useUserBalance";
 import { ROUTES } from "@/shared/constants/client-routes";
 
 import styles from "./Billing.module.scss";
@@ -12,6 +13,10 @@ import styles from "./Billing.module.scss";
 function Billing() {
   const t = useTranslations("Profile.billing");
   const router = useRouter();
+  const { balance, isLoading } = useUserBalance();
+
+  // Round balance to nearest integer when available
+  const roundedBalance = balance !== null ? Math.round(balance) : null;
 
   const onBilling = () => {
     router.push(ROUTES.profileSubscriptions());
@@ -27,7 +32,7 @@ function Billing() {
       <div className={styles.credits}>
         <Typography as="p" weight="bold" color="white" align="left">
           {t("credits.title", {
-            credits: String(0),
+            credits: isLoading || roundedBalance === null ? "..." : String(roundedBalance),
           })}
         </Typography>
         <Typography

src/shared/constants/api-routes.ts

@@ -40,4 +40,5 @@ export const API_ROUTES = {
   getChatsList: () => createRoute(["chats", "list"]),
   getChatMessages: (chatId: string) =>
     createRoute(["chats", chatId, "messages"]),
+  getUserBalance: () => createRoute(["chats", "balance"]),
 };