Stats section updates

configs/envs/.env.eth_sepolia

@@ -14,7 +14,7 @@ NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height
 NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-NEXT_PUBLIC_API_HOST=eth-sepolia.blockscout.com
+NEXT_PUBLIC_API_HOST=eth-sepolia.k8s-dev.blockscout.com
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 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
@@ -59,7 +59,7 @@ NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-c
 NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://sepolia.drpc.org?ref=559183','text':'Public RPC'}]
 NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-sepolia.safe.global
 NEXT_PUBLIC_SENTRY_ENABLE_TRACING=true
-NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s.blockscout.com
+NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s-dev.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=noves
 NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com

lib/hooks/useNavItems.tsx

@@ -248,7 +248,7 @@ export default function useNavItems(): ReturnType {
         text: 'Charts & stats',
         nextRoute: { pathname: '/stats' as const },
         icon: 'stats',
-        isActive: pathname === '/stats',
+        isActive: pathname.startsWith('/stats'),
       } : null,
       apiNavItems.length > 0 && {
         text: 'API',

lib/metadata/generate.ts

@@ -20,7 +20,7 @@ export default function generate<Pathname extends Route['pathname']>(route: Rout
   };
 
   const title = compileValue(templates.title.make(route.pathname, Boolean(apiData)), params);
-  const description = compileValue(templates.description.make(route.pathname), params);
+  const description = compileValue(templates.description.make(route.pathname, Boolean(apiData)), params);
 
   const pageOgType = getPageOgType(route.pathname);
 

lib/metadata/getPageOgType.ts

@@ -23,6 +23,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/apps': 'Root page',
   '/apps/[id]': 'Regular page',
   '/stats': 'Root page',
+  '/stats/[id]': 'Regular page',
   '/api-docs': 'Regular page',
   '/graphiql': 'Regular page',
   '/search-results': 'Regular page',

lib/metadata/templates/description.ts

@@ -27,6 +27,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/apps': DEFAULT_TEMPLATE,
   '/apps/[id]': DEFAULT_TEMPLATE,
   '/stats': DEFAULT_TEMPLATE,
+  '/stats/[id]': DEFAULT_TEMPLATE,
   '/api-docs': DEFAULT_TEMPLATE,
   '/graphiql': DEFAULT_TEMPLATE,
   '/search-results': DEFAULT_TEMPLATE,
@@ -71,8 +72,10 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/auth/unverified-email': DEFAULT_TEMPLATE,
 };
 
-export function make(pathname: Route['pathname']) {
-  const template = TEMPLATE_MAP[pathname];
+const TEMPLATE_MAP_ENHANCED: Partial<Record<Route['pathname'], string>> = {
+  '/stats/[id]': '%description%',
+};
 
-  return template ?? '';
+export function make(pathname: Route['pathname'], isEnriched = false) {
+  return (isEnriched ? TEMPLATE_MAP_ENHANCED[pathname] : undefined) ?? TEMPLATE_MAP[pathname] ?? '';
 }

lib/metadata/templates/title.ts

@@ -23,6 +23,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/apps': '%network_name% DApps - Explore top apps',
   '/apps/[id]': '%network_name% marketplace app',
   '/stats': '%network_name% stats - %network_name% network insights',
+  '/stats/[id]': '%network_name% stats - %id% chart',
   '/api-docs': '%network_name% API docs - %network_name% developer tools',
   '/graphiql': 'GraphQL for %network_name% - %network_name% data query',
   '/search-results': '%network_name% search result for %q%',
@@ -72,6 +73,7 @@ const TEMPLATE_MAP_ENHANCED: Partial<Record<Route['pathname'], string>> = {
   '/token/[hash]/instance/[id]': '%network_name% token instance for %symbol%',
   '/apps/[id]': '%network_name% - %app_name%',
   '/address/[hash]': '%network_name% address details for %domain_name%',
+  '/stats/[id]': '%title% chart on %network_name%',
 };
 
 export function make(pathname: Route['pathname'], isEnriched = false) {

lib/metadata/types.ts

@@ -1,3 +1,4 @@
+import type { LineChart } from '@blockscout/stats-types';
 import type { TokenInfo } from 'types/api/token';
 
 import type { Route } from 'nextjs-routes';
@@ -9,6 +10,7 @@ export type ApiData<Pathname extends Route['pathname']> =
     Pathname extends '/token/[hash]' ? TokenInfo :
     Pathname extends '/token/[hash]/instance/[id]' ? { symbol: string } :
     Pathname extends '/apps/[id]' ? { app_name: string } :
+    Pathname extends '/stats/[id]' ? LineChart['info'] :
     never
 ) | null;
 

lib/mixpanel/getPageType.ts

@@ -21,6 +21,7 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/apps': 'DApps',
   '/apps/[id]': 'DApp',
   '/stats': 'Stats',
+  '/stats/[id]': 'Stats chart',
   '/api-docs': 'REST API',
   '/graphiql': 'GraphQL',
   '/search-results': 'Search results',

lib/mixpanel/utils.ts

@@ -116,6 +116,9 @@ Type extends EventTypes.PAGE_WIDGET ? (
     'Type': 'Address tag';
     'Info': string;
     'URL': string;
+  } | {
+    'Type': 'Share chart';
+    'Info': string;
   }
 ) :
 Type extends EventTypes.TX_INTERPRETATION_INTERACTION ? {

mocks/stats/line.ts

@@ -4,158 +4,195 @@ export const averageGasPrice: stats.LineChart = {
   chart: [
     {
       date: '2023-12-22',
+      date_to: '2023-12-22',
       value: '37.7804422597599',
       is_approximate: false,
     },
     {
       date: '2023-12-23',
+      date_to: '2023-12-23',
       value: '25.84889883009387',
       is_approximate: false,
     },
     {
       date: '2023-12-24',
+      date_to: '2023-12-24',
       value: '25.818463227198574',
       is_approximate: false,
     },
     {
       date: '2023-12-25',
+      date_to: '2023-12-25',
       value: '26.045513050051298',
       is_approximate: false,
     },
     {
       date: '2023-12-26',
+      date_to: '2023-12-26',
       value: '21.42600692652399',
       is_approximate: false,
     },
     {
       date: '2023-12-27',
+      date_to: '2023-12-27',
       value: '31.066730409846656',
       is_approximate: false,
     },
     {
       date: '2023-12-28',
+      date_to: '2023-12-28',
       value: '33.63955781902089',
       is_approximate: false,
     },
     {
       date: '2023-12-29',
+      date_to: '2023-12-29',
       value: '28.064736756058384',
       is_approximate: false,
     },
     {
       date: '2023-12-30',
+      date_to: '2023-12-30',
       value: '23.074500869678175',
       is_approximate: false,
     },
     {
       date: '2023-12-31',
+      date_to: '2023-12-31',
       value: '17.651005734615133',
       is_approximate: false,
     },
     {
       date: '2024-01-01',
+      date_to: '2023-01-01',
       value: '14.906085174476441',
       is_approximate: false,
     },
     {
       date: '2024-01-02',
+      date_to: '2023-01-02',
       value: '22.28459059038656',
       is_approximate: false,
     },
     {
       date: '2024-01-03',
+      date_to: '2023-01-03',
       value: '39.8311646806592',
       is_approximate: false,
     },
     {
       date: '2024-01-04',
+      date_to: '2023-01-04',
       value: '26.09989322256083',
       is_approximate: false,
     },
     {
       date: '2024-01-05',
+      date_to: '2023-01-05',
       value: '22.821996688111998',
       is_approximate: false,
     },
     {
       date: '2024-01-06',
+      date_to: '2023-01-06',
       value: '20.32680041262083',
       is_approximate: false,
     },
     {
       date: '2024-01-07',
+      date_to: '2023-01-07',
       value: '32.535045831809704',
       is_approximate: false,
     },
     {
       date: '2024-01-08',
+      date_to: '2023-01-08',
       value: '27.443477102139482',
       is_approximate: false,
     },
     {
       date: '2024-01-09',
+      date_to: '2023-01-09',
       value: '20.7911332558055',
       is_approximate: false,
     },
     {
       date: '2024-01-10',
+      date_to: '2023-01-10',
       value: '42.10740192523919',
       is_approximate: false,
     },
     {
       date: '2024-01-11',
+      date_to: '2023-01-11',
       value: '35.75215680343582',
       is_approximate: false,
     },
     {
       date: '2024-01-12',
+      date_to: '2023-01-12',
       value: '27.430414798093253',
       is_approximate: false,
     },
     {
       date: '2024-01-13',
+      date_to: '2023-01-13',
       value: '20.170934096589875',
       is_approximate: false,
     },
     {
       date: '2024-01-14',
+      date_to: '2023-01-14',
       value: '38.79660984371034',
       is_approximate: false,
     },
     {
       date: '2024-01-15',
+      date_to: '2023-01-15',
       value: '26.140740484554204',
       is_approximate: false,
     },
     {
       date: '2024-01-16',
+      date_to: '2023-01-16',
       value: '36.708543184194156',
       is_approximate: false,
     },
     {
       date: '2024-01-17',
+      date_to: '2023-01-17',
       value: '40.325438794298876',
       is_approximate: false,
     },
     {
       date: '2024-01-18',
+      date_to: '2023-01-18',
       value: '37.55145309930694',
       is_approximate: false,
     },
     {
       date: '2024-01-19',
+      date_to: '2023-01-19',
       value: '33.271450114434664',
       is_approximate: false,
     },
     {
       date: '2024-01-20',
+      date_to: '2023-01-20',
       value: '19.303304377685638',
       is_approximate: false,
     },
     {
       date: '2024-01-21',
+      date_to: '2023-01-21',
       value: '14.375908594704976',
       is_approximate: false,
     },
   ],
+  info: {
+    title: 'Chart title',
+    description: 'Chart description',
+    id: 'chart',
+    resolutions: [ 'DAY', 'MONTH' ],
+  },
 };