feat(neuron-ui): add more detailed error messages of the amount field

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

@@ -4,15 +4,13 @@ import { IDropdownOption } from 'office-ui-fabric-react'
 import { AppActions, StateDispatch } from 'states/stateProvider/reducer'
 import { calculateCycles } from 'services/remote/wallets'
 
-import { Message } from 'utils/const'
+import { Message, MAX_DECIMAL_DIGITS } from 'utils/const'
 import { verifyAddress, verifyAmountRange } from 'utils/validators'
 import { outputsToTotalCapacity } from 'utils/formatters'
 import { TransactionOutput } from '.'
 
 let cyclesTimer: ReturnType<typeof setTimeout>
 
-const MAX_DECIMAL_DIGITS = 8
-
 const validateTransactionParams = ({ items, dispatch }: { items: TransactionOutput[]; dispatch?: StateDispatch }) => {
   const errorAction = {
     type: AppActions.AddNotification,
@@ -39,22 +37,27 @@ const validateTransactionParams = ({ items, dispatch }: { items: TransactionOutp
       }
       if (Number.isNaN(+item.amount) || +item.amount < 0) {
         errorAction.payload.content = Message.InvalidAmount
-        return true
-      }
-      if (!verifyAmountRange(item.amount)) {
-        errorAction.payload.content = Message.AmountTooSmall
+        errorAction.payload.meta = { amount: item.amount }
         return true
       }
       const [, decimal = ''] = item.amount.split('.')
       if (decimal.length > MAX_DECIMAL_DIGITS) {
-        errorAction.payload.content = Message.InvalidAmount
+        errorAction.payload.content = Message.DecimalExceed
+        errorAction.payload.meta = { amount: item.amount }
+        return true
+      }
+      if (!verifyAmountRange(item.amount)) {
+        errorAction.payload.content = Message.AmountTooSmall
+        errorAction.payload.meta = { amount: item.amount }
         return true
       }
       return false
     }
   )
-  if (invalid && dispatch) {
-    dispatch(errorAction)
+  if (invalid) {
+    if (dispatch) {
+      dispatch(errorAction)
+    }
     return false
   }
   return true
@@ -156,17 +159,10 @@ const useOnItemChange = (updateTransactionOutput: Function) =>
     ) => {
       if (undefined !== value) {
         if (field === 'amount') {
-          const amount = value.replace(/[^\d.]/g, '')
-          if (Number.isNaN(+amount)) {
+          if (Number.isNaN(+value) || /[^\d.]/.test(value)) {
             return
           }
-
-          const [, decimal] = amount.split('.')
-          if (typeof decimal === 'string' && decimal.length > MAX_DECIMAL_DIGITS) {
-            return
-          }
-
-          updateTransactionOutput(field)(idx)(amount)
+          updateTransactionOutput(field)(idx)(value)
         } else {
           updateTransactionOutput(field)(idx)(value)
         }

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

@@ -240,8 +240,6 @@
       "protocol-required": "Protocol is required",
       "length-of-name-should-be-less-than-or-equal-to": "Length of name should be less than or equal to {{length}}",
       "network-name-used": "Network name is used",
-      "invalid-amount": "Invalid amount",
-      "amount-not-enough": "Amount is not enough",
       "is-unremovable": "{{target}} is unremovable",
       "create-wallet-success": "You have created wallet '{{name}}' successfully",
       "network-is-not-found": "Network is not found",
@@ -256,7 +254,6 @@
       "invalid-mnemonic": "Invalid mnemonic words",
       "camera-not-available-or-disabled": "Camera is unavailable or disabled",
       "can-not-find-the-default-address": "Cannot find the default address",
-      "amount-too-small": "Amount should not be less than 61 CKB",
       "create-wallet-successfully": "Create a wallet successfully",
       "import-wallet-successfully": "Import a wallet successfully",
       "update-wallet-successfully": "Update the wallet successfully",
@@ -272,7 +269,10 @@
       "rpc-url-should-have-no-whitespaces": "The RPC URL should have no whitespaces",
       "is-required": "{{field}} is required",
       "is-used": "{{field}} is used",
-      "invalid-address": "{{address}} is an invalid address"
+      "invalid-address": "{{address}} is an invalid address",
+      "amount-decimal-exceed": "The amount {{amount}} CKB should has less than 9 decimal digits",
+      "invalid-amount": "The amount {{amount}} CKB is invalid",
+      "amount-too-small": "The amount {{amount}} CKB is too small, please set a value large than or equal to 61 CKB"
     },
     "sync": {
       "syncing": "Syncing",

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

@@ -240,8 +240,6 @@
       "protocol-required": "请指定 URL 协议",
       "length-of-name-should-be-less-than-or-equal-to": "名称长度应不大于 {{length}}",
       "network-name-used": "节点名称已存在",
-      "invalid-amount": "无效的价值",
-      "amount-not-enough": "余额不足",
       "is-unremovable": "{{target}}不可删除",
       "create-wallet-success": "您已成功创建钱包 '{{name}}'",
       "network-is-not-found": "未找到节点信息",
@@ -256,7 +254,6 @@
       "invalid-mnemonic": "助记词不合法",
       "camera-not-available-or-disabled": "摄像头不可用或被禁用",
       "can-not-find-the-default-address": "未获得默认地址",
-      "amount-too-small": "金额应不小于 61 CKB",
       "create-wallet-successfully": "新建钱包成功",
       "import-wallet-successfully": "导入钱包成功",
       "update-wallet-successfully": "已更新钱包信息",
@@ -272,7 +269,10 @@
       "network-address-should-have-no-whitespaces": "RPC 地址不能包含空格",
       "is-required": "{{field}}是必须的",
       "is-used": "{{field}}已使用",
-      "invalid-address": "{{address}} 是无效的地址"
+      "invalid-address": "{{address}} 是无效的地址",
+      "amount-decimal-exceed": "金额 {{amount}} 的小数不应超过 8 位",
+      "invalid-amount": "金额 {{amount} 是无效的数字",
+      "amount-too-small": "金额 {{amount}} 太小, 请设定一个不小于 61 CKB 的值"
     },
     "sync": {
       "syncing": "同步中",

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

@@ -8,6 +8,8 @@ export const UNREMOVABLE_NETWORK = 'Testnet'
 export const UNREMOVABLE_NETWORK_ID = '0'
 export const CONFIRMATION_THRESHOLD = 10
 
+export const MAX_DECIMAL_DIGITS = 8
+
 export enum ConnectionStatus {
   Online = 'online',
   Offline = 'offline',
@@ -55,7 +57,7 @@ export enum Message {
   AtLeastOneAddressNeeded = 'messages.at-least-one-address-needed',
   InvalidAddress = 'messages.invalid-address',
   InvalidAmount = 'messages.invalid-amount',
-  AmountNotEnough = 'messages.amount-not-enough',
+  DecimalExceed = 'messages.amount-decimal-exceed',
   IsUnremovable = 'messages.is-unremovable',
   ProtocolRequired = 'messages.protocol-required',
   AmountTooSmall = 'messages.amount-too-small',