feat(core,modal): add isWindowEthereumAvailable

vu3th · Apr 30, 2024 · 62ed29c · 62ed29c
1 parent 6e88e87
commit 62ed29c
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 28 deletions.
diff --git a/app/app.vue b/app/app.vue
@@ -71,7 +71,7 @@ const hideConnectingModal = computed(() => {
 
 			<NuxtPage />
 
-			<VueDappModal autoConnect :hideConnectingModal="hideConnectingModal"> </VueDappModal>
+			<VueDappModal :hideConnectingModal="hideConnectingModal"> </VueDappModal>
 		</NuxtLayout>
 	</n-config-provider>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -98,7 +98,7 @@ const items = computed<Item[]>(() => [
 				<p v-if="wallet.status === 'connected'">Disconnect</p>
 			</n-button>
 
-			<p class="text-red-500" v-if="wallet.error">{{ wallet.error }}</p>
+			<p class="text-red-500 text-center" v-if="wallet.error">{{ wallet.error }}</p>
 
 			<ClientOnly>
 				<Vue3EasyDataTable

diff --git a/packages/core/src/services/connect.ts b/packages/core/src/services/connect.ts
@@ -99,18 +99,19 @@ export function useConnect(pinia?: any) {
 		}
 	}
 
+	const isWindowEthereumAvailable = typeof window !== 'undefined' && !!window.ethereum
+
 	async function autoConnect(rdns?: RDNS | string, isWindowEthereum = false) {
-		const connectorName = 'BrowserWallet'
-		const bwConnector = walletStore.connectors.find(conn => conn.name === connectorName)
-		if (!bwConnector) return
+		const browserWallet = walletStore.connectors.find(conn => conn.name === 'BrowserWallet')
+		if (!browserWallet) return
 
 		let options = {}
 
 		if (isWindowEthereum) {
+			if (!isWindowEthereumAvailable) return
 			options = { isWindowEthereum }
 		} else {
 			const lastRdns = getLastConnectedBrowserWallet()
-			if (!lastRdns) return
 
 			rdns = rdns || lastRdns
 			if (!rdns) return
@@ -119,13 +120,15 @@ export function useConnect(pinia?: any) {
 		}
 
 		try {
-			await connectTo(bwConnector.name, options)
+			await connectTo(browserWallet.name, options)
 		} catch (err: any) {
 			throw new AutoConnectError(err)
 		}
 	}
 
 	return {
+		isWindowEthereumAvailable,
+
 		wallet: readonly(walletStore.wallet),
 
 		status: computed(() => walletStore.wallet.status),

diff --git a/packages/modal/src/VueDappModal.vue b/packages/modal/src/VueDappModal.vue
@@ -38,10 +38,18 @@ const modalOpen = computed(() => props.modelValue ?? store.isModalOpen)
 
 const isAutoConnecting = ref(false)
 
-const { connectors, connectTo, autoConnect, status, providerDetails, hasConnector, disconnect } = useVueDapp()
+const {
+	isWindowEthereumAvailable,
+	connectors,
+	connectTo,
+	autoConnect,
+	status,
+	providerDetails,
+	hasConnector,
+	disconnect,
+} = useVueDapp()
 
 // ============================ feat: autoConnect ============================
-
 onMounted(async () => {
 	if (props.autoConnect) {
 		try {
@@ -59,27 +67,13 @@ onMounted(async () => {
 	}
 })
 
-// Check whether the browser is within a mobile app (such as a WebView) rather than a standalone mobile browser like Chrome App
-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
-}
-
 watch(modalOpen, async () => {
-	// ============================ feat: connect to window.ethereum if there's no EIP-6963 providers ============================
+	// ============================ feat: connect to window.ethereum if window.ethereum is available and there's no EIP-6963 providers ============================
 	if (modalOpen.value && providerDetails.value.length === 0 && isMobileAppBrowser()) {
-		await onClickWallet('BrowserWallet', undefined, true)
+		if (isWindowEthereumAvailable) {
+			await onClickWallet('BrowserWallet', undefined, true)
+		}
+		return
 	}
 
 	// ============================ feat: auto click BrowserWallet if it's the only connector ============================
@@ -108,6 +102,23 @@ function onClickCancelConnecting() {
 	disconnect()
 }
 
+// Check whether the browser is within a mobile app (such as a WebView) rather than a standalone mobile browser like Chrome App
+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
+}
+
 const vClickOutside = {
 	beforeMount: (el: any, binding: any) => {
 		el.clickOutsideEvent = (event: MouseEvent) => {