From 11a7727aaa4b3cb6bbe7d4dd3d7fb29986b3c0dd Mon Sep 17 00:00:00 2001
From: Tarrence van As <tarrencev@users.noreply.github.com>
Date: Tue, 7 Jan 2025 21:47:01 -0500
Subject: [PATCH] Use inapp spy (#1253)

---
 packages/keychain/package.json                |  1 +
 .../connect/create/CreateController.tsx       | 20 +++----------------
 pnpm-lock.yaml                                |  8 ++++++++
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/keychain/package.json b/packages/keychain/package.json
index 86a9f6281..2a17360cd 100644
--- a/packages/keychain/package.json
+++ b/packages/keychain/package.json
@@ -41,6 +41,7 @@
     "framer-motion": "^6",
     "graphql": "^16.3.0",
     "graphql-request": "^5.0.0",
+    "inapp-spy": "4.2.1",
     "js-cookie": "^3.0.1",
     "p-throttle": "^6.2.0",
     "posthog-js": "^1.181.0",
diff --git a/packages/keychain/src/components/connect/create/CreateController.tsx b/packages/keychain/src/components/connect/create/CreateController.tsx
index f4ba0790c..7789f22db 100644
--- a/packages/keychain/src/components/connect/create/CreateController.tsx
+++ b/packages/keychain/src/components/connect/create/CreateController.tsx
@@ -12,6 +12,7 @@ import { useCreateController } from "./useCreateController";
 import { Input } from "@cartridge/ui-next";
 import { ErrorAlert } from "@/components/ErrorAlert";
 import { VerifiableControllerTheme } from "@/context/theme";
+import InAppSpy from "inapp-spy";
 
 interface CreateControllerViewProps {
   theme: VerifiableControllerTheme;
@@ -168,30 +169,15 @@ export function CreateController({
     loginMode,
   });
 
-  const [isInAppBrowser, setIsInAppBrowser] = useState(false);
+  const [{ isInApp }] = useState(() => InAppSpy());
 
   useEffect(() => {
-    const ua = navigator.userAgent;
-    // Check for common in-app browser signatures
-    const isInApp =
-      ua.includes("FBAN") || // Facebook
-      ua.includes("FBAV") || // Facebook
-      ua.includes("Twitter") || // Twitter
-      ua.includes("Instagram") || // Instagram
-      ua.includes("Line") || // Line
-      /\bFB[\w_]+\//.test(ua) || // Facebook
-      /\bInstagram\b/.test(ua); // Instagram
-
-    setIsInAppBrowser(isInApp);
-
     if (isInApp) {
       const nativeBrowserUrl = getNativeBrowserUrl();
       if (nativeBrowserUrl) {
         // Try to open in native browser
         window.location.href = nativeBrowserUrl;
       }
-
-      setIsInAppBrowser(true);
     }
   }, []);
 
@@ -234,7 +220,7 @@ export function CreateController({
       validation={validation}
       isLoading={isLoading}
       error={error}
-      isInAppBrowser={isInAppBrowser}
+      isInAppBrowser={isInApp}
       onUsernameChange={handleUsernameChange}
       onUsernameFocus={handleUsernameFocus}
       onUsernameClear={handleUsernameClear}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aa17ac8c4..24d1e6778 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -344,6 +344,9 @@ importers:
       graphql-request:
         specifier: ^5.0.0
         version: 5.2.0(graphql@16.9.0)
+      inapp-spy:
+        specifier: 4.2.1
+        version: 4.2.1
       js-cookie:
         specifier: ^3.0.1
         version: 3.0.5
@@ -8284,6 +8287,9 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  inapp-spy@4.2.1:
+    resolution: {integrity: sha512-xK8jSrZIkPtxpbuK0Vmc2IAOgPYbvHIRUbloL0XXGTEsKvG+S/LNrmWlA9+bwxdErSWuf/8RKwoejiGPWVTbRA==}
+
   indent-string@4.0.0:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
@@ -22442,6 +22448,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  inapp-spy@4.2.1: {}
+
   indent-string@4.0.0: {}
 
   inflight@1.0.6: