From c650c2f819bc131b59fd074da393ab5a515a17fc Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 25 Feb 2022 15:56:08 -0300
Subject: [PATCH] Parameterize address renderers by chainId

---
 src/api/address-resolver/address-resolver.ts |  1 +
 src/components/AddressOrENSName.tsx          | 10 ++++-
 src/components/ENSName.tsx                   |  1 +
 src/components/PlainString.tsx               |  1 +
 src/components/TokenLogo.tsx                 |  5 ++-
 src/components/TokenName.tsx                 | 17 +++++++-
 src/components/UniswapV1ExchangeName.tsx     | 33 +++++++++------
 src/components/UniswapV2PairName.tsx         | 40 +++++++++++--------
 src/components/UniswapV3PoolName.tsx         | 42 ++++++++++++--------
 src/url.ts                                   |  3 ++
 10 files changed, 101 insertions(+), 52 deletions(-)

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<T> {
 }
 
 export type ResolvedAddressRenderer<T> = (
+  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<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;
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<ContentProps> = ({ linkable, name }) => (
 );
 
 export const ensRenderer: ResolvedAddressRenderer<string> = (
+  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<PlainStringProps> = ({
 };
 
 export const plainStringRenderer: ResolvedAddressRenderer<string> = (
+  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<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 });
 
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<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}
diff --git a/src/components/UniswapV1ExchangeName.tsx b/src/components/UniswapV1ExchangeName.tsx
index 710c543..a31459b 100644
--- a/src/components/UniswapV1ExchangeName.tsx
+++ b/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,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;
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<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;
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<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;
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}`;