feat: add sorting icons; rename MyWallets table

src/components/Routes/ClientRoutes.js

@@ -8,7 +8,7 @@ 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 MyWallets from '../../pages/MyWallets/MyWallets';
 import { WalletsProvider } from '../../store/WalletsContext';
 
 const ProtectedRoute = ({ isLoggedIn, redirectPath = '/login' }) => {
@@ -60,7 +60,7 @@ const ClientRoutes = () => {
           element={
             <Layout>
               <WalletsProvider>
-                <ListWallets />
+                <MyWallets />
               </WalletsProvider>
             </Layout>
           }

src/components/UI/components/Table/Table.js

@@ -10,6 +10,8 @@ import {
   TableRow,
   Typography,
 } from '@mui/material';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import React, { useEffect, useRef, useState } from 'react';
 import { TableCellStyled, TooltipStyled } from './Table.styled';
 import { Loader } from '../Loader/Loader';
@@ -172,7 +174,7 @@ const Table = ({
     setPagination(newPagination);
   };
 
-  const mapSortBy = (columnName) => {
+  const getColumnNames = (columnName) => {
     let newSortBy = columnName;
     switch (columnName) {
       case 'wallet_name':
@@ -184,6 +186,12 @@ const Table = ({
       default:
         newSortBy = columnName;
     }
+
+    return newSortBy;
+  };
+
+  const mapSortBy = (columnName) => {
+    let newSortBy = getColumnNames(columnName);
     setSortBy(newSortBy);
 
     return newSortBy;
@@ -231,9 +239,27 @@ const Table = ({
                     sx={{ fontSize: '14px' }}
                     align={'center'}
                     onClick={() => column.sortable && handleSort(column)}
-                    className={sortBy === column.name ? `sorted-${order}` : ''}
+                    className={
+                      (sortBy === column.name ? `sort sorted-${order}` : '',
+                      column.sortable ? 'sort' : '')
+                    }
                   >
                     {column.description}
+                    {column.sortable &&
+                      sortBy === getColumnNames(column.name) && (
+                        <>
+                          {order === 'asc' && (
+                            <ArrowUpwardIcon
+                              style={{ verticalAlign: 'middle' }}
+                            />
+                          )}
+                          {order === 'desc' && (
+                            <ArrowDownwardIcon
+                              style={{ verticalAlign: 'middle' }}
+                            />
+                          )}
+                        </>
+                      )}
                   </TableCellStyled>
                 );
               })}

src/components/UI/components/Table/Table.styled.js

@@ -8,6 +8,10 @@ export const TableCellStyled = styled(TableCell)({
   whiteSpace: 'nowrap',
   width: '170px',
   maxWidth: '170px',
+
+  '&.sort': {
+    cursor: 'pointer',
+  },
 });
 
 export const TooltipStyled = styled(Tooltip)({

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

@@ -28,7 +28,7 @@ const MenuItem = ({ open }) => {
       />
       <LinkItem
         itemPath={'/list-wallets'}
-        itemName={'List Wallets'}
+        itemName={'My Wallets'}
         itemIcon={<AccountBalanceWalletRoundedIcon />}
         open={open}
       />

src/pages/ListWallets/ListWallets.js → src/pages/MyWallets/MyWallets.js

@@ -5,16 +5,16 @@ import { getWallets } from '../../api/wallets';
 import AuthContext from '../../store/auth-context';
 import { useWalletsContext } from '../../store/WalletsContext';
 import Table from '../../components/UI/components/Table/Table';
-import { Container } from './ListWallets.style';
+import { Container } from './MyWallets.style';
 import CreateManagedWallet from './CreateManagedWallet/CreateManagedWallet';
 
 /**@function
- * @name ListWallets
- * @description Renders the List Wallets page
+ * @name MyWallets
+ * @description Renders the My Wallets page
  *
- * @returns {JSX.Element} - List Wallets page component
+ * @returns {JSX.Element} - My Wallets page component
  * */
-const ListWallets = () => {
+const MyWallets = () => {
   const {
     pagination,
     sorting,
@@ -71,7 +71,7 @@ const ListWallets = () => {
         sx={{ flexGrow: '1', display: 'flex', flexDirection: 'column' }}
       >
         <Grid item>
-          <Typography variant={'h4'}>Managed Wallets List</Typography>
+          <Typography variant={'h4'}>My Wallets</Typography>
           <CreateManagedWallet loadData={loadData} />
         </Grid>
         <Grid item>
@@ -91,4 +91,4 @@ const ListWallets = () => {
   );
 };
 
-export default ListWallets;
+export default MyWallets;

src/pages/ListWallets/ListWallets.test.js → src/pages/MyWallets/MyWallets.test.js

@@ -4,7 +4,7 @@ import theme from '../../components/UI/theme';
 import AuthProvider from '../../store/AuthProvider';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { WalletsProvider } from '../../store/WalletsContext';
-import ListWallets from './ListWallets';
+import MyWallets from './MyWallets';
 import { getWallets } from '../../api/wallets';
 
 jest.mock('../../api/wallets', () => ({
@@ -157,7 +157,7 @@ describe('Wallets List page', function () {
     getWallets.mockResolvedValueOnce(mockWalletsData);
     render(
       <TestWrapper>
-        <ListWallets />
+        <MyWallets />
       </TestWrapper>
     );
     expect(await screen.findByTestId('table-pagination')).toBeInTheDocument();

src/pages/Wallet/Wallet.js

@@ -96,7 +96,7 @@ const Wallet = () => {
         <WalletHeader
           walletName={wallet.name}
           walletLogoURL={wallet.logoURL}
-          pendingTransfers={pendingTransfers.length}
+          pendingTransfers={pendingTransfers?.length}
         />
       </GridItem>
 

src/store/WalletsContext.js

@@ -33,7 +33,7 @@ const WalletsProvider = ({ children }) => {
     {
       description: 'Name',
       name: 'wallet_name',
-      sortable: false,
+      sortable: true,
       showInfoIcon: false,
     },
     {