feat: Displaying DAO rewards (#3054)

* feat: Displaying DAO rewards * fix: spell error --------- Co-authored-by: Chen Yu <keithwhisper@gmail.com>
nervosnetwork · Apr 11, 2024 · e039824 · e039824 · github-actions · Apr 11, 2024
1 parent 476e982
commit e039824
Show file tree

Hide file tree

Showing 9 changed files with 173 additions and 49 deletions.
diff --git a/packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss b/packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss
@@ -1,7 +1,11 @@
 @import '../../styles/mixin.scss';
 
+.container {
+  width: 680px;
+}
+
 .slider {
-  margin-top: 16px;
+  margin-top: 10px;
 
   :global(.ms-Slider-thumb) {
     top: -8px;
@@ -32,65 +36,89 @@
   margin-top: 16px;
 }
 
-.depositValueLabel {
-  line-height: 20px;
-  color: var(--secondary-text-color);
-  font-size: 14px;
+.depositValueLabelWrap {
+  display: flex;
+
+  .depositValueLabel {
+    line-height: 20px;
+    color: var(--secondary-text-color);
+    font-size: 14px;
+  }
+  .tooltip {
+    margin-left: 120px;
+  }
+  .tip {
+    width: 400px;
+    word-break: normal;
+    white-space: normal;
+    line-height: 180%;
+  }
+
+  svg {
+    margin: 2px 4px 0;
+    cursor: pointer;
+    path {
+      fill: var(--primary-color);
+    }
+  }
 }
 
 .fee {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   line-height: 20px;
+  margin-top: 4px;
   color: var(--main-text-color);
+  gap: 24px;
 
   & > div {
-    &:nth-last-child(1) {
-      width: 230px;
-      text-align: right;
+    &:first-child {
+      flex-shrink: 0;
     }
   }
 }
 
-.notice {
-  $lineHeight: 24px;
-  display: flex;
-  box-sizing: border-box;
-  margin-top: 22px;
-  border: 1px solid rgba(252, 136, 0, 0.2);
-  padding: 7px 54px;
-  border-radius: 4px;
-  background: #fff6eb;
-  color: #f68c2a;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: $lineHeight;
-  text-align: center;
-
-  & > svg {
-    $size: 14px;
-    flex-shrink: 0;
-    margin: calc(($lineHeight - $size) / 2) 4px 0 0;
-    width: $size;
-    height: $size;
-
-    g[fill='#D50000'] {
-      fill: currentColor;
+.rewards {
+  padding: 6px 16px;
+  background: var(--tag-green-bg-color);
+  border-radius: 8px;
+  margin-top: 14px;
+  div {
+    display: flex;
+    justify-content: space-between;
+    color: var(--primary-color);
+    p {
+      margin: 0;
+      padding: 4px 0;
+      font-size: 14px;
+      line-height: 20px;
     }
   }
+}
 
-  @media (prefers-color-scheme: dark) {
-    border-color: #4b391c;
-    background: #4b391c;
+.acpContent {
+  display: flex;
+  .tip {
+    min-width: 190px;
+    word-break: normal;
+    white-space: normal;
+    line-height: 180%;
+  }
+  svg {
+    margin: 2px 4px 0;
+    cursor: pointer;
+    path {
+      fill: var(--primary-color);
+    }
   }
 }
 
 .rfcLink {
   font-weight: 500;
   font-size: 12px;
   background: inherit;
-  color: #f68c2a;
+  color: var(--primary-color);
   border: none;
   padding: 0;
   margin: 0;
@@ -111,6 +139,7 @@
     gap: 8px;
 
     & > svg {
+      flex-shrink: 0;
       path {
         fill: #e5e5e5;
 

diff --git a/packages/neuron-ui/src/components/DepositDialog/hooks.ts b/packages/neuron-ui/src/components/DepositDialog/hooks.ts
@@ -275,3 +275,36 @@ export const useOnDepositDialogCancel = ({
     clearGeneratedTx()
   }, [dispatch, onCloseDepositDialog, resetDepositValue, clearGeneratedTx])
 }
+
+export const useDepositRewards = ({
+  depositValue,
+  maxDepositValue,
+  disabled,
+  globalAPC,
+}: {
+  depositValue: string
+  maxDepositValue: string | null
+  disabled: boolean
+  globalAPC: number
+}) => {
+  const [annualRewards, monthRewards] = useMemo(() => {
+    if (disabled) return ['0', '0']
+
+    const value = CKBToShannonFormatter(
+      (Number(maxDepositValue || depositValue) - MIN_DEPOSIT_AMOUNT).toFixed(MAX_DECIMAL_DIGITS).toString()
+    )
+
+    const dpc = globalAPC / 365 / 100
+
+    const mRewards = (Number(value) * dpc * 30).toFixed(0).toString()
+
+    const rewerds = (Number(value) * dpc * 360).toFixed(0).toString()
+
+    return [rewerds, mRewards]
+  }, [depositValue, maxDepositValue, disabled, globalAPC])
+
+  return {
+    annualRewards,
+    monthRewards,
+  }
+}
diff --git a/packages/neuron-ui/src/components/DepositDialog/index.tsx b/packages/neuron-ui/src/components/DepositDialog/index.tsx
@@ -7,13 +7,15 @@ import { openExternal } from 'services/remote'
 import { localNumberFormatter, shannonToCKBFormatter } from 'utils'
 import { Attention, Success } from 'widgets/Icons/icon'
 import Dialog from 'widgets/Dialog'
+import Tooltip from 'widgets/Tooltip'
 import styles from './depositDialog.module.scss'
 import {
   useBalanceReserved,
   useDepositValue,
   useGenerateDaoDepositTx,
   useOnDepositDialogCancel,
   useOnDepositDialogSubmit,
+  useDepositRewards,
 } from './hooks'
 
 const NERVOS_DAO_RFC_URL =
@@ -28,6 +30,7 @@ interface DepositDialogProps {
   isTxGenerated: boolean
   suggestFeeRate: number
   walletID: string
+  globalAPC: number
 }
 
 const RfcLink = React.memo(() => (
@@ -53,8 +56,9 @@ const DepositDialog = ({
   isDepositing,
   isTxGenerated,
   suggestFeeRate,
+  globalAPC,
 }: DepositDialogProps) => {
-  const [t] = useTranslation()
+  const [t, { language }] = useTranslation()
   const disabled = !isTxGenerated
   const { isBalanceReserved, onIsBalanceReservedChange, setIsBalanceReserved } = useBalanceReserved()
   const { depositValue, onChangeDepositValue, slidePercent, onSliderChange, resetDepositValue } = useDepositValue(
@@ -81,6 +85,14 @@ const DepositDialog = ({
     },
     [disabled, onConfirm]
   )
+  const { annualRewards, monthRewards } = useDepositRewards({
+    depositValue,
+    maxDepositValue,
+    disabled,
+    globalAPC,
+  })
+
+  const isChinese = language === 'zh' || language.startsWith('zh-')
 
   return (
     <Dialog
@@ -91,14 +103,27 @@ const DepositDialog = ({
       onConfirm={onConfirm}
       cancelText={t('nervos-dao.cancel')}
       confirmText={t('nervos-dao.proceed')}
+      className={styles.container}
     >
       {isDepositing ? (
         <Spinner size={SpinnerSize.large} />
       ) : (
         <form onSubmit={onSubmit}>
-          <label className={styles.depositValueLabel} htmlFor="depositValue">{`${t(
-            'nervos-dao.deposit-amount'
-          )}`}</label>
+          <div className={styles.depositValueLabelWrap}>
+            <label className={styles.depositValueLabel} htmlFor="depositValue">{`${t(
+              'nervos-dao.deposit-amount'
+            )}`}</label>
+            <Tooltip
+              tipClassName={styles.tooltip}
+              tip={
+                <div className={styles.tip}>
+                  <Trans i18nKey="nervos-dao.deposit-terms" components={[<RfcLink />]} />
+                </div>
+              }
+            >
+              <Attention />
+            </Tooltip>
+          </div>
           <Slider
             className={styles.slider}
             value={slidePercent}
@@ -120,6 +145,11 @@ const DepositDialog = ({
           />
 
           <div className={styles.fee}>
+            <div>
+              <span>{t('nervos-dao.fee')}</span>
+              <span>{`${shannonToCKBFormatter(fee)}`}</span>
+            </div>
+
             <div className={styles.isBalanceReserved}>
               <input
                 type="checkbox"
@@ -132,17 +162,31 @@ const DepositDialog = ({
                 {t(`nervos-dao.balance-not-reserved`)}
               </label>
             </div>
+          </div>
 
+          <div className={styles.rewards}>
             <div>
-              <span>{t('nervos-dao.fee')}</span>
-              <span>{`${shannonToCKBFormatter(fee)}`}</span>
+              <p>{t(`nervos-dao.estimated-rewards`, { days: 30 })}</p>
+              <p>{shannonToCKBFormatter(monthRewards)} CKB</p>
+            </div>
+            <div>
+              <p>{t(`nervos-dao.estimated-rewards`, { days: 360 })}</p>
+              <p>{shannonToCKBFormatter(annualRewards)} CKB</p>
             </div>
-          </div>
-
-          <div className={styles.notice}>
-            <Attention />
             <div>
-              <Trans i18nKey="nervos-dao.deposit-terms" components={[<RfcLink />]} />
+              <div className={styles.acpContent}>
+                {t(`nervos-dao.estimated-apc`)}
+                {isChinese ? null : (
+                  <Tooltip
+                    placement="top"
+                    showTriangle
+                    tip={<p className={styles.tip}>{t(`nervos-dao.estimated-apc-tooltip`)}</p>}
+                  >
+                    <Attention />
+                  </Tooltip>
+                )}
+              </div>
+              <p>{globalAPC}%</p>
             </div>
           </div>
         </form>

diff --git a/packages/neuron-ui/src/components/NervosDAO/index.tsx b/packages/neuron-ui/src/components/NervosDAO/index.tsx
@@ -222,6 +222,7 @@ const NervosDAO = () => {
         isDepositing={sending}
         isTxGenerated={!!send.generatedTx}
         suggestFeeRate={suggestFeeRate}
+        globalAPC={globalAPC}
       />
     )
   }, [
@@ -233,6 +234,7 @@ const NervosDAO = () => {
     sending,
     send.generatedTx,
     suggestFeeRate,
+    globalAPC,
   ])
 
   const MemoizedWithdrawDialog = useMemo(() => {
@@ -260,7 +262,7 @@ const NervosDAO = () => {
 
   const onlineAndSynced = ConnectionStatus.Online === connectionStatus && SyncStatus.SyncCompleted === syncStatus
 
-  const isEnglish = language === 'en' || language.startsWith('en-')
+  const isChinese = language === 'zh' || language.startsWith('zh-')
 
   return (
     <PageContainer
@@ -321,7 +323,7 @@ const NervosDAO = () => {
           <div className={clsx(styles.field, styles.apc)}>
             <div className={styles.name}>
               {t(`nervos-dao.apc`)}
-              {isEnglish && (
+              {isChinese ? null : (
                 <span className={styles.tooltip} data-tooltip={t(`nervos-dao.apc-tooltip`)}>
                   <Attention />
                 </span>

diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
@@ -709,6 +709,9 @@
       "compensation-accumulated": "{{blockNumber}} blocks compensation accumulated",
       "withdraw-alert": "Hint: there are only {{epochs}} epochs (~{{hours}} hours) until the end of your current lock period. If you wish to withdraw in current lock period, please send withdraw request in time. There are {{nextLeftEpochs}} epochs(~{{days}} days) until the end of your next lock period.",
       "balance-not-reserved": "Don't reserve any CKBytes for future DAO operations (Not recommended)",
+      "estimated-rewards": "Estimated Rewards of {{days}} days",
+      "estimated-apc": "Estimated APC",
+      "estimated-apc-tooltip": "Estimated Annual Percentage Compensation",
       "deposit-amount": "Deposit Amount (CKB)",
       "deposit-record": {
         "deposited-at": "Deposited",

diff --git a/packages/neuron-ui/src/locales/es.json b/packages/neuron-ui/src/locales/es.json
@@ -692,6 +692,9 @@
       "compensation-accumulated": "Compensación acumulada en {{blockNumber}} bloques",
       "withdraw-alert": "Advertencia: solo quedan {{epochs}} epochs ({{hours}} horas) hasta el final de su periodo de bloqueo actual. Si desea retirar en el periodo de bloqueo actual, envíe la solicitud de retiro a tiempo. Solo quedan {{nextLeftEpochs}} epochs ({{days}} días) hasta el final de su próximo periodo de bloqueo.",
       "balance-not-reserved": "No reservar ningún CKBytes para futuras operaciones de DAO (no se recomienda)",
+      "estimated-rewards": "Recompensas estimadas de {{días}} días",
+      "estimated-apc": "Estimación APC",
+      "estimated-apc-tooltip": "Estimación de Compensación Anual",
       "deposit-amount": "Cantidad a Depositar (CKB)",
       "deposit-record": {
         "deposited-at": "Depositado",

diff --git a/packages/neuron-ui/src/locales/fr.json b/packages/neuron-ui/src/locales/fr.json
@@ -699,6 +699,9 @@
       "compensation-accumulated": "{{blockNumber}} blocs de compensation accumulée",
       "withdraw-alert": "Astuce : il ne reste que {{epochs}} époques (~{{hours}} heures) jusqu'à la fin de votre période de verrouillage actuelle. Si vous souhaitez retirer pendant cette période de verrouillage, veuillez envoyer une demande de retrait à temps. Il reste {{nextLeftEpochs}} époques (~{{days}} jours) jusqu'à la fin de votre prochaine période de verrouillage.",
       "balance-not-reserved": "Ne pas réserver de CKBytes pour les futures opérations DAO (non recommandé)",
+      "estimated-rewards": "Récompenses estimées de {{days}} jours",
+      "estimated-apc": "Estimation de APC",
+      "estimated-apc-tooltip": "Estimation de Compensation Annuel",
       "deposit-amount": "Montant du dépôt (CKB)",
       "deposit-record": {
         "deposited-at": "Déposé",

diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json
@@ -703,6 +703,10 @@
       "compensation-accumulated": "已累計 {{blockNumber}} 個塊的鎖定補貼",
       "withdraw-alert": "提示：本補貼申請距離 Nervos DAO 規則允許的最近一個鎖定週期僅剩下 {{epochs}} 個 epoch (約 {{hours}} 小時)。如果您希望在本鎖定週期取出，請及時提交取出申請，以確保取出申請能在本鎖定週期結束之前上鏈。下一個鎖定週期的結束時間預計為 {{nextLeftEpochs}} 個 epochs (約 {{days}} 天)。",
       "balance-not-reserved": "（不建議）不預留未來操作手續費",
+      "estimated-rewards": "{{days}}天預計獎勵",
+      "estimated-apc": "預計年化鎖定補貼率",
+      "estimated-apc-tooltip": "預計年化鎖定補貼率",
+      "deposit-amount": "存入金額 (CKB)",
       "deposit-record": {
         "deposited-at": "存入於",
         "completed-at": "已取出",

diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
@@ -702,6 +702,9 @@
       "compensation-accumulated": "已累计 {{blockNumber}} 个块的锁定补贴",
       "withdraw-alert": "提示：本补贴申请距离 Nervos DAO 规则允许的最近一个锁定周期仅剩下 {{epochs}} 个 epoch (约 {{hours}} 小时)。 如果您希望在本锁定周期取出，请及时提交取出申请，以确保取出申请能在本锁定周期结束之前上链。下一个锁定周期的结束时间预计为 {{nextLeftEpochs}} 个 epochs (约 {{days}} 天)。",
       "balance-not-reserved": "不预留未来操作手续费（不建议）",
+      "estimated-rewards": "{{days}}天预计奖励",
+      "estimated-apc": "预计年化锁定补贴率",
+      "estimated-apc-tooltip": "预计年化锁定补贴率",
       "deposit-amount": "存入金额 (CKB)",
       "deposit-record": {
         "deposited-at": "存入于",