diff --git a/src/components/walletconnect/HeaderWidget/index.tsx b/src/components/walletconnect/HeaderWidget/index.tsx index 3d645c0028..eaf3de542a 100644 --- 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(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 index 204b29e4ca..cc61da5bba 100644 --- 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 ( -
+
- {error?.message} + + {error.message} +
) } diff --git a/src/components/walletconnect/SessionManager/styles.module.css b/src/components/walletconnect/SessionManager/styles.module.css index 53287fc371..84afbe52d2 100644 --- 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 index 540f4c15f9..98b3f5c1a8 100644 --- 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> }>({ 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 {children} + return ( + {children} + ) }