feat(neuron-ui): update the info and message of nervos dao

Author: Keith-CY

packages/neuron-ui/src/components/CustomRows/DAORecordRow.tsx

@@ -84,7 +84,11 @@ const DAORecord = ({
   return (
     <div className={`${styles.daoRecord} ${depositOutPoint ? styles.isClaim : ''}`}>
       <div className={styles.primaryInfo}>
-        <div>{interest >= BigInt(0) ? `${shannonToCKBFormatter(interest.toString()).toString()} CKB` : ''}</div>
+        <div>
+          {interest >= BigInt(0)
+            ? `${depositOutPoint ? '' : '~'}${shannonToCKBFormatter(interest.toString()).toString()} CKB`
+            : ''}
+        </div>
         <div>{`${shannonToCKBFormatter(capacity)} CKB`}</div>
         <div>
           <DefaultButton

packages/neuron-ui/src/components/NervosDAO/WithdrawDialog.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Dialog, DialogFooter, DefaultButton, PrimaryButton, DialogType } from 'office-ui-fabric-react'
+import { Dialog, DialogFooter, DefaultButton, PrimaryButton, DialogType, Text } from 'office-ui-fabric-react'
 import { useTranslation } from 'react-i18next'
 import { shannonToCKBFormatter, localNumberFormatter } from 'utils/formatters'
 import { ckbCore } from 'services/chain'
@@ -65,6 +65,14 @@ const WithdrawDialog = ({
     blocks: localNumberFormatter(currentEpochInfo.length - currentEpochInfo.index),
     days: localNumberFormatter(epochs / BigInt(6)),
   })
+  const alert =
+    epochs <= BigInt(5)
+      ? t('nervos-dao.withdraw-alert', {
+          epochs,
+          nextLeftEpochs: epochs + BigInt(180),
+          days: (epochs + BigInt(180)) / BigInt(6),
+        })
+      : ''
   return (
     <Dialog
       hidden={!record}
@@ -77,20 +85,25 @@ const WithdrawDialog = ({
     >
       {record ? (
         <>
-          <div>
+          <Text as="p" variant="large" block>
             <span>{`${t('nervos-dao.deposit')}: `}</span>
             <span>{`${shannonToCKBFormatter(record.capacity)} CKB`}</span>
-          </div>
-          <div>
+          </Text>
+          <Text as="p" variant="large" block>
             <span>{`${t('nervos-dao.interest')}: `}</span>
             <span>
               {withdrawValue
                 ? `${shannonToCKBFormatter((BigInt(withdrawValue) - BigInt(record.capacity)).toString())} CKB`
                 : ''}
             </span>
-          </div>
+          </Text>
           <div>
-            <span>{message}</span>
+            <Text as="p" variant="medium" block>
+              {message}
+            </Text>
+            <Text as="p" variant="xSmall" block styles={{ root: { color: 'red' } }}>
+              {alert}
+            </Text>
           </div>
         </>
       ) : null}

packages/neuron-ui/src/locales/en.json

@@ -332,7 +332,8 @@
       "withdrawing-action-label": "Claim",
       "minimal-fee-required": "The minimum deposit capacity is {{minimal}} CKB",
       "interest-accumulated": "{{blockNumber}} blocks interest accumulated",
-      "blocks-left": "{{epochs}} epochs {{blocks}} blocks left(~{{days}} days)"
+      "blocks-left": "{{epochs}} epochs {{blocks}} blocks left(~{{days}} days)",
+      "withdraw-alert": "Alert: these are only {{epochs}} epochs left before the next start withdrawing epoch number conforming to Nervos DAO, and it is possible that you have to do the withdraw after the next period(~{{days}}) due to the jam on CKB."
     }
   }
 }

packages/neuron-ui/src/locales/zh.json

@@ -332,7 +332,8 @@
       "withdrawing-action-label": "Claim",
       "minimal-fee-required": "存入金额应不少于 {{minimal}} CKB",
       "interest-accumulated": "已累计 {{blockNumber}} 个块的利息",
-      "blocks-left": " 还需等待 {{epochs}} epochs {{blocks}} 个块(~{{days}} 天)"
+      "blocks-left": " 还需等待 {{epochs}} epochs {{blocks}} 个块(~{{days}} 天)",
+      "withdraw-alert": "风险提示：距离 NervosDAO 规定的最近一个允许提现 epoch 仅剩下 {{epochs}} 个 epoch，存在提现交易拥堵无法上链从而导致只能在下一个提现周期(约 {{days}} 天)的风险"
     }
   }
 }