WA-238 Not allowing to wthdrawn if limit is exceeded

This commit is contained in:
apanizo 2018-05-14 12:27:57 +02:00
parent f04eec5f77
commit d0860df49b
6 changed files with 54 additions and 7 deletions

View File

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

View File

@ -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="" />
)
})

View File

@ -19,15 +19,35 @@ export const safeFieldsValidation = (values: Object) => {
return errors 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"> <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"> <Block margin="md">
<Field <Field
name={VALUE_PARAM} name={VALUE_PARAM}
component={TextField} component={TextField}
type="text" type="text"
validate={composeValidators(required, mustBeNumber, greaterThan(0))} validate={composeValidators(required, mustBeNumber, greaterThan(0), inLimit(limit, spentToday))}
placeholder="Amount in ETH*" placeholder="Amount in ETH*"
text="Amount in ETH" text="Amount in ETH"
/> />
@ -44,3 +64,4 @@ export default () => () => (
</Block> </Block>
</Block> </Block>
) )

View File

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

View File

@ -19,6 +19,7 @@ const buildSafesFrom = (loadedSafes: Object): State => {
Object.keys(loadedSafes).forEach((address) => { Object.keys(loadedSafes).forEach((address) => {
const safe = loadedSafes[address] const safe = loadedSafes[address]
safe.owners = List(safe.owners.map((owner => makeOwner(owner)))) 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)) return map.set(address, makeSafe(safe))
}) })
}) })

View File

@ -34,7 +34,7 @@ const SafeTable = ({ safes }: Props) => (
<TableCell padding="none">{safe.get('address')}</TableCell> <TableCell padding="none">{safe.get('address')}</TableCell>
<TableCell padding="none" numeric>{safe.get('confirmations')}</TableCell> <TableCell padding="none" numeric>{safe.get('confirmations')}</TableCell>
<TableCell padding="none" numeric>{safe.get('owners').count()}</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> </TableRow>
))} ))}
</TableBody> </TableBody>