TW-1633: Add Etherlink as default EVM chain

src/app/atoms/NetworkLogo.tsx

@@ -10,7 +10,9 @@ import PolygonIconSrc from 'app/icons/networks/polygon.svg?url';
 import { t } from 'lib/i18n';
 import { getEvmNativeAssetIcon } from 'lib/images-uri';
 import { TEZOS_MAINNET_CHAIN_ID } from 'lib/temple/types';
+import { ImageStacked } from 'lib/ui/ImageStacked';
 import useTippy, { UseTippyOptions } from 'lib/ui/useTippy';
+import { isTruthy } from 'lib/utils';
 import { useTezosChainByChainId } from 'temple/front';
 import { useEvmChainByChainId } from 'temple/front/chains';
 
@@ -68,7 +70,15 @@ interface EvmNetworkLogoProps {
 
 export const EvmNetworkLogo = memo<EvmNetworkLogoProps>(
   ({ chainId, size = 24, chainName, className, imgClassName, withTooltip, tooltipPlacement }) => {
-    const source = useMemo(() => logosRecord[chainId] || getEvmNativeAssetIcon(chainId, size * 2), [chainId, size]);
+    const sources = useMemo(() => {
+      const doubleSize = size * 2;
+
+      return [
+        logosRecord[chainId],
+        getEvmNativeAssetIcon(chainId, doubleSize, 'llamao'),
+        getEvmNativeAssetIcon(chainId, doubleSize)
+      ].filter(isTruthy);
+    }, [chainId, size]);
 
     const chain = useEvmChainByChainId(chainId);
     const networkName = useMemo(
@@ -78,16 +88,18 @@ export const EvmNetworkLogo = memo<EvmNetworkLogoProps>(
 
     const withoutTooltipClassName = withTooltip ? undefined : className;
 
-    const logoJsx = source ? (
-      <img
-        src={source}
+    const fallback = <NetworkLogoFallback networkName={networkName} size={size} className={withoutTooltipClassName} />;
+
+    const logoJsx = (
+      <ImageStacked
+        sources={sources}
         alt={networkName}
         width={size}
         height={size}
+        loader={fallback}
+        fallback={fallback}
         className={clsx('border border-lines bg-white rounded-full', withoutTooltipClassName, imgClassName)}
       />
-    ) : (
-      <NetworkLogoFallback networkName={networkName} size={size} className={withoutTooltipClassName} />
     );
 
     return withTooltip ? (

src/lib/images-uri.ts

@@ -222,40 +222,58 @@ const chainIdsChainNamesRecord: Record<number, string> = {
   66: 'okc',
   2020: 'ronin',
   100009: 'vechain',
-  7000: 'zetachain'
+  7000: 'zetachain',
+  48900: 'zircuit',
+  32769: 'zilliqa',
+  [OTHER_COMMON_MAINNET_CHAIN_IDS.etherlink]: 'etherlink'
 };
 
-const baseUrl = 'https://raw.githubusercontent.com/rainbow-me/assets/master/blockchains/';
+const rainbowBaseUrl = 'https://raw.githubusercontent.com/rainbow-me/assets/master/blockchains/';
+const llamaoBaseUrl = 'https://icons.llamao.fi/icons/chains/';
 
 const getCompressedImageUrl = (imageUrl: string, size: number) =>
   `https://img.templewallet.com/insecure/fill/${size}/${size}/ce/0/plain/${imageUrl}`;
 
-export const getEvmNativeAssetIcon = (chainId: number, size?: number) => {
-  const chainName = chainIdsChainNamesRecord[chainId];
+type NativeIconSource = 'rainbow' | 'llamao';
+
+const getImageUrl = (source: NativeIconSource, chainName: string) => {
+  if (source === 'llamao') return `${llamaoBaseUrl}rsz_${chainName}.jpg`;
+
+  return `${rainbowBaseUrl}${chainName}/info/logo.png`;
+};
 
+export const getEvmNativeAssetIcon = (chainId: number, size?: number, source: NativeIconSource = 'rainbow') => {
+  const chainName = chainIdsChainNamesRecord[chainId];
   if (!chainName) return null;
 
-  const imageUrl = `${baseUrl}${chainName}/info/logo.png`;
+  const imageUrl = getImageUrl(source, chainName);
 
   if (size) return getCompressedImageUrl(imageUrl, size);
 
   return imageUrl;
 };
 
-const getEvmCustomChainIconUrl = (chainId: number, metadata: EvmAssetMetadataBase) => {
+const getEvmCustomChainIconUrl = (
+  chainId: number,
+  metadata: EvmAssetMetadataBase,
+  nativeIconSource: NativeIconSource = 'rainbow'
+) => {
   const chainName = chainIdsChainNamesRecord[chainId];
 
   if (!chainName) return null;
 
   return metadata.standard === EvmAssetStandard.NATIVE
-    ? getEvmNativeAssetIcon(chainId)
-    : `${baseUrl}${chainName}/assets/${metadata.address}/logo.png`;
+    ? getEvmNativeAssetIcon(chainId, undefined, nativeIconSource)
+    : `${rainbowBaseUrl}${chainName}/assets/${metadata.address}/logo.png`;
 };
 
-export const buildEvmTokenIconSources = (metadata: EvmAssetMetadataBase, chainId: number) => {
-  const mainFallback = getEvmCustomChainIconUrl(chainId, metadata);
+export const buildEvmTokenIconSources = (metadata: EvmAssetMetadataBase, chainId: number): string[] => {
+  const fallbacks = [
+    getEvmCustomChainIconUrl(chainId, metadata),
+    metadata.standard === EvmAssetStandard.NATIVE && getEvmCustomChainIconUrl(chainId, metadata, 'llamao')
+  ];
 
-  return mainFallback ? [getCompressedImageUrl(mainFallback, COMPRESSES_TOKEN_ICON_SIZE)] : [];
+  return fallbacks.filter(isTruthy).map(url => getCompressedImageUrl(url, COMPRESSES_TOKEN_ICON_SIZE));
 };
 
 export const buildEvmCollectibleIconSources = (metadata: EvmCollectibleMetadata) => {

src/lib/temple/chains-specs.ts

@@ -79,6 +79,15 @@ export const DEFAULT_EVM_CHAINS_SPECS: Record<string, EvmChainSpecs & { testnet:
     testnet: false,
     currency: DEFAULT_EVM_CURRENCY
   },
+  [OTHER_COMMON_MAINNET_CHAIN_IDS.etherlink]: {
+    name: 'Etherlink Mainnet',
+    testnet: false,
+    currency: {
+      ...DEFAULT_EVM_CURRENCY,
+      name: 'Tezos',
+      symbol: 'XTZ'
+    }
+  },
   [ETH_SEPOLIA_CHAIN_ID]: {
     name: 'Ethereum Sepolia',
     currency: {
@@ -121,5 +130,14 @@ export const DEFAULT_EVM_CHAINS_SPECS: Record<string, EvmChainSpecs & { testnet:
       name: 'Sepolia Ether'
     },
     testnet: true
+  },
+  '128123': {
+    name: 'Etherlink Testnet',
+    currency: {
+      ...DEFAULT_EVM_CURRENCY,
+      name: 'Ghostnet Tezos',
+      symbol: 'XTZ'
+    },
+    testnet: true
   }
 };

src/lib/temple/types.ts

@@ -41,7 +41,8 @@ export const OTHER_COMMON_MAINNET_CHAIN_IDS = {
   avalanche: 43114,
   optimism: 10,
   arbitrum: 42161,
-  base: 8453
+  base: 8453,
+  etherlink: 42793
 };
 export const ETH_SEPOLIA_CHAIN_ID = 11155111;
 

src/temple/front/use-block-explorers.ts

@@ -303,6 +303,13 @@ const DEFAULT_BLOCK_EXPLORERS_BASE: Record<TempleChainKind, Record<string, Omit<
         id: 'optimism-mainnet'
       }
     ],
+    [OTHER_COMMON_MAINNET_CHAIN_IDS.etherlink]: [
+      {
+        name: 'Etherlink explorer',
+        url: 'https://explorer.etherlink.com',
+        id: 'etherlink-mainnet'
+      }
+    ],
     [ETH_SEPOLIA_CHAIN_ID]: [
       {
         name: 'Etherscan',
@@ -337,6 +344,13 @@ const DEFAULT_BLOCK_EXPLORERS_BASE: Record<TempleChainKind, Record<string, Omit<
         url: 'https://optimism-sepolia.blockscout.com',
         id: 'optimism-sepolia'
       }
+    ],
+    '128123': [
+      {
+        name: 'Etherlink Testnet explorer',
+        url: 'https://testnet.explorer.etherlink.com',
+        id: 'etherlink-ghostnet'
+      }
     ]
   }
 };

src/temple/networks.ts

@@ -186,6 +186,16 @@ export const EVM_DEFAULT_NETWORKS: NonEmptyArray<StoredEvmNetwork> = [
     color: '#fc0000',
     default: true
   },
+  {
+    id: 'etherlink-mainnet',
+    name: 'Etherlink Mainnet',
+    chain: TempleChainKind.EVM,
+    chainId: OTHER_COMMON_MAINNET_CHAIN_IDS.etherlink,
+    rpcBaseURL: 'https://node.mainnet.etherlink.com',
+    description: 'Etherlink Mainnet',
+    color: '#207449',
+    default: true
+  },
   {
     id: 'eth-sepolia',
     name: 'Ethereum Sepolia',
@@ -233,5 +243,15 @@ export const EVM_DEFAULT_NETWORKS: NonEmptyArray<StoredEvmNetwork> = [
     description: 'Optimism Testnet',
     color: '#fc0000',
     default: true
+  },
+  {
+    id: 'etherlink-ghostnet',
+    name: 'Etherlink Testnet',
+    chain: TempleChainKind.EVM,
+    chainId: 128123,
+    rpcBaseURL: 'https://node.ghostnet.etherlink.com',
+    description: 'Etherlink Testnet (Ghostnet)',
+    color: '#144c2f',
+    default: true
   }
 ];