Change approach for hemi-metadata re: testnets

hemi-metadata/index.ts

@@ -1,10 +1,7 @@
 import { Chain } from 'wagmi'
-import { mainnet, sepolia } from 'wagmi/chains'
-
-const testnet = (process.env.NEXT_PUBLIC_TESTNET_MODE ?? 'false') === 'true'
 
 // These values will change once migrated to Hemi network
-const hemiTestnet: Chain = {
+export const hemiTestnet: Chain = {
   blockExplorers: {
     default: {
       name: 'BVM Tesnet Explorer',
@@ -28,18 +25,13 @@ const hemiTestnet: Chain = {
       http: ['http://216.219.89.253:18546'],
     },
   },
-  testnet,
+  testnet: true,
 }
 
 // Currently, there's no data for mainnet, so let's copy the testnet data
 // Once that's defined, we could use the flag in build time to compile either test or mainnet
 // for exported hemi object
-const hemiMainnet: Chain = {
+export const hemiMainnet: Chain = {
   ...hemiTestnet,
+  testnet: false,
 }
-
-export const hemi = testnet ? hemiTestnet : hemiMainnet
-
-export const bridgeableNetworks = testnet ? [sepolia] : [mainnet]
-
-export const networks = [hemi, ...bridgeableNetworks]

marketing/app/[locale]/layout.tsx

@@ -2,6 +2,7 @@ import 'styles/globals.css'
 import '@rainbow-me/rainbowkit/styles.css'
 
 import { locales, type Locale } from 'app/i18n'
+import { hemi } from 'app/networks'
 import { bricolageGrotesque, inter } from 'fonts'
 import { notFound } from 'next/navigation'
 import { NextIntlClientProvider } from 'next-intl'
@@ -36,7 +37,7 @@ export default async function RootLayout({
         className={`font-inter flex flex-col py-7 ${bricolageGrotesque.variable} ${inter.className} bg-zinc-100`}
       >
         <NextIntlClientProvider locale={locale} messages={messages}>
-          <WalletContext locale={locale}>
+          <WalletContext hemiChain={hemi} locale={locale}>
             {/* These styles can't be on body because they break with RainbowKit https://github.com/rainbow-me/rainbowkit/issues/609 */}
             <div className="w-full px-4 sm:mx-auto sm:w-4/5 lg:w-3/4 xl:w-5/6 2xl:max-w-[1500px]">
               <Header />

marketing/app/[locale]/network/configureNetworks.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { bridgeableNetworks, hemi } from 'hemi-metadata'
+import { bridgeableNetworks, hemi } from 'app/networks'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'

marketing/app/networks.ts

@@ -0,0 +1,10 @@
+'use client'
+
+import { hemiMainnet, hemiTestnet } from 'hemi-metadata'
+import { mainnet, sepolia } from 'wagmi/chains'
+
+const testnetMode = (process.env.NEXT_PUBLIC_TESTNET_MODE ?? 'false') === 'true'
+
+export const hemi = testnetMode ? hemiTestnet : hemiMainnet
+
+export const bridgeableNetworks = testnetMode ? [sepolia] : [mainnet]

ui-common/components/walletContext.tsx

@@ -7,43 +7,51 @@ import {
   type Locale,
 } from '@rainbow-me/rainbowkit'
 import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'
-import { networks } from 'hemi-metadata'
-import { configureChains, createConfig, WagmiConfig } from 'wagmi'
+import { bridgeableNetworks } from 'hemi-metadata'
+import { useMemo } from 'react'
+import { type Chain, configureChains, createConfig, WagmiConfig } from 'wagmi'
 import { publicProvider } from 'wagmi/providers/public'
 
-const { chains, publicClient } = configureChains(networks, [publicProvider()])
-
-const connectors = connectorsForWallets([
-  {
-    groupName: 'Wallets',
-    // internally "metaMaskWallet" has code for wallet connect. If we don't set version to 1, typings requires us
-    // to pass a projectId that is generated in wallet connect's website
-    // after all, (for now) we won't support wallet connect.
-    wallets: [metaMaskWallet({ chains, walletConnectVersion: '1' })],
-  },
-])
-
-const wagmiConfig = createConfig({
-  autoConnect: true,
-  connectors,
-  publicClient,
-})
-
 type Props = {
   children: React.ReactNode
+  hemiChain: Chain
   locale: Locale
 }
 
-export const WalletContext = ({ children, locale }: Props) => (
-  <WagmiConfig config={wagmiConfig}>
-    <RainbowKitProvider
-      chains={chains}
-      locale={locale as Locale}
-      theme={lightTheme({
-        accentColor: 'black',
-      })}
-    >
-      {children}
-    </RainbowKitProvider>
-  </WagmiConfig>
-)
+export const WalletContext = function ({ children, hemiChain, locale }: Props) {
+  const { chains, publicClient } = useMemo(
+    () =>
+      configureChains([hemiChain, ...bridgeableNetworks], [publicProvider()]),
+    [hemiChain],
+  )
+
+  const connectors = connectorsForWallets([
+    {
+      groupName: 'Wallets',
+      // internally "metaMaskWallet" has code for wallet connect. If we don't set version to 1, typings requires us
+      // to pass a projectId that is generated in wallet connect's website
+      // after all, (for now) we won't support wallet connect.
+      wallets: [metaMaskWallet({ chains, walletConnectVersion: '1' })],
+    },
+  ])
+
+  const wagmiConfig = createConfig({
+    autoConnect: true,
+    connectors,
+    publicClient,
+  })
+
+  return (
+    <WagmiConfig config={wagmiConfig}>
+      <RainbowKitProvider
+        chains={chains}
+        locale={locale as Locale}
+        theme={lightTheme({
+          accentColor: 'black',
+        })}
+      >
+        {children}
+      </RainbowKitProvider>
+    </WagmiConfig>
+  )
+}

webapp/app/[locale]/bridge/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { TokenSelector } from 'app/components/TokenSelector'
-import { hemi, networks } from 'hemi-metadata'
+import { hemi, bridgeableNetworks } from 'app/networks'
 import dynamic from 'next/dynamic'
 import { useTranslations } from 'next-intl'
 import Skeleton from 'react-loading-skeleton'
@@ -12,6 +12,8 @@ import { Deposit } from './_components/deposit'
 import { Withdraw } from './_components/withdraw'
 import { useBridgeState } from './useBridgeState'
 
+const networks = [hemi, ...bridgeableNetworks]
+
 const Balance = dynamic(
   () => import('components/balance').then(mod => mod.Balance),
   {

webapp/app/[locale]/bridge/useBridgeState.ts

@@ -1,4 +1,4 @@
-import { hemi, bridgeableNetworks } from 'hemi-metadata'
+import { bridgeableNetworks, hemi } from 'app/networks'
 import { useReducer } from 'react'
 import { tokenList } from 'tokenList'
 import { Token } from 'types/token'

webapp/app/[locale]/layout.tsx

@@ -3,6 +3,7 @@ import '@rainbow-me/rainbowkit/styles.css'
 import 'react-loading-skeleton/dist/skeleton.css'
 
 import { locales, type Locale } from 'app/i18n'
+import { hemi } from 'app/networks'
 import { Header } from 'components/header'
 import { notFound } from 'next/navigation'
 import { NextIntlClientProvider } from 'next-intl'
@@ -37,7 +38,7 @@ export default async function RootLayout({
         className={`flex min-h-screen flex-col bg-neutral-100 ${bricolageGrotesque.variable} ${inter.className}`}
       >
         <NextIntlClientProvider locale={locale} messages={messages}>
-          <WalletContext locale={locale}>
+          <WalletContext hemiChain={hemi} locale={locale}>
             <Header />
             {children}
           </WalletContext>

webapp/app/networks.ts

@@ -0,0 +1,10 @@
+'use client'
+
+import { hemiMainnet, hemiTestnet } from 'hemi-metadata'
+import { mainnet, sepolia } from 'wagmi/chains'
+
+const testnetMode = (process.env.NEXT_PUBLIC_TESTNET_MODE ?? 'false') === 'true'
+
+export const hemi = testnetMode ? hemiTestnet : hemiMainnet
+
+export const bridgeableNetworks = testnetMode ? [sepolia] : [mainnet]

webapp/components/addNetworkToWallet.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { hemi } from 'hemi-metadata'
+import { hemi } from 'app/networks'
 import { useTranslations } from 'next-intl'
 import { useAccount, useNetwork, useWalletClient } from 'wagmi'
 

webapp/hooks/useL2Bridge.ts

@@ -1,5 +1,5 @@
 import { type CrossChainMessenger as CrossChainMessengerType } from '@eth-optimism/sdk'
-import { hemi } from 'hemi-metadata'
+import { hemi } from 'app/networks'
 import {
   type Provider,
   useJsonRpcProvider,

webapp/tokenList.ts

@@ -1,7 +1,7 @@
 /* eslint-disable sort-keys */
 // example list for Token list - will probably need to be loaded from somewhere
 
-import { hemi } from 'hemi-metadata'
+import { hemi } from 'app/networks'
 import { Token } from 'types/token'
 import { sepolia } from 'wagmi/chains'