Display token name in title for a token with no symbol (#2716)

* Display token name in title for a token with no symbol

Fixes #2681

* fix test

configs/envs/.env.immutable

@@ -14,10 +14,11 @@ NEXT_PUBLIC_AD_BANNER_PROVIDER=none
 NEXT_PUBLIC_AD_TEXT_PROVIDER=none
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-NEXT_PUBLIC_API_HOST=immutable-mainnet.blockscout.com
+NEXT_PUBLIC_API_HOST=explorer.immutable.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
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swapscout','icon':'swap','dappId':'swapscout'},{'text':'Revokescout','icon':'integration/partial','dappId':'revokescout'},{'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/immutable-mainnet.json
 NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/immutable.json
@@ -44,10 +45,10 @@ NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.immutable.com/
 NEXT_PUBLIC_NETWORK_SHORT_NAME=Immutable
 NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
 NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/immutable.png
-NEXT_PUBLIC_STATS_API_HOST=https://stats-immutable-mainnet.k8s.blockscout.com
+NEXT_PUBLIC_STATS_API_BASE_PATH=/stats-service
+NEXT_PUBLIC_STATS_API_HOST=https://explorer.immutable.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=["miner"]
 NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
-NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'Rarible','collection_url':'https://rarible.com/collection/immutablex/{hash}/items','instance_url':'https://rarible.com/token/immutablex/{hash}:{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/rarible.png'}]
 NEXT_PUBLIC_VIEWS_TOKEN_SCAM_TOGGLE_ENABLED=true
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file

lib/metadata/generate.test.ts

@@ -33,7 +33,7 @@ const TEST_CASES = [
       pathname: '/token/[hash]',
       query: { hash: '0x12345' },
     },
-    apiData: { symbol: 'USDT' },
+    apiData: { symbol_or_name: 'USDT' },
   } as TestCase<'/token/[hash]'>,
 ];
 

lib/metadata/templates/title.ts

@@ -77,8 +77,8 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
 };
 
 const TEMPLATE_MAP_ENHANCED: Partial<Record<Route['pathname'], string>> = {
-  '/token/[hash]': '%network_name% %symbol% token details',
-  '/token/[hash]/instance/[id]': '%network_name% token instance for %symbol%',
+  '/token/[hash]': '%network_name% %symbol_or_name% token details',
+  '/token/[hash]/instance/[id]': '%network_name% token instance for %symbol_or_name%',
   '/apps/[id]': '%network_name% - %app_name%',
   '/address/[hash]': '%network_name% address details for %domain_name%',
   '/stats/[id]': '%title% chart on %network_name%',

lib/metadata/types.ts

@@ -7,8 +7,8 @@ import type { Route } from 'nextjs-routes';
 export type ApiData<Pathname extends Route['pathname']> =
 (
     Pathname extends '/address/[hash]' ? { domain_name: string } :
-    Pathname extends '/token/[hash]' ? TokenInfo :
-    Pathname extends '/token/[hash]/instance/[id]' ? { symbol: string } :
+    Pathname extends '/token/[hash]' ? TokenInfo & { symbol_or_name: string } :
+    Pathname extends '/token/[hash]/instance/[id]' ? { symbol_or_name: string } :
     Pathname extends '/apps/[id]' ? { app_name: string } :
     Pathname extends '/stats/[id]' ? LineChart['info'] :
     never

pages/token/[hash]/index.tsx

@@ -37,8 +37,12 @@ export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = as
         pathParams: { hash: getQueryParamString(ctx.query.hash) },
         timeout: 500,
       });
+      const apiData = tokenData ? {
+        ...tokenData,
+        symbol_or_name: tokenData.symbol ?? tokenData.name ?? '',
+      } : null;
 
-      (await baseResponse.props).apiData = tokenData ?? null;
+      (await baseResponse.props).apiData = apiData;
     }
   }
 

pages/token/[hash]/instance/[id].tsx

@@ -37,8 +37,8 @@ export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = as
         timeout: 1_000,
       });
 
-      (await baseResponse.props).apiData = tokenData && tokenData.symbol ? {
-        symbol: tokenData.symbol,
+      (await baseResponse.props).apiData = tokenData ? {
+        symbol_or_name: tokenData.symbol ?? tokenData.name ?? '',
       } : null;
     }
   }

ui/pages/Token.tsx

@@ -106,7 +106,8 @@ const TokenPageContent = () => {
 
   useEffect(() => {
     if (tokenQuery.data && !tokenQuery.isPlaceholderData && !config.meta.seo.enhancedDataEnabled) {
-      metadata.update({ pathname: '/token/[hash]', query: { hash: tokenQuery.data.address_hash } }, tokenQuery.data);
+      const apiData = { ...tokenQuery.data, symbol_or_name: tokenQuery.data.symbol ?? tokenQuery.data.name ?? '' };
+      metadata.update({ pathname: '/token/[hash]', query: { hash: tokenQuery.data.address_hash } }, apiData);
     }
   }, [ tokenQuery.data, tokenQuery.isPlaceholderData ]);
 

ui/pages/TokenInstance.tsx

@@ -88,7 +88,7 @@ const TokenInstanceContent = () => {
     if (tokenInstanceQuery.data && !tokenInstanceQuery.isPlaceholderData && tokenQuery.data && !tokenQuery.isPlaceholderData) {
       metadata.update(
         { pathname: '/token/[hash]/instance/[id]', query: { hash: tokenQuery.data.address_hash, id: tokenInstanceQuery.data.id } },
-        { symbol: tokenQuery.data.symbol ?? '' },
+        { symbol_or_name: tokenQuery.data.symbol ?? tokenQuery.data.name ?? '' },
       );
     }
   }, [ tokenInstanceQuery.data, tokenInstanceQuery.isPlaceholderData, tokenQuery.data, tokenQuery.isPlaceholderData ]);