feat: zora, base chain support (#767)

Co-authored-by: Esteban Miño <[email protected]>

.env.d.ts

@@ -3,6 +3,8 @@ declare global {
     interface ProcessEnv {
       ALCHEMY_API_KEY: string;
       BSC_MAINNET_RPC: string;
+      ZORA_MAINNET_RPC: string;
+      BASE_MAINNET_RPC: string;
       ETHERSCAN_API_KEY: string;
       SEGMENT_WRITE_KEY: string;
       SENTRY_DSN: string;

e2e/serial/dappInteractions/2_dappInteractionFlow.test.ts

@@ -256,7 +256,7 @@ describe('App interactions flow', () => {
     });
 
     await findElementByTextAndClick(driver, 'bx-e2e-dapp.vercel.app');
-    await findElementByTestIdAndClick({ id: 'switch-network-item-5', driver });
+    await findElementByTestIdAndClick({ id: 'switch-network-item-7', driver });
 
     await driver.get('https://bx-e2e-dapp.vercel.app/');
     const dappHandler = await getWindowHandle({ driver });

e2e/serial/swap/1_swapFlow1.test.ts

@@ -631,7 +631,7 @@ it('should be able to filter assets to buy by network', async () => {
     driver,
   });
   await findElementByTestIdAndClick({
-    id: 'switch-network-item-4',
+    id: 'switch-network-item-6',
     driver,
   });
   await typeOnTextInput({

src/core/firebase/remoteConfig.ts

@@ -30,6 +30,8 @@ export interface RainbowConfig extends Record<string, any> {
     [ChainName.optimism]: number;
     [ChainName.polygon]: number;
     [ChainName.arbitrum]: number;
+    [ChainName.base]: number;
+    [ChainName.zora]: number;
     [ChainName.bsc]: number;
   };
 }
@@ -47,6 +49,8 @@ const DEFAULT_CONFIG = {
     mainnet: 100,
     optimism: 200,
     polygon: 200,
+    base: 200,
+    zora: 200,
     bsc: 200,
   },
 };

src/core/languages/_english.json

@@ -773,15 +773,12 @@
     "month": "1M",
     "year": "1Y",
     "approvals": "Token Approvals",
-
     "this_token_is_on_network": "This %{symbol} is on the %{chainName} network",
-
     "more_options": {
       "copy_address": "Copy Address",
       "hide": "Hide Token",
       "report": "Report Token"
     },
-
     "about": {
       "about_token": "About %{name}",
       "price": "Price",
@@ -798,12 +795,10 @@
         "title": "Fully Diluted Market Cap",
         "description": "The maximum possible market cap of a token if the total supply was available in circulation."
       },
-
       "supply": "Supply",
       "max_total_supply": "Max Total Supply",
       "holders": "Holders",
       "total_transfers": "Total Transfers",
-
       "more_info": "More info",
       "token_standard": "Token Standard",
       "token_contract": "Token Contract",
@@ -861,6 +856,16 @@
         "description_1": "Binance Smart Chain, or BSC for short, is the blockchain network for the trading platform Binance.",
         "description_2": "It allows for cheaper and faster transactions, but unlike Layer 2 networks, BSC has its own security and consensus mechanisms that differ from Ethereum."
       },
+      "base": {
+        "title": "What's Base?",
+        "description_1": "Base is a Layer 2 network that runs on top of Ethereum, enabling cheaper and faster transactions while still benefiting from the underlying security of Ethereum.",
+        "description_2": "It bundles lots of transactions together in a \"roll up\" before sending them down to live permanently on Ethereum."
+      },
+      "zora": {
+        "title": "What's Zora?",
+        "description_1": "Zora is a Layer 2 network that runs on top of Ethereum, enabling cheaper and faster transactions while still benefiting from the underlying security of Ethereum.",
+        "description_2": "It bundles lots of transactions together in a \"roll up\" before sending them down to live permanently on Ethereum."
+      },
       "link_button_label": "Read more",
       "action_label": "Got it"
     },
@@ -970,4 +975,4 @@
       "after": " to request more."
     }
   }
-}
+}

src/core/network/refractionAddressWs.ts

@@ -5,6 +5,8 @@ export const refractionAddressMessages = {
     RECEIVED: 'received address assets',
     RECEIVED_ARBITRUM: 'received address arbitrum-assets',
     RECEIVED_OPTIMISM: 'received address optimism-assets',
+    RECEIVED_BASE: 'received address base-assets',
+    RECEIVED_ZORA: 'received address zora-assets',
     RECEIVED_POLYGON: 'received address polygon-assets',
     REMOVED: 'removed address assets',
   },
@@ -14,6 +16,8 @@ export const refractionAddressMessages = {
     RECEIVED: 'received address transactions',
     RECEIVED_ARBITRUM: 'received address arbitrum-transactions',
     RECEIVED_OPTIMISM: 'received address optimism-transactions',
+    RECEIVED_BASE: 'received address base-transactions',
+    RECEIVED_ZORA: 'received address zora-transactions',
     RECEIVED_POLYGON: 'received address polygon-transactions',
     REMOVED: 'removed address transactions',
   },

src/core/references/gasUnits.ts

@@ -8,6 +8,8 @@ export const gasUnits = {
     [ChainId.mainnet]: '200000',
     [ChainId.arbitrum]: '3500000',
     [ChainId.optimism]: '1000000',
+    [ChainId.base]: '1000000',
+    [ChainId.zora]: '1000000',
     [ChainId.bsc]: '600000',
     [ChainId.polygon]: '600000',
   },

src/core/references/index.ts

@@ -61,6 +61,12 @@ export const USDC_OPTIMISM_ADDRESS =
 export const WBTC_OPTIMISM_ADDRESS =
   '0x68f180fcce6836688e9084f035309e29bf0a2095';
 
+// base
+export const ETH_BASE_ADDRESS = AddressZero;
+
+// zora
+export const ETH_ZORA_ADDRESS = AddressZero;
+
 // bsc
 export const BSC_BNB_ADDRESS = AddressZero;
 
@@ -91,6 +97,8 @@ export const NATIVE_ASSETS_PER_CHAIN = {
   [ChainId.bsc]: BSC_BNB_ADDRESS,
   [ChainId.mainnet]: ETH_ADDRESS,
   [ChainId.optimism]: ETH_OPTIMISM_ADDRESS,
+  [ChainId.base]: ETH_BASE_ADDRESS,
+  [ChainId.zora]: ETH_ZORA_ADDRESS,
   [ChainId.polygon]: MATIC_POLYGON_ADDRESS,
   [ChainId.hardhat]: ETH_ADDRESS,
 };

src/core/resources/_selectors/assets.ts

@@ -38,6 +38,8 @@ export function selectUserAssetsListByChainId(assets: ParsedAssetsDictByChain) {
     assets?.[ChainId.optimism],
     assets?.[ChainId.polygon],
     assets?.[ChainId.arbitrum],
+    assets?.[ChainId.base],
+    assets?.[ChainId.zora],
     assets?.[ChainId.bsc],
   ].flat();
   return assetsByNetwork
@@ -62,6 +64,8 @@ export function selectUserAssetAddressMapByChainId(
     [ChainId.bsc]: mapAddresses(assets?.[ChainId.bsc]) || [],
     [ChainId.polygon]: mapAddresses(assets?.[ChainId.polygon]) || [],
     [ChainId.arbitrum]: mapAddresses(assets?.[ChainId.arbitrum]) || [],
+    [ChainId.base]: mapAddresses(assets?.[ChainId.base]) || [],
+    [ChainId.zora]: mapAddresses(assets?.[ChainId.zora]) || [],
   };
 }
 

src/core/resources/addys/addysSummary.ts

@@ -16,6 +16,8 @@ enum SummarySupportedChainId {
   optimism = ChainId.optimism as number,
   polygon = ChainId.polygon as number,
   arbitrum = ChainId.arbitrum as number,
+  base = ChainId.base as number,
+  zora = ChainId.zora as number,
   bsc = ChainId.bsc as number,
 }
 

src/core/resources/search/tokenSearch.ts

@@ -99,6 +99,8 @@ function parseTokenSearch(assets: SearchAsset[], chainId: ChainId) {
       `${ETH_ADDRESS}_${ChainId.arbitrum}`,
       `${BNB_MAINNET_ADDRESS}_${ChainId.bsc}`,
       `${MATIC_MAINNET_ADDRESS}_${ChainId.polygon}`,
+      `${ETH_ADDRESS}_${ChainId.base}`,
+      `${ETH_ADDRESS}_${ChainId.zora}`,
     ].includes(`${a.uniqueId}_${chainId}`),
     mainnetAddress: a.uniqueId as Address,
     uniqueId: `${a.uniqueId}_${chainId}`,

src/core/state/favorites/index.ts

@@ -8,7 +8,9 @@ import {
   DAI_POLYGON_ADDRESS,
   ETH_ADDRESS,
   ETH_ARBITRUM_ADDRESS,
+  ETH_BASE_ADDRESS,
   ETH_OPTIMISM_ADDRESS,
+  ETH_ZORA_ADDRESS,
   MATIC_POLYGON_ADDRESS,
   OP_ADDRESS,
   SOCKS_ADDRESS,
@@ -74,6 +76,8 @@ export const favoritesStore = createStore<FavoritesState>(
         USDC_OPTIMISM_ADDRESS,
         WBTC_OPTIMISM_ADDRESS,
       ],
+      [ChainId.base]: [ETH_BASE_ADDRESS],
+      [ChainId.zora]: [ETH_ZORA_ADDRESS],
     },
     addFavorite: ({ address, chainId }: UpdateFavoritesArgs) => {
       const { favorites } = get();

src/core/types/assets.ts

@@ -69,6 +69,8 @@ export enum AssetType {
   eth = 'eth',
   nft = 'nft',
   optimism = 'optimism',
+  base = 'base',
+  zora = 'zora',
   polygon = 'polygon',
   token = 'token',
   trash = 'trash',

src/core/types/chains.ts

@@ -21,29 +21,35 @@ export const hardhat: Chain = {
 
 export enum ChainName {
   arbitrum = 'arbitrum',
+  base = 'base',
   bsc = 'bsc',
   goerli = 'goerli',
   optimism = 'optimism',
   polygon = 'polygon',
+  zora = 'zora',
   mainnet = 'mainnet',
   hardhat = 'hardhat',
 }
 
 export enum ChainId {
   arbitrum = chain.arbitrum.id,
+  base = chain.base.id,
   bsc = chain.bsc.id,
   goerli = chain.goerli.id,
   optimism = chain.optimism.id,
   mainnet = chain.mainnet.id,
   polygon = chain.polygon.id,
+  zora = chain.zora.id,
   hardhat = HARDHAT_CHAIN_ID,
 }
 
 export const ChainNameDisplay = {
   [ChainId.arbitrum]: 'Arbitrum',
+  [ChainId.base]: 'Base',
   [ChainId.bsc]: 'BSC',
   [ChainId.optimism]: 'Optimism',
   [ChainId.polygon]: 'Polygon',
+  [ChainId.zora]: 'Zora',
   [ChainId.mainnet]: 'Ethereum',
   [ChainId.hardhat]: 'Hardhat',
 };

src/core/utils/chains.ts

@@ -1,4 +1,12 @@
-import { arbitrum, bsc, mainnet, optimism, polygon } from '@wagmi/chains';
+import {
+  arbitrum,
+  base,
+  bsc,
+  mainnet,
+  optimism,
+  polygon,
+  zora,
+} from '@wagmi/chains';
 import type { Address, Chain } from 'wagmi';
 
 import { ETH_ADDRESS, NATIVE_ASSETS_PER_CHAIN } from '~/core/references';
@@ -11,6 +19,8 @@ export const SUPPORTED_CHAINS: Chain[] = [
   polygon,
   optimism,
   arbitrum,
+  base,
+  zora,
   bsc,
 ].map((chain) => ({ ...chain, name: ChainNameDisplay[chain.id] }));
 
@@ -24,13 +34,17 @@ export const SUPPORTED_CHAIN_IDS = SUPPORTED_CHAINS.map(({ id }) => id);
 export const isL2Chain = (chain: ChainName | ChainId): boolean => {
   switch (chain) {
     case ChainName.arbitrum:
+    case ChainName.base:
     case ChainName.bsc:
     case ChainName.optimism:
     case ChainName.polygon:
+    case ChainName.zora:
     case ChainId.arbitrum:
+    case ChainId.base:
     case ChainId.bsc:
     case ChainId.optimism:
     case ChainId.polygon:
+    case ChainId.zora:
       return true;
     default:
       return false;
@@ -57,6 +71,10 @@ export function chainNameFromChainId(chainId: ChainId) {
 export function getBlockExplorerHostForChain(chainId: ChainId) {
   if (chainId === ChainId.optimism) {
     return 'optimistic.etherscan.io';
+  } else if (chainId === ChainId.base) {
+    return 'basescan.org';
+  } else if (chainId === ChainId.zora) {
+    return 'explorer.zora.energy';
   } else if (chainId === ChainId.polygon) {
     return 'polygonscan.com';
   } else if (chainId === ChainId.bsc) {

src/core/utils/connectedApps.ts

@@ -203,6 +203,12 @@ const displayDappNames: {
   'zora.co': {
     name: 'Zora',
   },
+  'base.org': {
+    name: 'Base',
+  },
+  'zora.energy': {
+    name: 'Zora Energy',
+  },
 };
 
 export const getHardcodedDappInformation = (hostName: string) =>

src/core/utils/gas.ts

@@ -352,6 +352,10 @@ export const getChainWaitTime = (chainId: ChainId) => {
       return { safeWait: 6, proposedWait: 3, fastWait: 3 };
     case ChainId.optimism:
       return { safeWait: 20, proposedWait: 20, fastWait: 20 };
+    case ChainId.base:
+      return { safeWait: 20, proposedWait: 20, fastWait: 20 };
+    case ChainId.zora:
+      return { safeWait: 20, proposedWait: 20, fastWait: 20 };
     case ChainId.arbitrum:
       return { safeWait: 8, proposedWait: 8, fastWait: 8 };
     default:

src/core/wagmi/createTestWagmiClient.ts

@@ -1,5 +1,13 @@
 import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
-import { arbitrum, bsc, mainnet, optimism, polygon } from '@wagmi/chains';
+import {
+  arbitrum,
+  base,
+  bsc,
+  mainnet,
+  optimism,
+  polygon,
+  zora,
+} from '@wagmi/chains';
 import {
   Chain,
   CreateClientConfig,
@@ -19,7 +27,7 @@ const noopStorage = {
 };
 
 const { chains, provider, webSocketProvider } = configureChains(
-  [mainnet, optimism, polygon, arbitrum, bsc] as Chain[],
+  [mainnet, optimism, polygon, arbitrum, base, zora, bsc] as Chain[],
   [
     jsonRpcProvider({
       rpc: () => {

src/core/wagmi/createWagmiClient.ts

@@ -37,6 +37,10 @@ const { chains, provider, webSocketProvider } = configureChains(
             return { http: process.env.ARBITRUM_MAINNET_RPC as string };
           case ChainId.polygon:
             return { http: process.env.POLYGON_MAINNET_RPC as string };
+          case ChainId.base:
+            return { http: process.env.BASE_MAINNET_RPC as string };
+          case ChainId.zora:
+            return { http: process.env.ZORA_MAINNET_RPC as string };
           case ChainId.bsc:
             return { http: process.env.BSC_MAINNET_RPC as string };
           default:

src/design-system/styles/designTokens.ts

@@ -483,6 +483,8 @@ export type ForegroundColor =
   | 'arbitrum'
   | 'optimism'
   | 'polygon'
+  | 'base'
+  | 'zora'
   | 'bsc';
 
 export const foregroundColors: Record<
@@ -563,6 +565,14 @@ export const foregroundColors: Record<
     light: '#8247E5',
     dark: '#BE97FF',
   },
+  base: {
+    light: '#0052FF',
+    dark: '#3979FF',
+  },
+  zora: {
+    light: '#2B5DF0',
+    dark: '#6183F0',
+  },
   bsc: {
     light: '#EBAF09',
     dark: '#EBAF09',
@@ -616,6 +626,8 @@ export const textColors = selectForegroundColors(
   'arbitrum',
   'optimism',
   'polygon',
+  'base',
+  'zora',
   'bsc',
   ...genericColors,
 );

src/entries/iframe/notification.tsx

@@ -24,6 +24,8 @@ const ASSET_SOURCE = {
   [ChainId.optimism]: 'assets/badges/optimismBadge.png',
   [ChainId.arbitrum]: 'assets/badges/arbitrumBadge.png',
   [ChainId.polygon]: 'assets/badges/polygonBadge.png',
+  [ChainId.base]: 'assets/badges/baseBadge.png',
+  [ChainId.zora]: 'assets/badges/zoraBadge.png',
   [ChainId.bsc]: 'assets/badges/bscBadge.png',
 };