fix: Remove human description from dashboard due to lack of space (#2547

)
safe-global · Sep 26, 2023 · 019ecae · 019ecae
1 parent e13f87b
commit 019ecae
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 23 deletions.
diff --git a/cypress/e2e/pages/dashboard.pages.js b/cypress/e2e/pages/dashboard.pages.js
@@ -45,10 +45,8 @@ export function verifyTxQueueWidget() {
     cy.contains(noTransactionStr).should('not.exist')
 
     // Queued txns
-    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/tx?id=multisig_0x"]`, '13' + 'Send' + '-0.00002 GOR' + '1/1').should('exist')
+
     cy.contains(`a[href="${constants.transactionQueueUrl}${encodeURIComponent(constants.TEST_SAFE)}"]`, viewAllStr)
   })
 }

diff --git a/src/components/dashboard/PendingTxs/PendingTxListItem.tsx b/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
@@ -2,7 +2,6 @@ import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import type { ReactElement } from 'react'
 import { useMemo } from 'react'
-import { TransactionInfoType } from '@safe-global/safe-gateway-typescript-sdk'
 import ChevronRight from '@mui/icons-material/ChevronRight'
 import type { TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
 import { Box, SvgIcon, Typography } from '@mui/material'
@@ -16,8 +15,6 @@ 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
@@ -28,7 +25,6 @@ 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
 
@@ -43,24 +39,18 @@ const PendingTx = ({ transaction }: PendingTxType): ReactElement => {
     [router, id],
   )
 
-  const displayInfo =
-    (!transaction.txInfo.richDecodedInfo && transaction.txInfo.type !== TransactionInfoType.TRANSFER) ||
-    !shouldDisplayHumanDescription
-
   return (
     <NextLink href={url} passHref>
       <Box className={css.container}>
         {isMultisigExecutionInfo(transaction.executionInfo) && transaction.executionInfo.nonce}
 
         <Box flex={1}>
-          <TxType tx={transaction} />
+          <TxType tx={transaction} short={true} />
         </Box>
 
-        {displayInfo && (
-          <Box flex={1} className={css.txInfo}>
-            <TxInfo info={transaction.txInfo} />
-          </Box>
-        )}
+        <Box flex={1} className={css.txInfo}>
+          <TxInfo info={transaction.txInfo} />
+        </Box>
 
         {isMultisigExecutionInfo(transaction.executionInfo) ? (
           <Box className={css.confirmationsCount}>

diff --git a/src/components/transactions/TxType/index.tsx b/src/components/transactions/TxType/index.tsx
@@ -10,9 +10,10 @@ import { AbTest } from '@/services/tracking/abTesting'
 
 type TxTypeProps = {
   tx: TransactionSummary
+  short?: boolean
 }
 
-const TxType = ({ tx }: TxTypeProps) => {
+const TxType = ({ tx, short = false }: TxTypeProps) => {
   const type = useTransactionType(tx)
   const shouldDisplayHumanDescription = useABTesting(AbTest.HUMAN_DESCRIPTION)
 
@@ -27,9 +28,9 @@ const TxType = ({ tx }: TxTypeProps) => {
         height={16}
         fallback="/images/transactions/custom.svg"
       />
-      {humanDescription && shouldDisplayHumanDescription ? (
+      {humanDescription && shouldDisplayHumanDescription && !short ? (
         <HumanDescription fragments={humanDescription} />
-      ) : tx.txInfo.type === TransactionInfoType.TRANSFER && shouldDisplayHumanDescription ? (
+      ) : tx.txInfo.type === TransactionInfoType.TRANSFER && shouldDisplayHumanDescription && !short ? (
         <TransferDescription isSendTx={tx.txInfo.direction === TransferDirection.OUTGOING} txInfo={tx.txInfo} />
       ) : (
         type.text

diff --git a/src/services/analytics/useGtm.ts b/src/services/analytics/useGtm.ts
@@ -71,8 +71,7 @@ const useGtm = () => {
     gtmSetSafeAddress(safeAddress)
   }, [safeAddress])
 
-  // Track page views – anononimized by default.
-  // Sensitive info, like the safe address or tx id, is always in the query string, which we DO NOT track.
+  // Track page views – anonymized by default.
   useEffect(() => {
     // Don't track 404 because it's not a real page, it immediately does a client-side redirect
     if (router.pathname === AppRoutes['404']) return