fix: evm connexion bug & responsive

app/components/connection/connectModal.tsx

@@ -10,7 +10,7 @@ import { getConnectors } from "@/utils/starknetConnectorsWrapper";
 import { Connector } from "starknetkit";
 import Button from "../button";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
-import { useAccount } from "@starknet-react/core";
+import { useAccount as useWagmiAccount } from "wagmi";
 
 type StarknetWalletConnectProps = {
   closeModal: () => void;
@@ -25,21 +25,14 @@ const ConnectModal: FunctionComponent<StarknetWalletConnectProps> = ({
 }) => {
   const [openStarknetModal, setOpenStarknetModal] = useState(false);
   const { openConnectModal } = useConnectModal();
-  const { isDisconnected } = useAccount();
+  const { isDisconnected } = useWagmiAccount();
 
   const connectEvm = () => {
-    // console.log(
-    //   "connectEvm",
-    //   address,
-    //   isConnected,
-    //   "disconnected",
-    //   isDisconnected
-    // );
-    // openConnectModal is sometimes undefined with MetaMask
-    // need to investigate this further
-    console.log("openConnectModal", openConnectModal);
+    // openConnectModal is sometimes undefined because user is already connected
     if (isDisconnected) {
       openConnectModal && openConnectModal();
+    } else {
+      onWalletConnected(NetworkType.EVM);
     }
   };
 

app/components/connection/ethereumConnect.tsx

@@ -15,22 +15,8 @@ const EthereumConnect: FunctionComponent<EthereumConnectProps> = ({
   const { openConnectModal } = useConnectModal();
   return (
     <ConnectButton.Custom>
-      {({
-        // account,
-        // chain,
-        // openAccountModal,
-        // openChainModal,
-        // openConnectModal,
-        authenticationStatus,
-        mounted,
-      }) => {
+      {({ authenticationStatus, mounted }) => {
         const ready = mounted && authenticationStatus !== "loading";
-        // const connected =
-        //   ready &&
-        //   account &&
-        //   chain &&
-        //   (!authenticationStatus || authenticationStatus === "authenticated");
-
         return (
           <div
             className={styles.connectButton}

app/components/connection/starknetConnect.tsx

@@ -32,7 +32,7 @@ const StarknetWalletConnect: FunctionComponent<StarknetWalletConnectProps> = ({
 
   const connect = async (connector: Connector) => {
     await connectAsync({ connector });
-    onWalletConnected(NetworkType.starknet);
+    onWalletConnected(NetworkType.STARKNET);
     closeModal();
   };
   const isMobile = useMediaQuery("(max-width: 768px)");

app/components/tryAgainModal.tsx

@@ -30,7 +30,7 @@ const TryAgainModal: FunctionComponent<TryAgainModalProps> = ({
   openWalletModal,
 }) => {
   const modalDescription =
-    network === NetworkType.evm && hasEthTokens ? (
+    network === NetworkType.EVM && hasEthTokens ? (
       <>
         You are eligible to play again with a starknet wallet. You can install
         one of our partner wallets to get an additional click!
@@ -67,7 +67,7 @@ const TryAgainModal: FunctionComponent<TryAgainModalProps> = ({
 
             <div className={styles.description}>{modalDescription}</div>
 
-            {network === NetworkType.evm && hasEthTokens ? (
+            {network === NetworkType.EVM && hasEthTokens ? (
               <div>
                 <Button
                   icon={<img src={getArgentIcon()} width={22} />}

app/page.tsx

@@ -74,7 +74,7 @@ export default function Home() {
   const [isConnected, setIsConnected] = useState(false);
   const [network, setNetwork] = useState<NetworkType>();
   const address =
-    network === NetworkType.starknet ? starknetAccount?.address : evmAddress;
+    network === NetworkType.STARKNET ? starknetAccount?.address : evmAddress;
   const [countdownTimestamp, setCountdownTimestamp] = useState<number>(0);
   const [currentWinner, setCurrentWinner] = useState<string>("");
   const [totalClicks, setTotalClicks] = useState<number>(0);
@@ -86,28 +86,21 @@ export default function Home() {
   const { isFirstLoad, remainingClicks } = getRemainingClicks(network, address);
   const { hasEthTokens, ethTokens } = canPlayOnStarknet(network);
   const deploymentData = isStarknetDeployed(network, address);
-
   const isFinished = isOver5mn(countdownTimestamp);
 
-  // console.log("isFinished", isFinished, countdownTimestamp);
-  // console.log("deploymentData", deploymentData);
-  // console.log("remainingClicks", remainingClicks);
-  // console.log("isConnected", isConnected);
-  // console.log("hasEthTokens", hasEthTokens, ethTokens);
-
   useEffect(() => {
     if (evmConnected) {
       setOpenConnectModal(false);
       setIsConnected(true);
-      setNetwork(NetworkType.evm);
+      setNetwork(NetworkType.EVM);
     }
   }, [evmConnected]);
 
   useEffect(() => {
     if (network && isConnected && !isFirstLoad) {
       console.log("Show modal welcome on first load");
       if (
-        network === NetworkType.evm &&
+        network === NetworkType.EVM &&
         needToRecoverToken(remainingClicks, ethTokens)
       ) {
         setRecoverTokenModal(true);
@@ -194,11 +187,11 @@ export default function Home() {
 
   const getUserNameOrAddress = () => {
     switch (network) {
-      case NetworkType.starknet:
+      case NetworkType.STARKNET:
         return starkNameData
           ? starkNameData
           : minifyAddress(starknetAccount?.address);
-      case NetworkType.evm:
+      case NetworkType.EVM:
         return ens && ens.data ? ens.data : minifyAddress(evmAddress);
       default:
         return undefined;
@@ -207,12 +200,12 @@ export default function Home() {
 
   const disconnectUser = async () => {
     switch (network) {
-      case NetworkType.starknet:
+      case NetworkType.STARKNET:
         await disconnectAsync();
         setIsConnected(false);
         setNetwork(undefined);
         return;
-      case NetworkType.evm:
+      case NetworkType.EVM:
         console.log("disconnecting evm");
         disconnectEvm();
         setIsConnected(false);
@@ -400,11 +393,11 @@ export default function Home() {
     if (openConnectionModalIfNeeded(!isConnected)) return;
 
     switch (network) {
-      case NetworkType.starknet:
+      case NetworkType.STARKNET:
         if (openConnectionModalIfNeeded(!starknetAccount)) return;
         await handleStarknetButtonClick();
         break;
-      case NetworkType.evm:
+      case NetworkType.EVM:
         if (openConnectionModalIfNeeded(!evmAddress)) return;
         await handleEvmButtonClick();
         break;

app/styles/home.module.css

@@ -261,6 +261,7 @@
   .leftContainer {
     margin: 24px auto;
     align-items: center;
+    max-width: 400px;
   }
 
   .backgroundWrapper {
@@ -495,6 +496,9 @@
   .main {
     padding: 10px;
   }
+  .leftContainer {
+    max-width: 300px;
+  }
   .centralSection {
     width: 400px;
     height: 280px;
@@ -572,6 +576,9 @@
   .main {
     padding: 10px;
   }
+  .leftContainer {
+    max-width: 250px;
+  }
   .centralSection {
     width: 300px;
     height: 220px;

constants/types.ts

@@ -1,8 +1,8 @@
 import { RawArgs, num } from "starknet";
 
 export enum NetworkType {
-  starknet = "Starknet",
-  evm = "Evm",
+  STARKNET = "Starknet",
+  EVM = "Evm",
 }
 
 export type IconProps = {

hooks/getRemainingClicks.tsx

@@ -81,10 +81,10 @@ export default function getRemainingClicks(
       }
     };
 
-    if (network === NetworkType.starknet) {
+    if (network === NetworkType.STARKNET) {
       fetchStarknetData();
       intervalId = setInterval(fetchStarknetData, 5000); // Set interval for fetching Starknet data
-    } else if (network === NetworkType.evm) {
+    } else if (network === NetworkType.EVM) {
       fetchEvmData();
       intervalId = setInterval(fetchEvmData, 5000); // Set interval for fetching EVM data
     }

hooks/isDeployed.tsx

@@ -9,7 +9,7 @@ export default function isStarknetDeployed(
     useState<GetDeploymentDataResult>();
 
   useEffect(() => {
-    if (!network || network === NetworkType.evm || !address) {
+    if (!network || network === NetworkType.EVM || !address) {
       setDeploymentData(undefined);
       return;
     }

utils/dataService.ts

@@ -6,7 +6,7 @@ export const getTotalClicks = (
   ethTokens?: EthToken[]
 ): number => {
   const tokensRelatedClicks =
-    network === NetworkType.evm ? 0 : ethTokens?.length ?? 0;
+    network === NetworkType.EVM ? 0 : ethTokens?.length ?? 0;
   return (
     (remaining?.eligibilityAmt ?? 0) +
     (remaining?.domainClicks ?? 0) +