WA-234 RemoveOwner component

src/routes/safe/component/RemoveOwner/RemoveOwnerForm/index.jsx

@@ -0,0 +1,35 @@
+// @flow
+import * as React from 'react'
+import Field from '~/components/forms/Field'
+import Checkbox from '~/components/forms/Checkbox'
+import Block from '~/components/layout/Block'
+import Heading from '~/components/layout/Heading'
+
+export const DECREASE_PARAM = 'decrease'
+
+type Props = {
+  numOwners: number,
+  threshold: number,
+  name: string,
+}
+
+const RemoveOwnerForm = ({ numOwners, threshold, name }: Props) => () => (
+  <Block margin="md">
+    <Heading tag="h2" margin="lg">
+      Remove Owner { !!name && name }
+    </Heading>
+    <Heading tag="h4" margin="lg">
+      {`Actual number of owners: ${numOwners}, threhsold of safe: ${threshold}`}
+    </Heading>
+    <Block margin="md">
+      <Field
+        name={DECREASE_PARAM}
+        component={Checkbox}
+        type="checkbox"
+      />
+      <Block>Decrease threshold?</Block>
+    </Block>
+  </Block>
+)
+
+export default RemoveOwnerForm

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

@@ -0,0 +1,44 @@
+// @flow
+import * as React from 'react'
+import CircularProgress from '@material-ui/core/CircularProgress'
+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 { DECREASE_PARAM } from '~/routes/safe/component/RemoveOwner/RemoveOwnerForm'
+
+type Props = {
+  name: string,
+}
+
+type FormProps = {
+  values: Object,
+  submitting: boolean,
+}
+
+const spinnerStyle = {
+  minHeight: '50px',
+}
+
+const Review = ({ name }: Props) => ({ values, submitting }: FormProps) => {
+  const text = values[DECREASE_PARAM]
+    ? 'This operation will decrease 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> {name}
+      </Paragraph>
+      <Paragraph align="left">
+        <Bold>{text}</Bold>
+      </Paragraph>
+      <Block style={spinnerStyle}>
+        { submitting && <CircularProgress size={50} /> }
+      </Block>
+    </Block>
+  )
+}
+
+export default Review

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

@@ -0,0 +1,12 @@
+// @flow
+import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions'
+
+type FetchTransactions = typeof fetchTransactions
+
+export type Actions = {
+  fetchTransactions: FetchTransactions,
+}
+
+export default {
+  fetchTransactions,
+}

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

@@ -0,0 +1,93 @@
+// @flow
+import * as React from 'react'
+import Stepper from '~/components/Stepper'
+import { connect } from 'react-redux'
+import { type Safe } from '~/routes/safe/store/model/safe'
+import { getSafeEthereumInstance, createTransaction } from '~/routes/safe/component/AddTransaction/createTransactions'
+import RemoveOwnerForm, { DECREASE_PARAM } from './RemoveOwnerForm'
+import Review from './Review'
+import selector, { type SelectorProps } from './selector'
+import actions, { type Actions } from './actions'
+
+const getSteps = () => [
+  'Fill Owner Form', 'Review Add order operation',
+]
+
+type Props = SelectorProps & Actions & {
+  safe: Safe,
+  threshold: number,
+  name: string,
+  userToRemove: string,
+}
+
+type State = {
+  done: boolean,
+}
+
+const SENTINEL_ADDRESS = '0x0000000000000000000000000000000000000001'
+export const REMOVE_OWNER_RESET_BUTTON_TEXT = 'RESET'
+
+class RemoveOwner extends React.Component<Props, State> {
+  state = {
+    done: false,
+  }
+
+  onRemoveOwner = async (values: Object) => {
+    try {
+      const {
+        safe, threshold, executor, fetchTransactions, userToRemove, name,
+      } = this.props
+      const nonce = Date.now()
+      const newThreshold = values[DECREASE_PARAM] ? threshold - 1 : threshold
+      const safeAddress = safe.get('address')
+      const gnosisSafe = await getSafeEthereumInstance(safeAddress)
+
+      const storedOwners = await gnosisSafe.getOwners()
+      const index = storedOwners.findIndex(ownerAddress => ownerAddress === userToRemove)
+      const prevAddress = index === 0 ? SENTINEL_ADDRESS : storedOwners[index - 1]
+      const data = gnosisSafe.contract.removeOwner.getData(prevAddress, userToRemove, newThreshold)
+
+      const text = name || userToRemove
+      await createTransaction(safe, `Remove Owner ${text}`, safeAddress, 0, nonce, executor, data)
+
+      fetchTransactions()
+      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, name } = this.props
+    const { done } = this.state
+    const steps = getSteps()
+    const finishedButton = <Stepper.FinishButton title={REMOVE_OWNER_RESET_BUTTON_TEXT} />
+
+    return (
+      <React.Fragment>
+        <Stepper
+          finishedTransaction={done}
+          finishedButton={finishedButton}
+          onSubmit={this.onRemoveOwner}
+          steps={steps}
+          onReset={this.onReset}
+        >
+          <Stepper.Page numOwners={safe.get('owners').count()} threshold={safe.get('threshold')} name={name}>
+            { RemoveOwnerForm }
+          </Stepper.Page>
+          <Stepper.Page name={name}>
+            { Review }
+          </Stepper.Page>
+        </Stepper>
+      </React.Fragment>
+    )
+  }
+}
+
+export default connect(selector, actions)(RemoveOwner)

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

@@ -0,0 +1,11 @@
+// @flow
+import { createStructuredSelector } from 'reselect'
+import { userAccountSelector } from '~/wallets/store/selectors/index'
+
+export type SelectorProps = {
+  executor: userAccountSelector,
+}
+
+export default createStructuredSelector({
+  executor: userAccountSelector,
+})