Refactoring DailyLimit changes

src/routes/safe/component/EditDailyLimit/EditDailyLimitForm/index.jsx

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import Block from '~/components/layout/Block'
 import Heading from '~/components/layout/Heading'
+import OpenPaper from '~/components/Stepper/OpenPaper'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
 import { composeValidators, minValue, mustBeFloat, required } from '~/components/forms/validator'
@@ -12,8 +13,8 @@ type EditDailyLimitProps = {
   dailyLimit: string,
 }
 
-const EditDailyLimitForm = ({ dailyLimit }: EditDailyLimitProps) => () => (
-  <Block margin="md">
+const EditDailyLimitForm = ({ dailyLimit }: EditDailyLimitProps) => (controls: React$Node) => (
+  <OpenPaper controls={controls}>
     <Heading tag="h2" margin="lg">
       {'Change safe\'s daily limit'}
     </Heading>
@@ -30,7 +31,7 @@ const EditDailyLimitForm = ({ dailyLimit }: EditDailyLimitProps) => () => (
         text="Safe's daily limit"
       />
     </Block>
-  </Block>
+  </OpenPaper>
 )
 
 export default EditDailyLimitForm

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

@@ -3,6 +3,7 @@ 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 OpenPaper from '~/components/Stepper/OpenPaper'
 import Heading from '~/components/layout/Heading'
 import Paragraph from '~/components/layout/Paragraph'
 import { EDIT_DAILY_LIMIT_PARAM } from '~/routes/safe/component/EditDailyLimit/EditDailyLimitForm'
@@ -16,8 +17,8 @@ const spinnerStyle = {
   minHeight: '50px',
 }
 
-const Review = () => ({ values, submitting }: FormProps) => (
-  <Block>
+const Review = () => (controls: React$Node, { values, submitting }: FormProps) => (
+  <OpenPaper controls={controls}>
     <Heading tag="h2">Review the DailyLimit operation</Heading>
     <Paragraph align="left">
       <Bold>The new daily limit will be: </Bold> {values[EDIT_DAILY_LIMIT_PARAM]}
@@ -25,7 +26,7 @@ const Review = () => ({ values, submitting }: FormProps) => (
     <Block style={spinnerStyle}>
       { submitting && <CircularProgress size={50} /> }
     </Block>
-  </Block>
+  </OpenPaper>
 )
 
 export default Review

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

@@ -3,8 +3,9 @@ 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 { createTransaction } from '~/logic/safe/safeFrontendOperations'
+import { createTransaction, getSafeEthereumInstance } from '~/logic/safe/safeFrontendOperations'
 import { getEditDailyLimitData, getDailyLimitAddress } from '~/logic/contracts/dailyLimitContracts'
+import { signaturesViaMetamask } from '~/config'
 import EditDailyLimitForm, { EDIT_DAILY_LIMIT_PARAM } from './EditDailyLimitForm'
 import selector, { type SelectorProps } from './selector'
 import actions, { type Actions } from './actions'
@@ -38,7 +39,8 @@ class EditDailyLimit extends React.PureComponent<Props, State> {
       const safeAddress = safe.get('address')
       const data = await getEditDailyLimitData(safeAddress, 0, Number(newDailyLimit))
       const to = await getDailyLimitAddress(safeAddress)
-      const nonce = Date.now()
+      const gnosisSafe = await getSafeEthereumInstance(safeAddress)
+      const nonce = signaturesViaMetamask() ? await gnosisSafe.nonce() : Date.now()
       await createTransaction(safe, `Change Safe's daily limit to ${newDailyLimit} [${nonce}]`, to, 0, nonce, userAddress, data)
       await this.props.fetchTransactions(safeAddress)
       this.setState({ done: true })