Merge pull request #645 from subquery/fix/change-router

fix: router, metadata, project render

package.json

@@ -20,7 +20,7 @@
     "@rainbow-me/rainbowkit": "^1.2.0",
     "@sentry/react": "^7.57.0",
     "@subql/apollo-links": "^1.3.0",
-    "@subql/components": "1.0.3-27",
+    "@subql/components": "1.0.3-28",
     "@subql/contract-sdk": "0.115.0",
     "@subql/network-clients": "^0.114.0",
     "@subql/network-config": "^0.114.1-0",
@@ -80,16 +80,16 @@
     "zustand": "^4.1.5"
   },
   "devDependencies": {
-    "@types/node": "^12.0.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "18",
     "@types/crypto-js": "^4.1.1",
     "@types/ethereum-checksum-address": "^0.0.0",
     "@types/js-yaml": "^4.0.3",
     "@types/lodash-es": "^4.17.7",
     "@types/lru-cache": "^5.1.1",
     "@types/moment-duration-format": "^2.2.3",
+    "@types/node": "^12.0.0",
     "@types/ramda": "^0.27.50",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "18",
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-modal": "^3.13.1",
     "@types/react-router": "^5.1.16",
@@ -103,14 +103,14 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^7.0.2",
     "less": "^4.1.3",
     "lint-staged": ">=10",
     "node-libs-browser": "^2.2.1",
     "prettier": "^2.4.1",
     "rollup-plugin-visualizer": "^5.9.2",
-    "typescript-plugin-css-modules": "^3.4.0",
-    "eslint-plugin-simple-import-sort": "^10.0.0"
+    "typescript-plugin-css-modules": "^3.4.0"
   },
   "eslintConfig": {
     "extends": [

src/App.css

@@ -28,3 +28,7 @@
   display: flex;
   justify-content: center;
 }
+
+p {
+  margin-bottom: 0;
+}

src/components/ProjectDeployments/ProjectDeployments.tsx

@@ -146,6 +146,7 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDe
           },
         ]}
         dataSource={deployments}
+        rowKey={(record) => record.deploymentId}
       ></Table>
     </>
   );

src/components/ProjectOverview/ProjectOverview.tsx

@@ -76,7 +76,7 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
         </div>
         <div style={{ height: 1, width: '100%', background: 'var(--sq-gray300)', marginBottom: 16 }}></div>
         <div className={styles.column}>
-          <Typography variant="medium" weight={600}>
+          <Typography variant="h6" weight={600}>
             {t('projectOverview.deploymentDescription')}
           </Typography>
           <div style={{ width: 670, marginTop: 8 }}>
@@ -90,7 +90,7 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
           <>
             <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}>
+              <Typography variant="h6" weight={600}>
                 RPC Endpoint Details
               </Typography>
               {manifest?.chain?.chainId && (

src/hooks/useCreateProject.tsx

@@ -3,11 +3,12 @@
 
 import * as React from 'react';
 import { BigNumberish } from '@ethersproject/bignumber';
+import { cloneDeep } from 'lodash-es';
 
 import { useIPFS, useProjectMetadata, useProjectRegistry } from '../containers';
 import { FormCreateProjectMetadata, ProjectMetadata, ProjectType } from '../models';
 
-type P = FormCreateProjectMetadata & { versionDescription: string; type: ProjectType };
+type P = FormCreateProjectMetadata & { versionDescription: string; type?: ProjectType };
 
 export function useCreateProject(): (params: P) => Promise<BigNumberish> {
   const { uploadMetadata, uploadVersionMetadata } = useProjectMetadata();
@@ -29,7 +30,12 @@ export function useCreateProject(): (params: P) => Promise<BigNumberish> {
         description: project.versionDescription,
       });
 
-      const metadata = await uploadMetadata(project as ProjectMetadata);
+      // type expect fetch from network project.
+      // make sure metadata don't upload type field
+      const copyPayload = cloneDeep(project);
+      delete copyPayload.type;
+      const metadata = await uploadMetadata(copyPayload as ProjectMetadata);
+
       const tx = await registerProject(project.type as ProjectType, metadata, project.deploymentId, versionCid);
       const receipt = await tx.wait(1);
       const event = receipt.events?.[0];

src/hooks/useProjectList.tsx

@@ -5,7 +5,7 @@ import React, { useMemo, useState } from 'react';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
 import { ProjectCard } from '@components';
 import { useProjectMetadata } from '@containers';
-import { PublishNewProjectModal } from '@pages/studio/Home/Home';
+import { PublishNewProjectModal } from '@pages/projects/Home/Home';
 import { SubqlCheckbox } from '@subql/components';
 import { ProjectFieldsFragment, ProjectsOrderBy, ProjectType } from '@subql/network-query';
 import { useAsyncMemo, useGetProjectLazyQuery, useGetProjectsLazyQuery } from '@subql/react-hooks';
@@ -224,6 +224,8 @@ export const useProjectList = (props: UseProjectListProps = {}) => {
             onChange={async (val) => {
               setFilterProjectType(val.target.value);
               setFilterCategories([]);
+              setProjects([]);
+              setTotal(10);
               const res = await loadMore({
                 refresh: true,
                 searchParams: {
@@ -264,6 +266,8 @@ export const useProjectList = (props: UseProjectListProps = {}) => {
               onChange={async (val) => {
                 setFilterCategories(val as string[]);
                 setProjects([]);
+                setTotal(10);
+
                 const res = await loadMore({
                   refresh: true,
                   searchParams: {

src/pages/studio/Create/Create.tsx → src/pages/projects/Create/Create.tsx

@@ -15,7 +15,7 @@ import { t } from 'i18next';
 import { FTextInput, ImageInput } from '../../../components';
 import { useCreateProject, useProject, useRouteQuery, useUpdateProjectMetadata } from '../../../hooks';
 import { FormCreateProjectMetadata, newDeploymentSchema, projectMetadataSchema, ProjectType } from '../../../models';
-import { categoriesOptions, parseError, ROUTES } from '../../../utils';
+import { categoriesOptions, parseError, ROUTES, rpcCategoriesOptions } from '../../../utils';
 import { ProjectDeploymentsDetail } from '../Project/Project';
 import styles from './Create.module.less';
 
@@ -45,7 +45,6 @@ const Create: React.FC = () => {
             image: project.image,
             version: project.version,
             versionDescription: project.versionDescription,
-            type: project.type,
             categories: project.categories,
           };
           await updateMetadata(payload);
@@ -210,7 +209,7 @@ const Create: React.FC = () => {
                       return (
                         <div className={styles.checkbox}>
                           <SubqlCheckbox.Group
-                            options={categoriesOptions}
+                            options={[...categoriesOptions]}
                             value={arrayHelper.form.values.categories}
                             onChange={(e) => {
                               if (e.length > 2) return;
@@ -222,31 +221,33 @@ const Create: React.FC = () => {
                       );
                     }}
                   ></FieldArray>
-
-                  <Typography>Project Type</Typography>
-                  <Field name="type">
-                    {({
-                      field,
-                      form,
-                    }: {
-                      field: { name: string; value: string };
-                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                      form: { setFieldValue: (field: string, val: any) => void };
-                    }) => {
-                      return (
-                        <Radio.Group
-                          value={field.value}
-                          onChange={(val) => {
-                            form.setFieldValue(field.name, val.target.value);
-                          }}
-                          disabled={true}
-                        >
-                          <Radio value={ProjectType.SUBQUERY}>SubQuery</Radio>
-                          <Radio value={ProjectType.RPC}>RPC</Radio>
-                        </Radio.Group>
-                      );
-                    }}
-                  </Field>
+                  {/* TODO: now user forbidden publish RPC */}
+                  <div style={{ display: 'none' }}>
+                    <Typography>Project Type</Typography>
+                    <Field name="type">
+                      {({
+                        field,
+                        form,
+                      }: {
+                        field: { name: string; value: string };
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        form: { setFieldValue: (field: string, val: any) => void };
+                      }) => {
+                        return (
+                          <Radio.Group
+                            value={field.value}
+                            onChange={(val) => {
+                              form.setFieldValue(field.name, val.target.value);
+                            }}
+                            disabled={true}
+                          >
+                            <Radio value={ProjectType.SUBQUERY}>SubQuery</Radio>
+                            <Radio value={ProjectType.RPC}>RPC</Radio>
+                          </Radio.Group>
+                        );
+                      }}
+                    </Field>
+                  </div>
                   <FTextInput label={t('studio.create.websiteUrl')} id="websiteUrl" />
                   <FTextInput label={t('studio.create.codeUrl')} id="codeUrl" />
                   {isEdit ? (

src/pages/studio/Project/Project.tsx → src/pages/projects/Project/Project.tsx

@@ -135,7 +135,7 @@ const Project: React.FC = () => {
       }
 
       if (project.owner !== account) {
-        navigate('/studio');
+        navigate('/projects');
       }
 
       return (
@@ -154,7 +154,7 @@ const Project: React.FC = () => {
                     </Typography>
                   ),
                   onClick: () => {
-                    navigate('/studio');
+                    navigate('/projects');
                   },
                 },
                 {
@@ -180,7 +180,7 @@ const Project: React.FC = () => {
                     shape="round"
                     size="large"
                     onClick={() => {
-                      navigate(`/studio/create?id=${project.id}`);
+                      navigate(`/projects/create?id=${project.id}`);
                     }}
                   >
                     Edit

src/router/routes.ts

@@ -60,7 +60,7 @@ const PATHS = {
   // ROOT PATHS
   DASHBOARD: '/dashboard',
   EXPLORER: '/explorer',
-  STUDIO: '/studio',
+  STUDIO: '/projects',
   SWAP: '/swap',
   STAKING: '/staking', //todo: improve
   PLANS: '/plans',
@@ -94,8 +94,8 @@ const NAV_LINKS = {
   SA_ONGOING_NAV: '/plans/service-agreements/ongoing',
   DELEGATE_NAV: '/staking/indexers/delegate',
   PROJECT_NAV: '/explorer/project',
-  STUDIO_PROJECT_NAV: '/studio/project',
-  STUDIO_CREATE_NAV: '/studio/create',
+  STUDIO_PROJECT_NAV: '/projects/project',
+  STUDIO_CREATE_NAV: '/projects/create',
 
   TOP_INDEXER_NAV: `/${DELEGATOR.DELEGATOR}/${DELEGATOR.INDEXERS}`,
 
@@ -225,5 +225,5 @@ export const routers: BasicRouteType[] = [
   },
 
   { path: '/consumer/*', component: React.lazy(() => import('../pages/consumer/index')) },
-  { path: '/studio/*', component: React.lazy(() => import('../pages/studio/index')) },
+  { path: '/projects/*', component: React.lazy(() => import('../pages/projects/index')) },
 ];

yarn.lock

@@ -4535,10 +4535,10 @@
     jwt-decode "^3.1.2"
     lru-cache "^10.0.1"
 
-"@subql/[email protected]27":
-  version "1.0.3-27"
-  resolved "https://registry.npmjs.org/@subql/components/-/components-1.0.3-27.tgz#0b39392ca9f4ac41bf49975e485e6622fb938217"
-  integrity sha512-T3KBDKAcYnI2Ows5Pn+LTZKr7zKrevVnlmxeyfRUYzRP+rGRkdos7lOm8NrHtwKsQkCx977Dua44xx3t/19ffg==
+"@subql/[email protected]28":
+  version "1.0.3-28"
+  resolved "https://registry.npmjs.org/@subql/components/-/components-1.0.3-28.tgz#32c703b2301d8f59779f1b534496d7c488a77e9f"
+  integrity sha512-aGsQ7purrlo/CVpthbweTNJ+kUF/SXA1vsNvtLHU9Yil5ksDR9jxIzS9U/5dxjRlfzSF/iLOBm5ftWdj8r0TJQ==
   dependencies:
     "@graphiql/plugin-explorer" "^0.3.4"
     "@graphiql/toolkit" "^0.9.1"