refactor(neuron-ui): move withdraw outside the dao row component.

nervosnetwork · Nov 12, 2019 · 3d7953a · 3d7953a
1 parent 8847aec
commit 3d7953a
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 31 deletions.
diff --git a/packages/neuron-ui/src/components/CustomRows/DAORecordRow.tsx b/packages/neuron-ui/src/components/CustomRows/DAORecordRow.tsx
@@ -12,51 +12,49 @@ import * as styles from './daoRecordRow.module.scss'
 const DAORecord = ({
   daoData,
   blockNumber,
-  blockHash,
   outPoint: { txHash, index },
   tipBlockNumber,
-  tipBlockHash,
   capacity,
   actionLabel,
   onClick,
   timestamp,
   depositOutPoint,
   epoch,
+  withdraw,
 }: State.NervosDAORecord & {
   actionLabel: string
   onClick: any
   tipBlockNumber: string
-  tipBlockHash: string
   epoch: string
+  withdraw: string | null
 }) => {
   const [t] = useTranslation()
-  const [withdrawValue, setWithdrawValue] = useState('')
   const [withdrawingEpoch, setWithdrawingEpoch] = useState('')
   const [depositEpoch, setDepositEpoch] = useState('')
 
-  useEffect(() => {
-    const withdrawBlockHash = depositOutPoint ? blockHash : tipBlockHash
-    if (!withdrawBlockHash) {
-      return
-    }
-    const formattedDepositOutPoint = depositOutPoint
-      ? {
-          txHash: depositOutPoint.txHash,
-          index: BigInt(depositOutPoint.index),
-        }
-      : {
-          txHash,
-          index: BigInt(index),
-        }
-    ;(ckbCore.rpc as any)
-      .calculateDaoMaximumWithdraw(formattedDepositOutPoint, withdrawBlockHash)
-      .then((res: string) => {
-        setWithdrawValue(BigInt(res).toString())
-      })
-      .catch((err: Error) => {
-        console.error(err)
-      })
-  }, [txHash, index, tipBlockHash, depositOutPoint, blockHash])
+  // useEffect(() => {
+  //   const withdrawBlockHash = depositOutPoint ? blockHash : tipBlockHash
+  //   if (!withdrawBlockHash) {
+  //     return
+  //   }
+  //   const formattedDepositOutPoint = depositOutPoint
+  //     ? {
+  //         txHash: depositOutPoint.txHash,
+  //         index: BigInt(depositOutPoint.index),
+  //       }
+  //     : {
+  //         txHash,
+  //         index: BigInt(index),
+  //       }
+  //   ;(ckbCore.rpc as any)
+  //     .calculateDaoMaximumWithdraw(formattedDepositOutPoint, withdrawBlockHash)
+  //     .then((res: string) => {
+  //       setWithdrawValue(BigInt(res).toString())
+  //     })
+  //     .catch((err: Error) => {
+  //       console.error(err)
+  //     })
+  // }, [txHash, index, tipBlockHash, depositOutPoint, blockHash])
 
   useEffect(() => {
     if (!depositOutPoint) {
@@ -80,7 +78,7 @@ const DAORecord = ({
       })
   }, [daoData, depositOutPoint, blockNumber])
 
-  const interest = BigInt(withdrawValue) - BigInt(capacity)
+  const interest = BigInt(withdraw || capacity) - BigInt(capacity)
 
   let ready = false
   let metaInfo = 'Ready'

diff --git a/packages/neuron-ui/src/components/NervosDAO/index.tsx b/packages/neuron-ui/src/components/NervosDAO/index.tsx
@@ -12,6 +12,7 @@ import { shannonToCKBFormatter } from 'utils/formatters'
 import { MIN_DEPOSIT_AMOUNT, MEDIUM_FEE_RATE, SHANNON_CKB_RATIO } from 'utils/const'
 
 import { generateDepositTx, generateWithdrawTx, generateClaimTx } from 'services/remote'
+import { ckbCore } from 'services/chain'
 import { epochParser } from 'utils/parsers'
 
 import DAORecord from 'components/CustomRows/DAORecordRow'
@@ -38,6 +39,7 @@ const NervosDAO = ({
   const [showDepositDialog, setShowDepositDialog] = useState(false)
   const [activeRecord, setActiveRecord] = useState<State.NervosDAORecord | null>(null)
   const [errorMessage, setErrorMessage] = useState('')
+  const [withdrawList, setWithdrawList] = useState<(string | null)[]>([])
 
   const clearGeneratedTx = useCallback(() => {
     dispatch({
@@ -178,25 +180,50 @@ const NervosDAO = ({
     send.generatedTx ? send.generatedTx.fee || calculateFee(send.generatedTx) : '0'
   )} CKB`
 
+  useEffect(() => {
+    Promise.all(
+      records.map(async ({ outPoint, depositOutPoint, blockHash }) => {
+        if (!tipBlockHash) {
+          return null
+        }
+        const withdrawBlockHash = depositOutPoint ? blockHash : tipBlockHash
+        const formattedDepositOutPoint = depositOutPoint
+          ? {
+              txHash: depositOutPoint.txHash,
+              index: BigInt(depositOutPoint.index),
+            }
+          : {
+              txHash: outPoint.txHash,
+              index: BigInt(outPoint.index),
+            }
+        return (ckbCore.rpc as any).calculateDaoMaximumWithdraw(formattedDepositOutPoint, withdrawBlockHash) as string
+      })
+    )
+      .then(res => {
+        setWithdrawList(res)
+      })
+      .catch(console.error)
+  }, [records, tipBlockHash])
+
   const Records = useMemo(() => {
     return (
       <>
         <Text as="h2" variant="xxLarge">
           {t('nervos-dao.deposit-records')}
         </Text>
         <Stack>
-          {records.map(record => {
+          {records.map((record, i) => {
             let stage = 'deposited'
             if (record.depositOutPoint) {
               stage = 'withdrawing'
             }
             return (
               <DAORecord
                 {...record}
+                withdraw={withdrawList[i]}
                 actionLabel={t(`nervos-dao.${stage}-action-label`)}
                 key={JSON.stringify(record.outPoint)}
                 onClick={onActionClick}
-                tipBlockHash={tipBlockHash}
                 tipBlockNumber={tipBlockNumber}
                 epoch={epoch}
               />
@@ -205,7 +232,7 @@ const NervosDAO = ({
         </Stack>
       </>
     )
-  }, [records, t, tipBlockHash, onActionClick, tipBlockNumber, epoch])
+  }, [records, withdrawList, t, onActionClick, tipBlockNumber, epoch])
 
   let free = BigInt(0)
   let locked = BigInt(0)