WA-238 Add TXs row in Safe view

src/routes/safe/component/Safe/MultisigTx.jsx

@@ -0,0 +1,52 @@
+// @flow
+import * as React from 'react'
+import { ListItem } from 'material-ui/List'
+import Avatar from 'material-ui/Avatar'
+import AcoountBalanceWallet from 'material-ui-icons/AccountBalanceWallet'
+import Button from '~/components/layout/Button'
+import ListItemText from '~/components/List/ListItemText'
+
+type Props = {
+  balance: string,
+  onAddTx: () => void,
+  onSeeTxs: () => void,
+}
+
+export const ADD_MULTISIG_BUTTON_TEXT = 'Add'
+export const SEE_MULTISIG_BUTTON_TEXT = 'TXs'
+
+const addStyle = {
+  marginRight: '10px',
+}
+
+const DailyLimitComponent = ({ balance, onAddTx, onSeeTxs }: Props) => {
+  const text = `Available ${balance} ETH`
+  const disabled = Number(balance) <= 0
+
+  return (
+    <ListItem>
+      <Avatar>
+        <AcoountBalanceWallet />
+      </Avatar>
+      <ListItemText primary="Multisig TXs" secondary={text} />
+      <Button
+        style={addStyle}
+        variant="raised"
+        color="primary"
+        onClick={onAddTx}
+        disabled={disabled}
+      >
+        {ADD_MULTISIG_BUTTON_TEXT}
+      </Button>
+      <Button
+        variant="raised"
+        color="primary"
+        onClick={onSeeTxs}
+      >
+        {SEE_MULTISIG_BUTTON_TEXT}
+      </Button>
+    </ListItem>
+  )
+}
+
+export default DailyLimitComponent

src/routes/safe/component/Safe/index.jsx

@@ -16,6 +16,7 @@ import Balance from './Balance'
 import Owners from './Owners'
 import Confirmations from './Confirmations'
 import DailyLimit from './DailyLimit'
+import MultisigTx from './MultisigTx'
 
 const safeIcon = require('./assets/gnosis_safe.svg')
 
@@ -43,6 +44,18 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
     this.setState({ component: <Withdrawn safeAddress={safe.get('address')} dailyLimit={safe.get('dailyLimit')} /> })
   }
 
+  onAddTx = () => {
+    const { safe } = this.props
+
+    this.setState({ component: <Withdrawn safeAddress={safe.get('address')} dailyLimit={safe.get('dailyLimit')} /> })
+  }
+
+  onSeeTxs = () => {
+    const { safe } = this.props
+
+    this.setState({ component: <Withdrawn safeAddress={safe.get('address')} dailyLimit={safe.get('dailyLimit')} /> })
+  }
+
   render() {
     const { safe, balance } = this.props
     const { component } = this.state
@@ -56,6 +69,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
             <Confirmations confirmations={safe.get('confirmations')} />
             <Address address={safe.get('address')} />
             <DailyLimit dailyLimit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />
+            <MultisigTx balance={balance} onAddTx={this.onAddTx} onSeeTxs={this.onSeeTxs} />
           </List>
         </Col>
         <Col sm={12} center="xs" md={7} margin="xl" layout="column">