fix ui bugs in send flows

packages/core-mobile/app/contexts/SendContext.tsx

@@ -26,8 +26,8 @@ interface SendContextState {
   setError: Dispatch<string | undefined>
   isSending: boolean
   setIsSending: Dispatch<boolean>
-  isValidating: boolean
-  setIsValidating: Dispatch<boolean>
+  canValidate: boolean
+  setCanValidate: Dispatch<boolean>
   isValid: boolean
 }
 
@@ -53,7 +53,7 @@ export const SendContextProvider = ({
   const { data: networkFee } = useNetworkFee(activeNetwork)
   const [error, setError] = useState<string | undefined>()
   const [isSending, setIsSending] = useState(false)
-  const [isValidating, setIsValidating] = useState(false)
+  const [canValidate, setCanValidate] = useState(false)
 
   const [defaultMaxFeePerGas, setDefaultMaxFeePerGas] = useState<bigint>(0n)
 
@@ -88,8 +88,8 @@ export const SendContextProvider = ({
     setError,
     isSending,
     setIsSending,
-    isValidating,
-    setIsValidating,
+    canValidate,
+    setCanValidate,
     isValid: error === undefined
   }
   return <SendContext.Provider value={state}>{children}</SendContext.Provider>

packages/core-mobile/app/screens/nft/send/NftSend.tsx

@@ -57,7 +57,7 @@ export default function NftSend({
     error,
     isSending,
     isValid,
-    isValidating
+    setCanValidate
   } = useSendContext()
   const { activeNetwork } = useNetworks()
   const activeAccount = useSelector(selectActiveAccount)
@@ -87,7 +87,7 @@ export default function NftSend({
   })
 
   const canSubmit =
-    !isValidating && !isSending && isValid && !!toAddress && error === undefined
+    !isSending && isValid && !!toAddress && error === undefined && touched
 
   const {
     saveRecentContact,
@@ -143,7 +143,11 @@ export default function NftSend({
     if (touched === false && toAddress) {
       setTouched(true)
     }
-  }, [toAddress, token, touched])
+  }, [toAddress, touched, setCanValidate])
+
+  useEffect(() => {
+    setCanValidate(touched)
+  }, [touched, setCanValidate])
 
   const onContactSelected = (
     item: Contact | Account,

packages/core-mobile/app/screens/send/components/SendAVM.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useSendContext } from 'contexts/SendContext'
 import { Network } from '@avalabs/core-chains-sdk'
 import { TokenWithBalanceAVM } from '@avalabs/vm-module-types'
@@ -26,17 +26,8 @@ const SendAVM = ({
   onSuccess: (txHash: string) => void
   onFailure: (txError: unknown) => void
 }): JSX.Element => {
-  const {
-    setToAddress,
-    token,
-    setToken,
-    maxAmount,
-    error,
-    isValid,
-    isValidating,
-    isSending,
-    maxFee
-  } = useSendContext()
+  const { setToAddress, token, maxAmount, error, isValid, isSending, maxFee } =
+    useSendContext()
   const activeAccount = useSelector(selectActiveAccount)
 
   const fromAddress = activeAccount?.addressAVM ?? ''
@@ -49,10 +40,6 @@ const SendAVM = ({
     account
   })
 
-  useEffect(() => {
-    setToken(nativeToken)
-  }, [nativeToken, setToken])
-
   const handleSend = async (): Promise<void> => {
     if (token === undefined) {
       return
@@ -79,7 +66,6 @@ const SendAVM = ({
       error={error}
       isValid={isValid}
       isSending={isSending}
-      isValidating={isValidating}
       onOpenQRScanner={onOpenQRScanner}
       onOpenAddressBook={onOpenAddressBook}
       onSelectContact={handleSelectContact}

packages/core-mobile/app/screens/send/components/SendPVM.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useSendContext } from 'contexts/SendContext'
 import { Network } from '@avalabs/core-chains-sdk'
 import { TokenWithBalancePVM } from '@avalabs/vm-module-types'
@@ -26,17 +26,8 @@ const SendPVM = ({
   onSuccess: (txHash: string) => void
   onFailure: (txError: unknown) => void
 }): JSX.Element => {
-  const {
-    setToAddress,
-    token,
-    setToken,
-    maxAmount,
-    error,
-    isValid,
-    isValidating,
-    isSending,
-    maxFee
-  } = useSendContext()
+  const { setToAddress, token, maxAmount, error, isValid, isSending, maxFee } =
+    useSendContext()
   const activeAccount = useSelector(selectActiveAccount)
 
   const fromAddress = activeAccount?.addressPVM ?? ''
@@ -49,10 +40,6 @@ const SendPVM = ({
     account
   })
 
-  useEffect(() => {
-    setToken(nativeToken)
-  }, [nativeToken, setToken])
-
   const handleSend = async (): Promise<void> => {
     if (token === undefined) {
       return
@@ -79,7 +66,6 @@ const SendPVM = ({
       error={error}
       isValid={isValid}
       isSending={isSending}
-      isValidating={isValidating}
       onOpenQRScanner={onOpenQRScanner}
       onOpenAddressBook={onOpenAddressBook}
       onSelectContact={handleSelectContact}

packages/core-mobile/app/screens/send/components/SendTokenForm.tsx

@@ -25,7 +25,6 @@ const SendTokenForm = ({
   addressPlaceholder,
   error,
   isValid,
-  isValidating,
   isSending,
   onOpenQRScanner,
   onOpenAddressBook,
@@ -37,15 +36,21 @@ const SendTokenForm = ({
   addressPlaceholder: string
   error: string | undefined
   isValid: boolean
-  isValidating: boolean
   isSending: boolean
   onOpenQRScanner: () => void
   onOpenAddressBook: () => void
   onSelectContact: (item: Contact | CorePrimaryAccount) => void
   onSend: () => void
 }): JSX.Element => {
-  const { setToken, token, setAmount, amount, toAddress, setToAddress } =
-    useSendContext()
+  const {
+    setToken,
+    token,
+    setAmount,
+    amount,
+    toAddress,
+    setToAddress,
+    setCanValidate
+  } = useSendContext()
   const [isAddressTouched, setIsAddressTouched] = useState(false)
   const [isTokenTouched, setIsTokenTouched] = useState(false)
   const [isAmountTouched, setIsAmountTouched] = useState(false)
@@ -108,7 +113,11 @@ const SendTokenForm = ({
     [isAddressTouched, isTokenTouched, isAmountTouched]
   )
 
-  const canSubmit = !isValidating && !isSending && isValid
+  useEffect(() => {
+    setCanValidate(isAllFieldsTouched)
+  }, [isAllFieldsTouched, setCanValidate])
+
+  const canSubmit = !isSending && isValid && isAllFieldsTouched
 
   return (
     <ScrollView contentContainerStyle={{ flexGrow: 1 }}>

packages/core-mobile/app/screens/send/hooks/useAVMSend.ts

@@ -17,11 +17,11 @@ const useAVMSend: SendAdapterAVM = ({
   const {
     setMaxAmount,
     setError,
-    setIsValidating,
     setIsSending,
     amount,
     token,
-    toAddress
+    toAddress,
+    canValidate
   } = useSendContext()
 
   const send = useCallback(async () => {
@@ -56,9 +56,6 @@ const useAVMSend: SendAdapterAVM = ({
   )
 
   const validate = useCallback(async () => {
-    setIsValidating(true)
-    setError(undefined)
-
     try {
       validateAVMSend({
         amount: amount?.bn,
@@ -67,25 +64,18 @@ const useAVMSend: SendAdapterAVM = ({
         token: token as TokenWithBalanceAVM,
         onCalculateMaxAmount: setMaxAmount
       })
+
+      setError(undefined)
     } catch (err) {
       handleError(err)
-    } finally {
-      setIsValidating(false)
     }
-  }, [
-    maxFee,
-    setMaxAmount,
-    setError,
-    handleError,
-    setIsValidating,
-    toAddress,
-    amount,
-    token
-  ])
+  }, [maxFee, setMaxAmount, setError, handleError, toAddress, amount, token])
 
   useEffect(() => {
-    validate()
-  }, [validate])
+    if (canValidate) {
+      validate()
+    }
+  }, [validate, canValidate])
 
   return {
     send

packages/core-mobile/app/screens/send/hooks/useBTCSend.ts

@@ -26,11 +26,11 @@ const useBTCSend: SendAdapterBTC = ({
   const {
     setMaxAmount,
     setError,
-    setIsValidating,
     setIsSending,
     toAddress,
     token,
-    amount
+    amount,
+    canValidate
   } = useSendContext()
   const provider = useBitcoinProvider(!!network.isTestnet)
 
@@ -63,9 +63,6 @@ const useBTCSend: SendAdapterBTC = ({
       return
     }
 
-    setIsValidating(true)
-    setError(undefined)
-
     try {
       const maxAmountValue = BigInt(
         Math.max(
@@ -88,13 +85,13 @@ const useBTCSend: SendAdapterBTC = ({
         maxFee,
         isMainnet
       })
+
+      setError(undefined)
     } catch (e) {
       if (e instanceof Error) {
         setError(e.message)
         Logger.error('failed to validate send', e)
       }
-    } finally {
-      setIsValidating(false)
     }
   }, [
     fromAddress,
@@ -104,7 +101,6 @@ const useBTCSend: SendAdapterBTC = ({
     isMainnet,
     setMaxAmount,
     setError,
-    setIsValidating,
     toAddress,
     token,
     amount
@@ -131,8 +127,10 @@ const useBTCSend: SendAdapterBTC = ({
   }, [isMainnet, maxFee, fromAddress, request, setIsSending, toAddress, amount])
 
   useEffect(() => {
-    validate()
-  }, [validate])
+    if (canValidate) {
+      validate()
+    }
+  }, [validate, canValidate])
 
   return {
     send

packages/core-mobile/app/screens/send/hooks/useEVMSend.ts

@@ -28,10 +28,10 @@ const useEVMSend: SendAdapterEVM = ({
     setMaxAmount,
     setError,
     setIsSending,
-    setIsValidating,
     token,
     toAddress,
-    amount
+    amount,
+    canValidate
   } = useSendContext()
   const provider = useEVMProvider(network)
 
@@ -78,9 +78,6 @@ const useEVMSend: SendAdapterEVM = ({
   )
 
   const validate = useCallback(async () => {
-    setIsValidating(true)
-    setError(undefined)
-
     try {
       validateBasicInputs(token, toAddress, maxFee)
 
@@ -120,18 +117,17 @@ const useEVMSend: SendAdapterEVM = ({
       }
 
       validateGasLimit(gasLimit)
+
+      setError(undefined)
     } catch (err) {
       handleError(err)
-    } finally {
-      setIsValidating(false)
     }
   }, [
     nativeToken,
     fromAddress,
     provider,
     handleError,
     setError,
-    setIsValidating,
     maxFee,
     setMaxAmount,
     token,
@@ -140,8 +136,10 @@ const useEVMSend: SendAdapterEVM = ({
   ])
 
   useEffect(() => {
-    validate()
-  }, [validate])
+    if (canValidate) {
+      validate()
+    }
+  }, [validate, canValidate])
 
   return {
     send