Refactor removing owners

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

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import Field from '~/components/forms/Field'
 import SnackbarContent from '~/components/SnackbarContent'
+import OpenPaper from '~/components/Stepper/OpenPaper'
 import Checkbox from '~/components/forms/Checkbox'
 import Block from '~/components/layout/Block'
 import Heading from '~/components/layout/Heading'
@@ -18,8 +19,8 @@ type Props = {
 
 const RemoveOwnerForm = ({
   numOwners, threshold, name, disabled, pendingTransactions,
-}: Props) => () => (
-  <Block margin="md">
+}: Props) => (controls: React$Node) => (
+  <OpenPaper controls={controls}>
     <Heading tag="h2" margin="lg">
       Remove Owner { !!name && name }
     </Heading>
@@ -41,7 +42,7 @@ const RemoveOwnerForm = ({
       />
       <Block>{disabled && '(disabled) '}Decrease threshold?</Block>
     </Block>
-  </Block>
+  </OpenPaper>
 )
 
 export default RemoveOwnerForm

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

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import Block from '~/components/layout/Block'
+import OpenPaper from '~/components/Stepper/OpenPaper'
 import Bold from '~/components/layout/Bold'
 import Heading from '~/components/layout/Heading'
 import Paragraph from '~/components/layout/Paragraph'
@@ -20,13 +21,13 @@ const spinnerStyle = {
   minHeight: '50px',
 }
 
-const Review = ({ name }: Props) => ({ values, submitting }: FormProps) => {
+const Review = ({ name }: Props) => (controls: React$Node, { 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>
+    <OpenPaper controls={controls}>
       <Heading tag="h2">Review the Remove Owner operation</Heading>
       <Paragraph align="left">
         <Bold>Owner Name: </Bold> {name}
@@ -37,7 +38,7 @@ const Review = ({ name }: Props) => ({ values, submitting }: FormProps) => {
       <Block style={spinnerStyle}>
         { submitting && <CircularProgress size={50} /> }
       </Block>
-    </Block>
+    </OpenPaper>
   )
 }
 

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

@@ -4,6 +4,7 @@ import Stepper from '~/components/Stepper'
 import { connect } from 'react-redux'
 import { type Safe } from '~/routes/safe/store/model/safe'
 import { getSafeEthereumInstance, createTransaction } from '~/logic/safe/safeFrontendOperations'
+import { signaturesViaMetamask } from '~/config'
 import RemoveOwnerForm, { DECREASE_PARAM } from './RemoveOwnerForm'
 import Review from './Review'
 import selector, { type SelectorProps } from './selector'
@@ -41,10 +42,10 @@ export const removeOwner = async (
   name: string,
   executor: string,
 ) => {
-  const nonce = Date.now()
-  const newThreshold = values[DECREASE_PARAM] ? threshold - 1 : threshold
   const safeAddress = safe.get('address')
   const gnosisSafe = await getSafeEthereumInstance(safeAddress)
+  const nonce = signaturesViaMetamask() ? await gnosisSafe.nonce() : Date.now()
+  const newThreshold = values[DECREASE_PARAM] ? threshold - 1 : threshold
   const storedOwners = await gnosisSafe.getOwners()
   const index = storedOwners.findIndex(ownerAddress => ownerAddress === userToRemove)
   const prevAddress = index === 0 ? SENTINEL_ADDRESS : storedOwners[index - 1]