Address page: change list views to table views on mobile

src/features/chain-variants/beacon-chain/pages/address/AddressDeposits.tsx

@@ -1,6 +1,5 @@
 // SPDX-License-Identifier: LicenseRef-Blockscout
 
-import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -13,8 +12,9 @@ import useQueryWithPages from 'src/shared/pagination/useQueryWithPages';
 import { generateListStub } from 'src/shared/pagination/utils';
 import getQueryParamString from 'src/shared/router/get-query-param-string';
 
+import { TableContainerScrollable } from 'src/toolkit/chakra/table';
+
 import { DEPOSIT } from '../../stubs/deposits';
-import BeaconChainDepositsListItem from '../deposits/BeaconChainDepositsListItem';
 import BeaconChainDepositsTable from '../deposits/BeaconChainDepositsTable';
 
 type Props = {
@@ -44,26 +44,14 @@ const AddressDeposits = ({ shouldRender = true, isQueryEnabled = true }: Props)
   }
 
   const content = data?.items ? (
-    <>
-      <Box hideFrom="lg">
-        { data.items.map((item, index) => (
-          <BeaconChainDepositsListItem
-            key={ item.index + Number(isPlaceholderData ? index : '') }
-            item={ item }
-            view="address"
-            isLoading={ isPlaceholderData }
-          />
-        )) }
-      </Box>
-      <Box hideBelow="lg">
-        <BeaconChainDepositsTable
-          items={ data.items }
-          view="address"
-          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
-          isLoading={ isPlaceholderData }
-        />
-      </Box>
-    </>
+    <TableContainerScrollable>
+      <BeaconChainDepositsTable
+        items={ data.items }
+        view="address"
+        top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+        isLoading={ isPlaceholderData }
+      />
+    </TableContainerScrollable>
   ) : null ;
 
   const actionBar = pagination.isVisible ? (

src/slices/address/pages/details/withdrawals/AddressWithdrawals.tsx → src/features/chain-variants/beacon-chain/pages/address/AddressWithdrawals.tsx

@@ -1,12 +1,10 @@
 // SPDX-License-Identifier: LicenseRef-Blockscout
 
-import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'src/shell/page/action-bar/ActionBar';
 
-import BeaconChainWithdrawalsListItem from 'src/features/chain-variants/beacon-chain/pages/withdrawals/BeaconChainWithdrawalsListItem';
 import BeaconChainWithdrawalsTable from 'src/features/chain-variants/beacon-chain/pages/withdrawals/BeaconChainWithdrawalsTable';
 import { WITHDRAWAL } from 'src/features/chain-variants/beacon-chain/stubs/withdrawals';
 
@@ -17,6 +15,8 @@ import useQueryWithPages from 'src/shared/pagination/useQueryWithPages';
 import { generateListStub } from 'src/shared/pagination/utils';
 import getQueryParamString from 'src/shared/router/get-query-param-string';
 
+import { TableContainerScrollable } from 'src/toolkit/chakra/table';
+
 type Props = {
   shouldRender?: boolean;
   isQueryEnabled?: boolean;
@@ -44,26 +44,14 @@ const AddressWithdrawals = ({ shouldRender = true, isQueryEnabled = true }: Prop
   }
 
   const content = data?.items ? (
-    <>
-      <Box hideFrom="lg">
-        { data.items.map((item, index) => (
-          <BeaconChainWithdrawalsListItem
-            key={ item.index + Number(isPlaceholderData ? index : '') }
-            item={ item }
-            view="address"
-            isLoading={ isPlaceholderData }
-          />
-        )) }
-      </Box>
-      <Box hideBelow="lg">
-        <BeaconChainWithdrawalsTable
-          items={ data.items }
-          view="address"
-          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
-          isLoading={ isPlaceholderData }
-        />
-      </Box>
-    </>
+    <TableContainerScrollable>
+      <BeaconChainWithdrawalsTable
+        items={ data.items }
+        view="address"
+        top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+        isLoading={ isPlaceholderData }
+      />
+    </TableContainerScrollable>
   ) : null ;
 
   const actionBar = pagination.isVisible ? (

src/features/chain-variants/beacon-chain/pages/deposits/BeaconChainDepositsTable.tsx

@@ -35,7 +35,7 @@ const BeaconChainDepositsTable = ({ items, isLoading, top, view }: Props) => {
       <TableRoot minW="1100px">
         <TableHeaderSticky top={ top }>
           <TableRow>
-            <TableColumnHeader w="190px">Transaction hash</TableColumnHeader>
+            <TableColumnHeader w="200px">Transaction hash</TableColumnHeader>
             { view !== 'block' && <TableColumnHeader>Block</TableColumnHeader> }
             { view !== 'block' && <TableColumnHeader w="180px">Timestamp<TimeFormatToggle/></TableColumnHeader> }
             <TableColumnHeader>{ `Value ${ feature.currency.symbol }` }</TableColumnHeader>

src/features/chain-variants/celo/pages/address/AddressEpochRewards.tsx

@@ -1,6 +1,5 @@
 // SPDX-License-Identifier: LicenseRef-Blockscout
 
-import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -16,7 +15,8 @@ import useQueryWithPages from 'src/shared/pagination/useQueryWithPages';
 import { generateListStub } from 'src/shared/pagination/utils';
 import getQueryParamString from 'src/shared/router/get-query-param-string';
 
-import AddressEpochRewardsListItem from './AddressEpochRewardsListItem';
+import { TableContainerScrollable } from 'src/toolkit/chakra/table';
+
 import AddressEpochRewardsTable from './AddressEpochRewardsTable';
 
 type Props = {
@@ -52,24 +52,13 @@ const AddressEpochRewards = ({ shouldRender = true, isQueryEnabled = true }: Pro
   }
 
   const content = rewardsQuery.data?.items ? (
-    <>
-      <Box hideBelow="lg">
-        <AddressEpochRewardsTable
-          items={ rewardsQuery.data.items }
-          top={ rewardsQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
-          isLoading={ rewardsQuery.isPlaceholderData }
-        />
-      </Box>
-      <Box hideFrom="lg">
-        { rewardsQuery.data.items.map((item, index) => (
-          <AddressEpochRewardsListItem
-            key={ item.epoch_number + item.type + item.account.hash + item.associated_account.hash + (rewardsQuery.isPlaceholderData ? String(index) : '') }
-            item={ item }
-            isLoading={ rewardsQuery.isPlaceholderData }
-          />
-        )) }
-      </Box>
-    </>
+    <TableContainerScrollable>
+      <AddressEpochRewardsTable
+        items={ rewardsQuery.data.items }
+        top={ rewardsQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+        isLoading={ rewardsQuery.isPlaceholderData }
+      />
+    </TableContainerScrollable>
   ) : null;
 
   const actionBar = (

src/features/cross-chain-txs/pages/address/AddressTxsCrossChain.tsx

@@ -5,38 +5,26 @@ import React from 'react';
 import ActionBar from 'src/shell/page/action-bar/ActionBar';
 
 import useIsMobile from 'src/shared/hooks/useIsMobile';
-import TableViewToggleButton from 'src/shared/lists/TableViewToggleButton';
-import useTableViewValue from 'src/shared/lists/useTableViewValue';
 import Pagination from 'src/shared/pagination/Pagination';
 
 import TransactionsCrossChainContent from '../../components/txs/TransactionsCrossChainContent';
 import type { Props } from '../../components/txs/TransactionsCrossChainContent';
 
-const AddressCrossChainTxs = ({ pagination, isLoading: isLoadingProp, ...rest }: Props) => {
+const AddressCrossChainTxs = ({ pagination, isLoading, ...rest }: Props) => {
   const isMobile = useIsMobile();
 
-  const tableViewFlag = useTableViewValue();
-
-  const isTableView = isMobile ? !tableViewFlag.isLoading && tableViewFlag.value : true;
-  const isLoading = isLoadingProp || tableViewFlag.isLoading;
-
   return (
     <>
       { isMobile && (
         <ActionBar>
-          <TableViewToggleButton
-            value={ tableViewFlag.value }
-            onClick={ tableViewFlag.onToggle }
-            loading={ isLoading }
-          />
           { pagination?.isVisible && <Pagination { ...pagination } ml="auto"/> }
         </ActionBar>
       ) }
       <TransactionsCrossChainContent
         pagination={ pagination }
         isLoading={ isLoading }
-        isTableView={ isTableView }
-        stickyHeader={ !isMobile && isTableView }
+        isTableView
+        stickyHeader={ !isMobile }
         { ...rest }
       />
     </>

src/features/multichain/pages/address/MultichainAddressTxs.tsx

@@ -171,6 +171,7 @@ const MultichainAddressTxs = ({ addressData, isLoading }: Props) => {
               top={ ACTION_BAR_HEIGHT_DESKTOP }
               sorting={ txsQueryLocal.sort }
               setSort={ txsQueryLocal.setSort }
+              showTableView
             />
           </MultichainProvider>
         </SocketProvider>

src/features/multichain/pages/address/portfolio/MultichainAddressPortfolioTokens.tsx

@@ -27,12 +27,12 @@ import { generateListStub } from 'src/shared/pagination/utils';
 import getQueryParamString from 'src/shared/router/get-query-param-string';
 import * as cookies from 'src/shared/storage/cookies';
 
+import { TableContainerScrollable } from 'src/toolkit/chakra/table';
 import { FilterInput } from 'src/toolkit/components/filters/FilterInput';
 import { ZERO } from 'src/toolkit/utils/consts';
 
 import MultichainAddressPortfolioCards from './MultichainAddressPortfolioCards';
 import MultichainAddressPortfolioNetWorth from './MultichainAddressPortfolioNetWorth';
-import MultichainAddressTokensListItem from './MultichainAddressTokensListItem';
 import MultichainAddressTokensTable from './MultichainAddressTokensTable';
 
 interface Props {
@@ -197,33 +197,22 @@ const MultichainAddressPortfolioTokens = ({ addressData, isLoading, onChainChang
   );
 
   const tokensContent = tokensQuery.data?.items ? (
-    <>
-      <Box hideBelow="lg">
-        <MultichainAddressTokensTable
-          data={ tokensQuery.data.items }
-          top={ ACTION_BAR_HEIGHT_DESKTOP }
-          isLoading={ tokensQuery.isPlaceholderData }
-        />
-      </Box>
-      <Box hideFrom="lg">
-        { tokensQuery.data.items.map((item, index) => (
-          <MultichainAddressTokensListItem
-            key={ item.token.address_hash + (tokensQuery.isPlaceholderData ? index : '') + (item.chain_values ? Object.keys(item.chain_values).join(',') : '') }
-            data={ item }
-            isLoading={ tokensQuery.isPlaceholderData }
-          />
-        )) }
-      </Box>
-    </>
+    <TableContainerScrollable>
+      <MultichainAddressTokensTable
+        data={ tokensQuery.data.items }
+        top={ ACTION_BAR_HEIGHT_DESKTOP }
+        isLoading={ tokensQuery.isPlaceholderData }
+      />
+    </TableContainerScrollable>
   ) : null;
 
   const actionBar = (
     <>
-      <Box hideFrom="lg" my={ 6 }>
+      <Box hideFrom="lg" mt={ 6 } mb={ 3 }>
         { searchInput }
       </Box>
       { (!isMobile || tokensQuery.pagination.isVisible) && (
-        <ActionBar mt={{ base: -6, lg: 0 }}>
+        <ActionBar mt={{ base: -3, lg: 0 }}>
           <Box hideBelow="lg">
             { searchInput }
           </Box>

src/features/multichain/pages/address/portfolio/MultichainAddressTokensTable.tsx

@@ -16,7 +16,7 @@ interface Props {
 
 const MultichainAddressTokensTable = ({ data, top, isLoading }: Props) => {
   return (
-    <TableRoot>
+    <TableRoot minW="900px">
       <TableHeaderSticky top={ top }>
         <TableRow>
           <TableColumnHeader width="55%">Asset</TableColumnHeader>

src/features/tx-interpretation/noves/pages/address/AddressAccountHistory.tsx

@@ -1,6 +1,5 @@
 // SPDX-License-Identifier: LicenseRef-Blockscout
 
-import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -20,10 +19,9 @@ import { generateListStub } from 'src/shared/pagination/utils';
 import getFilterValueFromQuery from 'src/shared/router/get-filter-value-from-query';
 import getQueryParamString from 'src/shared/router/get-query-param-string';
 
-import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'src/toolkit/chakra/table';
+import { TableBody, TableColumnHeader, TableContainerScrollable, TableHeaderSticky, TableRoot, TableRow } from 'src/toolkit/chakra/table';
 
 import AccountHistoryFilter from './AddressAccountHistoryFilter';
-import AddressAccountHistoryListItem from './AddressAccountHistoryListItem';
 import AddressAccountHistoryTableItem from './AddressAccountHistoryTableItem';
 
 const getFilterValue = (getFilterValueFromQuery<NovesHistoryFilterValue>).bind(null, NovesHistoryFilterValues);
@@ -76,46 +74,33 @@ const AddressAccountHistory = ({ shouldRender = true, isQueryEnabled = true }: P
   const filteredData = isPlaceholderData ? data?.items : data?.items.filter(i => filterValue ? getFromToValue(i, currentAddress) === filterValue : i);
 
   const content = (
-    <Box position="relative">
-      <Box hideFrom="lg">
-        { filteredData?.map((item, i) => (
-          <AddressAccountHistoryListItem
-            key={ `${ i }-${ item.rawTransactionData.transactionHash }` }
-            tx={ item }
-            currentAddress={ currentAddress }
-            isPlaceholderData={ isPlaceholderData }
-          />
-        )) }
-      </Box>
-
-      <Box hideBelow="lg">
-        <TableRoot>
-          <TableHeaderSticky top={ 75 }>
-            <TableRow>
-              <TableColumnHeader width="120px">
-                Age
-              </TableColumnHeader>
-              <TableColumnHeader>
-                Action
-              </TableColumnHeader>
-              <TableColumnHeader width="320px">
-                From/To
-              </TableColumnHeader>
-            </TableRow>
-          </TableHeaderSticky>
-          <TableBody maxWidth="full">
-            { filteredData?.map((item, i) => (
-              <AddressAccountHistoryTableItem
-                key={ `${ i }-${ item.rawTransactionData.transactionHash }` }
-                tx={ item }
-                currentAddress={ currentAddress }
-                isPlaceholderData={ isPlaceholderData }
-              />
-            )) }
-          </TableBody>
-        </TableRoot>
-      </Box>
-    </Box>
+    <TableContainerScrollable>
+      <TableRoot minW="900px">
+        <TableHeaderSticky top={ 75 }>
+          <TableRow>
+            <TableColumnHeader width="120px">
+              Age
+            </TableColumnHeader>
+            <TableColumnHeader>
+              Action
+            </TableColumnHeader>
+            <TableColumnHeader width="320px">
+              From/To
+            </TableColumnHeader>
+          </TableRow>
+        </TableHeaderSticky>
+        <TableBody maxWidth="full">
+          { filteredData?.map((item, i) => (
+            <AddressAccountHistoryTableItem
+              key={ `${ i }-${ item.rawTransactionData.transactionHash }` }
+              tx={ item }
+              currentAddress={ currentAddress }
+              isPlaceholderData={ isPlaceholderData }
+            />
+          )) }
+        </TableBody>
+      </TableRoot>
+    </TableContainerScrollable>
   );
 
   return (