WA-238 Add Owner logic phase not updated the UI

src/routes/safe/component/AddOwner/AddOwnerForm/index.jsx

@@ -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

src/routes/safe/component/AddOwner/Review/index.jsx

@@ -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

src/routes/safe/component/AddOwner/actions.js

@@ -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,
+}

src/routes/safe/component/AddOwner/index.jsx

@@ -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)

src/routes/safe/component/AddOwner/selector.js

@@ -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,
+})

src/routes/safe/component/Safe/Owners.jsx

@@ -6,6 +6,7 @@ import Collapse from 'material-ui/transitions/Collapse'
 import ListItemText from '~/components/List/ListItemText'
 import List, { ListItem, ListItemIcon } from 'material-ui/List'
 import Avatar from 'material-ui/Avatar'
+import Button from '~/components/layout/Button'
 import Group from 'material-ui-icons/Group'
 import Person from 'material-ui-icons/Person'
 import ExpandLess from 'material-ui-icons/ExpandLess'
@@ -21,10 +22,13 @@ const styles = {
 
 type Props = Open & WithStyles & {
   owners: List<OwnerProps>,
+  onAddOwner: () => void,
 }
 
+export const ADD_OWNER_BUTTON_TEXT = 'Add'
+
 const Owners = openHoc(({
-  open, toggle, owners, classes,
+  open, toggle, owners, classes, onAddOwner,
 }: Props) => (
   <React.Fragment>
     <ListItem onClick={toggle}>
@@ -35,6 +39,13 @@ const Owners = openHoc(({
       <ListItemIcon>
         {open ? <ExpandLess /> : <ExpandMore />}
       </ListItemIcon>
+      <Button
+        variant="raised"
+        color="primary"
+        onClick={onAddOwner}
+      >
+        {ADD_OWNER_BUTTON_TEXT}
+      </Button>
     </ListItem>
     <Collapse in={open} timeout="auto" unmountOnExit>
       <List component="div" disablePadding>

src/routes/safe/component/Safe/index.jsx

@@ -13,6 +13,7 @@ import Withdrawn from '~/routes/safe/component/Withdrawn'
 import Transactions from '~/routes/safe/component/Transactions'
 import AddTransaction from '~/routes/safe/component/AddTransaction'
 import Threshold from '~/routes/safe/component/Threshold'
+import AddOwner from '~/routes/safe/component/AddOwner'
 
 import Address from './Address'
 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} /> })
   }
 
+  onAddOwner = () => {
+    const { safe } = this.props
+
+    this.setState({ component: <AddOwner threshold={safe.get('confirmations')} safe={safe} /> })
+  }
+
   render() {
     const { safe, balance } = this.props
     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>
           <List style={listStyle}>
             <Balance balance={balance} />
-            <Owners owners={safe.owners} />
+            <Owners owners={safe.owners} onAddOwner={this.onAddOwner} />
             <Confirmations confirmations={safe.get('confirmations')} onEditThreshold={this.onEditThreshold} />
             <Address address={safe.get('address')} />
             <DailyLimit balance={balance} dailyLimit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />

src/routes/safe/component/Transactions/index.jsx

@@ -25,6 +25,7 @@ class Transactions extends React.Component<Props, {}> {
     await sleep(1200)
     fetchTransactions()
     fetchThreshold(safeAddress)
+    // fetchOwners(safeAddress)
   }
 
   render() {