feat(neuron-ui): show the error message from api controller on send view.

Author: Keith-CY

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,
   }
 }
 

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 (
     <Stack verticalFill tokens={{ childrenGap: 15, padding: '20px 0 0 0' }}>
@@ -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}
             />
           </Stack.Item>
         </Stack>
@@ -232,7 +235,7 @@ const Send = ({
           <PrimaryButton
             type="submit"
             onClick={onSubmit(walletID)}
-            disabled={sending || !isTransactionValid || !isAffordable || !send.generatedTx}
+            disabled={sending || !!errorMessageUnderTotal || !send.generatedTx}
             text={t('send.send')}
           />
         )}