WA-232 send tokens funtionality move to balance list

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

@@ -5,7 +5,7 @@ import Stepper from '~/components/Stepper'
 import { connect } from 'react-redux'
 import { type Safe } from '~/routes/safe/store/model/safe'
 import { type Owner, makeOwner } from '~/routes/safe/store/model/owner'
-import { getSafeEthereumInstance, createTransaction } from '~/routes/safe/component/AddTransaction/createTransactions'
+import { getSafeEthereumInstance, createTransaction } from '~/wallets/createTransactions'
 import { setOwners } from '~/utils/localStorage'
 import AddOwnerForm, { NAME_PARAM, OWNER_ADDRESS_PARAM, INCREASE_PARAM } from './AddOwnerForm'
 import Review from './Review'

src/routes/safe/component/Safe/BalanceInfo.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react'
+import classNames from 'classnames'
 import AccountBalance from '@material-ui/icons/AccountBalance'
 import Avatar from '@material-ui/core/Avatar'
 import Collapse from '@material-ui/core/Collapse'
@@ -56,7 +57,7 @@ const BalanceComponent = openHoc(({
           const onMoveFundsClick = () => onMoveFunds(balance)
 
           return (
-            <ListItem key={symbol} className={classes.nested}>
+            <ListItem key={symbol} className={classNames(classes.nested, symbol)}>
               <ListItemIcon>
                 <Img src={balance.get('logoUrl')} height={30} alt={name} />
               </ListItemIcon>

src/routes/safe/component/Safe/MultisigTx.jsx

@@ -7,37 +7,20 @@ import Button from '~/components/layout/Button'
 import ListItemText from '~/components/List/ListItemText'
 
 type Props = {
-  balance: number,
-  onAddTx: () => void,
   onSeeTxs: () => void,
 }
 
-export const ADD_MULTISIG_BUTTON_TEXT = 'Add'
 export const SEE_MULTISIG_BUTTON_TEXT = 'TXs'
 
-const addStyle = {
-  marginRight: '10px',
-}
-
-const DailyLimitComponent = ({ balance, onAddTx, onSeeTxs }: Props) => {
-  const text = `Available ${balance} ETH`
-  const disabled = balance <= 0
+const DailyLimitComponent = ({ onSeeTxs }: Props) => {
+  const text = 'See multisig txs executed on this Safe'
 
   return (
     <ListItem>
       <Avatar>
         <AcoountBalanceWallet />
       </Avatar>
-      <ListItemText primary="Multisig TXs" secondary={text} />
-      <Button
-        style={addStyle}
-        variant="raised"
-        color="primary"
-        onClick={onAddTx}
-        disabled={disabled}
-      >
-        {ADD_MULTISIG_BUTTON_TEXT}
-      </Button>
+      <ListItemText primary="Safe's Multisig Transaction" secondary={text} />
       <Button
         variant="raised"
         color="primary"

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

@@ -13,7 +13,6 @@ import { type Balance } from '~/routes/safe/store/model/balance'
 
 import Withdraw from '~/routes/safe/component/Withdraw'
 import Transactions from '~/routes/safe/component/Transactions'
-import AddTransaction from '~/routes/safe/component/AddTransaction'
 import Threshold from '~/routes/safe/component/Threshold'
 import AddOwner from '~/routes/safe/component/AddOwner'
 import RemoveOwner from '~/routes/safe/component/RemoveOwner'
@@ -70,19 +69,10 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
     this.setState({ component: <Withdraw safe={safe} dailyLimit={safe.get('dailyLimit')} /> })
   }
 
-  onAddTx = () => {
-    const { balances, safe } = this.props
-    const ethBalance = getEthBalanceFrom(balances)
-
-    this.setState({
-      component: <AddTransaction safe={safe} balance={Number(ethBalance)} onReset={this.onListTransactions} />,
-    })
-  }
-
   onListTransactions = () => {
     const { safe } = this.props
 
-    this.setState({ component: <Transactions safeName={safe.get('name')} safeAddress={safe.get('address')} onAddTx={this.onAddTx} /> })
+    this.setState({ component: <Transactions safeName={safe.get('name')} safeAddress={safe.get('address')} /> })
   }
 
   onEditThreshold = () => {
@@ -130,7 +120,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
             <Confirmations confirmations={safe.get('threshold')} onEditThreshold={this.onEditThreshold} />
             <Address address={safe.get('address')} />
             <DailyLimit balance={ethBalance} dailyLimit={safe.get('dailyLimit')} onWithdraw={this.onWithdraw} onEditDailyLimit={this.onEditDailyLimit} />
-            <MultisigTx balance={ethBalance} onAddTx={this.onAddTx} onSeeTxs={this.onListTransactions} />
+            <MultisigTx onSeeTxs={this.onListTransactions} />
           </List>
         </Col>
         <Col sm={12} center="xs" md={7} margin="xl" layout="column">

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

@@ -41,19 +41,16 @@ const getTransferData = async (tokenAddress: string, to: string, amount: number)
 const processTokenTransfer = async (safe: Safe, balance: Balance, to: string, amount: number, userAddress: string) => {
   const symbol = balance.get('symbol')
 
-  if (isEther(symbol)) {
-    return Promise.resolve()
-  }
-
   const nonce = Date.now()
   const name = `Send ${amount} ${balance.get('symbol')} to ${to}`
   const value = isEther(symbol) ? amount : 0
   const tokenAddress = balance.get('address')
+  const destination = isEther(symbol) ? to : tokenAddress
   const data = isEther(symbol)
     ? EMPTY_DATA
     : await getTransferData(tokenAddress, to, amount)
 
-  return createTransaction(safe, name, tokenAddress, value, nonce, userAddress, data)
+  return createTransaction(safe, name, destination, value, nonce, userAddress, data)
 }
 
 class AddTransaction extends React.Component<Props, State> {
@@ -67,6 +64,7 @@ class AddTransaction extends React.Component<Props, State> {
 
       const amount = values[TKN_VALUE_PARAM]
       const destination = values[TKN_DESTINATION_PARAM]
+
       await processTokenTransfer(safe, balance, destination, amount, userAddress)
       await sleep(1500)
       this.props.fetchTransactions()

src/routes/safe/component/Transactions/NoTransactions/index.jsx

@@ -1,31 +1,17 @@
 // @flow
 import * as React from 'react'
 import Bold from '~/components/layout/Bold'
-import Button from '~/components/layout/Button'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph/index'
 
-type Props = {
-  onAddTx: () => void
-}
-
-const NoRights = ({ onAddTx }: Props) => (
+const NoRights = () => (
   <Row>
     <Col xs={12} center="xs" sm={10} smOffset={2} start="sm" margin="md">
       <Paragraph size="lg">
         <Bold>No transactions found for this safe</Bold>
       </Paragraph>
     </Col>
-    <Col xs={12} center="xs" sm={10} smOffset={2} start="sm" margin="md">
-      <Button
-        onClick={onAddTx}
-        variant="raised"
-        color="primary"
-      >
-        Add Multisig Transaction
-      </Button>
-    </Col>
   </Row>
 )
 

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

@@ -9,7 +9,6 @@ import selector, { type SelectorProps } from './selector'
 import actions, { type Actions } from './actions'
 
 type Props = SelectorProps & Actions & {
-  onAddTx: () => void,
   safeName: string,
   safeAddress: string,
 
@@ -25,14 +24,14 @@ class Transactions extends React.Component<Props, {}> {
   }
 
   render() {
-    const { transactions, onAddTx, safeName } = this.props
+    const { transactions, safeName } = this.props
     const hasTransactions = transactions.count() > 0
 
     return (
       <React.Fragment>
         { hasTransactions
           ? transactions.map((tx: Transaction) => <GnoTransaction key={tx.get('nonce')} safeName={safeName} onProcessTx={this.onProcessTx} transaction={tx} />)
-          : <NoTransactions onAddTx={onAddTx} />
+          : <NoTransactions />
         }
       </React.Fragment>
     )

src/routes/safe/test/Safe.withdraw.test.js

@@ -17,8 +17,7 @@ import { getBalanceInEtherOf } from '~/wallets/getWeb3'
 import { sleep } from '~/utils/timer'
 import { getDailyLimitFrom } from '~/routes/safe/component/Withdraw/withdraw'
 import { type DailyLimitProps } from '~/routes/safe/store/model/dailyLimit'
-import { ADD_MULTISIG_BUTTON_TEXT } from '~/routes/safe/component/Safe/MultisigTx'
-import { WITHDRAW_INDEX, MOVE_FUNDS_INDEX } from '~/test/builder/safe.dom.utils'
+import { WITHDRAW_INDEX } from '~/test/builder/safe.dom.utils'
 import { buildMathPropsFrom } from '~/test/utils/buildReactRouterProps'
 import { safeSelector } from '~/routes/safe/store/selectors/index'
 
@@ -97,20 +96,6 @@ describe('React DOM TESTS > Withdraw funds from safe', () => {
     expect(dailyLimit.spentToday).toBe(0.02)
   })
 
-  it('add multisig txs button disabled when balance is 0', async () => {
-    const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView)
-    // $FlowFixMe
-    const buttons = TestUtils.scryRenderedDOMComponentsWithTag(Safe, 'button')
-    const addTxButton = buttons[MOVE_FUNDS_INDEX]
-    expect(addTxButton.getElementsByTagName('span')[0].innerHTML).toEqual(ADD_MULTISIG_BUTTON_TEXT)
-    expect(addTxButton.hasAttribute('disabled')).toBe(true)
-
-    await addEtherTo(address, '0.1')
-    await sleep(1800)
-
-    expect(addTxButton.hasAttribute('disabled')).toBe(false)
-  })
-
   it('Withdraw button disabled when balance is 0', async () => {
     const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView)
     // $FlowFixMe

src/routes/safe/test/testMultisig.js

@@ -1,114 +1,9 @@
 // @flow
-import TestUtils from 'react-dom/test-utils'
-import { sleep } from '~/utils/timer'
-import { getBalanceInEtherOf } from '~/wallets/getWeb3'
-import { ADD_MULTISIG_BUTTON_TEXT, SEE_MULTISIG_BUTTON_TEXT } from '~/routes/safe/component/Safe/MultisigTx'
-import { addEtherTo } from '~/test/utils/tokenMovements'
-import SafeView from '~/routes/safe/component/Safe'
-import TransactionsComponent from '~/routes/safe/component/Transactions'
-import TransactionComponent from '~/routes/safe/component/Transactions/Transaction'
 import { safeTransactionsSelector } from '~/routes/safe/store/selectors/index'
 import { type GlobalState } from '~/store/index'
-import ListItemText from '~/components/List/ListItemText'
-import { MOVE_FUNDS_INDEX, LIST_TXS_INDEX } from '~/test/builder/safe.dom.utils'
-
-export const createMultisigTxFilling = async (
-  SafeDom: React$Component<any, any>,
-  AddTransactionComponent: React$ElementType,
-  store: Store<GlobalState>,
-) => {
-  // Get AddTransaction form component
-  const AddTransaction = TestUtils.findRenderedComponentWithType(SafeDom, AddTransactionComponent)
-
-  // $FlowFixMe
-  const inputs = TestUtils.scryRenderedDOMComponentsWithTag(AddTransaction, 'input')
-  const name = inputs[0]
-  const destination = inputs[1]
-  const amountInEth = inputs[2]
-  TestUtils.Simulate.change(name, { target: { value: 'Buying betteries' } })
-  TestUtils.Simulate.change(amountInEth, { target: { value: '0.01' } })
-  TestUtils.Simulate.change(destination, { target: { value: store.getState().providers.account } })
-
-  // $FlowFixMe
-  const form = TestUtils.findRenderedDOMComponentWithTag(AddTransaction, 'form')
-
-  TestUtils.Simulate.submit(form) // fill the form
-  TestUtils.Simulate.submit(form) // confirming data
-  return sleep(4000)
-}
-
-export const checkBalanceOf = async (addressToTest: string, value: string) => {
-  const safeBalance = await getBalanceInEtherOf(addressToTest)
-  expect(safeBalance).toBe(value)
-}
-
-export const addFundsTo = async (SafeDom: React$Component<any, any>, destination: string) => {
-  // add funds to safe
-  await addEtherTo(destination, '0.1')
-  const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView)
-
-  // $FlowFixMe
-  const buttons = TestUtils.scryRenderedDOMComponentsWithTag(Safe, 'button')
-  const addTxButton = buttons[MOVE_FUNDS_INDEX]
-  expect(addTxButton.getElementsByTagName('span')[0].innerHTML).toEqual(ADD_MULTISIG_BUTTON_TEXT)
-
-  await sleep(1800) // Give time to enable Add button
-  TestUtils.Simulate.click(addTxButton)
-}
-
-export const listTxsOf = (SafeDom: React$Component<any, any>) => {
-  const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView)
-
-  // $FlowFixMe
-  const buttons = TestUtils.scryRenderedDOMComponentsWithTag(Safe, 'button')
-  const seeTx = buttons[LIST_TXS_INDEX]
-  expect(seeTx.getElementsByTagName('span')[0].innerHTML).toEqual(SEE_MULTISIG_BUTTON_TEXT)
-  TestUtils.Simulate.click(seeTx)
-}
-
-export const getListItemsFrom = (SafeDom: React$Component<any, any>) => {
-  const Transactions = TestUtils.findRenderedComponentWithType(SafeDom, TransactionsComponent)
-  if (!Transactions) throw new Error()
-  const Transaction = TestUtils.findRenderedComponentWithType(Transactions, TransactionComponent)
-  if (!Transaction) throw new Error()
-
-  return TestUtils.scryRenderedComponentsWithType(Transaction, ListItemText)
-}
-
-export const expandTransactionOf = async (
-  SafeDom: React$Component<any, any>,
-  numOwners: number,
-  safeThreshold: number,
-) => {
-  const listItems = getListItemsFrom(SafeDom)
-  TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(listItems[2], 'p')[0]) // expanded
-  await sleep(2500) // Time to expand
-  const listItemsExpanded = getListItemsFrom(SafeDom)
-  const threshold = listItemsExpanded[5]
-  expect(threshold.props.secondary).toContain(`confirmation${safeThreshold === 1 ? '' : 's'} needed`)
-  TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(threshold, 'p')[0]) // expanded
-  await sleep(2500) // Time to expand
-  expect(listItemsExpanded.length).toBe(listItems.length + numOwners)
-}
 
 export const getTransactionFromReduxStore = (store: Store<GlobalState>, address: string, index: number = 0) => {
   const transactions = safeTransactionsSelector(store.getState(), { safeAddress: address })
 
   return transactions.get(index)
 }
-
-export const confirmOwners = async (SafeDom: React$Component<any, any>, ...statusses: string[]) => {
-  const Transactions = TestUtils.findRenderedComponentWithType(SafeDom, TransactionsComponent)
-  if (!Transactions) throw new Error()
-  const Transaction = TestUtils.findRenderedComponentWithType(Transactions, TransactionComponent)
-  if (!Transaction) throw new Error()
-
-  const listItems = TestUtils.scryRenderedComponentsWithType(Transaction, ListItemText)
-
-  for (let i = 0; i < statusses.length; i += 1) {
-    const ownerIndex = i + 6
-    const ownerParagraph = listItems[ownerIndex].props.primary
-
-    expect(statusses[i]).toEqual(ownerParagraph)
-  }
-}

src/test/builder/safe.dom.builder.js

@@ -9,6 +9,7 @@ import { promisify } from '~/utils/promisify'
 import { addEtherTo } from '~/test/utils/tokenMovements'
 import { aMinedSafe } from '~/test/builder/safe.redux.builder'
 import { travelToSafe } from '~/test/builder/safe.dom.utils'
+import { MOVE_FUNDS_BUTTON_TEXT } from '~/routes/safe/component/Safe/BalanceInfo'
 
 export type DomSafe = {
   address: string,
@@ -18,6 +19,9 @@ export type DomSafe = {
   store: Store<GlobalState>,
 }
 
+export const filterMoveButtonsFrom = (buttons: Element[]) =>
+  buttons.filter(button => button.getElementsByTagName('span')[0].innerHTML !== MOVE_FUNDS_BUTTON_TEXT)
+
 export const renderSafeInDom = async (
   owners: number = 1,
   threshold: number = 1,
@@ -41,8 +45,9 @@ export const renderSafeInDom = async (
   const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView)
   // $FlowFixMe
   const buttons = TestUtils.scryRenderedDOMComponentsWithTag(Safe, 'button')
+  const filteredButtons = filterMoveButtonsFrom(buttons)
 
   return {
-    address, safeButtons: buttons, safe: SafeDom, accounts, store,
+    address, safeButtons: filteredButtons, safe: SafeDom, accounts, store,
   }
 }

src/test/builder/safe.dom.utils.js

@@ -18,8 +18,7 @@ export const ADD_OWNERS_INDEX = 2
 export const EDIT_THRESHOLD_INDEX = 3
 export const EDIT_INDEX = 4
 export const WITHDRAW_INDEX = 5
-export const MOVE_FUNDS_INDEX = 6
-export const LIST_TXS_INDEX = 7
+export const LIST_TXS_INDEX = 6
 
 export const listTxsClickingOn = async (seeTxsButton: Element) => {
   expect(seeTxsButton.getElementsByTagName('span')[0].innerHTML).toEqual(SEE_MULTISIG_BUTTON_TEXT)

src/test/safe.dom.transactions.test.js

@@ -1,7 +1,7 @@
 // @flow
 import TestUtils from 'react-dom/test-utils'
 import Transaction from '~/routes/safe/component/Transactions/Transaction'
-import { listTxsClickingOn, LIST_TXS_INDEX, MOVE_FUNDS_INDEX, ADD_OWNERS_INDEX, EXPAND_OWNERS_INDEX, EDIT_THRESHOLD_INDEX, WITHDRAW_INDEX, refreshTransactions } from '~/test/builder/safe.dom.utils'
+import { listTxsClickingOn, LIST_TXS_INDEX, ADD_OWNERS_INDEX, EXPAND_OWNERS_INDEX, EDIT_THRESHOLD_INDEX, WITHDRAW_INDEX, refreshTransactions, EXPAND_BALANCE_INDEX } from '~/test/builder/safe.dom.utils'
 import { renderSafeInDom, type DomSafe } from '~/test/builder/safe.dom.builder'
 import { sendMoveFundsForm, checkMinedMoveFundsTx, checkPendingMoveFundsTx } from '~/test/utils/transactions/moveFunds.helper'
 import { sendAddOwnerForm, checkMinedAddOwnerTx, checkPendingAddOwnerTx } from '~/test/utils/transactions/addOwner.helper'
@@ -23,7 +23,7 @@ describe('DOM > Feature > SAFE MULTISIG Transactions', () => {
     } = domSafe
 
     // WHEN
-    await sendMoveFundsForm(SafeDom, safeButtons[MOVE_FUNDS_INDEX], 'Move funds', '0.01', accounts[1])
+    await sendMoveFundsForm(SafeDom, safeButtons[EXPAND_BALANCE_INDEX], '0.01', accounts[1])
     await sendWithdrawForm(SafeDom, safeButtons[WITHDRAW_INDEX], '0.01', accounts[3])
     await sendAddOwnerForm(SafeDom, safeButtons[ADD_OWNERS_INDEX], 'Adol Metamask 2', accounts[1])
     await sendChangeThresholdForm(SafeDom, safeButtons[EDIT_THRESHOLD_INDEX], '2')
@@ -32,7 +32,7 @@ describe('DOM > Feature > SAFE MULTISIG Transactions', () => {
     await listTxsClickingOn(safeButtons[LIST_TXS_INDEX])
     const transactions = TestUtils.scryRenderedComponentsWithType(SafeDom, Transaction)
 
-    checkMinedMoveFundsTx(transactions[0], 'Move funds')
+    checkMinedMoveFundsTx(transactions[0], 'Send 0.01 ETH to')
     await checkMinedWithdrawTx(transactions[1], 'Withdraw movement of 0.01', address, '0.08') // 0.1 - 0.01 tx - 0.01 withdraw
     checkMinedAddOwnerTx(transactions[2], 'Add Owner Adol Metamask 2')
     checkMinedThresholdTx(transactions[3], 'Change Safe\'s threshold')
@@ -45,7 +45,7 @@ describe('DOM > Feature > SAFE MULTISIG Transactions', () => {
     } = domSafe
 
     // WHEN
-    await sendMoveFundsForm(SafeDom, safeButtons[MOVE_FUNDS_INDEX], 'Buy batteries', '0.01', accounts[1])
+    await sendMoveFundsForm(SafeDom, safeButtons[EXPAND_BALANCE_INDEX], '0.01', accounts[1])
     const increaseThreshold = true
     await sendAddOwnerForm(SafeDom, safeButtons[ADD_OWNERS_INDEX], 'Adol Metamask 3', accounts[2], increaseThreshold)
     await sendWithdrawForm(SafeDom, safeButtons[WITHDRAW_INDEX], '0.01', accounts[3])
@@ -55,7 +55,7 @@ describe('DOM > Feature > SAFE MULTISIG Transactions', () => {
     const transactions = TestUtils.scryRenderedComponentsWithType(SafeDom, Transaction)
 
     const statusses = ['Adol Metamask 2 [Not confirmed]', 'Adolfo 1 Eth Account [Confirmed]']
-    await checkPendingMoveFundsTx(transactions[4], 2, 'Buy batteries', statusses)
+    await checkPendingMoveFundsTx(transactions[4], 2, 'Send 0.01 ETH to', statusses)
     await checkPendingAddOwnerTx(transactions[5], 2, 'Add Owner Adol Metamask 3', statusses)
     // checkMinedThresholdTx(transactions[4], 'Add Owner Adol Metamask 3')
     await checkMinedWithdrawTx(transactions[6], 'Withdraw movement of 0.01', address, '0.07')
@@ -76,7 +76,7 @@ describe('DOM > Feature > SAFE MULTISIG Transactions', () => {
     await refreshTransactions(store)
 
     // THEN
-    checkMinedMoveFundsTx(transactions[4], 'Buy batteries')
+    checkMinedMoveFundsTx(transactions[4], 'Send 0.01 ETH to')
     await checkBalanceOf(address, '0.06')
     checkMinedAddOwnerTx(transactions[5], 'Add Owner Adol Metamask 3')
     await checkThresholdOf(address, 3)

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

@@ -5,22 +5,25 @@ import { checkMinedTx, checkPendingTx } from '~/test/builder/safe.dom.utils'
 
 export const sendMoveFundsForm = async (
   SafeDom: React$Component<any, any>,
-  multisigButton: React$Component<any, any>,
-  txName: string,
+  expandBalance: React$Component<any, any>,
   value: string,
   destination: string,
 ) => {
   // load add multisig form component
-  TestUtils.Simulate.click(multisigButton)
+  TestUtils.Simulate.click(expandBalance)
   // give time to re-render it
   await sleep(600)
 
+  const ethList = TestUtils.findRenderedDOMComponentWithClass(SafeDom, 'ETH')
+  if (!ethList) throw new Error()
+  const ethButton = ethList.getElementsByTagName('button')
+  TestUtils.Simulate.click(ethButton[0])
+  await sleep(850)
+
   // fill the form
   const inputs = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'input')
-  const nameInput = inputs[0]
-  const destinationInput = inputs[1]
-  const amountInEthInput = inputs[2]
-  TestUtils.Simulate.change(nameInput, { target: { value: txName } })
+  const destinationInput = inputs[0]
+  const amountInEthInput = inputs[1]
   TestUtils.Simulate.change(amountInEthInput, { target: { value } })
   TestUtils.Simulate.change(destinationInput, { target: { value: destination } })
   // $FlowFixMe

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

@@ -2,23 +2,25 @@
 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'
 
-export const sendRemoveOwnerForm = (
+export const sendRemoveOwnerForm = async (
   SafeDom: React$Component<any, any>,
   expandOwners: React$Component<any, any>,
 ) => {
   // Expand owners
   TestUtils.Simulate.click(expandOwners)
-  sleep(600)
+  await sleep(600)
 
   // Get delete button user
-  const buttons = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'button')
+  const allButtons = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'button')
+  const buttons = filterMoveButtonsFrom(allButtons)
   const removeUserButton = buttons[EXPAND_OWNERS_INDEX + 2] // + 2 one the Add and the next delete
   expect(removeUserButton.getAttribute('aria-label')).toBe('Delete')
 
   // render form for deleting the user
   TestUtils.Simulate.click(removeUserButton)
-  sleep(600)
+  await sleep(600)
 
   // $FlowFixMe
   const form = TestUtils.findRenderedDOMComponentWithTag(SafeDom, 'form')

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

@@ -4,7 +4,7 @@ import { sleep } from '~/utils/timer'
 import { checkBalanceOf } from '~/test/utils/tokenMovements'
 import { checkMinedTx } from '~/test/builder/safe.dom.utils'
 
-export const sendWithdrawForm = (
+export const sendWithdrawForm = async (
   SafeDom: React$Component<any, any>,
   withdrawButton: React$Component<any, any>,
   amount: string,
@@ -13,7 +13,7 @@ export const sendWithdrawForm = (
   // load add multisig form component
   TestUtils.Simulate.click(withdrawButton)
   // give time to re-render it
-  sleep(600)
+  await sleep(600)
 
   // fill the form
   const inputs = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'input')