fix: error reporting on chain switch request

example/example-vue/src/App.vue

@@ -12,9 +12,15 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, onMounted, ref} from 'vue';
+import {defineComponent, onMounted, reactive, ref} from 'vue';
 import ConnectorCard from "@/components/ConnectorCard.vue";
-import {initConnection, MetaMask, WalletConnect, WalletLink, ChainIdNotAllowedError} from "@whitelabel-solutions/wallet-connector"
+import {
+  MetaMask,
+  WalletConnect,
+  WalletLink,
+  ChainIdNotAllowedError,
+  Connection, IConnectorWrapper
+} from "@whitelabel-solutions/wallet-connector"
 import ConnectionCard from "@/components/ConnectionCard.vue";
 
 export default defineComponent({
@@ -24,33 +30,36 @@ export default defineComponent({
     const appName = "wallet-connector-example-vue"
     const infuraId = "69b854375f754ababacab55f40fceca8"
     const chainId = 1
-    const connection = ref<any>(null)
-
-    onMounted(async () => {
-      const options = {
-        allowedChainIds: [chainId],
-        desiredChainOrChainId: chainId,
-        cache: {
-          enabled: true
-        }
-      }
-      const connectors = [
-        MetaMask(),
-        WalletConnect({infuraId}),
-        WalletLink({
-          appName,
-          rpcUrl: "https://mainnet.infura.io/v3/" + infuraId,
-          chainId
-        })
-      ]
-      try{
-        connection.value = await initConnection({options, connectors})
-
-      } catch(e){
-        console.warn(e)
+    const options = {
+      allowedChainIds: [chainId, 3],
+      desiredChainOrChainId: chainId,
+      cache: {
+        enabled: true
       }
+    }
+    const connectors = [
+      MetaMask(),
+      WalletConnect({infuraId}),
+      WalletLink({
+        appName,
+        rpcUrl: "https://mainnet.infura.io/v3/" + infuraId,
+        chainId
+      })
+    ]
+
+    const connection = ref<Connection>(new Connection(options, connectors))
+
+    connection.value.on("error", (error: any, connector: IConnectorWrapper) => {
+      console.warn(error.message, connector)
+    })
 
+    connection.value.on("connect", (_, connector: IConnectorWrapper) => {
+      console.log("Connect", connector)
     })
+
+
+    connection.value.loadFromCache()
+
     return {connection}
   }
 });
@@ -116,21 +125,6 @@ td:first-child {
 td:last-child {
   width: 50%;
 }
-
-.status-wrapper {
-  display: flex;
-  align-items: center;
-  text-transform: capitalize;
-}
-
-.status {
-  display: block;
-  border-radius: 100%;
-  width: 8px;
-  height: 8px;
-  margin-right: 4px;
-}
-
 </style>
 
 <style scoped>

example/example-vue/src/components/ConnectionCard.vue

@@ -12,14 +12,15 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
+import {defineComponent, PropType} from 'vue';
 import ConnectionCardTable from "@/components/ConnectionCardTable.vue";
+import {IConnection} from "@whitelabel-solutions/wallet-connector";
 
 export default defineComponent({
   name: 'ConnectionCard',
   components: {ConnectionCardTable},
   props: {
-    connection: Object,
+    connection: Object as PropType<IConnection>
   },
 });
 </script>

example/example-vue/src/components/ConnectionCardTable.vue

@@ -9,10 +9,10 @@
     <tr>
       <td>Status</td>
       <td>
-        <div class="status-wrapper">
-          <span class="status" :style="{backgroundColor: wrapperColor[connectionStatus]}"></span>
-          <span>{{ connectionStatus }}</span>
-        </div>
+        <StatusIndicator
+          :connected="connection.activeConnector?.connected"
+          :error="!!connection.activeConnector?.error"
+          :loading="connection.activeConnector?.loading"/>
       </td>
     </tr>
     <tr>
@@ -21,7 +21,7 @@
     </tr>
     <tr>
       <td>Error</td>
-      <td>{{ connectionStatus === 'error' ? connection.activeConnector.error.message : 'None' }}</td>
+      <td>{{ connection.activeConnector?.error ? connection.activeConnector.error.message : 'None' }}</td>
     </tr>
     <tr>
       <td>Chain Id</td>
@@ -31,23 +31,15 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent} from 'vue';
-import {ConnectorStatus} from "@whitelabel-solutions/wallet-connector";
+import {computed, defineComponent, PropType} from 'vue';
+import {IConnection} from "@whitelabel-solutions/wallet-connector";
+import StatusIndicator from "@/components/StatusIndicator.vue";
 
 export default defineComponent({
   name: 'ConnectionCardTable',
+  components: {StatusIndicator},
   props: {
-    connection: Object,
+    connection: Object as PropType<IConnection>
   },
-  setup({connection}) {
-    const connectionStatus = computed(() => connection?.activeConnector?.status ?? ConnectorStatus.DISCONNECTED)
-    const wrapperColor = {
-      disconnected: "#e5e5e5",
-      loading: "#f0ad4e",
-      connected: "#5cb85c",
-      error: "#d9534f",
-    }
-    return {connectionStatus, wrapperColor}
-  }
 });
 </script>

example/example-vue/src/components/ConnectorCard.vue

@@ -7,38 +7,37 @@
 
     <div class="card-body">
       <ConnectorCardTable :connector="connector"/>
-      <button @click="connector.status === 'connected' ? connector.disconnect() : connect()">
-        {{ label[connector.status] }}
+      <button @click="connector.connected ? connector.disconnect() : connect()">
+        {{ label }}
       </button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent, PropType} from 'vue';
+import {computed, defineComponent, PropType} from 'vue';
 import ConnectorCardTable from "@/components/ConnectorCardTable.vue";
-import {ChainIdNotAllowedError, ConnectorStatus, type IConnectorWrapper} from "@whitelabel-solutions/wallet-connector";
+import {ChainIdNotAllowedError, type IConnectorWrapper} from "@whitelabel-solutions/wallet-connector";
 
 export default defineComponent({
   name: 'ConnectorCard',
   components: {ConnectorCardTable},
   props: {
     connector: Object as PropType<IConnectorWrapper>,
   },
-  setup({connector}){
+  setup({connector}) {
     const connect = async () => {
       await connector?.connect()
-      if(connector?.error instanceof ChainIdNotAllowedError){
+      if (connector?.error instanceof ChainIdNotAllowedError) {
         console.warn("Invalid Chainid")
       }
     }
 
-    const label = {
-      [ConnectorStatus.LOADING]: "Loading",
-      [ConnectorStatus.CONNECTED]: "Disconnect",
-      [ConnectorStatus.DISCONNECTED]: "Connect",
-      [ConnectorStatus.ERROR]: "Try Again"
-    }
+    const label = computed(() => {
+      return connector?.connected ? "Disconnect" :
+        (connector?.loading ? "Loading" :
+          (connector?.error ? "Try Again" : "Connect"))
+    })
 
     return {connect, label}
   }

example/example-vue/src/components/ConnectorCardTable.vue

@@ -7,19 +7,19 @@
     <tr>
       <td>Status</td>
       <td>
-        <div class="status-wrapper">
-          <span class="status" :style="{backgroundColor: wrapperColor[connector.status]}"></span>
-          <span>{{ connector.status }}</span>
-        </div>
+        <StatusIndicator
+          :connected="connector?.connected"
+          :error="!!connector?.error"
+          :loading="connector?.loading"/>
       </td>
     </tr>
     <tr>
-      <td>Selected Address</td>
+      <td>Selected Account</td>
       <td>{{ connector?.selectedAccount ?? 'None' }}</td>
     </tr>
     <tr>
       <td>Error</td>
-      <td>{{ connector.status === 'error' ? connector.error.message : 'None' }}</td>
+      <td>{{ connector.error ? connector.error.message : 'None' }}</td>
     </tr>
     <tr>
       <td>Chain Id</td>
@@ -29,21 +29,17 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent} from 'vue';
+import {defineComponent, PropType} from 'vue';
+import {IConnectorWrapper} from "@whitelabel-solutions/wallet-connector";
+import StatusIndicator from "@/components/StatusIndicator.vue";
 
 export default defineComponent({
   name: 'ConnectorCardTable',
+  components: {StatusIndicator},
   props: {
-    connector: Object,
+    connector: Object as PropType<IConnectorWrapper>,
   },
   setup() {
-    const wrapperColor = {
-      disconnected: "#e5e5e5",
-      loading: "#f0ad4e",
-      connected: "#5cb85c",
-      error: "#d9534f",
-    }
-    return {wrapperColor}
   }
 });
 </script>

example/example-vue/src/components/StatusIndicator.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="status-indicator">
+    <span class="status" :style="{backgroundColor: color}"></span>
+    <span>{{ label }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, toRefs} from 'vue';
+
+export default defineComponent({
+  name: 'StatusIndicator',
+  props: {
+    connected: Boolean,
+    loading: Boolean,
+    error: Boolean
+  },
+  setup(props) {
+
+    const color = computed(() => props.error ? "#d9534f" : (
+      props.connected ? "#5cb85c" : (props.loading ? "#f0ad4e" : "#e5e5e5")
+    ))
+    const label = computed(() => props.error ? "Error" : (
+      props.connected ? "Connected" : (props.loading ? "Loading" : "Disconnected")
+    ))
+
+    return {color, label}
+  }
+});
+</script>
+<style scoped>
+.status-indicator {
+  display: flex;
+  align-items: center;
+  text-transform: capitalize;
+}
+
+.status {
+  display: block;
+  border-radius: 100%;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+}
+</style>

example/example-vue/src/shims-vue.d.ts

@@ -4,3 +4,10 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module 'eth-provider'
+
+declare module '*.svg' {
+    const content: any
+    export default content
+}

scripts/rollup.config.ts

@@ -15,6 +15,7 @@ const esbuildPlugin = esbuild()
 const dtsPlugin = [dts()]
 
 const externals = [
+    'eventemitter3',
     '@coinbase/wallet-sdk',
     '@walletconnect/web3-provider',
     'authereum/dist',

src/connectors/Authereum/index.ts

@@ -1,7 +1,7 @@
 import { Authereum } from 'authereum/dist'
 import Logo from './logo.svg'
 import { AbstractConnector, IExternalProvider } from '../../types'
-import { createConnector } from '../../core/construction'
+import { createConnector } from '../../helpers/construction'
 
 export type AuthereumOptions = {
     apiKey: string

src/connectors/BinanceChain/index.ts

@@ -1,6 +1,6 @@
 import Logo from './logo.svg'
 import { AbstractConnector, IExternalProvider } from '../../types'
-import { createConnector } from '../../core/construction'
+import { createConnector } from '../../helpers/construction'
 
 export class BinanceChainConnector extends AbstractConnector {
     constructor() {

src/connectors/Fortmatic/index.ts

@@ -1,7 +1,7 @@
 import Fortmatic from 'fortmatic'
 import Logo from './logo.svg'
 import { AbstractConnector, IExternalProvider } from '../../types'
-import { createConnector } from '../../core/construction'
+import { createConnector } from '../../helpers/construction'
 import { BinanceChainConnector } from '../BinanceChain'
 
 export type FortmaticOptions = {

src/connectors/Frame/index.ts

@@ -1,7 +1,7 @@
 import ethProvider from 'eth-provider'
 import FrameLogo from './logo.svg'
 import { AbstractConnector, IExternalProvider } from '../../types'
-import { createConnector } from '../../core/construction'
+import { createConnector } from '../../helpers/construction'
 
 export class FrameConnector extends AbstractConnector {
     constructor() {

src/connectors/MetaMask/index.ts

@@ -1,6 +1,6 @@
 import Logo from './logo.svg'
 import { AbstractConnector } from '../../types'
-import { createConnector } from '../../core/construction'
+import { createConnector } from '../../helpers/construction'
 
 export class MetaMaskConnector extends AbstractConnector {
     constructor() {

src/connectors/WalletConnect/index.ts

@@ -2,7 +2,7 @@ import WalletConnectProviderDefault from '@walletconnect/web3-provider'
 import Logo from './logo.svg'
 import { AbstractConnector, IExternalProvider } from '../../types'
 import { IWalletConnectProviderOptions } from '@walletconnect/types'
-import { createConnector } from '../../core/construction'
+import { createConnector } from '../../helpers/construction'
 
 export type WalletConnectOptions = IWalletConnectProviderOptions