WA-238 Logic for showing Withdrawn form after clicking on Safe's button

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

@@ -3,18 +3,27 @@ import * as React from 'react'
 import { ListItem } from 'material-ui/List'
 import Avatar from 'material-ui/Avatar'
 import NotificationsPaused from 'material-ui-icons/NotificationsPaused'
+import Button from '~/components/layout/Button'
 import ListItemText from '~/components/List/ListItemText'
 
 type Props = {
   limit: number,
+  onWithdrawn: () => void,
 }
 
-const DailyLimit = ({ limit }: Props) => (
+const DailyLimit = ({ limit, onWithdrawn }: Props) => (
   <ListItem>
     <Avatar>
       <NotificationsPaused />
     </Avatar>
     <ListItemText primary="Daily Limit" secondary={`${limit} ETH`} />
+    <Button
+      variant="raised"
+      color="primary"
+      onClick={onWithdrawn}
+    >
+      Withdrawn
+    </Button>
   </ListItem>
 )
 

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

@@ -9,6 +9,8 @@ import Row from '~/components/layout/Row'
 import { type Safe } from '~/routes/safe/store/model/safe'
 import List from 'material-ui/List'
 
+import Withdrawn from '~/routes/safe/component/Withdrawn'
+
 import Address from './Address'
 import Balance from './Balance'
 import Owners from './Owners'
@@ -22,33 +24,46 @@ type SafeProps = {
   balance: string,
 }
 
+type State = {
+  component: React$Node,
+}
+
 const listStyle = {
   width: '100%',
 }
 
-class GnoSafe extends React.PureComponent<SafeProps> {
+class GnoSafe extends React.PureComponent<SafeProps, State> {
+  state = {
+    component: undefined,
+  }
+
+  onWithdrawn = () => {
+    this.setState({ component: <Withdrawn /> })
+  }
+
   render() {
     const { safe, balance } = this.props
+    const { component } = this.state
 
     return (
       <Row grow>
-        <Col sm={12} top="xs" md={4} margin="xl" overflow>
+        <Col sm={12} top="xs" md={6} margin="xl" overflow>
           <List style={listStyle}>
             <Balance balance={balance} />
             <Owners owners={safe.owners} />
             <Confirmations confirmations={safe.get('confirmations')} />
             <Address address={safe.get('address')} />
-            <DailyLimit limit={safe.get('dailyLimit')} />
+            <DailyLimit limit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />
           </List>
         </Col>
-        <Col sm={12} center="xs" md={8} margin="xl" layout="column">
+        <Col sm={12} center="xs" md={6} margin="xl" layout="column">
           <Block margin="xl">
             <Paragraph size="lg" noMargin align="right">
               <Bold>{safe.name.toUpperCase()}</Bold>
             </Paragraph>
           </Block>
-          <Row grow align="center">
-            <Img alt="Safe Icon" src={safeIcon} height={330} />
+          <Row grow align={component ? undefined : 'center'}>
+            { component || <Img alt="Safe Icon" src={safeIcon} height={330} /> }
           </Row>
         </Col>
       </Row>

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

@@ -0,0 +1,10 @@
+// @flow
+import * as React from 'react'
+
+const Withdrawn = () => (
+  <div>
+    Withdrawn form
+  </div>
+)
+
+export default Withdrawn