(Feature) - Replaces createProxy with createProxyWithNonce method no safe creation

src/logic/contracts/safeContracts.ts

@@ -74,24 +74,25 @@ export const getSafeMasterContract = async () => {
   return safeMaster
 }
 
-export const getSafeDeploymentTransaction = (safeAccounts, numConfirmations) => {
+export const getSafeDeploymentTransaction = (safeAccounts: string[], numConfirmations: number, safeCreationSalt: number) => {
   const gnosisSafeData = safeMaster.methods
     .setup(safeAccounts, numConfirmations, ZERO_ADDRESS, '0x', DEFAULT_FALLBACK_HANDLER_ADDRESS, ZERO_ADDRESS, 0, ZERO_ADDRESS)
     .encodeABI()
 
-  return proxyFactoryMaster.methods.createProxy(safeMaster.options.address, gnosisSafeData)
+  return proxyFactoryMaster.methods.createProxyWithNonce(safeMaster.options.address, gnosisSafeData, safeCreationSalt)
 }
 
 export const estimateGasForDeployingSafe = async (
-  safeAccounts,
-  numConfirmations,
-  userAccount,
+  safeAccounts: string[],
+  numConfirmations: number,
+  userAccount: string,
+  safeCreationSalt: number
 ) => {
   const gnosisSafeData = await safeMaster.methods
     .setup(safeAccounts, numConfirmations, ZERO_ADDRESS, '0x', DEFAULT_FALLBACK_HANDLER_ADDRESS, ZERO_ADDRESS, 0, ZERO_ADDRESS)
     .encodeABI()
   const proxyFactoryData = proxyFactoryMaster.methods
-    .createProxy(safeMaster.options.address, gnosisSafeData)
+    .createProxyWithNonce(safeMaster.options.address, gnosisSafeData, safeCreationSalt)
     .encodeABI()
   const gas = await calculateGasOf(proxyFactoryData, userAccount, proxyFactoryMaster.options.address)
   const gasPrice = await calculateGasPrice()

src/routes/open/components/Layout.tsx

@@ -7,11 +7,12 @@ import Block from 'src/components/layout/Block'
 import Heading from 'src/components/layout/Heading'
 import Row from 'src/components/layout/Row'
 import { initContracts } from 'src/logic/contracts/safeContracts'
-import Review from 'src/routes/open/components/ReviewInformation'
+import { Review } from 'src/routes/open/components/ReviewInformation'
 import SafeNameField from 'src/routes/open/components/SafeNameForm'
 import { SafeOwnersPage } from 'src/routes/open/components/SafeOwnersConfirmationsForm'
 import {
   FIELD_CONFIRMATIONS,
+  FIELD_CREATION_PROXY_SALT,
   FIELD_SAFE_NAME,
   getOwnerAddressBy,
   getOwnerNameBy,
@@ -40,6 +41,7 @@ type InitialValuesForm = {
   owner0Name?: string
   confirmations: string
   safeName?: string
+  safeCreationSalt: number
 }
 
 const useInitialValuesFrom = (userAccount: string, safeProps?: SafeProps): InitialValuesForm => {
@@ -51,6 +53,7 @@ const useInitialValuesFrom = (userAccount: string, safeProps?: SafeProps): Initi
       [getOwnerNameBy(0)]: ownerName || 'My Wallet',
       [getOwnerAddressBy(0)]: userAccount,
       [FIELD_CONFIRMATIONS]: '1',
+      [FIELD_CREATION_PROXY_SALT]: Date.now(),
     }
   }
   let obj = {}
@@ -68,6 +71,7 @@ const useInitialValuesFrom = (userAccount: string, safeProps?: SafeProps): Initi
     ...obj,
     [FIELD_CONFIRMATIONS]: threshold || '1',
     [FIELD_SAFE_NAME]: name,
+    [FIELD_CREATION_PROXY_SALT]: Date.now(),
   }
 }
 
@@ -92,7 +96,7 @@ type LayoutProps = {
   safeProps?: SafeProps
 }
 
-const Layout = (props: LayoutProps): React.ReactElement => {
+export const Layout = (props: LayoutProps): React.ReactElement => {
   const { onCallSafeContractSubmit, safeProps } = props
 
   const provider = useSelector(providerNameSelector)
@@ -139,5 +143,3 @@ const Layout = (props: LayoutProps): React.ReactElement => {
     </>
   )
 }
-
-export default Layout

src/routes/open/components/ReviewInformation/index.tsx

@@ -13,7 +13,7 @@ import Row from 'src/components/layout/Row'
 import OpenPaper from 'src/components/Stepper/OpenPaper'
 import { estimateGasForDeployingSafe } from 'src/logic/contracts/safeContracts'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
-import { getAccountsFrom, getNamesFrom } from 'src/routes/open/utils/safeDataExtractor'
+import { getAccountsFrom, getNamesFrom, getSafeCreationSaltFrom } from 'src/routes/open/utils/safeDataExtractor'
 
 import { FIELD_CONFIRMATIONS, FIELD_NAME, getNumOwnersFrom } from '../fields'
 import { useStyles } from './styles'
@@ -33,20 +33,23 @@ const ReviewComponent = ({ userAccount, values }: ReviewComponentProps) => {
   const names = getNamesFrom(values)
   const addresses = getAccountsFrom(values)
   const numOwners = getNumOwnersFrom(values)
+  const safeCreationSalt = getSafeCreationSaltFrom(values)
 
   useEffect(() => {
     const estimateGas = async () => {
       if (!addresses.length || !numOwners || !userAccount) {
         return
       }
-      const estimatedGasCosts = (await estimateGasForDeployingSafe(addresses, numOwners, userAccount)).toString()
+      const estimatedGasCosts = (
+        await estimateGasForDeployingSafe(addresses, numOwners, userAccount, safeCreationSalt)
+      ).toString()
       const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
       const formattedGasCosts = formatAmount(gasCosts)
       setGasCosts(formattedGasCosts)
     }
 
     estimateGas()
-  }, [addresses, numOwners, userAccount])
+  }, [addresses, numOwners, safeCreationSalt, userAccount])
 
   return (
     <>
@@ -140,7 +143,7 @@ const ReviewComponent = ({ userAccount, values }: ReviewComponentProps) => {
   )
 }
 
-const Review = () =>
+export const Review = () =>
   function ReviewPage(controls, props): React.ReactElement {
     return (
       <>
@@ -150,5 +153,3 @@ const Review = () =>
       </>
     )
   }
-
-export default Review

src/routes/open/components/fields.ts

@@ -2,6 +2,7 @@ export const FIELD_NAME = 'name'
 export const FIELD_CONFIRMATIONS = 'confirmations'
 export const FIELD_OWNERS = 'owners'
 export const FIELD_SAFE_NAME = 'safeName'
+export const FIELD_CREATION_PROXY_SALT = 'safeCreationSalt'
 
 export const getOwnerNameBy = (index) => `owner${index}Name`
 export const getOwnerAddressBy = (index) => `owner${index}Address`

src/routes/open/container/Open.tsx

@@ -4,14 +4,15 @@ import React, { useEffect, useState } from 'react'
 import ReactGA from 'react-ga'
 import { useDispatch, useSelector } from 'react-redux'
 import Opening from 'src/routes/opening'
-import Layout from 'src/routes/open/components/Layout'
+import { Layout } from 'src/routes/open/components/Layout'
 import Page from 'src/components/layout/Page'
 import { getSafeDeploymentTransaction } from 'src/logic/contracts/safeContracts'
 import { checkReceiptStatus } from 'src/logic/wallets/ethTransactions'
 import {
   getAccountsFrom,
   getNamesFrom,
   getOwnersFrom,
+  getSafeCreationSaltFrom,
   getSafeNameFrom,
   getThresholdFrom,
 } from 'src/routes/open/utils/safeDataExtractor'
@@ -58,8 +59,9 @@ export const createSafe = (values, userAccount) => {
   const name = getSafeNameFrom(values)
   const ownersNames = getNamesFrom(values)
   const ownerAddresses = getAccountsFrom(values)
+  const safeCreationSalt = getSafeCreationSaltFrom(values)
 
-  const deploymentTx = getSafeDeploymentTransaction(ownerAddresses, confirmations)
+  const deploymentTx = getSafeDeploymentTransaction(ownerAddresses, confirmations, safeCreationSalt)
 
   const promiEvent = deploymentTx.send({ from: userAccount })
 

src/routes/open/utils/safeDataExtractor.ts

@@ -28,3 +28,5 @@ export const getOwnersFrom = (names, addresses): List<SafeOwner> => {
 export const getThresholdFrom = (values) => Number(values.confirmations)
 
 export const getSafeNameFrom = (values) => values.name
+
+export const getSafeCreationSaltFrom = (values) => values.safeCreationSalt

src/test/safe.dom.create.tsx

@@ -1,4 +1,4 @@
-// 
+//
 import * as React from 'react'
 import { } from 'redux'
 import { render, fireEvent, act } from '@testing-library/react'