diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js index cf9e218a4b..be4835960e 100644 --- a/cypress/support/e2e.js +++ b/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) }) }) diff --git a/src/components/dashboard/PendingTxs/PendingTxListItem.tsx b/src/components/dashboard/PendingTxs/PendingTxListItem.tsx index 1ac2855c73..8e05b3b4fc 100644 --- a/src/components/dashboard/PendingTxs/PendingTxListItem.tsx +++ b/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 ( diff --git a/src/components/transactions/TxDetails/index.tsx b/src/components/transactions/TxDetails/index.tsx index 5506754491..97008f38f8 100644 --- a/src/components/transactions/TxDetails/index.tsx +++ b/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( async () => { + trackEvent(TX_LIST_EVENTS.FETCH_DETAILS) + return txDetails || getTransactionDetails(chainId, txSummary.id) }, // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/src/components/transactions/TxSummary/index.tsx b/src/components/transactions/TxSummary/index.tsx index fb640452c6..496d750290 100644 --- a/src/components/transactions/TxSummary/index.tsx +++ b/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 ( { 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 ? ( - ) : tx.txInfo.type === TransactionInfoType.TRANSFER ? ( + ) : tx.txInfo.type === TransactionInfoType.TRANSFER && shouldDisplayHumanDescription ? ( ) : ( type.text diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 9351fa4eff..cc753328ae 100644 --- a/src/pages/_app.tsx +++ b/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 } diff --git a/src/services/analytics/events/txList.ts b/src/services/analytics/events/txList.ts index b2cb84766e..bff4e34bd8 100644 --- a/src/services/analytics/events/txList.ts +++ b/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 = { diff --git a/src/services/tracking/abTesting.ts b/src/services/tracking/abTesting.ts index 60bdc34e31..aae072fac1 100644 --- a/src/services/tracking/abTesting.ts +++ b/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