A better wrong chain message

src/components/walletconnect/WcLogoHeader/styles.module.css

@@ -16,5 +16,4 @@
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  hyphens: auto;
 }

src/components/walletconnect/WcSessionMananger/index.tsx

@@ -109,11 +109,7 @@ const WcSessionManager = ({ sessions, uri }: WcSessionManagerProps) => {
     setOpen(true)
 
     let timer = setTimeout(() => {
-      setOpen(false)
-
-      timer = setTimeout(() => {
-        setChangedSession(undefined)
-      }, 500)
+      setChangedSession(undefined)
     }, SESSION_INFO_TIMEOUT)
 
     return () => clearTimeout(timer)

src/services/walletconnect/WalletConnectContext.tsx

@@ -13,6 +13,15 @@ import { WALLETCONNECT_EVENTS } from '../analytics/events/walletconnect'
 import { SafeAppsTag } from '@/config/constants'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 
+enum Errors {
+  WRONG_CHAIN = '%%dappName%% made a request on a different chain than the one you are connected to',
+}
+
+const getWrongChainError = (dappName: string): Error => {
+  const message = Errors.WRONG_CHAIN.replace('%%dappName%%', dappName)
+  return new Error(message)
+}
+
 const walletConnectSingleton = new WalletConnectWallet()
 
 export const WalletConnectContext = createContext<{
@@ -81,8 +90,11 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
       const getResponse = () => {
         // Get error if wrong chain
         if (!session || requestChainId !== chainId) {
+          if (session) {
+            setError(getWrongChainError(getPeerName(session.peer)))
+          }
+
           const error = getSdkError('UNSUPPORTED_CHAINS')
-          setError(new Error(error.message))
           return formatJsonRpcError(event.id, error)
         }