feat: Human-readable v2

cypress/e2e/smoke/batch_tx.cy.js

@@ -51,8 +51,8 @@ describe('Create batch transaction', () => {
     cy.contains('Confirm batch').click()
     cy.contains(`This batch contains ${transactionsInBatchList} transactions`).should('be.visible')
     cy.contains(funds_first_tx).parents('ul').as('TransactionList')
-    cy.get('@TransactionList').find('li').eq(0).find('span').eq(0).contains(funds_first_tx)
-    cy.get('@TransactionList').find('li').eq(1).find('span').eq(0).contains(funds_second_tx)
+    cy.get('@TransactionList').find('li').eq(0).find('strong').eq(0).contains(funds_first_tx)
+    cy.get('@TransactionList').find('li').eq(1).find('strong').eq(0).contains(funds_second_tx)
   })
 
   it('Should remove a transaction from the batch', () => {

cypress/e2e/smoke/dashboard.cy.js

@@ -35,7 +35,10 @@ describe('Dashboard', () => {
       cy.contains('This Safe has no queued transactions').should('not.exist')
 
       // Queued txns
-      cy.contains(`a[href^="/transactions/tx?id=multisig_0x"]`, '13' + 'Send' + '-0.00002 GOR' + '1/1').should('exist')
+      cy.contains(
+        `a[href^="/transactions/tx?id=multisig_0x"]`,
+        '13' + 'Send' + '0.00002 GOR' + 'to' + 'gor:0xE297...9665' + '1/1',
+      ).should('exist')
 
       cy.contains(`a[href="/transactions/queue?safe=${encodeURIComponent(SAFE)}"]`, 'View all')
     })

cypress/e2e/smoke/tx_history.cy.js

@@ -1,7 +1,7 @@
 const SAFE = 'gor:0x97d314157727D517A706B5D08507A1f9B44AaaE9'
 
-const INCOMING = 'Received'
-const OUTGOING = 'Sent'
+const INCOMING = 'Receive'
+const OUTGOING = 'Send'
 const CONTRACT_INTERACTION = 'Contract interaction'
 
 describe('Transaction history', () => {
@@ -32,11 +32,11 @@ describe('Transaction history', () => {
       .within(() => {
         // Type
         cy.get('img').should('have.attr', 'alt', INCOMING)
-        cy.contains('div', 'Received').should('exist')
+        cy.contains('div', INCOMING).should('exist')
 
         // Info
         cy.get('img[alt="GOR"]').should('be.visible')
-        cy.contains('span', '0.25 GOR').should('exist')
+        cy.contains('0.25 GOR').should('exist')
 
         // Time
         cy.contains('span', '4:56 PM').should('exist')
@@ -73,10 +73,12 @@ describe('Transaction history', () => {
         // Type
         // TODO: update next line after fixing the logo
         // cy.find('img').should('have.attr', 'src').should('include', WRAPPED_ETH)
-        cy.contains('div', 'Wrapped Ether').should('exist')
+        cy.contains('div', 'WETH').should('exist')
+
+        cy.contains('div', 'unlimited').should('exist')
 
         // Info
-        cy.contains('div', 'approve').should('exist')
+        cy.contains('div', 'Approve').should('exist')
 
         // Time
         cy.contains('span', '5:00 PM').should('exist')
@@ -91,7 +93,7 @@ describe('Transaction history', () => {
         cy.contains('2')
 
         // Type
-        cy.contains('div', 'Contract interaction').should('exist')
+        cy.contains('div', 'setPreSignature').should('exist')
 
         // Time
         cy.contains('span', '5:01 PM').should('exist')
@@ -104,10 +106,10 @@ describe('Transaction history', () => {
       .within(() => {
         // Type
         cy.get('img').should('have.attr', 'alt', OUTGOING)
-        cy.contains('div', 'Sent').should('exist')
+        cy.contains('div', 'Send').should('exist')
 
         // Info
-        cy.contains('span', '-0.11 WETH').should('exist')
+        cy.contains('0.11 WETH').should('exist')
 
         // Time
         cy.contains('span', '5:01 PM').should('exist')
@@ -119,10 +121,10 @@ describe('Transaction history', () => {
       .prev()
       .within(() => {
         // Type
-        cy.contains('div', 'Received').should('exist')
+        cy.contains('div', 'Receive').should('exist')
 
         // Info
-        cy.contains('span', '120,497.61 DAI').should('exist')
+        cy.contains('120,497.61 DAI').should('exist')
 
         // Time
         cy.contains('span', '5:01 PM').should('exist')

jest.config.cjs

@@ -15,6 +15,9 @@ const customJestConfig = {
   },
   testEnvironment: 'jest-environment-jsdom',
   testEnvironmentOptions: { url: 'http://localhost/balances?safe=rin:0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A' },
+  globals: {
+    fetch: global.fetch
+  }
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

package.json

@@ -29,7 +29,7 @@
     "static-serve": "yarn build && yarn serve"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "pre-commit": [
     "lint"
@@ -52,7 +52,7 @@
     "@safe-global/safe-core-sdk-utils": "^1.7.4",
     "@safe-global/safe-deployments": "1.25.0",
     "@safe-global/safe-ethers-lib": "^1.9.4",
-    "@safe-global/safe-gateway-typescript-sdk": "^3.9.0",
+    "@safe-global/safe-gateway-typescript-sdk": "^3.12.0",
     "@safe-global/safe-modules-deployments": "^1.0.0",
     "@safe-global/safe-react-components": "^2.0.6",
     "@sentry/react": "^7.28.1",

src/components/batch/BatchSidebar/BatchTxItem.tsx

@@ -3,15 +3,14 @@ import { Accordion, AccordionDetails, AccordionSummary, Box, ButtonBase, ListIte
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import css from './styles.module.css'
 import { type DraftBatchItem } from '@/store/batchSlice'
-import TxType from '@/components/transactions/TxType'
-import TxInfo from '@/components/transactions/TxInfo'
 import DeleteIcon from '@/public/images/common/delete.svg'
 import DragIcon from '@/public/images/common/drag.svg'
 import TxData from '@/components/transactions/TxDetails/TxData'
 import { MethodDetails } from '@/components/transactions/TxDetails/TxData/DecodedData/MethodDetails'
 import { TxDataRow } from '@/components/transactions/TxDetails/Summary/TxDataRow'
 import { dateString } from '@/utils/formatters'
 import { BATCH_EVENTS, trackEvent } from '@/services/analytics'
+import { TxDescription } from '@/components/transactions/TxSummary'
 
 type BatchTxItemProps = DraftBatchItem & {
   id: string
@@ -73,10 +72,8 @@ const BatchTxItem = ({
               />
             )}
 
-            <TxType tx={txSummary} />
-
             <Box flex={1}>
-              <TxInfo info={txDetails.txInfo} />
+              <TxDescription tx={txSummary} />
             </Box>
 
             {onDelete && (

src/components/common/TokenAmount/index.tsx

@@ -4,6 +4,7 @@ import css from './styles.module.css'
 import { formatVisualAmount } from '@/utils/formatters'
 import TokenIcon from '../TokenIcon'
 import classNames from 'classnames'
+import hdCss from '@/components/transactions/HumanDescription/styles.module.css'
 
 const TokenAmount = ({
   value,
@@ -12,23 +13,25 @@ const TokenAmount = ({
   tokenSymbol,
   direction,
   fallbackSrc,
+  size,
 }: {
   value: string
   decimals?: number
   logoUri?: string
   tokenSymbol?: string
   direction?: TransferDirection
   fallbackSrc?: string
+  size?: number
 }): ReactElement => {
   const sign = direction === TransferDirection.OUTGOING ? '-' : ''
   const amount = decimals ? formatVisualAmount(value, decimals) : value
 
   return (
-    <span className={classNames(css.container, { [css.verticalAlign]: logoUri })}>
-      {logoUri && <TokenIcon logoUri={logoUri} tokenSymbol={tokenSymbol} fallbackSrc={fallbackSrc} />}
+    <strong className={classNames(css.container, { [css.verticalAlign]: logoUri, [hdCss.method]: logoUri })}>
+      {logoUri && <TokenIcon logoUri={logoUri} tokenSymbol={tokenSymbol} fallbackSrc={fallbackSrc} size={size} />}
       {sign}
       {amount} {tokenSymbol}
-    </span>
+    </strong>
   )
 }
 

src/components/dashboard/PendingTxs/PendingTxListItem.tsx

@@ -6,11 +6,10 @@ import ChevronRight from '@mui/icons-material/ChevronRight'
 import type { TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
 import { Box, SvgIcon, Typography } from '@mui/material'
 import { isMultisigExecutionInfo } from '@/utils/transaction-guards'
-import TxInfo from '@/components/transactions/TxInfo'
-import TxType from '@/components/transactions/TxType'
 import css from './styles.module.css'
 import OwnersIcon from '@/public/images/common/owners.svg'
 import { AppRoutes } from '@/config/routes'
+import { TxDescription } from '@/components/transactions/TxSummary'
 
 type PendingTxType = {
   transaction: TransactionSummary
@@ -37,11 +36,7 @@ const PendingTx = ({ transaction }: PendingTxType): ReactElement => {
         {isMultisigExecutionInfo(transaction.executionInfo) && transaction.executionInfo.nonce}
 
         <Box flex={1}>
-          <TxType tx={transaction} />
-        </Box>
-
-        <Box flex={1} className={css.txInfo}>
-          <TxInfo info={transaction.txInfo} />
+          <TxDescription tx={transaction} />
         </Box>
 
         {isMultisigExecutionInfo(transaction.executionInfo) ? (

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

@@ -3,13 +3,13 @@ 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 css from './styles.module.css'
 
 const FALLBACK_LOGO_URI = '/images/transactions/custom.svg'
 
 const MsgType = ({ msg }: { msg: SafeMessage }) => {
   return (
-    <Box className={txTypeCss.txType}>
+    <Box className={css.type}>
       <ImageFallback
         src={msg.logoUri || FALLBACK_LOGO_URI}
         fallbackSrc={FALLBACK_LOGO_URI}

src/components/transactions/TxType/styles.module.css → src/components/safe-messages/MsgType/styles.module.css

@@ -1,4 +1,4 @@
-.txType {
+.type {
   display: flex;
   align-items: center;
   gap: var(--space-1);

src/components/transactions/HumanDescription/index.tsx

@@ -0,0 +1,50 @@
+import {
+  type RichAddressFragment,
+  type RichDecodedInfo,
+  type RichTokenValueFragment,
+  RichFragmentType,
+} from '@safe-global/safe-gateway-typescript-sdk/dist/types/human-description'
+import EthHashInfo from '@/components/common/EthHashInfo'
+import css from './styles.module.css'
+import useAddressBook from '@/hooks/useAddressBook'
+import TokenAmount from '@/components/common/TokenAmount'
+import React from 'react'
+
+const AddressFragment = ({ fragment }: { fragment: RichAddressFragment }) => {
+  const addressBook = useAddressBook()
+
+  return (
+    <div className={css.address}>
+      <EthHashInfo address={fragment.value} name={addressBook[fragment.value]} avatarSize={20} />
+    </div>
+  )
+}
+
+const TokenValueFragment = ({ fragment }: { fragment: RichTokenValueFragment }) => {
+  return (
+    <TokenAmount
+      value={fragment.value}
+      direction={undefined}
+      logoUri={fragment.logoUri || undefined}
+      tokenSymbol={fragment.symbol || undefined}
+      size={20}
+    />
+  )
+}
+
+export const HumanDescription = ({ fragments }: RichDecodedInfo) => {
+  return (
+    <>
+      {fragments.map((fragment) => {
+        switch (fragment.type) {
+          case RichFragmentType.Text:
+            return <span>{fragment.value}</span>
+          case RichFragmentType.Address:
+            return <AddressFragment fragment={fragment} />
+          case RichFragmentType.TokenValue:
+            return <TokenValueFragment fragment={fragment} />
+        }
+      })}
+    </>
+  )
+}

src/components/transactions/HumanDescription/styles.module.css

@@ -0,0 +1,30 @@
+.summary {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+}
+
+/* TODO: This is a workaround to hide address in case there is a title */
+.address div[title] + div {
+  display: none;
+}
+
+.value {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  gap: 4px;
+}
+
+.method {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}

src/components/transactions/SingleTx/SingleTx.test.tsx

@@ -52,7 +52,7 @@ describe('SingleTx', () => {
     const button = screen.queryByText('Details')
     expect(button).not.toBeInTheDocument()
 
-    expect(await screen.findByText('Contract interaction')).toBeInTheDocument()
+    expect(await screen.findByText('Interact with')).toBeInTheDocument()
   })
 
   it('shows an error when the transaction has failed to load', async () => {