fix: use mobile-connector when dApp is launched within a mobile app (#…

…471)

.changeset/long-files-grab.md

@@ -0,0 +1,5 @@
+---
+"@starknet-react/core": minor
+---
+
+use mobile-connector when dApp is launched within an in-app mobile browser

packages/core/src/connectors/discovery.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { Connector } from "./base";
 import { injected } from "./helpers";
+import { withMobileConnector } from "~/connectors/mobile";
 
 export type UseInjectedConnectorsProps = {
   /** List of recommended connectors to display. */
@@ -42,7 +43,7 @@ export function useInjectedConnectors({
     });
   }, [injectedConnectors, recommended, includeRecommended, order]);
 
-  return { connectors };
+  return { connectors: withMobileConnector(connectors) };
 }
 
 function mergeConnectors(

packages/core/src/connectors/mobile.ts

@@ -0,0 +1,21 @@
+import { Connector } from "~/connectors/base";
+import { braavos } from "~/connectors/helpers";
+
+export const isMobile = (): boolean => {
+  const userAgent =
+    typeof window !== "undefined" ? window.navigator?.userAgent : "";
+  return /Android|iPhone|iPad|iPod/i.test(userAgent);
+};
+
+export const withMobileConnector = (connectors: Connector[]): Connector[] => {
+  if (
+    isMobile() &&
+    // In the context of a mobile browser, `starknet_braavos` is only injected
+    // if the dApp is launched within the Braavos in-app dApp browser
+    !!window.starknet_braavos
+  ) {
+    return [braavos()];
+  }
+
+  return connectors;
+};

packages/core/src/context/starknet.tsx

@@ -16,6 +16,7 @@ import { ConnectorNotFoundError } from "~/errors";
 import { ChainProviderFactory } from "~/providers";
 import { ExplorerFactory } from "~/explorers/";
 import { AccountProvider } from "./account";
+import { withMobileConnector } from "~/connectors/mobile";
 
 const defaultQueryClient = new QueryClient();
 
@@ -115,7 +116,7 @@ function useStarknetManager({
   const [state, setState] = useState<StarknetManagerState>({
     currentChain: defaultChain,
     currentProvider: defaultProvider,
-    connectors,
+    connectors: withMobileConnector(connectors),
   });
 
   const updateChainAndProvider = useCallback(
@@ -262,7 +263,7 @@ function useStarknetManager({
     }
 
     if (autoConnect && !connectorRef.current) {
-      tryAutoConnect(connectors);
+      tryAutoConnect(withMobileConnector(connectors));
     }
     // Dependencies intentionally omitted since we only want
     // this executed once.