Merge pull request #178 from vu3th/fix/connect-options-types

Fix/connect options types

Author: johnson86tw

app/components/content/Eip6963.client.vue

@@ -14,7 +14,7 @@ const providerList = computed(() => {
 	})
 })
 
-async function onClickWallet(rdns?: RDNS) {
+async function onClickWallet(rdns: RDNS) {
 	useVueDappModal().close()
 	await connectTo('BrowserWallet', { target: 'rdns', rdns })
 }

packages/core/src/browserWalletConnector.ts

@@ -37,7 +37,7 @@ export class BrowserWalletConnector extends Connector<EIP1193Provider, BrowserWa
 		useEIP6963().subscribe()
 	}
 
-	async connect(options: ConnectOptions) {
+	async connect(options: ConnectOptions<'BrowserWallet'>) {
 		const { target, rdns, timeout } = options
 
 		const { provider, info } = this.getProvider(target, rdns)

packages/core/src/services/connect.ts

@@ -1,6 +1,6 @@
 import { computed, readonly } from 'vue'
 import { useStore } from '../store'
-import { ConnectOptions, ConnectorName, ProviderTarget, RDNS } from '../types'
+import { ConnectOptions, ConnectorName, ProviderTarget } from '../types'
 import { AutoConnectError, ConnectError, ConnectorNotFoundError } from '../errors'
 import { normalizeChainId } from '../utils'
 import {
@@ -24,7 +24,7 @@ export function useConnect(pinia?: any) {
 		walletStore.wallet.providerTarget = null
 	}
 
-	async function connectTo(connectorName: ConnectorName | string, options?: ConnectOptions) {
+	async function connectTo<T extends ConnectorName>(connectorName: T, options: ConnectOptions<T>) {
 		walletStore.wallet.error = ''
 		walletStore.wallet.status = 'connecting'
 
@@ -36,11 +36,8 @@ export function useConnect(pinia?: any) {
 			const { provider, account, chainId, info } = await connector.connect(options)
 
 			if (connector.name === 'BrowserWallet') {
-				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.providerInfo = info || null
+				walletStore.wallet.providerTarget = options?.target || null
 			}
 
 			walletStore.wallet.connector = connector
@@ -114,12 +111,14 @@ export function useConnect(pinia?: any) {
 		const browserWallet = walletStore.connectors.find(conn => conn.name === 'BrowserWallet')
 		if (!browserWallet) return
 
-		let options: ConnectOptions
+		let options: ConnectOptions<'BrowserWallet'>
 
 		switch (target) {
 			case 'window.ethereum':
 				if (!isWindowEthereumAvailable) return
-				options = { target: 'window.ethereum' }
+				options = {
+					target: 'window.ethereum',
+				}
 				break
 			case 'rdns':
 				const lastRdns = getLastConnectedBrowserWallet()
@@ -132,7 +131,7 @@ export function useConnect(pinia?: any) {
 		}
 
 		try {
-			await connectTo(browserWallet.name, options)
+			await connectTo('BrowserWallet', options)
 		} catch (err: any) {
 			throw new AutoConnectError(err)
 		}

packages/core/src/types/connector.ts

@@ -11,12 +11,19 @@ export type ConnectorData<Provider = any> = {
 	info?: EIP6963ProviderInfo // Only available for BrowserWalletConnector
 }
 
-export type ConnectOptions = {
+export type ConnectOptionsBase = {
 	target?: ProviderTarget
 	rdns?: string
 	timeout?: number
 }
 
+type ConnectOptionsForBrowserWallet<T extends ProviderTarget = ProviderTarget> = ConnectOptionsBase &
+	(T extends 'rdns' ? { target: T; rdns: string } : { target: T })
+
+export type ConnectOptions<T extends ConnectorName> = T extends 'BrowserWallet'
+	? ConnectOptionsForBrowserWallet
+	: ConnectOptionsBase | undefined
+
 export abstract class Connector<Provider = EIP1193Provider, Options = any> {
 	// Connector name
 	abstract readonly name: string
@@ -27,7 +34,7 @@ export abstract class Connector<Provider = EIP1193Provider, Options = any> {
 		this.options = options
 	}
 
-	abstract connect(optionsOrTimeout?: ConnectOptions | number): Promise<ConnectorData>
+	abstract connect<T extends ConnectorName>(optionsOrTimeout?: ConnectOptions<T> | number): Promise<ConnectorData>
 
 	abstract getProvider(): Promise<Provider> | { provider: EIP1193Provider; info?: EIP6963ProviderInfo }
 

packages/modal/src/VueDappModal.vue

@@ -93,10 +93,10 @@ watch(modalOpen, async () => {
 	}
 })
 
-async function onClickWallet(connName: ConnectorName, options?: ConnectOptions) {
+async function onClickWallet<T extends ConnectorName>(connName: T, options?: ConnectOptions<T>) {
 	try {
 		closeModal()
-		await connectTo(connName, options)
+		await connectTo<ConnectorName>(connName, options)
 	} catch (err: any) {
 		emit('connectError', err)
 	}