Style wc error

src/components/walletconnect/WcErrorMessage/index.tsx

@@ -9,13 +9,9 @@ const WcErrorMessage = ({ error, onClose }: { error: Error; onClose: () => void
 
   return (
     <div className={css.errorContainer}>
-      <WcLogoHeader error />
+      <WcLogoHeader errorMessage={summary} />
 
-      <Typography title={error.message} className={css.errorMessage} mb={3}>
-        {summary}
-      </Typography>
-
-      {details && <Typography variant="body2">{details}</Typography>}
+      {details && <Typography mt={1}>{details}</Typography>}
 
       <Button variant="contained" onClick={onClose} className={css.button}>
         OK

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

@@ -5,12 +5,7 @@
   text-align: center;
 }
 
-.errorMessage {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-}
-
 .button {
   padding: var(--space-1) var(--space-4);
+  margin-top: var(--space-3);
 }

src/components/walletconnect/WcLogoHeader/index.tsx

@@ -4,16 +4,16 @@ import WalletConnect from '@/public/images/common/walletconnect.svg'
 import Alert from '@/public/images/notifications/alert.svg'
 import css from './styles.module.css'
 
-const WcLogoHeader = ({ error }: { error?: boolean }): ReactElement => {
+const WcLogoHeader = ({ errorMessage }: { errorMessage?: string }): ReactElement => {
   return (
     <>
       <div>
         <SvgIcon component={WalletConnect} inheritViewBox className={css.icon} />
-        {error && <SvgIcon component={Alert} inheritViewBox className={css.errorBadge} fontSize="small" />}
+        {errorMessage && <SvgIcon component={Alert} inheritViewBox className={css.errorBadge} fontSize="small" />}
       </div>
 
-      <Typography variant="h5" mt={2} mb={0.5}>
-        Connect dApps to {`Safe{Wallet}`}
+      <Typography variant="h5" mt={2} mb={0.5} className={css.title}>
+        {errorMessage || 'Connect dApps to Safe{Wallet}'}
       </Typography>
     </>
   )

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

@@ -11,3 +11,9 @@
   border-radius: 50%;
   border: 1px solid var(--color-background-paper);
 }
+
+.title {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/services/walletconnect/__tests__/utils.test.ts

@@ -0,0 +1,19 @@
+import { splitError } from '../utils'
+
+describe('WalletConnect utils', () => {
+  describe('splitError', () => {
+    it('should return the error summary and detail', () => {
+      const error = new Error('WalletConnect failed to switch chain: { session: "0x1234", chainId: 1 }')
+      const [summary, detail] = splitError(error.message)
+      expect(summary).toEqual('WalletConnect failed to switch chain')
+      expect(detail).toEqual('{ session: "0x1234", chainId: 1 }')
+    })
+
+    it('should return the error summary if no details', () => {
+      const error = new Error('WalletConnect failed to switch chain')
+      const [summary, detail] = splitError(error.message)
+      expect(summary).toEqual('WalletConnect failed to switch chain')
+      expect(detail).toBeUndefined()
+    })
+  })
+})

src/services/walletconnect/utils.ts

@@ -60,5 +60,5 @@ export const getPeerName = (peer: SessionTypes.Struct['peer'] | ProposalTypes.St
 }
 
 export const splitError = (message: string): string[] => {
-  return message.split(': ')
+  return message.split(/: (.+)/).slice(0, 2)
 }