added back button to redux store, to close parallel routes

.env.example

@@ -1,4 +1,4 @@
-WEB3AUTH_CLIENT_ID="BCUJ9sDhdO5iekR-oaXL7bIC5Dg3tPNyhtGp_4z_SLp3B0ZKp-0qmE9RFWxUdY4g1wNzJqkxr10d14ty-PoAqCI"
-ZERODEV_ID="f6375b6f-2205-4fc7-bc87-f03218789b86"
+WEB3AUTH_CLIENT_ID=""
+ZERODEV_ID=""
 
-NEXT_PUBLIC_ALCHEMY_API_KEY='tOs_g_ehALVT-_ca7ly1X4PeAwVyp2Kg'
+NEXT_PUBLIC_ALCHEMY_API_KEY=''

src/GlobalRedux/Features/sheet/sheetSlice.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { createSlice } from '@reduxjs/toolkit';
+
+export const sheetSlice = createSlice({
+  name: 'sheet',
+  initialState: {
+    value: false,
+  },
+  reducers: {
+    setSheet: (state, action) => {
+      state.value = action.payload;
+    },
+  },
+});
+export const { setSheet } = sheetSlice.actions;
+export default sheetSlice.reducer;

src/GlobalRedux/store.ts

@@ -8,6 +8,7 @@ import addressReducer from './Features/address/addressSlice';
 import searchReducer from './Features/search/searchSlice';
 import kernalClientSliceReducer from './Features/kernalClient/kernalClientSlice';
 import transactionsSliceReducer from './Features/transactions/transactionsSlice';
+import sheetSliceReducer from './Features/sheet/sheetSlice';
 
 // Define RootState type
 type RootState = {
@@ -28,7 +29,6 @@ type RootState = {
       value: {};
     }
   ];
-
 };
 
 const persistConfig = {
@@ -43,7 +43,7 @@ const rootReducer = combineReducers<RootState>({
   search: searchReducer,
   kernalClient: kernalClientSliceReducer,
   transactions: transactionsSliceReducer,
-
+  sheet: sheetSliceReducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);

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

@@ -1,11 +1,14 @@
 'use client';
 // React
 import { useState, useEffect } from 'react';
+
 import useGetAddress from '@/app/hooks/useGetAddress';
+
 // Next
 import Link from 'next/link';
-
-// Layout
+import BackButton from '@/app/components/Navigation/BackButton/BackButton';
+import { useDispatch } from 'react-redux';
+import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice';
 
 export default function Page() {
   const [payee, setPayee] = useState(
@@ -14,14 +17,27 @@ export default function Page() {
 
   const address = useGetAddress();
 
+  const dispatch = useDispatch();
+
   useEffect(() => {
-    // Add your logic here to listen to the input value
+    // Add logic here to listen to the input value
     console.log('Input value:', payee);
   }, [payee]);
 
   return (
     <>
       <div className='grid'>
+        <div className='p-4 '>
+          <div
+            className='w-fit'
+            onClick={() => {
+              dispatch(setSheet(false));
+            }}
+          >
+            <BackButton />
+          </div>
+        </div>
+
         <div className='my-4'>
           <p className='my-4 text-center text-xl text-gray-300'>Search</p>
         </div>
@@ -42,7 +58,7 @@ export default function Page() {
               query: { payee: payee },
             }}
           >
-            <button className='w-full rounded bg-slate-400 p-4'>Go</button>
+            <button className='bg-purple w-full rounded p-4'>Go</button>
           </Link>
         </div>
       </div>

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

@@ -1,14 +1,17 @@
 'use client';
 
+import BackButton from '@/app/components/Navigation/BackButton/BackButton';
 // components
 import SendUsdc from '@/app/components/SendUsdc/SendUsdc';
 import { useRouter } from 'next/navigation';
 
 export default function Page() {
-  const router = useRouter();
   return (
     <>
       <div className='grid'>
+        <div className='p-4'>
+          <BackButton />
+        </div>
         <div className='my-4'>
           <p className='my-4 text-center text-xl text-gray-300'>Send</p>
         </div>

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

@@ -1,20 +1,19 @@
 'use client';
 import Link from 'next/link';
-import { useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 //redux
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
 
 import truncateEthAddress from 'truncate-eth-address';
 
 export default function Page() {
+  const router = useRouter();
 
+  const [transaction, setTransaction] = useState<any>({});
 
-
-  const [transaction, setTransaction] = useState<any>({})
-
-  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const searchParams = useSearchParams();
 
@@ -25,72 +24,67 @@ export default function Page() {
   const address = useSelector((state: any) => state.address.value);
 
   useEffect(() => {
-    console.log('txState', txState)
+    console.log('txState', txState);
     const filteredTransaction = txState.filter((tx: any) => tx.hash == hash);
 
-
     setTransaction(filteredTransaction[0]);
-    console.log('filteredTransaction', filteredTransaction)
-    setIsLoading(false)
-
-  }, [txState])
-
-
+    console.log('filteredTransaction', filteredTransaction);
+    setIsLoading(false);
+  }, [txState]);
 
   return (
     <>
-      {
-        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>
+      <Link href={{ pathname: '/home' }}>Back Home</Link>
+      {isLoading && <div>Loading...</div>}
+      {!isLoading && (
+        <div className='grid p-4'>
+          <div className='my-4'>
+            <div className='flex text-xl font-bold text-white'>
+              {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='bg-purple w-40 rounded px-4 py-2 text-lg text-white hover:bg-blue-700'>
+                  Send
+                </button>
+              </Link>
+              <Link
+                href={{
+                  pathname: '/receive',
+                  query: { address: transaction.to },
+                }}
+              >
+                <button className='bg-purple w-40 rounded px-4 py-2 text-lg text-white hover:bg-blue-700'>
+                  Receive
+                </button>
+              </Link>
+            </div>
+            <div className='bg-paper-two mt-4 rounded-xl p-4'>
+              <div className='mb-4 flex justify-between'>
+                <p>Status</p>
+                <p>Completed</p>
               </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 className='flex justify-between'>
+                <p>Tx Hash</p>
+                <p className='text-blue-400'>
+                  {truncateEthAddress(transaction.hash)}
+                </p>
               </div>
             </div>
           </div>
-        )
-      }
+        </div>
+      )}
     </>
   );
 }

src/app/@transactionmodal/layout.tsx

@@ -8,9 +8,11 @@ export default function ComponentsLayout({
 }: {
   children: React.ReactNode;
 }) {
+  console.log('Sheet', 'Sheet');
+  let isOpen = true;
   return (
     <>
-      <Sheet>{children}</Sheet>
+      <Sheet isOpen={isOpen}>{children}</Sheet>
     </>
   );
 }

src/app/components/Layouts/Sheet.tsx

@@ -4,12 +4,16 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
 const Sheet = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(true);
+  const isOpen = useSelector((state) => state.sheet.value);
 
-  const toggleModal = () => {
-    setIsOpen(!isOpen);
-  };
+  useEffect(() => {
+    // Add your logic here to handle the sheet open state
+    console.log('Sheet is open:', isOpen);
+  }, [isOpen]);
 
   return (
     <div>

src/app/components/Navigation/BackButton/BackButton.tsx

@@ -0,0 +1,11 @@
+import { useRouter } from 'next/navigation';
+import { Undo2 } from 'lucide-react';
+
+export default function BackButton() {
+  const router = useRouter();
+  return (
+    <div className='w-fit rounded-full p-4 hover:bg-slate-700'>
+      <Undo2 size={20} onClick={() => router.back()} color='#cbd5e1' />
+    </div>
+  );
+}