fix: Add AB test for human-readable transactions

cypress/support/e2e.js

@@ -28,5 +28,7 @@ import './safe-apps-commands'
 before(() => {
   cy.on('window:before:load', (window) => {
     window.localStorage.setItem('SAFE_v2__show_terms', false)
+    // So that tests that rely on this feature don't randomly fail
+    window.localStorage.setItem('SAFE_v2__AB_human-readable', true)
   })
 })

src/components/dashboard/PendingTxs/PendingTxListItem.tsx

@@ -16,6 +16,8 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import useWallet from '@/hooks/wallets/useWallet'
 import SignTxButton from '@/components/transactions/SignTxButton'
 import ExecuteTxButton from '@/components/transactions/ExecuteTxButton'
+import useABTesting from '@/services/tracking/useAbTesting'
+import { AbTest } from '@/services/tracking/abTesting'
 
 type PendingTxType = {
   transaction: TransactionSummary
@@ -26,6 +28,7 @@ const PendingTx = ({ transaction }: PendingTxType): ReactElement => {
   const { id } = transaction
   const { safe } = useSafeInfo()
   const wallet = useWallet()
+  const shouldDisplayHumanDescription = useABTesting(AbTest.HUMAN_DESCRIPTION)
   const canSign = wallet ? isSignableBy(transaction, wallet.address) : false
   const canExecute = wallet ? isExecutable(transaction, wallet?.address, safe) : false
 
@@ -40,7 +43,9 @@ const PendingTx = ({ transaction }: PendingTxType): ReactElement => {
     [router, id],
   )
 
-  const displayInfo = !transaction.txInfo.richDecodedInfo && transaction.txInfo.type !== TransactionInfoType.TRANSFER
+  const displayInfo =
+    (!transaction.txInfo.richDecodedInfo && transaction.txInfo.type !== TransactionInfoType.TRANSFER) ||
+    !shouldDisplayHumanDescription
 
   return (
     <NextLink href={url} passHref>

src/components/transactions/TxDetails/index.tsx

@@ -29,6 +29,7 @@ import { DelegateCallWarning, UnsignedWarning } from '@/components/transactions/
 import Multisend from '@/components/transactions/TxDetails/TxData/DecodedData/Multisend'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import useIsPending from '@/hooks/useIsPending'
+import { trackEvent, TX_LIST_EVENTS } from '@/services/analytics'
 
 export const NOT_AVAILABLE = 'n/a'
 
@@ -125,6 +126,8 @@ const TxDetails = ({
 
   const [txDetailsData, error, loading] = useAsync<TransactionDetails>(
     async () => {
+      trackEvent(TX_LIST_EVENTS.FETCH_DETAILS)
+
       return txDetails || getTransactionDetails(chainId, txSummary.id)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/components/transactions/TxSummary/index.tsx

@@ -15,6 +15,8 @@ import useTransactionStatus from '@/hooks/useTransactionStatus'
 import TxType from '@/components/transactions/TxType'
 import TxConfirmations from '../TxConfirmations'
 import useIsPending from '@/hooks/useIsPending'
+import useABTesting from '@/services/tracking/useAbTesting'
+import { AbTest } from '@/services/tracking/abTesting'
 
 const getStatusColor = (value: TransactionStatus, palette: Palette) => {
   switch (value) {
@@ -41,6 +43,7 @@ const TxSummary = ({ item, isGrouped }: TxSummaryProps): ReactElement => {
   const wallet = useWallet()
   const txStatusLabel = useTransactionStatus(tx)
   const isPending = useIsPending(tx.id)
+  const shouldDisplayHumanDescription = useABTesting(AbTest.HUMAN_DESCRIPTION)
   const isQueue = isTxQueued(tx.txStatus)
   const awaitingExecution = isAwaitingExecution(tx.txStatus)
   const nonce = isMultisigExecutionInfo(tx.executionInfo) ? tx.executionInfo.nonce : undefined
@@ -52,7 +55,8 @@ const TxSummary = ({ item, isGrouped }: TxSummaryProps): ReactElement => {
     : undefined
 
   const displayConfirmations = isQueue && !!submittedConfirmations && !!requiredConfirmations
-  const displayInfo = !tx.txInfo.richDecodedInfo && tx.txInfo.type !== TransactionInfoType.TRANSFER
+  const displayInfo =
+    (!tx.txInfo.richDecodedInfo && tx.txInfo.type !== TransactionInfoType.TRANSFER) || !shouldDisplayHumanDescription
 
   return (
     <Box

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

@@ -14,11 +14,11 @@
 }
 
 .columnTemplateShort {
-  grid-template-columns: minmax(50px, 0.25fr) minmax(150px, 4fr) minmax(200px, 2fr) 1fr minmax(60px, 0.5fr) minmax(
+  grid-template-columns: minmax(50px, 0.25fr) minmax(150px, 4fr) 0fr minmax(200px, 2fr) 1fr minmax(60px, 0.5fr) minmax(
       170px,
       1fr
     );
-  grid-template-areas: 'nonce type date confirmations actions status';
+  grid-template-areas: 'nonce type empty date confirmations actions status';
 }
 
 .columnTemplateTxHistory {
@@ -27,8 +27,8 @@
 }
 
 .columnTemplateTxHistoryShort {
-  grid-template-columns: minmax(50px, 0.25fr) 6fr 0.75fr 0.5fr;
-  grid-template-areas: 'nonce type date status';
+  grid-template-columns: minmax(50px, 0.25fr) 6fr 0fr 0.75fr 0.5fr;
+  grid-template-areas: 'nonce type empty date status';
 }
 
 .columnWrap {

src/components/transactions/TxType/index.tsx

@@ -5,13 +5,16 @@ import { Box } from '@mui/material'
 import css from './styles.module.css'
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
 import { HumanDescription, TransferDescription } from '@/components/transactions/HumanDescription'
+import useABTesting from '@/services/tracking/useAbTesting'
+import { AbTest } from '@/services/tracking/abTesting'
 
 type TxTypeProps = {
   tx: TransactionSummary
 }
 
 const TxType = ({ tx }: TxTypeProps) => {
   const type = useTransactionType(tx)
+  const shouldDisplayHumanDescription = useABTesting(AbTest.HUMAN_DESCRIPTION)
 
   const humanDescription = tx.txInfo.richDecodedInfo?.fragments
 
@@ -24,9 +27,9 @@ const TxType = ({ tx }: TxTypeProps) => {
         height={16}
         fallback="/images/transactions/custom.svg"
       />
-      {humanDescription ? (
+      {humanDescription && shouldDisplayHumanDescription ? (
         <HumanDescription fragments={humanDescription} />
-      ) : tx.txInfo.type === TransactionInfoType.TRANSFER ? (
+      ) : tx.txInfo.type === TransactionInfoType.TRANSFER && shouldDisplayHumanDescription ? (
         <TransferDescription isSendTx={tx.txInfo.direction === TransferDirection.OUTGOING} txInfo={tx.txInfo} />
       ) : (
         type.text

src/pages/_app.tsx

@@ -37,6 +37,8 @@ import useSafeMessageNotifications from '@/hooks/messages/useSafeMessageNotifica
 import useSafeMessagePendingStatuses from '@/hooks/messages/useSafeMessagePendingStatuses'
 import useChangedValue from '@/hooks/useChangedValue'
 import { TxModalProvider } from '@/components/tx-flow'
+import useABTesting from '@/services/tracking/useAbTesting'
+import { AbTest } from '@/services/tracking/abTesting'
 import { useNotificationTracking } from '@/components/settings/PushNotifications/hooks/useNotificationTracking'
 
 const GATEWAY_URL = IS_PRODUCTION || cgwDebugStorage.get() ? GATEWAY_URL_PRODUCTION : GATEWAY_URL_STAGING
@@ -59,6 +61,7 @@ const InitApp = (): null => {
   useTxTracking()
   useSafeMsgTracking()
   useBeamer()
+  useABTesting(AbTest.HUMAN_DESCRIPTION)
 
   return null
 }

src/services/analytics/events/txList.ts

@@ -40,6 +40,10 @@ export const TX_LIST_EVENTS = {
     action: 'Batch Execute',
     category: TX_LIST_CATEGORY,
   },
+  FETCH_DETAILS: {
+    action: 'Fetch transaction details',
+    category: TX_LIST_CATEGORY,
+  },
 }
 
 export const MESSAGE_EVENTS = {

src/services/tracking/abTesting.ts

@@ -1,7 +1,9 @@
 /**
  * Holds current A/B test identifiers.
  */
-export const enum AbTest {}
+export const enum AbTest {
+  HUMAN_DESCRIPTION = 'human-readable',
+}
 
 let _abTest: AbTest | null = null