Fix UI bugs in send flow (#2090)

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
 }
 
@@ -51,9 +51,9 @@ export const SendContextProvider = ({
   const [toAddress, setToAddress] = useState<string>()
 
   const { data: networkFee } = useNetworkFee(activeNetwork)
-  const [error, setError] = useState<string | undefined>()
+  const [error, setError] = useState<string | undefined>(NOT_TOUCHED_ERROR)
   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>
@@ -98,3 +98,5 @@ export const SendContextProvider = ({
 export function useSendContext(): SendContextState {
   return useContext(SendContext)
 }
+
+const NOT_TOUCHED_ERROR = ''

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

@@ -25,14 +25,13 @@ import { useNavigation, useRoute } from '@react-navigation/native'
 import { NFTDetailsSendScreenProps } from 'navigation/types'
 import useEVMSend from 'screens/send/hooks/useEVMSend'
 import { useSelector } from 'react-redux'
-import { selectTokensWithBalance } from 'store/balance'
-import { NetworkTokenWithBalance, TokenType } from '@avalabs/vm-module-types'
 import { audioFeedback, Audios } from 'utils/AudioFeedback'
 import { isUserRejectedError } from 'store/rpc/providers/walletConnect/utils'
 import { showTransactionErrorToast } from 'utils/toast'
 import { getJsonRpcErrorMessage } from 'utils/getJsonRpcErrorMessage'
 import { useSendContext } from 'contexts/SendContext'
 import QRScanSVG from 'components/svg/QRScanSVG'
+import { useNativeTokenWithBalance } from 'screens/send/hooks/useNativeTokenWithBalance'
 
 type NftSendScreenProps = {
   onOpenAddressBook: () => void
@@ -57,15 +56,12 @@ export default function NftSend({
     error,
     isSending,
     isValid,
-    isValidating
+    setCanValidate
   } = useSendContext()
   const { activeNetwork } = useNetworks()
   const activeAccount = useSelector(selectActiveAccount)
   const fromAddress = activeAccount?.addressC ?? ''
-  const tokens = useSelector(selectTokensWithBalance)
-  const nativeToken = tokens.find(
-    t => t.type === TokenType.NATIVE
-  ) as NetworkTokenWithBalance
+  const nativeToken = useNativeTokenWithBalance()
   const [touched, setTouched] = useState(false)
 
   const { send } = useEVMSend({
@@ -77,7 +73,7 @@ export default function NftSend({
   })
 
   const canSubmit =
-    !isValidating && !isSending && isValid && !!toAddress && error === undefined
+    !isSending && isValid && !!toAddress && error === undefined && touched
 
   const {
     saveRecentContact,
@@ -133,7 +129,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/SendTokenScreen.tsx

@@ -10,11 +10,9 @@ import { audioFeedback, Audios } from 'utils/AudioFeedback'
 import { isUserRejectedError } from 'store/rpc/providers/walletConnect/utils'
 import { showTransactionErrorToast } from 'utils/toast'
 import { getJsonRpcErrorMessage } from 'utils/getJsonRpcErrorMessage'
-import { selectTokensWithBalance } from 'store/balance'
 import { useSelector } from 'react-redux'
 import {
   NetworkTokenWithBalance,
-  TokenType,
   TokenWithBalanceAVM,
   TokenWithBalanceBTC,
   TokenWithBalancePVM
@@ -26,6 +24,7 @@ import SendEVM from './components/SendEVM'
 import SendBTC from './components/SendBTC'
 import SendAVM from './components/SendAVM'
 import SendPVM from './components/SendPVM'
+import { useNativeTokenWithBalance } from './hooks/useNativeTokenWithBalance'
 
 type SendTokenScreenNavigationProp = SendTokensScreenProps<
   typeof AppNavigation.Send.Send
@@ -40,8 +39,7 @@ const SendTokenScreen: FC = () => {
   const { setToken, setToAddress } = useSendContext()
   const { activeNetwork } = useNetworks()
   const activeAccount = useSelector(selectActiveAccount)
-  const tokens = useSelector(selectTokensWithBalance)
-  const nativeToken = tokens.find(t => t.type === TokenType.NATIVE)
+  const nativeToken = useNativeTokenWithBalance()
 
   useEffect(() => {
     if (params?.token) {

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/SendBTC.tsx

@@ -29,7 +29,6 @@ const SendBTC = ({
     maxAmount,
     error,
     isValid,
-    isValidating,
     isSending,
     maxFee
   } = useSendContext()
@@ -70,7 +69,6 @@ const SendBTC = ({
       error={error}
       isValid={isValid}
       isSending={isSending}
-      isValidating={isValidating}
       onOpenQRScanner={onOpenQRScanner}
       onOpenAddressBook={onOpenAddressBook}
       onSelectContact={handleSelectContact}

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

@@ -24,16 +24,8 @@ const SendEVM = ({
   onSuccess: (txHash: string) => void
   onFailure: (txError: unknown) => void
 }): JSX.Element => {
-  const {
-    setToAddress,
-    token,
-    maxAmount,
-    error,
-    isValid,
-    isValidating,
-    isSending,
-    maxFee
-  } = useSendContext()
+  const { setToAddress, token, maxAmount, error, isValid, isSending, maxFee } =
+    useSendContext()
   const fromAddress = account?.addressC ?? ''
 
   const { send } = useEVMSend({
@@ -70,7 +62,6 @@ const SendEVM = ({
       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 }}>