feat(neuron-ui): update i18n of nervos dao

Author: Keith-CY

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

@@ -4,8 +4,9 @@ import { useTranslation } from 'react-i18next'
 import { ckbCore, getBlockByNumber } from 'services/chain'
 import calculateAPY from 'utils/calculateAPY'
 import { shannonToCKBFormatter, uniformTimeFormatter, localNumberFormatter } from 'utils/formatters'
+import calculateClaimEpochNumber from 'utils/calculateClaimEpochNumber'
 import { epochParser } from 'utils/parsers'
-import { WITHDRAW_EPOCHS } from 'utils/const'
+// import { WITHDRAW_EPOCHS } from 'utils/const'
 
 import * as styles from './daoRecordRow.module.scss'
 
@@ -74,24 +75,16 @@ const DAORecord = ({
   } else {
     const depositEpochInfo = epochParser(depositEpoch)
     const currentEpochInfo = epochParser(epoch)
-
-    let depositedEpochs = currentEpochInfo.number - depositEpochInfo.number
-    const depositEpochFraction = depositEpochInfo.index * currentEpochInfo.length
-    const currentEpochFraction = currentEpochInfo.index * depositEpochInfo.length
-    if (currentEpochFraction > depositEpochFraction) {
-      depositedEpochs += BigInt(1)
-    }
-    const minLockEpochs =
-      ((depositedEpochs + BigInt(WITHDRAW_EPOCHS - 1)) / BigInt(WITHDRAW_EPOCHS)) * BigInt(WITHDRAW_EPOCHS)
-    const targetEpochNumber = depositEpochInfo.number + minLockEpochs
-
+    const targetEpochNumber = calculateClaimEpochNumber(depositEpochInfo, currentEpochInfo)
     if (targetEpochNumber < currentEpochInfo.number + BigInt(1) && targetEpochNumber >= currentEpochInfo.number) {
       metaInfo = 'Ready'
       ready = true
     } else {
+      const epochs = targetEpochNumber - currentEpochInfo.number - BigInt(1)
       metaInfo = t('nervos-dao.blocks-left', {
-        epochs: localNumberFormatter(targetEpochNumber - currentEpochInfo.number - BigInt(1)),
-        blocks: currentEpochInfo.length - currentEpochInfo.index,
+        epochs: localNumberFormatter(epochs),
+        blocks: localNumberFormatter(currentEpochInfo.length - currentEpochInfo.index),
+        days: localNumberFormatter(epochs / BigInt(6)),
       })
     }
   }

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

@@ -1,16 +1,45 @@
 import React, { useState, useEffect } from 'react'
 import { Dialog, DialogFooter, DefaultButton, PrimaryButton, DialogType } from 'office-ui-fabric-react'
 import { useTranslation } from 'react-i18next'
-import { shannonToCKBFormatter } from 'utils/formatters'
+import { shannonToCKBFormatter, localNumberFormatter } from 'utils/formatters'
 import { ckbCore } from 'services/chain'
+import calculateTargetEpochNumber from 'utils/calculateClaimEpochNumber'
+import { epochParser } from 'utils/parsers'
 
-const WithdrawDialog = ({ onDismiss, onSubmit, record, tipBlockHash }: any) => {
+const WithdrawDialog = ({
+  onDismiss,
+  onSubmit,
+  record,
+  tipBlockHash,
+  currentEpoch,
+}: {
+  onDismiss: any
+  onSubmit: any
+  record: State.NervosDAORecord
+  tipBlockHash: string
+  currentEpoch: string
+}) => {
   const [t] = useTranslation()
+  const [depositEpoch, setDepositEpoch] = useState('')
   const [withdrawValue, setWithdrawValue] = useState('')
+  useEffect(() => {
+    if (!record) {
+      return
+    }
+    ckbCore.rpc
+      .getBlock(record.blockHash)
+      .then(b => {
+        setDepositEpoch(b.header.epoch)
+      })
+      .catch((err: Error) => {
+        console.error(err)
+      })
+  }, [record])
   useEffect(() => {
     if (!record || !tipBlockHash) {
       return
     }
+
     ;(ckbCore.rpc as any)
       .calculateDaoMaximumWithdraw(
         {
@@ -26,6 +55,16 @@ const WithdrawDialog = ({ onDismiss, onSubmit, record, tipBlockHash }: any) => {
         console.error(err)
       })
   }, [record, tipBlockHash])
+
+  const depositEpochInfo = epochParser(depositEpoch)
+  const currentEpochInfo = epochParser(currentEpoch)
+  const targetEpochNumber = calculateTargetEpochNumber(depositEpochInfo, currentEpochInfo)
+  const epochs = targetEpochNumber - currentEpochInfo.number - BigInt(1)
+  const message = t('nervos-dao.notice-wait-time', {
+    epochs: localNumberFormatter(epochs),
+    blocks: localNumberFormatter(currentEpochInfo.length - currentEpochInfo.index),
+    days: localNumberFormatter(epochs / BigInt(6)),
+  })
   return (
     <Dialog
       hidden={!record}
@@ -39,17 +78,20 @@ const WithdrawDialog = ({ onDismiss, onSubmit, record, tipBlockHash }: any) => {
       {record ? (
         <>
           <div>
-            <span>{`${t('nervos-dao.deposit')}:`}</span>
+            <span>{`${t('nervos-dao.deposit')}: `}</span>
             <span>{`${shannonToCKBFormatter(record.capacity)} CKB`}</span>
           </div>
           <div>
-            <span>{`${t('nervos-dao.interest')}:`}</span>
+            <span>{`${t('nervos-dao.interest')}: `}</span>
             <span>
               {withdrawValue
                 ? `${shannonToCKBFormatter((BigInt(withdrawValue) - BigInt(record.capacity)).toString())} CKB`
                 : ''}
             </span>
           </div>
+          <div>
+            <span>{message}</span>
+          </div>
         </>
       ) : null}
       <DialogFooter>

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

@@ -77,7 +77,7 @@ const NervosDAO = ({
       }, 500)
       setDepositValue(value)
     },
-    [clearGeneratedTx, dispatch, wallet.id]
+    [clearGeneratedTx, dispatch, wallet.id, t]
   )
 
   useEffect(() => {
@@ -282,6 +282,7 @@ const NervosDAO = ({
           onDismiss={onWithdrawDialogDismiss}
           onSubmit={onWithdrawDialogSubmit}
           tipBlockHash={tipBlockHash}
+          currentEpoch={epoch}
         />
       ) : null}
     </>

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

@@ -325,13 +325,13 @@
       "deposit-value": "Deposit",
       "interest": "Interest",
       "yield": "Yield",
-      "notice-wait-time": "Notice: You need to wait {{epochs}} epochs {{blocks}} blocks(~days) to claim the saving.",
+      "notice-wait-time": "Notice: You need to wait {{epochs}} epochs {{blocks}} blocks(~{{days}} days) to claim the saving.",
       "deposit-terms": "Nervos DAO is a system layer decentralized infrastructure. Your saving here is secure.\nAccording to the Nervos DAO protocol, you need at least 180 epochs to withdraw your deposit",
       "deposited-action-label": "Withdraw",
       "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"
+      "blocks-left": "{{epochs}} epochs {{blocks}} blocks left(~{{days}} days)"
     }
   }
 }

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

@@ -325,13 +325,13 @@
       "deposit-value": "存款",
       "interest": "利息",
       "yield": "Yield",
-      "notice-wait-time": "注意: 您需要等待 {{epochs}} epochs {{blocks}} 区块完成最终取款。",
+      "notice-wait-time": "注意: 您需要等待 {{epochs}} epochs {{blocks}} 区块(~{{days}}天)完成最终取款。",
       "deposit-terms": "Nervos DAO is a system layer decentralized infrastructure. Your saving here is secure.\nAccording to the Nervos DAO protocol, you need at least 180 epochs to withdraw your deposit",
       "deposited-action-label": "Withdraw",
       "withdrawing-action-label": "Claim",
       "minimal-fee-required": "存入金额应不少于 {{minimal}} CKB",
       "interest-accumulated": "已累计 {{blockNumber}} 个块的利息",
-      "blocks-left": " 还需等待 {{epochs}} epochs {{blocks}} 个块"
+      "blocks-left": " 还需等待 {{epochs}} epochs {{blocks}} 个块(~{{days}} 天)"
     }
   }
 }

packages/neuron-ui/src/utils/calculateClaimEpochNumber.ts

@@ -0,0 +1,20 @@
+import { WITHDRAW_EPOCHS } from 'utils/const'
+
+interface EpochInfo {
+  index: bigint
+  number: bigint
+  length: bigint
+}
+
+export default (depositEpochInfo: EpochInfo, currentEpochInfo: EpochInfo) => {
+  let depositedEpochs = currentEpochInfo.number - depositEpochInfo.number
+  const depositEpochFraction = depositEpochInfo.index * currentEpochInfo.length
+  const currentEpochFraction = currentEpochInfo.index * depositEpochInfo.length
+  if (currentEpochFraction > depositEpochFraction) {
+    depositedEpochs += BigInt(1)
+  }
+  const minLockEpochs =
+    ((depositedEpochs + BigInt(WITHDRAW_EPOCHS - 1)) / BigInt(WITHDRAW_EPOCHS)) * BigInt(WITHDRAW_EPOCHS)
+  const targetEpochNumber = depositEpochInfo.number + minLockEpochs
+  return targetEpochNumber
+}