diff --git a/src/api/address-resolver/CompositeAddressResolver.ts b/src/api/address-resolver/CompositeAddressResolver.ts index 3590f3d..55a7318 100644 --- a/src/api/address-resolver/CompositeAddressResolver.ts +++ b/src/api/address-resolver/CompositeAddressResolver.ts @@ -1,7 +1,7 @@ import { BaseProvider } from "@ethersproject/providers"; import { IAddressResolver } from "./address-resolver"; -export type SelectedResolvedName = [IAddressResolver, T]; +export type SelectedResolvedName = [IAddressResolver, T] | null; export class CompositeAddressResolver implements IAddressResolver> @@ -23,8 +23,6 @@ export class CompositeAddressResolver } } - return undefined; - // TODO: fallback to address itself - // return address; + return null; } } diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts index 6212653..dc72a9f 100644 --- a/src/api/address-resolver/index.ts +++ b/src/api/address-resolver/index.ts @@ -32,21 +32,25 @@ resolverRendererRegistry.set(ercTokenResolver, tokenRenderer); // TODO: implement progressive resolving export const batchPopulate = async ( provider: BaseProvider, - addresses: string[] + addresses: string[], + currentMap: ResolvedAddresses | undefined ): Promise => { const solvers: Promise | undefined>[] = []; - for (const a of addresses) { + const unresolvedAddresses = addresses.filter( + (a) => currentMap?.[a] === undefined + ); + for (const a of unresolvedAddresses) { solvers.push(mainResolver.resolveAddress(provider, a)); } + const resultMap: ResolvedAddresses = currentMap ? { ...currentMap } : {}; const results = await Promise.all(solvers); - const resultMap: ResolvedAddresses = {}; for (let i = 0; i < results.length; i++) { const r = results[i]; if (r === undefined) { continue; } - resultMap[addresses[i]] = r; + resultMap[unresolvedAddresses[i]] = r; } return resultMap; diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx index b10c0eb..9e4b65b 100644 --- a/src/components/AddressOrENSName.tsx +++ b/src/components/AddressOrENSName.tsx @@ -23,7 +23,7 @@ const AddressOrENSName: React.FC = ({ const resolvedAddress = resolvedAddresses?.[address]; const linkable = address !== selectedAddress; - if (resolvedAddress === undefined) { + if (!resolvedAddress) { return ( { const [names, setNames] = useState(); - + const ref = useRef(); useEffect(() => { - if (!provider) { - return; - } + ref.current = names; + }); - const populate = async () => { - const _addresses = addrCollector(); - const _names = await batchPopulate(provider, _addresses); - setNames(_names); - }; - populate(); - }, [provider, addrCollector]); + useEffect( + () => { + if (!provider) { + return; + } + + const populate = async () => { + const _addresses = addrCollector(); + const _names = await batchPopulate(provider, _addresses, ref.current); + setNames(_names); + }; + populate(); + }, + // DON'T put names variables in dependency array; this is intentional; useRef + [provider, addrCollector] + ); return names; };