fix: prevent error from blocking WC popup (#2663)

safe-global · Oct 19, 2023 · 47215d8 · 47215d8
1 parent 2bb0878
commit 47215d8
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/src/components/walletconnect/HeaderWidget/index.tsx b/src/components/walletconnect/HeaderWidget/index.tsx
@@ -26,7 +26,7 @@ const usePrepopulatedUri = (): [string, () => void] => {
 }
 
 const WalletConnectHeaderWidget = (): ReactElement => {
-  const { walletConnect } = useContext(WalletConnectContext)
+  const { walletConnect, setError } = useContext(WalletConnectContext)
   const [popupOpen, setPopupOpen] = useState(false)
   const iconRef = useRef<HTMLDivElement>(null)
   const sessions = useWalletConnectSessions()
@@ -37,7 +37,9 @@ const WalletConnectHeaderWidget = (): ReactElement => {
   const onCloseSessionManager = useCallback(() => {
     setPopupOpen(false)
     clearUri()
-  }, [clearUri])
+
+    setError(null)
+  }, [clearUri, setError])
 
   const onCloseSuccesBanner = useCallback(() => setMetadata(undefined), [])
   const onSuccess = useCallback(

diff --git a/src/components/walletconnect/SessionManager/ErrorMessage.tsx b/src/components/walletconnect/SessionManager/ErrorMessage.tsx
@@ -7,9 +7,11 @@ import css from './styles.module.css'
 
 export const WalletConnectErrorMessage = ({ error }: { error: Error }): ReactElement => {
   return (
-    <div className={css.errorMessage}>
+    <div className={css.errorContainer}>
       <WalletConnectHeader error />
-      <Typography>{error?.message}</Typography>
+      <Typography title={error.message} className={css.errorMessage}>
+        {error.message}
+      </Typography>
     </div>
   )
 }
diff --git a/src/components/walletconnect/SessionManager/styles.module.css b/src/components/walletconnect/SessionManager/styles.module.css
@@ -3,7 +3,7 @@
   width: 40px;
 }
 
-.errorMessage {
+.errorContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -18,3 +18,9 @@
   border-radius: 50%;
   border: 1px solid var(--color-background-paper);
 }
+
+.errorMessage {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
diff --git a/src/services/walletconnect/WalletConnectContext.tsx b/src/services/walletconnect/WalletConnectContext.tsx
@@ -1,6 +1,6 @@
 import { getSdkError } from '@walletconnect/utils'
 import { formatJsonRpcError } from '@walletconnect/jsonrpc-utils'
-import { type ReactNode, createContext, useEffect, useState } from 'react'
+import { type ReactNode, createContext, useEffect, useState, type Dispatch, type SetStateAction } from 'react'
 
 import useSafeInfo from '@/hooks/useSafeInfo'
 import useSafeWalletProvider from '@/services/safe-wallet-provider/useSafeWalletProvider'
@@ -13,9 +13,11 @@ const walletConnectSingleton = new WalletConnectWallet()
 export const WalletConnectContext = createContext<{
   walletConnect: WalletConnectWallet | null
   error: Error | null
+  setError: Dispatch<SetStateAction<Error | null>>
 }>({
   walletConnect: null,
   error: null,
+  setError: () => {},
 })
 
 export const WalletConnectProvider = ({ children }: { children: ReactNode }) => {
@@ -78,5 +80,7 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
     })
   }, [walletConnect, chainId, safeWalletProvider])
 
-  return <WalletConnectContext.Provider value={{ walletConnect, error }}>{children}</WalletConnectContext.Provider>
+  return (
+    <WalletConnectContext.Provider value={{ walletConnect, error, setError }}>{children}</WalletConnectContext.Provider>
+  )
 }