finished view a tx by id

src/app/@auth/(.)transaction/page.tsx

@@ -1,48 +1,96 @@
 'use client';
-
-import { useRouter } from "next/router";
+import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
+
 import { useEffect, useState } from "react";
-import { Alchemy, Network } from 'alchemy-sdk';
+//redux
+import { useSelector } from "react-redux";
+
+import truncateEthAddress from 'truncate-eth-address';
 
 export default function Page() {
 
 
-  const config = {
-    apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
-    network: Network.MATIC_MUMBAI,
-  };
-  const alchemy = new Alchemy(config);
 
-  const [transactions, setTransactions] = useState<any>({})
+  const [transaction, setTransaction] = useState<any>({})
+
+  const [isLoading, setIsLoading] = useState<boolean>(true)
 
   const searchParams = useSearchParams();
 
   let hash = searchParams.get('hash');
 
+  const txState = useSelector((state: any) => state.transactions.value);
+
+  const address = useSelector((state: any) => state.address.value);
+
   useEffect(() => {
-    const getData = async () => {
-      try {
-        const response = await alchemy.transact.getTransaction(hash);
-        console.log('response', response);
-        setTransactions(response);
-      } catch (error) {
+    console.log('txState', txState)
+    const filteredTransaction = txState.filter((tx: any) => tx.hash == hash);
+
+
+    setTransaction(filteredTransaction[0]);
+    console.log('filteredTransaction', filteredTransaction)
+    setIsLoading(false)
+
+  }, [txState])
 
-      }
-    }
-    getData();
-  }, [])
 
 
   return (
     <>
-      <div className='grid'>
-        <div className='my-4'>
-          <p className='my-4 text-center text-xl text-gray-300'>Tx</p>
-          <p className='my-4 text-center text-xl text-gray-300'>{hash}</p>
-        </div>
-      </div>
+      {
+        isLoading && <div>Loading...</div>
+      }
+      {
+        !isLoading && (
+          <div className='grid p-4'>
+            <div className='my-4'>
+              <div className="flex text-white font-bold text-xl">
+                {transaction.from == address ? "+$" : "-$"}
+
+                {transaction.value}
+              </div>
+              <div className="text-blue-400">
+                {transaction.from == address ? "From" : "To"} {truncateEthAddress(transaction.from)}
+              </div>
+              <div className='mt-10 flex justify-between'>
+                <Link
+                  href={{
+                    pathname: '/search',
+                    query: { address: transaction.to },
+                  }}
+                >
+                  <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: transaction.to },
+                  }}
+                >
+                  <button className='rounded w-40 bg-purple px-4 py-2 text-white hover:bg-blue-700 text-lg'>
+                    Receive
+                  </button>
+                </Link>
+              </div>
+              <div className='bg-paper-two p-4 rounded-xl mt-4'>
+                <div className='flex justify-between mb-4'>
+                  <p>Status</p>
+                  <p>Completed</p>
+                </div>
+                <div className='flex justify-between'>
+                  <p>Tx Hash</p>
+                  <p className='text-blue-400'>{truncateEthAddress(transaction.hash)}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      }
     </>
   );
 }

src/app/components/Layouts/Sheet.tsx

@@ -45,9 +45,9 @@ const Sheet = ({ children }) => {
                 borderTopLeftRadius: '32px',
                 borderTopRightRadius: '32px',
               }}
-              className='bg-paper'
+              className='bg-paper-one'
             >
-              <div>{children}</div>
+              <div className='text-slate-300'>{children}</div>
             </motion.div>
           </motion.div>
         )}

src/app/components/activity/Activity.tsx

@@ -4,18 +4,22 @@ import useGetAddress from "@/app/hooks/useGetAddress";
 import useGetRecentTransactions from "@/app/hooks/useGetRecentTransactions";
 import Link from "next/link";
 import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { setTransactions } from "@/GlobalRedux/Features/transactions/transactionsSlice";
 
 export default function Activity() {
-  const [transactions, setTransactions] = useState<any>([])
+  const [transactions, setTxs] = useState<any>([])
   const address = "0xc8C26Ab40fe4723519fE66B8dBb625FC070A982c"
 
+  const dispatch = useDispatch();
+
   useEffect(() => {
 
     const getData = async () => {
       try {
         const recentTransactions = await useGetRecentTransactions();
 
-        setTransactions(recentTransactions?.transfers.slice(0, 3));
+        setTxs(recentTransactions?.transfers.slice(0, 3));
       } catch (error) {
         console.error("Error while getting recent transactions:", error);
       }
@@ -28,11 +32,12 @@ export default function Activity() {
     if (transactions) {
       console.log("transactions console", transactions[0]);
     }
+    dispatch(setTransactions(transactions));
   }, [transactions]); // Add transactions as a dependency
 
   return (
     <>
-      <div className='bg-paper rounded-xl w-full text-xl p-4'>
+      <div className='bg-paper-one rounded-xl w-full text-xl p-4'>
         <div>
           Recent
         </div>

tailwind.config.ts

@@ -11,7 +11,10 @@ export default {
       colors: {
         main: '#101012',
         dark: '#101012',
-        paper: '#2C2D33',
+        'paper': {
+          one: '#2C2D33',
+          two: '#43444C',
+        },
         purple: '#6A48F2',
         primary: {
           // Customize it on globals.css :root