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 (