Prevent read-only address submission when validating input

tahowallet · Dec 15, 2023 · 8316b24 · 8316b24
1 parent e416e29
commit 8316b24
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/ui/components/Shared/SharedAddressInput.tsx b/ui/components/Shared/SharedAddressInput.tsx
@@ -1,5 +1,11 @@
 import { HexString } from "@tallyho/tally-background/types"
-import React, { ReactElement, useEffect, useState } from "react"
+import React, {
+  Dispatch,
+  ReactElement,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react"
 import { useDelayContentChange } from "../../hooks"
 import { useAddressOrNameValidation } from "../../hooks/validation-hooks"
 
@@ -16,6 +22,7 @@ type Props = {
   id?: string
   placeholder?: string
   isEmpty?: boolean
+  setIsValidating?: Dispatch<SetStateAction<boolean>>
 }
 
 export default function SharedAddressInput({
@@ -26,6 +33,7 @@ export default function SharedAddressInput({
   id,
   placeholder,
   isEmpty,
+  setIsValidating,
 }: Props): ReactElement {
   const [inputValue, setInputValue] = useState(value ?? "")
   const debouncedValue = useDelayContentChange(
@@ -41,6 +49,12 @@ export default function SharedAddressInput({
     handleInputChange(debouncedValue)
   }, [debouncedValue, handleInputChange])
 
+  useEffect(() => {
+    if (setIsValidating !== undefined) {
+      setIsValidating(isValidating)
+    }
+  }, [setIsValidating, isValidating])
+
   return (
     <>
       <SharedInput

diff --git a/ui/pages/Onboarding/Tabbed/ViewOnlyWallet.tsx b/ui/pages/Onboarding/Tabbed/ViewOnlyWallet.tsx
@@ -21,6 +21,8 @@ export default function ViewOnlyWallet(): ReactElement {
     AddressOnNetwork | undefined
   >(undefined)
 
+  const [isValidating, setIsValidating] = useState(false)
+
   const { t } = useTranslation("translation", {
     keyPrefix: "onboarding.tabbed.addWallet.viewOnly",
   })
@@ -42,7 +44,7 @@ export default function ViewOnlyWallet(): ReactElement {
   )
 
   const handleSubmitViewOnlyAddress = useCallback(async () => {
-    if (addressOnNetwork === undefined) {
+    if (addressOnNetwork === undefined || isValidating) {
       return
     }
 
@@ -61,7 +63,7 @@ export default function ViewOnlyWallet(): ReactElement {
 
     dispatch(setNewSelectedAccount(addressOnNetwork))
     setRedirect(true)
-  }, [dispatch, addressOnNetwork])
+  }, [dispatch, addressOnNetwork, isValidating])
 
   // Redirect to the final onboarding tab once an account is set
   if (redirect) {
@@ -91,7 +93,10 @@ export default function ViewOnlyWallet(): ReactElement {
           }}
         >
           <div className="input_wrap">
-            <SharedAddressInput onAddressChange={handleNewAddress} />
+            <SharedAddressInput
+              onAddressChange={handleNewAddress}
+              setIsValidating={setIsValidating}
+            />
           </div>
           <SharedButton
             type="primary"