working on tx history

package.json

@@ -18,6 +18,8 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.18",
+    "@radix-ui/themes": "^2.0.3",
     "@reduxjs/toolkit": "^2.1.0",
     "@tanstack/react-query": "^5.17.19",
     "@wagmi/core": "^2.6.1",

src/app/components/Balance/Balance.tsx

@@ -19,9 +19,8 @@ export default function Balance() {
 
 
 	return (
-		<div>
+		<div className="text-white">
 			{result?.data?.formatted}
-
 		</div>
 	);
 }

src/app/components/Layouts/Sheet.tsx

@@ -38,12 +38,13 @@ const Sheet = ({ children }) => {
               transition={{ type: 'spring', damping: 20, stiffness: 300 }}
               style={{
                 width: '100%',
-                maxHeight: '80%',
-                minHeight: '80%',
-                backgroundColor: '#2C2D33',
-                borderTopLeftRadius: '16px',
-                borderTopRightRadius: '16px',
+
+                minHeight: '90%',
+                backgroundColor: '',
+                borderTopLeftRadius: '32px',
+                borderTopRightRadius: '32px',
               }}
+              className='bg-paper'
             >
               <div>{children}</div>
             </motion.div>

src/app/components/activity/Activity.tsx

@@ -0,0 +1,48 @@
+'use client'
+import useGetAddress from "@/app/hooks/useGetAddress";
+import useGetRecentTransactions from "@/app/hooks/useGetRecentTransactions";
+import { useEffect, useState } from "react";
+
+export default function Activity() {
+  const [transactions, setTransactions] = useState(null);
+  const address = useGetAddress();
+
+  useEffect(() => {
+
+    const getData = async () => {
+      try {
+        const recentTransactions = await useGetRecentTransactions();
+
+        setTransactions(recentTransactions);
+      } catch (error) {
+        console.error("Error while getting recent transactions:", error);
+      }
+    };
+
+    getData();
+  }, [address]); // Add address as a dependency if it's used inside useGetRecentTransactions
+
+  useEffect(() => {
+    if (transactions) {
+      console.log("transactions", transactions);
+    }
+  }, [transactions]); // Add transactions as a dependency
+
+  return (
+    <>
+      <div className='h-96 bg-paper rounded-xl w-full text-xl p-4'>
+        <div>
+          Recent
+        </div>
+        {/* Uncomment this section to render transactions when available */}
+        <div className="mt-4">
+          {/*    {transactions && transactions.map((t, i) => (
+            <div key={i}>
+              {i} hello
+            </div>
+          ))} */}
+        </div>
+      </div>
+    </>
+  );
+}

src/app/home/page.tsx

@@ -6,6 +6,10 @@ import Balance from '../components/Balance/Balance';
 import Send from '../components/Send/Send';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/GlobalRedux/store';
+import { Tab } from '@headlessui/react'
+
+
+import Activity from '@/app/components/activity/activity';
 
 export default function Page() {
   const kernalReduxState = useSelector(
@@ -14,33 +18,62 @@ export default function Page() {
   console.log('kernalReduxState', kernalReduxState);
 
   return (
-    <div>
-      <div className='mt-60 items-center text-center text-5xl'>
+    <div className='pt-40 p-8'>
+      <div className=' items-center text-center text-5xl'>
         <Balance />
       </div>
 
-      <Link
-        href={{
-          pathname: '/send',
-          query: { address: '12345' },
-        }}
-      >
-        <button className='rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700'>
-          Go to send Usdc
-        </button>
-      </Link>
-      <Link
-        href={{
-          pathname: '/search',
-        }}
-      >
-        <button className='rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700'>
-          Search Address
-        </button>
-      </Link>
+      <div className='mt-10 flex justify-between'>
+        <Link
+          href={{
+            pathname: '/search',
+            query: { address: '12345' },
+          }}
+        >
+          <button className='rounded w-40 bg-purple px-4 py-2 text-white hover:bg-blue-700 text-lg'>
+            Send
+          </button>
+
+        </Link>
+        <Link
+          href={{
+            pathname: '/receive',
+            query: { address: '12345' },
+          }}
+        >
+          <button className='rounded w-40 bg-purple px-4 py-2 text-white hover:bg-blue-700 text-lg'>
+            Receive
+          </button>
+        </Link>
+
+      </div>
+      <Tab.Group>
+        <Tab.List >
+          <div className=' flex justify-between'>
+            <Tab>
+              <div className='text-xl text-gray-300'>
+                Account
+              </div>
+            </Tab>
+            <Tab>
+              <div className='text-xl text-gray-300'>
+                Activity
+              </div>
+            </Tab>
+          </div>
+        </Tab.List>
+        <Tab.Panels>
+          <Tab.Panel>
+            <Activity />
+
+          </Tab.Panel>
+          <Tab.Panel>Content 2</Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+
       {/* <Send /> */}
       {/* 		<Account />
 			<Connect /> */}
-    </div>
+    </div >
   );
 }

src/app/hooks/useGetRecentTransactions.tsx

@@ -0,0 +1,29 @@
+
+import useGetAddress from '@/app/hooks/useGetAddress';
+import { Alchemy, Network } from 'alchemy-sdk';
+
+const useGetRecentTransactions = async () => {
+  try {
+
+    const config = {
+      apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
+      network: Network.MATIC_MUMBAI,
+    };
+    const alchemy = new Alchemy(config);
+    console.log("env", process.env.NEXT_PUBLIC_ALCHEMY_API_KEY)
+
+    const data = await alchemy.core.getAssetTransfers({
+      fromBlock: "0x0",
+      fromAddress: "0xc8C26Ab40fe4723519fE66B8dBb625FC070A982c",
+      category: ["erc20"],
+    });
+
+
+    return data;
+  } catch (error) {
+    console.log(error);
+  }
+
+}
+
+export default useGetRecentTransactions;

src/app/layout.tsx

@@ -4,7 +4,7 @@ import { Metadata } from 'next';
 import * as React from 'react';
 
 import { useEffect } from 'react';
-
+import '@radix-ui/themes/styles.css';
 // Redux
 import { Providers } from '../GlobalRedux/provider';
 
@@ -68,6 +68,7 @@ import { PersistGate } from 'redux-persist/integration/react';
  */
 
 import Link from 'next/link';
+import { Theme, ThemePanel } from '@radix-ui/themes';
 export default function RootLayout({
   auth,
   children,
@@ -92,11 +93,11 @@ export default function RootLayout({
           <PersistGate loading={null} persistor={persistor}>
             <WagmiProvider config={config!}>
               <QueryClientProvider client={queryClient}>
-                <nav>
-                  <Link href='/search'>Open modal</Link>
-                </nav>
-                <div>{authState && auth}</div>
-                <main>{children}</main>
+
+                <div>{auth}</div>
+                <main className='bg-dark w-screen h-screen text-gray-300'>{children}</main>
+
+
               </QueryClientProvider>
             </WagmiProvider>
           </PersistGate>

src/app/page.tsx

@@ -98,7 +98,7 @@ export default function HomePage() {
   const getDetails = async () => {
     try {
       console.log(provider);
-    } catch (error) {}
+    } catch (error) { }
   };
 
   const unloggedInView = (
@@ -125,7 +125,7 @@ export default function HomePage() {
         console.log('setting kernal');
         dispatch(setKernalClient(kernalClient));
         console.log('kernal set');
-      } catch (error) {}
+      } catch (error) { }
     };
     setReduxKernal();
   }, [kernalClient]);
@@ -151,7 +151,7 @@ export default function HomePage() {
       });
 
       console.log('userOp hash:', userOpHash);
-    } catch (error) {}
+    } catch (error) { }
   };
   /*  const result = useBalance({
      address: kernalClient?.account?.address,

tailwind.config.ts

@@ -9,6 +9,10 @@ export default {
         primary: ['Inter', ...defaultTheme.fontFamily.sans],
       },
       colors: {
+        main: '#101012',
+        dark: '#101012',
+        paper: '#2C2D33',
+        purple: '#6A48F2',
         primary: {
           // Customize it on globals.css :root
           50: 'rgb(var(--tw-color-primary-50) / <alpha-value>)',
@@ -23,7 +27,7 @@ export default {
           900: 'rgb(var(--tw-color-primary-900) / <alpha-value>)',
           950: 'rgb(var(--tw-color-primary-950) / <alpha-value>)',
         },
-        dark: '#222222',
+
       },
       keyframes: {
         flicker: {