diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts new file mode 100644 index 0000000..891928b --- /dev/null +++ b/src/hooks/useDebounce.ts @@ -0,0 +1,17 @@ +import {useEffect, useState} from 'react'; + +export function useDebounce(value: T, delay: number) { + const [debouncedValue, setDebouncedValue] = useState(value); + + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedValue(value); + }, delay); + + return () => { + clearTimeout(handler); + }; + }, [value, delay]); + + return debouncedValue; +} diff --git a/src/hooks/useEnsAddress.ts b/src/hooks/useEnsAddress.ts index 9a540c6..57a3458 100644 --- a/src/hooks/useEnsAddress.ts +++ b/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(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}; }; diff --git a/src/screens/SearchScreen.tsx b/src/screens/SearchScreen.tsx index 8bb5002..fc0cb32 100644 --- a/src/screens/SearchScreen.tsx +++ b/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; }>( ({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 = () => { { ) : undefined } backgroundColor={colors.backgroundTertiary} - value={searchText} + defaultValue={searchText} onChangeText={setSearchText} marginX={'16px'} paddingY={'12px'} diff --git a/src/utils/getEnsInfo.ts b/src/utils/getEnsInfo.ts index a8ca8d1..d5b02a2 100644 --- a/src/utils/getEnsInfo.ts +++ b/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,