test

blockscout · Feb 5, 2024 · 5a25e18 · 5a25e18
1 parent fe81cfe
commit 5a25e18
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 72 deletions.
diff --git a/pages/txs/index.tsx b/pages/txs/index.tsx
@@ -1,10 +1,10 @@
 import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
 import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-const Transactions = dynamic(() => import('ui/pages/Transactions'), { ssr: false });
+// const Transactions = dynamic(() => import('ui/pages/Transactions'), { ssr: false });
+import Transactions from 'ui/pages/Transactions';
 
 const Page: NextPage = () => {
   return (

diff --git a/ui/txs/TxsContent.tsx b/ui/txs/TxsContent.tsx
@@ -1,4 +1,3 @@
-import { Show, Hide } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressFromToFilter } from 'types/api/address';
@@ -11,7 +10,6 @@ import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPage
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
 
 import TxsHeaderMobile from './TxsHeaderMobile';
-import TxsList from './TxsList';
 import TxsTable from './TxsTable';
 
 const SORT_SEQUENCE: Record<TransactionsSortingField, Array<TransactionsSortingValue | undefined>> = {
@@ -63,35 +61,19 @@ const TxsContent = ({
   }, [ sort, setSorting ]);
 
   const content = items ? (
-    <>
-      <Show below="lg" ssr={ false }>
-        <TxsList
-          showBlockInfo={ showBlockInfo }
-          showSocketInfo={ showSocketInfo }
-          socketInfoAlert={ socketInfoAlert }
-          socketInfoNum={ socketInfoNum }
-          isLoading={ isPlaceholderData }
-          enableTimeIncrement={ enableTimeIncrement }
-          currentAddress={ currentAddress }
-          items={ items }
-        />
-      </Show>
-      <Hide below="lg" ssr={ false }>
-        <TxsTable
-          txs={ items }
-          sort={ onSortToggle }
-          sorting={ sort }
-          showBlockInfo={ showBlockInfo }
-          showSocketInfo={ showSocketInfo }
-          socketInfoAlert={ socketInfoAlert }
-          socketInfoNum={ socketInfoNum }
-          top={ top || query.pagination.isVisible ? 80 : 0 }
-          currentAddress={ currentAddress }
-          enableTimeIncrement={ enableTimeIncrement }
-          isLoading={ isPlaceholderData }
-        />
-      </Hide>
-    </>
+    <TxsTable
+      txs={ items }
+      sort={ onSortToggle }
+      sorting={ sort }
+      showBlockInfo={ showBlockInfo }
+      showSocketInfo={ showSocketInfo }
+      socketInfoAlert={ socketInfoAlert }
+      socketInfoNum={ socketInfoNum }
+      top={ top || query.pagination.isVisible ? 80 : 0 }
+      currentAddress={ currentAddress }
+      enableTimeIncrement={ enableTimeIncrement }
+      isLoading={ isPlaceholderData }
+    />
   ) : null;
 
   const actionBar = isMobile ? (

diff --git a/ui/txs/TxsTable.tsx b/ui/txs/TxsTable.tsx
@@ -1,16 +1,11 @@
-import { Link, Table, Tbody, Tr, Th } from '@chakra-ui/react';
+import { Thead, Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 
 import type { Transaction, TransactionsSortingField, TransactionsSortingValue } from 'types/api/transaction';
 
-import config from 'configs/app';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
-import { currencyUnits } from 'lib/units';
-import IconSvg from 'ui/shared/IconSvg';
-import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
-import TheadSticky from 'ui/shared/TheadSticky';
 
 import TxsTableItem from './TxsTableItem';
 
@@ -30,13 +25,8 @@ type Props = {
 
 const TxsTable = ({
   txs,
-  sort,
-  sorting,
   top,
   showBlockInfo,
-  showSocketInfo,
-  socketInfoAlert,
-  socketInfoNum,
   currentAddress,
   enableTimeIncrement,
   isLoading,
@@ -46,43 +36,19 @@ const TxsTable = ({
   return (
     <AddressHighlightProvider>
       <Table variant="simple" minWidth="950px" size="xs">
-        <TheadSticky top={ top }>
+        <Thead top={ top }>
           <Tr>
             <Th width="54px"></Th>
             <Th width="22%">Txn hash</Th>
             <Th width="160px">Type</Th>
             <Th width="20%">Method</Th>
             { showBlockInfo && <Th width="18%">Block</Th> }
             <Th width={{ base: '224px', xl: '360px' }}>From/To</Th>
-            { !config.UI.views.tx.hiddenFields?.value && (
-              <Th width="20%" isNumeric>
-                <Link onClick={ sort('value') } display="flex" justifyContent="end">
-                  { sorting === 'value-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
-                  { sorting === 'value-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
-                  { `Value ${ currencyUnits.ether }` }
-                </Link>
-              </Th>
-            ) }
-            { !config.UI.views.tx.hiddenFields?.tx_fee && (
-              <Th width="20%" isNumeric pr={ 5 }>
-                <Link onClick={ sort('fee') } display="flex" justifyContent="end">
-                  { sorting === 'fee-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
-                  { sorting === 'fee-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
-                  { `Fee${ config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }` }
-                </Link>
-              </Th>
-            ) }
+            <Th width="20%" isNumeric>Value</Th>
+            <Th width="20%" isNumeric pr={ 5 }>Fee</Th>
           </Tr>
-        </TheadSticky>
+        </Thead>
         <Tbody>
-          { showSocketInfo && (
-            <SocketNewItemsNotice.Desktop
-              url={ window.location.href }
-              alert={ socketInfoAlert }
-              num={ socketInfoNum }
-              isLoading={ isLoading }
-            />
-          ) }
           <AnimatePresence initial={ false }>
             { txs.slice(0, renderedItemsNum).map((item, index) => (
               <TxsTableItem