feat: support rpc

package.json

@@ -24,8 +24,8 @@
     "@subql/contract-sdk": "0.112.0",
     "@subql/network-clients": "^0.112.1-1",
     "@subql/network-config": "^0.112.0",
-    "@subql/network-query": "0.112.0",
-    "@subql/react-hooks": "^0.112.1-1",
+    "@subql/network-query": "0.112.1-0",
+    "@subql/react-hooks": "^0.112.1-2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/components/DeploymentInfo/DeploymentInfo.tsx

@@ -6,13 +6,14 @@ import { useTranslation } from 'react-i18next';
 import UnsafeWarn from '@components/UnsafeWarn';
 import { useGetIfUnsafeDeployment } from '@hooks/useGetIfUnsafeDeployment';
 import { Spinner, Typography } from '@subql/components';
+import { ProjectType } from '@subql/contract-sdk/types';
 import { Tooltip } from 'antd';
 
 import { useProjectMetadata } from '../../containers';
 import { useAsyncMemo } from '../../hooks';
 import { useDeploymentMetadata } from '../../hooks/useDeploymentMetadata';
 import { ProjectMetadata } from '../../models';
-import { parseError, renderAsync } from '../../utils';
+import { isUndefined, parseError, renderAsync } from '../../utils';
 import Copy from '../Copy';
 import IPFSImage from '../IPFSImage';
 import styles from './DeploymentInfo.module.css';
@@ -21,9 +22,10 @@ type Props = {
   project?: ProjectMetadata;
   deploymentId?: string;
   deploymentVersion?: string;
+  type?: ProjectType;
 };
 
-export const DeploymentInfo: React.FC<Props> = ({ project, deploymentId }) => {
+export const DeploymentInfo: React.FC<Props> = ({ project, deploymentId, type }) => {
   const { t } = useTranslation();
 
   const deploymentMeta = useDeploymentMetadata(deploymentId);
@@ -46,6 +48,15 @@ export const DeploymentInfo: React.FC<Props> = ({ project, deploymentId }) => {
             )}
             {isUnsafe && <UnsafeWarn></UnsafeWarn>}
           </div>
+          {isUndefined(type) ? (
+            ''
+          ) : (
+            <div>
+              <Typography variant="small" className={styles.text}>
+                Type: {type === ProjectType.RPC ? 'RPC Endpoint' : 'Data Indexer'}
+              </Typography>
+            </div>
+          )}
           <div className={project?.name ? '' : styles.deployment}>
             <Typography variant="small" className={styles.text}>
               {versionHeader}

src/components/IndexerDetails/Row.tsx

@@ -125,8 +125,6 @@ const ConnectedRow: React.FC<{
       setProjectMaxTargetHeightInfo(deploymentId, maxTargetHeight);
     }
 
-    console.warn(meta);
-
     return {
       startBlock: meta?.startHeight ?? 0,
       targetBlock: maxTargetHeight,

src/components/ProjectCard/ProjectCard.tsx

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
+import { Manifest } from '@hooks/useGetDeploymentManifest';
 import { Address, Typography } from '@subql/components';
-import { ProjectFieldsFragment } from '@subql/network-query';
+import { ProjectFieldsFragment, ProjectType } from '@subql/network-query';
 import dayjs from 'dayjs';
 
 import { ProjectMetadata } from 'src/models';
@@ -12,7 +13,9 @@ import IPFSImage from '../IPFSImage';
 import styles from './ProjectCard.module.css';
 
 type Props = {
-  project: { metadata: ProjectMetadata | undefined } & Omit<ProjectFieldsFragment, 'metadata'>;
+  project: { metadata: ProjectMetadata | undefined } & Omit<ProjectFieldsFragment, 'metadata'> & {
+      manifest?: Manifest;
+    };
   onClick?: () => void;
 };
 
@@ -40,7 +43,15 @@ const ProjectCard: React.FC<Props> = ({ project, onClick }) => {
         </Typography>
       </div>
 
-      <Address address={project.owner} size="small" />
+      {project.type === ProjectType.SUBQUERY ? (
+        <Address address={project.owner} size="small" />
+      ) : (
+        <Typography variant="small">
+          {project.manifest?.rpcFamily?.[0]}
+          {project.manifest?.rpcFamily?.[0] && project.manifest?.nodeType && ' - '}
+          {project.manifest?.nodeType}
+        </Typography>
+      )}
 
       <div className={styles.line}></div>
       <div className="flex" style={{ marginBottom: 12 }}>

src/components/ProjectHeader/ProjectHeader.module.less

@@ -14,6 +14,7 @@
   justify-content: center;
   flex-direction: column;
   padding-left: 32px;
+  flex: 1;
 }
 
 .upper {

src/components/ProjectHeader/ProjectHeader.tsx

@@ -4,8 +4,10 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import UnsafeWarn from '@components/UnsafeWarn';
+import { Manifest } from '@hooks/useGetDeploymentManifest';
 import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
 import { Address, Typography } from '@subql/components';
+import { ProjectType } from '@subql/network-query';
 import { Button } from 'antd';
 import dayjs from 'dayjs';
 
@@ -20,9 +22,17 @@ type Props = {
   currentVersion?: string;
   onChangeVersion?: (key: string) => void;
   isUnsafeDeployment?: boolean;
+  manifest?: Manifest;
 };
 
-const ProjectHeader: React.FC<Props> = ({ project, versions, currentVersion, isUnsafeDeployment, onChangeVersion }) => {
+const ProjectHeader: React.FC<Props> = ({
+  project,
+  versions,
+  currentVersion,
+  isUnsafeDeployment,
+  onChangeVersion,
+  manifest,
+}) => {
   const { t } = useTranslation();
 
   const createdAtStr = React.useMemo(() => dayjs(project.createdTimestamp).fromNow(), [project]);
@@ -60,6 +70,10 @@ const ProjectHeader: React.FC<Props> = ({ project, versions, currentVersion, isU
             </Typography>
             {isUnsafeDeployment && <UnsafeWarn></UnsafeWarn>}
             <VersionDropdown />
+            <span style={{ flex: 1 }}></span>
+            <Button type="primary" shape="round" size="large">
+              Get RPC Endpoint
+            </Button>
           </div>
           <Address address={project.owner} size="small" />
 
@@ -75,6 +89,12 @@ const ProjectHeader: React.FC<Props> = ({ project, versions, currentVersion, isU
           </div>
         </div>
         <div className={styles.lower}>
+          {project.type === ProjectType.RPC && manifest?.rpcFamily ? (
+            <Detail label="Network" value={manifest?.rpcFamily[0]}></Detail>
+          ) : (
+            ''
+          )}
+          <Detail label="Type" value={project.type === ProjectType.RPC ? 'RPC Endpoint' : 'Data Indexer'}></Detail>
           {currentVersion && <Detail label={t('projectHeader.deploymentId')} value={currentVersion} canCopy={true} />}
           <Detail label={t('projectOverview.updatedAt')} value={updatedAtStr} className={styles.column} />
           <Detail label={t('projectOverview.createdAt')} value={createdAtStr} className={styles.column} />

src/components/ProjectOverview/ProjectOverview.module.less

@@ -15,6 +15,11 @@
   }
 }
 
+.line {
+  display: flex;
+  gap: 8px;
+}
+
 .left {
   display: flex;
   flex-direction: row;

src/components/ProjectOverview/ProjectOverview.tsx

@@ -7,9 +7,11 @@ import { BsGithub, BsGlobe } from 'react-icons/bs';
 import Expand from '@components/Expand/Expand';
 import NewCard from '@components/NewCard';
 import { useRouteQuery } from '@hooks';
+import { Manifest } from '@hooks/useGetDeploymentManifest';
 import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
 import { BalanceLayout } from '@pages/dashboard';
 import { Markdown, Typography } from '@subql/components';
+import { ProjectType } from '@subql/network-query';
 import { formatSQT, useGetOfferCountByDeploymentIdLazyQuery } from '@subql/react-hooks';
 
 import { ProjectMetadata } from '../../models';
@@ -19,6 +21,7 @@ type Props = {
   project: ProjectDetailsQuery;
   metadata: ProjectMetadata;
   deploymentDescription?: string;
+  manifest?: Manifest;
 };
 
 export const ExternalLink: React.FC<{ link?: string; icon: 'globe' | 'github' }> = ({ link, icon }) => {
@@ -34,7 +37,7 @@ export const ExternalLink: React.FC<{ link?: string; icon: 'globe' | 'github' }>
   );
 };
 
-const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescription }) => {
+const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescription, manifest }) => {
   const { t } = useTranslation();
   const query = useRouteQuery();
 
@@ -82,6 +85,49 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
             </Expand>
           </div>
         </div>
+
+        {project.type === ProjectType.RPC && (
+          <>
+            <div style={{ height: 1, width: '100%', background: 'var(--sq-gray300)', marginBottom: 16 }}></div>
+            <div className={styles.column} style={{ gap: 8 }}>
+              <Typography variant="medium" weight={600}>
+                RPC Endpoint Details
+              </Typography>
+              {manifest?.chain?.chainId && (
+                <div className={styles.line}>
+                  <Typography variant="medium" type="secondary">
+                    Chain ID:{' '}
+                  </Typography>
+                  <Typography variant="medium">{manifest?.chain?.chainId}</Typography>
+                </div>
+              )}
+              {manifest?.rpcFamily && (
+                <div className={styles.line}>
+                  <Typography variant="medium" type="secondary">
+                    Family:{' '}
+                  </Typography>
+                  <Typography variant="medium">{manifest?.rpcFamily?.join(' ')}</Typography>
+                </div>
+              )}
+              {manifest?.client?.name && (
+                <div className={styles.line}>
+                  <Typography variant="medium" type="secondary">
+                    Client:{' '}
+                  </Typography>
+                  <Typography variant="medium">{manifest?.client?.name}</Typography>
+                </div>
+              )}
+              {manifest?.nodeType && (
+                <div className={styles.line}>
+                  <Typography variant="medium" type="secondary">
+                    Node type:{' '}
+                  </Typography>
+                  <Typography variant="medium">{manifest?.nodeType}</Typography>
+                </div>
+              )}
+            </div>
+          </>
+        )}
       </div>
 
       <div style={{ marginLeft: 48, width: '100%' }}>
@@ -95,7 +141,7 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
           <div className="col-flex">
             <div className="flex" style={{ justifyContent: 'space-between' }}>
               <Typography variant="small" type="secondary">
-                Total Indexers
+                Total {project.type === ProjectType.RPC ? 'RPC Providers' : 'Indexers'}
               </Typography>
               <Typography variant="small">
                 {project.deployments.nodes.find((i) => i?.id === deploymentId)?.indexers.totalCount || 0}

src/hooks/useGetDeploymentManifest.tsx

@@ -0,0 +1,51 @@
+// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useState } from 'react';
+import { useIPFS } from '@containers';
+import yaml from 'js-yaml';
+
+export type Manifest = {
+  nodeType?: string;
+  network?: string;
+  rpcFamily?: string[];
+  client?: {
+    name: string;
+  };
+  chain?: {
+    chainId: string;
+  };
+};
+
+export const useGetDeploymentManifest = (currentDeploymentId?: string) => {
+  const { catSingle } = useIPFS();
+
+  const [manifest, setManifest] = useState<Manifest>();
+
+  const getManifest = async (deploymentId: string) => {
+    try {
+      const res = await catSingle(deploymentId);
+
+      const result = Buffer.from(res).toString('utf8');
+
+      return yaml.load(result) as Manifest;
+    } catch (e) {
+      return {};
+    }
+  };
+
+  useEffect(() => {
+    const inner = async () => {
+      if (currentDeploymentId) {
+        const result = await getManifest(currentDeploymentId);
+        setManifest(result);
+      }
+    };
+    inner();
+  }, [currentDeploymentId]);
+
+  return {
+    getManifest,
+    manifest,
+  };
+};