Improve ENS support (accept all TLDs)

packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx

@@ -1,28 +1,34 @@
 import { useCallback, useEffect, useState } from "react";
 import { blo } from "blo";
-import { isAddress } from "viem";
-import { Address } from "viem";
+import { useDebounce } from "usehooks-ts";
+import { Address, isAddress } from "viem";
 import { useEnsAddress, useEnsAvatar, useEnsName } from "wagmi";
-import { CommonInputProps, InputBase } from "~~/components/scaffold-eth";
-
-// ToDo:  move this function to an utility file
-const isENS = (address = "") => address.endsWith(".eth") || address.endsWith(".xyz");
+import { CommonInputProps, InputBase, isENS } from "~~/components/scaffold-eth";
 
 /**
  * Address input with ENS name resolution
  */
 export const AddressInput = ({ value, name, placeholder, onChange, disabled }: CommonInputProps<Address | string>) => {
+  // Debounce the input to keep clean RPC calls when resolving ENS names
+  // If the input is an address, we don't need to debounce it
+  const _debouncedValue = useDebounce(value, 500);
+  const debouncedValue = isAddress(value) ? value : _debouncedValue;
+  const isDebouncedValueLive = debouncedValue === value;
+
+  // If the user changes the input after an ENS name is already resolved, we want to remove the stale result
+  const settledValue = isDebouncedValueLive ? debouncedValue : undefined;
+
   const { data: ensAddress, isLoading: isEnsAddressLoading } = useEnsAddress({
-    name: value,
-    enabled: isENS(value),
+    name: settledValue,
+    enabled: isENS(debouncedValue),
     chainId: 1,
     cacheTime: 30_000,
   });
 
   const [enteredEnsName, setEnteredEnsName] = useState<string>();
   const { data: ensName, isLoading: isEnsNameLoading } = useEnsName({
-    address: value,
-    enabled: isAddress(value),
+    address: settledValue,
+    enabled: isAddress(debouncedValue),
     chainId: 1,
     cacheTime: 30_000,
   });
@@ -39,9 +45,9 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
     if (!ensAddress) return;
 
     // ENS resolved successfully
-    setEnteredEnsName(value);
+    setEnteredEnsName(debouncedValue);
     onChange(ensAddress);
-  }, [ensAddress, onChange, value]);
+  }, [ensAddress, onChange, debouncedValue]);
 
   const handleChange = useCallback(
     (newValue: Address) => {
@@ -75,9 +81,11 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
         )
       }
       suffix={
-        // Don't want to use nextJS Image here (and adding remote patterns for the URL)
-        // eslint-disable-next-line @next/next/no-img-element
-        value && <img alt="" className="!rounded-full" src={blo(value as `0x${string}`)} width="35" height="35" />
+        debouncedValue && (
+          // Don't want to use nextJS Image here (and adding remote patterns for the URL)
+          // eslint-disable-next-line @next/next/no-img-element
+          <img alt="" className="!rounded-full" src={blo(debouncedValue as `0x${string}`)} width="35" height="35" />
+        )
       }
     />
   );

packages/nextjs/components/scaffold-eth/Input/utils.ts

@@ -105,3 +105,7 @@ export const isValidInteger = (dataType: IntegerVariant, value: bigint | string,
   }
   return true;
 };
+
+// Treat any dot-separated string as a potential ENS name
+const ensRegex = /.+\..+/;
+export const isENS = (address = "") => ensRegex.test(address);