Feat: Enable dapp browser

[johnson86tw]

Specification

isMobileAppBrowser & isWindowEthereumAvailable

isMobileAppBrowser can distinguish whether the page is opened in the mobile web browser.

Though even if it's a mobile web browser, it might not be a dapp browser, meaning it doesn't have window.ethereum.

• The wallet apps with a dapp browser that I've currently tested include:
  • Trust Wallet
  • Coinbase Wallet
  • MetaMask Wallet.
• You can use Telegram to test the mobile app browser without window.ethereum.
• Currently, testing has only been conducted on iPhone SE 2.

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 isWindowEthereumAvailable = typeof window !== 'undefined' && !!window.ethereum

autoConnect == true

When the page loads and initiates automatic connection,

isMobileAppBrowser == true

isWindowEthereumAvailable == true

It directly connects to window.ethereum .

isWindowEthereumAvailable == false

It doesn't execute connectTo.

isMobileAppBrowser == false

it retrieves the RDNS of the last connected browser wallet from local storage and attempts to connect to it.

autoConnect == false

When the modal is opened,

isMobileAppBrowser == true

isWindowEthereumAvailable == true

It directly connect to window.ethereum without showing the modal.

isWindowEthereumAvailable == false

The modal will show the text "No wallet provider found 😔".

isMobileAppBrowser == false

It displays a list of EIP-6963 providers. If there are no EIP-6963 providers, the modal will show the text "No wallet provider found 😔".

Testing

vue-dapp/app -> app.vue -> VueDappModal with auto-connect

• Test on Desktop Chrome
• Test on Coinbase Wallet
• Test on Mobile Chrome app
• Test on Telegram

vue-dapp/app -> app.vue -> VueDappModal without auto-connect

• Test on Desktop Chrome
• Test on Coinbase Wallet
• Test on Mobile Chrome app
• Test on Telegram

[johnson86tw]

This feature is available in v1.3.0