WA-238 Not allowing to wthdrawn if limit is exceeded
This commit is contained in:
parent
f04eec5f77
commit
d0860df49b
|
@ -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">
|
||||||
|
|
|
@ -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="" />
|
||||||
|
)
|
||||||
|
})
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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))
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue