Wallets list - proxy changes

src/api/wallets.js

@@ -11,21 +11,26 @@ const mapWallet = (walletData, nameProp) => {
   };
 };
 
-export const getWallets = async (token, name = '', pageNumber = 1) => {
-  const params = {
-    offset: pageNumber - 1,
-  };
+export const getWallets = async (
+  token,
+  name = '',
+  //pageNumber = 1,
+  { pagination }
+) => {
+  // const params = {
+  //   offset: pagination.offset, // pageNumber - 1,
+  // };
 
-  if (name) {
-    params.name = name;
-  }
+  // if (name) {
+  //   params.name = name;
+  // }
 
   const { total, wallets } = await apiClient
     .setAuthHeader(token)
     .get('/wallets', {
       params: {
         name: name || undefined, // Pass 'name' if it exists, or pass 'undefined' to exclude it
-        offset: pageNumber - 1,
+        offset: pagination.offset, // pageNumber - 1,
       },
     })
     .then((response) => {

src/components/Routes/ClientRoutes.js

@@ -8,6 +8,8 @@ import NotFound from '../../pages/NotFound/NotFound';
 import { useContext } from 'react';
 import MyTransfers from '../../pages/MyTransfers/MyTransfers';
 import { TransfersProvider } from '../../store/TransfersContext';
+import ListWallets from '../../pages/ListWallets/ListWallets';
+import { WalletsProvider } from '../../store/WalletsContext';
 
 const ProtectedRoute = ({ isLoggedIn, redirectPath = '/login' }) => {
   if (!isLoggedIn) {
@@ -24,7 +26,7 @@ const ClientRoutes = () => {
     <Routes>
       <Route element={<ProtectedRoute isLoggedIn={authCtx.isLoggedIn} />}>
         <Route
-          path='/'
+          path="/"
           exact
           element={
             <Layout>
@@ -33,7 +35,7 @@ const ClientRoutes = () => {
           }
         />
         <Route
-          path='/my-transfers'
+          path="/my-transfers"
           exact
           element={
             <Layout>
@@ -44,7 +46,7 @@ const ClientRoutes = () => {
           }
         />
         <Route
-          path='/send-tokens'
+          path="/send-tokens"
           exact
           element={
             <Layout>
@@ -53,15 +55,26 @@ const ClientRoutes = () => {
           }
         />
         <Route
-          path='*'
+          path="/list-wallets"
+          exact
+          element={
+            <Layout>
+              <WalletsProvider>
+                <ListWallets />
+              </WalletsProvider>
+            </Layout>
+          }
+        />
+        <Route
+          path="*"
           element={
             <Layout>
               <NotFound />
             </Layout>
           }
         />
       </Route>
-      <Route path='login' element={<Login />} />
+      <Route path="login" element={<Login />} />
     </Routes>
   );
 };

src/components/layout/Menu/MenuItem/MenuItem.js

@@ -1,6 +1,7 @@
 import CompareIcon from '@mui/icons-material/Compare';
 import HomeIcon from '@mui/icons-material/Home';
 import ThumbsUpDownIcon from '@mui/icons-material/ThumbsUpDown';
+import AccountBalanceWalletRoundedIcon from '@mui/icons-material/AccountBalanceWalletRounded';
 import * as React from 'react';
 import LinkItem from './LinkItem';
 
@@ -25,6 +26,12 @@ const MenuItem = ({ open }) => {
         itemIcon={<CompareIcon />}
         open={open}
       />
+      <LinkItem
+        itemPath={'/list-wallets'}
+        itemName={'List Wallets'}
+        itemIcon={<AccountBalanceWalletRoundedIcon />}
+        open={open}
+      />
     </>
   );
 };

src/pages/ListWallets/ListWallets.js

@@ -0,0 +1,74 @@
+/* eslint-disable no-debugger */
+import React, { useContext, useEffect, useState } from 'react';
+import { Grid } from '@mui/material';
+import WalletsTable from './WalletsTable';
+import Message from '../../components/UI/components/Message/Message';
+import { getWallets } from '../../api/wallets';
+import AuthContext from '../../store/auth-context';
+import { useWalletsContext } from '../../store/WalletsContext';
+
+/**@function
+ * @name ListWallets
+ * @description Renders the List Wallets page
+ *
+ * @returns {JSX.Element} - List Wallets page component
+ * */
+const ListWallets = () => {
+  // get data from context
+  const { pagination, setIsLoading, prepareRows } = useWalletsContext();
+  // error
+  const [message, setMessage] = useState('');
+  // data to be displayed in the table
+  const [tableRows, setTableRows] = useState([]);
+  // total rows count for pagination
+  const [totalRowCount, setTotalRowCount] = useState(null);
+
+  const authContext = useContext(AuthContext);
+
+  // load data
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setIsLoading(true);
+        debugger;
+        const data = await getWallets(authContext.token, '', {
+          pagination,
+        });
+        const preparedRows = prepareRows(await data.wallets);
+
+        setTableRows(preparedRows);
+        setTotalRowCount(data.total);
+      } catch (error) {
+        console.error(error);
+        setMessage('An error occurred while fetching the table data');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadData();
+  }, [pagination]);
+
+  return (
+    <div
+      style={{
+        marginTop: '5rem',
+        marginLeft: '1rem',
+        display: 'flex',
+        flexDirection: 'column',
+        marginRight: '1rem',
+        width: '100%',
+      }}
+    >
+      {message && <Message message={message} onClose={() => setMessage('')} />}
+      <Grid container direction="column" sx={{ flexGrow: '1' }}>
+        <WalletsTable
+          tableTitle={'Managed Wallets List'}
+          tableRows={tableRows}
+          totalRowCount={totalRowCount}
+        />
+      </Grid>
+    </div>
+  );
+};
+
+export default ListWallets;