Merge pull request #2700 from blockscout/release/v2-0-1

Release v2.0.1

configs/envs/.env.eth

@@ -17,7 +17,7 @@ NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
 NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
-NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swapscout','icon':'swap','dappId':'swapscout'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swapscout','icon':'swap','dappId':'swapscout'},{'text':'Revokescout','icon':'integration/partial','dappId':'revokescout'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
 NEXT_PUBLIC_DEX_POOLS_ENABLED=true
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth.json
 NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/eth-mainnet.json
@@ -32,8 +32,8 @@ NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap']
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_LOGOUT_URL=https://ethereum-mainnet.us.auth0.com/v2/logout
 NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=<p>Joined recent campaigns? Mint your Merit Badge <a href="https://badges.blockscout.com?utm_source=instance&utm_medium=eth">here</a></p>
-NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maikReal/974c47f86a3158c1a86b092ae2f044b3/raw/abcc7e02150cd85d4974503a0357162c0a2c35a9/merits-banner.html
-NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://swap.blockscout.com?utm_source=blockscout&utm_medium=eth
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/0xdeval/b27a4aecaad513fa033e37430a4f9a47/raw/3a2fa70068ea27c3e6d58dc4cdbeb732968d62f3/revokescout-banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://eth.blockscout.com/apps/revokescout?chainId=1
 NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
 NEXT_PUBLIC_MARKETPLACE_ENABLED=true
 NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=appGkvtmKI7fXE4Vs
@@ -51,7 +51,7 @@ NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Moralis','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/moralis.png','baseUrl':'https://moralis.com/','paths':{'token':'/chain/ethereum/token/price'}},{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/eth/pools'}},{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'Blockchair','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/blockchair.png','baseUrl':'https://blockchair.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address','token':'/ethereum/erc-20/token','block':'/ethereum/block'}},{'title':'Sentio','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/sentio.png','baseUrl':'https://app.sentio.xyz/','paths':{'tx':'/tx/1','address':'/contract/1'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/mainnet'}}, {'title':'0xPPL','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/0xPPL.png','baseUrl':'https://0xppl.com','paths':{'tx':'/Ethereum/tx','address':'/','token':'/c/Ethereum'}}, {'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address'}} ]
 NEXT_PUBLIC_NETWORK_ID=1
 NEXT_PUBLIC_NETWORK_NAME=Ethereum
-NEXT_PUBLIC_NETWORK_RPC_URL=https://eth.drpc.org
+NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.eth.gateway.fm
 NEXT_PUBLIC_NETWORK_SHORT_NAME=Ethereum
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
@@ -60,10 +60,11 @@ NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://eth.drpc.org?ref=559183','text':'Public
 NEXT_PUBLIC_REWARDS_SERVICE_API_HOST=https://merits.blockscout.com
 NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global
 NEXT_PUBLIC_SAVE_ON_GAS_ENABLED=true
-NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_STATS_API_BASE_PATH=/stats-service
+NEXT_PUBLIC_STATS_API_HOST=https://eth.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
-NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'Rarible','collection_url':'https://rarible.com/collection/{hash}/items','instance_url':'https://rarible.com/token/{hash}:{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/rarible.png'},{'name':'Blur','collection_url':'https://blur.io/eth/collection/{hash}','instance_url':'https://blur.io/eth/asset/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/blur.png'},{'name':'Nftrade','collection_url':'https://nftrade.com/assets/eth/{hash}','instance_url':'https://nftrade.com/assets/eth/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/nftrade.png'},{'name':'MagicEden','collection_url':'https://magiceden.io/collections/ethereum/{hash}','instance_url':'https://magiceden.io/item-details/ethereum/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/magiceden.png'}]
+NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://opensea.io/static/images/logos/opensea-logo.svg'},{'name':'Rarible','collection_url':'https://rarible.com/collection/{hash}/items','instance_url':'https://rarible.com/token/{hash}:{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/rarible.png'},{'name':'Blur','collection_url':'https://blur.io/eth/collection/{hash}','instance_url':'https://blur.io/eth/asset/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/blur.png'},{'name':'MagicEden','collection_url':'https://magiceden.io/collections/ethereum/{hash}','instance_url':'https://magiceden.io/item-details/ethereum/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/magiceden.png'}]
 NEXT_PUBLIC_VIEWS_TOKEN_SCAM_TOGGLE_ENABLED=true
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
 NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
\ No newline at end of file

toolkit/chakra/tooltip.tsx

@@ -46,6 +46,19 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
 
     const isMobile = useIsMobile();
 
+    const handleOpenChange = React.useCallback((details: { open: boolean }) => {
+      setOpen(details.open);
+      onOpenChange?.(details);
+    }, [ onOpenChange ]);
+
+    const handleOpenChangeManual = React.useCallback((nextOpen: boolean) => {
+      timeoutRef.current && window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => {
+        setOpen(nextOpen);
+        onOpenChange?.({ open: nextOpen });
+      }, nextOpen ? openDelay : closeDelay);
+    }, [ closeDelay, openDelay, onOpenChange ]);
+
     const handleClickAway = React.useCallback((event: Event) => {
       if (interactive) {
         const closest = (event.target as HTMLElement)?.closest('.chakra-tooltip__positioner');
@@ -54,29 +67,27 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
         }
       }
 
-      timeoutRef.current = window.setTimeout(() => {
-        setOpen(false);
-      }, closeDelay);
-    }, [ closeDelay, interactive ]);
-    const triggerRef = useClickAway<HTMLButtonElement>(handleClickAway);
+      handleOpenChangeManual(false);
+    }, [ interactive, handleOpenChangeManual ]);
 
-    const handleOpenChange = React.useCallback((details: { open: boolean }) => {
-      setOpen(details.open);
-      onOpenChange?.(details);
-    }, [ onOpenChange ]);
+    const triggerRef = useClickAway<HTMLButtonElement>(handleClickAway);
 
     const handleTriggerClick = React.useCallback(() => {
-      if (timeoutRef.current) {
-        window.clearTimeout(timeoutRef.current);
-      }
-      timeoutRef.current = window.setTimeout(() => {
-        setOpen((prev) => !prev);
-      }, open ? closeDelay : openDelay);
-    }, [ open, openDelay, closeDelay ]);
+      handleOpenChangeManual(!open);
+    }, [ handleOpenChangeManual, open ]);
 
     const handleContentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+      // otherwise, the event will be propagated to the trigger
+      // and if the trigger is a link, navigation will be triggered
       event.stopPropagation();
-    }, []);
+
+      if (interactive) {
+        const closestLink = (event.target as HTMLElement)?.closest('a');
+        if (closestLink) {
+          handleOpenChangeManual(false);
+        }
+      }
+    }, [ interactive, handleOpenChangeManual ]);
 
     React.useEffect(() => {
       return () => {

toolkit/theme/recipes/dialog.recipe.ts

@@ -162,7 +162,7 @@ export const recipe = defineSlotRecipe({
       full: {
         content: {
           maxW: '100vw',
-          minH: '100vh',
+          minH: '100dvh',
           '--dialog-margin': '0',
           borderRadius: '0',
         },

ui/address/AddressBlocksValidated.tsx

@@ -116,7 +116,6 @@ const AddressBlocksValidated = ({ shouldRender = true, isQueryEnabled = true }:
           </TableHeaderSticky>
           <TableBody>
             <SocketNewItemsNotice.Desktop
-              url={ window.location.href }
               num={ newItemsCount }
               alert={ socketAlert }
               type="block"
@@ -136,7 +135,6 @@ const AddressBlocksValidated = ({ shouldRender = true, isQueryEnabled = true }:
       <Box hideFrom="lg">
         { query.pagination.page === 1 && (
           <SocketNewItemsNotice.Mobile
-            url={ window.location.href }
             num={ newItemsCount }
             alert={ socketAlert }
             type="block"

ui/address/AddressTokenTransfers.tsx

@@ -197,7 +197,6 @@ const AddressTokenTransfers = ({ overloadCount = OVERLOAD_COUNT, shouldRender =
       <Box hideFrom="lg">
         { pagination.page === 1 && (
           <SocketNewItemsNotice.Mobile
-            url={ window.location.href }
             num={ newItemsCount }
             alert={ socketAlert }
             type="token_transfer"

ui/address/contract/methods/form/ContractMethodAddressButton.tsx

@@ -17,7 +17,7 @@ const ContractMethodAddressButton = ({ onClick, isDisabled }: Props) => {
   }, [ address, onClick ]);
 
   return (
-    <Tooltip content="Connect your wallet to enter your address." disabled={ Boolean(address) }>
+    <Tooltip content="Connect your wallet to enter your address." disabled={ Boolean(address) } disableOnMobile>
       <Button
         variant="subtle"
         size="xs"

ui/address/details/AddressBalance.tsx

@@ -73,7 +73,7 @@ const AddressBalance = ({ data, isLoading }: Props) => {
       >
         Balance
       </DetailedInfo.ItemLabel>
-      <DetailedInfo.ItemValue alignSelf="center" flexWrap="nowrap">
+      <DetailedInfo.ItemValue alignSelf="flex-start" flexWrap="nowrap">
         <NativeTokenIcon boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/>
         <CurrencyValue
           value={ data.coin_balance || '0' }

ui/address/details/AddressFavoriteButton.tsx

@@ -60,7 +60,7 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
     <>
       <AuthGuard onAuthSuccess={ handleAddToFavorite }>
         { ({ onClick }) => (
-          <Tooltip content={ `${ watchListId ? 'Remove address from Watch list' : 'Add address to Watch list' }` }>
+          <Tooltip content={ `${ watchListId ? 'Remove address from Watch list' : 'Add address to Watch list' }` } disableOnMobile>
             <IconButton
               className={ className }
               aria-label="edit"

ui/address/details/AddressQrCode.tsx

@@ -58,7 +58,7 @@ const AddressQrCode = ({ hash, className, isLoading }: Props) => {
 
   return (
     <>
-      <Tooltip content="Click to view QR code">
+      <Tooltip content="Click to view QR code" disableOnMobile>
         <IconButton
           className={ className }
           aria-label="Show QR code"

ui/address/ensDomains/AddressEnsDomains.tsx

@@ -83,7 +83,7 @@ const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
 
   return (
     <PopoverRoot>
-      <Tooltip content="List of names resolved or owned by this address">
+      <Tooltip content="List of names resolved or owned by this address" disableOnMobile>
         <div>
           <PopoverTrigger>
             <Button

ui/blocks/BlocksContent.tsx

@@ -90,7 +90,6 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
       <Box hideFrom="lg">
         { query.pagination.page === 1 && enableSocket && (
           <SocketNewItemsNotice.Mobile
-            url={ window.location.href }
             num={ newItemsCount }
             alert={ socketAlert }
             type="block"

ui/blocks/BlocksTable.tsx

@@ -67,7 +67,6 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
         <TableBody>
           { showSocketInfo && (
             <SocketNewItemsNotice.Desktop
-              url={ window.location.href }
               alert={ socketInfoAlert }
               num={ socketInfoNum }
               type="block"

ui/shared/AccountActionsMenu/AccountActionsMenu.pw.tsx

@@ -11,8 +11,6 @@ const test = base.extend<{ context: BrowserContext }>({
   context: contextWithAuth,
 });
 
-test.use({ viewport: { width: 200, height: 200 } });
-
 test.describe('with multiple items', () => {
   const hooksConfig = {
     router: {
@@ -30,14 +28,14 @@ test.describe('with multiple items', () => {
     const component = await render(<AccountActionsMenu/>, { hooksConfig });
     await component.getByRole('button').click();
 
-    await expect(page).toHaveScreenshot();
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 200, height: 200 } });
   });
 
   test('base view with styles', async({ render, page }) => {
     const component = await render(<AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
     await component.getByRole('button').click();
 
-    await expect(page).toHaveScreenshot();
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 200, height: 200 } });
   });
 
   test('loading', async({ render }) => {
@@ -65,15 +63,15 @@ test.describe('with one item', () => {
   test('base view', async({ render, page }) => {
     const component = await render(<AccountActionsMenu/>, { hooksConfig });
     await component.getByRole('button').hover();
-
-    await expect(page).toHaveScreenshot();
+    await expect(page.getByText('Add private tag')).toBeVisible();
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 200, height: 200 } });
   });
 
   test('base view with styles', async({ render, page }) => {
     const component = await render(<AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
     await component.getByRole('button').hover();
-
-    await expect(page).toHaveScreenshot();
+    await expect(page.getByText('Add private tag')).toBeVisible();
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 200, height: 200 } });
   });
 
   test('loading', async({ render }) => {

ui/shared/AccountActionsMenu/parts/ButtonItem.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const ButtonItem = ({ className, label, onClick, icon, isDisabled }: Props) => {
   return (
-    <Tooltip content={ label } disabled={ isDisabled }>
+    <Tooltip content={ label } disabled={ isDisabled } disableOnMobile>
       <IconButton
         aria-label={ label }
         className={ className }

ui/shared/SocketNewItemsNotice.tsx

@@ -14,13 +14,17 @@ interface Props {
   type?: 'transaction' | 'token_transfer' | 'deposit' | 'block';
   children?: (props: InjectedProps) => React.JSX.Element;
   className?: string;
-  url: string;
+  url?: string;
   alert?: string;
   num?: number;
   isLoading?: boolean;
 }
 
 const SocketNewItemsNotice = chakra(({ children, className, url, num, alert, type = 'transaction', isLoading }: Props) => {
+  const handleLinkClick = React.useCallback(() => {
+    window.location.reload();
+  }, []);
+
   const alertContent = (() => {
     if (alert) {
       return alert;
@@ -49,7 +53,7 @@ const SocketNewItemsNotice = chakra(({ children, className, url, num, alert, typ
 
     return (
       <>
-        <Link href={ url }>{ num.toLocaleString() } more { name }{ num > 1 ? 's' : '' }</Link>
+        <Link href={ url } onClick={ !url ? handleLinkClick : undefined }>{ num.toLocaleString() } more { name }{ num > 1 ? 's' : '' }</Link>
         <Text whiteSpace="pre"> ha{ num > 1 ? 've' : 's' } come in</Text>
       </>
     );

ui/shared/TableItemActionButtons.tsx

@@ -17,7 +17,7 @@ const TableItemActionButtons = ({ onEditClick, onDeleteClick, isLoading }: Props
 
   return (
     <HStack gap={ 6 } alignSelf="flex-end">
-      <Tooltip content="Edit">
+      <Tooltip content="Edit" disableOnMobile>
         <IconButton
           aria-label="edit"
           variant="link"
@@ -30,7 +30,7 @@ const TableItemActionButtons = ({ onEditClick, onDeleteClick, isLoading }: Props
           <IconSvg name="edit"/>
         </IconButton>
       </Tooltip>
-      <Tooltip content="Delete">
+      <Tooltip content="Delete" disableOnMobile>
         <IconButton
           aria-label="delete"
           variant="link"

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -47,7 +47,6 @@ const TokenTransferTable = ({
         <TableBody>
           { showSocketInfo && (
             <SocketNewItemsNotice.Desktop
-              url={ window.location.href }
               alert={ socketInfoAlert }
               num={ socketInfoNum }
               type="token_transfer"

ui/shared/entities/blob/BlobEntity.tsx

@@ -27,6 +27,7 @@ const Icon = (props: EntityBase.IconBaseProps) => {
     <EntityBase.Icon
       { ...props }
       name={ props.name ?? 'blob' }
+      borderRadius={ props.isLoading ? 'sm' : 'none' }
     />
   );
 };

ui/shared/layout/LayoutApp.tsx

@@ -7,6 +7,9 @@ import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
 
+const TOP_BAR_HEIGHT = 36;
+const HEADER_HEIGHT_MOBILE = 56;
+
 const LayoutDefault = ({ children }: Props) => {
   return (
     <Layout.Container
@@ -17,7 +20,13 @@ const LayoutDefault = ({ children }: Props) => {
     >
       <Layout.TopRow/>
       <HeaderMobile hideSearchBar/>
-      <Layout.MainArea minH="auto" flex={ 1 }>
+      <Layout.MainArea
+        minH={{
+          base: `calc(100dvh - ${ TOP_BAR_HEIGHT + HEADER_HEIGHT_MOBILE }px)`,
+          lg: `calc(100dvh - ${ TOP_BAR_HEIGHT }px)`,
+        }}
+        flex={ 1 }
+      >
         <Layout.MainColumn
           paddingTop={{ base: 0, lg: 0 }}
           paddingBottom={ 0 }

ui/shared/stats/StatsWidget.tsx

@@ -64,6 +64,7 @@ const StatsWidget = ({
         justifyContent="space-between"
         columnGap={ 2 }
         w="100%"
+        h="100%"
       >
         { icon && (
           <IconSvg

ui/showcases/Alert.tsx

@@ -76,7 +76,6 @@ const AlertShowcase = () => {
               </TableHeader>
               <TableBody>
                 <SocketNewItemsNotice.Desktop
-                  url={ window.location.href }
                   num={ 1234 }
                   type="block"
                   isLoading
@@ -95,7 +94,6 @@ const AlertShowcase = () => {
               </TableHeader>
               <TableBody>
                 <SocketNewItemsNotice.Desktop
-                  url={ window.location.href }
                   num={ 1234 }
                   type="block"
                   isLoading={ false }

ui/snippets/user/profile/UserProfileButton.tsx

@@ -74,6 +74,7 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending, ..
       content={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> }
       disabled={ isMobile || isLoading || Boolean(data) }
       openDelay={ 500 }
+      disableOnMobile
     >
       <span>
         <Button

ui/snippets/user/wallet/UserWalletButton.tsx

@@ -42,6 +42,7 @@ const UserWalletButton = ({ size, variant, isPending, isAutoConnectDisabled, add
       content={ <span>Connect your wallet<br/>to Blockscout for<br/>full-featured access</span> }
       disabled={ isMobile || Boolean(address) }
       openDelay={ 500 }
+      disableOnMobile
     >
       <Button
         ref={ ref }

ui/stats/ChartsWidgetsList.tsx

@@ -67,12 +67,12 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
           charts?.map((section) => (
             <Box
               key={ section.id }
-              mb={ 8 }
+              mb={{ base: 6, lg: 8 }}
               _last={{
                 marginBottom: 0,
               }}
             >
-              <Skeleton loading={ isPlaceholderData } mb={ 4 } display="inline-flex" alignItems="center" columnGap={ 2 } id={ section.id }>
+              <Skeleton loading={ isPlaceholderData } mb={{ base: 3, lg: 4 }} display="inline-flex" alignItems="center" columnGap={ 2 } id={ section.id }>
                 <Heading level="2" id={ section.id }>
                   { section.title }
                 </Heading>
@@ -85,7 +85,7 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
 
               <Grid
                 templateColumns={{ lg: 'repeat(2, minmax(0, 1fr))' }}
-                gap={ 4 }
+                gap={{ base: 3, lg: 4 }}
               >
                 { section.charts.map((chart) => (
                   <ChartWidgetContainer

ui/stats/NumberWidgetsList.tsx

@@ -23,7 +23,7 @@ const NumberWidgetsList = () => {
   return (
     <Grid
       gridTemplateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}
-      gridGap={ 4 }
+      gridGap={{ base: 1, lg: 2 }}
     >
       {
         data?.counters?.map(({ id, title, value, units, description }, index) => {

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -89,7 +89,6 @@ const TokenTransfer = ({ transfersQuery, tokenId, tokenQuery, tabsHeight = TABS_
       <Box display={{ base: 'block', lg: 'none' }}>
         { pagination.page === 1 && (
           <SocketNewItemsNotice.Mobile
-            url={ window.location.href }
             num={ newItemsCount }
             alert={ socketAlert }
             type="token_transfer"

ui/token/TokenTransfer/TokenTransferTable.tsx

@@ -47,7 +47,6 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
         <TableBody>
           { showSocketInfo && (
             <SocketNewItemsNotice.Desktop
-              url={ window.location.href }
               alert={ socketInfoAlert }
               num={ socketInfoNum }
               type="token_transfer"

ui/tx/TxSubHeading.tsx

@@ -141,7 +141,7 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
         { appActionData && (
           <AppActionButton data={ appActionData } txHash={ hash } source="Txn"/>
         ) }
-        <NetworkExplorers type="tx" pathParam={ hash } ml={{ base: 0, lg: 'auto' }}/>
+        <NetworkExplorers type="tx" pathParam={ hash } ml="auto"/>
       </Flex>
     </Box>
   );

ui/txs/socket/TxsSocketNoticeTypeAddress.tsx

@@ -21,7 +21,6 @@ const TxsSocketNoticeTypeAddress = ({ place, isLoading }: Props) => {
   if (place === 'table') {
     return (
       <SocketNewItemsNotice.Desktop
-        url={ window.location.href }
         alert={ alertText }
         num={ num }
         isLoading={ isLoading }
@@ -32,7 +31,6 @@ const TxsSocketNoticeTypeAddress = ({ place, isLoading }: Props) => {
   if (place === 'list') {
     return (
       <SocketNewItemsNotice.Mobile
-        url={ window.location.href }
         num={ num }
         alert={ alertText }
         isLoading={ isLoading }

ui/txs/socket/TxsSocketNoticeTypeAll.tsx

@@ -22,7 +22,6 @@ const TxsSocketNoticeTypeAll = ({ type, place, isLoading }: Props) => {
   if (place === 'table') {
     return (
       <SocketNewItemsNotice.Desktop
-        url={ window.location.href }
         alert={ alertText }
         num={ num }
         isLoading={ isLoading }
@@ -33,7 +32,6 @@ const TxsSocketNoticeTypeAll = ({ type, place, isLoading }: Props) => {
   if (place === 'list') {
     return (
       <SocketNewItemsNotice.Mobile
-        url={ window.location.href }
         num={ num }
         alert={ alertText }
         isLoading={ isLoading }

ui/userOp/UserOpCallData.tsx

@@ -25,6 +25,7 @@ const UserOpDecodedCallData = ({ data }: Props) => {
 
   const toggler = data.call_data && data.execute_call_data ? (
     <UserOpCallDataSwitch
+      id="call-data-switch"
       onChange={ handleSwitchChange }
       initialValue={ false }
       ml={{ base: 3, lg: 'auto' }}

ui/userOp/UserOpCallDataSwitch.tsx

@@ -5,13 +5,14 @@ import { Switch } from 'toolkit/chakra/switch';
 import { Hint } from 'toolkit/components/Hint/Hint';
 
 interface Props {
+  id: string;
   onChange: (isChecked: boolean) => void;
   initialValue?: boolean;
   isDisabled?: boolean;
   className?: string;
 }
 
-const UserOpCallDataSwitch = ({ className, initialValue, isDisabled, onChange }: Props) => {
+const UserOpCallDataSwitch = ({ className, initialValue, isDisabled, onChange, id }: Props) => {
   const [ isChecked, setIsChecked ] = React.useState(initialValue ?? false);
 
   const handleChange = React.useCallback(() => {
@@ -26,7 +27,7 @@ const UserOpCallDataSwitch = ({ className, initialValue, isDisabled, onChange }:
     <Flex ml="auto" alignItems="center" gap={ 2 }>
       <Switch
         className={ className }
-        id="call-data-switch"
+        id={ id }
         checked={ isChecked }
         disabled={ isDisabled }
         onCheckedChange={ handleChange }

ui/userOp/UserOpDecodedCallData.tsx

@@ -25,6 +25,7 @@ const UserOpDecodedCallData = ({ data }: Props) => {
 
   const toggler = data.decoded_call_data && data.decoded_execute_call_data ? (
     <UserOpCallDataSwitch
+      id="decoded-call-data-switch"
       onChange={ handleSwitchChange }
       initialValue={ false }
       ml={{ base: 0, lg: 'auto' }}

ui/verifiedAddresses/VerifiedAddressesListItem.tsx

@@ -66,7 +66,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
           noCopy
           noSymbol
         />
-        <Tooltip content="Edit" disabled={ isLoading }>
+        <Tooltip content="Edit" disabled={ isLoading } disableOnMobile>
           <IconButton
             aria-label="edit"
             variant="link"

ui/verifiedAddresses/VerifiedAddressesTableItem.tsx

@@ -83,7 +83,7 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
       </TableCell>
       <TableCell pl="0">
         { item.metadata.tokenName && application && !isLoading ? (
-          <Tooltip content="Edit" disabled={ isLoading }>
+          <Tooltip content="Edit" disabled={ isLoading } disableOnMobile>
             <IconButton
               aria-label="edit"
               variant="link"