CU-86a5jjanf - NEON3 - BUG - Send screen isn't enabling the send button

src/renderer/src/components/TransactionFeeActionStep.tsx

@@ -36,8 +36,9 @@ export const TransactionFeeActionStep = ({ fee, isCalculatingFee, service }: TPr
       ) : (
         <div className="flex items-center gap-4.5">
           <span className="text-gray-100">
-            {fee} {service?.feeToken.symbol}
+            {fee ?? '0.00'} {service?.feeToken.symbol}
           </span>
+
           <span className="text-gray-300">{NumberHelper.currency(fiatFee, currency.label)}</span>
         </div>
       )}

src/renderer/src/routes/pages/Send/SendPageContent.tsx

@@ -121,12 +121,27 @@ export const SendPageContent = ({ account, recipientAddress }: TProps) => {
 
     for (const recipient of recipients) {
       if (!recipient.token || !recipient.amount || !recipient.address) {
+        if (!recipient.amount) {
+          clearErrors('selectedAccount')
+        }
+
         setError('recipients', '')
         return
       }
+
+      const amountNumber = NumberHelper.number(recipient.amount)
+      const tokenHash = UtilsHelper.normalizeHash(recipient.token!.token.hash)
+      const tokenBalance = balance.data?.tokensBalances.find(
+        tokenBalance => UtilsHelper.normalizeHash(tokenBalance.token.hash) === tokenHash
+      )
+
+      if (!tokenBalance || amountNumber > tokenBalance.amountNumber) {
+        setError('selectedAccount', t('errors.insufficientFunds'))
+        return
+      }
     }
 
-    clearErrors('recipients')
+    clearErrors(['recipients', 'selectedAccount'])
   }
 
   const handleSelectAccount = (account?: IAccountState) => {
@@ -213,8 +228,14 @@ export const SendPageContent = ({ account, recipientAddress }: TProps) => {
   useEffect(() => {
     if (balance.isLoading) return
 
+    const abortController = new AbortController()
+
     const handleCalculateFee = async () => {
       try {
+        // It works as a debounce
+        await UtilsHelper.sleep(1000)
+        if (abortController.signal.aborted) return
+
         const fields = await getSendFields()
         if (!fields || !isCalculableFee(fields.service)) {
           setData({ fee: undefined })
@@ -229,7 +250,7 @@ export const SendPageContent = ({ account, recipientAddress }: TProps) => {
         })
 
         setData({
-          fee: `${fee} ${fields.service.feeToken.symbol}`,
+          fee,
         })
 
         let totalFeeAmount = NumberHelper.number(fee)
@@ -255,40 +276,21 @@ export const SendPageContent = ({ account, recipientAddress }: TProps) => {
       } catch (error) {
         console.error(error)
         ToastHelper.error({ message: t('errors.feeError') })
+        setError('fee', t('errors.feeError'))
+        setData({ fee: undefined })
         throw error
       } finally {
         setData({ isCalculatingFee: false })
       }
     }
 
     handleCalculateFee()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [actionData.recipients, balance.data])
-
-  useEffect(() => {
-    const validateAmounts = () => {
-      for (const recipient of actionData.recipients) {
-        if (!recipient.amount || !recipient.token) {
-          continue
-        }
-
-        const amountNumber = NumberHelper.number(recipient.amount)
-        const tokenHash = UtilsHelper.normalizeHash(recipient.token!.token.hash)
-        const tokenBalance = balance.data?.tokensBalances.find(
-          tokenBalance => UtilsHelper.normalizeHash(tokenBalance.token.hash) === tokenHash
-        )
-
-        if (!tokenBalance || amountNumber > tokenBalance.amountNumber) {
-          setError('recipients', t('errors.insufficientFunds'))
-          return
-        }
-      }
 
-      clearErrors('recipients')
+    return () => {
+      abortController.abort()
     }
-
-    validateAmounts()
-  }, [actionData.recipients, balance.data?.tokensBalances, clearErrors, setError, t])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actionData.recipients, balance.data])
 
   useEffect(() => {
     handleSelectAccount(account)
@@ -359,7 +361,12 @@ export const SendPageContent = ({ account, recipientAddress }: TProps) => {
           />
         )}
 
-        {actionState.errors.fee && <AlertErrorBanner className="w-full mt-2" message={actionState.errors.fee} />}
+        {(actionState.errors.fee || actionState.errors.selectedAccount) && (
+          <AlertErrorBanner
+            className="w-full mt-2"
+            message={actionState.errors.fee || actionState.errors.selectedAccount || ''}
+          />
+        )}
 
         <Button
           className="max-w-[16rem] w-full mt-4"

src/renderer/src/routes/pages/Send/SendRecipient.tsx

@@ -201,7 +201,7 @@ export const SendRecipient = ({
           leftIcon={<VscCircleFilled className="text-gray-300 w-2 h-2" />}
         >
           <GreyAmountInput
-            value={recipient.amount}
+            value={recipient.amount ?? ''}
             onChange={handleChangeAmount}
             disabled={!selectedAccount || !recipient.token}
           />