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

.gitignore

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

.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 { ETH_TYPE_DICTION, NETWORK_TYPE_DICTION } 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,38 @@ 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 '-';
+
+    const polkadotName = NETWORK_TYPE_DICTION[chainId];
+    const ethName = ETH_TYPE_DICTION[chainId];
+
+    return polkadotName || ethName || `Chain ID ${chainId}`;
+  }, [project.type, project.manifest]);
+
+  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 +110,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/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]);