feat: boost msg

subquery · Jul 11, 2024 · 609efdb · 609efdb
1 parent 7e7bfd7
commit 609efdb
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 18 deletions.
diff --git a/src/components/DoBooster/index.tsx b/src/components/DoBooster/index.tsx
@@ -100,11 +100,26 @@ const DoBooster: FC<IProps> = ({ projectId, deploymentId, actionBtn, initAddOrRe
       openNotification({
         type: 'success',
         title: 'Boost completed successfully',
-        description: `Boost amount: ${formatSQT(
-          BigNumberJs(existingBoostByConsumer)
-            .plus(addOrRemove === 'add' ? BigNumberJs(submitVal) : BigNumberJs(submitVal).negated())
-            .toString(),
-        )} SQT`,
+        // @ts-ignore
+        description: (
+          <div className="col-flex" style={{ gap: 8 }}>
+            <Typography>
+              {`Boost amount: ${formatSQT(
+                BigNumberJs(existingBoostByConsumer)
+                  .plus(addOrRemove === 'add' ? BigNumberJs(submitVal) : BigNumberJs(submitVal).negated())
+                  .toString(),
+              )} SQT`}
+            </Typography>
+
+            <Typography>
+              You can view your detailed boosts in{' '}
+              <Typography.Link type="info" href="/consumer/boosted-projects">
+                My Boosts
+              </Typography.Link>{' '}
+              under Consumer
+            </Typography>
+          </div>
+        ),
         duration: 5,
       });
       onSuccess?.();
@@ -174,7 +189,23 @@ const DoBooster: FC<IProps> = ({ projectId, deploymentId, actionBtn, initAddOrRe
                 },
               ]}
             ></Steps>
-
+            <div
+              style={{
+                marginTop: 24,
+              }}
+            >
+              <Typography variant="medium">
+                Boosting generates Query Rewards allowing you to make free queries to this project. Boosting also
+                encourages more Node Operators to join by directing a higher ratio of Allocation Rewards to this
+                project, enhancing performance and resilience.
+              </Typography>
+              <br></br>
+              <br></br>
+              <Typography variant="medium">
+                Boosting differs from Delegating in that it promotes the overall health of the project, while Delegating
+                supports individual Node Operators
+              </Typography>
+            </div>
             <div className="flex" style={{ marginTop: 24 }}>
               <IPFSImage
                 src={project.data?.metadata.image || '/static/default.project.png'}

diff --git a/src/components/EmptyList/EmptyList.module.css b/src/components/EmptyList/EmptyList.module.css
@@ -27,7 +27,6 @@
 
 .title {
   font-size: 24px;
-  font-weight: 600;
   line-height: 36px;
 }
 

diff --git a/src/components/EmptyList/EmptyList.tsx b/src/components/EmptyList/EmptyList.tsx
@@ -4,12 +4,13 @@
 import * as React from 'react';
 import { Trans } from 'react-i18next';
 import { Typography } from '@subql/components';
+import { isString } from 'lodash-es';
 
 import styles from './EmptyList.module.css';
 
 interface IEmptyList {
   title?: string;
-  description?: string | Array<string> | readonly string[];
+  description?: React.ReactNode | string | Array<string> | readonly string[];
   infoI18nKey?: string;
   infoLinkDesc?: string;
   infoLink?: string;
@@ -29,15 +30,19 @@ export const EmptyList: React.FC<IEmptyList> = ({
     <div className={styles.emptyListContainer}>
       <div className={styles.emptyListContent}>
         {title && <Typography className={styles.title}>{title}</Typography>}
-        <div className={styles.description}>
-          {sortedDescriptions.map((description, idx) => (
-            <Typography key={idx}>{description}</Typography>
-          ))}
-        </div>
+        {isString(description) || Array.isArray(description) ? (
+          <div className={styles.description}>
+            {sortedDescriptions.map((description, idx) => (
+              <Typography key={idx}>{description}</Typography>
+            ))}
+          </div>
+        ) : (
+          description
+        )}
         {infoI18nKey && (
           <Typography className={styles.infoLink}>
             {/* TODO: will fix this ts error when i18n issue fix. */}
-            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+            {}
             {/* @ts-ignore */}
             <Trans i18nKey={infoI18nKey}>
               {infoLinkDesc}

diff --git a/src/pages/consumer/MyBoostedProjects/MyBoostedProjects.tsx b/src/pages/consumer/MyBoostedProjects/MyBoostedProjects.tsx
@@ -116,10 +116,32 @@ const MyBoostedProjects: FC = () => {
       return (
         <EmptyList
           title={'You haven’t boosted any projects yet'}
-          description="Follow our documentation to help you get boost to a project then head over to the Explorer to find the first project you would like to boost. Learn how to boost a project here"
-          infoI18nKey={'emptyList.boostProject'}
-          infoLinkDesc={'Learn how to boost a project '}
-          infoLink={''} // TODO: fill the link
+          description={
+            <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 32 }}>
+              <Typography type="secondary">
+                Boosting provides Query Rewards allowing you to make free queries to the boosted project. By boosting
+                you encourage more Node Operators to join, enhancing performance and resilience of the project.
+              </Typography>
+
+              <Typography type="secondary">
+                Boosting differs from Delegating in that it promotes the overall health of the project, while Delegating
+                directs support to individual Node Operators.
+              </Typography>
+
+              <Typography type="secondary">
+                Follow our{' '}
+                <Typography.Link
+                  href="https://academy.subquery.network/subquery_network/consumers/boosting.html#how-to-boost-an-project"
+                  type="info"
+                  style={{ textDecoration: 'underline' }}
+                >
+                  Documentation
+                </Typography.Link>{' '}
+                to learn how to boost a project, then navigate to the Explorer to select the first project you’d like to
+                boost
+              </Typography>
+            </div>
+          }
         >
           <a href="/explorer/home" target="_blank">
             <Button type="primary" shape="round" size="large">