wallet errors as LRUCache and example in storybook

xylabs · Dec 8, 2023 · 38c908f · 38c908f
1 parent d813378
commit 38c908f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 24 deletions.
diff --git a/packages/crypto/src/wallets/components/Discovery/Paper.stories.tsx b/packages/crypto/src/wallets/components/Discovery/Paper.stories.tsx
@@ -1,6 +1,6 @@
-import { Alert, AlertTitle, Snackbar } from '@mui/material'
+import { Alert, AlertTitle, List, ListItem, Snackbar } from '@mui/material'
 import { Meta, StoryFn } from '@storybook/react'
-import { FlexRow } from '@xylabs/react-flexbox'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import { useEffect, useState } from 'react'
 
 import { AccountsChangedEventName, ChainChangedEventName } from '../../events'
@@ -24,7 +24,21 @@ const StorybookEntry = {
 } as Meta<typeof WalletDiscoveryPaper>
 
 const Template: StoryFn<WalletDiscoveryPaperProps> = (args) => {
-  const [selectedWallet, setSelectedWallet] = useState<EIP6963Connector>(new EIP6963Connector())
+  const [selectedWallet, setSelectedWallet] = useState<EIP6963Connector | undefined>()
+  const [errorArray, setErrorArray] = useState<[string, Error][]>([])
+
+  useEffect(() => {
+    const logErrorsInterval = setInterval(() => {
+      const errorLogAsArray = selectedWallet ? [...selectedWallet.providerErrorLog] : []
+      setErrorArray(errorLogAsArray as [string, Error][])
+      console.log(errorLogAsArray)
+    }, 1000)
+
+    return () => {
+      clearInterval(logErrorsInterval)
+    }
+  }, [selectedWallet])
+
   const onWalletSelect: onWalletSelect = (eIP6963Connector) => {
     setSelectedWallet(eIP6963Connector)
   }
@@ -49,16 +63,31 @@ const Template: StoryFn<WalletDiscoveryPaperProps> = (args) => {
   }, [])
 
   return (
-    <FlexRow justifyContent="start" alignItems="start" gap={4}>
-      <WalletDiscoveryPaper onWalletSelect={onWalletSelect} {...args} />
-      {selectedWallet.rawProvider ? <WalletOverviewCard ethWalletConnector={selectedWallet} sx={{ width: '300px' }} /> : null}
+    <FlexCol alignItems="start" gap={2}>
+      <FlexRow justifyContent="start" alignItems="start" gap={4}>
+        <WalletDiscoveryPaper onWalletSelect={onWalletSelect} {...args} />
+        {selectedWallet?.rawProvider ? <WalletOverviewCard ethWalletConnector={selectedWallet} sx={{ width: '300px' }} /> : null}
+      </FlexRow>
+      {selectedWallet ? (
+        errorArray.length ? (
+          <List>
+            {errorArray.map(([walletName, error]) => (
+              <ListItem key={walletName}>
+                {walletName} - {error.message}
+              </ListItem>
+            ))}
+          </List>
+        ) : null
+      ) : (
+        <Alert severity={'warning'}>Select a wallet to see its errors</Alert>
+      )}
       <Snackbar anchorOrigin={{ horizontal: 'center', vertical: 'top' }} open={!!event} autoHideDuration={5000} onClose={() => setEvent(undefined)}>
         <Alert severity="success">
           <AlertTitle>New Event</AlertTitle>
           {JSON.stringify(event, null, 2)}
         </Alert>
       </Snackbar>
-    </FlexRow>
+    </FlexCol>
   )
 }
 

diff --git a/packages/crypto/src/wallets/lib/EIP1193Events.ts b/packages/crypto/src/wallets/lib/EIP1193Events.ts
@@ -65,16 +65,7 @@ export abstract class EIP1193Events implements EIP1193EventsCompatible {
 
   private enabled(method?: () => void) {
     if (this.eventsEnabled) {
-      // Not all injected providers fail gracefully so we can prevent their errors from bubbling up
-      // This might not be the best long-term solution but logging for now should surface which wallet
-      // and method combinations cause the most issues.
-      try {
-        method?.()
-      } catch (e) {
-        console.warn(`Error calling method on the raw provider: ${this._providerName}`, e)
-      }
-    } else {
-      console.warn('EIP1193 events not enabled')
+      method?.()
     }
   }
 }
diff --git a/packages/crypto/src/wallets/third-party/classes/EthWalletConnectorBase.ts b/packages/crypto/src/wallets/third-party/classes/EthWalletConnectorBase.ts
@@ -1,14 +1,10 @@
 import { BrowserProvider, Eip1193Provider, JsonRpcSigner, Listener } from 'ethers'
+import { LRUCache } from 'lru-cache'
 
 import { AccountsChangedEventName, ChainChangedEventName } from '../../events'
 import { EIP1193Events, EIP6963ProviderInfo, SupportedEventProposals } from '../../lib'
 import { findChainName } from '../../utils'
 
-export interface ProviderErrorLogEntry {
-  error: Error
-  providerName: string
-}
-
 /**
  * Base class for connecting to an ethereum compatible wallet
  */
@@ -19,7 +15,7 @@ export abstract class EthWalletConnectorBase extends EIP1193Events {
   // instance of Ethers BrowserProvider
   provider: BrowserProvider | undefined
 
-  providerErrorLog: ProviderErrorLogEntry[] = []
+  providerErrorLog = new LRUCache<string, Error>({ max: 300 })
 
   // Assets provided by the wallet
   providerInfo: EIP6963ProviderInfo | undefined
@@ -170,7 +166,8 @@ export abstract class EthWalletConnectorBase extends EIP1193Events {
   }
 
   private logProviderErrors(error: Error) {
-    this.providerErrorLog.push({ error, providerName: this.providerName })
+    const timestamp = Date.now()
+    this.providerErrorLog.set(`${this.providerName} - ${timestamp}`, error)
   }
 
   private logProviderMissing() {