Create remove owner modal window

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.jsx

@@ -0,0 +1,114 @@
+// @flow
+import React, { useState, useEffect } from 'react'
+import { List } from 'immutable'
+import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
+import Modal from '~/components/Modal'
+import { type Safe } from '~/routes/safe/store/models/safe'
+import { type Owner, makeOwner } from '~/routes/safe/store/models/owner'
+import { setOwners } from '~/logic/safe/utils'
+import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
+import CheckOwner from './screens/CheckOwner'
+import { withStyles } from '@material-ui/core/styles'
+
+const styles = () => ({
+  biggerModalWindow: {
+    width: '775px',
+    minHeight: '500px',
+    position: 'static',
+  },
+})
+
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  isOpen: boolean,
+  safeAddress: string,
+  safeName: string,
+  ownerAddress: string,
+  ownerName: string,
+  owners: List<Owner>,
+  threshold: number,
+  network: string,
+  userAddress: string,
+  createTransaction: Function,
+}
+type ActiveScreen = 'checkOwner' | 'selectThreshold' | 'reviewRemoveOwner'
+
+const RemoveOwner = ({
+  onClose,
+  isOpen,
+  classes,
+  safeAddress,
+  safeName,
+  ownerAddress,
+  ownerName,
+  owners,
+  threshold,
+  network,
+  userAddress,
+  createTransaction,
+}: Props) => {
+  const [activeScreen, setActiveScreen] = useState<ActiveScreen>('checkOwner')
+  const [values, setValues] = useState<Object>({})
+
+  useEffect(
+    () => () => {
+      setActiveScreen('checkOwner')
+      setValues({})
+    },
+    [isOpen],
+  )
+
+  const onClickBack = () => {
+    if (activeScreen === 'reviewRemoveOwner') {
+      setActiveScreen('selectThreshold')
+    } else if (activeScreen === 'selectThreshold') {
+      setActiveScreen('checkOwner')
+    }
+  }
+
+  const ownerSubmitted = (newValues: Object) => {
+    setActiveScreen('selectThreshold')
+  }
+
+  const thresholdSubmitted = (newValues: Object) => {
+    values.threshold = newValues.threshold
+    setValues(values)
+    setActiveScreen('reviewRemoveOwner')
+  }
+
+  return (
+    <React.Fragment>
+      <SharedSnackbarConsumer>
+        {({ openSnackbar }) => {
+          const onRemoveOwner = async () => {
+          }
+
+          return (
+            <Modal
+              title="Remove owner from Safe"
+              description="Remove owner from Safe"
+              handleClose={onClose}
+              open={isOpen}
+              paperClassName={classes.biggerModalWindow}
+            >
+              <React.Fragment>
+                {activeScreen === 'checkOwner' && (
+                  <CheckOwner
+                    onClose={onClose}
+                    ownerAddress={ownerAddress}
+                    ownerName={ownerName}
+                    network={network}
+                    onSubmit={ownerSubmitted}
+                  />
+                )}
+              </React.Fragment>
+            </Modal>
+          )
+        }}
+      </SharedSnackbarConsumer>
+    </React.Fragment>
+  )
+}
+
+export default withStyles(styles)(RemoveOwner)

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -20,6 +20,7 @@ import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import Button from '~/components/layout/Button'
 import AddOwnerModal from './AddOwnerModal'
+import RemoveOwnerModal from './RemoveOwnerModal'
 import OwnerAddressTableCell from './OwnerAddressTableCell'
 import type { Owner } from '~/routes/safe/store/models/owner'
 import {
@@ -156,6 +157,19 @@ class ManageOwners extends React.Component<Props, State> {
           userAddress={userAddress}
           createTransaction={createTransaction}
         />
+        <RemoveOwnerModal
+          onClose={this.onHide('RemoveOwner')}
+          isOpen={showRemoveOwner}
+          safeAddress={safeAddress}
+          safeName={safeName}
+          ownerAddress={selectedOwnerAddress}
+          ownerName={selectedOwnerName}
+          owners={owners}
+          threshold={threshold}
+          network={network}
+          userAddress={userAddress}
+          createTransaction={createTransaction}
+        />
       </React.Fragment>
     )
   }