add user agent checks

wharfkit · Feb 22, 2024 · 6136c09 · 6136c09
1 parent f53ea4f
commit 6136c09
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -8,6 +8,7 @@ import {
     Logo,
     PermissionLevel,
     PrivateKey,
+    PromptArgs,
     PromptResponse,
     PublicKey,
     ResolvedSigningRequest,
@@ -119,15 +120,41 @@ export class WalletPluginAnchor extends AbstractWalletPlugin {
         const {callback, request, sameDeviceRequest, requestKey, privateKey} =
             await createIdentityRequest(context, this.buoyUrl)
 
-        // Attempt to trigger the same device request immediately
+        // User agent checks
+        const userAgent = navigator.userAgent
+        const isMobileDevice = /Android|iPhone|iPad|iPod/.test(userAgent)
+        const isSafari = /Safari/.test(userAgent)
+        const isDesktopSafari = !isMobileDevice && isSafari
+
+        // Attempt to trigger the same device request immediately except for desktop Safari
         try {
-            window.location.href = sameDeviceRequest.encode(true, false, 'esr:')
+            if (!isDesktopSafari) {
+                window.location.href = sameDeviceRequest.encode(true, false, 'esr:')
+            }
         } catch (e) {
             console.log('No default handler for the esr protocol was triggered automatically.')
         }
 
-        // Tell Wharf we need to prompt the user with a QR code and a button
-        const promptResponse = context.ui?.prompt({
+        // Build the prompt based on the device type
+        const mobilePrompt: PromptArgs = {
+            title: t('login.title', {default: 'Connect with Anchor'}),
+            body: t('login.mobile_body', {
+                default: 'Click the button below to open Anchor on this device.',
+            }),
+            elements: [
+                {
+                    type: 'link',
+                    label: t('login.link', {default: 'Launch Anchor'}),
+                    data: {
+                        href: String(sameDeviceRequest),
+                        label: t('login.link', {default: 'Launch Anchor'}),
+                        variant: 'primary',
+                    },
+                },
+            ],
+        }
+
+        const desktopPrompt: PromptArgs = {
             title: t('login.title', {default: 'Connect with Anchor'}),
             body: t('login.body', {
                 default:
@@ -148,7 +175,10 @@ export class WalletPluginAnchor extends AbstractWalletPlugin {
                     },
                 },
             ],
-        })
+        }
+
+        // Tell Wharf we need to prompt the user with a QR code and a button
+        const promptResponse = context.ui?.prompt(isMobileDevice ? mobilePrompt : desktopPrompt)
 
         promptResponse.catch(() => {
             // eslint-disable-next-line no-console

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -2,6 +2,7 @@
     "login": {
         "title": "Connect with Anchor",
         "body": "Scan with Anchor on your mobile device or click the button below to open on this device.",
+        "mobile_body": "Click the button below to open Anchor on this device.",
         "link": "Launch Anchor"
     },
     "transact": {