Merge pull request #190 from vu3th/fix/detect-mobile-browser

Fix mobile browser detection for Rainbow mobile wallet

app/pages/userAgent.vue

@@ -1,22 +1,24 @@
 <script setup lang="ts">
+import { isMobileBrowser } from '@vue-dapp/core'
+
 const userAgent = ref('')
 
 onMounted(() => {
 	userAgent.value = navigator.userAgent
 })
-
-function alertUserAgent() {
-	alert(navigator.userAgent)
-}
 </script>
 
 <template>
-	<div>
+	<div class="p-5">
 		<div>
 			{{ userAgent }}
 		</div>
 
-		<button @click="alertUserAgent">Alert userAgent</button>
+		<hr />
+
+		<ClientOnly>
+			<div>isMobileBrowser: {{ isMobileBrowser() }}</div>
+		</ClientOnly>
 	</div>
 </template>
 

lerna.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "node_modules/lerna/schemas/lerna-schema.json",
-	"version": "1.5.1-alpha.0",
+	"version": "1.5.1-alpha.1",
 	"npmClient": "pnpm",
 	"packages": ["packages/*", "demo/*", "docs/*", "app/*"]
 }

packages/coinbase/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue-dapp/coinbase",
-	"version": "1.5.1-alpha.0",
+	"version": "1.5.1-alpha.1",
 	"description": "Empower dapp developers with Vue integration for crypto wallets",
 	"repository": "https://github.com/vu3th/vue-dapp",
 	"bugs": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue-dapp/core",
-	"version": "1.5.1-alpha.0",
+	"version": "1.5.1-alpha.1",
 	"description": "Empower dapp developers with Vue integration for crypto wallets",
 	"repository": "https://github.com/vu3th/vue-dapp",
 	"bugs": {

packages/core/src/useAutoConnect.ts

@@ -3,7 +3,7 @@ import { useConnect } from './services/connect'
 import { ConnectOptions, ProviderTarget, RdnsEnum } from './types'
 import { useConnectors } from './services/connectors'
 import { getLastConnectedBrowserWallet } from './services/localStorage'
-import { isWindowEthereumAvailable } from './utils'
+import { isMobileBrowser, isWindowEthereumAvailable } from './utils'
 import { useEIP6963 } from './services/eip6963'
 
 export function useAutoConnect(pinia?: any) {
@@ -16,7 +16,7 @@ export function useAutoConnect(pinia?: any) {
 	onMounted(async () => {
 		try {
 			isAutoConnecting.value = true
-			if (isMobileAppBrowser()) {
+			if (isMobileBrowser()) {
 				await autoConnect('window.ethereum')
 			} else {
 				await autoConnect('rdns')
@@ -84,23 +84,3 @@ export function useAutoConnect(pinia?: any) {
 
 	return { isAutoConnecting, error }
 }
-
-/**
- * Check whether the browser is within a mobile app (such as a WebView) rather than a standalone mobile browser like Chrome App
- * @returns boolean
- */
-export function isMobileAppBrowser() {
-	const userAgent = navigator.userAgent
-
-	// for ios
-	if (!userAgent.includes('Safari/') && userAgent.includes('Mobile/')) {
-		return true
-	}
-
-	// for android
-	if (userAgent.includes('wv') || userAgent.includes('WebView')) {
-		return true
-	}
-
-	return false
-}

packages/core/src/utils/index.ts

@@ -2,3 +2,12 @@ export * from './format'
 export * from './assert'
 
 export const isWindowEthereumAvailable = typeof window !== 'undefined' && !!window.ethereum
+
+/**
+ * Both mobile web browsers and mobile apps with embedded browsers are considered as mobile browsers.
+ * @returns boolean
+ */
+export function isMobileBrowser() {
+	const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
+	return regex.test(navigator.userAgent)
+}

packages/modal/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue-dapp/modal",
-	"version": "1.5.1-alpha.0",
+	"version": "1.5.1-alpha.1",
 	"description": "Empower dapp developers with Vue integration for crypto wallets",
 	"repository": "https://github.com/vu3th/vue-dapp",
 	"bugs": {

packages/modal/src/VueDappModal.vue

@@ -2,7 +2,7 @@
 import { Ref, computed, ref, watch } from 'vue'
 import Modal from './components/Modal.vue'
 import WalletConnectIcon from './components/logos/WalletConnectIcon.vue'
-import { useVueDapp, useAutoConnect, ConnectorName, ConnectOptions, isMobileAppBrowser } from '@vue-dapp/core'
+import { useVueDapp, useAutoConnect, ConnectorName, ConnectOptions, isMobileBrowser } from '@vue-dapp/core'
 import { useVueDappModal } from './store'
 
 const props = withDefaults(
@@ -55,8 +55,8 @@ if (props.autoConnect) {
 }
 
 watch(modalOpen, async () => {
-	// ============================ feat: connect to window.ethereum in the mobile app browser ============================
-	if (modalOpen.value && providerDetails.value.length === 0 && isMobileAppBrowser()) {
+	// ============================ feat: connect to window.ethereum in the mobile browser ============================
+	if (modalOpen.value && isMobileBrowser()) {
 		if (isWindowEthereumAvailable) {
 			await onClickWallet('BrowserWallet', {
 				target: 'window.ethereum',
@@ -66,7 +66,7 @@ watch(modalOpen, async () => {
 	}
 
 	// ============================ feat: auto click BrowserWallet if it's the only connector ============================
-	if (props.autoConnectBrowserWalletIfSolo && modalOpen.value) {
+	if (modalOpen.value && props.autoConnectBrowserWalletIfSolo) {
 		if (
 			connectors.value.length === 1 && // only one connector
 			providerDetails.value.length === 1 && // only one browser provider

packages/nuxt/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue-dapp/nuxt",
-	"version": "1.5.1-alpha.0",
+	"version": "1.5.1-alpha.1",
 	"description": "Vue Dapp Nuxt module",
 	"repository": "https://github.com/vu3th/vue-dapp",
 	"bugs": {

packages/walletconnect/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue-dapp/walletconnect",
-	"version": "1.5.1-alpha.0",
+	"version": "1.5.1-alpha.1",
 	"description": "Empower dapp developers with Vue integration for crypto wallets",
 	"repository": "https://github.com/vu3th/vue-dapp",
 	"bugs": {