Extract renderer interface

This commit is contained in:
Willian Mitsuda 2021-10-31 05:10:42 -03:00
parent 887e35ce49
commit 59ff4fd401
4 changed files with 39 additions and 9 deletions

View File

@ -1,3 +1,4 @@
import React from "react";
import { BaseProvider } from "@ethersproject/providers"; import { BaseProvider } from "@ethersproject/providers";
export interface IAddressResolver<T> { export interface IAddressResolver<T> {
@ -6,3 +7,10 @@ export interface IAddressResolver<T> {
address: string address: string
): Promise<T | undefined>; ): Promise<T | undefined>;
} }
export type ResolvedAddressRenderer = (
address: string,
resolvedAddress: string,
linkable: boolean,
dontOverrideColors: boolean
) => React.ReactElement;

View File

@ -1,5 +1,6 @@
import { BaseProvider } from "@ethersproject/providers"; import { BaseProvider } from "@ethersproject/providers";
import { IAddressResolver } from "./address-resolver"; import { ensRenderer } from "../../components/ENSName";
import { IAddressResolver, ResolvedAddressRenderer } from "./address-resolver";
import { import {
CompositeAddressResolver, CompositeAddressResolver,
SelectedResolvedName, SelectedResolvedName,
@ -17,6 +18,12 @@ _mainResolver.addResolver(ensResolver);
export const mainResolver: IAddressResolver<SelectedResolvedName<string>> = export const mainResolver: IAddressResolver<SelectedResolvedName<string>> =
_mainResolver; _mainResolver;
export const resolverRendererRegistry = new Map<
IAddressResolver<string>,
ResolvedAddressRenderer
>();
resolverRendererRegistry.set(ensResolver, ensRenderer);
export const batchPopulate = async ( export const batchPopulate = async (
provider: BaseProvider, provider: BaseProvider,
addresses: string[] addresses: string[]

View File

@ -1,7 +1,9 @@
import React from "react"; import React from "react";
import { ensResolver, ResolvedAddresses } from "../api/address-resolver"; import {
ResolvedAddresses,
resolverRendererRegistry,
} from "../api/address-resolver";
import PlainAddress from "./PlainAddress"; import PlainAddress from "./PlainAddress";
import ENSName from "./ENSName";
type AddressOrENSNameProps = { type AddressOrENSNameProps = {
address: string; address: string;
@ -33,19 +35,19 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
} }
const [resolver, resolvedName] = resolvedAddress; const [resolver, resolvedName] = resolvedAddress;
if (resolver === ensResolver) { const renderer = resolverRendererRegistry.get(resolver);
if (renderer === undefined) {
return ( return (
<ENSName <PlainAddress
address={address} address={address}
text={text} text={text}
linkable={linkable} linkable={linkable}
name={resolvedName}
dontOverrideColors={dontOverrideColors} dontOverrideColors={dontOverrideColors}
/> />
); );
} }
return <></>; return renderer(address, resolvedName, linkable, !!dontOverrideColors);
}; };
export default AddressOrENSName; export default AddressOrENSName;

View File

@ -1,11 +1,11 @@
import React from "react"; import React from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver";
import ENSLogo from "./ensLogo.svg"; import ENSLogo from "./ensLogo.svg";
type ENSNameProps = { type ENSNameProps = {
name: string; name: string;
address: string; address: string;
text: string | undefined;
linkable: boolean; linkable: boolean;
dontOverrideColors?: boolean; dontOverrideColors?: boolean;
}; };
@ -13,7 +13,6 @@ type ENSNameProps = {
const ENSName: React.FC<ENSNameProps> = ({ const ENSName: React.FC<ENSNameProps> = ({
name, name,
address, address,
text,
linkable, linkable,
dontOverrideColors, dontOverrideColors,
}) => { }) => {
@ -59,4 +58,18 @@ const Content: React.FC<ContentProps> = ({ linkable, name }) => (
</> </>
); );
export const ensRenderer: ResolvedAddressRenderer = (
address,
resolvedAddress,
linkable,
dontOverrideColors
) => (
<ENSName
address={address}
name={resolvedAddress}
linkable={linkable}
dontOverrideColors={dontOverrideColors}
/>
);
export default ENSName; export default ENSName;