fix(neuron-ui): add decimal validation on deposit value (#1093)

* fix(neuron-ui): add decimal validation on deposit value

* refactor(neuron-ui): use bigint in comparison

Author: Keith-CY

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

@@ -10,7 +10,8 @@ import { updateNervosDaoData, clearNervosDaoData } from 'states/stateProvider/ac
 import calculateGlobalAPY from 'utils/calculateGlobalAPY'
 import calculateFee from 'utils/calculateFee'
 import { shannonToCKBFormatter, CKBToShannonFormatter } from 'utils/formatters'
-import { MIN_DEPOSIT_AMOUNT, MEDIUM_FEE_RATE, CapacityUnit } from 'utils/const'
+import { MIN_DEPOSIT_AMOUNT, MEDIUM_FEE_RATE, SHANNON_CKB_RATIO, CapacityUnit } from 'utils/const'
+import { verifyAmount } from 'utils/validators'
 
 import { generateDepositTx, generateWithdrawTx, generateClaimTx } from 'services/remote'
 import { ckbCore } from 'services/chain'
@@ -59,27 +60,34 @@ const NervosDAO = ({
       }
       clearTimeout(timer)
       timer = setTimeout(() => {
-        if (+value < MIN_DEPOSIT_AMOUNT) {
+        setErrorMessage('')
+        clearGeneratedTx()
+
+        const verifyRes = verifyAmount(value)
+        if (verifyRes !== true) {
+          setErrorMessage(t(`messages.codes.${verifyRes.code}`, { fieldName: 'deposit' }))
+          return
+        }
+
+        if (BigInt(CKBToShannonFormatter(value)) < BigInt(MIN_DEPOSIT_AMOUNT * SHANNON_CKB_RATIO)) {
           setErrorMessage(t('nervos-dao.minimal-fee-required', { minimal: MIN_DEPOSIT_AMOUNT }))
-          clearGeneratedTx()
-        } else {
-          setErrorMessage('')
-          generateDepositTx({
-            feeRate: `${MEDIUM_FEE_RATE}`,
-            capacity: CKBToShannonFormatter(value, CapacityUnit.CKB),
-            walletID: wallet.id,
-          }).then(res => {
-            if (res.status === 1) {
-              dispatch({
-                type: AppActions.UpdateGeneratedTx,
-                payload: res.result,
-              })
-            } else {
-              clearGeneratedTx()
-              setErrorMessage(`${typeof res.message === 'string' ? res.message : res.message.content}`)
-            }
-          })
+          return
         }
+
+        generateDepositTx({
+          feeRate: `${MEDIUM_FEE_RATE}`,
+          capacity: CKBToShannonFormatter(value, CapacityUnit.CKB),
+          walletID: wallet.id,
+        }).then(res => {
+          if (res.status === 1) {
+            dispatch({
+              type: AppActions.UpdateGeneratedTx,
+              payload: res.result,
+            })
+          } else {
+            setErrorMessage(`${typeof res.message === 'string' ? res.message : res.message.content}`)
+          }
+        })
       }, 500)
       setDepositValue(value)
     },

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

@@ -270,7 +270,8 @@
         "mnemonic": "Mnemonic",
         "keystore-path": "Keystore File",
         "keystore-name": "Wallet name",
-        "keystore-password": "Password"
+        "keystore-password": "Password",
+        "deposit": "Deposit"
       },
       "codes": {
         "-3": "",

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

@@ -270,7 +270,8 @@
         "mnemonic": "助记词",
         "keystore-path": "Keystore 文件",
         "keystore-name": "钱包名称",
-        "keystore-password": "密码"
+        "keystore-password": "密码",
+        "deposit": "存入金额"
       },
       "codes": {
         "-3": "",

packages/neuron-ui/src/utils/formatters.ts

@@ -72,7 +72,7 @@ export const currencyFormatter = (
   return `${integer.replace(/\B(?=(\d{3})+(?!\d))/g, delimiter)}${dot}${decimal} ${unit}`
 }
 
-export const CKBToShannonFormatter = (amount: string = '0', unit: CapacityUnit) => {
+export const CKBToShannonFormatter = (amount: string = '0', unit: CapacityUnit = CapacityUnit.CKB) => {
   if (Number.isNaN(+amount)) {
     console.warn(`Amount is not a valid number`)
     return `${amount} ${unit}`

packages/neuron-ui/src/utils/validators.ts

@@ -1,6 +1,14 @@
-import { MAX_NETWORK_NAME_LENGTH } from 'utils/const'
+import {
+  MAX_NETWORK_NAME_LENGTH,
+  MIN_PASSWORD_LENGTH,
+  MAX_PASSWORD_LENGTH,
+  MIN_AMOUNT,
+  MAX_DECIMAL_DIGITS,
+  SHANNON_CKB_RATIO,
+  ErrorCode,
+} from 'utils/const'
+import { CKBToShannonFormatter } from 'utils/formatters'
 import { ckbCore } from 'services/chain'
-import { MIN_PASSWORD_LENGTH, MAX_PASSWORD_LENGTH, MIN_AMOUNT, MAX_DECIMAL_DIGITS, ErrorCode } from './const'
 
 export const verifyAddress = (address: string): boolean => {
   if (typeof address !== 'string' || address.length !== 46) {
@@ -14,27 +22,27 @@ export const verifyAddress = (address: string): boolean => {
 }
 
 export const verifyAmountRange = (amount: string = '') => {
-  return +amount >= MIN_AMOUNT
+  return BigInt(CKBToShannonFormatter(amount)) >= BigInt(MIN_AMOUNT * SHANNON_CKB_RATIO)
 }
 
 export const verifyAmount = (amount: string = '0') => {
   if (Number.isNaN(+amount)) {
     return { code: ErrorCode.FieldInvalid }
   }
-  if (+amount < 0) {
-    return { code: ErrorCode.NotNegative }
-  }
   const [, decimal = ''] = amount.split('.')
   if (decimal.length > MAX_DECIMAL_DIGITS) {
     return {
       code: ErrorCode.DecimalExceed,
     }
   }
+  if (BigInt(CKBToShannonFormatter(amount)) < BigInt(0)) {
+    return { code: ErrorCode.NotNegative }
+  }
   return true
 }
 
 export const verifyTotalAmount = (totalAmount: string, fee: string, balance: string) => {
-  if (+balance < 0) {
+  if (BigInt(balance) < BigInt(0)) {
     return false
   }
   return BigInt(totalAmount) + BigInt(fee) <= BigInt(balance)