Feat/implement dynamic fee rate based on fee rate statistics

packages/neuron-ui/package.json

@@ -40,8 +40,8 @@
     "last 2 chrome versions"
   ],
   "dependencies": {
-    "@nervosnetwork/ckb-sdk-core": "0.103.1",
-    "@nervosnetwork/ckb-sdk-utils": "0.103.1",
+    "@nervosnetwork/ckb-sdk-core": "0.107.0",
+    "@nervosnetwork/ckb-sdk-utils": "0.107.0",
     "@uifabric/experiments": "7.45.14",
     "@uifabric/styling": "7.25.1",
     "canvg": "2.0.0",

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

@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next'
 import { useLocation, useParams } from 'react-router-dom'
 import { useState as useGlobalState, useDispatch, AppActions } from 'states'
 import { isMainnet as isMainnetUtil, isSuccessResponse, validateAddress } from 'utils'
+import useGetCountDownAndFeeRateStats from 'utils/hooks/useGetCountDownAndFeeRateStats'
 import TextField from 'widgets/TextField'
 import { generateNFTSendTransaction } from 'services/remote'
 import Button from 'widgets/Button'
-import { MEDIUM_FEE_RATE } from 'utils/const'
 import { ReactComponent as Attention } from 'widgets/Icons/Attention.svg'
 import { isErrorWithI18n } from 'exceptions'
 import styles from './NFTSend.module.scss'
@@ -48,8 +48,8 @@ const NFTSend = () => {
   } = useGlobalState()
   const [t] = useTranslation()
   const globalDispatch = useDispatch()
+  const { suggestFeeRate } = useGetCountDownAndFeeRateStats()
   const timerRef = useRef<NodeJS.Timeout | null>(null)
-
   const [sendState, dispatch] = useReducer(reducer, initState)
   const [remoteError, setRemoteError] = useState('')
 
@@ -122,7 +122,7 @@ const NFTSend = () => {
         receiveAddress: sendState.address,
         outPoint,
         description: sendState.description,
-        feeRate: `${MEDIUM_FEE_RATE}`,
+        feeRate: `${suggestFeeRate}`,
       }
 
       generateNFTSendTransaction(params)
@@ -141,7 +141,7 @@ const NFTSend = () => {
         })
     }, TIMER_DELAY)
     return clearTimer
-  }, [isSubmittable, globalDispatch, sendState, walletId, outPoint])
+  }, [isSubmittable, globalDispatch, sendState, walletId, outPoint, suggestFeeRate])
 
   return (
     <div>

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

@@ -44,17 +44,19 @@ export const useUpdateMaxDeposit = ({
   setMaxDepositTx,
   setMaxDepositErrorMessage,
   isBalanceReserved,
+  suggestFeeRate,
 }: {
   wallet: State.Wallet
   setMaxDepositAmount: React.Dispatch<React.SetStateAction<bigint>>
   setMaxDepositTx: React.Dispatch<React.SetStateAction<any>>
   setMaxDepositErrorMessage: React.Dispatch<React.SetStateAction<string>>
   isBalanceReserved: boolean
+  suggestFeeRate: number | string
 }) => {
   useEffect(() => {
     generateDaoDepositAllTx({
       walletID: wallet.id,
-      feeRate: `${MEDIUM_FEE_RATE}`,
+      feeRate: `${suggestFeeRate}`,
       isBalanceReserved,
     })
       .then((res: any) => {
@@ -72,7 +74,15 @@ export const useUpdateMaxDeposit = ({
         setMaxDepositTx(undefined)
         setMaxDepositErrorMessage(err.message)
       })
-  }, [wallet.id, wallet.balance, setMaxDepositAmount, setMaxDepositErrorMessage, setMaxDepositTx, isBalanceReserved])
+  }, [
+    wallet.id,
+    wallet.balance,
+    setMaxDepositAmount,
+    setMaxDepositErrorMessage,
+    setMaxDepositTx,
+    isBalanceReserved,
+    suggestFeeRate,
+  ])
 }
 
 export const useInitData = ({
@@ -129,6 +139,7 @@ export const useUpdateDepositValue = ({
   maxDepositErrorMessage,
   isBalanceReserved,
   t,
+  suggestFeeRate,
 }: {
   setDepositValue: React.Dispatch<React.SetStateAction<string>>
   setErrorMessage: React.Dispatch<React.SetStateAction<string>>
@@ -140,6 +151,7 @@ export const useUpdateDepositValue = ({
   maxDepositErrorMessage: string
   isBalanceReserved: boolean
   t: TFunction
+  suggestFeeRate: number | string
 }) =>
   useCallback(
     (value: string) => {
@@ -171,7 +183,7 @@ export const useUpdateDepositValue = ({
         const capacity = CKBToShannonFormatter(amount, CapacityUnit.CKB)
         if (BigInt(capacity) < maxDepositAmount) {
           generateDaoDepositTx({
-            feeRate: `${MEDIUM_FEE_RATE}`,
+            feeRate: `${suggestFeeRate}`,
             capacity,
             walletID,
           }).then(res => {
@@ -213,6 +225,7 @@ export const useUpdateDepositValue = ({
       setDepositValue,
       setErrorMessage,
       isBalanceReserved,
+      suggestFeeRate,
     ]
   )
 
@@ -298,19 +311,21 @@ export const useOnWithdrawDialogSubmit = ({
   clearGeneratedTx,
   walletID,
   dispatch,
+  suggestFeeRate,
 }: {
   activeRecord: State.NervosDAORecord | null
   setActiveRecord: React.Dispatch<null>
   clearGeneratedTx: () => void
   walletID: string
   dispatch: React.Dispatch<StateAction>
+  suggestFeeRate: number | string
 }) =>
   useCallback(() => {
     if (activeRecord) {
       generateDaoWithdrawTx({
         walletID,
         outPoint: activeRecord.outPoint,
-        feeRate: `${MEDIUM_FEE_RATE}`,
+        feeRate: `${suggestFeeRate}`,
       })
         .then(res => {
           if (isSuccessResponse(res)) {
@@ -342,7 +357,7 @@ export const useOnWithdrawDialogSubmit = ({
         })
     }
     setActiveRecord(null)
-  }, [activeRecord, setActiveRecord, clearGeneratedTx, walletID, dispatch])
+  }, [activeRecord, setActiveRecord, clearGeneratedTx, walletID, dispatch, suggestFeeRate])
 
 export const useOnActionClick = ({
   records,

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

@@ -1,9 +1,9 @@
 import React, { useEffect, useState, useMemo, useCallback } from 'react'
+import { useState as useGlobalState, useDispatch, AppActions } from 'states'
 import { useTranslation } from 'react-i18next'
 import { ReactComponent as TooltipIcon } from 'widgets/Icons/Tooltip.svg'
 
 import appState from 'states/init/app'
-import { useState as useGlobalState, useDispatch } from 'states'
 
 import {
   CONSTANTS,
@@ -15,9 +15,12 @@ import {
   getCurrentUrl,
   getSyncStatus,
   CKBToShannonFormatter,
+  ErrorCode,
+  CapacityUnit,
+  isSuccessResponse,
 } from 'utils'
 
-import { openExternal } from 'services/remote'
+import { generateDaoDepositTx, openExternal } from 'services/remote'
 
 import DepositDialog from 'components/DepositDialog'
 import WithdrawDialog from 'components/WithdrawDialog'
@@ -26,6 +29,7 @@ import BalanceSyncIcon from 'components/BalanceSyncingIcon'
 import Button from 'widgets/Button'
 import CopyZone from 'widgets/CopyZone'
 
+import useGetCountDownAndFeeRateStats from 'utils/hooks/useGetCountDownAndFeeRateStats'
 import hooks from './hooks'
 import styles from './nervosDAO.module.scss'
 
@@ -55,6 +59,7 @@ const NervosDAO = () => {
   } = useGlobalState()
   const dispatch = useDispatch()
   const [t, { language }] = useTranslation()
+  const { suggestFeeRate } = useGetCountDownAndFeeRateStats()
   const [depositValue, setDepositValue] = useState(`${MIN_DEPOSIT_AMOUNT}`)
   const [showDepositDialog, setShowDepositDialog] = useState(false)
   const [activeRecord, setActiveRecord] = useState<State.NervosDAORecord | null>(null)
@@ -79,6 +84,7 @@ const NervosDAO = () => {
     maxDepositErrorMessage,
     isBalanceReserved,
     t,
+    suggestFeeRate,
   })
 
   const onDepositValueChange = hooks.useOnDepositValueChange({ updateDepositValue })
@@ -102,6 +108,7 @@ const NervosDAO = () => {
     setMaxDepositTx,
     setMaxDepositErrorMessage,
     isBalanceReserved,
+    suggestFeeRate,
   })
   hooks.useInitData({ clearGeneratedTx, dispatch, updateDepositValue, wallet, setGenesisBlockTimestamp })
   hooks.useUpdateGlobalAPC({ bestKnownBlockTimestamp, genesisBlockTimestamp, setGlobalAPC })
@@ -111,6 +118,7 @@ const NervosDAO = () => {
     clearGeneratedTx,
     walletID: wallet.id,
     dispatch,
+    suggestFeeRate,
   })
 
   const onActionClick = hooks.useOnActionClick({
@@ -244,6 +252,27 @@ const NervosDAO = () => {
     }
   }, [maxDepositAmount, depositValue, setDepositValue])
 
+  useEffect(() => {
+    generateDaoDepositTx({
+      feeRate: `${suggestFeeRate}`,
+      capacity: CKBToShannonFormatter(depositValue, CapacityUnit.CKB),
+      walletID: wallet.id,
+    }).then(res => {
+      if (isSuccessResponse(res)) {
+        dispatch({
+          type: AppActions.UpdateGeneratedTx,
+          payload: res.result,
+        })
+      } else if (res.status === 0) {
+        setErrorMessage(`${typeof res.message === 'string' ? res.message : res.message.content}`)
+      } else if (res.status === ErrorCode.CapacityNotEnoughForChange) {
+        setErrorMessage(t(`messages.codes.106`))
+      } else {
+        setErrorMessage(t(`messages.codes.${res.status}`))
+      }
+    })
+  }, [suggestFeeRate, depositValue])
+
   const MemoizedDepositDialog = useMemo(() => {
     return (
       <DepositDialog