Fix: argent mobile connection (#925)

* feat: fix argent mobile connection

* cleanup

* resolve changes

* Update rpc

.env.test

@@ -2,3 +2,5 @@ NEXT_PUBLIC_VERIFIER_CONTRACT=0x057c942544063c3aea6ea6c37009cc9d1beacd750cb68015
 NEXT_PUBLIC_DEPRECATED_VERIFIER_CONTRACT=0x019e5204152a72891bf8cd0bed8f03593fdb29ceacd14fca587be5d9fcf87c0e
 NEXT_PUBLIC_OLD_VERIFIER_CONTRACT=0x4d546c8d60cfd591557ac0613be5ceeb0ea6f797e7d11c0b5160d145fa3089f
 NEXT_PUBLIC_VERIFIER_POP_CONTRACT=0x03528caf090179e337931ee669a5b0214041e1bae30d460ff07d2cea2c7a9106
+NEXT_PUBLIC_RPC_URL=https://sepolia.rpc.starknet.id/
+NEXT_PUBLIC_STARKNET_ID=https://app.starknet.id

.gitignore

@@ -37,3 +37,5 @@ yarn-error.log*
 next-env.d.ts
 
 yarn.lock
+
+.env

components/UI/walletConnect.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useState } from "react";
+import React, { FunctionComponent } from "react";
 import { useRouter } from "next/router";
 import { Modal, useMediaQuery } from "@mui/material";
 import { Connector } from "starknetkit";
@@ -8,9 +8,9 @@ import {
   getConnectorDiscovery,
   getConnectorIcon,
   getConnectorName,
-  isInArgentMobileAppBrowser,
   sortConnectors,
 } from "@/utils/connectorWrapper";
+import { isInArgentMobileAppBrowser } from 'starknetkit/argentMobile';
 
 type WalletConnectProps = {
   closeModal: () => void;
@@ -26,21 +26,21 @@ 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 (isInArgentMobileAppBrowser()) {
+      // Filter connectors and remove duplicates
+      const uniqueConnectors = connectors
+        .filter((connector) => connector.id === "argentMobile" || connector.id === "argentX")
+        .reduce((map, connector) => map.set(connector.id, connector), new Map())
+        .values();
+
+      return Array.from(uniqueConnectors);
     }
     if (!isMobile) return connectors;
     return connectors.filter((connector) => connector.id !== "argentX");
@@ -102,13 +102,13 @@ const WalletConnect: FunctionComponent<WalletConnectProps> = ({
                   onClick={() => tryConnect(connector, isAvailable)}
                 >
                   <img
-                    src={getConnectorIcon(connector.id)}
+                    src={isInArgentMobileAppBrowser() ? getConnectorIcon('argentMobile') : getConnectorIcon(connector.id)}
                     className={styles.walletIcon}
                   />
                   <div className={styles.walletName}>
                     <p>
                       {needInstall(connector, isAvailable) ? "Install " : ""}
-                      {connector.id === "argentMobile" && isMobile
+                      {isInArgentMobileAppBrowser()
                         ? "Argent"
                         : getConnectorName(connector.id)}
                     </p>

utils/connectorWrapper.ts

@@ -1,4 +1,4 @@
-import { Connector, StarknetWindowObject } from "starknetkit";
+import { Connector } from "starknetkit";
 import { ArgentMobileConnector } from "starknetkit/argentMobile";
 import { InjectedConnector } from "starknetkit/injected";
 import { WebWalletConnector } from "starknetkit/webwallet";
@@ -90,19 +90,6 @@ export const getLastConnected = (): Connector | null => {
   return null;
 };
 
-export const isInArgentMobileAppBrowser = (): boolean => {
-  if (typeof window === "undefined" || !window?.starknet_argentX) {
-    return false;
-  }
-
-  const starknetMobile =
-    window?.starknet_argentX as unknown as StarknetWindowObject & {
-      isInAppBrowser: boolean;
-    };
-
-  return starknetMobile?.isInAppBrowser;
-};
-
 const wallets = [
   {
     id: "argentX",