remove unused styles for txs table, expanded tx wip

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

@@ -1,6 +1,50 @@
 // @flow
 import React from 'react'
+import Row from '~/components/layout/Row'
+import Block from '~/components/layout/Block'
+import Col from '~/components/layout/Col'
+import Bold from '~/components/layout/Bold'
+import Paragraph from '~/components/layout/Paragraph'
+import Hairline from '~/components/layout/Hairline'
 
-const ExpandedTx = () => <div>Yo I'm expanded</div>
+const ExpandedTx = () => (
+  <Block>
+    <Row>
+      <Col xs={6} layout="column">
+        <Block>
+          <Paragraph noMargin>
+            <Bold>TX hash: </Bold>
+            n/a
+          </Paragraph>
+          <Paragraph noMargin>
+            <Bold>TX fee: </Bold>
+            n/a
+          </Paragraph>
+          <Paragraph noMargin>
+            <Bold>TX status: </Bold>
+            n/a
+          </Paragraph>
+          <Paragraph noMargin>
+            <Bold>TX created: </Bold>
+            n/a
+          </Paragraph>
+          <Paragraph noMargin>
+            <Bold>TX submitted: </Bold>
+            n/a
+          </Paragraph>
+        </Block>
+        <Hairline />
+        <Block>
+          <Paragraph noMargin>
+            <Bold>Sent 1.00 ETH to:</Bold>
+            <br />
+            0xbc2BB26a6d821e69A38016f3858561a1D80d4182
+          </Paragraph>
+        </Block>
+      </Col>
+      <Col xs={6}>right</Col>
+    </Row>
+  </Block>
+)
 
 export default ExpandedTx

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

@@ -0,0 +1,8 @@
+// @flow
+import { smallFontSize, boldFont, sm } from '~/theme/variables'
+
+export const styles = () => ({
+  txDataContainer: {
+    
+  },
+})

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

@@ -11,6 +11,7 @@ export const TX_TABLE_TYPE_ID = 'type'
 export const TX_TABLE_DATE_ID = 'date'
 export const TX_TABLE_AMOUNT_ID = 'amount'
 export const TX_TABLE_STATUS_ID = 'status'
+export const TX_TABLE_RAW_TX_ID = 'tx'
 
 const web3 = getWeb3()
 const { toBN, fromWei } = web3.utils
@@ -34,6 +35,7 @@ export const getTxTableData = (transactions: List<Transaction>): List<Transactio
     [TX_TABLE_DATE_ID]: formatDate(tx.isExecuted ? tx.executionDate : tx.submissionDate),
     [TX_TABLE_AMOUNT_ID]: Number(tx.value) > 0 ? `${fromWei(toBN(tx.value), 'ether')} ${tx.symbol}` : 'n/a',
     [TX_TABLE_STATUS_ID]: tx.isExecuted ? 'success' : 'awaiting',
+    [TX_TABLE_RAW_TX_ID]: tx,
   }))
 
   return rows

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

@@ -20,13 +20,11 @@ import Table from '~/components/Table'
 import { type Transaction } from '~/routes/safe/store/models/transaction'
 import ExpandedTxComponent from './ExpandedTx'
 import {
-  getTxTableData, generateColumns, TX_TABLE_NONCE_ID, type TransactionRow,
+  getTxTableData, generateColumns, TX_TABLE_NONCE_ID, type TransactionRow, TX_TABLE_RAW_TX_ID,
 } from './columns'
 import { styles } from './style'
 import Status from './Status'
 
-type State = {}
-
 type Props = {
   classes: Object,
   transactions: List<Transaction>,
@@ -34,7 +32,7 @@ type Props = {
 
 const TxsTable = (props: Props) => {
   const { classes, transactions } = props
-  const [expandedTx, setExpandedTx] = useState(null)
+  const [expandedTx, setExpandedTx] = useState<string | null>(null)
 
   const handleTxExpand = (nonce) => {
     setExpandedTx(prevTx => (prevTx === nonce ? null : nonce))
@@ -75,7 +73,15 @@ const TxsTable = (props: Props) => {
                 </Row>
               </TableCell>
             </TableRow>
-            <Collapse in={expandedTx === row.nonce} timeout="auto" component={ExpandedTxComponent} unmountOnExit />
+            <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+              <Collapse
+                in={expandedTx === row.nonce}
+                timeout="auto"
+                component={ExpandedTxComponent}
+                unmountOnExit
+                tx={row[TX_TABLE_RAW_TX_ID]}
+              />
+            </TableCell>
           </>
         ))
         }

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

@@ -1,53 +1,14 @@
 // @flow
-import {
-  xs, sm, md, lg,
-} from '~/theme/variables'
+import { lg } from '~/theme/variables'
 
-export const styles = (theme: Object) => ({
+export const styles = () => ({
   container: {
     marginTop: lg,
   },
-  root: {
-    width: '20px',
-    marginRight: sm,
-  },
-  zero: {
-    letterSpacing: '-0.5px',
-  },
-  message: {
-    margin: `${sm} 0`,
-  },
-  actionIcon: {
-    marginRight: theme.spacing(1),
-  },
-  iconSmall: {
-    fontSize: 16,
-  },
-  cell: {
-    paddingTop: md,
-    paddingBottom: md,
-  },
   row: {
+    cursor: 'pointer',
     '&:hover': {
       backgroundColor: '#fff3e2',
     },
   },
-  send: {
-    minWidth: '0px',
-    marginRight: sm,
-    width: '70px',
-  },
-  receive: {
-    minWidth: '0px',
-    width: '95px',
-  },
-  leftIcon: {
-    marginRight: xs,
-  },
-  links: {
-    textDecoration: 'underline',
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
 })