Refactoring SendToken WIP

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

@@ -5,7 +5,6 @@ import { connect } from 'react-redux'
 import { type Safe } from '~/routes/safe/store/model/safe'
 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'
@@ -40,7 +39,7 @@ class EditDailyLimit extends React.PureComponent<Props, State> {
       const data = await getEditDailyLimitData(safeAddress, 0, Number(newDailyLimit))
       const to = await getDailyLimitAddress(safeAddress)
       const gnosisSafe = await getSafeEthereumInstance(safeAddress)
-      const nonce = signaturesViaMetamask() ? await gnosisSafe.nonce() : Date.now()
+      const nonce = await gnosisSafe.nonce()
       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 })

src/routes/safe/component/SendToken/ReviewTx/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 { TKN_DESTINATION_PARAM, TKN_VALUE_PARAM } from '~/routes/safe/component/SendToken/SendTokenForm/index'
@@ -20,8 +21,8 @@ const spinnerStyle = {
   minHeight: '50px',
 }
 
-const ReviewTx = ({ symbol }: Props) => ({ values, submitting }: FormProps) => (
-  <Block>
+const ReviewTx = ({ symbol }: Props) => (controls: React$Node, { values, submitting }: FormProps) => (
+  <OpenPaper controls={controls}>
     <Heading tag="h2">Review the move token funds</Heading>
     <Paragraph align="left">
       <Bold>Destination: </Bold> {values[TKN_DESTINATION_PARAM]}
@@ -32,7 +33,7 @@ const ReviewTx = ({ symbol }: Props) => ({ values, submitting }: FormProps) => (
     <Block style={spinnerStyle}>
       { submitting && <CircularProgress size={50} /> }
     </Block>
-  </Block>
+  </OpenPaper>
 )
 
 export default ReviewTx

src/routes/safe/component/SendToken/SendTokenForm/index.jsx

@@ -4,6 +4,7 @@ import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
 import { composeValidators, inLimit, mustBeFloat, required, greaterThan, mustBeEthereumAddress } from '~/components/forms/validator'
 import Block from '~/components/layout/Block'
+import OpenPaper from '~/components/Stepper/OpenPaper'
 import Heading from '~/components/layout/Heading'
 
 export const CONFIRMATIONS_ERROR = 'Number of confirmations can not be higher than the number of owners'
@@ -16,8 +17,8 @@ type Props = {
   symbol: string,
 }
 
-const SendTokenForm = ({ funds, symbol }: Props) => () => (
-  <Block margin="md">
+const SendTokenForm = ({ funds, symbol }: Props) => (controls: React$Node) => (
+  <OpenPaper controls={controls}>
     <Heading tag="h2" margin="lg">
       Send tokens Transaction
     </Heading>
@@ -44,7 +45,7 @@ const SendTokenForm = ({ funds, symbol }: Props) => () => (
         text="Amount of Tokens"
       />
     </Block>
-  </Block>
+  </OpenPaper>
 )
 
 export default SendTokenForm

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

@@ -10,7 +10,7 @@ import { type Token } from '~/routes/tokens/store/model/token'
 import { isEther } from '~/utils/tokens'
 import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
 import { toNative } from '~/logic/wallets/tokens'
-import { createTransaction } from '~/logic/safe/safeFrontendOperations'
+import { createTransaction, getSafeEthereumInstance } from '~/logic/safe/safeFrontendOperations'
 import actions, { type Actions } from './actions'
 import selector, { type SelectorProps } from './selector'
 import SendTokenForm, { TKN_DESTINATION_PARAM, TKN_VALUE_PARAM } from './SendTokenForm'
@@ -40,8 +40,10 @@ const getTransferData = async (tokenAddress: string, to: string, amount: BigNumb
 }
 
 const processTokenTransfer = async (safe: Safe, token: Token, to: string, amount: number, userAddress: string) => {
+  const safeAddress = safe.get('address')
+  const gnosisSafe = await getSafeEthereumInstance(safeAddress)
+  const nonce = await gnosisSafe.nonce()
   const symbol = token.get('symbol')
-  const nonce = Date.now()
   const name = `Send ${amount} ${symbol} to ${to}`
   const value = isEther(symbol) ? amount : 0
   const tokenAddress = token.get('address')