worde don fixing balance

src/app/components/Balance/Balance.tsx

@@ -6,23 +6,50 @@ import { useBalance } from 'wagmi';
 import { RootState } from '../../../GlobalRedux/store';
 import { useDispatch, useSelector } from 'react-redux';
 import { setBalance } from '@/GlobalRedux/Features/balance/balanceSlice';
+// hooks
+import useGetBalance from '@/app/hooks/useGetBalance';
+
+// React
+import { use, useEffect } from 'react';
+
+// next
+import { usePathname } from 'next/navigation';
+import useGetAddress from '@/app/hooks/useGetAddress';
+// react
+import { useState } from 'react';
 export default function Balance() {
+  // Redux
   const dispatch = useDispatch();
-
-  const addressState = useSelector((state: RootState) => state.address.value);
-  console.log('addressState in balance', addressState);
-  const balanceState = useSelector((state: RootState) => state.balance.value);
+  // next
+  const pathname = usePathname();
+  // hooks
+  const address = useSelector((state: RootState) => state.address.value);
 
   const result = useBalance({
-    address: addressState,
+    // @ts-ignore
+    address: address,
     token: '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8',
   });
 
-  // Dispatch an action to update the balance state in Redux
-  if (result?.data?.formatted && result.data.formatted !== balanceState) {
-    dispatch(setBalance(result.data.formatted)); // Dispatching an action with the balance value
-  }
+  const checkBalance = async () => {
+    try {
+      console.log('result', result);
+      // @ts-ignore
+      dispatch(setBalance(result?.data?.formatted));
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
 
+  // pathname use effect
+  useEffect(() => {
+    console.log(`Route changed to: ${pathname}`);
+    checkBalance();
+  }, [pathname, result]);
+
+  // Get the balance from Redux
+  const balanceState = useSelector((state: RootState) => state.balance.value);
+  console.log('balanceState', balanceState);
   // Render the balance
   return <div className='text-white'>${balanceState}</div>;
 }

src/app/components/SendUsdc/SendUsdc.tsx

@@ -94,7 +94,7 @@ export default function SendUsdc() {
         setTimeout(() => {
           dispatch(setSheet(false));
           /* router.push(`/transaction?hash=${txnHash}`); */
-          router.push('/home');
+          const balance = router.push('/home');
         }, 1000);
       }
     } catch (error) {

src/app/home/page.tsx

@@ -14,7 +14,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@/GlobalRedux/store';
 import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice';
 
-
 // react
 import { useEffect, useRef, useState } from 'react';
 
@@ -24,49 +23,35 @@ import { Send, QrCode } from 'lucide-react';
 // privy
 import { usePrivySmartAccount } from '@zerodev/privy';
 
-
 // lucide
 import { Menu } from 'lucide-react';
 
-//privy
-import { usePrivy } from '@privy-io/react-auth';
 //components
-import Notifications from '@/app/components/Notifications/Notifications';
-import SendNotification from '@/app/components/SendNotification/SendNotification';
+
 import { BackgroundGradientAnimation } from '../components/ui/background-gradient-animation';
 import useGetAddress from '../hooks/useGetAddress';
 
-
 export default function Page() {
-
-
-
+  // privy
   const { user, zeroDevReady, sendTransaction } = usePrivySmartAccount();
 
-
-
-  const kernalReduxState = useSelector(
-    (state: RootState) => state.kernalClient.value
-  );
-
+  // next
+  const router = useRouter();
 
   useEffect(() => {
-    console.log("hi")
-    console.log('user', user)
-    console.log('zeroDevReady', zeroDevReady)
-
+    console.log('hi');
+    console.log('user', user);
+    console.log('zeroDevReady', zeroDevReady);
   }, [zeroDevReady]);
-  const router = useRouter();
+
   // redux
   const dispatch = useDispatch();
-    const address = useGetAddress();
 
-  let decodedText =
-    '0x819a46d27ddeb3ac2bde6edea1b31f452ab4517ebeace7df2aee4399641ab4ed';
-  return (
+  // hooks
+  const address = useGetAddress();
 
+  return (
     <div id='render' className=''>
-
       <div className='absolute right-4 top-4'>
         <Link
           /* onClick={() => {
@@ -96,7 +81,7 @@ export default function Page() {
         </div>
         <div className='items-center p-2  pt-40 text-center text-5xl mix-blend-exclusion'>
           <Balance />
-          { address }
+          {address}
         </div>
 
         <div className='mt-10 grid grid-cols-2 gap-2 p-2'>
@@ -146,7 +131,7 @@ export default function Page() {
             </Link>
           </div>
         </div>
-        <div className='bg-accent mt-4 w-full rounded-t-xl p-4 min-h-[900px]'>
+        <div className='bg-accent mt-4 min-h-[900px] w-full rounded-t-xl p-4'>
           {/*  <Tab.Group>
             <Tab.List>
               <div className='mb-4 flex justify-between'>
@@ -172,10 +157,7 @@ export default function Page() {
                
               </div>  */}
 
-
           <Activity />
-
-
         </div>
       </div>
     </div>

src/app/hooks/useGetBalance.tsx

@@ -0,0 +1,21 @@
+// wagmi
+'use client';
+import { useBalance } from 'wagmi';
+
+// Redux
+
+import { RootState } from '@/GlobalRedux/store';
+import { useDispatch, useSelector } from 'react-redux';
+import { setBalance } from '@/GlobalRedux/Features/balance/balanceSlice';
+
+const useGetBalance = (address: string) => {
+  const result = useBalance({
+    // @ts-ignore
+    address: address,
+    token: '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8',
+  });
+
+  return result?.data?.formatted;
+};
+
+export default useGetBalance;

src/styles/globals.css

@@ -5,6 +5,11 @@
 /* * {
   touch-action: none;
 } */
+
+* {
+  touch-action: pan-y;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;