Better network issue display

packages/web/components/Landing/LandingConnectButton.tsx

@@ -37,9 +37,9 @@ export const LandingConnectButton = ({ isIconStyle = false, ...props }) => {
       const shortAddress = shortenAddress(address);
       console.log('Connected to', networkName, 'with address', shortAddress);
 
-      if (toastRef.current && chainId !== '0x89') {
+      if (chainId !== '0x89') {
         setWrongNetwork(true);
-        toastRef.current = toast({
+        toast({
           title: `Wallet Connection`,
           description: (
             <VStack spacing={2} justifyItems="start">
@@ -66,7 +66,7 @@ export const LandingConnectButton = ({ isIconStyle = false, ...props }) => {
         });
       } else {
         setWrongNetwork(false);
-        toastRef.current = toast({
+        toast({
           title: 'Wallet Connection',
           description: `Successfully connected to ${networkName} with ${shortAddress}. 🥳`,
           status: 'success',

packages/web/components/Landing/OnboardingGame/Chiev.tsx

@@ -198,16 +198,7 @@ export const Chiev = ({
             {!account ? (
               <LandingConnectButton />
             ) : (
-              <Tooltip
-                label={
-                  wrongNetwork
-                    ? `Change to Polygon network`
-                    : `Wallet: ${shortenAddress(account)}`
-                }
-                hasArrow
-                isOpen={wrongNetwork}
-                bg={wrongNetwork ? 'brightIdOrange.600' : 'initial'}
-              >
+              <Tooltip label={`Wallet: ${shortenAddress(account)}`} hasArrow>
                 <Button
                   onClick={handleMinting}
                   isDisabled={txLoading || claiming || claimed || wrongNetwork}
@@ -240,6 +231,14 @@ export const Chiev = ({
               Close
             </Button>
           </ButtonGroup>
+          {wrongNetwork && (
+            <Text
+              fontSize={{ base: 'sm', xl: 'md' }}
+              color="brightIdOrange.600"
+            >
+              Change network to <strong>Polygon (0x89)</strong>
+            </Text>
+          )}
         </VStack>
         <Box
           position="absolute"