Add symbol support

This commit is contained in:
Willian Mitsuda 2021-10-31 19:59:14 -03:00
parent 9b2dcf0aca
commit 9879290a38
1 changed files with 22 additions and 6 deletions

View File

@ -6,6 +6,7 @@ import { TokenMeta } from "../types";
type TokenNameProps = { type TokenNameProps = {
name: string; name: string;
symbol: string;
address: string; address: string;
linkable: boolean; linkable: boolean;
dontOverrideColors?: boolean; dontOverrideColors?: boolean;
@ -13,6 +14,7 @@ type TokenNameProps = {
const TokenName: React.FC<TokenNameProps> = ({ const TokenName: React.FC<TokenNameProps> = ({
name, name,
symbol,
address, address,
linkable, linkable,
dontOverrideColors, dontOverrideColors,
@ -24,9 +26,14 @@ const TokenName: React.FC<TokenNameProps> = ({
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover" dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
} truncate`} } truncate`}
to={`/address/${address}`} to={`/address/${address}`}
title={`${name}: ${address}`} title={`${name} (${symbol}): ${address}`}
> >
<Content address={address} linkable={true} name={name} /> <Content
address={address}
linkable={true}
name={name}
symbol={symbol}
/>
</NavLink> </NavLink>
); );
} }
@ -34,9 +41,9 @@ const TokenName: React.FC<TokenNameProps> = ({
return ( return (
<div <div
className="flex items-baseline space-x-1 font-sans text-gray-700 truncate" className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
title={`${name}: ${address}`} title={`${name} (${symbol}): ${address}`}
> >
<Content address={address} linkable={false} name={name} /> <Content address={address} linkable={false} name={name} symbol={symbol} />
</div> </div>
); );
}; };
@ -45,14 +52,22 @@ type ContentProps = {
address: string; address: string;
linkable: boolean; linkable: boolean;
name: string; name: string;
symbol: string;
}; };
const Content: React.FC<ContentProps> = ({ address, linkable, name }) => ( const Content: React.FC<ContentProps> = ({
address,
linkable,
name,
symbol,
}) => (
<> <>
<div className="self-center w-5 h-5"> <div className="self-center w-5 h-5">
<TokenLogo address={address} name={name} /> <TokenLogo address={address} name={name} />
</div> </div>
<span className="truncate">{name}</span> <span className="truncate">
{name} ({symbol})
</span>
</> </>
); );
@ -65,6 +80,7 @@ export const tokenRenderer: ResolvedAddressRenderer<TokenMeta> = (
<TokenName <TokenName
address={address} address={address}
name={resolvedAddress.name} name={resolvedAddress.name}
symbol={resolvedAddress.symbol}
linkable={linkable} linkable={linkable}
dontOverrideColors={dontOverrideColors} dontOverrideColors={dontOverrideColors}
/> />