fix: Revert changes to useTransactionType, TxType and TxInfo

safe-global · Sep 7, 2023 · a8b1df5 · a8b1df5
1 parent 32aa756
commit a8b1df5
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 44 deletions.
diff --git a/src/components/transactions/HumanDescription/styles.module.css b/src/components/transactions/HumanDescription/styles.module.css
@@ -26,6 +26,7 @@
   border-radius: 5px;
   font-size: 14px;
   font-weight: bold;
+  gap: 4px;
 }
 
 .wrapper {

diff --git a/src/components/transactions/TxInfo/index.tsx b/src/components/transactions/TxInfo/index.tsx
@@ -7,10 +7,11 @@ import type {
   MultiSend,
   SettingsChange,
 } from '@safe-global/safe-gateway-typescript-sdk'
-import { SettingsInfoType, TransferDirection } from '@safe-global/safe-gateway-typescript-sdk'
+import { SettingsInfoType } from '@safe-global/safe-gateway-typescript-sdk'
 import TokenAmount from '@/components/common/TokenAmount'
 import {
   isCreationTxInfo,
+  isCustomTxInfo,
   isERC20Transfer,
   isERC721Transfer,
   isMultiSendTxInfo,
@@ -20,7 +21,6 @@ import {
 } from '@/utils/transaction-guards'
 import { ellipsis, shortenAddress } from '@/utils/formatters'
 import { useCurrentChain } from '@/hooks/useChains'
-import EthHashInfo from '@/components/common/EthHashInfo'
 
 export const TransferTx = ({
   info,
@@ -39,7 +39,7 @@ export const TransferTx = ({
   if (isNativeTokenTransfer(transfer)) {
     return (
       <TokenAmount
-        direction={undefined}
+        direction={direction}
         value={transfer.value}
         decimals={nativeCurrency?.decimals}
         tokenSymbol={nativeCurrency?.symbol}
@@ -73,7 +73,7 @@ export const TransferTx = ({
 }
 
 const CustomTx = ({ info }: { info: Custom }): ReactElement => {
-  return <>{!info.humanDescription && info.methodName}</>
+  return <>{info.methodName}</>
 }
 
 const CreationTx = ({ info }: { info: Creation }): ReactElement => {
@@ -83,7 +83,7 @@ const CreationTx = ({ info }: { info: Creation }): ReactElement => {
 const MultiSendTx = ({ info }: { info: MultiSend }): ReactElement => {
   return (
     <>
-      with {info.actionCount} {`action${info.actionCount > 1 ? 's' : ''}`}
+      {info.actionCount} {`action${info.actionCount > 1 ? 's' : ''}`}
     </>
   )
 }
@@ -109,15 +109,11 @@ const TxInfo = ({ info, ...rest }: { info: TransactionInfo; omitSign?: boolean;
   }
 
   if (isTransferTxInfo(info)) {
-    return (
-      <>
-        <TransferTx info={info} {...rest} />
-        <>
-          {info.direction === TransferDirection.OUTGOING ? 'to' : 'from'}
-          <EthHashInfo address={info.recipient.value} avatarSize={16} showName={false} showPrefix={false} />
-        </>
-      </>
-    )
+    return <TransferTx info={info} {...rest} />
+  }
+
+  if (isCustomTxInfo(info)) {
+    return <CustomTx info={info} />
   }
 
   if (isCreationTxInfo(info)) {

diff --git a/src/components/transactions/TxType/index.tsx b/src/components/transactions/TxType/index.tsx
@@ -15,7 +15,7 @@ const TxType = ({ tx }: TxTypeProps) => {
     <Box className={css.txType}>
       <SafeAppIconCard
         src={type.icon}
-        alt="Transaction icon"
+        alt={type.text}
         width={16}
         height={16}
         fallback="/images/transactions/custom.svg"

diff --git a/src/hooks/useTransactionDescription.tsx b/src/hooks/useTransactionDescription.tsx
@@ -16,6 +16,7 @@ import { isCancellationTxInfo, isModuleExecutionInfo, isMultiSendTxInfo } from '
 import useAddressBook from './useAddressBook'
 import type { AddressBook } from '@/store/addressBookSlice'
 import css from '@/components/transactions/TxSummary/styles.module.css'
+import humanDescriptionCss from '@/components/transactions/HumanDescription/styles.module.css'
 import { shortenAddress } from '@/utils/formatters'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import { TransferTx } from '@/components/transactions/TxInfo'
@@ -47,10 +48,12 @@ const TransferDescription = ({ txInfo, isSendTx }: { txInfo: Transfer; isSendTx:
   return (
     <>
       {isSendTx ? 'Send' : 'Receive'}
-      <TransferTx info={txInfo} />
+      <TransferTx info={txInfo} omitSign={true} />
       <>
         {isSendTx ? 'to' : 'from'}
-        <EthHashInfo address={txInfo.recipient.value} avatarSize={16} showName={false} showPrefix={false} />
+        <div className={humanDescriptionCss.address}>
+          <EthHashInfo address={txInfo.recipient.value} name={txInfo.recipient.name} avatarSize={20} />
+        </div>
       </>
     </>
   )

diff --git a/src/hooks/useTransactionType.tsx b/src/hooks/useTransactionType.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useMemo } from 'react'
+import { useMemo } from 'react'
 import {
   SettingsInfoType,
   TransactionInfoType,
@@ -10,7 +10,6 @@ import {
 import { isCancellationTxInfo, isModuleExecutionInfo, isTxQueued } from '@/utils/transaction-guards'
 import useAddressBook from './useAddressBook'
 import type { AddressBook } from '@/store/addressBookSlice'
-import css from '@/components/transactions/TxSummary/styles.module.css'
 
 const getTxTo = ({ txInfo }: Pick<TransactionSummary, 'txInfo'>): AddressEx | undefined => {
   switch (txInfo.type) {
@@ -31,12 +30,12 @@ const getTxTo = ({ txInfo }: Pick<TransactionSummary, 'txInfo'>): AddressEx | un
 
 type TxType = {
   icon: string
-  text: ReactNode
+  text: string
 }
 
 export const getTransactionType = (tx: TransactionSummary, addressBook: AddressBook): TxType => {
   const toAddress = getTxTo(tx)
-  const addressName = addressBook[toAddress?.value || ''] || toAddress?.name
+  const addressBookName = toAddress?.value ? addressBook[toAddress.value] : undefined
 
   switch (tx.txInfo.type) {
     case TransactionInfoType.CREATION: {
@@ -60,7 +59,7 @@ export const getTransactionType = (tx: TransactionSummary, addressBook: AddressB
 
       return {
         icon: '/images/transactions/settings.svg',
-        text: isDeleteGuard ? 'deleteGuard' : tx.txInfo.humanDescription || tx.txInfo.dataDecoded.method,
+        text: isDeleteGuard ? 'deleteGuard' : tx.txInfo.dataDecoded.method,
       }
     }
     case TransactionInfoType.CUSTOM: {
@@ -81,38 +80,19 @@ export const getTransactionType = (tx: TransactionSummary, addressBook: AddressB
       if (tx.safeAppInfo) {
         return {
           icon: tx.safeAppInfo.logoUri || '/images/transactions/custom.svg',
-          text: tx.txInfo.humanDescription ?? (
-            <>
-              {tx.txInfo.methodName ? (
-                <>
-                  <span>Called </span>
-                  <b className={css.method}>{tx.txInfo.methodName}</b>
-                </>
-              ) : (
-                ''
-              )}
-
-              {(addressName ? ' on ' + addressName : '') || (tx.safeAppInfo.name ? ' via ' + tx.safeAppInfo.name : '')}
-            </>
-          ),
+          text: tx.safeAppInfo.name,
         }
       }
 
       return {
         icon: toAddress?.logoUri || '/images/transactions/custom.svg',
-        text: tx.txInfo.humanDescription ?? (
-          <>
-            {addressName || 'Contract interaction'}
-            {tx.txInfo.methodName && ': '}
-            {tx.txInfo.methodName ? <b className={css.method}>{tx.txInfo.methodName}</b> : ''}
-          </>
-        ),
+        text: addressBookName || toAddress?.name || 'Contract interaction',
       }
     }
     default: {
       return {
         icon: '/images/transactions/custom.svg',
-        text: addressName || 'Contract interaction',
+        text: addressBookName || 'Contract interaction',
       }
     }
   }