Handle custom transactions in transaction list

src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx

@@ -55,8 +55,8 @@ const ReviewCustomTx = ({
       const submitTx = async () => {
         const web3 = getWeb3()
         const txRecipient = tx.recipientAddress
-        let txData = tx.data
-        let txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : 0
+        const txData = tx.data
+        const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : 0
 
         createTransaction(safeAddress, txRecipient, txValue, txData, openSnackbar)
         onClose()
@@ -113,7 +113,7 @@ const ReviewCustomTx = ({
               </Paragraph>
             </Row>
             <Row margin="md" align="center">
-              <Img src={'tx.token.logoUri'} height={28} alt={'Ether'} onError={setImageToPlaceholder} />
+              <Img src="tx.token.logoUri" height={28} alt="Ether" onError={setImageToPlaceholder} />
               <Paragraph size="md" noMargin className={classes.value}>
                 {tx.value}
                 {'ETH'}

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx

@@ -13,11 +13,15 @@ export const TRANSACTIONS_DESC_ADD_OWNER_TEST_ID = 'tx-description-add-owner'
 export const TRANSACTIONS_DESC_REMOVE_OWNER_TEST_ID = 'tx-description-remove-owner'
 export const TRANSACTIONS_DESC_CHANGE_THRESHOLD_TEST_ID = 'tx-description-change-threshold'
 export const TRANSACTIONS_DESC_SEND_TEST_ID = 'tx-description-send'
+export const TRANSACTIONS_DESC_CUSTOM_TEST_ID = 'tx-description-custom'
 
 export const styles = () => ({
   txDataContainer: {
     padding: `${lg} ${md}`,
   },
+  txData: {
+    wordBreak: 'break-all',
+  },
 })
 
 type Props = {
@@ -37,6 +41,11 @@ type DescriptionDescProps = {
   newThreshold?: string,
 }
 
+type CustomDescProps = {
+  data: String,
+  classes: Obeject,
+}
+
 const TransferDescription = ({ value = '', symbol, recipient }: TransferDescProps) => (
   <Paragraph noMargin data-testid={TRANSACTIONS_DESC_SEND_TEST_ID}>
     <Bold>
@@ -46,7 +55,7 @@ const TransferDescription = ({ value = '', symbol, recipient }: TransferDescProp
       {' '}
       {symbol}
       {' '}
-to:
+      to:
     </Bold>
     <br />
     <EtherscanLink type="address" value={recipient} />
@@ -79,9 +88,19 @@ const SettingsDescription = ({ removedOwner, addedOwner, newThreshold }: Descrip
   </>
 )
 
+const CustomDescription = ({ data, classes }: CustomDescProps) => (
+  <>
+    <Paragraph className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_TEST_ID}>
+      <Bold>Data (hex encoded):</Bold>
+      <br />
+      {data}
+    </Paragraph>
+  </>
+)
+
 const TxDescription = ({ tx, classes }: Props) => {
   const {
-    recipient, value, modifySettingsTx, removedOwner, addedOwner, newThreshold, cancellationTx,
+    recipient, value, modifySettingsTx, removedOwner, addedOwner, newThreshold, cancellationTx, customTx, data,
   } = getTxData(tx)
 
   return (
@@ -89,7 +108,10 @@ const TxDescription = ({ tx, classes }: Props) => {
       {modifySettingsTx && (
         <SettingsDescription removedOwner={removedOwner} newThreshold={newThreshold} addedOwner={addedOwner} />
       )}
-      {!cancellationTx && !modifySettingsTx && (
+      {customTx && (
+        <CustomDescription data={data} classes={classes} />
+      )}
+      {!cancellationTx && !modifySettingsTx && !customTx && (
         <TransferDescription value={value} symbol={tx.symbol} recipient={recipient} />
       )}
     </Block>

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/utils.js

@@ -10,6 +10,8 @@ type DecodedTxData = {
   newThreshold?: string,
   addedOwner?: string,
   cancellationTx?: boolean,
+  customTx?: boolean,
+  data: string,
 }
 
 export const getTxData = (tx: Transaction): DecodedTxData => {
@@ -47,6 +49,9 @@ export const getTxData = (tx: Transaction): DecodedTxData => {
     }
   } else if (tx.cancellationTx) {
     txData.cancellationTx = true
+  } else if (tx.customTx) {
+    txData.data = tx.data
+    txData.customTx = true
   }
 
   return txData

src/routes/safe/components/Transactions/TxsTable/columns.js

@@ -50,6 +50,8 @@ export const getTxTableData = (transactions: List<Transaction>): List<Transactio
       txType = 'Modify Safe Settings'
     } else if (tx.cancellationTx) {
       txType = 'Cancellation transaction'
+    } else if (tx.customTx) {
+      txType = 'Custom transaction'
     }
 
     return {

src/routes/safe/store/actions/fetchTransactions.js

@@ -59,6 +59,7 @@ export const buildTransactionFrom = async (
   )
   const modifySettingsTx = tx.to === safeAddress && Number(tx.value) === 0 && !!tx.data
   const cancellationTx = tx.to === safeAddress && Number(tx.value) === 0 && !tx.data
+  const customTx = tx.to !== safeAddress && !!tx.data
   const isTokenTransfer = await isAddressAToken(tx.to)
 
   let executionTxHash
@@ -82,6 +83,8 @@ export const buildTransactionFrom = async (
     }
   } else if (modifySettingsTx && tx.data) {
     decodedParams = await decodeParamsFromSafeMethod(tx.data)
+  } else if (customTx && tx.data) {
+    decodedParams = await decodeParamsFromSafeMethod(tx.data)
   }
 
   return makeTransaction({
@@ -100,6 +103,7 @@ export const buildTransactionFrom = async (
     isTokenTransfer,
     decodedParams,
     modifySettingsTx,
+    customTx,
     cancellationTx,
   })
 }

src/routes/safe/store/models/transaction.js

@@ -18,6 +18,7 @@ export type TransactionProps = {
   symbol: string,
   modifySettingsTx: boolean,
   cancellationTx: boolean,
+  customTx: boolean,
   safeTxHash: string,
   executionTxHash?: string,
   cancelled?: boolean,
@@ -42,6 +43,7 @@ export const makeTransaction: RecordFactory<TransactionProps> = Record({
   cancelled: false,
   modifySettingsTx: false,
   cancellationTx: false,
+  customTx: false,
   status: 'awaiting',
   isTokenTransfer: false,
   decodedParams: {},