Merge pull request #1449 from nervosnetwork/refine-nervos-dao-record-component

[ᚬrc/v0.29.0] feat: refine the nervos dao record component

Author: Keith-CY

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

@@ -2,16 +2,15 @@ import React, { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import { useDialog } from 'utils/hooks'
+import { WITHDRAW_EPOCHS } from 'utils/const'
 
 import styles from './compensationPeriodDialog.module.scss'
 
 interface CompensationPeriodDialogProps {
   onDismiss: () => void
   compensationPeriod: {
-    currentEpochNumber: bigint
-    currentEpochIndex: bigint
-    currentEpochLength: bigint
-    targetEpochNumber: bigint
+    currentEpochValue: number
+    targetEpochValue: number
   } | null
 }
 
@@ -20,18 +19,11 @@ const CompensationPeriodDialog = ({ onDismiss, compensationPeriod }: Compensatio
   const dialogRef = useRef<HTMLDialogElement | null>(null)
   useDialog({ show: compensationPeriod, dialogRef, onClose: onDismiss })
 
-  let pastEpochs = 0
-  if (compensationPeriod) {
-    pastEpochs =
-      Number(compensationPeriod.currentEpochNumber) -
-      Number(compensationPeriod.targetEpochNumber) +
-      180 +
-      (compensationPeriod.currentEpochLength === BigInt(0)
-        ? 0
-        : +(Number(compensationPeriod.currentEpochIndex) / Number(compensationPeriod.currentEpochLength)).toFixed(1))
-  }
+  const pastEpochs = compensationPeriod
+    ? +(compensationPeriod.currentEpochValue - compensationPeriod.targetEpochValue + WITHDRAW_EPOCHS).toFixed(1)
+    : 0
 
-  const totalHours = Math.ceil((180 - pastEpochs) * 4)
+  const totalHours = Math.ceil((WITHDRAW_EPOCHS - pastEpochs) * 4)
   const leftDays = Math.floor(totalHours / 24)
   const leftHours = totalHours % 24
 

packages/neuron-ui/src/components/NervosDAO/hooks.ts

@@ -3,7 +3,7 @@ import { TFunction } from 'i18next'
 import { AppActions, StateAction } from 'states/stateProvider/reducer'
 import { verifyAmount } from 'utils/validators'
 import { epochParser } from 'utils/parsers'
-import calculateClaimEpochNumber from 'utils/calculateClaimEpochNumber'
+import calculateClaimEpochValue from 'utils/calculateClaimEpochValue'
 import calculateAPC from 'utils/calculateAPC'
 import { updateNervosDaoData, clearNervosDaoData } from 'states/stateProvider/actionCreators'
 
@@ -25,7 +25,7 @@ import {
   generateDaoDepositTx,
   generateDaoClaimTx,
 } from 'services/remote'
-import { getHeader, getHeaderByNumber, calculateDaoMaximumWithdraw } from 'services/chain'
+import { ckbCore, getHeaderByNumber, calculateDaoMaximumWithdraw } from 'services/chain'
 
 let timer: NodeJS.Timeout
 
@@ -93,7 +93,8 @@ export const useInitData = ({
       clearNervosDaoData()(dispatch)
       clearGeneratedTx()
     }
-  }, [clearGeneratedTx, dispatch, updateDepositValue, wallet.id, wallet.balance, setGenesisBlockTimestamp])
+    // eslint-disable-next-line
+  }, [])
 
 export const useClearGeneratedTx = (dispatch: React.Dispatch<StateAction>) =>
   useCallback(() => {
@@ -238,12 +239,13 @@ export const useCompensationPeriods = ({
       try {
         const depositEpochInfo = epochParser(depositEpoch)
         const currentEpochInfo = epochParser(currentEpoch)
-        const targetEpochNumber = calculateClaimEpochNumber(depositEpochInfo, currentEpochInfo)
+        const targetEpochValue = calculateClaimEpochValue(depositEpochInfo, currentEpochInfo)
         return {
-          targetEpochNumber,
-          currentEpochNumber: currentEpochInfo.number,
-          currentEpochIndex: currentEpochInfo.index,
-          currentEpochLength: currentEpochInfo.length,
+          depositEpochValue:
+            Number(depositEpochInfo.number) + Number(depositEpochInfo.index) / Number(depositEpochInfo.length),
+          targetEpochValue,
+          currentEpochValue:
+            Number(currentEpochInfo.number) + Number(currentEpochInfo.index) / Number(currentEpochInfo.length),
         }
       } catch {
         return null
@@ -491,11 +493,12 @@ export const useUpdateDepositEpochList = ({
   useEffect(() => {
     if (connectionStatus === 'online') {
       Promise.all(
-        records.map(({ blockHash }) =>
-          getHeader(blockHash)
+        records.map(({ daoData, depositOutPoint, blockNumber }) => {
+          const depositBlockNumber = depositOutPoint ? ckbCore.utils.toHexInLittleEndian(daoData) : blockNumber
+          return getHeaderByNumber(BigInt(depositBlockNumber))
             .then(header => header.epoch)
             .catch(() => null)
-        )
+        })
       ).then(epochsList => setDepositEpochList(epochsList))
     }
   }, [records, setDepositEpochList, connectionStatus])

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

@@ -132,27 +132,21 @@ const NervosDAO = () => {
         <h2 className={styles.recordsTitle}>{t('nervos-dao.deposit-records')}</h2>
         <Stack className={styles.recordsContainer}>
           {records.map((record, i) => {
-            let stage = 'deposited'
-            if (record.depositOutPoint) {
-              stage = 'withdrawing'
+            const props = {
+              ...record,
+              tipBlockTimestamp,
+              compensationPeriod: compensationPeriods[i],
+              withdrawCapacity: withdrawList[i],
+              key: `${record.outPoint.txHash}-${record.outPoint.index}`,
+              onClick: onActionClick,
+              onCompensationPeriodExplanationClick,
+              tipBlockNumber,
+              depositEpoch: depositEpochList[i] || '',
+              currentEpoch: epoch,
+              genesisBlockTimestamp,
+              connectionStatus,
             }
-            return (
-              <DAORecord
-                {...record}
-                compensationPeriod={compensationPeriods[i]}
-                withdraw={withdrawList[i]}
-                actionLabel={t(`nervos-dao.${stage}-action-label`)}
-                key={JSON.stringify(record.outPoint)}
-                onClick={onActionClick}
-                onCompensationPeriodExplanationClick={onCompensationPeriodExplanationClick}
-                tipBlockNumber={tipBlockNumber}
-                tipBlockTimestamp={tipBlockTimestamp}
-                epoch={epoch}
-                genesisBlockTimestamp={genesisBlockTimestamp}
-                connectionStatus={connectionStatus}
-                dispatch={dispatch}
-              />
-            )
+            return <DAORecord {...props} />
           })}
         </Stack>
       </>
@@ -169,7 +163,7 @@ const NervosDAO = () => {
     connectionStatus,
     genesisBlockTimestamp,
     tipBlockTimestamp,
-    dispatch,
+    depositEpochList,
   ])
 
   const MemoizedDepositDialog = useMemo(() => {
@@ -188,6 +182,7 @@ const NervosDAO = () => {
         isTxGenerated={!!send.generatedTx}
       />
     )
+    // eslint-disable-next-line
   }, [
     showDepositDialog,
     depositValue,

packages/neuron-ui/src/components/NervosDAORecord/hooks.ts

@@ -0,0 +1,71 @@
+import { useEffect } from 'react'
+import { getHeaderByNumber } from 'services/chain'
+import { MILLISECONDS_IN_YEAR } from 'utils/const'
+import calculateAPC from 'utils/calculateAPC'
+
+export const useUpdateEpochs = ({
+  depositOutPoint,
+  blockNumber,
+  setWithdrawingEpoch,
+}: {
+  depositOutPoint: CKBComponents.OutPoint | undefined
+  blockNumber: CKBComponents.BlockNumber
+  setWithdrawingEpoch: React.Dispatch<string>
+}) => {
+  useEffect(() => {
+    if (depositOutPoint) {
+      // It's under withdrawing, the block number is the one that withdrawing starts at
+      getHeaderByNumber(BigInt(blockNumber))
+        .then(header => {
+          setWithdrawingEpoch(header.epoch)
+        })
+        .catch((err: Error) => {
+          console.error(err)
+        })
+    }
+  }, [depositOutPoint, blockNumber, setWithdrawingEpoch])
+}
+
+export const useUpdateApc = ({
+  depositTimestamp,
+  genesisBlockTimestamp = 0,
+  timestamp,
+  tipBlockTimestamp,
+  setApc,
+}: {
+  depositTimestamp: number
+  genesisBlockTimestamp: number
+  timestamp: number
+  tipBlockTimestamp: number
+  setApc: React.Dispatch<number>
+}) => {
+  useEffect(() => {
+    if (depositTimestamp) {
+      const startYearNumber = (depositTimestamp - genesisBlockTimestamp) / MILLISECONDS_IN_YEAR
+      const endYearNumber = (timestamp - genesisBlockTimestamp) / MILLISECONDS_IN_YEAR
+      try {
+        const calculatedAPC = calculateAPC({
+          startYearNumber,
+          endYearNumber,
+        })
+        setApc(calculatedAPC)
+      } catch (err) {
+        console.error(err)
+      }
+    } else {
+      const startYearNumber = (timestamp - genesisBlockTimestamp) / MILLISECONDS_IN_YEAR
+      const endYearNumber = (tipBlockTimestamp - genesisBlockTimestamp) / MILLISECONDS_IN_YEAR
+      try {
+        const calculatedAPC = calculateAPC({
+          startYearNumber,
+          endYearNumber,
+        })
+        setApc(calculatedAPC)
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  }, [depositTimestamp, tipBlockTimestamp, timestamp, genesisBlockTimestamp, setApc])
+}
+
+export default { useUpdateEpochs, useUpdateApc }