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

Custom text/hover colors for burn/mint addresses

This commit is contained in:
Willian Mitsuda 2021-07-19 00:50:32 -03:00
parent 2494fa4adc
commit 1853079881
4 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/AddressLink.tsx
View File

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

14
src/components/AddressOrENSName.tsx
View File

@ -9,6 +9,7 @@ type AddressOrENSNameProps = {
ensName?: string; ensName?: string;
selectedAddress?: string; selectedAddress?: string;
text?: string; text?: string;
dontOverrideColors?: boolean;
}; };
const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
@ -16,6 +17,7 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
ensName, ensName,
selectedAddress, selectedAddress,
text, text,
dontOverrideColors,
}) => ( }) => (
<> <>
{address === selectedAddress ? ( {address === selectedAddress ? (
@ -29,9 +31,17 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
) : ( ) : (
<> <>
{ensName ? ( {ensName ? (
<ENSNameLink name={ensName} address={address} /> <ENSNameLink
name={ensName}
address={address}
dontOverrideColors={dontOverrideColors}
/>
) : ( ) : (
<AddressLink address={address} text={text} /> <AddressLink
address={address}
text={text}
dontOverrideColors={dontOverrideColors}
/>
)} )}
</> </>
)} )}

7
src/components/DecoratedAddressLink.tsx
View File

@ -30,9 +30,9 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
return ( return (
<div <div
className={`flex items-baseline space-x-1 ${mint ? "italic" : ""} ${ className={`flex items-baseline space-x-1 ${
burn ? "line-through" : "" mint ? "italic text-green-500 hover:text-green-700" : ""
}`} } ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""}`}
> >
{mint && ( {mint && (
<span className="text-green-500" title="Mint address"> <span className="text-green-500" title="Mint address">
@ -54,6 +54,7 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
ensName={ensName} ensName={ensName}
selectedAddress={selectedAddress} selectedAddress={selectedAddress}
text={text} text={text}
dontOverrideColors={mint || burn}
/> />
</div> </div>
); );

11
src/components/ENSNameLink.tsx
View File

@ -5,11 +5,18 @@ import ENSLogo from "./ensLogo.svg";
type ENSNameLinkProps = { type ENSNameLinkProps = {
name: string; name: string;
address: string; address: string;
dontOverrideColors?: boolean;
}; };
const ENSNameLink: React.FC<ENSNameLinkProps> = ({ name, address }) => ( const ENSNameLink: React.FC<ENSNameLinkProps> = ({
name,
address,
dontOverrideColors,
}) => (
<NavLink <NavLink
className="flex items-baseline space-x-1 font-sans text-link-blue hover:text-link-blue-hover truncate" className={`flex items-baseline space-x-1 font-sans ${
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
} truncate`}
to={`/address/${name}`} to={`/address/${name}`}
title={`${name}: ${address}`} title={`${name}: ${address}`}
> >