Merge pull request #110 from xmtp-labs/ar/fix-ens

fix: ENS lookup and search

src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import {useEffect, useState} from 'react';
+
+export function useDebounce<T>(value: T, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

src/hooks/useEnsAddress.ts

@@ -1,21 +1,27 @@
 import {useEffect, useState} from 'react';
 import {getEnsAddress} from 'viem/ens';
 import {viemClient} from '../utils/viemClient';
+import {useDebounce} from './useDebounce';
 
 export const useEnsAddress = (searchText?: string) => {
   const [ensAddress, setEnsAddress] = useState<string | null>(null);
+  const debouncedSearchText = useDebounce(searchText, 250);
 
   useEffect(() => {
-    if (searchText) {
+    if (debouncedSearchText) {
       getEnsAddress(viemClient, {
-        name: searchText,
-      }).then(address => {
-        setEnsAddress(address);
-      });
+        name: debouncedSearchText,
+      })
+        .then(address => {
+          setEnsAddress(address);
+        })
+        .catch(e => {
+          console.error('Error getting ENS address', e);
+        });
     } else {
       setEnsAddress(null);
     }
-  }, [searchText]);
+  }, [debouncedSearchText]);
 
   return {data: ensAddress};
 };

src/screens/SearchScreen.tsx

@@ -156,7 +156,6 @@ export const SearchScreen = () => {
     for (const address of participants) {
       if (!canMessage?.[address.toLowerCase()]) {
         setErrorString(translate('not_on_xmtp_group'));
-
         return;
       }
     }
@@ -172,10 +171,7 @@ export const SearchScreen = () => {
       mapping: Set<string>;
     }>(
       ({filtered, mapping}, curr) => {
-        if (
-          // curr.name?.toLowerCase().includes(searchText.toLowerCase()) ||
-          curr.address.toLowerCase().includes(searchText.toLowerCase())
-        ) {
+        if (curr.address.toLowerCase().includes(searchText.toLowerCase())) {
           filtered.push(curr);
           mapping.add(curr.address);
         }
@@ -274,6 +270,8 @@ export const SearchScreen = () => {
       <Input
         testID={TestIds.SEARCH_INPUT}
         variant={'unstyled'}
+        autoCapitalize="none"
+        autoCorrect={false}
         leftElement={
           <Box paddingLeft={'8px'}>
             <Icon
@@ -295,7 +293,7 @@ export const SearchScreen = () => {
           ) : undefined
         }
         backgroundColor={colors.backgroundTertiary}
-        value={searchText}
+        defaultValue={searchText}
         onChangeText={setSearchText}
         marginX={'16px'}
         paddingY={'12px'}

src/utils/getEnsInfo.ts

@@ -2,10 +2,16 @@ import {getEnsAvatar, getEnsName, normalize} from 'viem/ens';
 import {viemClient} from './viemClient';
 
 export const getEnsInfo = async (address: string) => {
-  const [ens, avatarUrl] = await Promise.all([
-    getEnsName(viemClient, {address: address as `0x${string}`}),
-    getEnsAvatar(viemClient, {name: normalize(address) as `0x${string}`}),
-  ]);
+  const ens = await getEnsName(viemClient, {address: address as `0x${string}`});
+  if (!ens) {
+    return {
+      ens: null,
+      avatarUrl: null,
+    };
+  }
+  const avatarUrl = await getEnsAvatar(viemClient, {
+    name: normalize(ens),
+  });
   return {
     ens,
     avatarUrl,