From a2503ffd8433078fe5d21e110ddb68ad0cd46a4d Mon Sep 17 00:00:00 2001 From: Keith Date: Thu, 22 Aug 2019 11:22:32 +0800 Subject: [PATCH] feat(neuron-ui): add more detailed error messages of the amount field --- .../neuron-ui/src/components/Send/hooks.ts | 34 ++++++++----------- packages/neuron-ui/src/locales/en.json | 8 ++--- packages/neuron-ui/src/locales/zh.json | 8 ++--- packages/neuron-ui/src/utils/const.ts | 4 ++- 4 files changed, 26 insertions(+), 28 deletions(-) diff --git a/packages/neuron-ui/src/components/Send/hooks.ts b/packages/neuron-ui/src/components/Send/hooks.ts index 434b2c2944..f77829c74b 100644 --- a/packages/neuron-ui/src/components/Send/hooks.ts +++ b/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 -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) } diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json index ce243c4eb6..6ca546ab51 100644 --- a/packages/neuron-ui/src/locales/en.json +++ b/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", diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json index 73808b1c64..21c126d427 100644 --- a/packages/neuron-ui/src/locales/zh.json +++ b/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": "同步中", diff --git a/packages/neuron-ui/src/utils/const.ts b/packages/neuron-ui/src/utils/const.ts index 076c5e389f..1dfa352b08 100644 --- a/packages/neuron-ui/src/utils/const.ts +++ b/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',