WA-232 Making sync fulfillment of Safe Forms per feature

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

@@ -53,7 +53,7 @@ const processTokenTransfer = async (safe: Safe, balance: Balance, to: string, am
   return createTransaction(safe, name, destination, value, nonce, userAddress, data)
 }
 
-class AddTransaction extends React.Component<Props, State> {
+class SendToken extends React.Component<Props, State> {
   state = {
     done: false,
   }
@@ -109,4 +109,4 @@ class AddTransaction extends React.Component<Props, State> {
   }
 }
 
-export default connect(selector, actions)(AddTransaction)
+export default connect(selector, actions)(SendToken)

src/test/utils/logTransactions.js

@@ -1,5 +1,7 @@
 // @flow
 import { getGnosisSafeInstanceAt } from '~/wallets/safeContracts'
+import Stepper from '~/components/Stepper'
+import TestUtils from 'react-dom/test-utils'
 
 export const printOutApprove = async (
   subject: string,
@@ -24,3 +26,33 @@ export const printOutApprove = async (
   // eslint-disable-next-line
   console.log(`EO transaction executed ${await gnosisSafe.isExecuted(transactionHash)}`)
 }
+
+const MAX_TIMES_EXECUTED = 20
+const INTERVAL = 500
+type FinsihedTx = {
+  finishedTransaction: boolean,
+}
+export const whenExecuted = (
+  SafeDom: React$Component<any, any>,
+  ParentComponent: React$ElementType,
+): Promise<void> => new Promise((resolve, reject) => {
+  let times = 0
+  const interval = setInterval(() => {
+    if (times >= MAX_TIMES_EXECUTED) {
+      clearInterval(interval)
+      reject()
+    }
+
+    // $FlowFixMe
+    const SafeComponent = TestUtils.findRenderedComponentWithType(SafeDom, ParentComponent)
+    type StepperType = React$Component<FinsihedTx, any>
+    // $FlowFixMe
+    const StepperComponent: StepperType = TestUtils.findRenderedComponentWithType(SafeComponent, Stepper)
+
+    if (StepperComponent.props.finishedTransaction === true) {
+      clearInterval(interval)
+      resolve()
+    }
+    times += 1
+  }, INTERVAL)
+})

src/test/utils/transactions/addOwner.helper.js

@@ -2,6 +2,8 @@
 import TestUtils from 'react-dom/test-utils'
 import { sleep } from '~/utils/timer'
 import { checkMinedTx, checkPendingTx } from '~/test/builder/safe.dom.utils'
+import { whenExecuted } from '~/test/utils/logTransactions'
+import AddOwner from '~/routes/safe/component/AddOwner'
 
 export const sendAddOwnerForm = async (
   SafeDom: React$Component<any, any>,
@@ -34,7 +36,7 @@ export const sendAddOwnerForm = async (
   TestUtils.Simulate.submit(form)
   TestUtils.Simulate.submit(form)
 
-  return sleep(200)
+  return whenExecuted(SafeDom, AddOwner)
 }
 
 export const checkMinedAddOwnerTx = (Transaction: React$Component<any, any>, name: string) => {

src/test/utils/transactions/moveFunds.helper.js

@@ -2,6 +2,9 @@
 import TestUtils from 'react-dom/test-utils'
 import { sleep } from '~/utils/timer'
 import { checkMinedTx, checkPendingTx } from '~/test/builder/safe.dom.utils'
+import SendToken from '~/routes/safe/component/SendToken'
+import { whenExecuted } from '~/test/utils/logTransactions'
+
 
 export const sendMoveFundsForm = async (
   SafeDom: React$Component<any, any>,
@@ -33,7 +36,8 @@ export const sendMoveFundsForm = async (
   TestUtils.Simulate.submit(form)
   TestUtils.Simulate.submit(form)
 
-  return sleep(200)
+
+  return whenExecuted(SafeDom, SendToken)
 }
 
 export const checkMinedMoveFundsTx = (Transaction: React$Component<any, any>, name: string) => {

src/test/utils/transactions/moveTokens.helper.js

@@ -6,6 +6,8 @@ import * as fetchBalancesAction from '~/routes/safe/store/actions/fetchBalances'
 import { checkMinedTx, checkPendingTx, EXPAND_BALANCE_INDEX } from '~/test/builder/safe.dom.utils'
 import { makeBalance, type Balance } from '~/routes/safe/store/model/balance'
 import addBalances from '~/routes/safe/store/actions/addBalances'
+import { whenExecuted } from '~/test/utils/logTransactions'
+import SendToken from '~/routes/safe/component/SendToken'
 
 export const sendMoveTokensForm = async (
   SafeDom: React$Component<any, any>,
@@ -38,7 +40,7 @@ export const sendMoveTokensForm = async (
   TestUtils.Simulate.submit(form)
   TestUtils.Simulate.submit(form)
 
-  return sleep(200)
+  return whenExecuted(SafeDom, SendToken)
 }
 
 export const dispatchTknBalance = async (store: Store, tokenAddress: string, address: string) => {

src/test/utils/transactions/removeOwner.helper.js

@@ -3,6 +3,8 @@ import TestUtils from 'react-dom/test-utils'
 import { sleep } from '~/utils/timer'
 import { checkMinedTx, EXPAND_OWNERS_INDEX, checkPendingTx } from '~/test/builder/safe.dom.utils'
 import { filterMoveButtonsFrom } from '~/test/builder/safe.dom.builder'
+import { whenExecuted } from '~/test/utils/logTransactions'
+import RemoveOwner from '~/routes/safe/component/RemoveOwner'
 
 export const sendRemoveOwnerForm = async (
   SafeDom: React$Component<any, any>,
@@ -29,7 +31,7 @@ export const sendRemoveOwnerForm = async (
   TestUtils.Simulate.submit(form)
   TestUtils.Simulate.submit(form)
 
-  return sleep(200)
+  return whenExecuted(SafeDom, RemoveOwner)
 }
 
 export const checkMinedRemoveOwnerTx = (Transaction: React$Component<any, any>, name: string) => {

src/test/utils/transactions/threshold.helper.js

@@ -3,6 +3,8 @@ import TestUtils from 'react-dom/test-utils'
 import { sleep } from '~/utils/timer'
 import { checkMinedTx } from '~/test/builder/safe.dom.utils'
 import { getGnosisSafeInstanceAt } from '~/wallets/safeContracts'
+import Threshold from '~/routes/safe/component/Threshold'
+import { whenExecuted } from '~/test/utils/logTransactions'
 
 export const sendChangeThresholdForm = async (
   SafeDom: React$Component<any, any>,
@@ -24,7 +26,7 @@ export const sendChangeThresholdForm = async (
   TestUtils.Simulate.submit(form)
   TestUtils.Simulate.submit(form)
 
-  return sleep(200)
+  return whenExecuted(SafeDom, Threshold)
 }
 
 export const checkMinedThresholdTx = (Transaction: React$Component<any, any>, name: string) => {

src/test/utils/transactions/withdraw.helper.js

@@ -3,6 +3,8 @@ import TestUtils from 'react-dom/test-utils'
 import { sleep } from '~/utils/timer'
 import { checkBalanceOf } from '~/test/utils/tokenMovements'
 import { checkMinedTx } from '~/test/builder/safe.dom.utils'
+import { whenExecuted } from '~/test/utils/logTransactions'
+import Withdraw from '~/routes/safe/component/Withdraw'
 
 export const sendWithdrawForm = async (
   SafeDom: React$Component<any, any>,
@@ -28,7 +30,7 @@ export const sendWithdrawForm = async (
   TestUtils.Simulate.submit(form)
   TestUtils.Simulate.submit(form)
 
-  return sleep(200)
+  return whenExecuted(SafeDom, Withdraw)
 }
 
 export const checkMinedWithdrawTx = async (