fix: argent mobile connection (#24)

lfglabs-dev · Sep 12, 2024 · ac7a5c7 · ac7a5c7
1 parent d499e97
commit ac7a5c7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/app/components/connection/starknetConnect.tsx b/app/components/connection/starknetConnect.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import { Modal, useMediaQuery } from "@mui/material";
 import { Connector } from "starknetkit";
 import styles from "../../styles/components/walletConnect.module.css";
@@ -9,6 +9,7 @@ import {
   getConnectorDiscovery,
   getConnectorIcon,
   getConnectorName,
+  isInArgentMobileAppBrowser,
   sortConnectors,
 } from "@/utils/starknetConnectorsWrapper";
 import Button from "../button";
@@ -29,6 +30,12 @@ const StarknetWalletConnect: FunctionComponent<StarknetWalletConnectProps> = ({
   onWalletConnected,
 }) => {
   const { connectAsync } = useConnect();
+  const [isArgentMobile, setIsArgentMobile] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined")
+      setIsArgentMobile(isInArgentMobileAppBrowser());
+  }, []);
 
   const connect = async (connector: Connector) => {
     await connectAsync({ connector });
@@ -38,6 +45,9 @@ const StarknetWalletConnect: FunctionComponent<StarknetWalletConnectProps> = ({
   const isMobile = useMediaQuery("(max-width: 768px)");
 
   const filterConnectors = (connectors: Connector[]) => {
+    if (isArgentMobile) {
+      return connectors.filter((connector) => connector.id === "argentMobile");
+    }
     if (!isMobile) return connectors;
     return connectors.filter((connector) => connector.id !== "argentX");
   };

diff --git a/utils/starknetConnectorsWrapper.ts b/utils/starknetConnectorsWrapper.ts
@@ -1,5 +1,5 @@
 import { constants } from "starknet";
-import { Connector } from "starknetkit";
+import { Connector, StarknetWindowObject } from "starknetkit";
 import { ArgentMobileConnector } from "starknetkit/argentMobile";
 import { InjectedConnector } from "starknetkit/injected";
 import { WebWalletConnector } from "starknetkit/webwallet";
@@ -146,6 +146,19 @@ export const getBraavosWebsite = (): string => {
   return wallets.find((wallet) => wallet.id === "braavos")?.website as string;
 };
 
+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",