[Transaction List v2] - "Send to" action missing (#1879)

* show missing `Send to`s sentences

* remove "Send To", from 'spending limit' transactions details

src/routes/safe/components/Transactions/GatewayTransactions/MethodDetails.tsx

@@ -4,18 +4,8 @@ import styled from 'styled-components'
 
 import { DataDecoded } from 'src/logic/safe/store/models/types/gateway.d'
 import { isArrayParameter } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
-import {
-  DeleteSpendingLimitDetails,
-  isDeleteAllowance,
-  isSetAllowance,
-  ModifySpendingLimitDetails,
-} from 'src/routes/safe/components/Transactions/GatewayTransactions/SpendingLimitDetails'
 import Value from 'src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value'
 
-const TxDetailsMethodName = styled(Text)`
-  text-indent: 4px;
-`
-
 const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`
   padding-left: 24px;
   display: ${({ isArrayParameter }) => (isArrayParameter ? 'block' : 'flex')};
@@ -27,7 +17,7 @@ const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`
 `
 
 const TxInfo = styled.div`
-  padding: 8px 8px 8px 16px;
+  padding: 8px 0;
 `
 
 const StyledMethodName = styled(Text)`
@@ -35,21 +25,11 @@ const StyledMethodName = styled(Text)`
 `
 
 export const MethodDetails = ({ data }: { data: DataDecoded }): React.ReactElement => {
-  // FixMe: this way won't scale well
-  if (isSetAllowance(data.method)) {
-    return <ModifySpendingLimitDetails data={data} />
-  }
-
-  // FixMe: this way won't scale well
-  if (isDeleteAllowance(data.method)) {
-    return <DeleteSpendingLimitDetails data={data} />
-  }
-
   return (
     <TxInfo>
-      <TxDetailsMethodName size="xl" strong>
+      <Text size="xl" strong>
         {data.method}
-      </TxDetailsMethodName>
+      </Text>
 
       {data.parameters?.map((param, index) => (
         <TxDetailsMethodParam key={`${data.method}_param-${index}`} isArrayParameter={isArrayParameter(param.type)}>

src/routes/safe/components/Transactions/GatewayTransactions/TxData.tsx

@@ -1,11 +1,37 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 
-import { ExpandedTxDetails } from 'src/logic/safe/store/models/types/gateway.d'
+import { getNetworkInfo } from 'src/config'
+import { ExpandedTxDetails, TransactionData } from 'src/logic/safe/store/models/types/gateway.d'
+import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import {
+  DeleteSpendingLimitDetails,
+  isDeleteAllowance,
+  isSetAllowance,
+  ModifySpendingLimitDetails,
+} from './SpendingLimitDetails'
+import { TxInfoDetails } from './TxInfoDetails'
 import { sameString } from 'src/utils/strings'
 import { HexEncodedData } from './HexEncodedData'
 import { MethodDetails } from './MethodDetails'
 import { MultiSendDetails } from './MultiSendDetails'
 
+const { nativeCoin } = getNetworkInfo()
+
+type DetailsWithTxInfoProps = {
+  children: ReactNode
+  txData: TransactionData
+}
+
+const DetailsWithTxInfo = ({ children, txData }: DetailsWithTxInfoProps): ReactElement => (
+  <>
+    <TxInfoDetails
+      address={txData.to}
+      title={`Send ${txData.value ? fromTokenUnit(txData.value, nativeCoin.decimals) : 'n/a'} ${nativeCoin.symbol} to:`}
+    />
+    {children}
+  </>
+)
+
 type TxDataProps = {
   txData: ExpandedTxDetails['txData']
 }
@@ -24,7 +50,11 @@ export const TxData = ({ txData }: TxDataProps): ReactElement | null => {
     }
 
     // we render the hex encoded data
-    return <HexEncodedData hexData={txData.hexData} />
+    return (
+      <DetailsWithTxInfo txData={txData}>
+        <HexEncodedData hexData={txData.hexData} />
+      </DetailsWithTxInfo>
+    )
   }
 
   // known data and particularly `multiSend` data type
@@ -32,6 +62,20 @@ export const TxData = ({ txData }: TxDataProps): ReactElement | null => {
     return <MultiSendDetails txData={txData} />
   }
 
+  // FixMe: this way won't scale well
+  if (isSetAllowance(txData.dataDecoded.method)) {
+    return <ModifySpendingLimitDetails data={txData.dataDecoded} />
+  }
+
+  // FixMe: this way won't scale well
+  if (isDeleteAllowance(txData.dataDecoded.method)) {
+    return <DeleteSpendingLimitDetails data={txData.dataDecoded} />
+  }
+
   // we render the decoded data
-  return <MethodDetails data={txData.dataDecoded} />
+  return (
+    <DetailsWithTxInfo txData={txData}>
+      <MethodDetails data={txData.dataDecoded} />
+    </DetailsWithTxInfo>
+  )
 }