Feat: display contract names for WalletConnect txs

cypress/fixtures/txhistory_data_data.json

@@ -72,7 +72,7 @@
       "transactionHash": "0xa5dd...b064",
       "safeTxHash": "0x4dd0...b2b8",
       "nativeTransfer": {
-        "title": "native transfer",
+        "title": "Native transfer",
         "description": "Interact with (and send < 0.00001 ETH to)"
       }
     },
@@ -130,7 +130,7 @@
       }
     },
     "deleteSpendingLimit": {
-      "title": "Contract interaction",
+      "title": "disableModule",
       "summaryTxInfo": "deleteAllowance",
       "summaryTime": "11:08 AM",
       "description": "Delete spending limit",

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

src/components/safe-messages/MsgSummary/index.tsx

@@ -11,6 +11,7 @@ import TxConfirmations from '@/components/transactions/TxConfirmations'
 
 import css from '@/components/transactions/TxSummary/styles.module.css'
 import useIsSafeMessagePending from '@/hooks/messages/useIsSafeMessagePending'
+import { isEIP712TypedData } from '@/utils/safe-messages'
 
 const getStatusColor = (value: SafeMessageStatus, palette: Palette): string => {
   switch (value) {
@@ -28,14 +29,18 @@ const MsgSummary = ({ msg }: { msg: SafeMessage }): ReactElement => {
   const txStatusLabel = useSafeMessageStatus(msg)
   const isConfirmed = msg.status === SafeMessageStatus.CONFIRMED
   const isPending = useIsSafeMessagePending(msg.messageHash)
+  let type = ''
+  if (isEIP712TypedData(msg.message)) {
+    type = (msg.message as unknown as { primaryType: string }).primaryType
+  }
 
   return (
     <Box className={css.gridContainer}>
       <Box gridArea="type">
         <MsgType msg={msg} />
       </Box>
 
-      <Box gridArea="info">Off-chain signature</Box>
+      <Box gridArea="info">{type || 'Signature'}</Box>
 
       <Box gridArea="date" className={css.date}>
         <DateTime value={msg.modifiedTimestamp} />

src/components/safe-messages/MsgType/index.tsx

@@ -4,8 +4,25 @@ import type { SafeMessage } from '@safe-global/safe-gateway-typescript-sdk'
 import ImageFallback from '@/components/common/ImageFallback'
 
 import txTypeCss from '@/components/transactions/TxType/styles.module.css'
+import { isEIP712TypedData } from '@/utils/safe-messages'
 
 const FALLBACK_LOGO_URI = '/images/transactions/custom.svg'
+const MAX_TRIMMED_LENGTH = 20
+
+const getMessageName = (msg: SafeMessage) => {
+  if (msg.name != null) return msg.name
+
+  if (isEIP712TypedData(msg.message)) {
+    return msg.message.domain?.name || ''
+  }
+
+  const firstLine = msg.message.split('\n')[0]
+  let trimmed = firstLine.slice(0, MAX_TRIMMED_LENGTH)
+  if (trimmed.length < firstLine.length) {
+    trimmed += '…'
+  }
+  return trimmed
+}
 
 const MsgType = ({ msg }: { msg: SafeMessage }) => {
   return (
@@ -17,7 +34,7 @@ const MsgType = ({ msg }: { msg: SafeMessage }) => {
         width={16}
         height={16}
       />
-      {msg.name}
+      {getMessageName(msg)}
     </Box>
   )
 }

src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.test.tsx

@@ -28,7 +28,7 @@ describe('SingleTxDecoded', () => {
       />,
     )
 
-    expect(result.queryByText('native transfer')).not.toBeNull()
+    expect(result.queryByText('Native transfer')).not.toBeNull()
   })
 
   it('should show unknown contract interactions', () => {
@@ -52,7 +52,7 @@ describe('SingleTxDecoded', () => {
       />,
     )
 
-    expect(result.queryByText('Unknown contract interaction')).not.toBeNull()
+    expect(result.queryByText('Contract interaction')).not.toBeNull()
   })
 
   it('should show decoded data ', () => {

src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx

@@ -36,7 +36,7 @@ export const SingleTxDecoded = ({
 }: SingleTxDecodedProps) => {
   const chain = useCurrentChain()
   const isNativeTransfer = tx.value !== '0' && (!tx.data || isEmptyHexData(tx.data))
-  const method = tx.dataDecoded?.method || (isNativeTransfer ? 'native transfer' : 'Unknown contract interaction')
+  const method = tx.dataDecoded?.method || (isNativeTransfer ? 'Native transfer' : 'Contract interaction')
   const { decimals, symbol } = chain?.nativeCurrency || {}
   const amount = tx.value ? formatVisualAmount(tx.value, decimals) : 0
 

src/config/constants.ts

@@ -65,15 +65,6 @@ export enum SafeAppsTag {
   ONRAMP = 'onramp',
 }
 
-export const WC_APP_PROD = {
-  id: 111,
-  url: 'https://apps-portal.safe.global/wallet-connect',
-}
-export const WC_APP_DEV = {
-  id: 25,
-  url: 'https://safe-apps.dev.5afe.dev/wallet-connect',
-}
-
 // Help Center
 export const HELP_CENTER_URL = 'https://help.safe.global'
 export const HelpCenterArticle = {

src/features/walletconnect/__tests__/WalletConnectContext.test.tsx

@@ -410,10 +410,10 @@ describe('WalletConnectProvider', () => {
         1,
         { method: 'fake', params: [] },
         {
-          id: 25,
+          id: -1,
           name: 'name',
           description: 'description',
-          url: 'https://safe-apps.dev.5afe.dev/wallet-connect',
+          url: 'https://apps-portal.safe.global/wallet-connect',
           iconUrl: 'iconUrl',
         },
       )

src/features/walletconnect/components/WalletConnectProvider/index.tsx

@@ -5,7 +5,7 @@ import { formatJsonRpcError } from '@walletconnect/jsonrpc-utils'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import useSafeWalletProvider from '@/services/safe-wallet-provider/useSafeWalletProvider'
 import { asError } from '@/services/exceptions/utils'
-import { IS_PRODUCTION, WC_APP_DEV, WC_APP_PROD } from '@/config/constants'
+import { IS_PRODUCTION } from '@/config/constants'
 import { getPeerName, stripEip155Prefix } from '@/features/walletconnect/services/utils'
 import { trackRequest } from '@/features/walletconnect//services/tracking'
 import { wcPopupStore } from '@/features/walletconnect/components'
@@ -23,8 +23,6 @@ export enum WCLoadingState {
   DISCONNECT = 'Disconnect',
 }
 
-const WalletConnectSafeApp = IS_PRODUCTION ? WC_APP_PROD : WC_APP_DEV
-
 const walletConnectSingleton = new WalletConnectWallet()
 
 const getWrongChainError = (dappName: string): Error => {
@@ -90,9 +88,9 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
 
         // Get response from Safe Wallet Provider
         return safeWalletProvider.request(event.id, event.params.request, {
-          id: WalletConnectSafeApp.id,
-          url: WalletConnectSafeApp.url,
-          name: getPeerName(session.peer) || 'Unknown dApp',
+          id: -1,
+          url: session.peer.metadata.url,
+          name: getPeerName(session.peer) || 'WalletConnect',
           description: session.peer.metadata.description,
           iconUrl: session.peer.metadata.icons[0],
         })

src/pages/apps/open.tsx

@@ -17,8 +17,6 @@ import { AppRoutes } from '@/config/routes'
 import { getOrigin } from '@/components/safe-apps/utils'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
-import { openWalletConnect } from '@/features/walletconnect/components'
-import { isWalletConnectSafeApp } from '@/utils/gateway'
 
 const SafeApps: NextPage = () => {
   const chainId = useChainId()
@@ -28,7 +26,6 @@ const SafeApps: NextPage = () => {
   const safeAppData = allSafeApps.find((app) => app.url === appUrl)
   const { safeApp, isLoading } = useSafeAppFromManifest(appUrl || '', chainId, safeAppData)
   const isSafeAppsEnabled = useHasFeature(FEATURES.SAFE_APPS)
-  const isWalletConnectEnabled = useHasFeature(FEATURES.NATIVE_WALLETCONNECT)
 
   const { addPermissions, getPermissions, getAllowedFeaturesList } = useBrowserPermissions()
   const origin = getOrigin(appUrl)
@@ -58,12 +55,6 @@ const SafeApps: NextPage = () => {
   // appUrl is required to be present
   if (!isSafeAppsEnabled || !appUrl || !router.isReady) return null
 
-  if (isWalletConnectEnabled && isWalletConnectSafeApp(appUrl)) {
-    openWalletConnect()
-    goToList()
-    return null
-  }
-
   if (isModalVisible) {
     return (
       <SafeAppsInfoModal

src/services/analytics/__tests__/tx-tracking.test.ts

@@ -138,14 +138,12 @@ describe('getTransactionTrackingType', () => {
     expect(txType).toEqual(TX_TYPES.rejection)
   })
 
-  it('should return walletconnect for walletconnect transactions', async () => {
+  it('should return walletconnect for transactions w/o safeAppInfo', async () => {
     const txType = await getMockTxType({
       txInfo: {
         type: TransactionInfoType.CUSTOM,
       },
-      safeAppInfo: {
-        url: 'https://safe-apps.dev.5afe.dev/wallet-connect',
-      },
+      safeAppInfo: null,
     } as unknown)
 
     expect(txType).toEqual(TX_TYPES.walletconnect)
@@ -175,14 +173,4 @@ describe('getTransactionTrackingType', () => {
 
     expect(txType).toEqual(TX_TYPES.batch)
   })
-
-  it('should return custom for unknown transactions', async () => {
-    const txType = await getMockTxType({
-      txInfo: {
-        type: TransactionInfoType.CUSTOM,
-      },
-    } as unknown)
-
-    expect(txType).toEqual(TX_TYPES.custom)
-  })
 })

src/services/analytics/tx-tracking.ts

@@ -1,6 +1,5 @@
 import { TX_TYPES } from '@/services/analytics/events/transactions'
 import { getTxDetails } from '@/services/transactions'
-import { isWalletConnectSafeApp } from '@/utils/gateway'
 import { SettingsInfoType, type TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import {
   isERC721Transfer,
@@ -63,12 +62,14 @@ export const getTransactionTrackingType = async (chainId: string, txId: string):
     }
 
     if (details.safeAppInfo) {
-      return isWalletConnectSafeApp(details.safeAppInfo.url) ? TX_TYPES.walletconnect : details.safeAppInfo.url
+      return details.safeAppInfo.url
     }
 
     if (isMultiSendTxInfo(txInfo)) {
       return TX_TYPES.batch
     }
+
+    return TX_TYPES.walletconnect
   }
 
   return TX_TYPES.custom

src/utils/gateway.ts

@@ -1,6 +1,5 @@
 import type { JsonRpcSigner } from 'ethers'
 import { type ChainInfo, deleteTransaction } from '@safe-global/safe-gateway-typescript-sdk'
-import { WC_APP_PROD, WC_APP_DEV } from '@/config/constants'
 import { signTypedData } from './web3'
 
 export const _replaceTemplate = (uri: string, data: Record<string, string>): string => {
@@ -30,10 +29,6 @@ export const getExplorerLink = (
   return { href, title }
 }
 
-export const isWalletConnectSafeApp = (url: string): boolean => {
-  return url === WC_APP_PROD.url || url === WC_APP_DEV.url
-}
-
 const signTxServiceMessage = async (
   chainId: string,
   safeAddress: string,