extract tx description to a separate component

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

@@ -0,0 +1,57 @@
+// @flow
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import { type Transaction } from '~/routes/safe/store/models/transaction'
+import Bold from '~/components/layout/Bold'
+import Paragraph from '~/components/layout/Paragraph'
+import Block from '~/components/layout/Block'
+import { getEtherScanLink, getWeb3 } from '~/logic/wallets/getWeb3'
+import { shortVersionOf } from '~/logic/wallets/ethAddresses'
+import { md, lg, secondary } from '~/theme/variables'
+
+const web3 = getWeb3()
+const { toBN, fromWei } = web3.utils
+
+const openIconStyle = {
+  height: '13px',
+  color: secondary,
+}
+
+export const styles = () => ({
+  txDataContainer: {
+    padding: `${lg} ${md}`,
+  },
+})
+
+type Props = {
+  classes: Object,
+  tx: Transaction,
+}
+
+const TxDescription = ({ tx, classes }: Props) => {
+  const description = ''
+
+  return (
+    <Block className={classes.txDataContainer}>
+      <Paragraph noMargin>
+        <Bold>
+          Send
+          {' '}
+          {fromWei(toBN(tx.value), 'ether')}
+          {' '}
+          {tx.symbol}
+          {' '}
+to:
+        </Bold>
+        <br />
+        <a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
+          {shortVersionOf(tx.recipient, 4)}
+          <OpenInNew style={openIconStyle} />
+        </a>
+      </Paragraph>
+    </Block>
+  )
+}
+
+export default withStyles(styles)(TxDescription)

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

@@ -12,18 +12,16 @@ import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import { type Transaction } from '~/routes/safe/store/models/transaction'
 import { type Owner } from '~/routes/safe/store/models/owner'
-import { getEtherScanLink, openTxInEtherScan, getWeb3 } from '~/logic/wallets/getWeb3'
+import { openTxInEtherScan } from '~/logic/wallets/getWeb3'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 import { secondary } from '~/theme/variables'
+import TxDescription from './TxDescription'
 import OwnersColumn from './OwnersColumn'
 import CancelTxModal from './CancelTxModal'
 import ApproveTxModal from './ApproveTxModal'
 import { styles } from './style'
 import { formatDate } from '../columns'
 
-const web3 = getWeb3()
-const { toBN, fromWei } = web3.utils
-
 type Props = {
   classes: Object,
   tx: Transaction,
@@ -102,24 +100,7 @@ const ExpandedTx = ({
               )}
             </Block>
             <Hairline />
-            <Block className={classes.txDataContainer}>
+            <TxDescription tx={tx} />
-              <Paragraph noMargin>
-                <Bold>
-                  Send
-                  {' '}
-                  {fromWei(toBN(tx.value), 'ether')}
-                  {' '}
-                  {tx.symbol}
-                  {' '}
-to:
-                </Bold>
-                <br />
-                <a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
-                  {shortVersionOf(tx.recipient, 4)}
-                  <OpenInNew style={openIconStyle} />
-                </a>
-              </Paragraph>
-            </Block>
           </Col>
           <OwnersColumn
             tx={tx}

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

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