update code based on comments

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/PricePanel/index.tsx

@@ -26,7 +26,6 @@ const DEFAULT_PRICE_ARRAY = ['1000', '2000', '3000']
 const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, onPriceChange }: PricePanelProps) => {
   const [t] = useTranslation()
   const [type, setType] = useState<PriceTypeEnum>(PriceTypeEnum.Standard)
-  const [inputError, setInputError] = useState<string | null>(null)
   const [dropdownValue, setDropdowValue] = useState(DEFAULT_PRICE_ARRAY[1])
   const [feeRateValueArray, setFeeRateValueArray] = useState([])
   const [priceArray, setPriceArray] = useState(DEFAULT_PRICE_ARRAY)
@@ -40,8 +39,9 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
   } = useGlobalState()
 
   const isStandard = type === PriceTypeEnum.Standard
-  const label = isStandard ? '单价' : '自定义价格'
+  const label = isStandard ? t('price-switch.price') : t('price-switch.customPrice')
   const percent = (countDown / DEFAULT_COUNT_DOWN) * 100
+  let inputError
 
   const handleDropdownChange = useCallback(
     (e: { value: string }) => {
@@ -57,19 +57,23 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
       const { value: inputChangedValue } = e.currentTarget
       const handledValue = inputChangedValue.replace(/,/g, '')
 
-      setInputError(Number(handledValue) < 1000 ? '价格设定最少不得少于 1000 shannons/byte，请重新输入' : null)
+      inputError = Number(handledValue) < 1000 ? t('price-switch.errorTip', { minPrice: 1000 }) : null
       onPriceChange?.(e)
     },
-    [setInputError, onPriceChange]
+    [onPriceChange]
   )
 
-  const feeValuesArray = feeRateValueArray?.map((item: any) => ({
-    feeRateValue: item.feeRateValue,
-    value: shannonToCKBFormatter(item.feeValue),
-  }))
+  const feeValuesArray = useMemo(
+    () =>
+      feeRateValueArray?.map((item: any) => ({
+        feeRateValue: item.feeRateValue,
+        value: shannonToCKBFormatter(item.feeValue),
+      })),
+    [feeRateValueArray]
+  )
 
   useEffect(() => {
-    if (!priceArray.includes(dropdownValue)) {
+    if (isStandard && !priceArray.includes(dropdownValue)) {
       handleDropdownChange({ value: priceArray[1] })
     }
   }, [priceArray])
@@ -80,19 +84,27 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
         value: priceArray[0],
         label: (
           <div className={styles.labelWrap}>
-            <span>慢速</span>
-            <span className={styles.labelComment}>{`单价${feeValuesArray?.[0]?.feeRateValue ||
-              priceArray[0]}shannons/byte | 费用${feeValuesArray?.[0]?.value || 0}CKB`}</span>
+            <span>{t('price-switch.slow')}</span>
+            <span className={styles.labelComment}>
+              {t('price-switch.priceColumn', {
+                priceValue: feeValuesArray?.[0]?.feeRateValue || priceArray[0],
+                feeValue: feeValuesArray?.[0]?.value || 0,
+              })}
+            </span>
           </div>
         ),
       },
       {
         value: priceArray[1],
         label: (
           <div className={styles.labelWrap}>
-            <span>标准</span>
-            <span className={styles.labelComment}>{`单价${feeValuesArray?.[1]?.feeRateValue ||
-              priceArray[1]}shannons/byte | 费用${feeValuesArray?.[1]?.value || 0}CKB`}</span>
+            <span>{t('price-switch.standard')}</span>
+            <span className={styles.labelComment}>
+              {t('price-switch.priceColumn', {
+                priceValue: feeValuesArray?.[1]?.feeRateValue || priceArray[1],
+                feeValue: feeValuesArray?.[1]?.value || 0,
+              })}
+            </span>
           </div>
         ),
       },
@@ -101,9 +113,13 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
         value: priceArray[2],
         label: (
           <div className={styles.labelWrap}>
-            <span>快速</span>
-            <span className={styles.labelComment}>{`单价${feeValuesArray?.[2]?.feeRateValue ||
-              priceArray[2]}shannons/byte | 费用${feeValuesArray?.[2]?.value || 0}CKB`}</span>
+            <span>{t('price-switch.fast')}</span>
+            <span className={styles.labelComment}>
+              {t('price-switch.priceColumn', {
+                priceValue: feeValuesArray?.[2]?.feeRateValue || priceArray[2],
+                feeValue: feeValuesArray?.[2]?.value || 0,
+              })}
+            </span>
           </div>
         ),
       },
@@ -125,7 +141,7 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
     }
   }, [suggestFeeRate])
 
-  const inputHint = `建议价格 ${suggestFeeRate} shannons/byte`
+  const inputHint = t('price-switch.hintTip', { suggestFeeRate })
 
   return (
     <div>
@@ -135,7 +151,7 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
             {label}
           </label>
           <button
-            data-content={isStandard ? '切换到自定义价格' : '切换到单价'}
+            data-content={isStandard ? t('price-switch.switchToCustomPrice') : t('price-switch.switchToPrice')}
             className={styles.transferWrap}
             onClick={() => setType(isStandard ? PriceTypeEnum.Custom : PriceTypeEnum.Standard)}
             onKeyDown={() => {}}
@@ -147,7 +163,7 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
         {isStandard ? (
           <div className={styles.timeoutWrap}>
             <RingProgressBar percents={percent} color="#00C891" strokeWidth="3px" size="16px" backgroundColor="#CCC" />
-            <span>{`单价将在${countDown}秒后刷新`}</span>
+            <span>{t('price-switch.countDownTip', { countDown })}</span>
           </div>
         ) : null}
       </div>
@@ -167,7 +183,7 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
           value={localNumberFormatter(price)}
           onChange={handleInputChange}
           suffix="shannons/kB"
-          error={inputError ?? null}
+          error={inputError}
           hint={!inputError && inputHint ? inputHint : null}
         />
       )}

packages/neuron-ui/src/containers/Main/index.tsx

@@ -1,8 +1,10 @@
-import React, { useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-
+import { AppActions, StateDispatch } from 'states/stateProvider/reducer'
 import { useState as useGlobalState, useDispatch } from 'states'
+import { getFeeRateStats } from 'services/chain'
+import { DEFAULT_COUNT_DOWN } from 'utils/const'
 
 import Overview from 'components/Overview'
 import WalletWizard from 'components/WalletWizard'
@@ -147,14 +149,20 @@ const MainContent = () => {
   const history = useHistory()
   const location = useLocation()
   const {
-    app: { isAllowedToFetchList = true },
+    app: {
+      isAllowedToFetchList = true,
+      countDown,
+      feeRateStatics: { suggestFeeRate = 0 },
+    },
+
     wallet: { id: walletID = '' },
     chain,
     settings: { networks = [] },
   } = useGlobalState()
   const dispatch = useDispatch()
   const { networkID } = chain
   const [t, i18n] = useTranslation()
+  const intervalHandle = useRef<NodeJS.Timeout>()
 
   useSubscription({
     walletID,
@@ -182,6 +190,53 @@ const MainContent = () => {
     dispatch,
   })
   useOnLocaleChange(i18n)
+
+  useEffect(() => {
+    if (intervalHandle.current) {
+      clearTimeout(intervalHandle.current)
+    }
+
+    intervalHandle.current = setTimeout(() => {
+      dispatch({
+        type: AppActions.UpdateCountDown,
+        payload: countDown <= 0 ? DEFAULT_COUNT_DOWN : countDown - 1,
+      })
+    }, 1000)
+
+    return () => {
+      clearTimeout(intervalHandle.current)
+    }
+  }, [countDown])
+
+  const handleGetFeeRateStatis = useCallback((stateDispatch: StateDispatch) => {
+    getFeeRateStats()
+      .then(res => {
+        const { mean, median } = res
+        const suggested = res ? Math.max(1000, Number(mean), Number(median)) : 0
+
+        stateDispatch({
+          type: AppActions.GetFeeRateStatis,
+          payload: { ...res, suggestFeeRate: suggested },
+        })
+      })
+      .catch((err: Error) => {
+        stateDispatch({
+          type: AppActions.AddNotification,
+          payload: {
+            type: 'alert',
+            timestamp: +new Date(),
+            content: err.message,
+          },
+        })
+      })
+  }, [])
+
+  useEffect(() => {
+    if (countDown === DEFAULT_COUNT_DOWN || suggestFeeRate === 0) {
+      handleGetFeeRateStatis(dispatch)
+    }
+  }, [countDown, suggestFeeRate])
+
   const onContextMenu = useOnDefaultContextMenu(t)
   const routes = useRoutes(mainContents)
 

packages/neuron-ui/src/containers/Navbar/index.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { useDispatch, useState as useGlobalState } from 'states'
-import { AppActions, StateDispatch } from 'states/stateProvider/reducer'
-import { openExternal, showSettings, getFeeRateStatis } from 'services/remote'
+import { useState as useGlobalState } from 'states'
+import { openExternal, showSettings } from 'services/remote'
 
 import NetworkStatus from 'components/NetworkStatus'
 import SyncStatus from 'components/SyncStatus'
@@ -23,7 +22,6 @@ import {
 } from 'utils'
 
 import { Migrate } from 'services/subjects'
-import { DEFAULT_COUNT_DOWN } from 'utils/const'
 
 import styles from './navbar.module.scss'
 
@@ -60,7 +58,6 @@ const Navbar = () => {
   const history = useHistory()
   const { pathname } = useLocation()
   const neuronWallet = useGlobalState()
-  const dispatch = useDispatch()
   const {
     wallet: { name },
     chain: {
@@ -69,12 +66,7 @@ const Navbar = () => {
       syncState: { cacheTipBlockNumber, bestKnownBlockNumber, estimate, status, isLookingValidTarget, validTarget },
     },
     settings: { wallets = [], networks = [] },
-    app: {
-      countDown,
-      feeRateStatics: { suggestFeeRate = 0 },
-    },
   } = neuronWallet
-  const intervalHandle = useRef<any>(null)
   const [t, i18n] = useTranslation()
   useOnLocaleChange(i18n)
 
@@ -155,46 +147,6 @@ const Navbar = () => {
     bestBlockNumber >= 0 ? localNumberFormatter(bestBlockNumber) : '-'
   }`
 
-  useEffect(() => {
-    intervalHandle.current = setTimeout(() => {
-      dispatch({
-        type: AppActions.UpdateCountDown,
-        payload: countDown <= 0 ? DEFAULT_COUNT_DOWN : countDown - 1,
-      })
-    }, 1000)
-
-    return () => {
-      clearTimeout(intervalHandle.current)
-    }
-  }, [countDown])
-
-  const handleGetFeeRateStatis = useCallback((stateDispatch: StateDispatch) => {
-    getFeeRateStatis()
-      .then(res => {
-        const { result } = res as any
-        stateDispatch({
-          type: AppActions.GetFeeRateStatis,
-          payload: result,
-        })
-      })
-      .catch((err: Error) => {
-        stateDispatch({
-          type: AppActions.AddNotification,
-          payload: {
-            type: 'alert',
-            timestamp: +new Date(),
-            content: err.message,
-          },
-        })
-      })
-  }, [])
-
-  useEffect(() => {
-    if (countDown === DEFAULT_COUNT_DOWN || suggestFeeRate === 0) {
-      handleGetFeeRateStatis(dispatch)
-    }
-  }, [countDown, suggestFeeRate])
-
   return (
     <aside className={styles.sidebar}>
       <button

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

@@ -994,6 +994,19 @@
     },
     "dropdown": {
       "placeholder": "Please select..."
+    },
+    "price-switch": {
+      "price": "Price",
+      "customPrice": "Custom Price",
+      "errorTip": "Price must not be less than {{minPrice}} shannons/byte, please re-enter",
+      "hintTip": "Suggested price is {{suggestFeeRate}} shannons/byte",
+      "priceColumn": "Price {{priceValue}} shannons/byte | Fee {{feeValue}} CKB",
+      "fast": "Fast",
+      "standard": "Standard",
+      "slow": "Slow",
+      "countDownTip": "The price will refresh after {{countDown}} seconds",
+      "switchToCustomPrice": "Switch to custom price",
+      "switchToPrice": "Switch to price"
     }
   }
 }

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

@@ -986,6 +986,19 @@
     },
     "dropdown": {
       "placeholder": "請選擇 ..."
+    },
+    "price-switch": {
+      "price": "單價",
+      "customPrice": "自定義價格",
+      "errorTip": "價格設定最少不得少於 {{minPrice}} shannons/byte，請重新輸入",
+      "hintTip": "建議價格 {{suggestFeeRate}} shannons/byte",
+      "priceColumn": "單價 {{priceValue}} shannons/byte | 費用 {{feeValue}} CKB",
+      "fast": "快速",
+      "standard": "標準",
+      "slow": "慢速",
+      "countDownTip": "單價將在{{countDown}}秒後刷新",
+      "switchToCustomPrice": "切換到自定義價格",
+      "switchToPrice": "切換到單價"
     }
   }
 }

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

@@ -986,6 +986,19 @@
     },
     "dropdown": {
       "placeholder": "请选择 ..."
+    },
+    "price-switch": {
+      "price": "单价",
+      "customPrice": "自定义价格",
+      "errorTip": "价格设定最少不得少于 {{minPrice}} shannons/byte，请重新输入",
+      "hintTip": "建议价格 {{suggestFeeRate}} shannons/byte",
+      "priceColumn": "单价 {{priceValue}} shannons/byte | 费用 {{feeValue}} CKB",
+      "fast": "快速",
+      "standard": "标准",
+      "slow": "慢速",
+      "countDownTip": "单价将在{{countDown}}秒后刷新",
+      "switchToCustomPrice": "切换到自定义价格",
+      "switchToPrice": "切换到单价"
     }
   }
 }