Skip to content

Commit 853bbc9

Browse files
tom2drumtom2drum
authored
Address page: change list views to table views on mobile (#3506)
* Address page: change list views to table views on mobile Resolves #3502 * hide sorting button on mobile for tx table view * review fixes * fix tests
1 parent eef85b6 commit 853bbc9

134 files changed

Lines changed: 256 additions & 426 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
// SPDX-License-Identifier: LicenseRef-Blockscout
22

3-
import { Box } from '@chakra-ui/react';
43
import { useRouter } from 'next/router';
54
import React from 'react';
65

@@ -13,8 +12,9 @@ import useQueryWithPages from 'src/shared/pagination/useQueryWithPages';
1312
import { generateListStub } from 'src/shared/pagination/utils';
1413
import getQueryParamString from 'src/shared/router/get-query-param-string';
1514

15+
import { TableContainerScrollable } from 'src/toolkit/chakra/table';
16+
1617
import { DEPOSIT } from '../../stubs/deposits';
17-
import BeaconChainDepositsListItem from '../deposits/BeaconChainDepositsListItem';
1818
import BeaconChainDepositsTable from '../deposits/BeaconChainDepositsTable';
1919

2020
type Props = {
@@ -44,26 +44,14 @@ const AddressDeposits = ({ shouldRender = true, isQueryEnabled = true }: Props)
4444
}
4545

4646
const content = data?.items ? (
47-
<>
48-
<Box hideFrom="lg">
49-
{ data.items.map((item, index) => (
50-
<BeaconChainDepositsListItem
51-
key={ item.index + Number(isPlaceholderData ? index : '') }
52-
item={ item }
53-
view="address"
54-
isLoading={ isPlaceholderData }
55-
/>
56-
)) }
57-
</Box>
58-
<Box hideBelow="lg">
59-
<BeaconChainDepositsTable
60-
items={ data.items }
61-
view="address"
62-
top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
63-
isLoading={ isPlaceholderData }
64-
/>
65-
</Box>
66-
</>
47+
<TableContainerScrollable>
48+
<BeaconChainDepositsTable
49+
items={ data.items }
50+
view="address"
51+
top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
52+
isLoading={ isPlaceholderData }
53+
/>
54+
</TableContainerScrollable>
6755
) : null ;
6856

6957
const actionBar = pagination.isVisible ? (

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

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
// SPDX-License-Identifier: LicenseRef-Blockscout
22

3-
import { Box } from '@chakra-ui/react';
43
import { useRouter } from 'next/router';
54
import React from 'react';
65

76
import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'src/shell/page/action-bar/ActionBar';
87

9-
import BeaconChainWithdrawalsListItem from 'src/features/chain-variants/beacon-chain/pages/withdrawals/BeaconChainWithdrawalsListItem';
108
import BeaconChainWithdrawalsTable from 'src/features/chain-variants/beacon-chain/pages/withdrawals/BeaconChainWithdrawalsTable';
119
import { WITHDRAWAL } from 'src/features/chain-variants/beacon-chain/stubs/withdrawals';
1210

@@ -17,6 +15,8 @@ import useQueryWithPages from 'src/shared/pagination/useQueryWithPages';
1715
import { generateListStub } from 'src/shared/pagination/utils';
1816
import getQueryParamString from 'src/shared/router/get-query-param-string';
1917

18+
import { TableContainerScrollable } from 'src/toolkit/chakra/table';
19+
2020
type Props = {
2121
shouldRender?: boolean;
2222
isQueryEnabled?: boolean;
@@ -44,26 +44,14 @@ const AddressWithdrawals = ({ shouldRender = true, isQueryEnabled = true }: Prop
4444
}
4545

4646
const content = data?.items ? (
47-
<>
48-
<Box hideFrom="lg">
49-
{ data.items.map((item, index) => (
50-
<BeaconChainWithdrawalsListItem
51-
key={ item.index + Number(isPlaceholderData ? index : '') }
52-
item={ item }
53-
view="address"
54-
isLoading={ isPlaceholderData }
55-
/>
56-
)) }
57-
</Box>
58-
<Box hideBelow="lg">
59-
<BeaconChainWithdrawalsTable
60-
items={ data.items }
61-
view="address"
62-
top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
63-
isLoading={ isPlaceholderData }
64-
/>
65-
</Box>
66-
</>
47+
<TableContainerScrollable>
48+
<BeaconChainWithdrawalsTable
49+
items={ data.items }
50+
view="address"
51+
top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
52+
isLoading={ isPlaceholderData }
53+
/>
54+
</TableContainerScrollable>
6755
) : null ;
6856

6957
const actionBar = pagination.isVisible ? (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const BeaconChainDepositsTable = ({ items, isLoading, top, view }: Props) => {
3535
<TableRoot minW="1100px">
3636
<TableHeaderSticky top={ top }>
3737
<TableRow>
38-
<TableColumnHeader w="190px">Transaction hash</TableColumnHeader>
38+
<TableColumnHeader w="200px">Transaction hash</TableColumnHeader>
3939
{ view !== 'block' && <TableColumnHeader>Block</TableColumnHeader> }
4040
{ view !== 'block' && <TableColumnHeader w="180px">Timestamp<TimeFormatToggle/></TableColumnHeader> }
4141
<TableColumnHeader>{ `Value ${ feature.currency.symbol }` }</TableColumnHeader>

‎src/features/chain-variants/beacon-chain/pages/deposits/__screenshots__/BeaconChainDeposits.pw.tsx_default_base-view-1.png‎

-11 Bytes

‎src/features/chain-variants/beacon-chain/pages/deposits/__screenshots__/BeaconChainDeposits.pw.tsx_default_mobile-base-view-1.png‎

-55 Bytes

‎src/features/chain-variants/beacon-chain/pages/withdrawals/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png‎

-17 Bytes

‎src/features/chain-variants/beacon-chain/pages/withdrawals/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png‎

-73 Bytes

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

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
// SPDX-License-Identifier: LicenseRef-Blockscout
22

3-
import { Box } from '@chakra-ui/react';
43
import { useRouter } from 'next/router';
54
import React from 'react';
65

@@ -16,7 +15,8 @@ import useQueryWithPages from 'src/shared/pagination/useQueryWithPages';
1615
import { generateListStub } from 'src/shared/pagination/utils';
1716
import getQueryParamString from 'src/shared/router/get-query-param-string';
1817

19-
import AddressEpochRewardsListItem from './AddressEpochRewardsListItem';
18+
import { TableContainerScrollable } from 'src/toolkit/chakra/table';
19+
2020
import AddressEpochRewardsTable from './AddressEpochRewardsTable';
2121

2222
type Props = {
@@ -52,24 +52,13 @@ const AddressEpochRewards = ({ shouldRender = true, isQueryEnabled = true }: Pro
5252
}
5353

5454
const content = rewardsQuery.data?.items ? (
55-
<>
56-
<Box hideBelow="lg">
57-
<AddressEpochRewardsTable
58-
items={ rewardsQuery.data.items }
59-
top={ rewardsQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
60-
isLoading={ rewardsQuery.isPlaceholderData }
61-
/>
62-
</Box>
63-
<Box hideFrom="lg">
64-
{ rewardsQuery.data.items.map((item, index) => (
65-
<AddressEpochRewardsListItem
66-
key={ item.epoch_number + item.type + item.account.hash + item.associated_account.hash + (rewardsQuery.isPlaceholderData ? String(index) : '') }
67-
item={ item }
68-
isLoading={ rewardsQuery.isPlaceholderData }
69-
/>
70-
)) }
71-
</Box>
72-
</>
55+
<TableContainerScrollable>
56+
<AddressEpochRewardsTable
57+
items={ rewardsQuery.data.items }
58+
top={ rewardsQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
59+
isLoading={ rewardsQuery.isPlaceholderData }
60+
/>
61+
</TableContainerScrollable>
7362
) : null;
7463

7564
const actionBar = (

‎src/features/chain-variants/celo/pages/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png‎

-45.9 KB

‎src/features/chain-variants/mud/pages/address/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png‎

0 Bytes

0 commit comments

Comments
 (0)