fix navigation between pages for shibarium deposits and withdrawals views

ui/deposits/shibarium/DepositsTable.tsx

@@ -14,7 +14,7 @@ import DepositsTableItem from './DepositsTableItem';
 
 const DepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <TableRoot style={{ tableLayout: 'auto' }} minW="950px">
+    <TableRoot tableLayout="auto" minW="950px">
       <TableHeaderSticky top={ top }>
         <TableRow>
           <TableColumnHeader>L1 block No</TableColumnHeader>
@@ -26,7 +26,7 @@ const DepositsTable = ({ items, top, isLoading }: Props) => {
       </TableHeaderSticky>
       <TableBody>
         { items.map((item, index) => (
-          <DepositsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+          <DepositsTableItem key={ `${ item.l2_transaction_hash }-${ index }` } item={ item } isLoading={ isLoading }/>
         )) }
       </TableBody>
     </TableRoot>

ui/pages/ShibariumDeposits.tsx

@@ -42,7 +42,7 @@ const L2Deposits = () => {
       <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <DepositsListItem
-            key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') }
+            key={ `${ item.l2_transaction_hash }-${ index }` }
             isLoading={ isPlaceholderData }
             item={ item }
           />

ui/pages/ShibariumWithdrawals.tsx

@@ -14,7 +14,7 @@ import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
 import WithdrawalsListItem from 'ui/withdrawals/shibarium/WithdrawalsListItem';
 import WithdrawalsTable from 'ui/withdrawals/shibarium/WithdrawalsTable';
 
-const L2Withdrawals = () => {
+const ShibariumWithdrawals = () => {
   const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
     resourceName: 'shibarium_withdrawals',
     options: {
@@ -42,7 +42,7 @@ const L2Withdrawals = () => {
       <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <WithdrawalsListItem
-            key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') }
+            key={ `${ item.l2_transaction_hash }-${ index }` }
             item={ item }
             isLoading={ isPlaceholderData }
           />
@@ -83,4 +83,4 @@ const L2Withdrawals = () => {
   );
 };
 
-export default L2Withdrawals;
+export default ShibariumWithdrawals;

ui/withdrawals/shibarium/WithdrawalsTable.tsx

@@ -14,7 +14,7 @@ import WithdrawalsTableItem from './WithdrawalsTableItem';
 
 const WithdrawalsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <TableRoot style={{ tableLayout: 'auto' }} minW="950px">
+    <TableRoot tableLayout="auto" minW="950px">
       <TableHeaderSticky top={ top }>
         <TableRow>
           <TableColumnHeader>L2 block No</TableColumnHeader>
@@ -26,7 +26,7 @@ const WithdrawalsTable = ({ items, top, isLoading }: Props) => {
       </TableHeaderSticky>
       <TableBody>
         { items.map((item, index) => (
-          <WithdrawalsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+          <WithdrawalsTableItem key={ `${ item.l2_transaction_hash }-${ index }` } item={ item } isLoading={ isLoading }/>
         )) }
       </TableBody>
     </TableRoot>