Merge pull request #854 from subquery/feat/update-create-project

feat: part

Author: HuberTRoy

src/components/DoBooster/index.tsx

@@ -1,8 +1,9 @@
 // Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useEffect, useMemo, useState } from 'react';
 import { AiOutlineInfoCircle } from 'react-icons/ai';
+import { gql, useLazyQuery, useQuery } from '@apollo/client';
 import IPFSImage from '@components/IPFSImage';
 import { ApproveContract } from '@components/ModalApproveToken';
 import { NumberInput } from '@components/NumberInput';
@@ -15,6 +16,7 @@ import { useAddAllowance } from '@hooks/useAddAllowance';
 import { useWaitTransactionhandled } from '@hooks/useWaitTransactionHandled';
 import { Modal, openNotification, Spinner, Steps, Tag, Typography } from '@subql/components';
 import { useGetDeploymentBoosterTotalAmountByDeploymentIdQuery } from '@subql/react-hooks';
+import { ProjectType } from '@subql/react-hooks/dist/graphql';
 import { cidToBytes32, parseError, TOKEN } from '@utils';
 import { formatNumber, formatSQT } from '@utils/numberFormatters';
 import { Button, Form, Radio, Tooltip } from 'antd';
@@ -28,6 +30,7 @@ import { useWeb3Store } from 'src/stores';
 import styles from './index.module.less';
 
 interface IProps {
+  projectType?: ProjectType;
   projectId?: string;
   deploymentId?: string;
   actionBtn?: React.ReactNode;
@@ -37,6 +40,7 @@ interface IProps {
 }
 
 const DoBooster: FC<IProps> = ({
+  projectType,
   projectId,
   deploymentId,
   actionBtn,
@@ -63,6 +67,26 @@ const DoBooster: FC<IProps> = ({
     fetchPolicy: 'network-only',
   });
 
+  const [getAverageBooster, averageBooster] = useLazyQuery<{
+    deploymentBoosterSummaries: {
+      aggregates: {
+        average: {
+          totalAmount: string;
+        };
+      };
+    };
+  }>(gql`
+    {
+      deploymentBoosterSummaries(filter: { project: { type: { equalTo: ${project.data?.type} } } }) {
+        aggregates {
+          average {
+            totalAmount
+          }
+        }
+      }
+    }
+  `);
+
   const [open, setOpen] = useState(initialOpen);
   const [loading, setLoading] = useState(false);
   const [addOrRemove, setAddOrRemove] = useState<'add' | 'remove'>(initAddOrRemove);
@@ -141,6 +165,14 @@ const DoBooster: FC<IProps> = ({
     }
   };
 
+  useEffect(() => {
+    if (open && project.data) {
+      getAverageBooster();
+    }
+  }, [open, project.data]);
+
+  console.warn(averageBooster.data);
+
   return (
     <div className={styles.doBooster}>
       {actionBtn ? (
@@ -253,7 +285,7 @@ const DoBooster: FC<IProps> = ({
 
             <div>
               <Form layout="vertical" form={form}>
-                <Typography>Boost amount</Typography>
+                <Typography>Boost amount </Typography>
                 <Form.Item
                   style={{ marginBottom: 0 }}
                   name="boostVal"
@@ -291,6 +323,18 @@ const DoBooster: FC<IProps> = ({
                     }}
                   ></NumberInput>
                 </Form.Item>
+                {balance.result.data?.eq(0) ? (
+                  <Typography.Link
+                    href="https://subquery.network/doc/subquery_network/token/token.html#where-is-sqt-traded"
+                    type="info"
+                    variant="small"
+                    style={{ transform: 'translateY(-10px)' }}
+                  >
+                    Get SQT
+                  </Typography.Link>
+                ) : (
+                  ''
+                )}
               </Form>
               <div className="col-flex" style={{ gap: 8, marginBottom: 24 }}>
                 <div className="flex">
@@ -338,6 +382,36 @@ const DoBooster: FC<IProps> = ({
                     {TOKEN}
                   </Typography>
                 </div>
+
+                <div className="flex">
+                  <Typography variant="medium" type="secondary" style={{ display: 'flex', alignItems: 'center' }}>
+                    Average Booster
+                    <Tooltip title="The total amount that you can freely boost to new projects.">
+                      <AiOutlineInfoCircle
+                        style={{ fontSize: 14, marginLeft: 6, color: 'var(--sq-gray500)' }}
+                      ></AiOutlineInfoCircle>
+                    </Tooltip>
+                  </Typography>
+                  <span style={{ flex: 1 }}></span>
+                  <Typography variant="medium">
+                    {averageBooster.loading ? (
+                      <Spinner size={10}></Spinner>
+                    ) : (
+                      <Tooltip
+                        title={formatSQT(
+                          averageBooster.data?.deploymentBoosterSummaries.aggregates.average.totalAmount || '0',
+                          { fixedNum: 18 },
+                        )}
+                      >
+                        {formatSQT(
+                          averageBooster.data?.deploymentBoosterSummaries.aggregates.average.totalAmount || '0',
+                          { fixedNum: 2 },
+                        )}
+                      </Tooltip>
+                    )}{' '}
+                    {TOKEN}
+                  </Typography>
+                </div>
               </div>
             </div>
           </>

src/components/IndexerDetails/IndexerDetails.tsx

@@ -39,13 +39,16 @@ type Props = {
 const NoIndexers: React.FC = () => {
   const { t } = useTranslation();
   return (
-    <EmptyList
-      title={t('noIndexers.title')}
-      description={t('noIndexers.description')}
-      infoLinkDesc={t('noIndexers.subtitle')}
-      infoI18nKey={t('noIndexers.subtitle')}
-      infoLink={URLS.INDEXER}
-    />
+    <EmptyList>
+      <div>
+        <Typography>{t('noIndexers.description')}</Typography> <br></br>
+        Or{' '}
+        <Typography.Link href="https://discord.com/invite/subquery" type="info">
+          Join Discord
+        </Typography.Link>{' '}
+        to communicate with Node Operators directly
+      </div>
+    </EmptyList>
   );
 };
 

src/components/ProjectOverview/ProjectOverview.tsx

@@ -320,7 +320,12 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
               </div>
               <span style={{ flex: 1 }}></span>
 
-              <DoBooster projectId={project.id} deploymentId={deploymentId} initialOpen={initialOpenModal}></DoBooster>
+              <DoBooster
+                projectType={project.type}
+                projectId={project.id}
+                deploymentId={deploymentId}
+                initialOpen={initialOpenModal}
+              ></DoBooster>
             </div>
           }
         >

src/i18n/en/explorer.ts

@@ -121,9 +121,10 @@ const translation = {
     },
   },
   noIndexers: {
-    description: 'no Node Operators available',
-    title: 'Start indexing this project',
-    subtitle: 'Learn how to index a SubQuery project ',
+    description: 'Boost more SQT to attract Node Operators',
+    title: '',
+    subtitle:
+      'Or Join Discord [PROVIDE LINK:https://discord.com/invite/subquery] to communicate with Node Operators directly',
   },
   indexers: {
     head: {

src/pages/consumer/MyBoostedProjects/MyBoostedProjects.tsx

@@ -213,7 +213,6 @@ const MyBoostedProjects: FC = () => {
                     onSuccess={() => boostedProjects.refetch()}
                   ></DoBooster>
                   <DoBooster
-                    deploymentId={deploymentId}
                     projectId={record.projectId}
                     actionBtn={<Typography.Link type="danger">Remove Boost</Typography.Link>}
                     onSuccess={() => boostedProjects.refetch()}

src/pages/projects/Create/Create.tsx

@@ -124,18 +124,17 @@ const Create: React.FC = () => {
                       Now what's next?
                     </Typography>
                     <Typography type="secondary">
-                      Your next challenge is to get Node Operators to run your project, here are some options that you
-                      have.
+                      Explore ways to encourage Node Operators to run your project
                     </Typography>
                   </div>
 
                   <div className={styles.plainCard}>
                     <div className="col-flex" style={{ gap: 8 }}>
                       <Typography>Boost your Project to attract Node Operators</Typography>
                       <Typography variant="medium" type="secondary">
-                        You should boost your project by locking SQT to increase the rewards that Node Operators can
-                        receive from your project. This is the best way to attract more Node Operators and ensure your
-                        project is indexed.{' '}
+                        Boost your project by locking SQT to increase the rewards that Node Operators can receive from
+                        your project. This is the best way to attract more Node Operators and ensure your project is
+                        indexed.{' '}
                         <Typography.Link
                           active
                           href="https://academy.subquery.network/subquery_network/consumers/boosting.html#consumer-boosting"
@@ -157,11 +156,10 @@ const Create: React.FC = () => {
 
                   <div className={styles.plainCard}>
                     <div className="col-flex" style={{ gap: 8 }}>
-                      <Typography>Setup Flex Plan</Typography>
+                      <Typography>Set up Flex Plan</Typography>
                       <Typography variant="medium" type="secondary">
-                        Flex plans are a great way to indicate to Node Operators what price you are willing to pay for
-                        access to this project, you can create a flex plan today before any Node Operators complete
-                        indexing.{' '}
+                        Flex Plans are required so Node Operators know what price you are willing to pay for access to
+                        this project, you can create a flex plan today before any Node Operators complete indexing.{' '}
                         <Typography.Link
                           active
                           href="https://academy.subquery.network/subquery_network/consumers/plan.html"
@@ -180,43 +178,6 @@ const Create: React.FC = () => {
                       </Button>
                     </Typography.Link>
                   </div>
-
-                  <div className={styles.plainCard}>
-                    <div className="col-flex" style={{ gap: 8 }}>
-                      <Typography>Create a closed price agreement</Typography>
-                      <Typography variant="medium" type="secondary">
-                        Creating a closed price agreement is good when only you will use the data in this project, as it
-                        creates a commitment between you and a node operator to access data for a predetermined amount
-                        of SQT.{' '}
-                        <Typography.Link
-                          active
-                          href="https://academy.subquery.network/subquery_network/consumers/plan.html"
-                          target="_blank"
-                        >
-                          Read the docs.
-                        </Typography.Link>
-                      </Typography>
-                    </div>
-                    <Typography.Link target="_href" href={`/consumer/my-offers`}>
-                      <Button shape="round" type="primary" size="large">
-                        Create agreement
-                      </Button>
-                    </Typography.Link>
-                  </div>
-                  <div className={styles.plainCard}>
-                    <div className="col-flex" style={{ gap: 8 }}>
-                      <Typography>Notify Node Operators on the Forum and in Discord</Typography>
-                      <Typography variant="medium" type="secondary">
-                        We recommend posting your project in the SubQuery Network forum and even mentioning it in the
-                        Discord community.
-                      </Typography>
-                    </div>
-                    <Typography.Link href="https://forum.subquery.network/" target="_blank">
-                      <Button shape="round" type="primary" size="large">
-                        Go to forum
-                      </Button>
-                    </Typography.Link>
-                  </div>
                 </div>
               }
               extra={[
@@ -232,6 +193,20 @@ const Create: React.FC = () => {
                 >
                   View project
                 </Button>,
+                <a href="https://discord.com/invite/subquery" target="_blank" rel="noreferrer" key="join-discord">
+                  <Button
+                    key="view-project"
+                    type="primary"
+                    shape="round"
+                    size="large"
+                    onClick={() => {
+                      navigate(`${STUDIO_PROJECT_NAV}/${resultId}`);
+                      destroy();
+                    }}
+                  >
+                    Join Discord
+                  </Button>
+                </a>,
               ]}
             ></Result>
           ),
@@ -255,6 +230,7 @@ const Create: React.FC = () => {
         <Spinner></Spinner>
       </div>
     );
+
   return (
     <div>
       <Formik