diff --git a/frontend/.env.development b/frontend/.env.development
index 314e9fde..072e011c 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -1,2 +1,3 @@
REACT_APP_INFURA_KEY=42
-REACT_APP_TOKEN_CLASS_HASH=0x0278da3cbbc2105fc3ac1206a630357c5a4666020f15fed02c892ac5d856d8ef
\ No newline at end of file
+REACT_APP_TOKEN_CLASS_HASH=0x0278da3cbbc2105fc3ac1206a630357c5a4666020f15fed02c892ac5d856d8ef
+REACT_APP_NETWORK=goerli
\ No newline at end of file
diff --git a/frontend/src/components/Layout/App/index.tsx b/frontend/src/components/Layout/App/index.tsx
index bd345011..6b15129c 100644
--- 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 && (
+
+ The selected wallet is connected to the wrong network. Please switch to the {chain.name} network.
+
+ )}
diff --git a/frontend/src/components/Layout/App/style.css.ts b/frontend/src/components/Layout/App/style.css.ts
index 75655703..1dedc8c9 100644
--- 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
index e972e5d0..0672c3d9 100644
--- 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 (