Address and Contact pages: move tabs up (#2626)

Fixes #2593

ui/address/AddressAccountHistory.tsx

@@ -25,12 +25,11 @@ import AccountHistoryFilter from './AddressAccountHistoryFilter';
 const getFilterValue = (getFilterValueFromQuery<NovesHistoryFilterValue>).bind(null, NovesHistoryFilterValues);
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
   isQueryEnabled?: boolean;
 };
 
-const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+const AddressAccountHistory = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMounted = useIsMounted();
 
@@ -41,7 +40,6 @@ const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled
   const { data, isError, pagination, isPlaceholderData } = useQueryWithPages({
     resourceName: 'noves_address_history',
     pathParams: { address: currentAddress },
-    scrollRef,
     options: {
       enabled: isQueryEnabled,
       placeholderData: generateListStub<'noves_address_history'>(NOVES_TRANSLATE, 10, { hasNextPage: false, pageNumber: 1, pageSize: 10 }),

ui/address/AddressBlocksValidated.tsx

@@ -27,12 +27,11 @@ import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksVali
 const OVERLOAD_COUNT = 75;
 
 interface Props {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
   isQueryEnabled?: boolean;
 }
 
-const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+const AddressBlocksValidated = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const [ socketAlert, setSocketAlert ] = React.useState('');
   const [ newItemsCount, setNewItemsCount ] = React.useState(0);
 
@@ -44,7 +43,6 @@ const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled
   const query = useQueryWithPages({
     resourceName: 'address_blocks_validated',
     pathParams: { hash: addressHash },
-    scrollRef,
     options: {
       enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_blocks_validated'>(

ui/address/AddressDetails.tsx

@@ -31,10 +31,9 @@ import type { AddressQuery } from './utils/useAddressQuery';
 
 interface Props {
   addressQuery: AddressQuery;
-  scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
-const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
+const AddressDetails = ({ addressQuery }: Props) => {
   const router = useRouter();
 
   const addressHash = getQueryParamString(router.query.hash);
@@ -44,13 +43,6 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
     addressQuery,
   });
 
-  const handleCounterItemClick = React.useCallback(() => {
-    window.setTimeout(() => {
-      // cannot do scroll instantly, have to wait a little
-      scrollRef?.current?.scrollIntoView({ behavior: 'smooth' });
-    }, 500);
-  }, [ scrollRef ]);
-
   const error404Data = React.useMemo(() => ({
     hash: addressHash || '',
     is_contract: false,
@@ -184,7 +176,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
               Tokens
             </DetailsInfoItem.Label>
             <DetailsInfoItem.Value py={ addressQuery.data ? 0 : undefined }>
-              { addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box>0</Box> }
+              { addressQuery.data ? <TokenSelect/> : <Box>0</Box> }
             </DetailsInfoItem.Value>
           </>
         ) }
@@ -215,7 +207,6 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
               prop="transactions_count"
               query={ countersQuery }
               address={ data.hash }
-              onClick={ handleCounterItemClick }
               isAddressQueryLoading={ addressQuery.isPlaceholderData }
               isDegradedData={ addressQuery.isDegradedData }
             />
@@ -237,7 +228,6 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
                   prop="token_transfers_count"
                   query={ countersQuery }
                   address={ data.hash }
-                  onClick={ handleCounterItemClick }
                   isAddressQueryLoading={ addressQuery.isPlaceholderData }
                   isDegradedData={ addressQuery.isDegradedData }
                 />
@@ -261,7 +251,6 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
                   prop="gas_usage_count"
                   query={ countersQuery }
                   address={ data.hash }
-                  onClick={ handleCounterItemClick }
                   isAddressQueryLoading={ addressQuery.isPlaceholderData }
                   isDegradedData={ addressQuery.isDegradedData }
                 />
@@ -291,7 +280,6 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
                   prop="validations_count"
                   query={ countersQuery }
                   address={ data.hash }
-                  onClick={ handleCounterItemClick }
                   isAddressQueryLoading={ addressQuery.isPlaceholderData }
                   isDegradedData={ addressQuery.isDegradedData }
                 />

ui/address/AddressEpochRewards.tsx

@@ -16,12 +16,11 @@ import AddressCsvExportLink from './AddressCsvExportLink';
 import AddressEpochRewardsListItem from './epochRewards/AddressEpochRewardsListItem';
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
   isQueryEnabled?: boolean;
 };
 
-const AddressEpochRewards = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+const AddressEpochRewards = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMounted = useIsMounted();
 
@@ -32,7 +31,6 @@ const AddressEpochRewards = ({ scrollRef, shouldRender = true, isQueryEnabled =
     pathParams: {
       hash,
     },
-    scrollRef,
     options: {
       enabled: isQueryEnabled && Boolean(hash),
       placeholderData: generateListStub<'address_epoch_rewards'>(EPOCH_REWARD_ITEM, 50, { next_page_params: {

ui/address/AddressInternalTxs.tsx

@@ -24,11 +24,10 @@ import AddressTxsFilter from './AddressTxsFilter';
 const getFilterValue = (getFilterValueFromQuery<AddressFromToFilter>).bind(null, AddressFromToFilterValues);
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
   isQueryEnabled?: boolean;
 };
-const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+const AddressInternalTxs = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMounted = useIsMounted();
 
@@ -40,7 +39,6 @@ const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = t
     resourceName: 'address_internal_txs',
     pathParams: { hash },
     filters: { filter: filterValue },
-    scrollRef,
     options: {
       enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_internal_txs'>(

ui/address/AddressLogs.tsx

@@ -15,12 +15,11 @@ import AddressCsvExportLink from './AddressCsvExportLink';
 import useAddressQuery from './utils/useAddressQuery';
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
   isQueryEnabled?: boolean;
 };
 
-const AddressLogs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+const AddressLogs = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMounted = useIsMounted();
 
@@ -28,7 +27,6 @@ const AddressLogs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }:
   const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
     resourceName: 'address_logs',
     pathParams: { hash },
-    scrollRef,
     options: {
       enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_logs'>(LOG, 3, { next_page_params: {

ui/address/AddressMud.tsx

@@ -8,12 +8,11 @@ import AddressMudTable from './mud/AddressMudTable';
 import AddressMudTables from './mud/AddressMudTables';
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
   isQueryEnabled?: boolean;
 };
 
-const AddressMud = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+const AddressMud = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const isMounted = useIsMounted();
   const router = useRouter();
   const tableId = router.query.table_id?.toString();
@@ -24,14 +23,14 @@ const AddressMud = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: P
   }
 
   if (tableId && recordId) {
-    return <AddressMudRecord tableId={ tableId } recordId={ recordId } isQueryEnabled={ isQueryEnabled } scrollRef={ scrollRef }/>;
+    return <AddressMudRecord tableId={ tableId } recordId={ recordId } isQueryEnabled={ isQueryEnabled }/>;
   }
 
   if (tableId) {
-    return <AddressMudTable tableId={ tableId } scrollRef={ scrollRef } isQueryEnabled={ isQueryEnabled }/>;
+    return <AddressMudTable tableId={ tableId } isQueryEnabled={ isQueryEnabled }/>;
   }
 
-  return <AddressMudTables scrollRef={ scrollRef } isQueryEnabled={ isQueryEnabled }/>;
+  return <AddressMudTables isQueryEnabled={ isQueryEnabled }/>;
 };
 
 export default AddressMud;

ui/address/AddressTokenTransfers.tsx

@@ -63,14 +63,13 @@ const matchFilters = (filters: Filters, tokenTransfer: TokenTransfer, address?:
 };
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
   isQueryEnabled?: boolean;
   // for tests only
   overloadCount?: number;
 };
 
-const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
+const AddressTokenTransfers = ({ overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const queryClient = useQueryClient();
   const isMobile = useIsMobile();
@@ -94,7 +93,6 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shou
     resourceName: 'address_token_transfers',
     pathParams: { hash: currentAddress },
     filters: tokenFilter ? { token: tokenFilter } : filters,
-    scrollRef,
     options: {
       enabled: isQueryEnabled,
       placeholderData: getTokenTransfersStub(undefined, {

ui/address/AddressTxs.tsx

@@ -47,14 +47,13 @@ const matchFilter = (filterValue: AddressFromToFilter, transaction: Transaction,
 };
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
   isQueryEnabled?: boolean;
   // for tests only
   overloadCount?: number;
 };
 
-const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
+const AddressTxs = ({ overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const queryClient = useQueryClient();
   const isMounted = useIsMounted();
@@ -73,7 +72,6 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender =
     pathParams: { hash: currentAddress },
     filters: { filter: filterValue },
     sorting: getSortParamsFromValue<TransactionsSortingValue, TransactionsSortingField, TransactionsSorting['order']>(sort),
-    scrollRef,
     options: {
       enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_txs'>(TX, 50, { next_page_params: {
@@ -185,7 +183,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender =
 
   return (
     <>
-      { !isMobile && (
+      { !isMobile && addressTxsQuery.pagination.isVisible && (
         <ActionBar mt={ -6 }>
           { filter }
           { currentAddress && csvExportLink }

ui/address/AddressWithdrawals.tsx

@@ -14,11 +14,10 @@ import BeaconChainWithdrawalsListItem from 'ui/withdrawals/beaconChain/BeaconCha
 import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable';
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
   isQueryEnabled?: boolean;
 };
-const AddressWithdrawals = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+const AddressWithdrawals = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMounted = useIsMounted();
 
@@ -27,7 +26,6 @@ const AddressWithdrawals = ({ scrollRef, shouldRender = true, isQueryEnabled = t
   const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
     resourceName: 'address_withdrawals',
     pathParams: { hash },
-    scrollRef,
     options: {
       enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_withdrawals'>(WITHDRAWAL, 50, { next_page_params: {

ui/address/details/AddressCounterItem.tsx

@@ -14,7 +14,6 @@ interface Props {
   prop: keyof AddressCounters;
   query: UseQueryResult<AddressCounters, ResourceError<unknown>>;
   address: string;
-  onClick: () => void;
   isAddressQueryLoading: boolean;
   isDegradedData: boolean;
 }
@@ -25,7 +24,12 @@ const PROP_TO_TAB = {
   validations_count: 'blocks_validated',
 };
 
-const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoading, isDegradedData }: Props) => {
+const AddressCounterItem = ({ prop, query, address, isAddressQueryLoading, isDegradedData }: Props) => {
+
+  const handleClick = React.useCallback(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, []);
+
   if (query.isPlaceholderData || isAddressQueryLoading) {
     return <Skeleton h={ 5 } w="80px" borderRadius="full"/>;
   }
@@ -53,8 +57,8 @@ const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoadi
       return (
         <LinkInternal
           href={ route({ pathname: '/address/[hash]', query: { hash: address, tab: PROP_TO_TAB[prop] } }) }
-          onClick={ onClick }
           scroll={ false }
+          onClick={ handleClick }
         >
           { Number(data).toLocaleString() }
         </LinkInternal>

ui/address/mud/AddressMudBreadcrumbs.tsx

@@ -12,7 +12,6 @@ import LinkInternal from 'ui/shared/links/LinkInternal';
 import useAddressQuery from '../utils/useAddressQuery';
 
 type TableViewProps = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   className?: string;
   hash: string;
   tableId: string;
@@ -25,23 +24,19 @@ type RecordViewProps = TableViewProps & {
 };
 
 type BreadcrumbItemProps = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   text: string;
   href: string;
   isLast?: boolean;
 };
 
-const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps) => {
+const BreadcrumbItem = ({ text, href, isLast }: BreadcrumbItemProps) => {
   const iconColor = useColorModeValue('gray.300', 'gray.600');
 
   const currentUrl = isBrowser() ? window.location.href : '';
 
   const onLinkClick = React.useCallback(() => {
-    window.setTimeout(() => {
-      // cannot do scroll instantly, have to wait a little
-      scrollRef?.current?.scrollIntoView({ behavior: 'smooth' });
-    }, 500);
-  }, [ scrollRef ]);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, []);
 
   if (isLast) {
     return (
@@ -95,20 +90,17 @@ const AddressMudBreadcrumbs = (props: TableViewProps | RecordViewProps) => {
       <BreadcrumbItem
         text="MUD World"
         href={ route({ pathname: '/address/[hash]', query: queryParams }) }
-        scrollRef={ props.scrollRef }
       />
       <BreadcrumbItem
         text={ props.tableName }
         href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId } }) }
         isLast={ !('recordId' in props) }
-        scrollRef={ props.scrollRef }
       />
       { ('recordId' in props) && (
         <BreadcrumbItem
           text={ props.recordName }
           href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId, record_id: props.recordId } }) }
           isLast
-          scrollRef={ props.scrollRef }
 
         />
       ) }

ui/address/mud/AddressMudRecord.tsx

@@ -14,13 +14,12 @@ import AddressMudRecordValues from './AddressMudRecordValues';
 import { getValueString } from './utils';
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   isQueryEnabled?: boolean;
   tableId: string;
   recordId: string;
 };
 
-const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef }: Props) => {
+const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true }: Props) => {
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
@@ -50,7 +49,6 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef
           recordId={ recordId }
           recordName={ data.record.id }
           mb={ 6 }
-          scrollRef={ scrollRef }
         />
       ) }
       <Show above="lg" ssr={ false }>

ui/address/mud/AddressMudTable.tsx

@@ -23,14 +23,13 @@ const BREADCRUMBS_HEIGHT = 60;
 const FILTERS_HEIGHT = 44;
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   isQueryEnabled?: boolean;
   tableId: string;
 };
 
 type FilterKeys = keyof AddressMudRecordsFilter;
 
-const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) => {
+const AddressMudTable = ({ tableId, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const [ sorting, setSorting ] =
     React.useState<AddressMudRecordsSorting | undefined>(getSortParamsFromQuery<AddressMudRecordsSorting>(router.query, SORT_SEQUENCE));
@@ -45,7 +44,6 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
     pathParams: { hash, table_id: tableId },
     filters,
     sorting,
-    scrollRef,
     options: {
       // no placeholder data because the structure of a table is unpredictable
       enabled: isQueryEnabled,
@@ -103,7 +101,6 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
       hash={ hash }
       tableId={ tableId }
       tableName={ data?.table.table_full_name }
-      scrollRef={ scrollRef }
       mb={ hasActiveFilters ? 4 : 0 }
     />
   ) : null;
@@ -127,7 +124,6 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
       setFilters={ setFilters }
       filters={ filters }
       toggleTableHasHorizontalScroll={ setTableHasHorizontalScroll.toggle }
-      scrollRef={ scrollRef }
       hash={ hash }
     />
   ) : null;

ui/address/mud/AddressMudTables.tsx

@@ -18,11 +18,10 @@ import AddressMudTablesListItem from './AddressMudTablesListItem';
 import AddressMudTablesTable from './AddressMudTablesTable';
 
 type Props = {
-  scrollRef?: React.RefObject<HTMLDivElement>;
   isQueryEnabled?: boolean;
 };
 
-const AddressMudTables = ({ scrollRef, isQueryEnabled = true }: Props) => {
+const AddressMudTables = ({ isQueryEnabled = true }: Props) => {
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
@@ -34,7 +33,6 @@ const AddressMudTables = ({ scrollRef, isQueryEnabled = true }: Props) => {
     resourceName: 'address_mud_tables',
     pathParams: { hash },
     filters: { q: debouncedSearchTerm },
-    scrollRef,
     options: {
       enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_mud_tables'>(ADDRESS_MUD_TABLE_ITEM, 3, { next_page_params: {
@@ -72,7 +70,6 @@ const AddressMudTables = ({ scrollRef, isQueryEnabled = true }: Props) => {
           items={ data.items }
           isLoading={ isPlaceholderData }
           top={ ACTION_BAR_HEIGHT_DESKTOP }
-          scrollRef={ scrollRef }
           hash={ hash }
         />
       </Hide>

ui/address/mud/AddressMudTablesTable.tsx

@@ -11,12 +11,11 @@ type Props = {
   items: AddressMudTables['items'];
   isLoading: boolean;
   top: number;
-  scrollRef?: React.RefObject<HTMLDivElement>;
   hash: string;
 };
 
 //sorry for the naming
-const AddressMudTablesTable = ({ items, isLoading, top, scrollRef, hash }: Props) => {
+const AddressMudTablesTable = ({ items, isLoading, top, hash }: Props) => {
   return (
     <Table style={{ tableLayout: 'auto' }}>
       <Thead top={ top }>
@@ -33,7 +32,6 @@ const AddressMudTablesTable = ({ items, isLoading, top, scrollRef, hash }: Props
             key={ item.table.table_id + (isLoading ? String(index) : '') }
             item={ item }
             isLoading={ isLoading }
-            scrollRef={ scrollRef }
             hash={ hash }
           />
         )) }

ui/address/mud/AddressMudTablesTableItem.tsx

@@ -10,15 +10,13 @@ import Skeleton from 'ui/shared/chakra/Skeleton';
 import Tag from 'ui/shared/chakra/Tag';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
-
 type Props = {
   item: AddressMudTableItem;
   isLoading: boolean;
-  scrollRef?: React.RefObject<HTMLDivElement>;
   hash: string;
 };
 
-const AddressMudTablesTableItem = ({ item, isLoading, scrollRef, hash }: Props) => {
+const AddressMudTablesTableItem = ({ item, isLoading, hash }: Props) => {
   const [ isOpened, setIsOpened ] = useBoolean(false);
 
   const router = useRouter();
@@ -39,8 +37,9 @@ const AddressMudTablesTableItem = ({ item, isLoading, scrollRef, hash }: Props)
         { shallow: true },
       );
     }
-    scrollRef?.current?.scrollIntoView();
-  }, [ router, scrollRef, hash ]);
+
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [ router, hash ]);
 
   return (
     <>

ui/address/tokenSelect/TokenSelect.tsx

@@ -18,11 +18,7 @@ import useFetchTokens from '../utils/useFetchTokens';
 import TokenSelectDesktop from './TokenSelectDesktop';
 import TokenSelectMobile from './TokenSelectMobile';
 
-interface Props {
-  onClick?: () => void;
-}
-
-const TokenSelect = ({ onClick }: Props) => {
+const TokenSelect = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
   const queryClient = useQueryClient();
@@ -38,8 +34,8 @@ const TokenSelect = ({ onClick }: Props) => {
 
   const handleIconButtonClick = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Tokens show all (icon)' });
-    onClick?.();
-  }, [ onClick ]);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [ ]);
 
   if (isPending) {
     return (

ui/pages/Address.tsx

@@ -67,7 +67,6 @@ const AddressPageContent = () => {
   const router = useRouter();
   const appProps = useAppContext();
 
-  const tabsScrollRef = React.useRef<HTMLDivElement>(null);
   const hash = getQueryParamString(router.query.hash);
 
   const checkDomainName = useCheckDomainNameParam(hash);
@@ -154,23 +153,53 @@ const AddressPageContent = () => {
 
   const tabs: Array<RoutedTab> = React.useMemo(() => {
     return [
+      {
+        id: 'index',
+        title: 'Details',
+        component: <AddressDetails addressQuery={ addressQuery }/>,
+      },
+      addressQuery.data?.is_contract ? {
+        id: 'contract',
+        title: () => {
+          const tabName = addressQuery.data.proxy_type === 'eip7702' ? 'Code' : 'Contract';
+
+          if (addressQuery.data.is_verified) {
+            return (
+              <>
+                <span>{ tabName }</span>
+                <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 }/>
+              </>
+            );
+          }
+
+          return tabName;
+        },
+        component: (
+          <AddressContract
+            tabs={ contractTabs.tabs }
+            shouldRender={ !isTabsLoading }
+            isLoading={ contractTabs.isLoading }
+          />
+        ),
+        subTabs: CONTRACT_TAB_IDS,
+      } : undefined,
       config.features.mudFramework.isEnabled && mudTablesCountQuery.data && mudTablesCountQuery.data > 0 && {
         id: 'mud',
         title: 'MUD',
         count: mudTablesCountQuery.data,
-        component: <AddressMud scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        component: <AddressMud shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
       {
         id: 'txs',
         title: 'Transactions',
         count: addressTabsCountersQuery.data?.transactions_count,
-        component: <AddressTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        component: <AddressTxs shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
       txInterpretation.isEnabled && txInterpretation.provider === 'noves' ?
         {
           id: 'account_history',
           title: 'Account history',
-          component: <AddressAccountHistory scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+          component: <AddressAccountHistory shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
       config.features.userOps.isEnabled && Boolean(userOpsAccountQuery.data?.total_ops) ?
@@ -186,14 +215,14 @@ const AddressPageContent = () => {
           id: 'withdrawals',
           title: 'Withdrawals',
           count: addressTabsCountersQuery.data?.withdrawals_count,
-          component: <AddressWithdrawals scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+          component: <AddressWithdrawals shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
       {
         id: 'token_transfers',
         title: 'Token transfers',
         count: addressTabsCountersQuery.data?.token_transfers_count,
-        component: <AddressTokenTransfers scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        component: <AddressTokenTransfers shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
       {
         id: 'tokens',
@@ -206,13 +235,13 @@ const AddressPageContent = () => {
         id: 'internal_txns',
         title: 'Internal txns',
         count: addressTabsCountersQuery.data?.internal_transactions_count,
-        component: <AddressInternalTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        component: <AddressInternalTxs shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
       addressTabsCountersQuery.data?.celo_election_rewards_count ? {
         id: 'epoch_rewards',
         title: 'Epoch rewards',
         count: addressTabsCountersQuery.data?.celo_election_rewards_count,
-        component: <AddressEpochRewards scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        component: <AddressEpochRewards shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       } : undefined,
       {
         id: 'coin_balance_history',
@@ -224,7 +253,7 @@ const AddressPageContent = () => {
           id: 'blocks_validated',
           title: `Blocks ${ getNetworkValidationActionText() }`,
           count: addressTabsCountersQuery.data?.validations_count,
-          component: <AddressBlocksValidated scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+          component: <AddressBlocksValidated shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
       addressTabsCountersQuery.data?.logs_count ?
@@ -232,38 +261,12 @@ const AddressPageContent = () => {
           id: 'logs',
           title: 'Logs',
           count: addressTabsCountersQuery.data?.logs_count,
-          component: <AddressLogs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+          component: <AddressLogs shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
-
-      addressQuery.data?.is_contract ? {
-        id: 'contract',
-        title: () => {
-          const tabName = addressQuery.data.proxy_type === 'eip7702' ? 'Code' : 'Contract';
-
-          if (addressQuery.data.is_verified) {
-            return (
-              <>
-                <span>{ tabName }</span>
-                <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 }/>
-              </>
-            );
-          }
-
-          return tabName;
-        },
-        component: (
-          <AddressContract
-            tabs={ contractTabs.tabs }
-            shouldRender={ !isTabsLoading }
-            isLoading={ contractTabs.isLoading }
-          />
-        ),
-        subTabs: CONTRACT_TAB_IDS,
-      } : undefined,
     ].filter(Boolean);
   }, [
-    addressQuery.data,
+    addressQuery,
     contractTabs,
     addressTabsCountersQuery.data,
     userOpsAccountQuery.data,
@@ -348,10 +351,6 @@ const AddressPageContent = () => {
     />
   );
 
-  const content = (addressQuery.isError || addressQuery.isDegradedData) ?
-    null :
-    <RoutedTabs tabs={ tabs } tabListProps={{ mt: 6 }} isLoading={ isTabsLoading }/>;
-
   const backLink = React.useMemo(() => {
     if (appProps.referrer && appProps.referrer.includes('/accounts')) {
       return {
@@ -433,10 +432,7 @@ const AddressPageContent = () => {
       { !addressMetadataQuery.isPending &&
         <AddressMetadataAlert tags={ addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags } mt="-4px" mb={ 6 }/> }
       { config.features.metasuites.isEnabled && <Box display="none" id="meta-suites__address" data-ready={ !isLoading }/> }
-      <AddressDetails addressQuery={ addressQuery } scrollRef={ tabsScrollRef }/>
-      { /* should stay before tabs to scroll up with pagination */ }
-      <Box ref={ tabsScrollRef }></Box>
-      { content }
+      <RoutedTabs tabs={ tabs } tabListProps={{ mt: 6 }} isLoading={ isTabsLoading }/>
     </>
   );
 };