Skip to content

Commit 9332f92

Browse files
tom2drumtom2drum
committed
Address and Contact pages: move tabs up
Fixes #2593
1 parent ae75978 commit 9332f92

20 files changed

+77
-130
lines changed

‎ui/address/AddressAccountHistory.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,11 @@ import AccountHistoryFilter from './AddressAccountHistoryFilter';
2525
const getFilterValue = (getFilterValueFromQuery<NovesHistoryFilterValue>).bind(null, NovesHistoryFilterValues);
2626

2727
type Props = {
28-
scrollRef?: React.RefObject<HTMLDivElement>;
2928
shouldRender?: boolean;
3029
isQueryEnabled?: boolean;
3130
};
3231

33-
const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
32+
const AddressAccountHistory = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
3433
const router = useRouter();
3534
const isMounted = useIsMounted();
3635

@@ -41,7 +40,6 @@ const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled
4140
const { data, isError, pagination, isPlaceholderData } = useQueryWithPages({
4241
resourceName: 'noves_address_history',
4342
pathParams: { address: currentAddress },
44-
scrollRef,
4543
options: {
4644
enabled: isQueryEnabled,
4745
placeholderData: generateListStub<'noves_address_history'>(NOVES_TRANSLATE, 10, { hasNextPage: false, pageNumber: 1, pageSize: 10 }),

‎ui/address/AddressBlocksValidated.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,11 @@ import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksVali
2727
const OVERLOAD_COUNT = 75;
2828

2929
interface Props {
30-
scrollRef?: React.RefObject<HTMLDivElement>;
3130
shouldRender?: boolean;
3231
isQueryEnabled?: boolean;
3332
}
3433

35-
const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
34+
const AddressBlocksValidated = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
3635
const [ socketAlert, setSocketAlert ] = React.useState('');
3736
const [ newItemsCount, setNewItemsCount ] = React.useState(0);
3837

@@ -44,7 +43,6 @@ const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled
4443
const query = useQueryWithPages({
4544
resourceName: 'address_blocks_validated',
4645
pathParams: { hash: addressHash },
47-
scrollRef,
4846
options: {
4947
enabled: isQueryEnabled,
5048
placeholderData: generateListStub<'address_blocks_validated'>(

‎ui/address/AddressDetails.tsx

+2-14
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,9 @@ import type { AddressQuery } from './utils/useAddressQuery';
3131

3232
interface Props {
3333
addressQuery: AddressQuery;
34-
scrollRef?: React.RefObject<HTMLDivElement>;
3534
}
3635

37-
const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
36+
const AddressDetails = ({ addressQuery }: Props) => {
3837
const router = useRouter();
3938

4039
const addressHash = getQueryParamString(router.query.hash);
@@ -44,13 +43,6 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
4443
addressQuery,
4544
});
4645

47-
const handleCounterItemClick = React.useCallback(() => {
48-
window.setTimeout(() => {
49-
// cannot do scroll instantly, have to wait a little
50-
scrollRef?.current?.scrollIntoView({ behavior: 'smooth' });
51-
}, 500);
52-
}, [ scrollRef ]);
53-
5446
const error404Data = React.useMemo(() => ({
5547
hash: addressHash || '',
5648
is_contract: false,
@@ -184,7 +176,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
184176
Tokens
185177
</DetailsInfoItem.Label>
186178
<DetailsInfoItem.Value py={ addressQuery.data ? 0 : undefined }>
187-
{ addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box>0</Box> }
179+
{ addressQuery.data ? <TokenSelect/> : <Box>0</Box> }
188180
</DetailsInfoItem.Value>
189181
</>
190182
) }
@@ -215,7 +207,6 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
215207
prop="transactions_count"
216208
query={ countersQuery }
217209
address={ data.hash }
218-
onClick={ handleCounterItemClick }
219210
isAddressQueryLoading={ addressQuery.isPlaceholderData }
220211
isDegradedData={ addressQuery.isDegradedData }
221212
/>
@@ -237,7 +228,6 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
237228
prop="token_transfers_count"
238229
query={ countersQuery }
239230
address={ data.hash }
240-
onClick={ handleCounterItemClick }
241231
isAddressQueryLoading={ addressQuery.isPlaceholderData }
242232
isDegradedData={ addressQuery.isDegradedData }
243233
/>
@@ -261,7 +251,6 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
261251
prop="gas_usage_count"
262252
query={ countersQuery }
263253
address={ data.hash }
264-
onClick={ handleCounterItemClick }
265254
isAddressQueryLoading={ addressQuery.isPlaceholderData }
266255
isDegradedData={ addressQuery.isDegradedData }
267256
/>
@@ -291,7 +280,6 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
291280
prop="validations_count"
292281
query={ countersQuery }
293282
address={ data.hash }
294-
onClick={ handleCounterItemClick }
295283
isAddressQueryLoading={ addressQuery.isPlaceholderData }
296284
isDegradedData={ addressQuery.isDegradedData }
297285
/>

‎ui/address/AddressEpochRewards.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,11 @@ import AddressCsvExportLink from './AddressCsvExportLink';
1616
import AddressEpochRewardsListItem from './epochRewards/AddressEpochRewardsListItem';
1717

1818
type Props = {
19-
scrollRef?: React.RefObject<HTMLDivElement>;
2019
shouldRender?: boolean;
2120
isQueryEnabled?: boolean;
2221
};
2322

24-
const AddressEpochRewards = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
23+
const AddressEpochRewards = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
2524
const router = useRouter();
2625
const isMounted = useIsMounted();
2726

@@ -32,7 +31,6 @@ const AddressEpochRewards = ({ scrollRef, shouldRender = true, isQueryEnabled =
3231
pathParams: {
3332
hash,
3433
},
35-
scrollRef,
3634
options: {
3735
enabled: isQueryEnabled && Boolean(hash),
3836
placeholderData: generateListStub<'address_epoch_rewards'>(EPOCH_REWARD_ITEM, 50, { next_page_params: {

‎ui/address/AddressInternalTxs.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,10 @@ import AddressTxsFilter from './AddressTxsFilter';
2424
const getFilterValue = (getFilterValueFromQuery<AddressFromToFilter>).bind(null, AddressFromToFilterValues);
2525

2626
type Props = {
27-
scrollRef?: React.RefObject<HTMLDivElement>;
2827
shouldRender?: boolean;
2928
isQueryEnabled?: boolean;
3029
};
31-
const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
30+
const AddressInternalTxs = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
3231
const router = useRouter();
3332
const isMounted = useIsMounted();
3433

@@ -40,7 +39,6 @@ const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = t
4039
resourceName: 'address_internal_txs',
4140
pathParams: { hash },
4241
filters: { filter: filterValue },
43-
scrollRef,
4442
options: {
4543
enabled: isQueryEnabled,
4644
placeholderData: generateListStub<'address_internal_txs'>(

‎ui/address/AddressLogs.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,18 @@ import AddressCsvExportLink from './AddressCsvExportLink';
1515
import useAddressQuery from './utils/useAddressQuery';
1616

1717
type Props = {
18-
scrollRef?: React.RefObject<HTMLDivElement>;
1918
shouldRender?: boolean;
2019
isQueryEnabled?: boolean;
2120
};
2221

23-
const AddressLogs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
22+
const AddressLogs = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
2423
const router = useRouter();
2524
const isMounted = useIsMounted();
2625

2726
const hash = getQueryParamString(router.query.hash);
2827
const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
2928
resourceName: 'address_logs',
3029
pathParams: { hash },
31-
scrollRef,
3230
options: {
3331
enabled: isQueryEnabled,
3432
placeholderData: generateListStub<'address_logs'>(LOG, 3, { next_page_params: {

‎ui/address/AddressMud.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,11 @@ import AddressMudTable from './mud/AddressMudTable';
88
import AddressMudTables from './mud/AddressMudTables';
99

1010
type Props = {
11-
scrollRef?: React.RefObject<HTMLDivElement>;
1211
shouldRender?: boolean;
1312
isQueryEnabled?: boolean;
1413
};
1514

16-
const AddressMud = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
15+
const AddressMud = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
1716
const isMounted = useIsMounted();
1817
const router = useRouter();
1918
const tableId = router.query.table_id?.toString();
@@ -24,14 +23,14 @@ const AddressMud = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: P
2423
}
2524

2625
if (tableId && recordId) {
27-
return <AddressMudRecord tableId={ tableId } recordId={ recordId } isQueryEnabled={ isQueryEnabled } scrollRef={ scrollRef }/>;
26+
return <AddressMudRecord tableId={ tableId } recordId={ recordId } isQueryEnabled={ isQueryEnabled }/>;
2827
}
2928

3029
if (tableId) {
31-
return <AddressMudTable tableId={ tableId } scrollRef={ scrollRef } isQueryEnabled={ isQueryEnabled }/>;
30+
return <AddressMudTable tableId={ tableId } isQueryEnabled={ isQueryEnabled }/>;
3231
}
3332

34-
return <AddressMudTables scrollRef={ scrollRef } isQueryEnabled={ isQueryEnabled }/>;
33+
return <AddressMudTables isQueryEnabled={ isQueryEnabled }/>;
3534
};
3635

3736
export default AddressMud;

‎ui/address/AddressTokenTransfers.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,13 @@ const matchFilters = (filters: Filters, tokenTransfer: TokenTransfer, address?:
6363
};
6464

6565
type Props = {
66-
scrollRef?: React.RefObject<HTMLDivElement>;
6766
shouldRender?: boolean;
6867
isQueryEnabled?: boolean;
6968
// for tests only
7069
overloadCount?: number;
7170
};
7271

73-
const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
72+
const AddressTokenTransfers = ({ overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
7473
const router = useRouter();
7574
const queryClient = useQueryClient();
7675
const isMobile = useIsMobile();
@@ -94,7 +93,6 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shou
9493
resourceName: 'address_token_transfers',
9594
pathParams: { hash: currentAddress },
9695
filters: tokenFilter ? { token: tokenFilter } : filters,
97-
scrollRef,
9896
options: {
9997
enabled: isQueryEnabled,
10098
placeholderData: getTokenTransfersStub(undefined, {

‎ui/address/AddressTxs.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,13 @@ const matchFilter = (filterValue: AddressFromToFilter, transaction: Transaction,
4747
};
4848

4949
type Props = {
50-
scrollRef?: React.RefObject<HTMLDivElement>;
5150
shouldRender?: boolean;
5251
isQueryEnabled?: boolean;
5352
// for tests only
5453
overloadCount?: number;
5554
};
5655

57-
const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
56+
const AddressTxs = ({ overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
5857
const router = useRouter();
5958
const queryClient = useQueryClient();
6059
const isMounted = useIsMounted();
@@ -73,7 +72,6 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender =
7372
pathParams: { hash: currentAddress },
7473
filters: { filter: filterValue },
7574
sorting: getSortParamsFromValue<TransactionsSortingValue, TransactionsSortingField, TransactionsSorting['order']>(sort),
76-
scrollRef,
7775
options: {
7876
enabled: isQueryEnabled,
7977
placeholderData: generateListStub<'address_txs'>(TX, 50, { next_page_params: {
@@ -185,7 +183,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender =
185183

186184
return (
187185
<>
188-
{ !isMobile && (
186+
{ !isMobile && addressTxsQuery.pagination.isVisible && (
189187
<ActionBar mt={ -6 }>
190188
{ filter }
191189
{ currentAddress && csvExportLink }

‎ui/address/AddressWithdrawals.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,10 @@ import BeaconChainWithdrawalsListItem from 'ui/withdrawals/beaconChain/BeaconCha
1414
import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable';
1515

1616
type Props = {
17-
scrollRef?: React.RefObject<HTMLDivElement>;
1817
shouldRender?: boolean;
1918
isQueryEnabled?: boolean;
2019
};
21-
const AddressWithdrawals = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
20+
const AddressWithdrawals = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
2221
const router = useRouter();
2322
const isMounted = useIsMounted();
2423

@@ -27,7 +26,6 @@ const AddressWithdrawals = ({ scrollRef, shouldRender = true, isQueryEnabled = t
2726
const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
2827
resourceName: 'address_withdrawals',
2928
pathParams: { hash },
30-
scrollRef,
3129
options: {
3230
enabled: isQueryEnabled,
3331
placeholderData: generateListStub<'address_withdrawals'>(WITHDRAWAL, 50, { next_page_params: {

‎ui/address/details/AddressCounterItem.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ interface Props {
1414
prop: keyof AddressCounters;
1515
query: UseQueryResult<AddressCounters, ResourceError<unknown>>;
1616
address: string;
17-
onClick: () => void;
1817
isAddressQueryLoading: boolean;
1918
isDegradedData: boolean;
2019
}
@@ -25,7 +24,12 @@ const PROP_TO_TAB = {
2524
validations_count: 'blocks_validated',
2625
};
2726

28-
const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoading, isDegradedData }: Props) => {
27+
const AddressCounterItem = ({ prop, query, address, isAddressQueryLoading, isDegradedData }: Props) => {
28+
29+
const handleClick = React.useCallback(() => {
30+
window.scrollTo({ top: 0, behavior: 'smooth' });
31+
}, []);
32+
2933
if (query.isPlaceholderData || isAddressQueryLoading) {
3034
return <Skeleton h={ 5 } w="80px" borderRadius="full"/>;
3135
}
@@ -53,8 +57,8 @@ const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoadi
5357
return (
5458
<LinkInternal
5559
href={ route({ pathname: '/address/[hash]', query: { hash: address, tab: PROP_TO_TAB[prop] } }) }
56-
onClick={ onClick }
5760
scroll={ false }
61+
onClick={ handleClick }
5862
>
5963
{ Number(data).toLocaleString() }
6064
</LinkInternal>

‎ui/address/mud/AddressMudBreadcrumbs.tsx

+3-11
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import LinkInternal from 'ui/shared/links/LinkInternal';
1212
import useAddressQuery from '../utils/useAddressQuery';
1313

1414
type TableViewProps = {
15-
scrollRef?: React.RefObject<HTMLDivElement>;
1615
className?: string;
1716
hash: string;
1817
tableId: string;
@@ -25,23 +24,19 @@ type RecordViewProps = TableViewProps & {
2524
};
2625

2726
type BreadcrumbItemProps = {
28-
scrollRef?: React.RefObject<HTMLDivElement>;
2927
text: string;
3028
href: string;
3129
isLast?: boolean;
3230
};
3331

34-
const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps) => {
32+
const BreadcrumbItem = ({ text, href, isLast }: BreadcrumbItemProps) => {
3533
const iconColor = useColorModeValue('gray.300', 'gray.600');
3634

3735
const currentUrl = isBrowser() ? window.location.href : '';
3836

3937
const onLinkClick = React.useCallback(() => {
40-
window.setTimeout(() => {
41-
// cannot do scroll instantly, have to wait a little
42-
scrollRef?.current?.scrollIntoView({ behavior: 'smooth' });
43-
}, 500);
44-
}, [ scrollRef ]);
38+
window.scrollTo({ top: 0, behavior: 'smooth' });
39+
}, []);
4540

4641
if (isLast) {
4742
return (
@@ -95,20 +90,17 @@ const AddressMudBreadcrumbs = (props: TableViewProps | RecordViewProps) => {
9590
<BreadcrumbItem
9691
text="MUD World"
9792
href={ route({ pathname: '/address/[hash]', query: queryParams }) }
98-
scrollRef={ props.scrollRef }
9993
/>
10094
<BreadcrumbItem
10195
text={ props.tableName }
10296
href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId } }) }
10397
isLast={ !('recordId' in props) }
104-
scrollRef={ props.scrollRef }
10598
/>
10699
{ ('recordId' in props) && (
107100
<BreadcrumbItem
108101
text={ props.recordName }
109102
href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId, record_id: props.recordId } }) }
110103
isLast
111-
scrollRef={ props.scrollRef }
112104

113105
/>
114106
) }

‎ui/address/mud/AddressMudRecord.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,12 @@ import AddressMudRecordValues from './AddressMudRecordValues';
1414
import { getValueString } from './utils';
1515

1616
type Props = {
17-
scrollRef?: React.RefObject<HTMLDivElement>;
1817
isQueryEnabled?: boolean;
1918
tableId: string;
2019
recordId: string;
2120
};
2221

23-
const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef }: Props) => {
22+
const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true }: Props) => {
2423
const router = useRouter();
2524

2625
const hash = getQueryParamString(router.query.hash);
@@ -50,7 +49,6 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef
5049
recordId={ recordId }
5150
recordName={ data.record.id }
5251
mb={ 6 }
53-
scrollRef={ scrollRef }
5452
/>
5553
) }
5654
<Show above="lg" ssr={ false }>

0 commit comments

Comments
 (0)