change mobile page titke for the chart

ui/address/AddressCoinBalance.pw.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import * as balanceHistoryMock from 'mocks/address/coinBalanceHistory';
-import { test, expect } from 'playwright/lib';
+import { test, expect, devices } from 'playwright/lib';
 
 import AddressCoinBalance from './AddressCoinBalance';
 
@@ -12,7 +12,7 @@ const hooksConfig = {
   },
 };
 
-test('base view +@dark-mode +@mobile', async({ render, page, mockApiResponse }) => {
+test('base view +@dark-mode', async({ render, page, mockApiResponse }) => {
   await mockApiResponse('address_coin_balance', balanceHistoryMock.baseResponse, { pathParams: { hash: addressHash } });
   await mockApiResponse('address_coin_balance_chart', balanceHistoryMock.chartResponse, { pathParams: { hash: addressHash } });
   const component = await render(<AddressCoinBalance/>, { hooksConfig });
@@ -23,3 +23,19 @@ test('base view +@dark-mode +@mobile', async({ render, page, mockApiResponse })
   await page.mouse.move(240, 100);
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, page, mockApiResponse }) => {
+    await mockApiResponse('address_coin_balance', balanceHistoryMock.baseResponse, { pathParams: { hash: addressHash } });
+    await mockApiResponse('address_coin_balance_chart', balanceHistoryMock.chartResponse, { pathParams: { hash: addressHash } });
+    const component = await render(<AddressCoinBalance/>, { hooksConfig });
+    await page.waitForFunction(() => {
+      return document.querySelector('path[data-name="chart-Balances-small"]')?.getAttribute('opacity') === '1';
+    });
+    await page.mouse.move(100, 100);
+    await page.mouse.move(240, 100);
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/pages/Chart.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, IconButton, Link, Text } from '@chakra-ui/react';
+import { Button, Flex, Link, Text } from '@chakra-ui/react';
 import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -95,10 +95,14 @@ const Chart = () => {
 
   const onIntervalChange = React.useCallback((interval: StatsIntervalIds) => {
     setIntervalState(interval);
-    router.push({
-      pathname: router.pathname,
-      query: { ...router.query, interval },
-    });
+    router.push(
+      {
+        pathname: router.pathname,
+        query: { ...router.query, interval },
+      },
+      undefined,
+      { shallow: true },
+    );
   }, [ setIntervalState, router ]);
 
   const onResolutionChange = React.useCallback((resolution: Resolution) => {
@@ -143,16 +147,7 @@ const Chart = () => {
 
   const isInfoLoading = !info && lineQuery.isPlaceholderData;
 
-  const shareButton = isMobile ? (
-    <IconButton
-      aria-label="share"
-      variant="outline"
-      boxSize={ 8 }
-      size="sm"
-      icon={ <IconSvg name="share" boxSize={ 5 }/> }
-      onClick={ onShare }
-    />
-  ) : (
+  const shareButton = (
     <Button
       leftIcon={ <IconSvg name="share" w={ 4 } h={ 4 }/> }
       colorScheme="blue"
@@ -169,56 +164,20 @@ const Chart = () => {
     </Button>
   );
 
-  const shareAndMenu = (
-    <Flex alignItems="center" ml="auto" gap={ 3 }>
-      { /* TS thinks window.navigator.share can't be undefined, but it can */ }
-      { /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }
-      { (isInBrowser && ((window.navigator.share as any) ?
-        shareButton :
-        (
-          <CopyToClipboard
-            text={ config.app.baseUrl + router.asPath }
-            size={ 5 }
-            type="link"
-            variant="outline"
-            colorScheme="blue"
-            display="flex"
-            borderRadius="8px"
-            width={ 8 }
-            height={ 8 }
-          />
-        )
-      )) }
-      { (hasItems || lineQuery.isPlaceholderData) && (
-        <ChartMenu
-          items={ items }
-          title={ info?.title || '' }
-          isLoading={ lineQuery.isPlaceholderData }
-          chartRef={ ref }
-          resolution={ resolution }
-          zoomRange={ zoomRange }
-          handleZoom={ handleZoom }
-          handleZoomReset={ handleZoomReset }
-        />
-      ) }
-    </Flex>
-  );
-
   return (
     <>
       <PageTitle
         title={ info?.title || lineQuery.data?.info?.title || '' }
         mb={ 3 }
         isLoading={ isInfoLoading }
         backLink={ backLink }
-        afterTitle={ isMobile ? shareAndMenu : undefined }
         secondRow={ info?.description || lineQuery.data?.info?.description }
         withTextAd
       />
       <Flex alignItems="center" justifyContent="space-between">
         <Flex alignItems="center" gap={{ base: 3, lg: 6 }} maxW="100%" overflow="hidden">
           <Flex alignItems="center" gap={ 3 }>
-            <Text>Period</Text>
+            { !isMobile && <Text>Period</Text> }
             <ChartIntervalSelect interval={ interval } onIntervalChange={ onIntervalChange }/>
           </Flex>
           { lineQuery.data?.info?.resolutions && lineQuery.data?.info?.resolutions.length > 1 && (
@@ -243,7 +202,39 @@ const Chart = () => {
             </Link>
           ) }
         </Flex>
-        { !isMobile && shareAndMenu }
+        <Flex alignItems="center" gap={ 3 }>
+          { /* TS thinks window.navigator.share can't be undefined, but it can */ }
+          { /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }
+          { !isMobile && (isInBrowser && ((window.navigator.share as any) ?
+            shareButton :
+            (
+              <CopyToClipboard
+                text={ config.app.baseUrl + router.asPath }
+                size={ 5 }
+                type="link"
+                variant="outline"
+                colorScheme="blue"
+                display="flex"
+                borderRadius="8px"
+                width={ 8 }
+                height={ 8 }
+              />
+            )
+          )) }
+          { (hasItems || lineQuery.isPlaceholderData) && (
+            <ChartMenu
+              items={ items }
+              title={ info?.title || '' }
+              isLoading={ lineQuery.isPlaceholderData }
+              chartRef={ ref }
+              resolution={ resolution }
+              zoomRange={ zoomRange }
+              handleZoom={ handleZoom }
+              handleZoomReset={ handleZoomReset }
+              chartUrl={ isMobile ? window.location.href : undefined }
+            />
+          ) }
+        </Flex>
       </Flex>
       <Flex
         ref={ ref }

ui/shared/chart/ChartMenu.tsx

@@ -14,10 +14,6 @@ import React from 'react';
 import type { TimeChartItem } from './types';
 import type { Resolution } from '@blockscout/stats-types';
 
-import type { Route } from 'nextjs-routes';
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
 import isBrowser from 'lib/isBrowser';
 import saveAsCSV from 'lib/saveAsCSV';
@@ -33,7 +29,7 @@ export type Props = {
   units?: string;
   isLoading: boolean;
   chartRef: React.RefObject<HTMLDivElement>;
-  href?: Route;
+  chartUrl?: string;
   resolution?: Resolution;
   zoomRange?: [ Date, Date ];
   handleZoom: (range: [ Date, Date ]) => void;
@@ -49,7 +45,7 @@ const ChartMenu = ({
   units,
   isLoading,
   chartRef,
-  href,
+  chartUrl,
   resolution,
   zoomRange,
   handleZoom,
@@ -58,7 +54,6 @@ const ChartMenu = ({
   const pngBackgroundColor = useColorModeValue('white', 'black');
   const [ isFullscreen, setIsFullscreen ] = React.useState(false);
 
-  const chartUrl = href ? config.app.baseUrl + route(href) : '';
   const { onCopy } = useClipboard(chartUrl);
 
   const isInBrowser = isBrowser();
@@ -144,7 +139,7 @@ const ChartMenu = ({
           </MenuButton>
         </Skeleton>
         <MenuList>
-          { href && (
+          { chartUrl && (
             <MenuItem
               display="flex"
               alignItems="center"

ui/shared/chart/ChartWidget.tsx

@@ -11,8 +11,9 @@ import React, { useRef } from 'react';
 
 import type { TimeChartItem } from './types';
 
-import type { Route } from 'nextjs-routes';
+import { route, type Route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import IconSvg from 'ui/shared/IconSvg';
 
 import ChartMenu from './ChartMenu';
@@ -133,7 +134,7 @@ const ChartWidget = ({
               items={ items }
               title={ title }
               description={ description }
-              href={ href }
+              chartUrl={ href ? config.app.baseUrl + route(href) : undefined }
               isLoading={ isLoading }
               chartRef={ ref }
               units={ units }