diff --git a/src/routes/safe/component/Safe/index.jsx b/src/routes/safe/component/Safe/index.jsx index 752a9907..0bf495bd 100644 --- a/src/routes/safe/component/Safe/index.jsx +++ b/src/routes/safe/component/Safe/index.jsx @@ -40,7 +40,7 @@ class GnoSafe extends React.PureComponent { onWithdrawn = () => { const { safe } = this.props - this.setState({ component: }) + this.setState({ component: }) } render() { @@ -55,7 +55,7 @@ class GnoSafe extends React.PureComponent {
- + diff --git a/src/routes/safe/component/Withdrawn/Withdrawn.stories.js b/src/routes/safe/component/Withdrawn/Withdrawn.stories.js new file mode 100644 index 00000000..28b63b1a --- /dev/null +++ b/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 => ( +
+ { story() } +
+) + +storiesOf('Components', module) + .addDecorator(FrameDecorator) + .add('WitdrawnForm', () => { + const dailyLimit: DailyLimit = makeDailyLimit({ value: 10, spentToday: 6 }) + + return ( + + ) + }) diff --git a/src/routes/safe/component/Withdrawn/WithdrawnForm.jsx b/src/routes/safe/component/Withdrawn/WithdrawnForm.jsx index 7912c23d..875c209e 100644 --- a/src/routes/safe/component/Withdrawn/WithdrawnForm.jsx +++ b/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) => () => ( - Withdrawn Funds + + Withdrawn Funds + + + {`Daily limit ${limit} ETH (spent today: ${spentToday} ETH)`} + @@ -44,3 +64,4 @@ export default () => () => ( ) + diff --git a/src/routes/safe/component/Withdrawn/index.jsx b/src/routes/safe/component/Withdrawn/index.jsx index beac3c44..282a488c 100644 --- a/src/routes/safe/component/Withdrawn/index.jsx +++ b/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 { } render() { + const { dailyLimit } = this.props const { done } = this.state const steps = getSteps() @@ -52,7 +54,7 @@ class Withdrawn extends React.Component { finishedTransaction={done} steps={steps} > - + { WithdrawnForm } diff --git a/src/routes/safe/store/reducer/safe.js b/src/routes/safe/store/reducer/safe.js index 1b858460..550e9b87 100644 --- a/src/routes/safe/store/reducer/safe.js +++ b/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)) }) }) diff --git a/src/routes/safeList/components/SafeTable.jsx b/src/routes/safeList/components/SafeTable.jsx index ed7e825c..9706f66c 100644 --- a/src/routes/safeList/components/SafeTable.jsx +++ b/src/routes/safeList/components/SafeTable.jsx @@ -34,7 +34,7 @@ const SafeTable = ({ safes }: Props) => ( {safe.get('address')} {safe.get('confirmations')} {safe.get('owners').count()} - {`${safe.get('dailyLimit')} ETH`} + {`${safe.get('dailyLimit').get('value')} ETH`} ))}