feat: adds zksync to network configuration

globals.d.ts

@@ -46,6 +46,7 @@ declare module 'react-native-dotenv' {
   export const ARBITRUM_MAINNET_RPC: string;
   export const BSC_MAINNET_RPC: string;
   export const ZORA_MAINNET_RPC: string;
+  export const ZKSYNC_MAINNET_RPC: string;
   export const RAINBOW_WYRE_MERCHANT_ID: string;
   export const RAINBOW_WYRE_MERCHANT_ID_TEST: string;
   export const WYRE_ACCOUNT_ID: string;

ios/Images.xcassets/badges/zksyncBadge.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "zksyncBadge.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/zksyncBadgeDark.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "zksyncBadgeDark.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/zksyncBadgeLarge.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "zksyncBadgeLarge.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/zksyncBadgeLargeDark.imageset /Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "zksyncBadgeLargeDark.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/zksyncBadgeNoShadow.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "zksyncBadgeNoShadow.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

src/components/ChainLogo.js

@@ -18,6 +18,9 @@ import ZoraBadgeNoShadow from '../assets/badges/zoraBadgeNoShadow.png';
 import BaseBadge from '../assets/badges/baseBadge.png';
 import BaseBadgeDark from '../assets/badges/baseBadgeDark.png';
 import BaseBadgeNoShadow from '../assets/badges/baseBadgeNoShadow.png';
+import ZkSyncBadge from '../assets/badges/zksyncBadge.png';
+import ZkSyncBadgeDark from '../assets/badges/zksyncBadgeDark.png';
+import ZkSyncBadgeNoShadow from '../assets/badges/zksyncBadgeNoShadow.png';
 import { Centered } from './layout';
 import networkTypes from '@/helpers/networkTypes';
 import styled from '@/styled-thing';
@@ -79,6 +82,12 @@ export default function ChainLogo({
           ? BaseBadgeDark
           : BaseBadge
         : BaseBadgeNoShadow;
+    } else if (network === networkTypes.zksync) {
+      val = withShadows
+        ? isDarkMode
+          ? ZkSyncBadgeDark
+          : ZkSyncBadge
+        : ZkSyncBadgeNoShadow;
     }
     return val;
   }, [isDarkMode, network, withShadows]);

src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinBadge.tsx

@@ -12,6 +12,8 @@ import ZoraBadge from '@/assets/badges/zoraBadge.png';
 import ZoraBadgeDark from '@/assets/badges/zoraBadgeDark.png';
 import BaseBadge from '@/assets/badges/baseBadge.png';
 import BaseBadgeDark from '@/assets/badges/baseBadgeDark.png';
+import ZkSyncBadge from '@/assets/badges/zksyncBadge.png';
+import ZkSyncBadgeDark from '@/assets/badges/zksyncBadgeDark.png';
 import { AssetType } from '@/entities';
 
 interface FastChainBadgeProps {
@@ -49,6 +51,10 @@ const AssetIconsByTheme: {
     dark: BaseBadgeDark,
     light: BaseBadge,
   },
+  [AssetType.zksync]: {
+    dark: ZkSyncBadgeDark,
+    light: ZkSyncBadge,
+  },
 };
 
 export const FastChainBadge = React.memo(function FastChainBadge({

src/components/coin-icon/ChainBadge.js

@@ -24,6 +24,10 @@ import BaseBadge from '../../assets/badges/baseBadge.png';
 import BaseBadgeDark from '../../assets/badges/baseBadgeDark.png';
 import BaseBadgeLarge from '../../assets/badges/baseBadgeLarge.png';
 import BaseBadgeLargeDark from '../../assets/badges/baseBadgeLargeDark.png';
+import ZkSyncBadge from '../../assets/badges/zksyncBadge.png';
+import ZkSyncBadgeDark from '../../assets/badges/zksyncBadgeDark.png';
+import ZkSyncBadgeLarge from '../../assets/badges/zksyncBadgeLarge.png';
+import ZkSyncBadgeLargeDark from '../../assets/badges/zksyncBadgeLargeDark.png';
 import { Centered } from '../layout';
 import { AssetType } from '@/entities';
 import styled from '@/styled-thing';
@@ -78,6 +82,8 @@ export default function ChainBadge({
         val = isDarkMode ? ZoraBadgeLargeDark : ZoraBadgeLarge;
       } else if (assetType === AssetType.base) {
         val = isDarkMode ? BaseBadgeLargeDark : BaseBadgeLarge;
+      } else if (assetType === AssetType.zksync) {
+        val = isDarkMode ? ZkSyncBadgeLargeDark : ZkSyncBadgeLarge;
       }
     } else {
       if (assetType === AssetType.arbitrum) {
@@ -92,6 +98,8 @@ export default function ChainBadge({
         val = isDarkMode ? ZoraBadgeDark : ZoraBadge;
       } else if (assetType === AssetType.base) {
         val = isDarkMode ? BaseBadgeDark : BaseBadge;
+      } else if (assetType === AssetType.zksync) {
+        val = isDarkMode ? ZkSyncBadgeDark : ZkSyncBadge;
       }
     }
     return val;

src/components/gas/GasSpeedButton.js

@@ -380,6 +380,7 @@ const GasSpeedButton = ({
       case networkTypes.arbitrum:
       case networkTypes.zora:
       case networkTypes.base:
+      case networkTypes.zkSync:
       default:
         return { mainnet_address: ETH_ADDRESS, symbol: 'ETH' };
     }

src/entities/assetTypes.ts

@@ -12,6 +12,7 @@ export enum AssetType {
   trash = 'trash',
   uniswap = 'uniswap',
   uniswapV2 = 'uniswap-v2',
+  zksync = 'zksync',
 }
 
 export default {
@@ -28,4 +29,5 @@ export default {
   trash: 'trash',
   uniswap: 'uniswap',
   uniswapV2: 'uniswap-v2',
+  zksync: 'zksync',
 } as const;

src/handlers/assets.ts

@@ -24,6 +24,7 @@ export function isL2Asset(type: any) {
     case AssetTypes.bsc:
     case AssetTypes.zora:
     case AssetTypes.base:
+    case AssetTypes.zksync:
       return true;
     default:
       return false;

src/handlers/web3.ts

@@ -28,6 +28,7 @@ import {
   smartContractMethods,
   CRYPTO_KITTIES_NFT_ADDRESS,
   CRYPTO_PUNKS_NFT_ADDRESS,
+  ZKSYNC_ETH_ADDRESS,
 } from '@/references';
 import {
   addBuffer,
@@ -114,6 +115,7 @@ export const setRpcEndpoints = (config: RainbowConfig): void => {
   rpcEndpoints[Network.polygon] = config.polygon_mainnet_rpc;
   rpcEndpoints[Network.bsc] = config.bsc_mainnet_rpc;
   rpcEndpoints[Network.zora] = config.zora_mainnet_rpc;
+  rpcEndpoints[Network.zkSync] = config.zkSync_mainnet_rpc;
   rpcEndpoints[Network.base] = config.base_mainnet_rpc;
 };
 
@@ -651,7 +653,8 @@ export const createSignableTransaction = async (
     transaction.asset.address === ARBITRUM_ETH_ADDRESS ||
     transaction.asset.address === OPTIMISM_ETH_ADDRESS ||
     transaction.asset.address === MATIC_POLYGON_ADDRESS ||
-    transaction.asset.address === BNB_BSC_ADDRESS
+    transaction.asset.address === BNB_BSC_ADDRESS ||
+    transaction.asset.address === ZKSYNC_ETH_ADDRESS
   ) {
     return getTxDetails(transaction);
   }

src/helpers/networkTypes.ts

@@ -7,6 +7,7 @@ export enum Network {
   base = 'base',
   bsc = 'bsc',
   zora = 'zora',
+  zkSync = 'zkSync',
   gnosis = 'gnosis',
 }
 
@@ -21,5 +22,6 @@ export default {
   base: 'base' as Network,
   bsc: 'bsc' as Network,
   zora: 'zora' as Network,
+  zkSync: 'zkSync' as Network,
   gnosis: 'gnosis' as Network,
 };

src/languages/en_US.json

@@ -805,6 +805,10 @@
         "text": "Binance Smart Chain (BSC) is the blockchain for the trading platform Binance. \n\nBSC allows for cheaper and faster transactions, but unlike a Layer 2 network, it has its own security and consensus mechanisms that differ from Ethereum.",
         "title": "What's Binance Smart Chain?"
       },
+      "zksync": {
+        "text": "zkSync 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.\n\nIt bundles lots of transactions together in a \"roll up\" before sending them down to live permanently on Ethereum.",
+        "title": "What's zkSync"
+      },
       "read_more": "Read More",
       "learn_more": "Learn More",
       "sending_to_contract": {
@@ -1373,7 +1377,7 @@
         },
         "info_row_2": {
           "title": "Swap directly on L2",
-          "description": "Fast and cheap swaps on Arbitrum, Optimism, Polygon and BSC."
+          "description": "Fast and cheap swaps on Arbitrum, Optimism, Polygon, BSC, and zkSync."
         },
         "info_row_3": {
           "title": "Flashbots protection",

src/model/config.ts

@@ -15,6 +15,7 @@ import {
   BASE_MAINNET_RPC_DEV,
   BSC_MAINNET_RPC,
   ZORA_MAINNET_RPC,
+  ZKSYNC_MAINNET_RPC,
 } from 'react-native-dotenv';
 import {
   getNetwork,
@@ -41,6 +42,7 @@ export interface RainbowConfig
   optimism_mainnet_rpc: string;
   polygon_mainnet_rpc: string;
   zora_mainnet_rpc: string;
+  zkSync_mainnet_rpc: string;
   base_mainnet_rpc: string;
   swagg_enabled: boolean;
   trace_call_block_number_offset: number;
@@ -51,6 +53,7 @@ export interface RainbowConfig
   polygon_enabled: boolean;
   optimism_enabled: boolean;
   zora_enabled: boolean;
+  zkSync_enabled: boolean;
   base_enabled: boolean;
   op_chains_enabled: boolean;
   mainnet_enabled: boolean;
@@ -62,6 +65,7 @@ export interface RainbowConfig
   polygon_tx_enabled: boolean;
   optimism_tx_enabled: boolean;
   zora_tx_enabled: boolean;
+  zkSync_tx_enabled: boolean;
   op_chains_tx_enabled: boolean;
   mainnet_tx_enabled: boolean;
   goerli_tx_enabled: boolean;
@@ -82,6 +86,7 @@ const DEFAULT_CONFIG: RainbowConfig = {
     bsc: 200,
     base: 200,
     zora: 200,
+    zkSync: 200,
   }),
   ethereum_goerli_rpc: __DEV__ ? ETHEREUM_GOERLI_RPC_DEV : ETHEREUM_GOERLI_RPC,
   ethereum_mainnet_rpc: __DEV__
@@ -95,6 +100,7 @@ const DEFAULT_CONFIG: RainbowConfig = {
   polygon_mainnet_rpc: POLYGON_MAINNET_RPC,
   bsc_mainnet_rpc: BSC_MAINNET_RPC,
   zora_mainnet_rpc: ZORA_MAINNET_RPC,
+  zkSync_mainnet_rpc: ZKSYNC_MAINNET_RPC,
   base_mainnet_rpc: __DEV__ ? BASE_MAINNET_RPC_DEV : BASE_MAINNET_RPC,
   swagg_enabled: true,
   trace_call_block_number_offset: 20,
@@ -105,6 +111,7 @@ const DEFAULT_CONFIG: RainbowConfig = {
   polygon_enabled: true,
   optimism_enabled: true,
   zora_enabled: true,
+  zkSync_enabled: true,
   base_enabled: true,
   op_chains_enabled: true,
 
@@ -118,6 +125,7 @@ const DEFAULT_CONFIG: RainbowConfig = {
   polygon_tx_enabled: true,
   optimism_tx_enabled: true,
   zora_tx_enabled: true,
+  zkSync_tx_enabled: true,
   op_chains_tx_enabled: true,
 
   mainnet_tx_enabled: true,
@@ -165,6 +173,7 @@ const init = async () => {
         key === 'polygon_tx_enabled' ||
         key === 'optimism_tx_enabled' ||
         key === 'zora_tx_enabled' ||
+        key === 'zkSync_tx_enabled' ||
         key === 'base_tx_enabled' ||
         key === 'op_chains_tx_enabled' ||
         key === 'goerli_tx_enabled' ||
@@ -174,6 +183,7 @@ const init = async () => {
         key === 'polygon_enabled' ||
         key === 'optimism_enabled' ||
         key === 'zora_enabled' ||
+        key === 'zkSync_enabled' ||
         key === 'base_enabled' ||
         key === 'op_chains_enabled' ||
         key === 'goerli_enabled' ||

src/networks/index.ts

@@ -6,6 +6,7 @@ import { getOptimismNetworkObject } from './optimism';
 import { getPolygonNetworkObject } from './polygon';
 import { Network, NetworkProperties } from './types';
 import { getZoraNetworkObject } from './zora';
+import { getZkSyncNetworkObject } from './zksync';
 import { getGnosisNetworkObject } from './gnosis';
 import { getBaseNetworkObject } from './base';
 import store from '@/redux/store';
@@ -22,6 +23,7 @@ export const RainbowNetworks = [
   getOptimismNetworkObject(),
   getPolygonNetworkObject(),
   getZoraNetworkObject(),
+  getZkSyncNetworkObject(),
   getGnosisNetworkObject(),
   getGoerliNetworkObject(),
   getBSCNetworkObject(),
@@ -45,6 +47,8 @@ export function getNetworkObj(network: Network): NetworkProperties {
       return getPolygonNetworkObject();
     case Network.zora:
       return getZoraNetworkObject();
+    case Network.zkSync:
+      return getZkSyncNetworkObject();
     case Network.gnosis:
       return getGnosisNetworkObject();