Merge pull request #23 from gnosis/feature/WA-238-include-daily-limit

WA-238 - Include daily limit component in UI
This commit is contained in:
Adolfo Panizo 2018-05-02 16:57:47 +02:00 committed by GitHub
commit 23d4ad9a96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 114 additions and 30 deletions

View File

@ -8,6 +8,14 @@ export const required = (value: Field) => (value ? undefined : 'Required')
export const mustBeNumber = (value: number) =>
(Number.isNaN(Number(value)) ? 'Must be a number' : undefined)
export const greaterThan = (min: number) => (value: string) => {
if (Number.isNaN(Number(value)) || Number.parseFloat(value) > Number(min)) {
return undefined
}
return `Should be greater than ${min}`
}
export const minValue = (min: number) => (value: string) => {
if (Number.isNaN(Number(value)) || Number.parseInt(value, 10) >= Number(min)) {
return undefined

View File

@ -1,7 +1,14 @@
// @flow
import TestUtils from 'react-dom/test-utils'
import { store } from '~/store'
import { FIELD_NAME, FIELD_OWNERS, FIELD_CONFIRMATIONS, getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/components/fields'
import {
FIELD_NAME,
FIELD_OWNERS,
FIELD_CONFIRMATIONS,
FIELD_DAILY_LIMIT,
getOwnerNameBy,
getOwnerAddressBy,
} from '~/routes/open/components/fields'
import { DEPLOYED_COMPONENT_ID } from '~/routes/open/components/FormConfirmation'
import { sleep } from '~/utils/timer'
import { getProviderInfo } from '~/wallets/getWeb3'
@ -26,6 +33,9 @@ describe('React DOM TESTS > Create Safe form', () => {
const fieldConfirmations = inputs[2]
expect(fieldConfirmations.name).toEqual(FIELD_CONFIRMATIONS)
const dailyLimitConfirmations = inputs[3]
expect(dailyLimitConfirmations.name).toEqual(FIELD_DAILY_LIMIT)
TestUtils.Simulate.change(fieldOwners, { target: { value: '1' } })
const inputsExpanded = TestUtils.scryRenderedDOMComponentsWithTag(open, 'input')
@ -39,6 +49,7 @@ describe('React DOM TESTS > Create Safe form', () => {
TestUtils.Simulate.change(fieldName, { target: { value: 'Adolfo Safe' } })
TestUtils.Simulate.change(fieldConfirmations, { target: { value: '1' } })
TestUtils.Simulate.change(ownerName, { target: { value: 'Adolfo Eth Account' } })
TestUtils.Simulate.change(dailyLimitConfirmations, { target: { value: '10' } })
const form = TestUtils.findRenderedDOMComponentWithTag(open, 'form')
// One submit per step when creating a safe

View File

@ -7,6 +7,7 @@ import Col from '~/components/layout/Col'
import Heading from '~/components/layout/Heading'
import Row from '~/components/layout/Row'
import Paragraph from '~/components/layout/Paragraph'
import { FIELD_NAME, FIELD_CONFIRMATIONS, FIELD_DAILY_LIMIT } from '../fields'
type FormProps = {
values: Object,
@ -20,10 +21,13 @@ const ReviewInformation = () => ({ values }: FormProps) => {
<Block>
<Heading tag="h2">Review the Safe information</Heading>
<Paragraph>
<Bold>Safe Name: </Bold> {values.name}
<Bold>Safe Name: </Bold> {values[FIELD_NAME]}
</Paragraph>
<Paragraph>
<Bold>Required confirmations: </Bold> {values.confirmations}
<Bold>Required confirmations: </Bold> {values[FIELD_CONFIRMATIONS]}
</Paragraph>
<Paragraph>
<Bold>Daily limit: </Bold> {values[FIELD_DAILY_LIMIT]} ETH
</Paragraph>
<Heading tag="h3">Owners</Heading>
{ names.map((name, index) => (

View File

@ -49,7 +49,7 @@ describe('React DOM TESTS > Create Safe form', () => {
// THEN
const muiFields = TestUtils.scryRenderedComponentsWithType(open, TextField)
expect(5).toEqual(muiFields.length)
expect(6).toEqual(muiFields.length)
const confirmationsField = muiFields[4]
expect(confirmationsField.props.meta.valid).toBe(false)
@ -64,7 +64,7 @@ describe('React DOM TESTS > Create Safe form', () => {
// THEN
const muiFields = TestUtils.scryRenderedComponentsWithType(open, TextField)
expect(7).toEqual(muiFields.length)
expect(8).toEqual(muiFields.length)
const confirmationsField = muiFields[6]
expect(confirmationsField.props.meta.valid).toBe(false)

View File

@ -0,0 +1,22 @@
// @flow
import * as React from 'react'
import Field from '~/components/forms/Field'
import TextField from '~/components/forms/TextField'
import { composeValidators, mustBeNumber, required, greaterThan } from '~/components/forms/validator'
import Block from '~/components/layout/Block'
import { FIELD_DAILY_LIMIT } from '~/routes/open/components/fields'
const DailyLimit = () => (
<Block margin="md">
<Field
name={FIELD_DAILY_LIMIT}
component={TextField}
type="text"
validate={composeValidators(required, mustBeNumber, greaterThan(0))}
placeholder="Daily Limit*"
text="Daily Limit"
/>
</Block>
)
export default DailyLimit

View File

@ -6,6 +6,7 @@ import { getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
import Name from './Name'
import Owners from './Owners'
import Confirmations from './Confirmations'
import DailyLimit from './DailyLimit'
export const CONFIRMATIONS_ERROR = 'Number of confirmations can not be higher than the number of owners'
@ -25,5 +26,6 @@ export default () => ({ values }: Object) => (
<Name />
<Owners numOwners={values.owners} otherAccounts={getAccountsFrom(values)} />
<Confirmations />
<DailyLimit />
</Block>
)

View File

@ -2,6 +2,7 @@
export const FIELD_NAME: string = 'name'
export const FIELD_CONFIRMATIONS: string = 'confirmations'
export const FIELD_OWNERS: string = 'owners'
export const FIELD_DAILY_LIMIT: string = 'limit'
export const getOwnerNameBy = (index: number) => `owner${index}Name`
export const getOwnerAddressBy = (index: number) => `owner${index}Address`

View File

@ -3,7 +3,7 @@ import * as React from 'react'
import { connect } from 'react-redux'
import contract from 'truffle-contract'
import Page from '~/components/layout/Page'
import { getAccountsFrom, getThresholdFrom, getNamesFrom, getSafeNameFrom } from '~/routes/open/utils/safeDataExtractor'
import { getAccountsFrom, getThresholdFrom, getNamesFrom, getSafeNameFrom, getDailyLimitFrom } from '~/routes/open/utils/safeDataExtractor'
import { getWeb3 } from '~/wallets/getWeb3'
import { promisify } from '~/utils/promisify'
import Safe from '#/GnosisSafe.json'
@ -26,12 +26,13 @@ const createSafe = async (safeContract, values, userAccount, addSafe) => {
const numConfirmations = getThresholdFrom(values)
const name = getSafeNameFrom(values)
const owners = getNamesFrom(values)
const dailyLimit = getDailyLimitFrom(values)
const web3 = getWeb3()
safeContract.setProvider(web3.currentProvider)
const safe = await safeContract.new(accounts, numConfirmations, 0, 0, { from: userAccount, gas: '5000000' })
addSafe(name, safe.address, numConfirmations, owners, accounts)
addSafe(name, safe.address, numConfirmations, dailyLimit, owners, accounts)
return safe
}

View File

@ -1,4 +1,6 @@
// @flow
export const getDailyLimitFrom = (values: Object): number => Number(values.limit)
export const getAccountsFrom = (values: Object): string[] => {
const accounts = Object.keys(values).sort().filter(key => /^owner\d+Address$/.test(key))

View File

@ -0,0 +1,21 @@
// @flow
import * as React from 'react'
import { ListItem } from 'material-ui/List'
import Avatar from 'material-ui/Avatar'
import NotificationsPaused from 'material-ui-icons/NotificationsPaused'
import ListItemText from '~/components/List/ListItemText'
type Props = {
limit: number,
}
const DailyLimit = ({ limit }: Props) => (
<ListItem>
<Avatar>
<NotificationsPaused />
</Avatar>
<ListItemText primary="Daily Limit" secondary={`${limit} ETH`} />
</ListItem>
)
export default DailyLimit

View File

@ -39,7 +39,7 @@ const Owners = openHoc(({
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{owners.map(owner => (
<ListItem key={owner.address} button className={classes.nested}>
<ListItem key={owner.address} className={classes.nested}>
<ListItemIcon>
<Person />
</ListItemIcon>

View File

@ -12,6 +12,7 @@ import Address from './Address'
import Balance from './Balance'
import Owners from './Owners'
import Confirmations from './Confirmations'
import DailyLimit from './DailyLimit'
type SafeProps = {
safe: Safe,
@ -20,6 +21,7 @@ type SafeProps = {
const listStyle = {
width: '100%',
minWidth: '485px',
}
class GnoSafe extends React.PureComponent<SafeProps> {
@ -34,6 +36,7 @@ class GnoSafe extends React.PureComponent<SafeProps> {
<Owners owners={safe.owners} />
<Confirmations confirmations={safe.get('confirmations')} />
<Address address={safe.get('address')} />
<DailyLimit limit={safe.get('dailyLimit')} />
</List>
</Col>
<Col xs={12} center="xs" sm={8} margin="xl" layout="block">

View File

@ -15,13 +15,14 @@ export const buildOwnersFrom = (names: string[], addresses: string[]) => {
const addSafe = createAction(
ADD_SAFE,
(
name: string, address: string, confirmations: number,
name: string, address: string,
confirmations: number, dailyLimit: number,
ownersName: string[], ownersAddress: string[],
): SafeProps => {
const owners: List<Owner> = buildOwnersFrom(ownersName, ownersAddress)
return ({
address, name, confirmations, owners,
address, name, confirmations, owners, dailyLimit,
})
},
)

View File

@ -8,6 +8,7 @@ export type SafeProps = {
address: string,
confirmations: number,
owners: List<Owner>,
dailyLimit: number,
}
export const makeSafe: RecordFactory<SafeProps> = Record({
@ -15,6 +16,7 @@ export const makeSafe: RecordFactory<SafeProps> = Record({
address: '',
confirmations: 0,
owners: List([]),
dailyLimit: 0,
})
export type Safe = RecordOf<SafeProps>

View File

@ -33,6 +33,7 @@ const deploySafe = async (safe: React$Component<{}>) => {
const fieldName = inputs[0]
const fieldOwners = inputs[1]
const fieldConfirmations = inputs[2]
const fieldDailyLimit = inputs[3]
TestUtils.Simulate.change(fieldOwners, { target: { value: '1' } })
const inputsExpanded = TestUtils.scryRenderedDOMComponentsWithTag(safe, 'input')
@ -41,6 +42,7 @@ const deploySafe = async (safe: React$Component<{}>) => {
TestUtils.Simulate.change(fieldName, { target: { value: 'Adolfo Safe' } })
TestUtils.Simulate.change(fieldConfirmations, { target: { value: '1' } })
TestUtils.Simulate.change(ownerName, { target: { value: 'Adolfo Eth Account' } })
TestUtils.Simulate.change(fieldDailyLimit, { target: { value: '10' } })
const form = TestUtils.findRenderedDOMComponentWithTag(safe, 'form')

View File

@ -24,6 +24,11 @@ class SafeBuilder {
return this
}
withDailyLimit(limit: number) {
this.safe = this.safe.set('dailyLimit', limit)
return this
}
withOwner(names: string[], adresses: string[]) {
const owners = buildOwnersFrom(names, adresses)
this.safe = this.safe.set('owners', owners)
@ -42,6 +47,7 @@ export class SafeFactory {
.withAddress('0x03db1a8b26d08df23337e9276a36b474510f0025')
.withName('Adol ICO Safe')
.withConfirmations(1)
.withDailyLimit(10)
.withOwner(['Adol Metamask'], ['0x03db1a8b26d08df23337e9276a36b474510f0023'])
.get()

View File

@ -23,27 +23,31 @@ const aStore = (initState) => {
const providerReducerTests = () => {
describe('Safe Actions[addSafe]', () => {
let store
let address
let formValues
beforeEach(() => {
store = aStore()
})
it('reducer should return SafeRecord from form values', () => {
// GIVEN
const address = '0x03db1a8b26d08df23337e9276a36b474510f0025'
const formValues = {
address = '0x03db1a8b26d08df23337e9276a36b474510f0025'
formValues = {
[SafeFields.FIELD_NAME]: 'Adol ICO Safe',
[SafeFields.FIELD_CONFIRMATIONS]: 1,
[SafeFields.FIELD_OWNERS]: 1,
[SafeFields.FIELD_DAILY_LIMIT]: 10,
[SafeFields.getOwnerAddressBy(0)]: '0x03db1a8b26d08df23337e9276a36b474510f0023',
[SafeFields.getOwnerNameBy(0)]: 'Adol Metamask',
address,
}
})
it('reducer should return SafeRecord from form values', () => {
// GIVEN in beforeEach method
// WHEN
store.dispatch(addSafe(
formValues[SafeFields.FIELD_NAME],
formValues.address,
formValues[SafeFields.FIELD_CONFIRMATIONS],
formValues[SafeFields.FIELD_DAILY_LIMIT],
getNamesFrom(formValues),
getAccountsFrom(formValues),
))
@ -54,22 +58,14 @@ const providerReducerTests = () => {
})
it('reducer loads information from localStorage', async () => {
// GIVEN
const address = '0x03db1a8b26d08df23337e9276a36b474510f0025'
const formValues = {
[SafeFields.FIELD_NAME]: 'Adol ICO Safe',
[SafeFields.FIELD_CONFIRMATIONS]: 1,
[SafeFields.FIELD_OWNERS]: 1,
[SafeFields.getOwnerAddressBy(0)]: '0x03db1a8b26d08df23337e9276a36b474510f0023',
[SafeFields.getOwnerNameBy(0)]: 'Adol Metamask',
address,
}
// GIVEN in beforeEach method
// WHEN
store.dispatch(addSafe(
formValues[SafeFields.FIELD_NAME],
formValues.address,
formValues[SafeFields.FIELD_CONFIRMATIONS],
formValues[SafeFields.FIELD_DAILY_LIMIT],
getNamesFrom(formValues),
getAccountsFrom(formValues),
))

View File

@ -19,6 +19,7 @@ const SafeTable = ({ safes }: Props) => (
<TableCell>Deployed Address</TableCell>
<TableCell numeric>Confirmations</TableCell>
<TableCell numeric>Number of owners</TableCell>
<TableCell numeric>Daily Limit</TableCell>
</TableRow>
</TableHead>
<TableBody>
@ -29,10 +30,11 @@ const SafeTable = ({ safes }: Props) => (
<Button variant="raised" size="small" color="primary">Open</Button>
</Link>
</TableCell>
<TableCell padding="none">{safe.name}</TableCell>
<TableCell padding="none">{safe.address}</TableCell>
<TableCell padding="none" numeric>{safe.confirmations}</TableCell>
<TableCell padding="none" numeric>{safe.owners.count()}</TableCell>
<TableCell padding="none">{safe.get('name')}</TableCell>
<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>
</TableRow>
))}
</TableBody>