a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Generalize plain address/ens rendering logic

This commit is contained in:
Willian Mitsuda 2021-10-31 03:16:03 -03:00
parent 25cc823c91
commit 887e35ce49
6 changed files with 112 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Address.tsx
View File

@ -1,13 +0,0 @@
import React from "react";
type AddressProps = {
address: string;
};
const Address: React.FC<AddressProps> = ({ address }) => (
<span className="font-address text-gray-400 truncate" title={address}>
{address}
</span>
);
export default Address;

26
src/components/AddressLink.tsx
View File

@ -1,26 +0,0 @@
import React from "react";
import { NavLink } from "react-router-dom";
type AddressLinkProps = {
address: string;
text?: string;
dontOverrideColors?: boolean;
};
const AddressLink: React.FC<AddressLinkProps> = ({
address,
text,
dontOverrideColors,
}) => (
<NavLink
className={`${
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
} font-address truncate`}
to={`/address/${address}`}
title={text ?? address}
>
{text ?? address}
</NavLink>
);
export default AddressLink;

64
src/components/AddressOrENSName.tsx
View File

@ -1,9 +1,7 @@
import React from "react";
import Address from "./Address";
import AddressLink from "./AddressLink";
import ENSName from "./ENSName";
import ENSNameLink from "./ENSNameLink";
import { ensResolver, ResolvedAddresses } from "../api/address-resolver";
import PlainAddress from "./PlainAddress";
import ENSName from "./ENSName";
type AddressOrENSNameProps = {
address: string;
@ -20,36 +18,34 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
dontOverrideColors,
resolvedAddresses,
}) => {
const name = resolvedAddresses?.[address];
return (
<>
{address === selectedAddress ? (
<>
{name?.[0] === ensResolver ? (
<ENSName name={name[1]} address={address} />
) : (
<Address address={address} />
)}
</>
) : (
<>
{name?.[0] ? (
<ENSNameLink
name={name[1]}
address={address}
dontOverrideColors={dontOverrideColors}
/>
) : (
<AddressLink
address={address}
text={text}
dontOverrideColors={dontOverrideColors}
/>
)}
</>
)}
</>
);
const resolvedAddress = resolvedAddresses?.[address];
const linkable = address !== selectedAddress;
if (resolvedAddress === undefined) {
return (
<PlainAddress
address={address}
text={text}
linkable={linkable}
dontOverrideColors={dontOverrideColors}
/>
);
}
const [resolver, resolvedName] = resolvedAddress;
if (resolver === ensResolver) {
return (
<ENSName
address={address}
text={text}
linkable={linkable}
name={resolvedName}
dontOverrideColors={dontOverrideColors}
/>
);
}
return <></>;
};
export default AddressOrENSName;

51
src/components/ENSName.tsx
View File

@ -1,25 +1,62 @@
import React from "react";
import { NavLink } from "react-router-dom";
import ENSLogo from "./ensLogo.svg";
type ENSNameProps = {
name: string;
address: string;
text: string | undefined;
linkable: boolean;
dontOverrideColors?: boolean;
};
const ENSName: React.FC<ENSNameProps> = ({ name, address }) => (
<div
className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
title={`${name}: ${address}`}
>
const ENSName: React.FC<ENSNameProps> = ({
name,
address,
text,
linkable,
dontOverrideColors,
}) => {
if (linkable) {
return (
<NavLink
className={`flex items-baseline space-x-1 font-sans ${
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
} truncate`}
to={`/address/${name}`}
title={`${name}: ${address}`}
>
<Content linkable={true} name={name} />
</NavLink>
);
}
return (
<div
className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
title={`${name}: ${address}`}
>
<Content linkable={false} name={name} />
</div>
);
};
type ContentProps = {
linkable: boolean;
name: string;
};
const Content: React.FC<ContentProps> = ({ linkable, name }) => (
<>
<img
className="self-center filter grayscale"
className={`self-center ${linkable ? "" : "filter grayscale"}`}
src={ENSLogo}
alt="ENS Logo"
width={12}
height={12}
/>
<span className="truncate">{name}</span>
</div>
</>
);
export default ENSName;

34
src/components/ENSNameLink.tsx
View File

@ -1,34 +0,0 @@
import React from "react";
import { NavLink } from "react-router-dom";
import ENSLogo from "./ensLogo.svg";
type ENSNameLinkProps = {
name: string;
address: string;
dontOverrideColors?: boolean;
};
const ENSNameLink: React.FC<ENSNameLinkProps> = ({
name,
address,
dontOverrideColors,
}) => (
<NavLink
className={`flex items-baseline space-x-1 font-sans ${
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
} truncate`}
to={`/address/${name}`}
title={`${name}: ${address}`}
>
<img
className="self-center"
src={ENSLogo}
alt="ENS Logo"
width={12}
height={12}
/>
<span className="truncate">{name}</span>
</NavLink>
);
export default ENSNameLink;

38
src/components/PlainAddress.tsx Normal file
View File

@ -0,0 +1,38 @@
import React from "react";
import { NavLink } from "react-router-dom";
type PlainAddressProps = {
address: string;
text: string | undefined;
linkable: boolean;
dontOverrideColors: boolean | undefined;
};
const PlainAddress: React.FC<PlainAddressProps> = ({
address,
text,
linkable,
dontOverrideColors,
}) => {
if (linkable) {
return (
<NavLink
className={`${
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
} font-address truncate`}
to={`/address/${address}`}
title={text ?? address}
>
<>{text ?? address}</>
</NavLink>
);
}
return (
<span className="font-address text-gray-400 truncate" title={address}>
{address}
</span>
);
};
export default PlainAddress;