Fixing layout on AddOwner component

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

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
 import Field from '~/components/forms/Field'
+import OpenPaper from '~/components/Stepper/OpenPaper'
 import TextField from '~/components/forms/TextField'
 import Checkbox from '~/components/forms/Checkbox'
 import { composeValidators, required, mustBeEthereumAddress, uniqueAddress } from '~/components/forms/validator'
@@ -29,8 +30,8 @@ type Props = {
   addresses: string[]
 }
 
-const AddOwnerForm = ({ addresses, numOwners, threshold }: Props) => () => (
+const AddOwnerForm = ({ addresses, numOwners, threshold }: Props) => (controls: React$Node) => (
-  <Block margin="md">
+  <OpenPaper controls={controls}>
     <Heading tag="h2" margin="lg">
       Add Owner
     </Heading>
@@ -65,7 +66,7 @@ const AddOwnerForm = ({ addresses, numOwners, threshold }: Props) => () => (
       />
       <Block>Increase threshold?</Block>
     </Block>
-  </Block>
+  </OpenPaper>
 )
 
 export default AddOwnerForm

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

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

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

@@ -7,6 +7,7 @@ import { type Safe } from '~/routes/safe/store/model/safe'
 import { type Owner, makeOwner } from '~/routes/safe/store/model/owner'
 import { setOwners } from '~/utils/localStorage'
 import { getSafeEthereumInstance, createTransaction } from '~/logic/safe/safeFrontendOperations'
+import { signaturesViaMetamask } from '~/config'
 import AddOwnerForm, { NAME_PARAM, OWNER_ADDRESS_PARAM, INCREASE_PARAM } from './AddOwnerForm'
 import Review from './Review'
 import selector, { type SelectorProps } from './selector'
@@ -36,12 +37,14 @@ const getOwnerAddressesFrom = (owners: List<Owner>) => {
 }
 
 export const addOwner = async (values: Object, safe: Safe, threshold: number, executor: string) => {
-  const nonce = Date.now()
+  const safeAddress = safe.get('address')
+  const gnosisSafe = await getSafeEthereumInstance(safeAddress)
+  const nonce = signaturesViaMetamask() ? await gnosisSafe.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, executor, data)
   setOwners(safeAddress, safe.get('owners').push(makeOwner({ name: newOwnerName, address: newOwnerAddress })))