Feat/implement dynamic fee rate based on fee rate statistics

[JeffreyMa597]

What problem does this PR solve?

As title.

An RPC to fetch fee_rate_statistics is added since CKB@v0.106.0, which returns mean fee rate and median fee rate of the specified block range.

With the historic data, Neuron could offer more precise fee rate recommendations for users.

PRD: Magickbase/neuron-public-issues#87
UI: https://www.figma.com/file/6XNoimRDbFTTNm016rbIdU/Magickbase?node-id=319%3A4539&t=oQrWTpg2GhW4obRJ-0

Ref: Magickbase/neuron-public-issues#95

Check List

1、The customer price and dropdown price can be switched.

2、The fee rate dropdown list is displayed with 3 options, and the suggested_fee_rate will be updated every 30 seconds.
1. Fast: fee rate is 2 * suggested_fee_rate - 1000
2. Standard: fee rate is suggested_fee_rate
3. Slow: fee rate is 1000

3、The fee in every single option will update when the fee rate is updated.
Of course, It's calculated by account and fee rate.
The standard one is selected by default and also when the selected value is not matched with any option.

4、The suggest_fee_rate will update every 30 seconds, also the fee is. The fee is based on the fee rate which we type in the text field. When the fee rate is set below 1000, there will be a warning tip instead of the suggest tip.

5、The fee in Nervos Dao, Customized assets and Assets account are all based on the suggest fee rate instead of using the medium value.

Test

e2e Test

Task

none

[yanguoyu]

Texts should be internationalization, and they should not use directly.

[Keith-CY]

It was required to act as a native app, and pointer is in web app exclusively.

[Keith-CY]

Is countDown necessary to be global?

[JeffreyMa597]

yep, it will be used to dispatch a request in another place.

[Keith-CY]

The fee rate can be fetched on demand, then count down starts. And count down ends on leaving the page.

[JeffreyMa597]

1、The countdown is associated with the interface call. They are synchronized, and now the interface call is on the main page, so the countdown accordingly is there. And even if the countdown is not displayed, the interface needs to be called periodically on other pages to update fee_rate_statistics.
2、The display of the countdown is on the send page. I use a global variable to pass this value, not context.

[Keith-CY]

Why should the count down be updated when fee rate is not used?

[JeffreyMa597]

Why should the count down be updated when fee rate is not used?

I mean the fee_rate will be used in some different places, and in order to keep fee_rate consistent and updated regularly everywhere, I put countdown and request together. And, certainly, I can use context to pass this value, but I think using redux may be more convenient.

[yanguoyu]

Maybe you can wrapper get the fee rate as a hook, like this, then every want get feeRate and countDown by call this hook

const useGetFeeRate = () => {
    const [countDown, setCountDown] = useState(30)
    const [feeRate, setFeeRate] = useState()
    useEffect(() => {
        const timeout = setTimeout(() => {
          setCountDown(v => v - 1)
        }, 1000)
        return () => clearTimeout(timeout)
    }, [])
    useEffect(() => {
     if (countDown === 0) {
        getFeeRateStats()
              .then(res => {
                const { mean, median } = res
                const suggested = res ? Math.max(1000, Number(mean), Number(median)) : 0
                setFeeRate({ ...res, suggestFeeRate: suggested })
              })
              .finaly {
                  setCountDown(30)
               }
        }
     }
    }, [countDown])
    return { feeRate, countDown }
}

[JeffreyMa597]

Maybe you can wrapper get the fee rate as a hook, like this, then every want get feeRate and countDown by call this hook

const useGetFeeRate = () => {
    const [countDown, setCountDown] = useState(30)
    const [feeRate, setFeeRate] = useState()
    useEffect(() => {
        const timeout = setTimeout(() => {
          setCountDown(v => v - 1)
        }, 1000)
        return () => clearTimeout(timeout)
    }, [])
    useEffect(() => {
     if (countDown === 0) {
        getFeeRateStats()
              .then(res => {
                const { mean, median } = res
                const suggested = res ? Math.max(1000, Number(mean), Number(median)) : 0
                setFeeRate({ ...res, suggestFeeRate: suggested })
              })
              .finaly {
                  setCountDown(30)
               }
        }
     }
    }, [countDown])
    return { feeRate, countDown }
}

Thx. I submitted a new version with a hook before I saw your response. Thanks for your help again. And please make a code review.

[yanguoyu]

This PR may need a tester to test and approve it.

[Keith-CY]

This PR may need a tester to test and approve it.

I’ve verified the functionality yesterday.