updated the balance global state

src/components/organism/Header/UserHeader/UserCoinCard.tsx

 
+import { useAppSelector } from '@/hooks/hook'
 import GoldCoinIcon from '@/icons/GoldCoinIcon'
 import SilverCoinIcon from '@/icons/SilverCoinIcon'
 import { useGetUserBalanceQuery } from '@/services/userApi'
 import { UserBalance } from '@/types/user'
-import { Box, Popper, Paper, Fade, ClickAwayListener, IconButton } from '@mui/material'
+import { Box, ClickAwayListener, Fade, IconButton, Paper, Popper } from '@mui/material'
 import { CloseCircle, Refresh } from '@wandersonalwes/iconsax-react'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -17,7 +18,12 @@ export default function UserCoinCard() {
     const goldAnchorRef = React.useRef<HTMLDivElement | null>(null);
     const sweepsAnchorRef = React.useRef<HTMLDivElement | null>(null);
 
-    const sweepsCoin: UserBalance = data?.data?.[0] ?? { providers: [] };
+    const newBalance = useAppSelector((state) => state.userBalanceSlice);
+    const sweepsCoin: UserBalance = newBalance.providerAndBalance.filter((item) => item.flag === "sc").length
+        ? {
+            providers: newBalance.providerAndBalance.filter((item) => item.flag === "sc")
+        } as any
+        : { providers: [] };
 
     return (
         <>
@@ -37,7 +43,7 @@ export default function UserCoinCard() {
                 >
                     <GoldCoinIcon />
                     <div className="coins">
-                        <strong className="text-[12px] leading-4 font-[600] text-[#FBA027] block">{data?.data[1]?.value || 0}</strong>
+                        <strong className="text-[12px] leading-4 font-[600] text-[#FBA027] block">{newBalance?.gcBalnce || 0}</strong>
                         <span className="text-[9px] mt-[-2px] hidden md:block">Gold Coins</span>
                     </div>
                 </Box>
@@ -96,7 +102,7 @@ export default function UserCoinCard() {
                 >
                     <SilverCoinIcon />
                     <div className="coins">
-                        <strong className="text-[12px] leading-4 font-[600] text-[#93E0D8] block">{data?.data[0]?.value || 0}</strong>
+                        <strong className="text-[12px] leading-4 font-[600] text-[#93E0D8] block">{sweepsCoin.providers.length ? sweepsCoin.providers.reduce((acc, item) => acc + Number(item.balance), 0) : 0}</strong>
                         <span className="text-[9px] mt-[-2px]  hidden md:block">Sweeps Coins</span>
                     </div>
                 </Box>
@@ -121,7 +127,7 @@ export default function UserCoinCard() {
                                     <div className="header flex justify-start items-center gap-4 border-b border-[rgba(255,255,255,0.1)] pb-3 mb-6 ">
                                         <SilverCoinIcon />
                                         <div className="coin-detail ">
-                                            <h2 className="text-[24px] leading-[120%] text-white">{data?.data[0]?.value || 0}</h2>
+                                            <h2 className="text-[24px] leading-[120%] text-white">{sweepsCoin.providers.length ? sweepsCoin.providers.reduce((acc, item) => acc + Number(item.balance), 0) : 0}</h2>
                                             <p className="text-[11px] text-[rgba(255,255,255,0.8)]">Sweeps Coins</p>
                                         </div>
                                         <IconButton onClick={() => refetch()} disabled={isLoading || isFetching}>

src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx

 "use client";
 
 import GlassWrapper from "@/components/molecules/GlassWrapper";
-import { useAppDispatch } from "@/hooks/hook";
+import { useAppDispatch, useAppSelector } from "@/hooks/hook";
 import TapIcon from "@/icons/Tap";
 import { useChangeUserGamePasswordMutation, useGetUserBalanceBySlugQuery } from "@/services/userApi";
 import { openPasswordDialog } from "@/slice/updatePasswordSlice";
@@ -36,13 +36,15 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
     const handleDialogClose = () => setOpenDialog(false);
     const balance = balanceData?.data || null;
 
-    // Extract values
-    const scValue = balance?.flag === "sc" ? balance.balance ?? 0 : null;
-    const gcValue = balance?.flag === "gc" ? balance.balance ?? 0 : null;
+
 
     const [resetGamePassord, { isLoading }] = useChangeUserGamePasswordMutation();
     const dispatch = useAppDispatch();
 
+    const newBalance = useAppSelector((state) => state.userBalanceSlice);
+    console.log("newBalance in cred card:", newBalance);
+    const providerBalance: any = newBalance.providerAndBalance
+        ?.find((item: any) => item?.provider === cred.name);
     return (
         <GlassWrapper className="p-4 lg:p-6">
             {/* Header Section */}
@@ -52,7 +54,7 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
                     alt={cred?.full_name}
                     width={74}
                     height={74}
-                    className="rounded-full aspect-square"
+                    className="rounded-full aspect-square w-[74px] h-[74px]"
                     // ✅ Next.js LCP warning fix
                     priority={true}
                 />
@@ -70,13 +72,12 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
                         </div>
                     ) : (
                         <p className="text-[14px] my-[6px] uppercase">
-                            {balance
-                                ? balance.flag === "sc"
-                                    ? `SC: ${scValue}`
-                                    : balance.flag === "gc"
-                                        ? `GC: ${gcValue}`
-                                        : "N/A"
-                                : "N/A"}
+                            <p className="text-[14px] my-[6px] uppercase">
+                                {providerBalance
+                                    ? `${providerBalance.flag.toUpperCase()}: ${providerBalance?.balance}`
+                                    : "Balance: 0"}
+                            </p>
+
                         </p>
                     )}
 

src/components/pages/dashboard/userDashboard/gameCredentials/index.tsx

 "use client";
 
-import React from 'react'
-import CredentialsCard from './CredentialsCard'
-import { useGetUserGameBalanceQuery, useGetUserGameCredentialsQuery } from '@/services/userApi';
 import GlassWrapper from '@/components/molecules/GlassWrapper';
+import { useGetUserGameCredentialsQuery } from '@/services/userApi';
+import CredentialsCard from './CredentialsCard';
 
 function CredentialsCardShimmer() {
     return (
@@ -43,10 +42,8 @@ function CredentialsCardShimmer() {
 }
 export default function GameCredentialsPage() {
     const { data: creds, isLoading: loadingCreds } = useGetUserGameCredentialsQuery();
-    const { data: balance, isLoading: loadingBalance } = useGetUserGameBalanceQuery();
 
-    // console.log("creds", creds);
-    // console.log("balance", balance);
+
     return (
         <section className="credentials__listing ">
             <div className="section__title mb-8 lg:max-w-[521px]">
@@ -64,8 +61,7 @@ export default function GameCredentialsPage() {
                             <div className="col-span-1" key={cred.full_name}>
                                 <CredentialsCard
                                     cred={cred}
-                                // balance={balance}
-                                // balanceLoading={loadingBalance}
+
                                 />
                             </div>
                         ))

src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/UserCoin.tsx

@@ -5,7 +5,6 @@ import GoldCoinIcon from '@/icons/GoldCoinIcon'
 import SilverCoinIcon from '@/icons/SilverCoinIcon'
 import { useGetUserBalanceBySlugQuery } from '@/services/userApi'
 import { Box } from '@mui/material'
-import React from 'react'
 
 export default function UserCoin({ slug }: { slug: string }) {
     const { data } = useGetUserBalanceBySlugQuery({ slug });
@@ -13,6 +12,12 @@ export default function UserCoin({ slug }: { slug: string }) {
     if (!user) {
         return "";
     }
+
+    const newBalance = useAppSelector((state) => state.userBalanceSlice);
+    const providerBalance = newBalance.providerAndBalance.find(
+        (item: any) => item.provider === slug
+    );
+
     return (
         <Box sx={{
             background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%)",
@@ -20,7 +25,7 @@ export default function UserCoin({ slug }: { slug: string }) {
         }} className="flex justify-center items-center gap-2 py-4 px-6 glass ">
             {slug === "goldcoincity" ? <GoldCoinIcon /> : <SilverCoinIcon />}
             <div className="coins">
-                <strong className="text-[16px] leading-4 font-[600] block mb-1">{data?.data?.balance || 0}</strong>
+                <strong className="text-[16px] leading-4 font-[600] block mb-1">{providerBalance?.balance ?? 0}</strong>
                 <span className="text-[12px]  block">{slug === "goldcoincity" ? "Gold Coins" : "Current Sweep Coins"}</span>
             </div>
         </Box>

src/hooks/store.ts

@@ -15,6 +15,7 @@ import authModalSlice from "@/slice/authModalSlice";
 import auth from "@/slice/authSlice";
 import toastSlice from "@/slice/toastSlice";
 import updatePasswordSlice from "@/slice/updatePasswordSlice";
+import userBalanceSlice from "@/slice/userBalanceSlice";
 import { configureStore } from "@reduxjs/toolkit";
 
 export const store = configureStore({
@@ -23,6 +24,7 @@ export const store = configureStore({
         toastSlice,
         authModalSlice,
         updatePasswordSlice,
+        userBalanceSlice,
         [authApi.reducerPath]: authApi.reducer,
         [gameApi.reducerPath]: gameApi.reducer,
         [providerApi.reducerPath]: providerApi.reducer,

src/services/userApi.ts

+import { setBalance, updateBalancePerProvider } from "@/slice/userBalanceSlice";
 import { GlobalResponse } from "@/types/config";
 import { CredentialsResponseProps } from "@/types/game";
 import { SinlgePlayerResponseProps, WalletProps } from "@/types/player";
@@ -29,15 +30,30 @@ export const userApi = createApi({
         getUserBalance: builder.query<UserBalanceResponse, void>({
             query: () => ({
                 url: "/api/get-balance",
-                method: "GET"
+                method: "GET",
             }),
+
+            async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+                try {
+                    const { data } = await queryFulfilled;
+                    dispatch(setBalance(data?.data));
+                } catch { }
+            },
+
             providesTags: ['user']
         }),
+
         getUserBalanceBySlug: builder.query<{ data: { provider: string; balance: number, flag: string, has_changed_password: boolean } }, { slug: string }>({
             query: ({ slug }) => ({
                 url: `/api/balance/${slug}`,
                 method: "GET"
             }),
+            async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+                try {
+                    const { data } = await queryFulfilled;
+                    dispatch(updateBalancePerProvider({ balance: data?.data.balance, provider: arg.slug }));
+                } catch { }
+            },
             providesTags: ['user']
         }),
         getUserGameBalance: builder.query<SinlgePlayerResponseProps, void>({

src/slice/userBalanceSlice.ts

+import { createSlice } from "@reduxjs/toolkit";
+
+const balanceSlice = createSlice({
+    name: "userBalance",
+    initialState: {
+        gcBalnce: 0,
+        scBalance: 0,
+        providerAndBalance: [{
+            flag: "",
+            provider: "",
+            balance: 0,
+        }]
+    },
+    reducers: {
+        setBalance: (state, action) => {
+            state.gcBalnce = action.payload.find((item: { type: string }) => item.type === "gc").value;
+            state.scBalance = action.payload.find((item: { type: string }) => item.type === "sc").value;
+            state.providerAndBalance = action.payload
+                .filter((item: any) => Array.isArray(item.providers))
+                .flatMap((item: any) => (item.providers));
+
+            return state;
+        },
+        updateBalancePerProvider: (state, action) => {
+            const { provider, balance } = action.payload;
+            const providerIndex = state.providerAndBalance.findIndex(
+                (item: any) => item.provider === provider
+            );
+
+            if (providerIndex !== -1) {
+                state.providerAndBalance[providerIndex].balance = balance;
+            }
+        }
+    },
+});
+
+export const { setBalance, updateBalancePerProvider } = balanceSlice.actions;
+export default balanceSlice.reducer;