add descriptions for eth/erc20 transfers

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

@@ -18,6 +18,20 @@ const openIconStyle = {
   color: secondary,
 }
 
+const getTxData = (tx: Transaction) => {
+  const txData = {}
+
+  if (tx.isTokenTransfer && tx.decodedParams) {
+    txData.recipient = tx.decodedParams.recipient
+    txData.value = fromWei(toBN(tx.decodedParams.value), 'ether')
+  } else if (Number(tx.value) > 0) {
+    txData.recipient = tx.recipient
+    txData.value = fromWei(toBN(tx.value), 'ether')
+  }
+
+  return txData
+}
+
 export const styles = () => ({
   txDataContainer: {
     padding: `${lg} ${md}`,
@@ -30,7 +44,7 @@ type Props = {
 }
 
 const TxDescription = ({ tx, classes }: Props) => {
-  const description = ''
+  const { recipient, value } = getTxData(tx)
 
   return (
     <Block className={classes.txDataContainer}>
@@ -38,15 +52,15 @@ const TxDescription = ({ tx, classes }: Props) => {
         <Bold>
           Send
           {' '}
-          {fromWei(toBN(tx.value), 'ether')}
+          {value}
           {' '}
           {tx.symbol}
           {' '}
-to:
+          to:
         </Bold>
         <br />
-        <a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
+        <a href={getEtherScanLink(recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
-          {shortVersionOf(tx.recipient, 4)}
+          {shortVersionOf(recipient, 4)}
           <OpenInNew style={openIconStyle} />
         </a>
       </Paragraph>

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/style.js

@@ -1,5 +1,7 @@
 // @flow
-import { md, lg, connected, error } from '~/theme/variables'
+import {
+  md, lg, connected, error,
+} from '~/theme/variables'
 
 export const styles = () => ({
   txDataContainer: {