diff --git a/src/features/chain-variants/beacon-chain/pages/address/AddressDeposits.tsx b/src/features/chain-variants/beacon-chain/pages/address/AddressDeposits.tsx index 74f64419065..43a76b0a1d7 100644 --- a/src/features/chain-variants/beacon-chain/pages/address/AddressDeposits.tsx +++ b/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 ? ( - <> - - { data.items.map((item, index) => ( - - )) } - - - - - + + + ) : null ; const actionBar = pagination.isVisible ? ( diff --git a/src/slices/address/pages/details/withdrawals/AddressWithdrawals.tsx b/src/features/chain-variants/beacon-chain/pages/address/AddressWithdrawals.tsx similarity index 72% rename from src/slices/address/pages/details/withdrawals/AddressWithdrawals.tsx rename to src/features/chain-variants/beacon-chain/pages/address/AddressWithdrawals.tsx index f7b1067e4e4..7e6d9918906 100644 --- a/src/slices/address/pages/details/withdrawals/AddressWithdrawals.tsx +++ b/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 ? ( - <> - - { data.items.map((item, index) => ( - - )) } - - - - - + + + ) : null ; const actionBar = pagination.isVisible ? ( diff --git a/src/features/chain-variants/beacon-chain/pages/deposits/BeaconChainDepositsTable.tsx b/src/features/chain-variants/beacon-chain/pages/deposits/BeaconChainDepositsTable.tsx index aad077861da..481c58d3098 100644 --- a/src/features/chain-variants/beacon-chain/pages/deposits/BeaconChainDepositsTable.tsx +++ b/src/features/chain-variants/beacon-chain/pages/deposits/BeaconChainDepositsTable.tsx @@ -35,7 +35,7 @@ const BeaconChainDepositsTable = ({ items, isLoading, top, view }: Props) => { - Transaction hash + Transaction hash { view !== 'block' && Block } { view !== 'block' && Timestamp } { `Value ${ feature.currency.symbol }` } diff --git a/src/features/chain-variants/beacon-chain/pages/deposits/__screenshots__/BeaconChainDeposits.pw.tsx_default_base-view-1.png b/src/features/chain-variants/beacon-chain/pages/deposits/__screenshots__/BeaconChainDeposits.pw.tsx_default_base-view-1.png index 349bb639d6e..96b8076de9d 100644 Binary files a/src/features/chain-variants/beacon-chain/pages/deposits/__screenshots__/BeaconChainDeposits.pw.tsx_default_base-view-1.png and b/src/features/chain-variants/beacon-chain/pages/deposits/__screenshots__/BeaconChainDeposits.pw.tsx_default_base-view-1.png differ diff --git a/src/features/chain-variants/beacon-chain/pages/deposits/__screenshots__/BeaconChainDeposits.pw.tsx_default_mobile-base-view-1.png b/src/features/chain-variants/beacon-chain/pages/deposits/__screenshots__/BeaconChainDeposits.pw.tsx_default_mobile-base-view-1.png index a8c003a070e..46b019241d1 100644 Binary files a/src/features/chain-variants/beacon-chain/pages/deposits/__screenshots__/BeaconChainDeposits.pw.tsx_default_mobile-base-view-1.png and b/src/features/chain-variants/beacon-chain/pages/deposits/__screenshots__/BeaconChainDeposits.pw.tsx_default_mobile-base-view-1.png differ diff --git a/src/features/chain-variants/beacon-chain/pages/withdrawals/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png b/src/features/chain-variants/beacon-chain/pages/withdrawals/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png index 807407f4576..ad6defc4c9a 100644 Binary files a/src/features/chain-variants/beacon-chain/pages/withdrawals/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png and b/src/features/chain-variants/beacon-chain/pages/withdrawals/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/chain-variants/beacon-chain/pages/withdrawals/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png b/src/features/chain-variants/beacon-chain/pages/withdrawals/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png index 439d88aeba4..0146cbd07f6 100644 Binary files a/src/features/chain-variants/beacon-chain/pages/withdrawals/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/chain-variants/beacon-chain/pages/withdrawals/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/chain-variants/celo/pages/address/AddressEpochRewards.tsx b/src/features/chain-variants/celo/pages/address/AddressEpochRewards.tsx index 72fb47cc487..7de7c9d691d 100644 --- a/src/features/chain-variants/celo/pages/address/AddressEpochRewards.tsx +++ b/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 ? ( - <> - - - - - { rewardsQuery.data.items.map((item, index) => ( - - )) } - - + + + ) : null; const actionBar = ( diff --git a/src/features/chain-variants/celo/pages/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png b/src/features/chain-variants/celo/pages/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png index 5b562da54fd..ec5789991d9 100644 Binary files a/src/features/chain-variants/celo/pages/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/chain-variants/celo/pages/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png index 0493fbae272..f0c22024853 100644 Binary files a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png and b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png differ diff --git a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png index 9ae7ba337f6..e1ac6929bb2 100644 Binary files a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png and b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png differ diff --git a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png index c71a7d7c576..4aeb0d0b542 100644 Binary files a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png and b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_empty-mobile-1.png b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_empty-mobile-1.png index 680a06b80db..fc5941ba9ec 100644 Binary files a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_empty-mobile-1.png and b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_empty-mobile-1.png differ diff --git a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png index 5f981d68dd5..363eb42d0e2 100644 Binary files a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png and b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png differ diff --git a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png index 26332f4baf3..46cfada74a8 100644 Binary files a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_empty-mobile-1.png b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_empty-mobile-1.png index e5708e86d56..c4477cd1c10 100644 Binary files a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_empty-mobile-1.png and b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_empty-mobile-1.png differ diff --git a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png index 133502822e0..d928b2b53fa 100644 Binary files a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png and b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png differ diff --git a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTables.pw.tsx_mobile_base-view-mobile-1.png b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTables.pw.tsx_mobile_base-view-mobile-1.png index d511992469a..83e9dcbfeff 100644 Binary files a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTables.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTables.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTables.pw.tsx_mobile_with-schema-opened-mobile-1.png b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTables.pw.tsx_mobile_with-schema-opened-mobile-1.png index 267e6b53653..a2e558fa5e3 100644 Binary files a/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTables.pw.tsx_mobile_with-schema-opened-mobile-1.png and b/src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudTables.pw.tsx_mobile_with-schema-opened-mobile-1.png differ diff --git a/src/features/chain-variants/mud/pages/mud-worlds/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png b/src/features/chain-variants/mud/pages/mud-worlds/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png index 3026c5a813c..faf399b6f23 100644 Binary files a/src/features/chain-variants/mud/pages/mud-worlds/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png and b/src/features/chain-variants/mud/pages/mud-worlds/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png differ diff --git a/src/features/chain-variants/mud/pages/mud-worlds/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png b/src/features/chain-variants/mud/pages/mud-worlds/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png index f0b5aa4f3e4..5c1aa353da2 100644 Binary files a/src/features/chain-variants/mud/pages/mud-worlds/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png and b/src/features/chain-variants/mud/pages/mud-worlds/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png differ diff --git a/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_mobile-base-view-dark-mode-1.png b/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_mobile-base-view-dark-mode-1.png index ad6c03a1c82..0d418b879e0 100644 Binary files a/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_mobile-base-view-dark-mode-1.png and b/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_mobile-base-view-dark-mode-1.png differ diff --git a/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_base-view-dark-mode-1.png b/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_base-view-dark-mode-1.png index 30859ef191e..7ae65803d79 100644 Binary files a/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_base-view-dark-mode-1.png and b/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_mobile-base-view-dark-mode-1.png b/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_mobile-base-view-dark-mode-1.png index d42400228bb..52f846ff5b0 100644 Binary files a/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_mobile-base-view-dark-mode-1.png and b/src/features/chain-variants/zeta-chain/pages/cctx-index/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_mobile-base-view-dark-mode-1.png differ diff --git a/src/features/cross-chain-txs/pages/address/AddressTxsCrossChain.tsx b/src/features/cross-chain-txs/pages/address/AddressTxsCrossChain.tsx index c1ab25ee015..d0ae40487ee 100644 --- a/src/features/cross-chain-txs/pages/address/AddressTxsCrossChain.tsx +++ b/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 && ( - { pagination?.isVisible && } ) } diff --git a/src/features/cross-chain-txs/pages/token-transfers/__screenshots__/TokenTransfersCrossChain.pw.tsx_default_txs-desktop-base-view-dark-mode-1.png b/src/features/cross-chain-txs/pages/token-transfers/__screenshots__/TokenTransfersCrossChain.pw.tsx_default_txs-desktop-base-view-dark-mode-1.png index 001a88bbec2..3259916b21f 100644 Binary files a/src/features/cross-chain-txs/pages/token-transfers/__screenshots__/TokenTransfersCrossChain.pw.tsx_default_txs-desktop-base-view-dark-mode-1.png and b/src/features/cross-chain-txs/pages/token-transfers/__screenshots__/TokenTransfersCrossChain.pw.tsx_default_txs-desktop-base-view-dark-mode-1.png differ diff --git a/src/features/cross-chain-txs/pages/token-transfers/__screenshots__/TokenTransfersCrossChain.pw.tsx_default_txs-mobile-base-view-1.png b/src/features/cross-chain-txs/pages/token-transfers/__screenshots__/TokenTransfersCrossChain.pw.tsx_default_txs-mobile-base-view-1.png index 1dc1762e7a0..4e9e23427b9 100644 Binary files a/src/features/cross-chain-txs/pages/token-transfers/__screenshots__/TokenTransfersCrossChain.pw.tsx_default_txs-mobile-base-view-1.png and b/src/features/cross-chain-txs/pages/token-transfers/__screenshots__/TokenTransfersCrossChain.pw.tsx_default_txs-mobile-base-view-1.png differ diff --git a/src/features/cross-chain-txs/pages/txs/__screenshots__/TransactionsCrossChain.pw.tsx_default_txs-desktop-base-view-dark-mode-1.png b/src/features/cross-chain-txs/pages/txs/__screenshots__/TransactionsCrossChain.pw.tsx_default_txs-desktop-base-view-dark-mode-1.png index 91b7cdee9e6..a270b7fe5c6 100644 Binary files a/src/features/cross-chain-txs/pages/txs/__screenshots__/TransactionsCrossChain.pw.tsx_default_txs-desktop-base-view-dark-mode-1.png and b/src/features/cross-chain-txs/pages/txs/__screenshots__/TransactionsCrossChain.pw.tsx_default_txs-desktop-base-view-dark-mode-1.png differ diff --git a/src/features/cross-chain-txs/pages/txs/__screenshots__/TransactionsCrossChain.pw.tsx_default_txs-mobile-base-view-1.png b/src/features/cross-chain-txs/pages/txs/__screenshots__/TransactionsCrossChain.pw.tsx_default_txs-mobile-base-view-1.png index 98aec50bdea..119d0a3b91c 100644 Binary files a/src/features/cross-chain-txs/pages/txs/__screenshots__/TransactionsCrossChain.pw.tsx_default_txs-mobile-base-view-1.png and b/src/features/cross-chain-txs/pages/txs/__screenshots__/TransactionsCrossChain.pw.tsx_default_txs-mobile-base-view-1.png differ diff --git a/src/features/hot-contracts/pages/index/__screenshots__/HotContracts.pw.tsx_mobile_base-view-mobile-1.png b/src/features/hot-contracts/pages/index/__screenshots__/HotContracts.pw.tsx_mobile_base-view-mobile-1.png index 43534077735..3b479dbc0e3 100644 Binary files a/src/features/hot-contracts/pages/index/__screenshots__/HotContracts.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/hot-contracts/pages/index/__screenshots__/HotContracts.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/multichain/pages/address/MultichainAddressTxs.tsx b/src/features/multichain/pages/address/MultichainAddressTxs.tsx index 02b28413b84..2f8ef77705c 100644 --- a/src/features/multichain/pages/address/MultichainAddressTxs.tsx +++ b/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 /> diff --git a/src/features/multichain/pages/address/__screenshots__/MultichainAddressPortfolio.pw.tsx_default_nfts-mobile-base-view-1.png b/src/features/multichain/pages/address/__screenshots__/MultichainAddressPortfolio.pw.tsx_default_nfts-mobile-base-view-1.png index f0064fcfece..81ddaed8249 100644 Binary files a/src/features/multichain/pages/address/__screenshots__/MultichainAddressPortfolio.pw.tsx_default_nfts-mobile-base-view-1.png and b/src/features/multichain/pages/address/__screenshots__/MultichainAddressPortfolio.pw.tsx_default_nfts-mobile-base-view-1.png differ diff --git a/src/features/multichain/pages/address/__screenshots__/MultichainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png b/src/features/multichain/pages/address/__screenshots__/MultichainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png index e0c65710107..41d29b50bf0 100644 Binary files a/src/features/multichain/pages/address/__screenshots__/MultichainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png and b/src/features/multichain/pages/address/__screenshots__/MultichainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png differ diff --git a/src/features/multichain/pages/address/__screenshots__/MultichainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png b/src/features/multichain/pages/address/__screenshots__/MultichainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png index b627897a4d1..75c5a24359c 100644 Binary files a/src/features/multichain/pages/address/__screenshots__/MultichainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png and b/src/features/multichain/pages/address/__screenshots__/MultichainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png differ diff --git a/src/features/multichain/pages/address/portfolio/MultichainAddressPortfolioTokens.tsx b/src/features/multichain/pages/address/portfolio/MultichainAddressPortfolioTokens.tsx index 5524fe0338b..a4f43b3bd48 100644 --- a/src/features/multichain/pages/address/portfolio/MultichainAddressPortfolioTokens.tsx +++ b/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 ? ( - <> - - - - - { tokensQuery.data.items.map((item, index) => ( - - )) } - - + + + ) : null; const actionBar = ( <> - + { searchInput } { (!isMobile || tokensQuery.pagination.isVisible) && ( - + { searchInput } diff --git a/src/features/multichain/pages/address/portfolio/MultichainAddressTokensTable.tsx b/src/features/multichain/pages/address/portfolio/MultichainAddressTokensTable.tsx index a05a6b86c4c..f3d44650b06 100644 --- a/src/features/multichain/pages/address/portfolio/MultichainAddressTokensTable.tsx +++ b/src/features/multichain/pages/address/portfolio/MultichainAddressTokensTable.tsx @@ -16,7 +16,7 @@ interface Props { const MultichainAddressTokensTable = ({ data, top, isLoading }: Props) => { return ( - + Asset diff --git a/src/features/multichain/pages/address/portfolio/__screenshots__/MultichainAddressPortfolioTokens.pw.tsx_mobile_many-chains-mobile-dark-mode-1.png b/src/features/multichain/pages/address/portfolio/__screenshots__/MultichainAddressPortfolioTokens.pw.tsx_mobile_many-chains-mobile-dark-mode-1.png index 39b4633a93a..0a4e942256b 100644 Binary files a/src/features/multichain/pages/address/portfolio/__screenshots__/MultichainAddressPortfolioTokens.pw.tsx_mobile_many-chains-mobile-dark-mode-1.png and b/src/features/multichain/pages/address/portfolio/__screenshots__/MultichainAddressPortfolioTokens.pw.tsx_mobile_many-chains-mobile-dark-mode-1.png differ diff --git a/src/features/multichain/pages/ecosystems/__screenshots__/MultichainEcosystems.pw.tsx_mobile_base-view-mobile-1.png b/src/features/multichain/pages/ecosystems/__screenshots__/MultichainEcosystems.pw.tsx_mobile_base-view-mobile-1.png index 7e10d5ce5e1..0694f943ed7 100644 Binary files a/src/features/multichain/pages/ecosystems/__screenshots__/MultichainEcosystems.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/multichain/pages/ecosystems/__screenshots__/MultichainEcosystems.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_directories-directory-view-1.png b/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_directories-directory-view-1.png index f1a3d35b27c..efa06af5c73 100644 Binary files a/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_directories-directory-view-1.png and b/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_directories-directory-view-1.png differ diff --git a/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_domains-default-view-1.png b/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_domains-default-view-1.png index a2f4d7f37fa..9a1b572a4ac 100644 Binary files a/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_domains-default-view-1.png and b/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_domains-default-view-1.png differ diff --git a/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_domains-mobile-default-view-1.png b/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_domains-mobile-default-view-1.png index 3443f078356..191ab012129 100644 Binary files a/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_domains-mobile-default-view-1.png and b/src/features/name-services/common/pages/__screenshots__/NameServices.pw.tsx_default_domains-mobile-default-view-1.png differ diff --git a/src/features/op-interop/pages/messages/__screenshots__/InteropMessages.pw.tsx_default_default-view-1.png b/src/features/op-interop/pages/messages/__screenshots__/InteropMessages.pw.tsx_default_default-view-1.png index 493bd637442..2905cad77c2 100644 Binary files a/src/features/op-interop/pages/messages/__screenshots__/InteropMessages.pw.tsx_default_default-view-1.png and b/src/features/op-interop/pages/messages/__screenshots__/InteropMessages.pw.tsx_default_default-view-1.png differ diff --git a/src/features/op-interop/pages/messages/__screenshots__/InteropMessages.pw.tsx_default_mobile-default-view-1.png b/src/features/op-interop/pages/messages/__screenshots__/InteropMessages.pw.tsx_default_mobile-default-view-1.png index f1190aefa01..029cce8a045 100644 Binary files a/src/features/op-interop/pages/messages/__screenshots__/InteropMessages.pw.tsx_default_mobile-default-view-1.png and b/src/features/op-interop/pages/messages/__screenshots__/InteropMessages.pw.tsx_default_mobile-default-view-1.png differ diff --git a/src/features/rollup/arbitrum/pages/batches/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-1.png b/src/features/rollup/arbitrum/pages/batches/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-1.png index 989325fb547..9c43990b2f3 100644 Binary files a/src/features/rollup/arbitrum/pages/batches/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-1.png and b/src/features/rollup/arbitrum/pages/batches/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-1.png differ diff --git a/src/features/rollup/arbitrum/pages/batches/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_mobile-base-view-1.png b/src/features/rollup/arbitrum/pages/batches/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_mobile-base-view-1.png index 372ff3f7a92..27e0ade3f45 100644 Binary files a/src/features/rollup/arbitrum/pages/batches/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_mobile-base-view-1.png and b/src/features/rollup/arbitrum/pages/batches/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_mobile-base-view-1.png differ diff --git a/src/features/rollup/arbitrum/pages/deposits/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png b/src/features/rollup/arbitrum/pages/deposits/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png index b84aab7114e..a2b26af7599 100644 Binary files a/src/features/rollup/arbitrum/pages/deposits/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png and b/src/features/rollup/arbitrum/pages/deposits/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/rollup/arbitrum/pages/deposits/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/src/features/rollup/arbitrum/pages/deposits/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png index 43a25f6a55b..d85dc9807c1 100644 Binary files a/src/features/rollup/arbitrum/pages/deposits/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/rollup/arbitrum/pages/deposits/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/rollup/arbitrum/pages/withdrawals/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/src/features/rollup/arbitrum/pages/withdrawals/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png index 93259c47c15..780b452012d 100644 Binary files a/src/features/rollup/arbitrum/pages/withdrawals/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png and b/src/features/rollup/arbitrum/pages/withdrawals/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/rollup/arbitrum/pages/withdrawals/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/src/features/rollup/arbitrum/pages/withdrawals/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png index 31af2f3a114..753776dc422 100644 Binary files a/src/features/rollup/arbitrum/pages/withdrawals/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/rollup/arbitrum/pages/withdrawals/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/rollup/optimism/pages/batches/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/src/features/rollup/optimism/pages/batches/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png index f970279c43b..3de9d6d490b 100644 Binary files a/src/features/rollup/optimism/pages/batches/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png and b/src/features/rollup/optimism/pages/batches/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/rollup/optimism/pages/batches/__screenshots__/OptimisticL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png b/src/features/rollup/optimism/pages/batches/__screenshots__/OptimisticL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png index b6686ff66a5..1fda240835e 100644 Binary files a/src/features/rollup/optimism/pages/batches/__screenshots__/OptimisticL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/rollup/optimism/pages/batches/__screenshots__/OptimisticL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/rollup/optimism/pages/deposits/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png b/src/features/rollup/optimism/pages/deposits/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png index 32722fa48b2..0638b8fe3ba 100644 Binary files a/src/features/rollup/optimism/pages/deposits/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png and b/src/features/rollup/optimism/pages/deposits/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/rollup/optimism/pages/deposits/__screenshots__/OptimisticL2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/src/features/rollup/optimism/pages/deposits/__screenshots__/OptimisticL2Deposits.pw.tsx_mobile_base-view-mobile-1.png index f5a8079af83..30a0fc058a6 100644 Binary files a/src/features/rollup/optimism/pages/deposits/__screenshots__/OptimisticL2Deposits.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/rollup/optimism/pages/deposits/__screenshots__/OptimisticL2Deposits.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/rollup/optimism/pages/dispute-games/__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png b/src/features/rollup/optimism/pages/dispute-games/__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png index 2b08423b0df..30ad858d99f 100644 Binary files a/src/features/rollup/optimism/pages/dispute-games/__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png and b/src/features/rollup/optimism/pages/dispute-games/__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/rollup/optimism/pages/dispute-games/__screenshots__/OptimisticL2DisputeGames.pw.tsx_mobile_base-view-mobile-1.png b/src/features/rollup/optimism/pages/dispute-games/__screenshots__/OptimisticL2DisputeGames.pw.tsx_mobile_base-view-mobile-1.png index 33170c01d26..99ebe092eb3 100644 Binary files a/src/features/rollup/optimism/pages/dispute-games/__screenshots__/OptimisticL2DisputeGames.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/rollup/optimism/pages/dispute-games/__screenshots__/OptimisticL2DisputeGames.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/rollup/optimism/pages/output-roots/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png b/src/features/rollup/optimism/pages/output-roots/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png index d7690ae56aa..45eca3685f3 100644 Binary files a/src/features/rollup/optimism/pages/output-roots/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png and b/src/features/rollup/optimism/pages/output-roots/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/rollup/optimism/pages/output-roots/__screenshots__/OptimisticL2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png b/src/features/rollup/optimism/pages/output-roots/__screenshots__/OptimisticL2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png index 04d1e127abb..2c5260181ea 100644 Binary files a/src/features/rollup/optimism/pages/output-roots/__screenshots__/OptimisticL2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/rollup/optimism/pages/output-roots/__screenshots__/OptimisticL2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/rollup/optimism/pages/withdrawals/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/src/features/rollup/optimism/pages/withdrawals/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png index 7ba2c987a77..d1759e4435e 100644 Binary files a/src/features/rollup/optimism/pages/withdrawals/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png and b/src/features/rollup/optimism/pages/withdrawals/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/rollup/optimism/pages/withdrawals/__screenshots__/OptimisticL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/src/features/rollup/optimism/pages/withdrawals/__screenshots__/OptimisticL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png index 95e87ea0c93..a0f51211c0a 100644 Binary files a/src/features/rollup/optimism/pages/withdrawals/__screenshots__/OptimisticL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/rollup/optimism/pages/withdrawals/__screenshots__/OptimisticL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/rollup/scroll/pages/batches/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_base-view-1.png b/src/features/rollup/scroll/pages/batches/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_base-view-1.png index 849126ef204..b5a0f1f2fc3 100644 Binary files a/src/features/rollup/scroll/pages/batches/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_base-view-1.png and b/src/features/rollup/scroll/pages/batches/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_base-view-1.png differ diff --git a/src/features/rollup/scroll/pages/batches/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_mobile-base-view-1.png b/src/features/rollup/scroll/pages/batches/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_mobile-base-view-1.png index cdfe4dd929e..64c55f7dd9c 100644 Binary files a/src/features/rollup/scroll/pages/batches/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_mobile-base-view-1.png and b/src/features/rollup/scroll/pages/batches/__screenshots__/ScrollL2TxnBatches.pw.tsx_default_mobile-base-view-1.png differ diff --git a/src/features/rollup/scroll/pages/deposits/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png b/src/features/rollup/scroll/pages/deposits/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png index 4aad7e643d3..bf842b28670 100644 Binary files a/src/features/rollup/scroll/pages/deposits/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png and b/src/features/rollup/scroll/pages/deposits/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png differ diff --git a/src/features/rollup/scroll/pages/deposits/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png b/src/features/rollup/scroll/pages/deposits/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png index 20b9f67a073..7b08c6cb782 100644 Binary files a/src/features/rollup/scroll/pages/deposits/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png and b/src/features/rollup/scroll/pages/deposits/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png differ diff --git a/src/features/rollup/scroll/pages/withdrawals/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png b/src/features/rollup/scroll/pages/withdrawals/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png index f95befa2e08..3f06b264dfa 100644 Binary files a/src/features/rollup/scroll/pages/withdrawals/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png and b/src/features/rollup/scroll/pages/withdrawals/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png differ diff --git a/src/features/rollup/scroll/pages/withdrawals/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png b/src/features/rollup/scroll/pages/withdrawals/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png index d5088a4aa8d..16a5658fe27 100644 Binary files a/src/features/rollup/scroll/pages/withdrawals/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png and b/src/features/rollup/scroll/pages/withdrawals/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png differ diff --git a/src/features/rollup/shibarium/pages/deposits/__screenshots__/ShibariumDeposits.pw.tsx_default_base-view-mobile-1.png b/src/features/rollup/shibarium/pages/deposits/__screenshots__/ShibariumDeposits.pw.tsx_default_base-view-mobile-1.png index 5eea741f716..0d0874f83bd 100644 Binary files a/src/features/rollup/shibarium/pages/deposits/__screenshots__/ShibariumDeposits.pw.tsx_default_base-view-mobile-1.png and b/src/features/rollup/shibarium/pages/deposits/__screenshots__/ShibariumDeposits.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/rollup/shibarium/pages/deposits/__screenshots__/ShibariumDeposits.pw.tsx_mobile_base-view-mobile-1.png b/src/features/rollup/shibarium/pages/deposits/__screenshots__/ShibariumDeposits.pw.tsx_mobile_base-view-mobile-1.png index 4cc041b1c77..25322dda97f 100644 Binary files a/src/features/rollup/shibarium/pages/deposits/__screenshots__/ShibariumDeposits.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/rollup/shibarium/pages/deposits/__screenshots__/ShibariumDeposits.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/rollup/shibarium/pages/withdrawals/__screenshots__/ShibariumWithdrawals.pw.tsx_default_base-view-mobile-1.png b/src/features/rollup/shibarium/pages/withdrawals/__screenshots__/ShibariumWithdrawals.pw.tsx_default_base-view-mobile-1.png index e50c1cd1a88..0fac76aacf8 100644 Binary files a/src/features/rollup/shibarium/pages/withdrawals/__screenshots__/ShibariumWithdrawals.pw.tsx_default_base-view-mobile-1.png and b/src/features/rollup/shibarium/pages/withdrawals/__screenshots__/ShibariumWithdrawals.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/rollup/shibarium/pages/withdrawals/__screenshots__/ShibariumWithdrawals.pw.tsx_mobile_base-view-mobile-1.png b/src/features/rollup/shibarium/pages/withdrawals/__screenshots__/ShibariumWithdrawals.pw.tsx_mobile_base-view-mobile-1.png index a7eb5748a4d..508ff7f4d3a 100644 Binary files a/src/features/rollup/shibarium/pages/withdrawals/__screenshots__/ShibariumWithdrawals.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/rollup/shibarium/pages/withdrawals/__screenshots__/ShibariumWithdrawals.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/features/tx-interpretation/noves/pages/address/AddressAccountHistory.tsx b/src/features/tx-interpretation/noves/pages/address/AddressAccountHistory.tsx index 4c725f49136..a7eb451375c 100644 --- a/src/features/tx-interpretation/noves/pages/address/AddressAccountHistory.tsx +++ b/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).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 = ( - - - { filteredData?.map((item, i) => ( - - )) } - - - - - - - - Age - - - Action - - - From/To - - - - - { filteredData?.map((item, i) => ( - - )) } - - - - + + + + + + Age + + + Action + + + From/To + + + + + { filteredData?.map((item, i) => ( + + )) } + + + ); return ( diff --git a/src/features/user-ops/pages/index/UserOpsContent.tsx b/src/features/user-ops/pages/index/UserOpsContent.tsx index 63d3d2347c8..e1c2a3548a1 100644 --- a/src/features/user-ops/pages/index/UserOpsContent.tsx +++ b/src/features/user-ops/pages/index/UserOpsContent.tsx @@ -1,6 +1,5 @@ // SPDX-License-Identifier: LicenseRef-Blockscout -import { Box } from '@chakra-ui/react'; import React from 'react'; import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'src/shell/page/action-bar/ActionBar'; @@ -10,7 +9,8 @@ import DataList from 'src/shared/lists/DataList'; import Pagination from 'src/shared/pagination/Pagination'; import type { QueryWithPagesResult } from 'src/shared/pagination/useQueryWithPages'; -import UserOpsListItem from './UserOpsListItem'; +import { TableContainerScrollable } from 'src/toolkit/chakra/table'; + import UserOpsTable from './UserOpsTable'; type Props = { @@ -26,28 +26,15 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => { } const content = query.data?.items ? ( - <> - - - - - { query.data.items.map((item, index) => ( - - )) } - - + + + ) : null; const actionBar = query.pagination.isVisible ? ( diff --git a/src/features/user-ops/pages/index/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png b/src/features/user-ops/pages/index/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png index ac349e0b60d..9990f991b7e 100644 Binary files a/src/features/user-ops/pages/index/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png and b/src/features/user-ops/pages/index/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/features/user-ops/pages/index/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png b/src/features/user-ops/pages/index/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png index 9d5333593aa..9e5eff47b3e 100644 Binary files a/src/features/user-ops/pages/index/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png and b/src/features/user-ops/pages/index/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/shared/lists/TableViewToggleButton.tsx b/src/shared/lists/TableViewToggleButton.tsx index f70ebd698ff..1bc831a08f5 100644 --- a/src/shared/lists/TableViewToggleButton.tsx +++ b/src/shared/lists/TableViewToggleButton.tsx @@ -1,5 +1,6 @@ // SPDX-License-Identifier: LicenseRef-Blockscout +// TODO: remove this component once tables in mobile are finalized import React from 'react'; import SpriteIcon from 'src/sprite/SpriteIcon'; diff --git a/src/shared/lists/useTableViewValue.ts b/src/shared/lists/useTableViewValue.ts index 3a7628ca5cd..c42252b6506 100644 --- a/src/shared/lists/useTableViewValue.ts +++ b/src/shared/lists/useTableViewValue.ts @@ -1,5 +1,6 @@ // SPDX-License-Identifier: LicenseRef-Blockscout +// TODO: remove this component once tables in mobile are finalized import React from 'react'; import useFeatureValue from 'src/services/growthbook/useFeatureValue'; diff --git a/src/shell/page/action-bar/ActionBar.tsx b/src/shell/page/action-bar/ActionBar.tsx index 272dc7faa88..8f85f38cfdc 100644 --- a/src/shell/page/action-bar/ActionBar.tsx +++ b/src/shell/page/action-bar/ActionBar.tsx @@ -12,7 +12,6 @@ type Props = { }; export const ACTION_BAR_HEIGHT_DESKTOP = 24 + 32 + 12; -export const ACTION_BAR_HEIGHT_MOBILE = 24 + 32 + 24; const ActionBar = ({ children, className, showShadow }: Props) => { const ref = React.useRef(null); @@ -28,7 +27,7 @@ const ActionBar = ({ children, className, showShadow }: Props) => { backgroundColor="bg.primary" pt={ 6 } mt={ -6 } - pb={{ base: 6, lg: 3 }} + pb={ 3 } mx={{ base: -3, lg: 0 }} px={{ base: 3, lg: 0 }} justifyContent="space-between" diff --git a/src/slices/address/pages/details/Address.tsx b/src/slices/address/pages/details/Address.tsx index 2aa6233d40e..567470bce14 100644 --- a/src/slices/address/pages/details/Address.tsx +++ b/src/slices/address/pages/details/Address.tsx @@ -28,7 +28,6 @@ import AddressLogs from 'src/slices/address/pages/details/logs/AddressLogs'; import AddressTokenTransfers, { ADDRESS_TOKEN_TRANSFERS_TAB_IDS } from 'src/slices/address/pages/details/token-transfers/AddressTokenTransfers'; import AddressTokens from 'src/slices/address/pages/details/tokens/AddressTokens'; import AddressTxs, { ADDRESS_TXS_TAB_IDS } from 'src/slices/address/pages/details/txs/AddressTxs'; -import AddressWithdrawals from 'src/slices/address/pages/details/withdrawals/AddressWithdrawals'; import { ADDRESS_TABS_COUNTERS } from 'src/slices/address/stubs/address'; import getCheckedSummedAddress from 'src/slices/address/utils/get-checked-summed-address'; import getChainValidationActionText from 'src/slices/chain/verification-type/utils/get-chain-validation-action-text'; @@ -47,6 +46,7 @@ import useAddressProfileApiQuery from 'src/features/address-profile-api/hooks/us import TextAd from 'src/features/ads/text/components/TextAd'; import AlternativeExplorers from 'src/features/alternative-explorers/components/AlternativeExplorers'; import AddressDeposits from 'src/features/chain-variants/beacon-chain/pages/address/AddressDeposits'; +import AddressWithdrawals from 'src/features/chain-variants/beacon-chain/pages/address/AddressWithdrawals'; import AddressEpochRewards from 'src/features/chain-variants/celo/pages/address/AddressEpochRewards'; import AddressMud from 'src/features/chain-variants/mud/pages/address/AddressMud'; import AddressMultichainInfoButton from 'src/features/multichain-button/pages/address/AddressMultichainInfoButton'; diff --git a/src/slices/address/pages/details/blocks-validated/AddressBlocksValidated.tsx b/src/slices/address/pages/details/blocks-validated/AddressBlocksValidated.tsx index c4818461fac..15b4adb10b6 100644 --- a/src/slices/address/pages/details/blocks-validated/AddressBlocksValidated.tsx +++ b/src/slices/address/pages/details/blocks-validated/AddressBlocksValidated.tsx @@ -1,6 +1,5 @@ // SPDX-License-Identifier: LicenseRef-Blockscout -import { Box } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import React from 'react'; @@ -26,9 +25,8 @@ import Pagination from 'src/shared/pagination/Pagination'; import useQueryWithPages from 'src/shared/pagination/useQueryWithPages'; import { generateListStub } from 'src/shared/pagination/utils'; -import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'src/toolkit/chakra/table'; +import { TableBody, TableColumnHeader, TableContainerScrollable, TableHeaderSticky, TableRoot, TableRow } from 'src/toolkit/chakra/table'; -import AddressBlocksValidatedListItem from './AddressBlocksValidatedListItem'; import AddressBlocksValidatedTableItem from './AddressBlocksValidatedTableItem'; const OVERLOAD_COUNT = 75; @@ -108,59 +106,39 @@ const AddressBlocksValidated = ({ shouldRender = true, isQueryEnabled = true }: } const content = query.data?.items ? ( - <> - - - - - Block - - Timestamp - - - Txn - Gas used - { !config.slices.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && + + + + + Block + + Timestamp + + + Txn + Gas used + { !config.slices.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && Reward { currencyUnits.ether } } - - - - - { query.data.items.map((item, index) => ( - - )) } - - - - - { query.pagination.page === 1 && ( - + + + - ) } - { query.data.items.map((item, index) => ( - - )) } - - + { query.data.items.map((item, index) => ( + + )) } + + + ) : null; const actionBar = query.pagination.isVisible ? ( diff --git a/src/slices/address/pages/details/coin-balance/AddressCoinBalanceHistory.tsx b/src/slices/address/pages/details/coin-balance/AddressCoinBalanceHistory.tsx index 202a432a929..7d5c66b7685 100644 --- a/src/slices/address/pages/details/coin-balance/AddressCoinBalanceHistory.tsx +++ b/src/slices/address/pages/details/coin-balance/AddressCoinBalanceHistory.tsx @@ -1,6 +1,5 @@ // SPDX-License-Identifier: LicenseRef-Blockscout -import { Box } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import React from 'react'; @@ -19,9 +18,8 @@ import TimeFormatToggle from 'src/shared/date-and-time/TimeFormatToggle'; import DataList from 'src/shared/lists/DataList'; import Pagination from 'src/shared/pagination/Pagination'; -import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'src/toolkit/chakra/table'; +import { TableBody, TableColumnHeader, TableContainerScrollable, TableHeaderSticky, TableRoot, TableRow } from 'src/toolkit/chakra/table'; -import AddressCoinBalanceListItem from './AddressCoinBalanceListItem'; import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem'; interface Props { @@ -35,47 +33,34 @@ const AddressCoinBalanceHistory = ({ query }: Props) => { const chainData = multichainContext?.chain; const content = query.data?.items ? ( - <> - - - - - { chainData && } - Block - Txn - - Timestamp - - - Balance { currencyUnits.ether } - Delta - - - - { query.data.items.map((item, index) => ( - - )) } - - - - - { query.data.items.map((item, index) => ( - - )) } - - + + + + + { chainData && } + Block + Txn + + Timestamp + + + Balance { currencyUnits.ether } + Delta + + + + { query.data.items.map((item, index) => ( + + )) } + + + ) : null; const actionBar = query.pagination.isVisible ? ( diff --git a/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 53da5096baf..38c3e261728 100644 Binary files a/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png b/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png index c89f861552a..44ec45474b6 100644 Binary files a/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png and b/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png b/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png index 3f5fe63da28..3653db99c7e 100644 Binary files a/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png and b/src/slices/address/pages/details/coin-balance/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png differ diff --git a/src/slices/address/pages/details/internal-txs/AddressInternalTxs.tsx b/src/slices/address/pages/details/internal-txs/AddressInternalTxs.tsx index bb4f458b707..f4945df34d9 100644 --- a/src/slices/address/pages/details/internal-txs/AddressInternalTxs.tsx +++ b/src/slices/address/pages/details/internal-txs/AddressInternalTxs.tsx @@ -1,11 +1,9 @@ // SPDX-License-Identifier: LicenseRef-Blockscout -import { Box } from '@chakra-ui/react'; import React from 'react'; import ActionBar from 'src/shell/page/action-bar/ActionBar'; -import InternalTxsList from 'src/slices/internal-tx/components/InternalTxsList'; import InternalTxsTable from 'src/slices/internal-tx/components/InternalTxsTable'; import CsvExport from 'src/features/csv-export/components/CsvExport'; @@ -14,6 +12,8 @@ import useIsMounted from 'src/shared/hooks/useIsMounted'; import DataList from 'src/shared/lists/DataList'; import Pagination from 'src/shared/pagination/Pagination'; +import { TableContainerScrollable } from 'src/toolkit/chakra/table'; + import AddressTxsFilter from '../txs/AddressTxsFilter'; import useAddressInternalTxsQuery from './useAddressInternalTxsQuery'; @@ -32,14 +32,9 @@ const AddressInternalTxs = ({ shouldRender = true, isQueryEnabled = true }: Prop } const content = data?.items ? ( - <> - - - - - - - + + + ) : null ; const actionBar = ( diff --git a/src/slices/address/pages/details/internal-txs/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png b/src/slices/address/pages/details/internal-txs/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png index d86b0d5b7d5..0486c358a64 100644 Binary files a/src/slices/address/pages/details/internal-txs/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png and b/src/slices/address/pages/details/internal-txs/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/slices/address/pages/details/token-transfers/AddressTokenTransfersLocal.tsx b/src/slices/address/pages/details/token-transfers/AddressTokenTransfersLocal.tsx index 03b1e20975a..a32071dc7b8 100644 --- a/src/slices/address/pages/details/token-transfers/AddressTokenTransfersLocal.tsx +++ b/src/slices/address/pages/details/token-transfers/AddressTokenTransfersLocal.tsx @@ -1,15 +1,12 @@ // SPDX-License-Identifier: LicenseRef-Blockscout -import { Box, HStack } from '@chakra-ui/react'; +import { HStack } from '@chakra-ui/react'; import React from 'react'; import type { TokenType } from 'src/slices/token/types/api'; -import * as SocketNewItemsNotice from 'src/api/socket/SocketNewItemsNotice'; - import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'src/shell/page/action-bar/ActionBar'; -import TokenTransferList from 'src/slices/token-transfer/components/list/TokenTransferList'; import TokenTransferTable from 'src/slices/token-transfer/components/list/TokenTransferTable'; import TokenTransferFilter from 'src/slices/token-transfer/components/TokenTransferFilter'; @@ -22,6 +19,8 @@ import DataList from 'src/shared/lists/DataList'; import Pagination from 'src/shared/pagination/Pagination'; import type { QueryWithPagesResult } from 'src/shared/pagination/useQueryWithPages'; +import { TableContainerScrollable } from 'src/toolkit/chakra/table'; + import type { Filters } from './useAddressTokenTransfersQuery'; import useAddressTokenTransfersSocket from './useAddressTokenTransfersSocket'; @@ -51,38 +50,19 @@ const TokenTransfersLocal = ({ query, filters, addressHash, onTypeFilterChange, const numActiveFilters = (filters.type?.length || 0) + (filters.filter ? 1 : 0); const content = data?.items ? ( - <> - - - - - { pagination.page === 1 && ( - - ) } - - - + + + ) : null; const actionBar = isMobile ? ( diff --git a/src/slices/address/pages/details/token-transfers/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-pagination-1.png b/src/slices/address/pages/details/token-transfers/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-pagination-1.png index 1a9ed993204..87371239f5c 100644 Binary files a/src/slices/address/pages/details/token-transfers/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-pagination-1.png and b/src/slices/address/pages/details/token-transfers/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-pagination-1.png differ diff --git a/src/slices/address/pages/details/token-transfers/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-without-pagination-1.png b/src/slices/address/pages/details/token-transfers/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-without-pagination-1.png index 35aaecf01fb..1a2e5271af5 100644 Binary files a/src/slices/address/pages/details/token-transfers/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-without-pagination-1.png and b/src/slices/address/pages/details/token-transfers/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-without-pagination-1.png differ diff --git a/src/slices/address/pages/details/tokens/AddressTokens.tsx b/src/slices/address/pages/details/tokens/AddressTokens.tsx index 410052dc2a8..0a4a6f93158 100644 --- a/src/slices/address/pages/details/tokens/AddressTokens.tsx +++ b/src/slices/address/pages/details/tokens/AddressTokens.tsx @@ -26,13 +26,9 @@ import getQueryParamString from 'src/shared/router/get-query-param-string'; import RoutedTabs from 'src/toolkit/components/RoutedTabs/RoutedTabs'; const TAB_LIST_PROPS = { - mt: 1, - mb: { base: 6, lg: 1 }, - py: 5, -}; - -const TAB_LIST_PROPS_MOBILE = { - my: 8, + mb: 0, + pt: 6, + pb: 3, }; type Props = { @@ -142,10 +138,10 @@ const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) => tabs={ tabs } variant="secondary" size="sm" - listProps={ isMobile ? TAB_LIST_PROPS_MOBILE : TAB_LIST_PROPS } + listProps={ TAB_LIST_PROPS } rightSlot={ rightSlot } rightSlotProps={ tab === 'tokens_nfts' && !isMobile ? { display: 'flex', justifyContent: 'space-between', ml: 8, widthAllocation: 'available' } : {} } - stickyEnabled={ !isMobile } + stickyEnabled /> ); diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png index bd22611157a..4359ad6abab 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png index 7097777974b..2356a7cb57a 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png index bc85b1d4f0a..55ef59adb93 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png index 147512825c5..d446ae2b610 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png index 560d59c9e0c..257d5c265bc 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png index 1ac6953ec28..e72dd2dd30b 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png index 11ef4b62d79..3e433e839f2 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png index dfe2558013c..e645d0a71b5 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_native-token-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_native-token-1.png index bbcc7b08f9e..8b114101fd3 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_native-token-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_native-token-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png index a1ad5c3a0d2..5e135c42229 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-1.png index 15e50fe1f55..d331153256e 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-2.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-2.png index 605dc1de1c9..b109c72f777 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-2.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-base-flow-2.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-custom-token-ZRC-2-1.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-custom-token-ZRC-2-1.png index 3b05956877c..5c1c0c75362 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-custom-token-ZRC-2-1.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-custom-token-ZRC-2-1.png differ diff --git a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-custom-token-ZRC-2-2.png b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-custom-token-ZRC-2-2.png index 797153eb34b..41a0e3ab87c 100644 Binary files a/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-custom-token-ZRC-2-2.png and b/src/slices/address/pages/details/tokens/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-custom-token-ZRC-2-2.png differ diff --git a/src/slices/address/pages/details/txs/AddressTxs.tsx b/src/slices/address/pages/details/txs/AddressTxs.tsx index 7c1ea4ad943..5c6440b52fa 100644 --- a/src/slices/address/pages/details/txs/AddressTxs.tsx +++ b/src/slices/address/pages/details/txs/AddressTxs.tsx @@ -96,7 +96,7 @@ const AddressTxs = ({ shouldRender = true, isQueryEnabled = true }: Props) => { sorting={ localQuery.sort } setSort={ localQuery.setSort } showBlockInfo - showTableViewButton + showTableView /> ), }, diff --git a/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png b/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png index 25d3e31381e..34a17f5e432 100644 Binary files a/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png and b/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png differ diff --git a/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_mobile-base-view-1.png b/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_mobile-base-view-1.png index dd93fa2ad83..15ded938c69 100644 Binary files a/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_mobile-base-view-1.png and b/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_mobile-base-view-1.png differ diff --git a/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_mobile-table-view-1.png b/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_mobile-table-view-1.png index d69687edb6a..15ded938c69 100644 Binary files a/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_mobile-table-view-1.png and b/src/slices/address/pages/details/txs/__screenshots__/AddressTxs.pw.tsx_default_mobile-table-view-1.png differ diff --git a/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png b/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png index 700e1afdaf0..b8812255c3b 100644 Binary files a/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png and b/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png differ diff --git a/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png b/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png index 56169ebfa58..e883848f3c7 100644 Binary files a/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png and b/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png differ diff --git a/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png b/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png index 7cc907c81e5..4c21be1d3e4 100644 Binary files a/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png and b/src/slices/block/pages/index/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png differ diff --git a/src/slices/contract/pages/index/VerifiedContracts.pw.tsx b/src/slices/contract/pages/index/VerifiedContracts.pw.tsx index a141c68cabc..f4f9b35287a 100644 --- a/src/slices/contract/pages/index/VerifiedContracts.pw.tsx +++ b/src/slices/contract/pages/index/VerifiedContracts.pw.tsx @@ -7,8 +7,9 @@ import { test, expect } from 'playwright/lib'; import VerifiedContracts from './VerifiedContracts'; -test('base view +@mobile', async({ render, mockApiResponse, mockEnvs }) => { +test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => { test.slow(); + await mockTextAd(); await mockEnvs([ [ 'NEXT_PUBLIC_STATS_API_HOST', '' ] ]); await mockApiResponse('core:verified_contracts', verifiedContractsMock.baseResponse); await mockApiResponse('core:verified_contracts_counters', verifiedContractsCountersMock); diff --git a/src/slices/contract/pages/index/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png b/src/slices/contract/pages/index/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png index aa321bc7f70..fe97e0f37bf 100644 Binary files a/src/slices/contract/pages/index/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png and b/src/slices/contract/pages/index/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/slices/contract/pages/index/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png b/src/slices/contract/pages/index/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png index 54331a9aacc..780009d25f5 100644 Binary files a/src/slices/contract/pages/index/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png and b/src/slices/contract/pages/index/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/slices/search/pages/search-results/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png b/src/slices/search/pages/search-results/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png index 4787420c04c..fd69d094b11 100644 Binary files a/src/slices/search/pages/search-results/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png and b/src/slices/search/pages/search-results/__screenshots__/SearchResults.pw.tsx_mobile_with-apps-default-view-mobile-1.png differ diff --git a/src/slices/token-transfer/components/list/TokenTransferList.tsx b/src/slices/token-transfer/components/list/TokenTransferList.tsx index daef9897ffe..741c44312c2 100644 --- a/src/slices/token-transfer/components/list/TokenTransferList.tsx +++ b/src/slices/token-transfer/components/list/TokenTransferList.tsx @@ -1,5 +1,6 @@ // SPDX-License-Identifier: LicenseRef-Blockscout +// TODO: remove this component once tables in mobile are finalized import { Box } from '@chakra-ui/react'; import React from 'react'; diff --git a/src/slices/token-transfer/components/list/TokenTransferTableItem.tsx b/src/slices/token-transfer/components/list/TokenTransferTableItem.tsx index 3195c047bb8..fe3f8362aa0 100644 --- a/src/slices/token-transfer/components/list/TokenTransferTableItem.tsx +++ b/src/slices/token-transfer/components/list/TokenTransferTableItem.tsx @@ -127,7 +127,7 @@ const TokenTransferTableItem = ({ current={ baseAddress } isLoading={ isLoading } mt={ 1 } - mode={{ lg: 'compact', xl: 'long' }} + mode={{ base: 'compact', lg: 'compact', xl: 'long' }} /> diff --git a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png index b1f4fc22083..4f98b531725 100644 Binary files a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png and b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png differ diff --git a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png index fa0ae7e9637..db9056a9484 100644 Binary files a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png and b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png differ diff --git a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png index f44643fb115..60439a2a439 100644 Binary files a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png and b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png differ diff --git a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png index 6848f202043..8c68c258b2e 100644 Binary files a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png and b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png differ diff --git a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png index 5967eae4292..0400bdb1162 100644 Binary files a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png and b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png differ diff --git a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png index 11e4801460b..590b9f65014 100644 Binary files a/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png and b/src/slices/token-transfer/pages/token/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png differ diff --git a/src/slices/token/pages/address/AddressCollections.tsx b/src/slices/token/pages/address/AddressCollections.tsx index b2a14eb012b..42ceaf64758 100644 --- a/src/slices/token/pages/address/AddressCollections.tsx +++ b/src/slices/token/pages/address/AddressCollections.tsx @@ -42,7 +42,7 @@ const AddressCollections = ({ collectionsQuery, address, tokenTypes, onTokenType const hasActiveFilters = Boolean(tokenTypes?.length); const actionBar = isMobile && pagination.isVisible && ( - + diff --git a/src/slices/token/pages/address/AddressNFTs.tsx b/src/slices/token/pages/address/AddressNFTs.tsx index 724d30e82d6..6c8e6db033d 100644 --- a/src/slices/token/pages/address/AddressNFTs.tsx +++ b/src/slices/token/pages/address/AddressNFTs.tsx @@ -32,7 +32,7 @@ const AddressNFTs = ({ tokensQuery, tokenTypes, onTokenTypesChange }: Props) => const hasActiveFilters = Boolean(tokenTypes?.length); const actionBar = isMobile && pagination.isVisible && ( - + diff --git a/src/slices/token/pages/address/ERC20Tokens.tsx b/src/slices/token/pages/address/ERC20Tokens.tsx index 5418784e8f9..5abbfcee04b 100644 --- a/src/slices/token/pages/address/ERC20Tokens.tsx +++ b/src/slices/token/pages/address/ERC20Tokens.tsx @@ -1,19 +1,19 @@ // SPDX-License-Identifier: LicenseRef-Blockscout -import { Box } from '@chakra-ui/react'; import React from 'react'; import type { PaginationParams } from 'src/shared/pagination/types'; import type { AddressTokenBalance } from 'src/slices/address/types/api'; -import ActionBar from 'src/shell/page/action-bar/ActionBar'; +import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'src/shell/page/action-bar/ActionBar'; import config from 'src/config'; import useIsMobile from 'src/shared/hooks/useIsMobile'; import DataList from 'src/shared/lists/DataList'; import Pagination from 'src/shared/pagination/Pagination'; -import ERC20TokensListItem from './ERC20TokensListItem'; +import { TableContainerScrollable } from 'src/toolkit/chakra/table'; + import ERC20TokensTable from './ERC20TokensTable'; type Props = { @@ -30,30 +30,19 @@ const ERC20Tokens = ({ items, isLoading, pagination, isError, top }: Props) => { const hasAdditionalTokenTypes = config.slices.token.additionalTypes.length > 0; const actionBar = isMobile && pagination.isVisible && ( - + ); const content = items ? ( - <> - - - - { items.map((item, index) => ( - - )) } - - + + + ) : null; return ( diff --git a/src/slices/token/pages/address/ERC20TokensTable.tsx b/src/slices/token/pages/address/ERC20TokensTable.tsx index 26f5b7fd190..7a33efd79e6 100644 --- a/src/slices/token/pages/address/ERC20TokensTable.tsx +++ b/src/slices/token/pages/address/ERC20TokensTable.tsx @@ -17,7 +17,7 @@ interface Props { const ERC20TokensTable = ({ data, top, isLoading, hasAdditionalTokenTypes }: Props) => { return ( - + Asset diff --git a/src/slices/token/pages/details/inventory/__screenshots__/TokenInventory.pw.tsx_default_base-view-mobile-1.png b/src/slices/token/pages/details/inventory/__screenshots__/TokenInventory.pw.tsx_default_base-view-mobile-1.png index 925719fbb81..d28b9eebf95 100644 Binary files a/src/slices/token/pages/details/inventory/__screenshots__/TokenInventory.pw.tsx_default_base-view-mobile-1.png and b/src/slices/token/pages/details/inventory/__screenshots__/TokenInventory.pw.tsx_default_base-view-mobile-1.png differ diff --git a/src/slices/token/pages/details/inventory/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png b/src/slices/token/pages/details/inventory/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png index 67c0a129ba6..dd6f6ed42de 100644 Binary files a/src/slices/token/pages/details/inventory/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png and b/src/slices/token/pages/details/inventory/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/slices/tx/pages/details/state/__screenshots__/TxState.pw.tsx_mobile_base-view-mobile-1.png b/src/slices/tx/pages/details/state/__screenshots__/TxState.pw.tsx_mobile_base-view-mobile-1.png index ae6922ca371..79d0263f677 100644 Binary files a/src/slices/tx/pages/details/state/__screenshots__/TxState.pw.tsx_mobile_base-view-mobile-1.png and b/src/slices/tx/pages/details/state/__screenshots__/TxState.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/src/slices/tx/pages/index/list/TxsContent.tsx b/src/slices/tx/pages/index/list/TxsContent.tsx index 5210a887dc7..251170d56ed 100644 --- a/src/slices/tx/pages/index/list/TxsContent.tsx +++ b/src/slices/tx/pages/index/list/TxsContent.tsx @@ -1,6 +1,5 @@ // SPDX-License-Identifier: LicenseRef-Blockscout -import { Box } from '@chakra-ui/react'; import React from 'react'; import type { PaginationParams } from 'src/shared/pagination/types'; @@ -15,10 +14,10 @@ import useDescribeTxs from 'src/features/tx-interpretation/noves/hooks/useDescri import useIsMobile from 'src/shared/hooks/useIsMobile'; import DataList from 'src/shared/lists/DataList'; -import TableViewToggleButton from 'src/shared/lists/TableViewToggleButton'; -import useTableViewValue from 'src/shared/lists/useTableViewValue'; import getNextSortValue from 'src/shared/sort/get-next-sort-value'; +import { TableContainerScrollable } from 'src/toolkit/chakra/table'; + import TxsHeaderMobile from './TxsHeaderMobile'; import TxsList from './TxsList'; import TxsTable from './TxsTable'; @@ -44,7 +43,7 @@ type Props = { setSorting?: (value: TransactionsSortingValue) => void; sort: TransactionsSortingValue; stickyHeader?: boolean; - showTableViewButton?: boolean; + showTableView?: boolean; }; const TxsContent = ({ @@ -62,14 +61,12 @@ const TxsContent = ({ setSorting, sort, stickyHeader = true, - showTableViewButton, + showTableView, }: Props) => { const isMobile = useIsMobile(); - const tableViewFlag = useTableViewValue(); - - const isTableView = isMobile ? showTableViewButton && !tableViewFlag.isLoading && tableViewFlag.value : true; - const isLoading = isPlaceholderData || tableViewFlag.isLoading; + const isTableView = isMobile ? showTableView : true; + const isLoading = isPlaceholderData; const onSortToggle = React.useCallback((field: TransactionsSortingField) => { const value = getNextSortValue(SORT_SEQUENCE, field)(sort); @@ -78,9 +75,28 @@ const TxsContent = ({ const translationQuery = useDescribeTxs(items, currentAddress, isPlaceholderData); - const content = items && items.length > 0 ? ( - <> - + const content = (() => { + if (items && items.length > 0) { + if (isTableView) { + return ( + + + + ); + } + return ( - - - - - - ) : null; - - const tableViewButton = isMobile && showTableViewButton ? ( - - ) : null; + ); + } + return null; + })(); const actionBar = isMobile ? ( ) : null } - tableViewButton={ tableViewButton } /> ) : null; diff --git a/src/slices/tx/pages/index/list/TxsHeaderMobile.tsx b/src/slices/tx/pages/index/list/TxsHeaderMobile.tsx index 74a102ff6b3..e7111156e92 100644 --- a/src/slices/tx/pages/index/list/TxsHeaderMobile.tsx +++ b/src/slices/tx/pages/index/list/TxsHeaderMobile.tsx @@ -23,26 +23,24 @@ type Props = { showPagination?: boolean; filterComponent?: React.ReactNode; linkSlot?: React.ReactNode; - tableViewButton?: React.ReactNode; }; const collection = createListCollection({ items: SORT_OPTIONS, }); -const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps, className, showPagination = true, linkSlot, tableViewButton }: Props) => { +const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps, className, showPagination = true, linkSlot }: Props) => { const handleSortValueChange = React.useCallback(({ value }: { value: Array }) => { setSorting?.(value[0] as TransactionsSortingValue); }, [ setSorting ]); - if (!filterComponent && !setSorting && !linkSlot && !showPagination && !tableViewButton) { + if (!filterComponent && !setSorting && !linkSlot && !showPagination) { return null; } return ( - { tableViewButton } { filterComponent } { setSorting && ( void; - showTableViewButton?: boolean; + showTableView?: boolean; }; const TxsWithApiSorting = ({ @@ -37,7 +37,7 @@ const TxsWithApiSorting = ({ top, sorting, setSort, - showTableViewButton, + showTableView, }: Props) => { const handleSortChange = React.useCallback((value: TransactionsSortingValue) => { @@ -60,7 +60,7 @@ const TxsWithApiSorting = ({ setSorting={ handleSortChange } sort={ sorting } pagination={ query.pagination } - showTableViewButton={ showTableViewButton } + showTableView={ showTableView } /> ); }; diff --git a/src/toolkit/chakra/table.tsx b/src/toolkit/chakra/table.tsx index 6848d238309..a67891b0f76 100644 --- a/src/toolkit/chakra/table.tsx +++ b/src/toolkit/chakra/table.tsx @@ -1,11 +1,12 @@ // SPDX-License-Identifier: LicenseRef-Blockscout -import { Table as ChakraTable, Icon } from '@chakra-ui/react'; -import { throttle } from 'es-toolkit'; +import { Box, Table as ChakraTable, Icon } from '@chakra-ui/react'; import * as React from 'react'; +import useIsMobile from 'src/shared/hooks/useIsMobile'; import ArrowIcon from 'src/sprite/icons/arrows/east.svg'; +import { useIsSticky } from '../hooks/useIsSticky'; import { Link } from './link'; export const TableRoot = ChakraTable.Root; @@ -80,33 +81,18 @@ export const TableHeaderSticky = (props: TableHeaderProps) => { const { top, children, ...rest } = props; const ref = React.useRef(null); - const [ isStuck, setIsStuck ] = React.useState(false); - const handleScroll = React.useCallback(() => { - if (Number(ref.current?.getBoundingClientRect().y) <= (top || 0)) { - setIsStuck(true); - } else { - setIsStuck(false); - } - }, [ top ]); - - React.useEffect(() => { - const throttledHandleScroll = throttle(handleScroll, 300); - - window.addEventListener('scroll', throttledHandleScroll); - - return () => { - window.removeEventListener('scroll', throttledHandleScroll); - }; - }, [ handleScroll ]); + const isMobile = useIsMobile(); + const isSticky = useIsSticky(ref, top || 0, !isMobile); return ( @@ -114,3 +100,20 @@ export const TableHeaderSticky = (props: TableHeaderProps) => { ); }; + +export const TableContainerScrollable = ({ + children, +}: { + children: React.ReactNode; +}) => { + return ( + + { children } + + ); +}; diff --git a/src/toolkit/hooks/useIsSticky.tsx b/src/toolkit/hooks/useIsSticky.tsx index b62516d1548..e39117ab591 100644 --- a/src/toolkit/hooks/useIsSticky.tsx +++ b/src/toolkit/hooks/useIsSticky.tsx @@ -8,7 +8,7 @@ export function useIsSticky(ref: React.RefObject, offset = 0 const handleScroll = React.useCallback(() => { if ( - Number(ref.current?.getBoundingClientRect().y) < offset + Number(ref.current?.getBoundingClientRect().y) <= offset ) { setIsSticky(true); } else { diff --git a/src/toolkit/theme/recipes/table.recipe.ts b/src/toolkit/theme/recipes/table.recipe.ts index 2b4864be9f3..a663057f759 100644 --- a/src/toolkit/theme/recipes/table.recipe.ts +++ b/src/toolkit/theme/recipes/table.recipe.ts @@ -67,7 +67,7 @@ export const recipe = defineSlotRecipe({ }, cell: { px: '6px', - py: 4, + py: { base: 2, lg: 4 }, _first: { pl: 3, },