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

Parameterize address renderers by chainId

This commit is contained in:
Willian Mitsuda 2022-02-25 15:56:08 -03:00
parent e2ff5dd073
commit c650c2f819
10 changed files with 101 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/address-resolver/address-resolver.ts
View File

@ -9,6 +9,7 @@ export interface IAddressResolver<T> {
}
export type ResolvedAddressRenderer<T> = (
chainId: number,
address: string,
resolvedAddress: T,
linkable: boolean,

10
src/components/AddressOrENSName.tsx
View File

@ -20,7 +20,7 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
const resolvedAddress = useResolvedAddress(provider, address);
const linkable = address !== selectedAddress;
if (!resolvedAddress) {
if (!provider || !resolvedAddress) {
return (
<PlainAddress
address={address}
@ -42,7 +42,13 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
);
}
return renderer(address, resolvedName, linkable, !!dontOverrideColors);
return renderer(
provider.network.chainId,
address,
resolvedName,
linkable,
!!dontOverrideColors
);
};
export default AddressOrENSName;

1
src/components/ENSName.tsx
View File

@ -59,6 +59,7 @@ const Content: React.FC<ContentProps> = ({ linkable, name }) => (
);
export const ensRenderer: ResolvedAddressRenderer<string> = (
chainId,
address,
resolvedAddress,
linkable,

1
src/components/PlainString.tsx
View File

@ -37,6 +37,7 @@ const PlainString: React.FC<PlainStringProps> = ({
};
export const plainStringRenderer: ResolvedAddressRenderer<string> = (
chainId,
address,
resolvedAddress,
linkable,

5
src/components/TokenLogo.tsx
View File

@ -7,16 +7,17 @@ import { RuntimeContext } from "../useRuntime";
import { ChecksummedAddress } from "../types";
type TokenLogoProps = {
chainId: number;
address: ChecksummedAddress;
name: string;
};
const TokenLogo: React.FC<TokenLogoProps> = ({ address, name }) => {
const TokenLogo: React.FC<TokenLogoProps> = ({ chainId, address, name }) => {
const { config } = useContext(RuntimeContext);
const srcList: string[] = [];
if (config) {
srcList.push(tokenLogoURL(config.assetsURLPrefix ?? "", address));
srcList.push(tokenLogoURL(config.assetsURLPrefix ?? "", chainId, address));
}
const { src, isLoading } = useImage({ srcList, useSuspense: false });

17
src/components/TokenName.tsx
View File

@ -5,6 +5,7 @@ import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolve
import { TokenMeta } from "../types";
type TokenNameProps = {
chainId: number;
address: string;
name: string;
symbol: string;
@ -13,6 +14,7 @@ type TokenNameProps = {
};
const TokenName: React.FC<TokenNameProps> = ({
chainId,
address,
name,
symbol,
@ -29,6 +31,7 @@ const TokenName: React.FC<TokenNameProps> = ({
title={`${name} (${symbol}): ${address}`}
>
<Content
chainId={chainId}
address={address}
linkable={true}
name={name}
@ -43,12 +46,19 @@ const TokenName: React.FC<TokenNameProps> = ({
className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
title={`${name} (${symbol}): ${address}`}
>
<Content address={address} linkable={false} name={name} symbol={symbol} />
<Content
chainId={chainId}
address={address}
linkable={false}
name={name}
symbol={symbol}
/>
</div>
);
};
type ContentProps = {
chainId: number;
address: string;
name: string;
symbol: string;
@ -56,6 +66,7 @@ type ContentProps = {
};
const Content: React.FC<ContentProps> = ({
chainId,
address,
name,
symbol,
@ -65,7 +76,7 @@ const Content: React.FC<ContentProps> = ({
<div
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
>
<TokenLogo address={address} name={name} />
<TokenLogo chainId={chainId} address={address} name={name} />
</div>
<span className="truncate">
{name} ({symbol})
@ -74,12 +85,14 @@ const Content: React.FC<ContentProps> = ({
);
export const tokenRenderer: ResolvedAddressRenderer<TokenMeta> = (
chainId,
address,
tokenMeta,
linkable,
dontOverrideColors
) => (
<TokenName
chainId={chainId}
address={address}
name={tokenMeta.name}
symbol={tokenMeta.symbol}

33
src/components/UniswapV1ExchangeName.tsx
View File

@ -9,6 +9,7 @@ import {
} from "../api/address-resolver/UniswapV1Resolver";
type UniswapV1ExchangeNameProps = {
chainId: number;
address: string;
token: UniswapV1TokenMeta;
linkable: boolean;
@ -16,6 +17,7 @@ type UniswapV1ExchangeNameProps = {
};
const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
chainId,
address,
token,
linkable,
@ -32,10 +34,11 @@ const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
>
<span>Uniswap V1 LP:</span>
<Content
linkable={true}
chainId={chainId}
address={token.address}
name={token.name}
symbol={token.symbol}
linkable
/>
</NavLink>
);
@ -48,7 +51,7 @@ const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
>
<span>Uniswap V1 LP:</span>
<Content
linkable={false}
chainId={chainId}
address={token.address}
name={token.name}
symbol={token.symbol}
@ -58,13 +61,15 @@ const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
};
type ContentProps = {
linkable: boolean;
chainId: number;
address: ChecksummedAddress;
name: string;
symbol: string;
linkable?: boolean;
};
const Content: React.FC<ContentProps> = ({
chainId,
address,
name,
symbol,
@ -74,20 +79,22 @@ const Content: React.FC<ContentProps> = ({
<div
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
>
<TokenLogo address={address} name={name} />
<TokenLogo chainId={chainId} address={address} name={name} />
</div>
<span>{symbol}</span>
</>
);
export const uniswapV1PairRenderer: ResolvedAddressRenderer<UniswapV1PairMeta> =
(address, tokenMeta, linkable, dontOverrideColors) => (
<UniswapV1ExchangeName
address={address}
token={tokenMeta.token}
linkable={linkable}
dontOverrideColors={dontOverrideColors}
/>
);
export const uniswapV1PairRenderer: ResolvedAddressRenderer<
UniswapV1PairMeta
> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
<UniswapV1ExchangeName
chainId={chainId}
address={address}
token={tokenMeta.token}
linkable={linkable}
dontOverrideColors={dontOverrideColors}
/>
);
export default UniswapV1ExchangeName;

40
src/components/UniswapV2PairName.tsx
View File

@ -9,6 +9,7 @@ import {
import { ChecksummedAddress } from "../types";
type UniswapV2PairNameProps = {
chainId: number;
address: string;
token0: UniswapV2TokenMeta;
token1: UniswapV2TokenMeta;
@ -17,6 +18,7 @@ type UniswapV2PairNameProps = {
};
const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
chainId,
address,
token0,
token1,
@ -34,17 +36,19 @@ const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
>
<span>Uniswap V2 LP:</span>
<Content
linkable={true}
chainId={chainId}
address={token0.address}
name={token0.name}
symbol={token0.symbol}
linkable
/>
<span>/</span>
<Content
linkable={true}
chainId={chainId}
address={token1.address}
name={token1.name}
symbol={token1.symbol}
linkable
/>
</NavLink>
);
@ -57,14 +61,14 @@ const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
>
<span>Uniswap V2 LP:</span>
<Content
linkable={false}
chainId={chainId}
address={token0.address}
name={token0.name}
symbol={token0.symbol}
/>
<span>/</span>
<Content
linkable={false}
chainId={chainId}
address={token1.address}
name={token1.name}
symbol={token1.symbol}
@ -74,13 +78,15 @@ const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
};
type ContentProps = {
linkable: boolean;
chainId: number;
address: ChecksummedAddress;
name: string;
symbol: string;
linkable?: boolean;
};
const Content: React.FC<ContentProps> = ({
chainId,
address,
name,
symbol,
@ -90,21 +96,23 @@ const Content: React.FC<ContentProps> = ({
<div
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
>
<TokenLogo address={address} name={name} />
<TokenLogo chainId={chainId} address={address} name={name} />
</div>
<span>{symbol}</span>
</>
);
export const uniswapV2PairRenderer: ResolvedAddressRenderer<UniswapV2PairMeta> =
(address, tokenMeta, linkable, dontOverrideColors) => (
<UniswapV2PairName
address={address}
token0={tokenMeta.token0}
token1={tokenMeta.token1}
linkable={linkable}
dontOverrideColors={dontOverrideColors}
/>
);
export const uniswapV2PairRenderer: ResolvedAddressRenderer<
UniswapV2PairMeta
> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
<UniswapV2PairName
chainId={chainId}
address={address}
token0={tokenMeta.token0}
token1={tokenMeta.token1}
linkable={linkable}
dontOverrideColors={dontOverrideColors}
/>
);
export default UniswapV2PairName;

42
src/components/UniswapV3PoolName.tsx
View File

@ -9,6 +9,7 @@ import {
import { ChecksummedAddress } from "../types";
type UniswapV3PoolNameProps = {
chainId: number;
address: string;
token0: UniswapV3TokenMeta;
token1: UniswapV3TokenMeta;
@ -18,6 +19,7 @@ type UniswapV3PoolNameProps = {
};
const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
chainId,
address,
token0,
token1,
@ -38,17 +40,19 @@ const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
>
<span>Uniswap V3 LP:</span>
<Content
linkable={true}
chainId={chainId}
address={token0.address}
name={token0.name}
symbol={token0.symbol}
linkable
/>
<span>/</span>
<Content
linkable={true}
chainId={chainId}
address={token1.address}
name={token1.name}
symbol={token1.symbol}
linkable
/>
<span>/ {fee / 10000}%</span>
</NavLink>
@ -64,14 +68,14 @@ const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
>
<span>Uniswap V3 LP:</span>
<Content
linkable={false}
chainId={chainId}
address={token0.address}
name={token0.name}
symbol={token0.symbol}
/>
<span>/</span>
<Content
linkable={false}
chainId={chainId}
address={token1.address}
name={token1.name}
symbol={token1.symbol}
@ -82,13 +86,15 @@ const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
};
type ContentProps = {
linkable: boolean;
chainId: number;
address: ChecksummedAddress;
name: string;
symbol: string;
linkable?: boolean;
};
const Content: React.FC<ContentProps> = ({
chainId,
address,
name,
symbol,
@ -98,22 +104,24 @@ const Content: React.FC<ContentProps> = ({
<div
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
>
<TokenLogo address={address} name={name} />
<TokenLogo chainId={chainId} address={address} name={name} />
</div>
<span>{symbol}</span>
</>
);
export const uniswapV3PairRenderer: ResolvedAddressRenderer<UniswapV3PairMeta> =
(address, tokenMeta, linkable, dontOverrideColors) => (
<UniswapV3PairName
address={address}
token0={tokenMeta.token0}
token1={tokenMeta.token1}
fee={tokenMeta.fee}
linkable={linkable}
dontOverrideColors={dontOverrideColors}
/>
);
export const uniswapV3PairRenderer: ResolvedAddressRenderer<
UniswapV3PairMeta
> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
<UniswapV3PairName
chainId={chainId}
address={address}
token0={tokenMeta.token0}
token1={tokenMeta.token1}
fee={tokenMeta.fee}
linkable={linkable}
dontOverrideColors={dontOverrideColors}
/>
);
export default UniswapV3PairName;

3
src/url.ts
View File

@ -9,10 +9,13 @@ export const fourBytesURL = (
export const topic0URL = (assetsURLPrefix: string, topic0: string): string =>
`${assetsURLPrefix}/topic0/${topic0}`;
// TODO: generalize URL
export const tokenLogoURL = (
assetsURLPrefix: string,
chainId: number,
address: string
): string => `${assetsURLPrefix}/assets/${address}/logo.png`;
// ): string => `${assetsURLPrefix}/assets/${chainId}/${address}/logo.png`;
export const blockURL = (blockNum: BlockTag) => `/block/${blockNum}`;