added react-modal-sheet

package.json

@@ -41,6 +41,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-loader-spinner": "^6.1.6",
+    "react-modal-sheet": "^2.2.0",
     "react-pull-to-refresh": "^2.0.1",
     "react-qr-code": "^2.0.12",
     "react-redux": "^9.1.0",

src/app/@auth/layout.tsx

@@ -1,5 +1,5 @@
 'use client';
-import Sheet from '@/app/components/Layouts/Sheet';
+import SheetLayout from '@/app/components/Layouts/SheetLayout';
 import { Metadata } from 'next';
 import * as React from 'react';
 
@@ -10,7 +10,7 @@ export default function ComponentsLayout({
 }) {
   return (
     <>
-      <Sheet>{children}</Sheet>
+      <SheetLayout>{children}</SheetLayout>
     </>
   );
 }

src/app/@transactionmodal/layout.tsx

@@ -1,5 +1,5 @@
 'use client';
-import Sheet from '@/app/components/Layouts/Sheet';
+import SheetLayout from '@/app/components/Layouts/SheetLayout';
 import { Metadata } from 'next';
 import * as React from 'react';
 
@@ -12,7 +12,7 @@ export default function ComponentsLayout({
   let isOpen = true;
   return (
     <>
-      <Sheet isOpen={isOpen}>{children}</Sheet>
+      <SheetLayout isOpen={isOpen}>{children}</SheetLayout>
     </>
   );
 }

src/app/components/Layouts/SheetLayout.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+// components/SheetModal.js
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Sheet, { SheetRef } from 'react-modal-sheet';
+import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice';
+const SheetLayout = ({ children }) => {
+  const isOpen = useSelector((state) => state.sheet.value);
+
+  useEffect(() => {
+    // Add your logic here to handle the sheet open state
+    console.log('Sheet is open:', isOpen);
+  }, [isOpen]);
+
+  const dispatch = useDispatch();
+
+  return (
+    <div>
+      <AnimatePresence>
+        {isOpen && (
+          <>
+            <Sheet
+              rootId='render'
+              isOpen={isOpen}
+              onClose={() => dispatch(setSheet(false))}
+            >
+              <Sheet.Container
+                style={{
+                  backgroundColor: 'rgba(44, 45, 51, 0.7)',
+                  backdropFilter: 'blur(10px) saturate(150%)',
+                }}
+              >
+                {/*  <Sheet.Header></Sheet.Header> */}
+                <Sheet.Content>{children}</Sheet.Content>
+              </Sheet.Container>
+              <Sheet.Backdrop onTap={() => dispatch(setSheet(false))} />
+            </Sheet>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default SheetLayout;

src/app/components/activity/Activity.tsx

@@ -1,58 +1,55 @@
-'use client'
-import RecentTransaction from "@/app/components/RecentTransaction/RecentTransaction";
+'use client';
+import RecentTransaction from '@/app/components/RecentTransaction/RecentTransaction';
 // hooks
-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";
+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, setTxs] = useState<any>([])
-  const address = "0xc8C26Ab40fe4723519fE66B8dBb625FC070A982c"
+  const [transactions, setTxs] = useState<any>([]);
+  const address = '0xc8C26Ab40fe4723519fE66B8dBb625FC070A982c';
 
   const dispatch = useDispatch();
 
   useEffect(() => {
-
     const getData = async () => {
       try {
         const recentTransactions = await useGetRecentTransactions();
 
-        setTxs(recentTransactions?.transfers.slice(0, 3));
+        setTxs(recentTransactions?.transfers.slice(0, 3).reverse());
       } catch (error) {
-        console.error("Error while getting recent transactions:", error);
+        console.error('Error while getting recent transactions:', error);
       }
     };
 
     getData();
   }, []);
 
   useEffect(() => {
-    if (transactions) {
-      console.log("transactions console", transactions[0]);
-    }
     dispatch(setTransactions(transactions));
   }, [transactions]); // Add transactions as a dependency
 
   return (
     <>
-      <div className='bg-paper-one rounded-xl w-full text-xl p-4'>
-        <div>
-          Recent
-        </div>
-
-        <div className="mt-4">
-          {transactions && transactions.map((transaction: any, i: any) => (
-            <div key={i}>
-              <RecentTransaction transaction={transaction} />
-            </div>
-          ))}
-          <div className="text-purple text-center">
-            <Link href={{
-              pathname: '/transactions',
-            }}>
+      <div className='bg-paper-one w-full rounded-xl p-4 text-xl'>
+        <div className='text-left'>Recent</div>
+
+        <div className='mt-4'>
+          {transactions &&
+            transactions.map((transaction: any, i: any) => (
+              <div key={i}>
+                <RecentTransaction transaction={transaction} />
+              </div>
+            ))}
+          <div className='text-purple text-center'>
+            <Link
+              href={{
+                pathname: '/transactions',
+              }}
+            >
               See all
             </Link>
           </div>

src/app/home/page.tsx

@@ -18,7 +18,9 @@ export default function Page() {
   const dispatch = useDispatch();
   return (
     <div className='p-4 pt-40'>
-      <div className='items-center text-center text-5xl'></div>
+      <div className='items-center text-center text-5xl'>
+        <Balance />
+      </div>
 
       <div className='mt-10 flex justify-between'>
         <Link
@@ -34,6 +36,9 @@ export default function Page() {
           </button>
         </Link>
         <Link
+          onClick={() => {
+            dispatch(setSheet(true));
+          }}
           href={{
             pathname: '/receive',
           }}

src/app/layout.tsx

@@ -84,7 +84,7 @@ export default function RootLayout({
   };
 
   return (
-    <html>
+    <html id='render' className='bg-dark h-full overflow-auto '>
       <head>
         <title>Payments, Stephen Gordon</title>
         <title>Payments, Stephen Gordon</title>

src/app/login/page.tsx

@@ -6,6 +6,8 @@ import Head from 'next/head';
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 
+import Link from 'next/link';
+
 // Web3auth
 import { Web3AuthNoModal } from '@web3auth/no-modal';
 import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from '@web3auth/base';
@@ -165,6 +167,13 @@ export default function Page() {
           )}
           {error && error}
         </button>
+        <Link
+          href={{
+            pathname: '/home',
+          }}
+        >
+          Home
+        </Link>
       </section>
     </main>
   );