🎨: improve Starknet network handling

keep-starknet-strange · Dec 13, 2023 · 8d77d2e · 8d77d2e
1 parent ad85cca
commit 8d77d2e
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 7 deletions.
diff --git a/frontend/.env.development b/frontend/.env.development
@@ -1,2 +1,3 @@
 REACT_APP_INFURA_KEY=42
-REACT_APP_TOKEN_CLASS_HASH=0x0278da3cbbc2105fc3ac1206a630357c5a4666020f15fed02c892ac5d856d8ef
+REACT_APP_TOKEN_CLASS_HASH=0x0278da3cbbc2105fc3ac1206a630357c5a4666020f15fed02c892ac5d856d8ef
+REACT_APP_NETWORK=goerli
diff --git a/frontend/src/components/Layout/App/index.tsx b/frontend/src/components/Layout/App/index.tsx
@@ -1,3 +1,4 @@
+import { useAccount, useNetwork } from '@starknet-react/core'
 import NavBar from 'src/components/NavBar'
 import NavBarMobile from 'src/components/NavBar/Mobile'
 import Box from 'src/theme/components/Box'
@@ -9,8 +10,16 @@ interface AppLayoutProps {
 }
 
 export default function AppLayout({ children }: AppLayoutProps) {
+  const { chainId: walletChainId } = useAccount()
+  const { chain } = useNetwork()
+
   return (
     <>
+      {walletChainId !== undefined && walletChainId !== chain.id && (
+        <Box className={styles.chainWarning}>
+          The selected wallet is connected to the wrong network. Please switch to the {chain.name} network.
+        </Box>
+      )}
       <NavBar />
       <NavBarMobile />
       <Box as="span" className={styles.radial} />

diff --git a/frontend/src/components/Layout/App/style.css.ts b/frontend/src/components/Layout/App/style.css.ts
@@ -14,3 +14,11 @@ export const radial = style([
     background: 'appGradient',
   }),
 ])
+
+export const chainWarning = sprinkles({
+  width: 'full',
+  paddingY: '8',
+  textAlign: 'center',
+  backgroundColor: 'accent',
+  color: 'text1',
+})
diff --git a/frontend/src/components/Web3Provider/index.tsx b/frontend/src/components/Web3Provider/index.tsx
@@ -1,6 +1,8 @@
-import { sepolia } from '@starknet-react/chains'
+import { goerli, mainnet } from '@starknet-react/chains'
 import { argent, braavos, publicProvider, StarknetConfig, starkscan, useInjectedConnectors } from '@starknet-react/core'
 
+const network = process.env.REACT_APP_NETWORK ?? 'goerli'
+
 // STARKNET
 
 interface StarknetProviderProps {
@@ -17,7 +19,7 @@ export function StarknetProvider({ children }: StarknetProviderProps) {
   return (
     <StarknetConfig
       connectors={connectors}
-      chains={[sepolia]}
+      chains={[network === 'mainnet' ? mainnet : goerli]}
       provider={publicProvider()}
       explorer={starkscan}
       autoConnect

diff --git a/frontend/src/constants/contracts.ts b/frontend/src/constants/contracts.ts
@@ -2,7 +2,5 @@ import { constants } from 'starknet'
 
 export const UDC = constants.UDC
 
-export const TOKEN_CLASS_HASH = process.env.REACT_APP_TOKEN_CLASS_HASH ?? ''
-if (TOKEN_CLASS_HASH === '') {
-  throw new Error(`REACT_APP_TOKEN_CLASS_HASH must be a defined environment variable`)
-}
+export const TOKEN_CLASS_HASH =
+  process.env.REACT_APP_TOKEN_CLASS_HASH ?? '0x0278da3cbbc2105fc3ac1206a630357c5a4666020f15fed02c892ac5d856d8ef'