Merge pull request #878 from subquery/feature-explorer-card-network-val

feat: enhance ProjectCard to display network type and update useProjectList for manifest retrieval

Author: icezohu

.gitignore

@@ -32,4 +32,7 @@ src/globalTypes.ts
 .env
 dist
 
-stats.html
+stats.html
+
+.yarn
+.data

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

src/components/ProjectCard/ProjectCard.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
-import { IndexerName } from '@components/IndexerDetails/IndexerName';
 import { Manifest } from '@hooks/useGetDeploymentManifest';
 import { Address, Typography } from '@subql/components';
 import { ProjectFieldsFragment, ProjectType } from '@subql/network-query';
@@ -12,6 +11,7 @@ import BigNumber from 'bignumber.js';
 import dayjs from 'dayjs';
 import { toSvg } from 'jdenticon';
 
+import { getNetworkNameByChainId } from 'src/const/const';
 import { ProjectMetadata } from 'src/models';
 
 import IPFSImage from '../IPFSImage';
@@ -26,6 +26,8 @@ type Props = {
 };
 
 const { PROJECT_NAV } = ROUTES;
+const MAX_NETWORK_NAME_LENGTH = 28;
+const MAX_CHAIN_ID_LENGTH = 18;
 
 const ProjectCard: React.FC<Props> = ({ project, href, onClick }) => {
   const ipfsImage = React.useMemo(() => {
@@ -49,6 +51,41 @@ const ProjectCard: React.FC<Props> = ({ project, href, onClick }) => {
     );
   }, [project?.deployments?.nodes]);
 
+  const networkVal = React.useMemo(() => {
+    if (project.type === ProjectType.RPC && project.manifest?.rpcFamily) {
+      return project.manifest.rpcFamily[0];
+    }
+
+    const chainId =
+      project.type === ProjectType.SUBQUERY
+        ? project.manifest?.network?.chainId
+        : project.manifest?.dataSources?.[0]?.network;
+    if (!chainId) return '-';
+
+    return (
+      getNetworkNameByChainId(chainId, {
+        projectName: project.metadata?.name,
+        projectId: project.id,
+        source: 'ProjectCard',
+      }) || `Chain ID ${chainId}`
+    );
+  }, [project.type, project.manifest, project.id, project.metadata?.name]);
+
+  const isChainIdFallback = React.useMemo(() => {
+    return `${networkVal || '-'}`.startsWith('Chain ID ');
+  }, [networkVal]);
+
+  const chainIdDisplayVal = React.useMemo(() => {
+    if (!isChainIdFallback) return '';
+    const val = `${networkVal || '-'}`.replace('Chain ID ', '');
+    return val.length > MAX_CHAIN_ID_LENGTH ? `${val.slice(0, MAX_CHAIN_ID_LENGTH)}...` : val;
+  }, [isChainIdFallback, networkVal]);
+
+  const networkDisplayVal = React.useMemo(() => {
+    const val = `${networkVal || '-'}`;
+    return val.length > MAX_NETWORK_NAME_LENGTH ? `${val.slice(0, MAX_NETWORK_NAME_LENGTH)}...` : val;
+  }, [networkVal]);
+
   return (
     <a
       href={href ? href : `${PROJECT_NAV}/${project.id}`}
@@ -76,7 +113,20 @@ const ProjectCard: React.FC<Props> = ({ project, href, onClick }) => {
       </div>
 
       {project.type === ProjectType.SUBQUERY || project.type === ProjectType.SUBGRAPH ? (
-        <IndexerName address={project.owner} size="tiny" />
+        <div className="flex">
+          {isChainIdFallback ? (
+            <>
+              <Typography variant="small" type="secondary">
+                Chain ID
+              </Typography>
+              <Typography variant="small" style={{ marginLeft: 6 }}>
+                {chainIdDisplayVal}
+              </Typography>
+            </>
+          ) : (
+            <Typography variant="small">{networkDisplayVal}</Typography>
+          )}
+        </div>
       ) : (
         <Typography variant="small" style={{ textTransform: 'uppercase' }}>
           {project.manifest?.rpcFamily?.[0]}

src/components/ProjectHeader/ProjectHeader.tsx

@@ -22,7 +22,7 @@ import clsx from 'clsx';
 import dayjs from 'dayjs';
 import { toSvg } from 'jdenticon';
 
-import { ETH_TYPE_DICTION, NETWORK_TYPE_DICTION } from 'src/const/const';
+import { getNetworkNameByChainId } from 'src/const/const';
 import { useProjectStore } from 'src/stores/project';
 
 import Detail from '../Detail';
@@ -104,11 +104,14 @@ const ProjectHeader: React.FC<Props> = ({
       project.type === ProjectType.SUBQUERY ? manifest?.network?.chainId : manifest?.dataSources?.[0]?.network;
     if (!chainId) return '-';
 
-    const polkadotName = NETWORK_TYPE_DICTION[chainId];
-    const ethName = ETH_TYPE_DICTION[chainId];
-
-    return polkadotName || ethName || chainId;
-  }, [project.type, manifest]);
+    return (
+      getNetworkNameByChainId(chainId, {
+        projectName: project.metadata?.name,
+        projectId: project.id,
+        source: 'ProjectHeader',
+      }) || chainId
+    );
+  }, [project.type, manifest, project.id, project.metadata?.name]);
 
   const isOnwer = React.useMemo(() => account === project.owner, [project.owner, account]);
 

src/const/const.ts

@@ -31,6 +31,22 @@ export const NETWORK_TYPE_DICTION: { [key in string]: string } = {
   '0xa85cfb9b9fd4d622a5b28289a02347af987d8f73fa3108450e2b4a11c1ce5755': 'Basilisk',
   '0xaa3876c1dc8a1afcc2e9a685a49ff7704cfd36ad8c90bf2702b9d1b00cc40011': 'Altair',
   '0x1bb969d85965e4bb5a651abbedf21a54b6b31a21f66b5401cc3f1e286268d736': 'Phala',
+  '0x4a12be580bb959937a1c7a61d5cf24428ed67fa571974b4007645d1886e7c89f': 'Subsocial',
+  '4221332d34e1694168c2a0c0b3fd0f273809612cb13d000d5c2e00e85f50f796': 'Concordium Testnet',
+  '9dd9ca4d19e9393877d2c44b70f89acbfc0883c2243e5eeaecc0d1cd0503f478': 'Concordium Mainnet',
+  '5eykt4UsFv8P8NJdTREpY1vzqKqZKvdpKuc147dw2N9d': 'Solana Mainnet',
+  EtWTRABZaYq6iMfeYKouRu166VU2xqa1wcaWoxPkrZBG: 'Solana Devnet',
+  '4uhcVJyU9pJkvQyS88uRDiswHXSCkY3zQawwpjk2NsNY': 'Solana Testnet',
+  'fetchhub-4': 'Fetch.ai Mainnet',
+  'juno-1': 'Juno Mainnet',
+  'near-testnet': 'NEAR Testnet',
+  mainnet: 'NEAR Mainnet',
+  'axelar-dojo-1': 'Axelar Dojo',
+  'telos-testnet': 'Telos Testnet',
+  'coti-mainnet': 'COTI Mainnet',
+  flare: 'Flare',
+  'Public Global Stellar Network ; September 2015': 'Stellar Mainnet',
+  'Test SDF Network ; September 2015': 'Stellar Testnet',
 };
 
 export const ETH_TYPE_DICTION: { [key in string]: string } = {
@@ -971,4 +987,57 @@ export const ETH_TYPE_DICTION: { [key in string]: string } = {
   '666301171999': 'PDC Mainnet',
   '6022140761023': 'Molereum Network',
   '2716446429837000': 'DCHAIN',
+  '97': 'BNB Smart Chain Testnet',
+  '232': 'Lens',
+  '999': 'HyperEVM',
+  '2741': 'Abstract',
+  '4158': 'CrossFi Mainnet',
+  '6900': 'Nibiru cataclysm-1',
+  '48900': 'Zircuit Mainnet',
+  '102031': 'Creditcoin Testnet',
+  '421614': 'Arbitrum Sepolia',
+  '84532': 'Base Sepolia',
+  '11155111': 'Ethereum Sepolia',
+  '65000000': 'Autonity Mainnet',
+  '10200': 'Gnosis Chiado Testnet',
+  gnosis: 'Gnosis',
+};
+
+const missingNetworkChainIdSet = new Set<string>();
+const missingNetworkChainIdWithProjectSet = new Set<string>();
+
+type NetworkNameContext = {
+  projectName?: string;
+  projectId?: string;
+  source?: string;
+};
+
+export const getNetworkNameByChainId = (chainId?: string, context?: NetworkNameContext): string | undefined => {
+  if (!chainId) return undefined;
+
+  const networkName = NETWORK_TYPE_DICTION[chainId] || ETH_TYPE_DICTION[chainId];
+
+  // Temporary debug: collect unmapped chain IDs while browsing pages locally.
+  if (!networkName && import.meta.env.DEV) {
+    const projectName = context?.projectName || 'unknown';
+    const projectId = context?.projectId || 'unknown';
+    const source = context?.source || 'unknown';
+    const missingKey = `${chainId}::${projectId}::${source}`;
+
+    if (missingNetworkChainIdWithProjectSet.has(missingKey)) {
+      return networkName;
+    }
+
+    missingNetworkChainIdWithProjectSet.add(missingKey);
+    missingNetworkChainIdSet.add(chainId);
+
+    (globalThis as { __missingNetworkChainIds?: string[] }).__missingNetworkChainIds =
+      Array.from(missingNetworkChainIdSet);
+
+    console.warn(
+      `[NetworkMap] Missing chain id mapping: ${chainId} | project: ${projectName} (${projectId}) | source: ${source}`,
+    );
+  }
+
+  return networkName;
 };

src/hooks/useProjectList.tsx

@@ -26,7 +26,7 @@ const ProjectItem: React.FC<{
   onClick?: () => void;
 }> = ({ project, makeRedirectHref, onClick }) => {
   const { getMetadataFromCid } = useProjectMetadata();
-  const { manifest } = useGetDeploymentManifest(project.type === ProjectType.RPC ? project.deploymentId : '');
+  const { manifest } = useGetDeploymentManifest(project.deploymentId);
 
   const { data: metadata } = useAsyncMemo(() => getMetadataFromCid(project.metadata), [project]);