Drop Manager Refactors and Keypom Rewrite

src/components/ProtectedRoutes/ProtectedRoute.tsx

@@ -15,8 +15,9 @@
   const navigate = useNavigate();
 
   useEffect(() => {
+    console.log('isLoggedIn', isLoggedIn);
     if (!isLoggedIn) {
       console.error('Unauthenticated page access.');
       navigate(redirectPath);
     }
   }, [isLoggedIn]);

src/components/SignedInButton/SignedInButton.tsx

@@ -27,6 +27,10 @@
   const { account, selector } = useAuthWalletContext();
 
   const handleSignOut = async () => {
+    if (!selector.isSignedIn()) {
+      console.error('Not signed in');
+      return;
+    }
     const wallet = await selector.wallet();
 
     wallet
@@ -53,7 +57,7 @@
     const amountInNEAR = formatNearAmount(account.amount, 4);
 
     if (amountInNEAR === null) {
       console.error('Account amount is null');
       return 0;
     }
 

src/components/Table/DataTable.tsx

@@ -33,7 +33,7 @@ import { type ColumnItem, type DataItem } from './types';
  */
 
 interface DataTableProps extends TableProps {
-  type?: 'all-drops' | 'drop-manager' | 'no-filtered-drops';
+  type?: 'all-drops' | 'drop-manager' | 'no-filtered-keys' | 'no-filtered-drops';
   showColumns?: boolean;
   columns: ColumnItem[];
   data: DataItem[];
@@ -98,12 +98,21 @@ export const DataTable = ({
           {/* Desktop Table */}
           <Show above="md">
             <TableContainer>
-              <Table {...props}>
+              <Table {...props} borderRadius="12px">
                 {showColumns && (
                   <Thead>
                     <Tr>
-                      {columns.map((col) => (
-                        <Th key={col.id} fontFamily="body" {...col.thProps}>
+                      {columns.map((col, index) => (
+                        <Th
+                          key={col.id}
+                          fontFamily="body"
+                          {...col.thProps}
+                          // Apply a border radius of 12px to the first and last Th elements
+                          borderTopLeftRadius={index === 0 ? '12px !important' : undefined}
+                          borderTopRightRadius={
+                            index === columns.length - 1 ? '12px !important' : undefined
+                          }
+                        >
                           {col.title}
                         </Th>
                       ))}

src/components/Table/MobileDataTable.tsx

@@ -41,7 +41,7 @@ export const MobileDataTable = ({
       ));
     }
 
-    return data.map((drop) => (
+    return data.map((drop, idx) => (
       <Tr
         key={drop.id}
         _hover={
@@ -69,14 +69,16 @@ export const MobileDataTable = ({
               ))}
           </VStack>
         </Td>
-        <Td verticalAlign="middle">{actionColumn.selector(drop)}</Td>
+        <Td textAlign="end" verticalAlign="middle">
+          {actionColumn.selector(drop)}
+        </Td>
       </Tr>
     ));
   };
 
   return (
     <TableContainer whiteSpace="normal">
-      <Table {...props}>
+      <Table {...props} borderRadius="12px">
         <Tbody>{getMobileTableBody()}</Tbody>
       </Table>
     </TableContainer>

src/components/Table/constants.ts

@@ -7,6 +7,10 @@ export const EMPTY_TABLE_TEXT_MAP = {
     heading: `No drops found with the current filters`,
     text: `Please try different filters`,
   },
+  'no-filtered-keys': {
+    heading: `No keys found with the current filters`,
+    text: `Please try different filters`,
+  },
   'drop-manager': {
     heading: `You haven't added any keys`,
     text: '',

src/constants/common.ts

@@ -19,6 +19,6 @@ export const MASTER_KEY = 'MASTER_KEY';
 
 export const MAX_FILE_SIZE = 10000000;
 
-export const PAGE_SIZE_LIMIT = 10;
+export const PAGE_SIZE_LIMIT = 5;
 export const NFT_ATTEMPT_KEY = 'NFT_ATTEMPT';
 export const PAGE_QUERY_PARAM = 'page';

src/contexts/AuthWalletContext.tsx

@@ -105,7 +105,7 @@ export const AuthWalletContextProvider = ({ children }: PropsWithChildren) => {
     selector: selector as WalletSelector,
     accounts,
     accountId,
-    isLoggedIn: Boolean(sessionStorage.getItem('account')), // selector?.isSignedIn(), with null, cant login. with undefined, cant signout properly
+    isLoggedIn: Boolean(selector ? selector.isSignedIn() : true), // selector?.isSignedIn(), with null, cant login. with undefined, cant signout properly
     account: account as Account,
   };
 

src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}