Add supersim support to bridge app (#441)

* Adds @eth-optimism/wagmi & @eth-optimism/viem as deps to bridge-app

* Adds supersim chain defs for non-fork mode to @eth-optimism/viem

* Add support for UI supersim network switching

* remove console.log

* adds supersim chains as supported to tic tac toe game

apps/bridge-app/package.json

@@ -17,6 +17,8 @@
     "@eth-optimism/op-app": "workspace:*",
     "@eth-optimism/tokenlist": "^9.0.12",
     "@eth-optimism/ui-components": "workspace:*",
+    "@eth-optimism/viem": "workspace:*",
+    "@eth-optimism/wagmi": "workspace:*",
     "@rainbow-me/rainbowkit": "2.1.3",
     "@remixicon/react": "^4.1.1",
     "@tanstack/react-query": "^5.29.2",

apps/bridge-app/src/App.tsx

@@ -20,8 +20,8 @@ import { NETWORK_TYPE } from '@/constants/networkType'
 import { TicTacToe } from '@/routes/TicTacToe'
 import { Home } from '@/routes/Home'
 import { Playground } from '@/routes/Playground'
-import { foundry } from 'viem/chains'
 import { Toaster } from '@eth-optimism/ui-components'
+import { supersimL1, supersimL2A, supersimL2B } from '@eth-optimism/viem'
 
 const classNames = {
   app: 'app w-full min-h-screen flex flex-col',
@@ -38,8 +38,10 @@ const opChains = configureOpChains({ type: NETWORK_TYPE }) as [
   ...[Chain],
 ]
 
-if (import.meta.env.VITE_DEPLOYMENT_ENV === 'local') {
-  opChains.push(foundry)
+if (import.meta.env.VITE_SUPERSIM_ENABLED === 'true') {
+  opChains.push(supersimL1)
+  opChains.push(supersimL2A)
+  opChains.push(supersimL2B)
 }
 
 const wagmiConfig = getDefaultConfig({

apps/bridge-app/src/components/NetworkSelector.tsx

@@ -82,7 +82,7 @@ export const NetworkSelector = () => {
             <NetworkSelectorItem
               key={mainnet.id}
               chain={mainnet}
-              logo={networkPairsByID[mainnet.id] ? l2AssetLogo : l1AssetLogo}
+              logo={mainnet.sourceId ? l2AssetLogo : l1AssetLogo}
               isActive={chain?.id === mainnet.id}
               onSelect={onSwitchNetwork}
             />
@@ -95,7 +95,7 @@ export const NetworkSelector = () => {
             <NetworkSelectorItem
               key={testnet.id}
               chain={testnet}
-              logo={networkPairsByID[testnet.id] ? l2AssetLogo : l1AssetLogo}
+              logo={testnet.sourceId ? l2AssetLogo : l1AssetLogo}
               isActive={chain?.id === testnet.id}
               onSelect={onSwitchNetwork}
             />

apps/bridge-app/src/routes/TicTacToe.tsx

@@ -3,13 +3,16 @@ import { Game } from '@/components/tictactoe/Game'
 import { JoinGameDialog } from '@/components/tictactoe/JoinGameDialog'
 import { SupportedNetworks } from '@/providers/SupportedNetworks'
 import { Text } from '@eth-optimism/ui-components'
+import { supersimL1, supersimL2A, supersimL2B } from '@eth-optimism/viem'
 import { useParams } from 'react-router'
-import { optimismSepolia, foundry, Chain } from 'viem/chains'
+import { optimismSepolia, Chain } from 'viem/chains'
 
 const supportedChains: Chain[] = [optimismSepolia]
 
-if (import.meta.env.VITE_DEPLOYMENT_ENV === 'local') {
-  supportedChains.push(foundry)
+if (import.meta.env.VITE_SUPERSIM_ENABLED === 'true') {
+  supportedChains.push(supersimL1)
+  supportedChains.push(supersimL2A)
+  supportedChains.push(supersimL2B)
 }
 
 export const TicTacToe = () => {

packages/viem/src/chains/supersim.ts

@@ -0,0 +1,40 @@
+import { defineChain } from 'viem'
+import { mainnet, optimism } from 'viem/chains'
+
+export const supersimL1 = defineChain({
+  ...mainnet,
+  id: 900,
+  name: 'Supersim L1',
+  rpcUrls: {
+    default: {
+      http: ['http://127.0.0.1:8545'],
+    },
+  },
+  testnet: true,
+})
+
+export const supersimL2A = defineChain({
+  ...optimism,
+  id: 901,
+  name: 'Supersim L2 A',
+  rpcUrls: {
+    default: {
+      http: ['http://127.0.0.1:9545'],
+    },
+  },
+  testnet: true,
+  sourceId: 900,
+})
+
+export const supersimL2B = defineChain({
+  ...optimism,
+  id: 902,
+  name: 'Supersim L2 B',
+  rpcUrls: {
+    default: {
+      http: ['http://127.0.0.1:9546'],
+    },
+  },
+  testnet: true,
+  sourceId: 900,
+})

packages/viem/src/index.ts

@@ -8,6 +8,9 @@ export {
   l2ToL2CrossDomainMessengerABI,
 } from '@/abis.js'
 
+// supersim
+export { supersimL1, supersimL2A, supersimL2B } from '@/chains/supersim.js'
+
 // contracts
 export { contracts } from '@/contracts.js'