Prevent read-only address submission when validating input (#3705)

Resolves #3686

## What has been done:
Refactored read-only wallet form, not to submit the form automatically -
preventing the infinite loading spinner

## Testing
- [x] Enter invalid data and click on button - nothing happens
- [x] Enter invalid data and click Enter - nothing happens
- [x] Enter valid data and click on button - form submits
- [x] Enter invalid data and click Enter - form submits

Latest build:
[extension-builds-3705](https://github.com/tahowallet/extension/suites/19134208688/artifacts/1121095791)
(as of Mon, 18 Dec 2023 10:49:33 GMT).

ui/components/Shared/SharedAddressInput.tsx

@@ -13,6 +13,7 @@ type Props = {
     value: { address: HexString; name?: string } | undefined,
   ) => void
   onFocus?: () => void
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
   id?: string
   placeholder?: string
   isEmpty?: boolean
@@ -23,6 +24,7 @@ export default function SharedAddressInput({
   label,
   onAddressChange,
   onFocus,
+  onKeyDown,
   id,
   placeholder,
   isEmpty,
@@ -48,6 +50,7 @@ export default function SharedAddressInput({
         label={label}
         onChange={setInputValue}
         onFocus={onFocus}
+        onKeyDown={onKeyDown}
         errorMessage={errorMessage}
         id={id}
         placeholder={placeholder}

ui/components/Shared/SharedInput.tsx

@@ -14,6 +14,7 @@ interface Props<T> {
   value?: string | undefined
   onChange?: (value: T | undefined) => void
   onFocus?: () => void
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
   errorMessage?: string
   warningMessage?: string
   autoFocus?: boolean
@@ -37,6 +38,7 @@ export function SharedTypedInput<T = string>(props: Props<T>): ReactElement {
     name,
     onChange,
     onFocus,
+    onKeyDown,
     value: currentValue,
     errorMessage,
     warningMessage,
@@ -92,6 +94,7 @@ export function SharedTypedInput<T = string>(props: Props<T>): ReactElement {
           handleInputChange(event.target.value)
         }
         onFocus={onFocus}
+        onKeyDown={onKeyDown}
         data-empty={inputValue.trim().length < 1}
         className={classNames({
           error: !isEmpty && (errorMessage ?? parserError !== undefined),

ui/pages/Onboarding/Tabbed/ViewOnlyWallet.tsx

@@ -42,9 +42,7 @@ export default function ViewOnlyWallet(): ReactElement {
   )
 
   const handleSubmitViewOnlyAddress = useCallback(async () => {
-    if (addressOnNetwork === undefined) {
-      return
-    }
+    if (addressOnNetwork === undefined) return
 
     await dispatch(addAddressNetwork(addressOnNetwork))
 
@@ -63,6 +61,22 @@ export default function ViewOnlyWallet(): ReactElement {
     setRedirect(true)
   }, [dispatch, addressOnNetwork])
 
+  const handleFormSubmitOnEnter = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    if (event.key === "Enter") {
+      event.preventDefault()
+      handleSubmitViewOnlyAddress()
+    }
+  }
+
+  const handleFormSubmitOnClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    event.preventDefault()
+    handleSubmitViewOnlyAddress()
+  }
+
   // Redirect to the final onboarding tab once an account is set
   if (redirect) {
     return <Redirect to={OnboardingRoutes.ONBOARDING_COMPLETE} />
@@ -84,23 +98,20 @@ export default function ViewOnlyWallet(): ReactElement {
         </div>
       </header>
       <div className="content">
-        <form
-          onSubmit={(event) => {
-            event.preventDefault()
-            handleSubmitViewOnlyAddress()
-          }}
-        >
+        <form>
           <div className="input_wrap">
-            <SharedAddressInput onAddressChange={handleNewAddress} />
+            <SharedAddressInput
+              onAddressChange={handleNewAddress}
+              onKeyDown={handleFormSubmitOnEnter}
+            />
           </div>
           <SharedButton
             type="primary"
             size="large"
-            onClick={handleSubmitViewOnlyAddress}
+            onClick={handleFormSubmitOnClick}
             isDisabled={addressOnNetwork === undefined}
             showLoadingOnClick
             center
-            isFormSubmit
           >
             {t("submit")}
           </SharedButton>