Merge branch 'feature/generalize-network-id' into develop

Dockerfile

@@ -10,7 +10,7 @@ RUN npm run build
 FROM alpine:3.14.0 AS logobuilder
 RUN apk add imagemagick parallel
 WORKDIR /assets
-COPY trustwallet/blockchains/ethereum/assets /assets/
+COPY trustwallet/blockchains/ethereum/assets /assets/1/
 RUN find . -name logo.png | parallel magick convert {} -filter Lanczos -resize 32x32 {}
 
 FROM alpine:3.14.0 AS fourbytesbuilder

src/api/address-resolver/address-resolver.ts

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

src/components/AddressOrENSName.tsx

@@ -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;

src/components/ENSName.tsx

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

src/components/PlainString.tsx

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

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<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 });
 

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<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}

src/components/UniswapV1ExchangeName.tsx

@@ -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,15 +79,17 @@ 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> =
+export const uniswapV1PairRenderer: ResolvedAddressRenderer<
-  (address, tokenMeta, linkable, dontOverrideColors) => (
+  UniswapV1PairMeta
+> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
   <UniswapV1ExchangeName
+    chainId={chainId}
     address={address}
     token={tokenMeta.token}
     linkable={linkable}

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<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,15 +96,17 @@ 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> =
+export const uniswapV2PairRenderer: ResolvedAddressRenderer<
-  (address, tokenMeta, linkable, dontOverrideColors) => (
+  UniswapV2PairMeta
+> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
   <UniswapV2PairName
+    chainId={chainId}
     address={address}
     token0={tokenMeta.token0}
     token1={tokenMeta.token1}

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<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,15 +104,17 @@ 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> =
+export const uniswapV3PairRenderer: ResolvedAddressRenderer<
-  (address, tokenMeta, linkable, dontOverrideColors) => (
+  UniswapV3PairMeta
+> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
   <UniswapV3PairName
+    chainId={chainId}
     address={address}
     token0={tokenMeta.token0}
     token1={tokenMeta.token1}

src/url.ts

@@ -11,8 +11,9 @@ export const topic0URL = (assetsURLPrefix: string, topic0: string): string =>
 
 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}`;