Merge pull request #861 from subquery/fix/query-rewards

feat: set as recommend

Author: HuberTRoy

src/components/ProjectDeployments/ProjectDeployments.tsx

@@ -5,14 +5,18 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import Copy from '@components/Copy';
 import Expand from '@components/Expand/Expand';
+import { useWeb3 } from '@containers';
 import { useCreateDeployment } from '@hooks';
-import { Markdown, Modal, openNotification, TableTitle, Typography } from '@subql/components';
-import { parseError } from '@utils';
+import { useWaitTransactionhandled } from '@hooks/useWaitTransactionHandled';
+import { Markdown, Modal, openNotification, Spinner, TableTitle, Typography } from '@subql/components';
+import { cidToBytes32, parseError } from '@utils';
 import { useUpdate } from 'ahooks';
-import { Form, Radio, Table } from 'antd';
+import { Checkbox, Form, Radio, Table } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import dayjs from 'dayjs';
 
+import { useWeb3Store } from 'src/stores';
+
 import { NewDeployment } from '../../models';
 import styles from './ProjectDeployments.module.less';
 
@@ -27,7 +31,10 @@ type Props = {
 
 const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDeploymentCid, onRefresh }) => {
   const { t } = useTranslation();
+  const { contracts } = useWeb3Store();
   const updateDeployment = useCreateDeployment(projectId);
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const waitTransactionHandled = useWaitTransactionhandled();
   const [deploymentModal, setDeploymentModal] = React.useState<boolean>(false);
   const [form] = useForm();
   const [currentDeployment, setCurrentDeployment] = React.useState<Deployment>();
@@ -80,7 +87,6 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDe
               rules={[{ required: true }]}
               required
               help={ruleTips}
-              validateStatus="error"
             >
               <div className={styles.markdownWrapper}>
                 <Markdown
@@ -116,11 +122,36 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDe
             dataIndex: 'deploymentId',
             key: 'deploymentId',
             title: <TableTitle>RECOMMENDED</TableTitle>,
-            render: (val) => (
-              <p className={styles.value}>
-                {currentDeploymentCid === val ? <Radio checked={currentDeploymentCid === val}>RECOMMENDED</Radio> : ''}
-              </p>
-            ),
+            render: (val) =>
+              loading ? (
+                <Spinner size={10}></Spinner>
+              ) : (
+                <p className={styles.value}>
+                  <Radio
+                    checked={currentDeploymentCid === val}
+                    onClick={async () => {
+                      if (currentDeploymentCid !== val) {
+                        try {
+                          const res = await contracts?.projectRegistry.setProjectLatestDeployment(
+                            projectId,
+                            cidToBytes32(val),
+                          );
+                          setLoading(true);
+
+                          const receipt = await res?.wait(10);
+                          await waitTransactionHandled(receipt?.blockNumber);
+
+                          await onRefresh();
+                        } finally {
+                          setLoading(false);
+                        }
+                      }
+                    }}
+                  >
+                    RECOMMENDED
+                  </Radio>
+                </p>
+              ),
           },
           {
             dataIndex: 'deploymentId',
@@ -162,6 +193,7 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDe
                   setCurrentDeployment(record);
                   setDeploymentModal(true);
                   form.setFieldValue('description', record.description);
+                  form.setFieldValue('recommended', currentDeploymentCid === record.deploymentId);
                 }}
               >
                 Edit

src/containers/ProjectMetadata.ts

@@ -34,13 +34,14 @@ function useProjectMetadataImpl() {
     return result.cid.toV0().toString();
   };
 
-  const uploadVersionMetadata = async (version: Omit<NewDeployment, 'deploymentId'>): Promise<string> => {
+  const uploadVersionMetadata = async (version: NewDeployment & { recommended: boolean }): Promise<string> => {
     const result = await ipfs.add(JSON.stringify(version), { pin: true });
 
     return result.cid.toV0().toString();
   };
 
-  const getVersionMetadata = (cid: string) => fetchIpfsMetadata<Omit<NewDeployment, 'deploymentId'>>(catSingle, cid);
+  const getVersionMetadata = (cid: string) =>
+    fetchIpfsMetadata<NewDeployment & { recommended: boolean }>(catSingle, cid);
 
   return {
     getMetadataForProject,

src/containers/ProjectRegistry.ts

@@ -134,6 +134,9 @@ function useProjectRegistryImpl(logger: Logger) {
     getQuery,
     updateQueryMetadata,
     updateDeployment,
+    clearCache: () => {
+      projectCache.current = {};
+    },
   };
 }
 

src/hooks/useCreateDeployment.tsx

@@ -17,7 +17,7 @@ export function useCreateDeployment(
     const versionCid = await uploadVersionMetadata({
       version: deploymentDetails.version,
       description: deploymentDetails.description,
-    });
+    } as NewDeployment & { recommended: boolean });
 
     const tx = await projectRegistry.updateDeployment(
       projectId,

src/hooks/useProject.tsx

@@ -11,22 +11,23 @@ import { AsyncData } from '../utils';
 import { useAsyncMemo } from '.';
 
 export function useProject(id: string): AsyncData<ProjectDetails | undefined> {
-  const { getQuery } = useProjectRegistry();
+  const { getQuery, clearCache } = useProjectRegistry();
   const { catSingle } = useIPFS();
   const { getMetadataFromCid } = useProjectMetadata();
 
   return useAsyncMemo(async () => {
     if (!id) {
       return undefined;
     }
+    clearCache();
 
     const query = await getQuery(id);
-    console.warn(query);
     if (!query) {
       return undefined;
     }
 
     const metadata = await getMetadataFromCid(query.metadata);
+
     return {
       id,
       owner: query.owner,

src/pages/projects/Project/Deployments.tsx

@@ -88,11 +88,12 @@ const DeploymentsTab = forwardRef<DeploymendRef, Props>(({ projectId, currentDep
       return (
         <ProjectDeployments
           currentDeploymentCid={currentDeployment?.deployment}
+          // @ts-ignore
           deployments={sortedDeployments}
           projectId={projectId}
           onRefresh={async () => {
-            await asyncDeployments.refetch();
             await onRefresh?.();
+            await asyncDeployments.refetch();
           }}
         />
       );