WA-238 Withdrawn component

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

@@ -38,7 +38,9 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   }
 
   onWithdrawn = () => {
-    this.setState({ component: <Withdrawn /> })
+    const { safe } = this.props
+
+    this.setState({ component: <Withdrawn safeAddress={safe.get('address')} /> })
   }
 
   render() {
@@ -47,7 +49,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
 
     return (
       <Row grow>
-        <Col sm={12} top="xs" md={6} margin="xl" overflow>
+        <Col sm={12} top="xs" md={5} margin="xl" overflow>
           <List style={listStyle}>
             <Balance balance={balance} />
             <Owners owners={safe.owners} />
@@ -56,7 +58,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
             <DailyLimit limit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />
           </List>
         </Col>
-        <Col sm={12} center="xs" md={6} margin="xl" layout="column">
+        <Col sm={12} center="xs" md={7} margin="xl" layout="column">
           <Block margin="xl">
             <Paragraph size="lg" noMargin align="right">
               <Bold>{safe.name.toUpperCase()}</Bold>
@@ -71,8 +73,4 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   }
 }
 
-/*
-        <Paragraph size="lg">
-          <Bold>{safe.name.toUpperCase()}</Bold>
-*/
 export default GnoSafe

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

@@ -1,10 +1,66 @@
 // @flow
 import * as React from 'react'
+import { connect } from 'react-redux'
+import Stepper from '~/components/Stepper'
+import { TXS_ADDRESS } from '~/routes/routes'
+import selector, { type SelectorProps } from './selector'
+import withdrawn from './withdrawn'
+import WithdrawnForm from './WithdrawnForm'
+import Review from './Review'
 
-const Withdrawn = () => (
-  <div>
-    Withdrawn form
-  </div>
-)
+const getSteps = () => [
+  'Fill Withdrawn Form', 'Review Withdrawn',
+]
+
+type Props = SelectorProps & {
+  safeAddress: string,
+}
+
+type State = {
+  done: boolean,
+}
+
+class Withdrawn extends React.Component<Props, State> {
+  state = {
+    done: false,
+  }
+
+  onWithdrawn = async (values: Object) => {
+    try {
+      const { safeAddress, userAddress } = this.props
+      await withdrawn(values, safeAddress, userAddress)
+      this.setState({ done: true })
+    } catch (error) {
+      this.setState({ done: false })
+      // eslint-disable-next-line
+      console.log('Error while withdrawing funds ' + error)
+    }
+  }
+
+  render() {
+    const { done } = this.state
+    const steps = getSteps()
+
+    return (
+      <React.Fragment>
+        <Stepper
+          goPath={TXS_ADDRESS}
+          goTitle="SEE TXS"
+          onSubmit={this.onWithdrawn}
+          finishedTransaction={done}
+          steps={steps}
+        >
+          <Stepper.Page>
+            { WithdrawnForm }
+          </Stepper.Page>
+          <Stepper.Page>
+            { Review }
+          </Stepper.Page>
+        </Stepper>
+      </React.Fragment>
+    )
+  }
+}
+
+export default connect(selector)(Withdrawn)
 
-export default Withdrawn