Add symbol support
This commit is contained in:
parent
9b2dcf0aca
commit
9879290a38
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue