From 7bf6dbc5c2644c4ac10f2fbb3de352e1284f35e2 Mon Sep 17 00:00:00 2001 From: Keith Date: Mon, 11 Nov 2019 01:07:51 +0800 Subject: [PATCH 1/2] feat(neuron-ui): show the error message from api controller on send view. --- .../neuron-ui/src/components/Send/hooks.ts | 27 ++++++++++++------- .../neuron-ui/src/components/Send/index.tsx | 17 +++++++----- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/neuron-ui/src/components/Send/hooks.ts b/packages/neuron-ui/src/components/Send/hooks.ts index 58bd0731b7..e8b0cd3adc 100644 --- a/packages/neuron-ui/src/components/Send/hooks.ts +++ b/packages/neuron-ui/src/components/Send/hooks.ts @@ -52,18 +52,18 @@ const useOnTransactionChange = ( items: TransactionOutput[], price: string, dispatch: StateDispatch, - setIsTransactionValid: Function, - setTotalAmount: Function + setTotalAmount: Function, + setErrorMessage: Function ) => { useEffect(() => { clearTimeout(generateTxTimer) + setErrorMessage('') generateTxTimer = setTimeout(() => { dispatch({ type: AppActions.UpdateGeneratedTx, payload: null, }) if (verifyTransactionOutputs(items)) { - setIsTransactionValid(true) const totalAmount = outputsToTotalAmount(items) setTotalAmount(totalAmount) const realParams = { @@ -81,16 +81,25 @@ const useOnTransactionChange = ( type: AppActions.UpdateGeneratedTx, payload: res.result, }) + } else { + throw new Error(res.message.content) } }) .catch((err: Error) => { - console.error(err) + dispatch({ + type: AppActions.UpdateGeneratedTx, + payload: '', + }) + setErrorMessage(err.message) }) } else { - setIsTransactionValid(false) + dispatch({ + type: AppActions.UpdateGeneratedTx, + payload: '', + }) } }, 300) - }, [walletID, items, price, dispatch, setIsTransactionValid, setTotalAmount]) + }, [walletID, items, price, dispatch, setTotalAmount]) } const useOnSubmit = (items: TransactionOutput[], dispatch: StateDispatch) => @@ -176,8 +185,8 @@ export const useInitialize = ( ) => { const fee = useMemo(() => calculateFee(generatedTx), [generatedTx]) - const [isTransactionValid, setIsTransactionValid] = useState(false) const [totalAmount, setTotalAmount] = useState('0') + const [errorMessage, setErrorMessage] = useState('') const updateTransactionOutput = useUpdateTransactionOutput(dispatch) const onItemChange = useOnItemChange(updateTransactionOutput) @@ -235,8 +244,6 @@ export const useInitialize = ( fee, totalAmount, setTotalAmount, - isTransactionValid, - setIsTransactionValid, useOnTransactionChange, onItemChange, addTransactionOutput, @@ -247,6 +254,8 @@ export const useInitialize = ( onGetAmountErrorMessage, onSubmit, onClear, + errorMessage, + setErrorMessage, } } diff --git a/packages/neuron-ui/src/components/Send/index.tsx b/packages/neuron-ui/src/components/Send/index.tsx index 80dcf6f9fa..b3ba259a8f 100644 --- a/packages/neuron-ui/src/components/Send/index.tsx +++ b/packages/neuron-ui/src/components/Send/index.tsx @@ -45,8 +45,6 @@ const Send = ({ fee, totalAmount, setTotalAmount, - isTransactionValid, - setIsTransactionValid, useOnTransactionChange, onItemChange, onSubmit, @@ -57,12 +55,17 @@ const Send = ({ onGetAddressErrorMessage, onGetAmountErrorMessage, onClear, + errorMessage, + setErrorMessage, } = useInitialize(walletID, send.outputs, send.generatedTx, dispatch, t) - useOnTransactionChange(walletID, send.outputs, send.price, dispatch, setIsTransactionValid, setTotalAmount) + useOnTransactionChange(walletID, send.outputs, send.price, dispatch, setTotalAmount, setErrorMessage) const leftStackWidth = '70%' const labelWidth = '140px' - const isAffordable = verifyTotalAmount(totalAmount, fee, balance) + let errorMessageUnderTotal = errorMessage + if (!errorMessageUnderTotal && !verifyTotalAmount(totalAmount, fee, balance)) { + errorMessageUnderTotal = t(`messages.codes.${ErrorCode.AmountNotEnough}`) + } return ( @@ -178,7 +181,7 @@ const Send = ({ styles={{ root: { width: leftStackWidth, - display: send.outputs.length > 1 || !isAffordable ? 'flex' : 'none', + display: send.outputs.length > 1 || errorMessageUnderTotal ? 'flex' : 'none', }, }} tokens={{ childrenGap: 20 }} @@ -192,7 +195,7 @@ const Send = ({ alt={t('send.total-amount')} value={`${shannonToCKBFormatter(totalAmount)} CKB`} readOnly - errorMessage={isAffordable ? '' : t(`messages.codes.${ErrorCode.AmountNotEnough}`)} + errorMessage={errorMessageUnderTotal} /> @@ -232,7 +235,7 @@ const Send = ({ )} From 21fd5b1631ceae2ca54df63ec8dc62579c788a97 Mon Sep 17 00:00:00 2001 From: Keith Date: Mon, 11 Nov 2019 09:35:07 +0800 Subject: [PATCH 2/2] feat(neuron-ui): show local error message ahead of remote error message --- packages/neuron-ui/src/components/Send/hooks.ts | 2 +- packages/neuron-ui/src/components/Send/index.tsx | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/neuron-ui/src/components/Send/hooks.ts b/packages/neuron-ui/src/components/Send/hooks.ts index e8b0cd3adc..03f99089ee 100644 --- a/packages/neuron-ui/src/components/Send/hooks.ts +++ b/packages/neuron-ui/src/components/Send/hooks.ts @@ -99,7 +99,7 @@ const useOnTransactionChange = ( }) } }, 300) - }, [walletID, items, price, dispatch, setTotalAmount]) + }, [walletID, items, price, dispatch, setTotalAmount, setErrorMessage]) } const useOnSubmit = (items: TransactionOutput[], dispatch: StateDispatch) => diff --git a/packages/neuron-ui/src/components/Send/index.tsx b/packages/neuron-ui/src/components/Send/index.tsx index b3ba259a8f..79447fbaf6 100644 --- a/packages/neuron-ui/src/components/Send/index.tsx +++ b/packages/neuron-ui/src/components/Send/index.tsx @@ -62,10 +62,9 @@ const Send = ({ const leftStackWidth = '70%' const labelWidth = '140px' - let errorMessageUnderTotal = errorMessage - if (!errorMessageUnderTotal && !verifyTotalAmount(totalAmount, fee, balance)) { - errorMessageUnderTotal = t(`messages.codes.${ErrorCode.AmountNotEnough}`) - } + const errorMessageUnderTotal = verifyTotalAmount(totalAmount, fee, balance) + ? errorMessage + : t(`messages.codes.${ErrorCode.AmountNotEnough}`) return (