Name can be empty

src/components/walletconnect/WcProposalForm/ProposalVerification.tsx

@@ -2,12 +2,12 @@ import type { Web3WalletTypes } from '@walletconnect/web3wallet'
 import { Alert, SvgIcon } from '@mui/material'
 import type { AlertColor } from '@mui/material'
 import AlertIcon from '@/public/images/notifications/alert.svg'
-
 import type { Verify } from '@walletconnect/types'
 import type { ComponentType, ReactElement } from 'react'
 import CloseIcon from '@/public/images/common/close.svg'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import CheckIcon from '@/public/images/common/check.svg'
+import { getPeerName } from '@/services/walletconnect/utils'
 import css from './styles.module.css'
 
 const Validation: {
@@ -65,8 +65,8 @@ const ProposalVerification = ({ proposal }: { proposal: Web3WalletTypes.SessionP
       }
     >
       {isScam
-        ? `We prevent connecting to ${proposer.metadata.name} as they are a known scam.`
-        : `${proposer.metadata.name} ${_validation.desc}`}
+        ? `We prevent connecting to ${getPeerName(proposer) || 'this dApp'} as they are a known scam.`
+        : `${getPeerName(proposer) || 'This dApp'} ${_validation.desc}`}
     </Alert>
   )
 }

src/components/walletconnect/WcProposalForm/index.tsx

@@ -8,7 +8,7 @@ import css from './styles.module.css'
 import ProposalVerification from './ProposalVerification'
 import { CompatibilityWarning } from './CompatibilityWarning'
 import useChains from '@/hooks/useChains'
-import { getSupportedChainIds, isBlockedBridge, isWarnedBridge } from '@/services/walletconnect/utils'
+import { getPeerName, getSupportedChainIds, isBlockedBridge, isWarnedBridge } from '@/services/walletconnect/utils'
 import useChainId from '@/hooks/useChainId'
 
 type ProposalFormProps = {
@@ -29,6 +29,7 @@ const WcProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): R
 
   const isHighRisk = proposal.verifyContext.verified.validation === 'INVALID' || isWarnedBridge(origin)
   const disabled = isUnsupportedChain || isScam || isBlockedBridge(origin) || (isHighRisk && !understandsRisk)
+  const name = getPeerName(proposer) || 'Unknown dApp'
 
   return (
     <div className={css.container}>
@@ -38,16 +39,13 @@ const WcProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): R
 
       {proposer.metadata.icons[0] && (
         <div className={css.icon}>
-          <SafeAppIconCard
-            src={proposer.metadata.icons[0]}
-            width={32}
-            height={32}
-            alt={`${proposer.metadata.name || 'dApp'} logo`}
-          />
+          <SafeAppIconCard src={proposer.metadata.icons[0]} width={32} height={32} alt={`${name || 'dApp'} logo`} />
         </div>
       )}
 
-      <Typography mb={1}>{proposer.metadata.name} wants to connect</Typography>
+      <Typography mb={1}>
+        <b>{name}</b> wants to connect
+      </Typography>
 
       <Typography className={css.origin} mb={3}>
         {proposal.verifyContext.verified.origin}

src/components/walletconnect/WcProposalForm/useCompatibilityWarning.ts

@@ -4,7 +4,7 @@ import type { Web3WalletTypes } from '@walletconnect/web3wallet'
 import useChains from '@/hooks/useChains'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { capitalize } from '@/utils/formatters'
-import { isBlockedBridge, isWarnedBridge } from '@/services/walletconnect/utils'
+import { getPeerName, isBlockedBridge, isWarnedBridge } from '@/services/walletconnect/utils'
 
 const NAME_FALLBACK = 'this dApp'
 const NAME_PLACEHOLDER = '%%name%%'
@@ -54,13 +54,13 @@ export const useCompatibilityWarning = (
 
   return useMemo(() => {
     const { origin } = proposal.verifyContext.verified
-    const { proposer } = proposal.params
 
     let { message, severity } = _getWarning(origin, isUnsupportedChain)
 
     if (message.includes(NAME_PLACEHOLDER)) {
-      message = message.replaceAll(NAME_PLACEHOLDER, proposer.metadata.name || NAME_FALLBACK)
-      if (message.includes(NAME_FALLBACK)) {
+      const name = getPeerName(proposal.params.proposer) || NAME_FALLBACK
+      message = message.replaceAll(NAME_PLACEHOLDER, name)
+      if (message.startsWith(NAME_FALLBACK)) {
         message = capitalize(message)
       }
     }

src/components/walletconnect/WcSessionList/index.tsx

@@ -1,5 +1,6 @@
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
 import useSafeInfo from '@/hooks/useSafeInfo'
+import { getPeerName } from '@/services/walletconnect/utils'
 import { Button, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, Typography } from '@mui/material'
 import type { SessionTypes } from '@walletconnect/types'
 import type { ReactElement } from 'react'
@@ -19,6 +20,7 @@ const WcSessionListItem = ({
   onDisconnect: () => void
 }): ReactElement => {
   const { safeLoaded } = useSafeInfo()
+  const name = getPeerName(session.peer) || 'Unknown dApp'
 
   return (
     <ListItem className={css.sessionListItem}>
@@ -27,10 +29,7 @@ const WcSessionListItem = ({
           <SafeAppIconCard src={session.peer.metadata.icons[0]} alt="icon" width={20} height={20} />
         </ListItemAvatar>
       )}
-      <ListItemText
-        primary={session.peer.metadata.name}
-        primaryTypographyProps={{ color: safeLoaded ? undefined : 'text.secondary' }}
-      />
+      <ListItemText primary={name} primaryTypographyProps={{ color: safeLoaded ? undefined : 'text.secondary' }} />
       <ListItemIcon className={css.sessionListSecondaryAction}>
         <Button variant="danger" onClick={onDisconnect} className={css.button}>
           Disconnect

src/services/walletconnect/WalletConnectContext.tsx

@@ -6,7 +6,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import useSafeWalletProvider from '@/services/safe-wallet-provider/useSafeWalletProvider'
 import WalletConnectWallet from './WalletConnectWallet'
 import { asError } from '../exceptions/utils'
-import { stripEip155Prefix } from './utils'
+import { getPeerName, stripEip155Prefix } from './utils'
 
 const walletConnectSingleton = new WalletConnectWallet()
 
@@ -67,7 +67,7 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
 
         // Get response from Safe Wallet Provider
         return safeWalletProvider.request(event.id, event.params.request, {
-          name: session.peer.metadata.name,
+          name: getPeerName(session.peer) || 'Unknown dApp',
           description: session.peer.metadata.description,
           url: session.peer.metadata.url,
           iconUrl: session.peer.metadata.icons[0],

src/services/walletconnect/utils.ts

@@ -54,3 +54,7 @@ export const isBlockedBridge = (origin: string) => {
 export const isWarnedBridge = (origin: string) => {
   return WarnedBridges.some((bridge) => origin.includes(bridge))
 }
+
+export const getPeerName = (peer: SessionTypes.Struct['peer'] | ProposalTypes.Struct['proposer']): string => {
+  return peer.metadata?.name ?? peer.metadata?.url ?? ''
+}