WA-238 Not allowing to wthdrawn if limit is exceeded

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

@@ -40,7 +40,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   onWithdrawn = () => {
     const { safe } = this.props
 
-    this.setState({ component: <Withdrawn safeAddress={safe.get('address')} /> })
+    this.setState({ component: <Withdrawn safeAddress={safe.get('address')} dailyLimit={safe.get('dailyLimit')} /> })
   }
 
   render() {
@@ -55,7 +55,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
             <Owners owners={safe.owners} />
             <Confirmations confirmations={safe.get('confirmations')} />
             <Address address={safe.get('address')} />
-            <DailyLimit dailyLimit={safe.dailyLimit} onWithdrawn={this.onWithdrawn} />
+            <DailyLimit dailyLimit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />
           </List>
         </Col>
         <Col sm={12} center="xs" md={7} margin="xl" layout="column">

src/routes/safe/component/Withdrawn/Withdrawn.stories.js

@@ -0,0 +1,23 @@
+// @flow
+import { storiesOf } from '@storybook/react'
+import * as React from 'react'
+import styles from '~/components/layout/PageFrame/index.scss'
+import { makeDailyLimit, type DailyLimit } from '~/routes/safe/store/model/dailyLimit'
+import Component from './index'
+
+
+const FrameDecorator = story => (
+  <div className={styles.frame}>
+    { story() }
+  </div>
+)
+
+storiesOf('Components', module)
+  .addDecorator(FrameDecorator)
+  .add('WitdrawnForm', () => {
+    const dailyLimit: DailyLimit = makeDailyLimit({ value: 10, spentToday: 6 })
+
+    return (
+      <Component dailyLimit={dailyLimit} safeAddress="" />
+    )
+  })

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

@@ -19,15 +19,35 @@ export const safeFieldsValidation = (values: Object) => {
   return errors
 }
 
-export default () => () => (
+type Props = {
+  limit: number,
+  spentToday: number,
+}
+
+export const inLimit = (limit: number, spentToday: number) => (value: string) => {
+  const amount = Number(value)
+  const max = limit - spentToday
+  if (amount <= max) {
+    return undefined
+  }
+
+  return `Should not exceed ${max} ETH (amount to reach daily limit)`
+}
+
+export default ({ limit, spentToday }: Props) => () => (
   <Block margin="md">
-    <Heading tag="h2" margin="lg">Withdrawn Funds</Heading>
+    <Heading tag="h2" margin="lg">
+      Withdrawn Funds
+    </Heading>
+    <Heading tag="h4" margin="lg">
+      {`Daily limit ${limit} ETH (spent today: ${spentToday} ETH)`}
+    </Heading>
     <Block margin="md">
       <Field
         name={VALUE_PARAM}
         component={TextField}
         type="text"
-        validate={composeValidators(required, mustBeNumber, greaterThan(0))}
+        validate={composeValidators(required, mustBeNumber, greaterThan(0), inLimit(limit, spentToday))}
         placeholder="Amount in ETH*"
         text="Amount in ETH"
       />
@@ -44,3 +64,4 @@ export default () => () => (
     </Block>
   </Block>
 )
+

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

@@ -14,6 +14,7 @@ const getSteps = () => [
 
 type Props = SelectorProps & {
   safeAddress: string,
+  dailyLimit: DailyLimit,
 }
 
 type State = {
@@ -40,6 +41,7 @@ class Withdrawn extends React.Component<Props, State> {
   }
 
   render() {
+    const { dailyLimit } = this.props
     const { done } = this.state
     const steps = getSteps()
 
@@ -52,7 +54,7 @@ class Withdrawn extends React.Component<Props, State> {
           finishedTransaction={done}
           steps={steps}
         >
-          <Stepper.Page>
+          <Stepper.Page limit={dailyLimit.get('value')} spentToday={dailyLimit.get('spentToday')}>
             { WithdrawnForm }
           </Stepper.Page>
           <Stepper.Page>

src/routes/safe/store/reducer/safe.js

@@ -19,6 +19,7 @@ const buildSafesFrom = (loadedSafes: Object): State => {
     Object.keys(loadedSafes).forEach((address) => {
       const safe = loadedSafes[address]
       safe.owners = List(safe.owners.map((owner => makeOwner(owner))))
+      safe.dailyLimit = makeDailyLimit({ value: safe.dailyLimit.value, spentToday: safe.dailyLimit.spentToday })
       return map.set(address, makeSafe(safe))
     })
   })

src/routes/safeList/components/SafeTable.jsx

@@ -34,7 +34,7 @@ const SafeTable = ({ safes }: Props) => (
           <TableCell padding="none">{safe.get('address')}</TableCell>
           <TableCell padding="none" numeric>{safe.get('confirmations')}</TableCell>
           <TableCell padding="none" numeric>{safe.get('owners').count()}</TableCell>
-          <TableCell padding="none" numeric>{`${safe.get('dailyLimit')} ETH`}</TableCell>
+          <TableCell padding="none" numeric>{`${safe.get('dailyLimit').get('value')} ETH`}</TableCell>
         </TableRow>
       ))}
     </TableBody>