fix: remove console.error, and add error handler property on vd-board

demo/src/App.vue

@@ -115,6 +115,10 @@ watch(selectedChainId, async (val, oldVal) => {
     console.error(e)
   }
 })
+
+const connectErrorHandler = (error: any) => {
+  console.error('Connect error: ', error)
+}
 </script>
 
 <template>
@@ -165,7 +169,12 @@ watch(selectedChainId, async (val, oldVal) => {
     </div>
   </div>
 
-  <vd-board v-if="connectorsCreated" :connectors="connectors" dark>
+  <vd-board
+    v-if="connectorsCreated"
+    :connectors="connectors"
+    :connectErrorHandler="connectErrorHandler"
+    dark
+  >
     <!-- <template #loading>
       <div v-if="wallet.status === 'loading'"></div>
     </template> -->

src/components/Board.vue

@@ -31,6 +31,16 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    connectErrorHandler: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    autoConnectErrorHandler: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
   },
   setup(props) {
     const { boardOpen, close } = useBoard()
@@ -49,9 +59,8 @@ export default defineComponent({
         try {
           isAutoConnecting.value = true
           await autoConnect(connectors)
-        } catch (err) {
-          console.error(err)
-          return
+        } catch (err: any) {
+          props.autoConnectErrorHandler && props.autoConnectErrorHandler(err)
         } finally {
           isAutoConnecting.value = false
         }
@@ -62,8 +71,8 @@ export default defineComponent({
       try {
         close()
         await connectWith(connector)
-      } catch (err) {
-        console.error(err)
+      } catch (err: any) {
+        props.connectErrorHandler && props.connectErrorHandler(err)
       }
     }
 

src/composables/useEthers.ts

@@ -100,8 +100,8 @@ async function activate(externalProvider: ExternalProvider) {
       try {
         const _balance = await signer?.value.getBalance()
         balance.value = _balance.toBigInt()
-      } catch (e) {
-        console.error(e)
+      } catch (error: any) {
+        throw new Error('Failed to update balance')
       }
     }, interval)
   }

src/composables/useMulticall.ts

@@ -40,8 +40,9 @@ export function useMulticall(provider: Web3Provider | JsonRpcProvider) {
     )
 
     results.value = returnData.map((data, i) => {
-      if (!data.success)
-        console.error(`Failed to call ${contractCalls[i].method}`)
+      if (!data.success) {
+        throw new Error(`Failed to call ${contractCalls[i].method}`)
+      }
       const iface = getInterface(contractCalls[i].interface)
       return iface.decodeFunctionResult(
         contractCalls[i].method,

src/composables/useWallet.ts

@@ -163,7 +163,7 @@ export function useWallet(options: useWalletOptions = { useEthers: true }) {
           await connectWith(safe)
         }
       } catch (err: any) {
-        console.error(err) // let keep processing the following code
+        throw new Error('Failed to connect Gnosis Safe') // let keep processing the following code
       }
     }
 

src/connectors/walletConnect.ts

@@ -61,7 +61,6 @@ export class WalletConnectConnector extends Connector<
     return new Promise<WalletConnectProvider>(async (resolve, reject) => {
       provider.wc.on('disconnect', (err, payload) => {
         if (!provider.connected) {
-          console.error(err, payload)
           reject(new UserRejectedRequestError(err))
         }
       })

src/utils/format.ts

@@ -17,8 +17,7 @@ export function displayEther(balance: BigNumber | bigint, fixed = 2) {
 
 export function displayChainName(chainId: number) {
   if (!checkChainId(chainId)) {
-    console.error('Error: Invalid chainId')
-    return 'network not found'
+    return ''
   }
   const { availableNetworks } = useEthers()
   return availableNetworks.value[chainId].chainName.toLowerCase()