feat: add zkSync and zkSyncTestnet (#1560)

* chore: add zksync network * chore: add icon * fix: replace zkSync icon * fix: adopt zkSync naming, infer chain name from wagmi * chore: changeset * fix: zkSync colloquial name * fix: zkSync icon background off-white color * fix: remove icon * fix: re-add icon --------- Co-authored-by: Daniel Sinclair <[email protected]>
rainbow-me · Oct 15, 2023 · 6cbd9a5 · 6cbd9a5 · vercel · Oct 15, 2023
1 parent 2abfffe
commit 6cbd9a5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/.changeset/olive-rockets-breathe.md b/.changeset/olive-rockets-breathe.md
@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Added `zkSync` and `zkSyncTestnet` network support
diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx
@@ -67,6 +67,7 @@ import {
   mainnet,
   optimism,
   polygon,
+  zkSync,
   zora,
 } from 'wagmi/chains';
 import { alchemyProvider } from 'wagmi/providers/alchemy';
@@ -84,6 +85,7 @@ const { chains, publicClient, webSocketPublicClient } = configureChains(
     base,
     zora,
     bsc,
+    zkSync,
     ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true'
       ? [goerli, holesky]
       : []),

diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/chainIcons/zkSync.svg b/packages/rainbowkit/src/components/RainbowKitProvider/chainIcons/zkSync.svg
diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts b/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts
@@ -29,7 +29,9 @@ type ChainName =
   | 'ropsten'
   | 'sepolia'
   | 'zora'
-  | 'zoraTestnet';
+  | 'zoraTestnet'
+  | 'zkSync'
+  | 'zkSyncTestnet';
 
 type IconMetadata = {
   iconUrl: () => Promise<string>;
@@ -91,6 +93,11 @@ const zoraIcon: IconMetadata = {
   iconUrl: async () => (await import('./chainIcons/zora.svg')).default,
 };
 
+const zkSyncIcon: IconMetadata = {
+  iconBackground: '#f9f7ec',
+  iconUrl: async () => (await import('./chainIcons/zkSync.svg')).default,
+};
+
 const chainMetadataByName: Record<ChainName, ChainMetadata | null> = {
   arbitrum: { chainId: 42_161, name: 'Arbitrum', ...arbitrumIcon },
   arbitrumGoerli: { chainId: 421_613, ...arbitrumIcon },
@@ -118,6 +125,8 @@ const chainMetadataByName: Record<ChainName, ChainMetadata | null> = {
   sepolia: { chainId: 11_155_111, ...ethereumIcon },
   zora: { chainId: 7777777, name: 'Zora', ...zoraIcon },
   zoraTestnet: { chainId: 999, ...zoraIcon },
+  zkSync: { chainId: 324, name: 'zkSync', ...zkSyncIcon },
+  zkSyncTestnet: { chainId: 280, ...zkSyncIcon },
 };
 
 const chainMetadataById = Object.fromEntries(