Skip to content

feat(neuron-ui): show the error message from api controller on send v… #1070

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ashchan merged 2 commits into from
Nov 11, 2019
Merged

feat(neuron-ui): show the error message from api controller on send v… #1070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bf6dbc
feat(neuron-ui): show the error message from api controller on send v…
Keith-CY Nov 10, 2019
21fd5b1
feat(neuron-ui): show local error message ahead of remote error message
Keith-CY Nov 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 18 additions & 9 deletions packages/neuron-ui/src/components/Send/hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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, setErrorMessage])
}

const useOnSubmit = (items: TransactionOutput[], dispatch: StateDispatch) =>
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -235,8 +244,6 @@ export const useInitialize = (
fee,
totalAmount,
setTotalAmount,
isTransactionValid,
setIsTransactionValid,
useOnTransactionChange,
onItemChange,
addTransactionOutput,
Expand All @@ -247,6 +254,8 @@ export const useInitialize = (
onGetAmountErrorMessage,
onSubmit,
onClear,
errorMessage,
setErrorMessage,
}
}

Expand Down
16 changes: 9 additions & 7 deletions packages/neuron-ui/src/components/Send/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,6 @@ const Send = ({
fee,
totalAmount,
setTotalAmount,
isTransactionValid,
setIsTransactionValid,
useOnTransactionChange,
onItemChange,
onSubmit,
Expand All @@ -57,12 +55,16 @@ 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)
const errorMessageUnderTotal = verifyTotalAmount(totalAmount, fee, balance)
? errorMessage
: t(`messages.codes.${ErrorCode.AmountNotEnough}`)

return (
<Stack verticalFill tokens={{ childrenGap: 15, padding: '20px 0 0 0' }}>
Expand Down Expand Up @@ -178,7 +180,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 }}
Expand All @@ -192,7 +194,7 @@ const Send = ({
alt={t('send.total-amount')}
value={`${shannonToCKBFormatter(totalAmount)} CKB`}
readOnly
errorMessage={isAffordable ? '' : t(`messages.codes.${ErrorCode.AmountNotEnough}`)}
errorMessage={errorMessageUnderTotal}
/>
</Stack.Item>
</Stack>
Expand Down Expand Up @@ -232,7 +234,7 @@ const Send = ({
<PrimaryButton
type="submit"
onClick={onSubmit(walletID)}
disabled={sending || !isTransactionValid || !isAffordable || !send.generatedTx}
disabled={sending || !!errorMessageUnderTotal || !send.generatedTx}
text={t('send.send')}
/>
)}
Expand Down