Merge pull request #188 from vu3th/fix/error-handling

Fix error handling

app/content/eips.md

@@ -13,8 +13,10 @@ Collect the EIPs related to DApp development, especially in frontend.
 
 ## EIP-1193
 - [EIP-1193: Ethereum Provider JavaScript API](https://eips.ethereum.org/EIPS/eip-1193){:target="_blank"}
+  - [Provider Errors](https://eips.ethereum.org/EIPS/eip-1193#provider-errors){:target="_blank"}
 - [Eip1193Provider - ethers v6](https://docs.ethers.org/v6/api/providers/#Eip1193Provider){:target="_blank"}
 
+
 ## EIP-6963
 - [EIP-6963: Multi Injected Provider Discovery](https://eips.ethereum.org/EIPS/eip-6963){:target="_blank"}
 - [eip6963.org](https://eip6963.org/){:target="_blank"}
@@ -24,4 +26,3 @@ Collect the EIPs related to DApp development, especially in frontend.
 
 - [EIP-3326: Wallet Switch Ethereum Chain RPC Method](https://eips.ethereum.org/EIPS/eip-3326){:target="_blank"}
 - [EIP-1474: Remote procedure call specification](https://eips.ethereum.org/EIPS/eip-1474){:target="_blank"}
-

app/content/errors.md

@@ -0,0 +1,27 @@
+---
+description: ''
+head:
+  meta:
+    - name: 'keywords'
+      content: ''
+---
+
+#  Errors
+
+## Provider Errors
+
+- [EIP-1193 Provider Errors](https://eips.ethereum.org/EIPS/eip-1193#provider-errors){:target="_blank"}
+
+| Status code | Name                  | Description                                                              |
+| ----------- | --------------------- | ------------------------------------------------------------------------ |
+| 4001        | User Rejected Request | The user rejected the request.                                           |
+| 4100        | Unauthorized          | The requested method and/or account has not been authorized by the user. |
+| 4200        | Unsupported Method    | The Provider does not support the requested method.                      |
+| 4900        | Disconnected          | The Provider is disconnected from all chains.                            |
+| 4901        | Chain Disconnected    | The Provider is not connected to the requested chain.                    |
+
+
+## Developing Common Errors
+
+- ["getActivePinia()" was called but there was no active Pinia.](https://github.com/vu3th/vue-dapp/issues/160){:target="_blank"}
+

app/core/sidebar.ts

@@ -100,11 +100,11 @@ export const sidebarMenu = [
 			h(
 				NuxtLink,
 				{
-					to: '/common-errors',
+					to: '/errors',
 				},
-				{ default: () => 'Common Errors' },
+				{ default: () => 'Errors' },
 			),
-		key: '/common-errors',
+		key: '/errors',
 	},
 	{
 		label: () =>

app/pages/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { shortenAddress, useVueDapp } from '@vue-dapp/core'
+import { shortenAddress, useVueDapp, type ConnWallet, type ProviderRpcError } from '@vue-dapp/core'
 import { useVueDappModal } from '@vue-dapp/modal'
-import type { ConnWallet } from '@vue-dapp/core'
 import { ethers } from 'ethers'
 import type { Header, Item } from 'vue3-easy-data-table'
 
@@ -84,6 +83,14 @@ const items = computed<Item[]>(() => [
 		value: ensLoading.value ? 'Loading...' : ensName.value || 'N/A',
 	},
 ])
+
+const connectError = computed(() => {
+	// Ignore the error if the user rejected the connection request
+	if ((<ProviderRpcError>wallet.error)?.code === 4001) {
+		return null
+	}
+	return wallet.error
+})
 </script>
 
 <template>
@@ -105,7 +112,7 @@ const items = computed<Item[]>(() => [
 				<p v-if="wallet.status === 'connected'">Disconnect</p>
 			</n-button>
 
-			<p class="text-red-500 text-center" v-if="wallet.error">{{ wallet.error }}</p>
+			<p class="text-red-500 text-center" v-if="connectError">{{ connectError }}</p>
 
 			<ClientOnly>
 				<Vue3EasyDataTable

packages/core/src/services/connect.ts

@@ -1,7 +1,7 @@
-import { computed, readonly } from 'vue'
+import { computed, markRaw, readonly } from 'vue'
 import { useStore } from '../store'
 import { ConnectOptions, ConnectorName } from '../types'
-import { ConnectError, ConnectorNotFoundError } from '../errors'
+import { ConnectorNotFoundError } from '../errors'
 import { isWindowEthereumAvailable, normalizeChainId } from '../utils'
 import { removeLastConnectedBrowserWallet, setLastConnectedBrowserWallet } from './localStorage'
 
@@ -46,8 +46,8 @@ export function useConnect(pinia?: any) {
 			if (info?.rdns) setLastConnectedBrowserWallet(info.rdns)
 		} catch (err: any) {
 			await disconnect() // will resetWallet()
-			walletStore.wallet.error = err.message
-			throw new ConnectError(err)
+			walletStore.wallet.error = markRaw(err)
+			throw err
 		}
 
 		// ============================= listen EIP-1193 events =============================

packages/core/src/types/wallet.ts

@@ -1,3 +1,4 @@
+import { ProviderRpcError, RpcError } from '../errors'
 import { Connector, ConnectorName, ProviderTarget } from './connector'
 import { EIP1193Provider } from './eip1193'
 import { EIP6963ProviderInfo } from './eip6963'
@@ -6,7 +7,7 @@ export type ConnectionStatus = 'idle' | 'connecting' | 'connected'
 
 export type Wallet = {
 	status: ConnectionStatus
-	error: string | null
+	error: ProviderRpcError | string | null
 	connectorName: ConnectorName | null
 	provider: EIP1193Provider | null
 	connector: Connector | null

packages/walletconnect/src/walletConnectConnector.ts

@@ -5,18 +5,19 @@ import {
 	SwitchChainError,
 	SwitchChainNotSupportedError,
 	UserRejectedRequestError,
+	ProviderRpcError,
 } from '@vue-dapp/core'
 import {
 	EthereumProviderOptions,
 	EthereumProvider as IEthereumProvider,
 } from '@walletconnect/ethereum-provider/dist/types/EthereumProvider'
 import { EthereumProvider } from '@walletconnect/ethereum-provider'
-import { ProviderRpcError, IProviderEvents } from '@walletconnect/ethereum-provider/dist/types/types'
+import { IProviderEvents } from '@walletconnect/ethereum-provider/dist/types/types'
 
 export class WalletConnectConnector extends Connector<IEthereumProvider, EthereumProviderOptions> {
 	readonly name = 'WalletConnect'
 	#provider?: IEthereumProvider
-	#onDisconnectHandler?: (args: ProviderRpcError) => void
+	#onDisconnectHandler?: (err: ProviderRpcError<unknown>) => void
 	#onAccountsChangedHandler?: (accounts: string[]) => void
 	#onChainChangedHandler?: (chainId: number) => void
 
@@ -25,14 +26,24 @@ export class WalletConnectConnector extends Connector<IEthereumProvider, Ethereu
 	}
 
 	async connect() {
-		const provider: any = await this.getProvider()
+		const provider = await this.getProvider()
 		this.#provider = provider
-		const accounts = await provider.enable()
+
+		let accounts: string[]
+
+		try {
+			accounts = await provider.enable()
+		} catch (err: any) {
+			if (err.message === 'Connection request reset. Please try again.') {
+				throw new ProviderRpcError(4001, err.message)
+			}
+			throw err
+		}
+
 		const account = accounts[0]
 
 		// EthereumProvider's public state: https://github.com/WalletConnect/walletconnect-monorepo/blob/91af38edc2d2a99bae0b5b32f92607d221b74364/providers/ethereum-provider/src/EthereumProvider.ts#L221C10-L221C17
 		const chainId = provider.chainId
-
 		return {
 			provider,
 			account,
@@ -45,18 +56,12 @@ export class WalletConnectConnector extends Connector<IEthereumProvider, Ethereu
 			...this.options,
 		})
 
-		provider.on('disconnect', (args: any) => {
+		provider.on('disconnect', (err: any) => {
 			if (!provider.connected) {
-				throw new UserRejectedRequestError(args.message)
+				throw new UserRejectedRequestError(err.message)
 			}
 		})
 
-		try {
-			await provider.enable()
-		} catch (err: any) {
-			throw new Error(err)
-		}
-
 		return provider
 	}
 
@@ -66,7 +71,7 @@ export class WalletConnectConnector extends Connector<IEthereumProvider, Ethereu
 		this.#provider = undefined
 	}
 
-	onDisconnect(handler: (args: ProviderRpcError) => void) {
+	onDisconnect(handler: (err: ProviderRpcError<unknown>) => void) {
 		if (!this.#provider) throw new ProviderNotFoundError()
 		if (this.#onDisconnectHandler) {
 			this.#removeListener('disconnect', this.#onDisconnectHandler)