From 2e0a70f3b083e5640bd4e875611d4a5ae0d8445d Mon Sep 17 00:00:00 2001
From: Johnson Chen <chnejohnson@gmail.com>
Date: Tue, 30 Apr 2024 19:08:36 +0800
Subject: [PATCH] fix(core,modal): add wallet.providerTarget, RdnsEnum, and
 refactor issue#171

---
 app/components/content/Eip6963.client.vue   | 12 ++--
 app/content/eip-6963.md                     | 12 ++--
 app/pages/index.vue                         |  4 ++
 packages/core/src/browserWalletConnector.ts | 69 +++++++++++----------
 packages/core/src/services/connect.ts       | 42 +++++++------
 packages/core/src/store.ts                  |  3 +-
 packages/core/src/types/connector.ts        | 10 +--
 packages/core/src/types/eip6963.ts          |  4 +-
 packages/core/src/types/listeners.ts        |  5 +-
 packages/core/src/types/wallet.ts           |  5 +-
 packages/modal/src/VueDappModal.vue         | 29 ++++++---
 11 files changed, 112 insertions(+), 83 deletions(-)

diff --git a/app/components/content/Eip6963.client.vue b/app/components/content/Eip6963.client.vue
index c16f2ec..d464784 100644
--- a/app/components/content/Eip6963.client.vue
+++ b/app/components/content/Eip6963.client.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { useVueDapp, shortenAddress, type ConnectorName, RDNS } from '@vue-dapp/core'
+import { useVueDapp, shortenAddress, RdnsEnum, type ConnectorName, type RDNS } from '@vue-dapp/core'
 import { useVueDappModal } from '@vue-dapp/modal'
 
 const { providerDetails, wallet, address, status, connectTo, disconnect, error, isConnected } = useVueDapp()
 
 const providerList = computed(() => {
 	return providerDetails.value.slice().sort((a, b) => {
-		if (a.info.rdns === RDNS.rabby) return -1
-		if (b.info.rdns === RDNS.rabby) return 1
-		if (a.info.rdns === RDNS.metamask) return -1
-		if (b.info.rdns === RDNS.metamask) return 1
+		if (a.info.rdns === RdnsEnum.rabby) return -1
+		if (b.info.rdns === RdnsEnum.rabby) return 1
+		if (a.info.rdns === RdnsEnum.metamask) return -1
+		if (b.info.rdns === RdnsEnum.metamask) return 1
 		return 0
 	})
 })
 
-async function onClickWallet(connName: ConnectorName, rdns?: RDNS | string) {
+async function onClickWallet(connName: ConnectorName, rdns?: RDNS) {
 	useVueDappModal().close()
 	await connectTo(connName, { rdns })
 }
diff --git a/app/content/eip-6963.md b/app/content/eip-6963.md
index dd7c04b..f9736c9 100644
--- a/app/content/eip-6963.md
+++ b/app/content/eip-6963.md
@@ -28,22 +28,22 @@ Using window events to announce [EIP-1193](https://eips.ethereum.org/EIPS/eip-11
 ::code-group
 
 ```ts [setup script]
-import { useVueDapp, shortenAddress, type ConnectorName, RDNS } from '@vue-dapp/core'
+import { useVueDapp, shortenAddress, RdnsEnum, type ConnectorName, type RDNS } from '@vue-dapp/core'
 import { useVueDappModal } from '@vue-dapp/modal'
 
 const { providerDetails, wallet, address, status, connectTo, disconnect, error, isConnected } = useVueDapp()
 
 const providerList = computed(() => {
 	return providerDetails.value.slice().sort((a, b) => {
-		if (a.info.rdns === RDNS.rabby) return -1
-		if (b.info.rdns === RDNS.rabby) return 1
-		if (a.info.rdns === RDNS.metamask) return -1
-		if (b.info.rdns === RDNS.metamask) return 1
+		if (a.info.rdns === RdnsEnum.rabby) return -1
+		if (b.info.rdns === RdnsEnum.rabby) return 1
+		if (a.info.rdns === RdnsEnum.metamask) return -1
+		if (b.info.rdns === RdnsEnum.metamask) return 1
 		return 0
 	})
 })
 
-async function onClickWallet(connName: ConnectorName, rdns?: RDNS | string) {
+async function onClickWallet(connName: ConnectorName, rdns?: RDNS) {
 	useVueDappModal().close()
 	await connectTo(connName, { rdns })
 }
diff --git a/app/pages/index.vue b/app/pages/index.vue
index f8be305..2b3fe5e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -59,6 +59,10 @@ const items = computed<Item[]>(() => [
 		name: 'Connector',
 		value: wallet.connectorName ?? 'N/A',
 	},
+	{
+		name: 'Provider Target',
+		value: wallet.providerTarget ?? 'N/A',
+	},
 	{
 		name: 'Provider Name',
 		value: wallet.providerInfo?.name ?? 'N/A',
diff --git a/packages/core/src/browserWalletConnector.ts b/packages/core/src/browserWalletConnector.ts
index ba6ea3f..a1a77d2 100644
--- a/packages/core/src/browserWalletConnector.ts
+++ b/packages/core/src/browserWalletConnector.ts
@@ -6,6 +6,8 @@ import {
 	ConnectOptions,
 	RDNS,
 	EIP6963ProviderDetail,
+	ProviderTarget,
+	EIP6963ProviderInfo,
 } from './types'
 import {
 	AddChainError,
@@ -35,23 +37,10 @@ export class BrowserWalletConnector extends Connector<EIP1193Provider, BrowserWa
 		useEIP6963().subscribe()
 	}
 
-	async connect(options?: ConnectOptions) {
-		const { timeout, rdns, isWindowEthereum } = options ?? {
-			timeout: undefined,
-			rdns: undefined,
-			isWindowEthereum: false,
-		}
-
-		let provider, info
+	async connect(options: ConnectOptions) {
+		const { target, rdns, timeout } = options
 
-		if (isWindowEthereum) {
-			provider = this.getWindowEthereumProvider()
-			if (!provider) throw new ProviderNotFoundError('window.ethereum not found')
-		} else {
-			const { provider: _provider, info: _info } = this.getProvider(rdns)
-			provider = _provider
-			info = _info
-		}
+		const { provider, info } = this.getProvider(target, rdns)
 
 		let accounts, chainId
 
@@ -90,30 +79,44 @@ export class BrowserWalletConnector extends Connector<EIP1193Provider, BrowserWa
 		}
 	}
 
-	getWindowEthereumProvider(): EIP1193Provider | null {
+	getProvider(
+		target?: ProviderTarget,
+		rdns?: RDNS | string,
+	): { provider: EIP1193Provider; info?: EIP6963ProviderInfo } {
+		switch (target) {
+			case 'window.ethereum':
+				const provider = this.getProviderByWindowEthereum()
+				if (!provider) throw new ProviderNotFoundError('No provider found by window.ethereum')
+				return {
+					provider,
+					info: undefined,
+				}
+			case 'rdns':
+				if (!rdns) throw new Error('rdns is required')
+				const res = this.getProviderByRdns(rdns)
+				if (!res) throw new ProviderNotFoundError('No provider found by the given rdns')
+				return {
+					provider: res.provider,
+					info: res.info,
+				}
+			default:
+				throw new Error('target is required')
+		}
+	}
+
+	getProviderByWindowEthereum(): EIP1193Provider | undefined {
 		if (typeof window !== 'undefined' && !!window.ethereum) {
 			return window.ethereum
 		}
-		return null
+		return undefined
 	}
 
-	getProvider(rdns?: RDNS | string): EIP6963ProviderDetail {
+	getProviderByRdns(rdns: RDNS | string): EIP6963ProviderDetail | undefined {
 		const { providerDetails } = useEIP6963()
-		if (providerDetails.value.length < 1) throw new ProviderNotFoundError('providerDetails.length < 1')
-
-		// without rdns, return the first provider
-		if (!rdns) {
-			if (providerDetails.value.length >= 1) {
-				return providerDetails.value[0]
-			}
-		} else {
-			// with rdns, return the provider with the same rdns
-			const detail = providerDetails.value.find(({ info }) => info.rdns === rdns)
-			if (!detail) throw new ProviderNotFoundError('rdns not found')
-			return detail
+		if (!providerDetails.value.length) {
+			throw new ProviderNotFoundError('No providerDetails found')
 		}
-
-		throw new ProviderNotFoundError('getProvider failed')
+		return providerDetails.value.find(({ info }) => info.rdns === rdns)
 	}
 
 	/**
diff --git a/packages/core/src/services/connect.ts b/packages/core/src/services/connect.ts
index 71e6e8a..6643615 100644
--- a/packages/core/src/services/connect.ts
+++ b/packages/core/src/services/connect.ts
@@ -1,6 +1,6 @@
 import { computed, readonly } from 'vue'
 import { useStore } from '../store'
-import { ConnectOptions, ConnectorName, RDNS } from '../types'
+import { ConnectOptions, ConnectorName, ProviderTarget, RDNS } from '../types'
 import { AutoConnectError, ConnectError, ConnectorNotFoundError } from '../errors'
 import { normalizeChainId } from '../utils'
 import {
@@ -17,10 +17,11 @@ export function useConnect(pinia?: any) {
 		walletStore.wallet.error = null
 		walletStore.wallet.connectorName = null
 		walletStore.wallet.provider = null
-		walletStore.wallet.providerInfo = null
 		walletStore.wallet.connector = null
 		walletStore.wallet.address = null
 		walletStore.wallet.chainId = null
+		walletStore.wallet.providerInfo = null
+		walletStore.wallet.providerTarget = null
 	}
 
 	async function connectTo(connectorName: ConnectorName | string, options?: ConnectOptions) {
@@ -34,10 +35,12 @@ export function useConnect(pinia?: any) {
 		try {
 			const { provider, account, chainId, info } = await connector.connect(options)
 
-			// console.log('useConnect.connectTo -> account', account)
-
 			if (connector.name === 'BrowserWallet') {
-				walletStore.wallet.providerInfo = info!
+				if (!info) throw new Error('BrowserWallet connector requires provider info')
+				if (!options?.target) throw new Error('BrowserWallet connector requires target')
+
+				walletStore.wallet.providerInfo = info
+				walletStore.wallet.providerTarget = options?.target
 			}
 
 			walletStore.wallet.connector = connector
@@ -107,22 +110,25 @@ export function useConnect(pinia?: any) {
 
 	const isWindowEthereumAvailable = typeof window !== 'undefined' && !!window.ethereum
 
-	async function autoConnect(rdns?: RDNS | string, isWindowEthereum = false) {
+	async function autoConnect(target: ProviderTarget) {
 		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()
-
-			rdns = rdns || lastRdns
-			if (!rdns) return
-
-			options = { rdns }
+		let options: ConnectOptions
+
+		switch (target) {
+			case 'window.ethereum':
+				if (!isWindowEthereumAvailable) return
+				options = { target: 'window.ethereum' }
+				break
+			case 'rdns':
+				const lastRdns = getLastConnectedBrowserWallet()
+				if (!lastRdns) return
+
+				options = { target: 'rdns', rdns: lastRdns }
+				break
+			default:
+				throw new Error('target is required')
 		}
 
 		try {
diff --git a/packages/core/src/store.ts b/packages/core/src/store.ts
index 6ee491e..536b9ac 100644
--- a/packages/core/src/store.ts
+++ b/packages/core/src/store.ts
@@ -28,10 +28,11 @@ export const useStore = defineStore('vd-store', () => {
 		error: null,
 		connectorName: null,
 		provider: null,
-		providerInfo: null,
 		connector: null,
 		address: null,
 		chainId: null,
+		providerInfo: null,
+		providerTarget: null,
 	})
 
 	const onDisconnectCallback = ref<OnDisconnectCallback | null>(null)
diff --git a/packages/core/src/types/connector.ts b/packages/core/src/types/connector.ts
index 236f6d1..25f64e8 100644
--- a/packages/core/src/types/connector.ts
+++ b/packages/core/src/types/connector.ts
@@ -1,7 +1,8 @@
 import { EIP1193Provider } from './eip1193'
-import { EIP6963ProviderDetail, EIP6963ProviderInfo, RDNS } from './eip6963'
+import { EIP6963ProviderInfo } from './eip6963'
 
 export type ConnectorName = 'BrowserWallet' | 'WalletConnect' | 'CoinbaseWallet'
+export type ProviderTarget = 'window.ethereum' | 'rdns' // only for BrowserWalletConnector
 
 export type ConnectorData<Provider = any> = {
 	provider: Provider
@@ -11,8 +12,8 @@ export type ConnectorData<Provider = any> = {
 }
 
 export type ConnectOptions = {
-	rdns?: string | RDNS
-	isWindowEthereum?: boolean
+	target?: ProviderTarget
+	rdns?: string
 	timeout?: number
 }
 
@@ -28,7 +29,8 @@ export abstract class Connector<Provider = EIP1193Provider, Options = any> {
 
 	abstract connect(optionsOrTimeout?: ConnectOptions | number): Promise<ConnectorData>
 
-	abstract getProvider(): Promise<Provider> | EIP6963ProviderDetail // EIP6963ProviderDetail is returned by BrowserWalletConnector
+	abstract getProvider(): Promise<Provider> | { provider: EIP1193Provider; info?: EIP6963ProviderInfo }
+
 	abstract disconnect(): Promise<void>
 	abstract onDisconnect(handler: (...args: any[]) => any): void
 	abstract onAccountsChanged(handler: (accounts: string[]) => any): void
diff --git a/packages/core/src/types/eip6963.ts b/packages/core/src/types/eip6963.ts
index fc8b4a1..995ec86 100644
--- a/packages/core/src/types/eip6963.ts
+++ b/packages/core/src/types/eip6963.ts
@@ -1,6 +1,6 @@
 import { EIP1193Provider } from './eip1193'
 
-export enum RDNS {
+export enum RdnsEnum {
 	'rabby' = 'io.rabby',
 	'metamask' = 'io.metamask',
 	'brave' = 'com.brave.wallet',
@@ -8,6 +8,8 @@ export enum RDNS {
 	'bitget' = 'com.bitget.web3wallet',
 }
 
+export type RDNS = string
+
 export interface EIP6963ProviderInfo {
 	uuid: string
 	name: string
diff --git a/packages/core/src/types/listeners.ts b/packages/core/src/types/listeners.ts
index 8ded011..59be82e 100644
--- a/packages/core/src/types/listeners.ts
+++ b/packages/core/src/types/listeners.ts
@@ -1,4 +1,4 @@
-import { Connector, ConnectorName } from './connector'
+import { Connector, ConnectorName, ProviderTarget } from './connector'
 import { EIP1193Provider } from './eip1193'
 import { EIP6963ProviderInfo } from './eip6963'
 
@@ -7,10 +7,11 @@ export type ConnWallet = {
 	error: null
 	connectorName: ConnectorName
 	provider: EIP1193Provider
-	providerInfo: EIP6963ProviderInfo | null // if the connector is not BrowserWallet, this will be null
 	connector: Connector
 	address: string
 	chainId: number
+	providerInfo: EIP6963ProviderInfo | null // Only available when connectorName is 'BrowserWallet'
+	providerTarget: ProviderTarget | null // Only available when connectorName is 'BrowserWallet'
 }
 
 export type OnConnectedCB = (wallet: ConnWallet) => void
diff --git a/packages/core/src/types/wallet.ts b/packages/core/src/types/wallet.ts
index c8a1e07..fef5a07 100644
--- a/packages/core/src/types/wallet.ts
+++ b/packages/core/src/types/wallet.ts
@@ -1,4 +1,4 @@
-import { Connector, ConnectorName } from './connector'
+import { Connector, ConnectorName, ProviderTarget } from './connector'
 import { EIP1193Provider } from './eip1193'
 import { EIP6963ProviderInfo } from './eip6963'
 
@@ -9,10 +9,11 @@ export type Wallet = {
 	error: string | null
 	connectorName: ConnectorName | null
 	provider: EIP1193Provider | null
-	providerInfo: EIP6963ProviderInfo | null
 	connector: Connector | null
 	address: string | null
 	chainId: number | null
+	providerInfo: EIP6963ProviderInfo | null // Only available when connectorName is 'BrowserWallet'
+	providerTarget: ProviderTarget | null // Only available when connectorName is 'BrowserWallet'
 }
 
 export type OnDisconnectCallback = (...args: any[]) => void
diff --git a/packages/modal/src/VueDappModal.vue b/packages/modal/src/VueDappModal.vue
index 810d69d..71922df 100644
--- a/packages/modal/src/VueDappModal.vue
+++ b/packages/modal/src/VueDappModal.vue
@@ -2,7 +2,7 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import Modal from './components/Modal.vue'
 import WalletConnectIcon from './components/logos/WalletConnectIcon.vue'
-import { useVueDapp, ConnectorName, RDNS } from '@vue-dapp/core'
+import { useVueDapp, ConnectorName, ConnectOptions } from '@vue-dapp/core'
 import { useVueDappModal } from './store'
 
 const props = withDefaults(
@@ -55,9 +55,9 @@ onMounted(async () => {
 		try {
 			isAutoConnecting.value = true
 			if (isMobileAppBrowser()) {
-				await autoConnect(undefined, true)
+				await autoConnect('window.ethereum')
 			} else {
-				await autoConnect()
+				await autoConnect('rdns')
 			}
 		} catch (err: any) {
 			emit('autoConnectError', err)
@@ -68,10 +68,12 @@ onMounted(async () => {
 })
 
 watch(modalOpen, async () => {
-	// ============================ feat: connect to window.ethereum if window.ethereum is available and there's no EIP-6963 providers ============================
+	// ============================ feat: connect to window.ethereum if window.ethereum is available ============================
 	if (modalOpen.value && providerDetails.value.length === 0 && isMobileAppBrowser()) {
 		if (isWindowEthereumAvailable) {
-			await onClickWallet('BrowserWallet', undefined, true)
+			await onClickWallet('BrowserWallet', {
+				target: 'window.ethereum',
+			})
 		}
 		return
 	}
@@ -83,16 +85,18 @@ watch(modalOpen, async () => {
 			providerDetails.value.length === 1 && // only one browser provider
 			connectors.value[0].name === 'BrowserWallet'
 		) {
-			await onClickWallet(connectors.value[0].name)
+			await onClickWallet('BrowserWallet', {
+				target: 'rdns',
+				rdns: providerDetails.value[0].info.rdns,
+			})
 		}
 	}
 })
 
-async function onClickWallet(connName: ConnectorName, rdns?: RDNS | string, isWindowEthereum = false) {
+async function onClickWallet(connName: ConnectorName, options?: ConnectOptions) {
 	try {
 		closeModal()
-		// throw new Error('test connect error')
-		await connectTo(connName, { rdns, isWindowEthereum })
+		await connectTo(connName, options)
 	} catch (err: any) {
 		emit('connectError', err)
 	}
@@ -170,7 +174,12 @@ const isNoWalletFound = computed(
 				<div
 					v-for="detail in providerDetails"
 					:key="detail.info.uuid"
-					@click="onClickWallet('BrowserWallet', detail.info.rdns)"
+					@click="
+						onClickWallet('BrowserWallet', {
+							target: 'rdns',
+							rdns: detail.info.rdns,
+						})
+					"
 					class="vd-wallet-block"
 					:class="{
 						'vd-wallet-block--dark': dark,