diff --git a/src/api/address-resolver/address-resolver.ts b/src/api/address-resolver/address-resolver.ts index 12d289e..589b0cd 100644 --- a/src/api/address-resolver/address-resolver.ts +++ b/src/api/address-resolver/address-resolver.ts @@ -9,6 +9,7 @@ export interface IAddressResolver { } export type ResolvedAddressRenderer = ( + chainId: number, address: string, resolvedAddress: T, linkable: boolean, diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx index b884c48..bacdea8 100644 --- a/src/components/AddressOrENSName.tsx +++ b/src/components/AddressOrENSName.tsx @@ -20,7 +20,7 @@ const AddressOrENSName: React.FC = ({ const resolvedAddress = useResolvedAddress(provider, address); const linkable = address !== selectedAddress; - if (!resolvedAddress) { + if (!provider || !resolvedAddress) { return ( = ({ ); } - return renderer(address, resolvedName, linkable, !!dontOverrideColors); + return renderer( + provider.network.chainId, + address, + resolvedName, + linkable, + !!dontOverrideColors + ); }; export default AddressOrENSName; diff --git a/src/components/ENSName.tsx b/src/components/ENSName.tsx index f12f416..51d548a 100644 --- a/src/components/ENSName.tsx +++ b/src/components/ENSName.tsx @@ -59,6 +59,7 @@ const Content: React.FC = ({ linkable, name }) => ( ); export const ensRenderer: ResolvedAddressRenderer = ( + chainId, address, resolvedAddress, linkable, diff --git a/src/components/PlainString.tsx b/src/components/PlainString.tsx index 5b891bf..72fafd0 100644 --- a/src/components/PlainString.tsx +++ b/src/components/PlainString.tsx @@ -37,6 +37,7 @@ const PlainString: React.FC = ({ }; export const plainStringRenderer: ResolvedAddressRenderer = ( + chainId, address, resolvedAddress, linkable, diff --git a/src/components/TokenLogo.tsx b/src/components/TokenLogo.tsx index 7eaf2bd..decfc27 100644 --- a/src/components/TokenLogo.tsx +++ b/src/components/TokenLogo.tsx @@ -7,16 +7,17 @@ import { RuntimeContext } from "../useRuntime"; import { ChecksummedAddress } from "../types"; type TokenLogoProps = { + chainId: number; address: ChecksummedAddress; name: string; }; -const TokenLogo: React.FC = ({ address, name }) => { +const TokenLogo: React.FC = ({ 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 }); diff --git a/src/components/TokenName.tsx b/src/components/TokenName.tsx index 5c3e91b..71c294c 100644 --- a/src/components/TokenName.tsx +++ b/src/components/TokenName.tsx @@ -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 = ({ + chainId, address, name, symbol, @@ -29,6 +31,7 @@ const TokenName: React.FC = ({ title={`${name} (${symbol}): ${address}`} > = ({ className="flex items-baseline space-x-1 font-sans text-gray-700 truncate" title={`${name} (${symbol}): ${address}`} > - + ); }; type ContentProps = { + chainId: number; address: string; name: string; symbol: string; @@ -56,6 +66,7 @@ type ContentProps = { }; const Content: React.FC = ({ + chainId, address, name, symbol, @@ -65,7 +76,7 @@ const Content: React.FC = ({
- +
{name} ({symbol}) @@ -74,12 +85,14 @@ const Content: React.FC = ({ ); export const tokenRenderer: ResolvedAddressRenderer = ( + chainId, address, tokenMeta, linkable, dontOverrideColors ) => ( = ({ + chainId, address, token, linkable, @@ -32,10 +34,11 @@ const UniswapV1ExchangeName: React.FC = ({ > Uniswap V1 LP: ); @@ -48,7 +51,7 @@ const UniswapV1ExchangeName: React.FC = ({ > Uniswap V1 LP: = ({ }; type ContentProps = { - linkable: boolean; + chainId: number; address: ChecksummedAddress; name: string; symbol: string; + linkable?: boolean; }; const Content: React.FC = ({ + chainId, address, name, symbol, @@ -74,20 +79,22 @@ const Content: React.FC = ({
- +
{symbol} ); -export const uniswapV1PairRenderer: ResolvedAddressRenderer = - (address, tokenMeta, linkable, dontOverrideColors) => ( - - ); +export const uniswapV1PairRenderer: ResolvedAddressRenderer< + UniswapV1PairMeta +> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => ( + +); export default UniswapV1ExchangeName; diff --git a/src/components/UniswapV2PairName.tsx b/src/components/UniswapV2PairName.tsx index f4520b7..c6ce6ba 100644 --- a/src/components/UniswapV2PairName.tsx +++ b/src/components/UniswapV2PairName.tsx @@ -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 = ({ + chainId, address, token0, token1, @@ -34,17 +36,19 @@ const UniswapV2PairName: React.FC = ({ > Uniswap V2 LP: / ); @@ -57,14 +61,14 @@ const UniswapV2PairName: React.FC = ({ > Uniswap V2 LP: / = ({ }; type ContentProps = { - linkable: boolean; + chainId: number; address: ChecksummedAddress; name: string; symbol: string; + linkable?: boolean; }; const Content: React.FC = ({ + chainId, address, name, symbol, @@ -90,21 +96,23 @@ const Content: React.FC = ({
- +
{symbol} ); -export const uniswapV2PairRenderer: ResolvedAddressRenderer = - (address, tokenMeta, linkable, dontOverrideColors) => ( - - ); +export const uniswapV2PairRenderer: ResolvedAddressRenderer< + UniswapV2PairMeta +> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => ( + +); export default UniswapV2PairName; diff --git a/src/components/UniswapV3PoolName.tsx b/src/components/UniswapV3PoolName.tsx index a21b186..d8176a4 100644 --- a/src/components/UniswapV3PoolName.tsx +++ b/src/components/UniswapV3PoolName.tsx @@ -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 = ({ + chainId, address, token0, token1, @@ -38,17 +40,19 @@ const UniswapV3PairName: React.FC = ({ > Uniswap V3 LP: / / {fee / 10000}% @@ -64,14 +68,14 @@ const UniswapV3PairName: React.FC = ({ > Uniswap V3 LP: / = ({ }; type ContentProps = { - linkable: boolean; + chainId: number; address: ChecksummedAddress; name: string; symbol: string; + linkable?: boolean; }; const Content: React.FC = ({ + chainId, address, name, symbol, @@ -98,22 +104,24 @@ const Content: React.FC = ({
- +
{symbol} ); -export const uniswapV3PairRenderer: ResolvedAddressRenderer = - (address, tokenMeta, linkable, dontOverrideColors) => ( - - ); +export const uniswapV3PairRenderer: ResolvedAddressRenderer< + UniswapV3PairMeta +> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => ( + +); export default UniswapV3PairName; diff --git a/src/url.ts b/src/url.ts index cf44ab6..289c797 100644 --- a/src/url.ts +++ b/src/url.ts @@ -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}`;