feat(neuron-ui): add an alert when past epochs are less than 5

Author: Keith-CY

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

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useMemo } from 'react'
 import { DefaultButton } from 'office-ui-fabric-react'
 import { useTranslation } from 'react-i18next'
 import { ckbCore, getBlockByNumber } from 'services/chain'
+import { showMessage } from 'services/remote'
 import calculateAPY from 'utils/calculateAPY'
 import { shannonToCKBFormatter, uniformTimeFormatter, localNumberFormatter } from 'utils/formatters'
 import calculateClaimEpochNumber from 'utils/calculateClaimEpochNumber'
@@ -21,19 +22,28 @@ const DAORecord = ({
   depositOutPoint,
   epoch,
   withdraw,
+  connectionStatus,
 }: State.NervosDAORecord & {
   actionLabel: string
   onClick: any
   tipBlockNumber: string
   epoch: string
   withdraw: string | null
+  connectionStatus: 'online' | 'offline'
 }) => {
   const [t] = useTranslation()
   const [withdrawingEpoch, setWithdrawingEpoch] = useState('')
   const [depositEpoch, setDepositEpoch] = useState('')
 
   useEffect(() => {
     if (!depositOutPoint) {
+      getBlockByNumber(BigInt(blockNumber))
+        .then(b => {
+          setDepositEpoch(b.header.epoch)
+        })
+        .catch((err: Error) => {
+          console.error(err)
+        })
       return
     }
     const depositBlockNumber = ckbCore.utils.bytesToHex(ckbCore.utils.hexToBytes(daoData).reverse())
@@ -81,6 +91,26 @@ const DAORecord = ({
     }
   }
 
+  const onActionClick = useMemo(() => {
+    const currentEpochInfo = epochParser(epoch)
+    const thresholdEpoch = withdrawingEpoch || depositEpoch
+    if (thresholdEpoch) {
+      const thresholdEpochInfo = epochParser(thresholdEpoch)
+      if (thresholdEpochInfo.number + BigInt(4) >= currentEpochInfo.number) {
+        return () =>
+          showMessage(
+            {
+              title: t('nervos-dao.insufficient-period-alert-title'),
+              message: t('nervos-dao.insufficient-period-alert-title'),
+              detail: t('nervos-dao.insufficient-period-alert-message'),
+            },
+            () => {}
+          )
+      }
+    }
+    return onClick
+  }, [onClick, epoch, depositEpoch, withdrawingEpoch])
+
   return (
     <div className={`${styles.daoRecord} ${depositOutPoint ? styles.isClaim : ''}`}>
       <div className={styles.primaryInfo}>
@@ -95,8 +125,8 @@ const DAORecord = ({
             text={actionLabel}
             data-tx-hash={txHash}
             data-index={index}
-            onClick={onClick}
-            disabled={depositOutPoint && !ready}
+            onClick={onActionClick}
+            disabled={connectionStatus === 'offline' || (depositOutPoint && !ready)}
             styles={{
               flexContainer: {
                 pointerEvents: 'none',

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

@@ -33,6 +33,7 @@ const NervosDAO = ({
   wallet,
   dispatch,
   nervosDAO: { records },
+  chain: { connectionStatus },
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
   const [depositValue, setDepositValue] = useState(`${MIN_DEPOSIT_AMOUNT}`)
@@ -226,13 +227,14 @@ const NervosDAO = ({
                 onClick={onActionClick}
                 tipBlockNumber={tipBlockNumber}
                 epoch={epoch}
+                connectionStatus={connectionStatus}
               />
             )
           })}
         </Stack>
       </>
     )
-  }, [records, withdrawList, t, onActionClick, tipBlockNumber, epoch])
+  }, [records, withdrawList, t, onActionClick, tipBlockNumber, epoch, connectionStatus])
 
   const free = BigInt(wallet.balance)
   const locked = withdrawList.reduce((acc, w) => acc + BigInt(w || 0), BigInt(0))
@@ -271,7 +273,7 @@ const NervosDAO = ({
           <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 15 }}>
             <DefaultButton
               text={t('nervos-dao.deposit')}
-              disabled={sending}
+              disabled={connectionStatus === 'offline' || sending}
               onClick={() => setShowDepositDialog(true)}
             />
             <TooltipHost

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

@@ -38,6 +38,7 @@ const Send = ({
     loadings: { sending = false },
   },
   wallet: { id: walletID = '', balance = '' },
+  chain: { connectionStatus },
   dispatch,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps<{ address: string }>>) => {
   const { t } = useTranslation()
@@ -234,7 +235,7 @@ const Send = ({
           <PrimaryButton
             type="submit"
             onClick={onSubmit(walletID)}
-            disabled={sending || !!errorMessageUnderTotal || !send.generatedTx}
+            disabled={connectionStatus === 'offline' || sending || !!errorMessageUnderTotal || !send.generatedTx}
             text={t('send.send')}
           />
         )}

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

@@ -333,7 +333,9 @@
       "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)",
-      "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."
+      "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.",
+      "insufficient-period-alert-title": "Insufficient Period",
+      "insufficient-period-alert-message": "Nervos DAO needs at least 4 epochs to handle your request."
     }
   }
 }

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

@@ -333,7 +333,9 @@
       "minimal-fee-required": "存入金额应不少于 {{minimal}} CKB",
       "interest-accumulated": "已累计 {{blockNumber}} 个块的利息",
       "blocks-left": " 还需等待 {{epochs}} epochs {{blocks}} 个块(~{{days}} 天)",
-      "withdraw-alert": "风险提示：距离 NervosDAO 规定的最近一个允许提现 epoch 仅剩下 {{epochs}} 个 epoch，存在提现交易拥堵无法上链从而导致只能在下一个提现周期(约 {{days}} 天)的风险"
+      "withdraw-alert": "风险提示：距离 NervosDAO 规定的最近一个允许提现 epoch 仅剩下 {{epochs}} 个 epoch，存在提现交易拥堵无法上链从而导致只能在下一个提现周期(约 {{days}} 天)的风险",
+      "insufficient-alert-title": "Insufficient Period",
+      "insufficient-alert-message": "Nervos DAO 要求您在至少 4 个 epochs 后执行此操作"
     }
   }
 }