fix: autoconnect & argent mobile connection (#856)

components/UI/navbar.tsx

@@ -78,12 +78,13 @@ const Navbar: FunctionComponent = () => {
   // Autoconnect
   useEffect(() => {
     const connectToStarknet = async () => {
+      if (isConnected || isMobile) return;
       const connector = getLastConnected();
       if (connector && connector.available()) await connectWallet(connector);
     };
     connectToStarknet();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [connectAsync, connectors]); // Disable to make sure it only runs once
+  }, [connectors]); // Disable to make sure it only runs once
 
   useEffect(() => {
     address ? setIsConnected(true) : setIsConnected(false);

components/UI/walletConnect.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { Modal, useMediaQuery } from "@mui/material";
 import { Connector } from "starknetkit";
@@ -8,6 +8,7 @@ import {
   getConnectorDiscovery,
   getConnectorIcon,
   getConnectorName,
+  isInArgentMobileAppBrowser,
   sortConnectors,
 } from "@/utils/connectorWrapper";
 
@@ -25,13 +26,22 @@ const WalletConnect: FunctionComponent<WalletConnectProps> = ({
   connectWallet,
 }) => {
   const router = useRouter();
+  const [isArgentMobile, setIsArgentMobile] = useState(false);
   const connect = (connector: Connector) => {
     connectWallet(connector);
     closeModal();
   };
   const isMobile = useMediaQuery("(max-width: 768px)");
 
+  useEffect(() => {
+    if (typeof window !== "undefined")
+      setIsArgentMobile(isInArgentMobileAppBrowser());
+  }, []);
+
   const filterConnectors = (connectors: Connector[]) => {
+    if (isArgentMobile) {
+      return connectors.filter((connector) => connector.id === "argentMobile");
+    }
     if (!isMobile) return connectors;
     return connectors.filter((connector) => connector.id !== "argentX");
   };