[LW-8962] Fix debounce time for handle resolver and wrong verifying setting for status (#690)

* fix: fixes debounce time for handle resolver too low and wrong setting for verifying status

* feat(core): adds disable state on input field for verifying handles

* feat(core): adjusting time out of handle validation

* feat(core): adding disabled state UI on verifying changes

* feat(core): simplifying a line in core for focus state

Author: VanessaPC

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/AddressInput.tsx

@@ -97,6 +97,8 @@ export const AddressInput = ({ row, currentNetwork, isPopupView }: AddressInputP
   const resolveHandle = useMemo(
     () =>
       debounce(async () => {
+        setHandleVerificationState(HandleVerificationState.VERIFYING);
+
         if (isAddressInputInvalidHandle) {
           setHandleVerificationState(HandleVerificationState.INVALID);
         }
@@ -166,7 +168,6 @@ export const AddressInput = ({ row, currentNetwork, isPopupView }: AddressInputP
     }
 
     if (isAddressInputValueHandle) {
-      setHandleVerificationState(HandleVerificationState.VERIFYING);
       resolveHandle();
     } else {
       setHandleVerificationState(undefined);

packages/core/src/ui/components/DestinationAddressInput/DestinationAddressInput.tsx

@@ -65,8 +65,8 @@ export const DestinationAddressInput = ({
   const [focused, setFocused] = useState<boolean>(false);
 
   useEffect(() => {
-    if (value.name) setFocused(false);
-  }, [value]);
+    if (value.name && handle === HandleVerificationState.VERIFYING) setFocused(false);
+  }, [value, handle]);
 
   const customIcon = useMemo(() => {
     let Icon;
@@ -118,7 +118,7 @@ export const DestinationAddressInput = ({
       options={options}
       loading={handle === HandleVerificationState.VERIFYING}
       customIcon={customIcon}
-      disabled={exists}
+      disabled={exists || handle === HandleVerificationState.VERIFYING}
       invalid={valid === false}
       onInputBlur={() => setFocused(false)}
       onInputFocus={() => setFocused(true)}

packages/core/src/ui/utils/handle.ts

@@ -1,7 +1,7 @@
 const ADA_HANDLE_PREFIX = '$';
 const ADA_HANDLE_THRESHOLD = 2;
 
-export const HANDLE_DEBOUNCE_TIME = 1000;
+export const HANDLE_DEBOUNCE_TIME = 700;
 export const isHandle = (value: string): boolean =>
   value !== undefined &&
   value.length > 0 &&