Merge branch 'nect' into focus-wc-uri

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -75,7 +75,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
           horizontal: 'center',
         }}
         sx={{
-          '& .MuiPaper-root': {
+          '& > .MuiPaper-root': {
             top: 'var(--header-height) !important',
           },
         }}

src/components/notification-center/NotificationCenter/index.tsx

@@ -115,7 +115,7 @@ const NotificationCenter = (): ReactElement => {
           horizontal: 'left',
         }}
         sx={{
-          '& .MuiPaper-root': {
+          '& > .MuiPaper-root': {
             top: 'var(--header-height) !important',
           },
         }}

src/components/tx-flow/common/TxNonce/index.tsx

@@ -1,4 +1,4 @@
-import { memo, type ReactElement, useContext, useMemo } from 'react'
+import { memo, type ReactElement, useContext, useMemo, useState, useEffect } from 'react'
 import {
   Autocomplete,
   Box,
@@ -82,17 +82,10 @@ const NonceFormOption = memo(function NonceFormOption({
   )
 })
 
-const getFieldMinWidth = (value: string, showRecommendedNonceButton = false): string => {
-  const MIN_CHARS = 5
+const getFieldMinWidth = (value: string): string => {
+  const MIN_CHARS = 7
   const MAX_WIDTH = '200px'
-  const ADORNMENT_PADDING = '24px'
-
   const clamped = `clamp(calc(${MIN_CHARS}ch + 6px), calc(${Math.max(MIN_CHARS, value.length)}ch + 6px), ${MAX_WIDTH})`
-
-  if (showRecommendedNonceButton) {
-    return `calc(${clamped} + ${ADORNMENT_PADDING})`
-  }
-
   return clamped
 }
 
@@ -102,11 +95,23 @@ enum TxNonceFormFieldNames {
   NONCE = 'nonce',
 }
 
+enum ErrorMessages {
+  NONCE_MUST_BE_NUMBER = 'Nonce must be a number',
+  NONCE_TOO_LOW = "Nonce can't be lower than %%nonce%%",
+  NONCE_TOO_HIGH = 'Nonce is too high',
+  NONCE_TOO_FAR = 'Nonce is much higher than the current nonce',
+  NONCE_GT_RECOMMENDED = 'Nonce is higher than the recommended nonce',
+}
+
+const MAX_NONCE_DIFFERENCE = 100
+
 const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNonce: string }) => {
   const { safeTx, setNonce } = useContext(SafeTxContext)
   const previousNonces = usePreviousNonces().map((nonce) => nonce.toString())
   const { safe } = useSafeInfo()
+  const [warning, setWarning] = useState<string>('')
 
+  const showRecommendedNonceButton = recommendedNonce !== nonce
   const isEditable = !safeTx || safeTx?.signatures.size === 0
   const readOnly = !isEditable || isRejectionTx(safeTx)
 
@@ -124,6 +129,20 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
     formMethods.setValue(TxNonceFormFieldNames.NONCE, recommendedNonce)
   }
 
+  useEffect(() => {
+    let message = ''
+    // Warnings
+    if (Number(nonce) >= safe.nonce + MAX_NONCE_DIFFERENCE) {
+      message = ErrorMessages.NONCE_TOO_FAR
+    }
+
+    if (Number(nonce) > Number(recommendedNonce)) {
+      message = ErrorMessages.NONCE_GT_RECOMMENDED
+    }
+
+    setWarning(message)
+  }, [nonce, recommendedNonce, safe.nonce])
+
   return (
     <Controller
       name={TxNonceFormFieldNames.NONCE}
@@ -138,15 +157,15 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
           const newNonce = Number(value)
 
           if (isNaN(newNonce)) {
-            return 'Nonce must be a number'
+            return ErrorMessages.NONCE_MUST_BE_NUMBER
           }
 
           if (newNonce < safe.nonce) {
-            return `Nonce can't be lower than ${safe.nonce}`
+            return ErrorMessages.NONCE_TOO_LOW.replace('%%nonce%%', safe.nonce.toString())
           }
 
           if (newNonce >= Number.MAX_SAFE_INTEGER) {
-            return 'Nonce is too high'
+            return ErrorMessages.NONCE_TOO_HIGH
           }
 
           // Update context with valid nonce
@@ -162,8 +181,6 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
           )
         }
 
-        const showRecommendedNonceButton = recommendedNonce !== field.value
-
         return (
           <Autocomplete
             value={field.value}
@@ -197,11 +214,11 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
               const isInitialPreviousNonce = option === previousNonces[0]
 
               return (
-                <>
+                <div key={option}>
                   {isRecommendedNonce && <NonceFormHeader>Recommended nonce</NonceFormHeader>}
                   {isInitialPreviousNonce && <NonceFormHeader sx={{ pt: 3 }}>Replace existing</NonceFormHeader>}
                   <NonceFormOption key={option} menuItemProps={props} nonce={option} />
-                </>
+                </div>
               )
             }}
             disableClearable
@@ -212,7 +229,7 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
             }}
             renderInput={(params) => {
               return (
-                <Tooltip title={fieldState.error?.message} open arrow placement="top">
+                <Tooltip title={fieldState.error?.message || warning} open arrow placement="top">
                   <NumberField
                     {...params}
                     error={!!fieldState.error}
@@ -236,7 +253,7 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
                       },
                     ])}
                     sx={{
-                      minWidth: getFieldMinWidth(field.value, showRecommendedNonceButton),
+                      minWidth: getFieldMinWidth(field.value),
                     }}
                   />
                 </Tooltip>

src/components/walletconnect/Popup/index.tsx

@@ -14,7 +14,7 @@ const Popup = ({ children, ...props }: PopoverProps): ReactElement => {
         horizontal: 'center',
       }}
       sx={{
-        '& .MuiPaper-root': {
+        '& > .MuiPaper-root': {
           top: 'var(--header-height) !important',
         },
       }}

src/components/walletconnect/SessionList/index.tsx

@@ -1,13 +1,5 @@
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
-import {
-  Button,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemSecondaryAction,
-  ListItemText,
-  Typography,
-} from '@mui/material'
+import { Button, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, Typography } from '@mui/material'
 import type { SessionTypes } from '@walletconnect/types'
 import type { ReactElement } from 'react'
 
@@ -28,16 +20,16 @@ const SessionListItem = ({
   return (
     <ListItem className={css.sessionListItem}>
       {session.peer.metadata.icons[0] && (
-        <ListItemAvatar>
+        <ListItemAvatar className={css.sessionListAvatar}>
           <SafeAppIconCard src={session.peer.metadata.icons[0]} alt="icon" width={20} height={20} />
         </ListItemAvatar>
       )}
       <ListItemText primary={session.peer.metadata.name} />
-      <ListItemSecondaryAction className={css.sessionListSecondaryAction}>
+      <ListItemIcon className={css.sessionListSecondaryAction}>
         <Button variant="danger" onClick={onDisconnect} className={css.button}>
           Disconnect
         </Button>
-      </ListItemSecondaryAction>
+      </ListItemIcon>
     </ListItem>
   )
 }

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

@@ -1,6 +1,9 @@
 .sessionList {
   width: 100%;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
 }
 
 .sessionListItem {
@@ -9,6 +12,12 @@
   height: 56px;
 }
 
+.sessionListAvatar {
+  display: flex;
+  min-width: unset;
+  padding-right: var(--space-1);
+}
+
 .sessionListSecondaryAction {
   /* InputAdornment */
   right: 14px;

src/components/walletconnect/SessionManager/ErrorMessage.tsx

@@ -0,0 +1,15 @@
+import { Typography } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import { WalletConnectHeader } from './Header'
+
+import css from './styles.module.css'
+
+export const WalletConnectErrorMessage = ({ error }: { error: Error }): ReactElement => {
+  return (
+    <div className={css.errorMessage}>
+      <WalletConnectHeader error />
+      <Typography>{error?.message}</Typography>
+    </div>
+  )
+}

src/components/walletconnect/SessionManager/index.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useContext, useEffect, useState } from 'react'
-import { Typography } from '@mui/material'
 import type { Web3WalletTypes } from '@walletconnect/web3wallet'
 import type { SessionTypes } from '@walletconnect/types'
 import type { ReactElement } from 'react'
@@ -9,7 +8,7 @@ import { WalletConnectContext } from '@/services/walletconnect/WalletConnectCont
 import { asError } from '@/services/exceptions/utils'
 import ProposalForm from '../ProposalForm'
 import { ConnectionForm } from '../ConnectionForm'
-import { WalletConnectHeader } from './Header'
+import { WalletConnectErrorMessage } from './ErrorMessage'
 
 const SessionManager = ({ sessions, uri }: { sessions: SessionTypes.Struct[]; uri: string }): ReactElement => {
   const { safe, safeAddress } = useSafeInfo()
@@ -62,13 +61,9 @@ const SessionManager = ({ sessions, uri }: { sessions: SessionTypes.Struct[]; ur
     return walletConnect.onSessionPropose(setProposal)
   }, [walletConnect])
 
-  if (walletConnectError || error) {
-    return (
-      <>
-        <WalletConnectHeader error />
-        <Typography>{walletConnectError?.message ?? error?.message}</Typography>
-      </>
-    )
+  const _error = walletConnectError || error
+  if (_error) {
+    return <WalletConnectErrorMessage error={_error} />
   }
 
   if (!proposal) {

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

@@ -3,6 +3,13 @@
   width: 40px;
 }
 
+.errorMessage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
 .errorBadge {
   color: var(--color-error-main);
   margin-left: -16px;