diff --git a/src/api/address-resolver/address-resolver.ts b/src/api/address-resolver/address-resolver.ts index 87ed8b8..0527b04 100644 --- a/src/api/address-resolver/address-resolver.ts +++ b/src/api/address-resolver/address-resolver.ts @@ -1,3 +1,4 @@ +import React from "react"; import { BaseProvider } from "@ethersproject/providers"; export interface IAddressResolver { @@ -6,3 +7,10 @@ export interface IAddressResolver { address: string ): Promise; } + +export type ResolvedAddressRenderer = ( + address: string, + resolvedAddress: string, + linkable: boolean, + dontOverrideColors: boolean +) => React.ReactElement; diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts index dd8b549..6db1b1e 100644 --- a/src/api/address-resolver/index.ts +++ b/src/api/address-resolver/index.ts @@ -1,5 +1,6 @@ import { BaseProvider } from "@ethersproject/providers"; -import { IAddressResolver } from "./address-resolver"; +import { ensRenderer } from "../../components/ENSName"; +import { IAddressResolver, ResolvedAddressRenderer } from "./address-resolver"; import { CompositeAddressResolver, SelectedResolvedName, @@ -17,6 +18,12 @@ _mainResolver.addResolver(ensResolver); export const mainResolver: IAddressResolver> = _mainResolver; +export const resolverRendererRegistry = new Map< + IAddressResolver, + ResolvedAddressRenderer +>(); +resolverRendererRegistry.set(ensResolver, ensRenderer); + export const batchPopulate = async ( provider: BaseProvider, addresses: string[] diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx index 83fd0cd..b10c0eb 100644 --- a/src/components/AddressOrENSName.tsx +++ b/src/components/AddressOrENSName.tsx @@ -1,7 +1,9 @@ import React from "react"; -import { ensResolver, ResolvedAddresses } from "../api/address-resolver"; +import { + ResolvedAddresses, + resolverRendererRegistry, +} from "../api/address-resolver"; import PlainAddress from "./PlainAddress"; -import ENSName from "./ENSName"; type AddressOrENSNameProps = { address: string; @@ -33,19 +35,19 @@ const AddressOrENSName: React.FC = ({ } const [resolver, resolvedName] = resolvedAddress; - if (resolver === ensResolver) { + const renderer = resolverRendererRegistry.get(resolver); + if (renderer === undefined) { return ( - ); } - return <>; + return renderer(address, resolvedName, linkable, !!dontOverrideColors); }; export default AddressOrENSName; diff --git a/src/components/ENSName.tsx b/src/components/ENSName.tsx index ac1b038..05fe27c 100644 --- a/src/components/ENSName.tsx +++ b/src/components/ENSName.tsx @@ -1,11 +1,11 @@ import React from "react"; import { NavLink } from "react-router-dom"; +import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver"; import ENSLogo from "./ensLogo.svg"; type ENSNameProps = { name: string; address: string; - text: string | undefined; linkable: boolean; dontOverrideColors?: boolean; }; @@ -13,7 +13,6 @@ type ENSNameProps = { const ENSName: React.FC = ({ name, address, - text, linkable, dontOverrideColors, }) => { @@ -59,4 +58,18 @@ const Content: React.FC = ({ linkable, name }) => ( ); +export const ensRenderer: ResolvedAddressRenderer = ( + address, + resolvedAddress, + linkable, + dontOverrideColors +) => ( + +); + export default ENSName;