fix: handle desktop and mobile differently

0xflair · Nov 8, 2022 · 28f1033 · 28f1033
1 parent 143aef9
commit 28f1033
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/packages/react/src/common/utils/dark-mode.ts b/packages/react/src/common/utils/dark-mode.ts
@@ -15,9 +15,11 @@ export const isDarkMode = () => {
       ? window?.localStorage?.getItem?.('mode') === 'dark'
       : undefined;
 
-  return explicitDarkMode !== undefined
-    ? explicitDarkMode
-    : darkByUrl || darkByMedia || darkByLocalStorage;
+  return Boolean(
+    explicitDarkMode !== undefined
+      ? explicitDarkMode
+      : darkByUrl || darkByMedia || darkByLocalStorage,
+  );
 };
 
 export const setDarkMode = (

diff --git a/packages/react/src/core/utils/browsers.ts b/packages/react/src/core/utils/browsers.ts
@@ -0,0 +1,6 @@
+export function isSafari(): boolean {
+  return (
+    typeof navigator !== 'undefined' &&
+    /Version\/([0-9._]+).*Safari/.test(navigator.userAgent) // Source: https://github.com/DamonOehlman/detect-browser/blob/master/src/index.ts
+  );
+}
diff --git a/packages/react/src/core/utils/index.ts b/packages/react/src/core/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './browsers';
 export * from './mobile';
 export * from './openWalletConnectDeepLink';
 export * from './useMergeQueryStates';
diff --git a/packages/react/src/core/utils/openWalletConnectDeepLink.ts b/packages/react/src/core/utils/openWalletConnectDeepLink.ts
@@ -1,7 +1,8 @@
 import { connect, Connector } from '@wagmi/core';
 import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect';
 
-import { isAndroid } from './mobile';
+import { isSafari } from './browsers';
+import { isAndroid, isMobile } from './mobile';
 
 export const openWalletConnectDeepLink = async (
   wcUriPrefix: string,
@@ -31,14 +32,18 @@ export const openWalletConnectDeepLink = async (
         ? uri
         : `${wcUriPrefix}${encodeURIComponent(uri)}`;
 
-      if (finalLink.startsWith('http')) {
-        const link = document.createElement('a');
-        link.href = finalLink;
-        link.target = '_blank';
-        link.rel = 'noreferrer noopener';
-        link.click();
+      if (isMobile()) {
+        if (finalLink.startsWith('http')) {
+          const link = document.createElement('a');
+          link.href = finalLink;
+          link.target = '_blank';
+          link.rel = 'noreferrer noopener';
+          link.click();
+        } else {
+          window.location.href = finalLink;
+        }
       } else {
-        window.location.href = finalLink;
+        window.open(finalLink, isSafari() ? '_blank' : '_self');
       }
     });
   } catch (e) {