WA-238 Add Owner logic phase not updated the UI
This commit is contained in:
parent
2609d30058
commit
4b2e0d3beb
|
@ -0,0 +1,71 @@
|
||||||
|
// @flow
|
||||||
|
import * as React from 'react'
|
||||||
|
import Field from '~/components/forms/Field'
|
||||||
|
import TextField from '~/components/forms/TextField'
|
||||||
|
import Checkbox from '~/components/forms/Checkbox'
|
||||||
|
import { composeValidators, required, mustBeEthereumAddress, uniqueAddress } from '~/components/forms/validator'
|
||||||
|
import Block from '~/components/layout/Block'
|
||||||
|
import Heading from '~/components/layout/Heading'
|
||||||
|
|
||||||
|
export const CONFIRMATIONS_ERROR = 'Number of confirmations can not be higher than the number of owners'
|
||||||
|
|
||||||
|
export const NAME_PARAM = 'name'
|
||||||
|
export const OWNER_ADDRESS_PARAM = 'ownerAddress'
|
||||||
|
export const INCREASE_PARAM = 'increase'
|
||||||
|
|
||||||
|
export const safeFieldsValidation = (values: Object) => {
|
||||||
|
const errors = {}
|
||||||
|
|
||||||
|
if (Number.parseInt(values.owners, 10) < Number.parseInt(values.confirmations, 10)) {
|
||||||
|
errors.confirmations = CONFIRMATIONS_ERROR
|
||||||
|
}
|
||||||
|
|
||||||
|
return errors
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
numOwners: number,
|
||||||
|
threshold: number,
|
||||||
|
addresses: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const AddOwnerForm = ({ addresses, numOwners, threshold }: Props) => () => (
|
||||||
|
<Block margin="md">
|
||||||
|
<Heading tag="h2" margin="lg">
|
||||||
|
Add Owner
|
||||||
|
</Heading>
|
||||||
|
<Heading tag="h4" margin="lg">
|
||||||
|
{`Actual number of owners: ${numOwners}, with threshold: ${threshold}`}
|
||||||
|
</Heading>
|
||||||
|
<Block margin="md">
|
||||||
|
<Field
|
||||||
|
name={NAME_PARAM}
|
||||||
|
component={TextField}
|
||||||
|
type="text"
|
||||||
|
validate={required}
|
||||||
|
placeholder="Owner Name*"
|
||||||
|
text="Owner Name*"
|
||||||
|
/>
|
||||||
|
</Block>
|
||||||
|
<Block margin="md">
|
||||||
|
<Field
|
||||||
|
name={OWNER_ADDRESS_PARAM}
|
||||||
|
component={TextField}
|
||||||
|
type="text"
|
||||||
|
validate={composeValidators(required, mustBeEthereumAddress, uniqueAddress(addresses))}
|
||||||
|
placeholder="Owner address*"
|
||||||
|
text="Owner address*"
|
||||||
|
/>
|
||||||
|
</Block>
|
||||||
|
<Block margin="md">
|
||||||
|
<Field
|
||||||
|
name={INCREASE_PARAM}
|
||||||
|
component={Checkbox}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
<Block>Increase owner?</Block>
|
||||||
|
</Block>
|
||||||
|
</Block>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default AddOwnerForm
|
|
@ -0,0 +1,43 @@
|
||||||
|
// @flow
|
||||||
|
import * as React from 'react'
|
||||||
|
import { CircularProgress } from 'material-ui/Progress'
|
||||||
|
import Block from '~/components/layout/Block'
|
||||||
|
import Bold from '~/components/layout/Bold'
|
||||||
|
import Heading from '~/components/layout/Heading'
|
||||||
|
import Paragraph from '~/components/layout/Paragraph'
|
||||||
|
import { NAME_PARAM, OWNER_ADDRESS_PARAM, INCREASE_PARAM } from '~/routes/safe/component/AddOwner/AddOwnerForm'
|
||||||
|
|
||||||
|
type FormProps = {
|
||||||
|
values: Object,
|
||||||
|
submitting: boolean,
|
||||||
|
}
|
||||||
|
|
||||||
|
const spinnerStyle = {
|
||||||
|
minHeight: '50px',
|
||||||
|
}
|
||||||
|
|
||||||
|
const Review = () => ({ values, submitting }: FormProps) => {
|
||||||
|
const text = values[INCREASE_PARAM]
|
||||||
|
? 'This operation will increase the threshold of the safe'
|
||||||
|
: 'This operation will not modify the threshold of the safe'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Block>
|
||||||
|
<Heading tag="h2">Review the Add Owner operation</Heading>
|
||||||
|
<Paragraph align="left">
|
||||||
|
<Bold>Owner Name: </Bold> {values[NAME_PARAM]}
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph align="left">
|
||||||
|
<Bold>Owner Address: </Bold> {values[OWNER_ADDRESS_PARAM]}
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph align="left">
|
||||||
|
<Bold>{text}</Bold>
|
||||||
|
</Paragraph>
|
||||||
|
<Block style={spinnerStyle}>
|
||||||
|
{ submitting && <CircularProgress size={50} /> }
|
||||||
|
</Block>
|
||||||
|
</Block>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Review
|
|
@ -0,0 +1,16 @@
|
||||||
|
// @flow
|
||||||
|
import fetchThreshold from '~/routes/safe/store/actions/fetchThreshold'
|
||||||
|
import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions'
|
||||||
|
|
||||||
|
type FetchThreshold = typeof fetchThreshold
|
||||||
|
type FetchTransactions = typeof fetchTransactions
|
||||||
|
|
||||||
|
export type Actions = {
|
||||||
|
fetchThreshold: FetchThreshold,
|
||||||
|
fetchTransactions: FetchTransactions,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
fetchThreshold,
|
||||||
|
fetchTransactions,
|
||||||
|
}
|
|
@ -0,0 +1,99 @@
|
||||||
|
// @flow
|
||||||
|
import * as React from 'react'
|
||||||
|
import { List } from 'immutable'
|
||||||
|
import Stepper from '~/components/Stepper'
|
||||||
|
import { sleep } from '~/utils/timer'
|
||||||
|
import { connect } from 'react-redux'
|
||||||
|
import { type Safe } from '~/routes/safe/store/model/safe'
|
||||||
|
import { type Owner } from '~/routes/safe/store/model/owner'
|
||||||
|
import { getSafeEthereumInstance, createTransaction } from '~/routes/safe/component/AddTransaction/createTransactions'
|
||||||
|
import AddOwnerForm, { NAME_PARAM, OWNER_ADDRESS_PARAM, INCREASE_PARAM } from './AddOwnerForm'
|
||||||
|
import Review from './Review'
|
||||||
|
import selector, { type SelectorProps } from './selector'
|
||||||
|
import actions, { type Actions } from './actions'
|
||||||
|
|
||||||
|
const getSteps = () => [
|
||||||
|
'Fill Owner Form', 'Review Withdrawn',
|
||||||
|
]
|
||||||
|
|
||||||
|
type Props = SelectorProps & Actions & {
|
||||||
|
safe: Safe,
|
||||||
|
threshold: number,
|
||||||
|
}
|
||||||
|
|
||||||
|
type State = {
|
||||||
|
done: boolean,
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ADD_OWNER_RESET_BUTTON_TEXT = 'RESET'
|
||||||
|
|
||||||
|
const getOwnerAddressesFrom = (owners: List<Owner>) => {
|
||||||
|
if (!owners) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
|
return owners.map((owner: Owner) => owner.get('address'))
|
||||||
|
}
|
||||||
|
|
||||||
|
class AddOwner extends React.Component<Props, State> {
|
||||||
|
state = {
|
||||||
|
done: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddOwner = async (values: Object) => {
|
||||||
|
try {
|
||||||
|
const {
|
||||||
|
safe, threshold, userAddress, fetchTransactions, // fetchOwners
|
||||||
|
} = this.props
|
||||||
|
const nonce = Date.now()
|
||||||
|
const newThreshold = values[INCREASE_PARAM] ? threshold + 1 : threshold
|
||||||
|
const newOwnerAddress = values[OWNER_ADDRESS_PARAM]
|
||||||
|
const newOwnerName = values[NAME_PARAM]
|
||||||
|
const safeAddress = safe.get('address')
|
||||||
|
const gnosisSafe = await getSafeEthereumInstance(safeAddress)
|
||||||
|
const data = gnosisSafe.contract.addOwnerWithThreshold.getData(newOwnerAddress, newThreshold)
|
||||||
|
await createTransaction(safe, `Add Owner ${newOwnerName}`, safeAddress, 0, nonce, userAddress, data)
|
||||||
|
await sleep(1500)
|
||||||
|
fetchTransactions()
|
||||||
|
// fetchOwners(safeAddress)
|
||||||
|
this.setState({ done: true })
|
||||||
|
} catch (error) {
|
||||||
|
this.setState({ done: false })
|
||||||
|
// eslint-disable-next-line
|
||||||
|
console.log('Error while adding owner ' + error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onReset = () => {
|
||||||
|
this.setState({ done: false })
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { safe } = this.props
|
||||||
|
const { done } = this.state
|
||||||
|
const steps = getSteps()
|
||||||
|
const finishedButton = <Stepper.FinishButton title={ADD_OWNER_RESET_BUTTON_TEXT} />
|
||||||
|
const addresses = getOwnerAddressesFrom(safe.get('owners'))
|
||||||
|
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<Stepper
|
||||||
|
finishedTransaction={done}
|
||||||
|
finishedButton={finishedButton}
|
||||||
|
onSubmit={this.onAddOwner}
|
||||||
|
steps={steps}
|
||||||
|
onReset={this.onReset}
|
||||||
|
>
|
||||||
|
<Stepper.Page numOwners={safe.get('owners').count()} threshold={safe.get('confirmations')} addresses={addresses}>
|
||||||
|
{ AddOwnerForm }
|
||||||
|
</Stepper.Page>
|
||||||
|
<Stepper.Page>
|
||||||
|
{ Review }
|
||||||
|
</Stepper.Page>
|
||||||
|
</Stepper>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(selector, actions)(AddOwner)
|
|
@ -0,0 +1,11 @@
|
||||||
|
// @flow
|
||||||
|
import { createStructuredSelector } from 'reselect'
|
||||||
|
import { userAccountSelector } from '~/wallets/store/selectors/index'
|
||||||
|
|
||||||
|
export type SelectorProps = {
|
||||||
|
userAddress: userAccountSelector,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default createStructuredSelector({
|
||||||
|
userAddress: userAccountSelector,
|
||||||
|
})
|
|
@ -6,6 +6,7 @@ import Collapse from 'material-ui/transitions/Collapse'
|
||||||
import ListItemText from '~/components/List/ListItemText'
|
import ListItemText from '~/components/List/ListItemText'
|
||||||
import List, { ListItem, ListItemIcon } from 'material-ui/List'
|
import List, { ListItem, ListItemIcon } from 'material-ui/List'
|
||||||
import Avatar from 'material-ui/Avatar'
|
import Avatar from 'material-ui/Avatar'
|
||||||
|
import Button from '~/components/layout/Button'
|
||||||
import Group from 'material-ui-icons/Group'
|
import Group from 'material-ui-icons/Group'
|
||||||
import Person from 'material-ui-icons/Person'
|
import Person from 'material-ui-icons/Person'
|
||||||
import ExpandLess from 'material-ui-icons/ExpandLess'
|
import ExpandLess from 'material-ui-icons/ExpandLess'
|
||||||
|
@ -21,10 +22,13 @@ const styles = {
|
||||||
|
|
||||||
type Props = Open & WithStyles & {
|
type Props = Open & WithStyles & {
|
||||||
owners: List<OwnerProps>,
|
owners: List<OwnerProps>,
|
||||||
|
onAddOwner: () => void,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const ADD_OWNER_BUTTON_TEXT = 'Add'
|
||||||
|
|
||||||
const Owners = openHoc(({
|
const Owners = openHoc(({
|
||||||
open, toggle, owners, classes,
|
open, toggle, owners, classes, onAddOwner,
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<ListItem onClick={toggle}>
|
<ListItem onClick={toggle}>
|
||||||
|
@ -35,6 +39,13 @@ const Owners = openHoc(({
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
{open ? <ExpandLess /> : <ExpandMore />}
|
{open ? <ExpandLess /> : <ExpandMore />}
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
|
<Button
|
||||||
|
variant="raised"
|
||||||
|
color="primary"
|
||||||
|
onClick={onAddOwner}
|
||||||
|
>
|
||||||
|
{ADD_OWNER_BUTTON_TEXT}
|
||||||
|
</Button>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||||
<List component="div" disablePadding>
|
<List component="div" disablePadding>
|
||||||
|
|
|
@ -13,6 +13,7 @@ import Withdrawn from '~/routes/safe/component/Withdrawn'
|
||||||
import Transactions from '~/routes/safe/component/Transactions'
|
import Transactions from '~/routes/safe/component/Transactions'
|
||||||
import AddTransaction from '~/routes/safe/component/AddTransaction'
|
import AddTransaction from '~/routes/safe/component/AddTransaction'
|
||||||
import Threshold from '~/routes/safe/component/Threshold'
|
import Threshold from '~/routes/safe/component/Threshold'
|
||||||
|
import AddOwner from '~/routes/safe/component/AddOwner'
|
||||||
|
|
||||||
import Address from './Address'
|
import Address from './Address'
|
||||||
import Balance from './Balance'
|
import Balance from './Balance'
|
||||||
|
@ -66,6 +67,12 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
|
||||||
this.setState({ component: <Threshold numOwners={safe.get('owners').count()} safe={safe} onReset={this.onListTransactions} /> })
|
this.setState({ component: <Threshold numOwners={safe.get('owners').count()} safe={safe} onReset={this.onListTransactions} /> })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onAddOwner = () => {
|
||||||
|
const { safe } = this.props
|
||||||
|
|
||||||
|
this.setState({ component: <AddOwner threshold={safe.get('confirmations')} safe={safe} /> })
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { safe, balance } = this.props
|
const { safe, balance } = this.props
|
||||||
const { component } = this.state
|
const { component } = this.state
|
||||||
|
@ -75,7 +82,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
|
||||||
<Col sm={12} top="xs" md={5} margin="xl" overflow>
|
<Col sm={12} top="xs" md={5} margin="xl" overflow>
|
||||||
<List style={listStyle}>
|
<List style={listStyle}>
|
||||||
<Balance balance={balance} />
|
<Balance balance={balance} />
|
||||||
<Owners owners={safe.owners} />
|
<Owners owners={safe.owners} onAddOwner={this.onAddOwner} />
|
||||||
<Confirmations confirmations={safe.get('confirmations')} onEditThreshold={this.onEditThreshold} />
|
<Confirmations confirmations={safe.get('confirmations')} onEditThreshold={this.onEditThreshold} />
|
||||||
<Address address={safe.get('address')} />
|
<Address address={safe.get('address')} />
|
||||||
<DailyLimit balance={balance} dailyLimit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />
|
<DailyLimit balance={balance} dailyLimit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />
|
||||||
|
|
|
@ -25,6 +25,7 @@ class Transactions extends React.Component<Props, {}> {
|
||||||
await sleep(1200)
|
await sleep(1200)
|
||||||
fetchTransactions()
|
fetchTransactions()
|
||||||
fetchThreshold(safeAddress)
|
fetchThreshold(safeAddress)
|
||||||
|
// fetchOwners(safeAddress)
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
Loading…
Reference in New Issue