WA-438 Implementation of edit daily limit

src/routes/safe/component/AddTransaction/MultisigForm/index.jsx

@@ -23,7 +23,7 @@ type Props = {
   balance: number,
 }
 
-const WithdrawnForm = ({ balance }: Props) => () => (
+const WithdrawForm = ({ balance }: Props) => () => (
   <Block margin="md">
     <Heading tag="h2" margin="lg">
       Multisig Transaction
@@ -64,4 +64,4 @@ const WithdrawnForm = ({ balance }: Props) => () => (
   </Block>
 )
 
-export default WithdrawnForm
+export default WithdrawForm

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

@@ -0,0 +1,36 @@
+// @flow
+import * as React from 'react'
+import Block from '~/components/layout/Block'
+import Heading from '~/components/layout/Heading'
+import Field from '~/components/forms/Field'
+import TextField from '~/components/forms/TextField'
+import { composeValidators, minValue, mustBeFloat, required } from '~/components/forms/validator'
+
+export const EDIT_DAILY_LIMIT_PARAM = 'daily'
+
+type EditDailyLimitProps = {
+  dailyLimit: string,
+}
+
+const EditDailyLimitForm = ({ dailyLimit }: EditDailyLimitProps) => () => (
+  <Block margin="md">
+    <Heading tag="h2" margin="lg">
+      {'Change safe\'s daily limit'}
+    </Heading>
+    <Heading tag="h4" margin="lg">
+      {`Actual daily limit: ${dailyLimit}`}
+    </Heading>
+    <Block margin="md">
+      <Field
+        name={EDIT_DAILY_LIMIT_PARAM}
+        component={TextField}
+        type="text"
+        validate={composeValidators(required, mustBeFloat, minValue(0))}
+        placeholder="New daily limit"
+        text="Safe's daily limit"
+      />
+    </Block>
+  </Block>
+)
+
+export default EditDailyLimitForm

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

@@ -0,0 +1,31 @@
+// @flow
+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 Heading from '~/components/layout/Heading'
+import Paragraph from '~/components/layout/Paragraph'
+import { EDIT_DAILY_LIMIT_PARAM } from '~/routes/safe/component/EditDailyLimit/EditDailyLimitForm'
+
+type FormProps = {
+  values: Object,
+  submitting: boolean,
+}
+
+const spinnerStyle = {
+  minHeight: '50px',
+}
+
+const Review = () => ({ values, submitting }: FormProps) => (
+  <Block>
+    <Heading tag="h2">Review the DailyLimit operation</Heading>
+    <Paragraph align="left">
+      <Bold>The new daily limit will be: </Bold> {values[EDIT_DAILY_LIMIT_PARAM]}
+    </Paragraph>
+    <Block style={spinnerStyle}>
+      { submitting && <CircularProgress size={50} /> }
+    </Block>
+  </Block>
+)
+
+export default Review

src/routes/safe/component/EditDailyLimit/actions.js

@@ -0,0 +1,12 @@
+// @flow
+import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions'
+
+type FetchTransactions = typeof fetchTransactions
+
+export type Actions = {
+  fetchTransactions: FetchTransactions,
+}
+
+export default {
+  fetchTransactions,
+}

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

@@ -0,0 +1,83 @@
+// @flow
+import * as React from 'react'
+import Stepper from '~/components/Stepper'
+import { connect } from 'react-redux'
+import { createTransaction } from '~/routes/safe/component/AddTransaction/createTransactions'
+import { getEditDailyLimitData } from '~/routes/safe/component/Withdraw/withdraw'
+import { type Safe } from '~/routes/safe/store/model/safe'
+import EditDailyLimitForm, { EDIT_DAILY_LIMIT_PARAM } from './EditDailyLimitForm'
+import selector, { type SelectorProps } from './selector'
+import actions, { type Actions } from './actions'
+import Review from './Review'
+
+type Props = SelectorProps & Actions & {
+  dailyLimit: number,
+  onReset: () => void,
+  safe: Safe,
+}
+
+const getSteps = () => [
+  'Fill Edit Daily Limit Form', 'Review Edit Daily Limit operation',
+]
+
+type State = {
+  done: boolean,
+}
+
+export const CHANGE_THRESHOLD_RESET_BUTTON_TEXT = 'START'
+
+class EditDailyLimit extends React.PureComponent<Props, State> {
+  state = {
+    done: false,
+  }
+
+  onEditDailyLimit = async (values: Object) => {
+    try {
+      const { safe, userAddress } = this.props
+      const newDailyLimit = values[EDIT_DAILY_LIMIT_PARAM]
+      const safeAddress = safe.get('address')
+      const data = await getEditDailyLimitData(safeAddress, 0, Number(newDailyLimit))
+      const nonce = Date.now()
+      await createTransaction(safe, `Change Safe's daily limit to ${newDailyLimit} [${nonce}]`, safeAddress, 0, nonce, userAddress, data)
+      await this.props.fetchTransactions()
+      this.setState({ done: true })
+    } catch (error) {
+      this.setState({ done: false })
+      // eslint-disable-next-line
+      console.log('Error while editing the daily limit ' + error)
+    }
+  }
+
+  onReset = () => {
+    this.setState({ done: false })
+    this.props.onReset()
+  }
+
+  render() {
+    const { dailyLimit } = this.props
+    const { done } = this.state
+    const steps = getSteps()
+    const finishedButton = <Stepper.FinishButton title={CHANGE_THRESHOLD_RESET_BUTTON_TEXT} />
+
+    return (
+      <React.Fragment>
+        <Stepper
+          finishedTransaction={done}
+          finishedButton={finishedButton}
+          onSubmit={this.onEditDailyLimit}
+          steps={steps}
+          onReset={this.onReset}
+        >
+          <Stepper.Page dailyLimit={dailyLimit} >
+            { EditDailyLimitForm }
+          </Stepper.Page>
+          <Stepper.Page>
+            { Review }
+          </Stepper.Page>
+        </Stepper>
+      </React.Fragment>
+    )
+  }
+}
+
+export default connect(selector, actions)(EditDailyLimit)

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

@@ -9,13 +9,20 @@ import { type DailyLimit } from '~/routes/safe/store/model/dailyLimit'
 
 type Props = {
   dailyLimit: DailyLimit,
-  onWithdrawn: () => void,
+  onWithdraw: () => void,
+  onEditDailyLimit: () => void,
   balance: string,
 }
+export const EDIT_WITHDRAW = 'Edit'
+export const WITHDRAW_BUTTON_TEXT = 'Withdraw'
 
-export const WITHDRAWN_BUTTON_TEXT = 'Withdrawn'
+const editStyle = {
+  marginRight: '10px',
+}
 
-const DailyLimitComponent = ({ dailyLimit, balance, onWithdrawn }: Props) => {
+const DailyLimitComponent = ({
+  dailyLimit, balance, onWithdraw, onEditDailyLimit,
+}: Props) => {
   const limit = dailyLimit.get('value')
   const spentToday = dailyLimit.get('spentToday')
 
@@ -29,12 +36,20 @@ const DailyLimitComponent = ({ dailyLimit, balance, onWithdrawn }: Props) => {
       </Avatar>
       <ListItemText primary="Daily Limit" secondary={text} />
       <Button
+        style={editStyle}
         variant="raised"
         color="primary"
-        onClick={onWithdrawn}
+        onClick={onEditDailyLimit}
+      >
+        {EDIT_WITHDRAW}
+      </Button>
+      <Button
+        variant="raised"
+        color="primary"
+        onClick={onWithdraw}
         disabled={disabled}
       >
-        {WITHDRAWN_BUTTON_TEXT}
+        {WITHDRAW_BUTTON_TEXT}
       </Button>
     </ListItem>
   )

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

@@ -9,12 +9,13 @@ import Row from '~/components/layout/Row'
 import { type Safe } from '~/routes/safe/store/model/safe'
 import List from '@material-ui/core/List'
 
-import Withdrawn from '~/routes/safe/component/Withdrawn'
+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'
+import EditDailyLimit from '~/routes/safe/component/EditDailyLimit'
 
 import Address from './Address'
 import Balance from './Balance'
@@ -44,10 +45,17 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
     component: undefined,
   }
 
-  onWithdrawn = () => {
+  onEditDailyLimit = () => {
     const { safe } = this.props
 
-    this.setState({ component: <Withdrawn safeAddress={safe.get('address')} dailyLimit={safe.get('dailyLimit')} /> })
+    const value = safe.get('dailyLimit').get('value')
+    this.setState({ component: <EditDailyLimit safe={safe} dailyLimit={value} /> })
+  }
+
+  onWithdraw = () => {
+    const { safe } = this.props
+
+    this.setState({ component: <Withdraw safeAddress={safe.get('address')} dailyLimit={safe.get('dailyLimit')} /> })
   }
 
   onAddTx = () => {
@@ -98,7 +106,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
             />
             <Confirmations confirmations={safe.get('threshold')} onEditThreshold={this.onEditThreshold} />
             <Address address={safe.get('address')} />
-            <DailyLimit balance={balance} dailyLimit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />
+            <DailyLimit balance={balance} dailyLimit={safe.get('dailyLimit')} onWithdraw={this.onWithdraw} onEditDailyLimit={this.onEditDailyLimit} />
             <MultisigTx balance={balance} onAddTx={this.onAddTx} onSeeTxs={this.onListTransactions} />
           </List>
         </Col>

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

@@ -5,7 +5,7 @@ import Block from '~/components/layout/Block'
 import Bold from '~/components/layout/Bold'
 import Heading from '~/components/layout/Heading'
 import Paragraph from '~/components/layout/Paragraph'
-import { DESTINATION_PARAM, VALUE_PARAM } from '~/routes/safe/component/Withdrawn/withdrawn'
+import { DESTINATION_PARAM, VALUE_PARAM } from '~/routes/safe/component/Withdraw/withdraw'
 
 type FormProps = {
   values: Object,
@@ -18,7 +18,7 @@ const spinnerStyle = {
 
 const Review = () => ({ values, submitting }: FormProps) => (
   <Block>
-    <Heading tag="h2">Review the Withdrawn Operation</Heading>
+    <Heading tag="h2">Review the Withdraw Operation</Heading>
     <Paragraph align="left">
       <Bold>Destination: </Bold> {values[DESTINATION_PARAM]}
     </Paragraph>

src/routes/safe/component/Withdraw/WithdrawForm/WithdrawForm.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'
 import * as React from 'react'
 import Stepper from '~/components/Stepper'
 import styles from '~/components/layout/PageFrame/index.scss'
-import WithdrawnForm from './index'
+import WithdrawForm from './index'
 
 
 const FrameDecorator = story => (
@@ -14,16 +14,16 @@ const FrameDecorator = story => (
 
 storiesOf('Components', module)
   .addDecorator(FrameDecorator)
-  .add('WithdrawnForm', () => (
+  .add('WithdrawForm', () => (
     <Stepper
       finishedTransaction={false}
       finishedButton={<Stepper.FinishButton title="RESET" />}
       onSubmit={() => {}}
-      steps={['Fill Withdrawn Form', 'Review Withdrawn']}
+      steps={['Fill Withdraw Form', 'Review Withdraw']}
       onReset={() => {}}
     >
       <Stepper.Page dailyLimit={10} spentToday={7}>
-        { WithdrawnForm }
+        { WithdrawForm }
       </Stepper.Page>
     </Stepper>
   ))

src/routes/safe/component/Withdraw/WithdrawForm/index.jsx

@@ -5,7 +5,7 @@ import TextField from '~/components/forms/TextField'
 import { composeValidators, inLimit, mustBeFloat, required, greaterThan, mustBeEthereumAddress } from '~/components/forms/validator'
 import Block from '~/components/layout/Block'
 import Heading from '~/components/layout/Heading'
-import { DESTINATION_PARAM, VALUE_PARAM } from '~/routes/safe/component/Withdrawn/withdrawn'
+import { DESTINATION_PARAM, VALUE_PARAM } from '~/routes/safe/component/Withdraw/withdraw'
 
 export const CONFIRMATIONS_ERROR = 'Number of confirmations can not be higher than the number of owners'
 
@@ -24,10 +24,10 @@ type Props = {
   spentToday: number,
 }
 
-const WithdrawnForm = ({ limit, spentToday }: Props) => () => (
+const WithdrawForm = ({ limit, spentToday }: Props) => () => (
   <Block margin="md">
     <Heading tag="h2" margin="lg">
-      Withdrawn Funds
+      Withdraw Funds
     </Heading>
     <Heading tag="h4" margin="lg">
       {`Daily limit ${limit} ETH (spent today: ${spentToday} ETH)`}
@@ -55,4 +55,4 @@ const WithdrawnForm = ({ limit, spentToday }: Props) => () => (
   </Block>
 )
 
-export default WithdrawnForm
+export default WithdrawForm

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

@@ -4,12 +4,12 @@ import { connect } from 'react-redux'
 import Stepper from '~/components/Stepper'
 import { type DailyLimit } from '~/routes/safe/store/model/dailyLimit'
 import selector, { type SelectorProps } from './selector'
-import withdrawn from './withdrawn'
-import WithdrawnForm from './WithdrawnForm'
+import withdraw from './withdraw'
+import WithdrawForm from './WithdrawForm'
 import Review from './Review'
 
 const getSteps = () => [
-  'Fill Withdrawn Form', 'Review Withdrawn',
+  'Fill Withdraw Form', 'Review Withdraw',
 ]
 
 type Props = SelectorProps & {
@@ -23,15 +23,15 @@ type State = {
 
 export const SEE_TXS_BUTTON_TEXT = 'RESET'
 
-class Withdrawn extends React.Component<Props, State> {
+class Withdraw extends React.Component<Props, State> {
   state = {
     done: false,
   }
 
-  onWithdrawn = async (values: Object) => {
+  onWithdraw = async (values: Object) => {
     try {
       const { safeAddress, userAddress } = this.props
-      await withdrawn(values, safeAddress, userAddress)
+      await withdraw(values, safeAddress, userAddress)
       this.setState({ done: true })
     } catch (error) {
       this.setState({ done: false })
@@ -55,12 +55,12 @@ class Withdrawn extends React.Component<Props, State> {
         <Stepper
           finishedTransaction={done}
           finishedButton={finishedButton}
-          onSubmit={this.onWithdrawn}
+          onSubmit={this.onWithdraw}
           steps={steps}
           onReset={this.onReset}
         >
           <Stepper.Page limit={dailyLimit.get('value')} spentToday={dailyLimit.get('spentToday')}>
-            { WithdrawnForm }
+            { WithdrawForm }
           </Stepper.Page>
           <Stepper.Page>
             { Review }
@@ -71,5 +71,5 @@ class Withdrawn extends React.Component<Props, State> {
   }
 }
 
-export default connect(selector)(Withdrawn)
+export default connect(selector)(Withdraw)
 

src/routes/safe/component/Withdraw/selector.js

@@ -0,0 +1,11 @@
+// @flow
+import { createStructuredSelector } from 'reselect'
+import { userAccountSelector } from '~/wallets/store/selectors/index'
+
+export type SelectorProps = {
+  userAddress: userAccountSelector,
+}
+
+export default createStructuredSelector({
+  userAddress: userAccountSelector,
+})

src/routes/safe/component/Withdraw/withdraw.js

@@ -36,7 +36,13 @@ export const getDailyLimitFrom = async (safeAddress: string, tokenAddress: numbe
   return { value: Number(limit), spentToday: Number(spentToday) }
 }
 
-const withdrawn = async (values: Object, safeAddress: string, userAccount: string): Promise<void> => {
+export const getEditDailyLimitData = async (safeAddress: string, token: string, dailyLimit: number) => {
+  const dailyLimitModule = await getDailyLimitModuleFrom(safeAddress)
+
+  return dailyLimitModule.contract.changeDailyLimit.getData(token, dailyLimit)
+}
+
+const withdraw = async (values: Object, safeAddress: string, userAccount: string): Promise<void> => {
   const web3 = getWeb3()
   const dailyLimitModule = await getDailyLimitModuleFrom(safeAddress)
 
@@ -51,4 +57,4 @@ const withdrawn = async (values: Object, safeAddress: string, userAccount: strin
   checkReceiptStatus(txHash.tx)
 }
 
-export default withdrawn
+export default withdraw

src/routes/safe/component/Withdraw/withdraw.test.js

@@ -1,7 +1,7 @@
 // @flow
 import { aNewStore } from '~/store'
 import { addEtherTo } from '~/test/utils/etherMovements'
-import { aDeployedSafe, executeWithdrawnOn } from '~/routes/safe/store/test/builder/deployedSafe.builder'
+import { aDeployedSafe, executeWithdrawOn } from '~/routes/safe/store/test/builder/deployedSafe.builder'
 
 describe('Safe Blockchain Test', () => {
   let store
@@ -17,10 +17,10 @@ describe('Safe Blockchain Test', () => {
     const value = 0.15
 
     // WHEN
-    await executeWithdrawnOn(safeAddress, value)
-    await executeWithdrawnOn(safeAddress, value)
+    await executeWithdrawOn(safeAddress, value)
+    await executeWithdrawOn(safeAddress, value)
 
     // THEN
-    expect(executeWithdrawnOn(safeAddress, value)).rejects.toThrow('VM Exception while processing transaction: revert')
+    expect(executeWithdrawOn(safeAddress, value)).rejects.toThrow('VM Exception while processing transaction: revert')
   })
 })

src/routes/safe/store/actions/fetchSafe.js

@@ -5,7 +5,7 @@ import { type GlobalState } from '~/store/index'
 import { makeOwner } from '~/routes/safe/store/model/owner'
 import { type SafeProps, type Safe, makeSafe } from '~/routes/safe/store/model/safe'
 import { makeDailyLimit } from '~/routes/safe/store/model/dailyLimit'
-import { getDailyLimitFrom } from '~/routes/safe/component/Withdrawn/withdrawn'
+import { getDailyLimitFrom } from '~/routes/safe/component/Withdraw/withdraw'
 import { getGnosisSafeInstanceAt } from '~/wallets/safeContracts'
 import updateSafe from '~/routes/safe/store/actions/updateSafe'
 import { getOwners } from '~/utils/localStorage'

src/routes/safe/store/test/builder/deployedSafe.builder.js

@@ -11,7 +11,7 @@ import { sleep } from '~/utils/timer'
 import { getProviderInfo, getWeb3 } from '~/wallets/getWeb3'
 import addProvider from '~/wallets/store/actions/addProvider'
 import { makeProvider } from '~/wallets/store/model/provider'
-import withdrawn, { DESTINATION_PARAM, VALUE_PARAM } from '~/routes/safe/component/Withdrawn/withdrawn'
+import withdraw, { DESTINATION_PARAM, VALUE_PARAM } from '~/routes/safe/component/Withdraw/withdraw'
 import { promisify } from '~/utils/promisify'
 
 export const renderSafe = async (localStore: Store<GlobalState>) => {
@@ -94,7 +94,7 @@ export const aDeployedSafe = async (
   return deployedSafe.logs[1].args.proxy
 }
 
-export const executeWithdrawnOn = async (safeAddress: string, value: number) => {
+export const executeWithdrawOn = async (safeAddress: string, value: number) => {
   const providerInfo = await getProviderInfo()
   const userAddress = providerInfo.account
 
@@ -103,5 +103,5 @@ export const executeWithdrawnOn = async (safeAddress: string, value: number) =>
     [VALUE_PARAM]: `${value}`,
   }
 
-  return withdrawn(values, safeAddress, userAddress)
+  return withdraw(values, safeAddress, userAddress)
 }

src/routes/safe/test/Safe.multisig.1owners1threshold.test.js

@@ -18,7 +18,7 @@ import { sleep } from '~/utils/timer'
 import { ADD_MULTISIG_BUTTON_TEXT } from '~/routes/safe/component/Safe/MultisigTx'
 import { safeTransactionsSelector } from '~/routes/safe/store/selectors/index'
 
-describe('React DOM TESTS > Withdrawn funds from safe', () => {
+describe('React DOM TESTS > Withdraw funds from safe', () => {
   let SafeDom
   let store
   let address

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

@@ -6,19 +6,19 @@ import { ConnectedRouter } from 'react-router-redux'
 import Button from '~/components/layout/Button'
 import { aNewStore, history } from '~/store'
 import { addEtherTo } from '~/test/utils/etherMovements'
-import { aDeployedSafe, executeWithdrawnOn } from '~/routes/safe/store/test/builder/deployedSafe.builder'
+import { aDeployedSafe, executeWithdrawOn } from '~/routes/safe/store/test/builder/deployedSafe.builder'
 import { SAFELIST_ADDRESS } from '~/routes/routes'
 import SafeView from '~/routes/safe/component/Safe'
 import AppRoutes from '~/routes'
-import { WITHDRAWN_BUTTON_TEXT } from '~/routes/safe/component/Safe/DailyLimit'
-import WithdrawnComponent, { SEE_TXS_BUTTON_TEXT } from '~/routes/safe/component/Withdrawn'
+import { WITHDRAW_BUTTON_TEXT } from '~/routes/safe/component/Safe/DailyLimit'
+import WithdrawComponent, { SEE_TXS_BUTTON_TEXT } from '~/routes/safe/component/Withdraw'
 import { getBalanceInEtherOf } from '~/wallets/getWeb3'
 import { sleep } from '~/utils/timer'
-import { getDailyLimitFrom } from '~/routes/safe/component/Withdrawn/withdrawn'
+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'
 
-describe('React DOM TESTS > Withdrawn funds from safe', () => {
+describe('React DOM TESTS > Withdraw funds from safe', () => {
   let SafeDom
   let store
   let address
@@ -38,7 +38,7 @@ describe('React DOM TESTS > Withdrawn funds from safe', () => {
     ))
   })
 
-  it('should withdrawn funds under dailyLimit without needing confirmations', async () => {
+  it('should withdraw funds under dailyLimit without needing confirmations', async () => {
     // add funds to safe
     await addEtherTo(address, '0.1')
     await sleep(3000)
@@ -46,21 +46,21 @@ describe('React DOM TESTS > Withdrawn funds from safe', () => {
 
     // $FlowFixMe
     const buttons = TestUtils.scryRenderedComponentsWithType(Safe, Button)
-    const withdrawnButton = buttons[2]
-    expect(withdrawnButton.props.children).toEqual(WITHDRAWN_BUTTON_TEXT)
-    TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(withdrawnButton, 'button')[0])
+    const withdrawButton = buttons[2]
+    expect(withdrawButton.props.children).toEqual(WITHDRAW_BUTTON_TEXT)
+    TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(withdrawButton, 'button')[0])
     await sleep(4000)
-    const Withdrawn = TestUtils.findRenderedComponentWithType(SafeDom, WithdrawnComponent)
+    const Withdraw = TestUtils.findRenderedComponentWithType(SafeDom, WithdrawComponent)
 
     // $FlowFixMe
-    const inputs = TestUtils.scryRenderedDOMComponentsWithTag(Withdrawn, 'input')
+    const inputs = TestUtils.scryRenderedDOMComponentsWithTag(Withdraw, 'input')
     const amountInEth = inputs[0]
     const toAddress = inputs[1]
     TestUtils.Simulate.change(amountInEth, { target: { value: '0.01' } })
     TestUtils.Simulate.change(toAddress, { target: { value: store.getState().providers.account } })
 
     // $FlowFixMe
-    const form = TestUtils.findRenderedDOMComponentWithTag(Withdrawn, 'form')
+    const form = TestUtils.findRenderedDOMComponentWithTag(Withdraw, 'form')
 
     TestUtils.Simulate.submit(form) // fill the form
     TestUtils.Simulate.submit(form) // confirming data
@@ -70,8 +70,8 @@ describe('React DOM TESTS > Withdrawn funds from safe', () => {
     expect(safeBalance).toBe('0.09')
 
     // $FlowFixMe
-    const withdrawnButtons = TestUtils.scryRenderedComponentsWithType(Withdrawn, Button)
-    const visitTxsButton = withdrawnButtons[0]
+    const withdrawButtons = TestUtils.scryRenderedComponentsWithType(Withdraw, Button)
+    const visitTxsButton = withdrawButtons[0]
     expect(visitTxsButton.props.children).toEqual(SEE_TXS_BUTTON_TEXT)
   })
 
@@ -81,8 +81,8 @@ describe('React DOM TESTS > Withdrawn funds from safe', () => {
 
     // GIVEN in beforeEach
     // WHEN
-    await executeWithdrawnOn(address, 0.01)
-    await executeWithdrawnOn(address, 0.01)
+    await executeWithdrawOn(address, 0.01)
+    await executeWithdrawOn(address, 0.01)
 
     const ethAddress = 0
     const dailyLimit: DailyLimitProps = await getDailyLimitFrom(address, ethAddress)
@@ -106,12 +106,12 @@ describe('React DOM TESTS > Withdrawn funds from safe', () => {
     expect(addTxButton.props.disabled).toBe(false)
   })
 
-  it('Withdrawn button disabled when balance is 0', async () => {
+  it('Withdraw button disabled when balance is 0', async () => {
     const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView)
     // $FlowFixMe
     const buttons = TestUtils.scryRenderedComponentsWithType(Safe, Button)
     const addTxButton = buttons[2]
-    expect(addTxButton.props.children).toEqual(WITHDRAWN_BUTTON_TEXT)
+    expect(addTxButton.props.children).toEqual(WITHDRAW_BUTTON_TEXT)
     expect(addTxButton.props.disabled).toBe(true)
 
     await addEtherTo(address, '0.1')

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

@@ -8,7 +8,7 @@ import { sleep } from '~/utils/timer'
 export const EXPAND_OWNERS_INDEX = 0
 export const ADD_OWNERS_INDEX = 1
 export const EDIT_THRESHOLD_INDEX = 2
-export const WITHDRAWN_INDEX = 3
+export const WITHDRAW_INDEX = 3
 export const MOVE_FUNDS_INDEX = 4
 export const LIST_TXS_INDEX = 5
 

src/test/safe.dom.test.js

@@ -1,13 +1,13 @@
 // @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, WITHDRAWN_INDEX, refreshTransactions } from '~/test/builder/safe.dom.utils'
+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 { 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'
 import { sendRemoveOwnerForm, checkMinedRemoveOwnerTx, checkPendingRemoveOwnerTx } from '~/test/utils/transactions/removeOwner.helper'
 import { checkMinedThresholdTx, sendChangeThresholdForm, checkThresholdOf } from '~/test/utils/transactions/threshold.helper'
-import { sendWithdrawnForm, checkMinedWithdrawnTx } from '~/test/utils/transactions/withdrawn.helper'
+import { sendWithdrawForm, checkMinedWithdrawTx } from '~/test/utils/transactions/withdraw.helper'
 import { processTransaction } from '~/routes/safe/component/Transactions/processTransactions'
 import { checkBalanceOf } from '~/test/utils/etherMovements'
 
@@ -24,7 +24,7 @@ describe('DOM > Feature > SAFE MULTISIG TX 1 Owner 1 Threshold', () => {
 
     // WHEN
     await sendMoveFundsForm(SafeDom, safeButtons[MOVE_FUNDS_INDEX], 'Move funds', '0.01', accounts[1])
-    await sendWithdrawnForm(SafeDom, safeButtons[WITHDRAWN_INDEX], '0.01', accounts[3])
+    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')
 
@@ -33,7 +33,7 @@ describe('DOM > Feature > SAFE MULTISIG TX 1 Owner 1 Threshold', () => {
     const transactions = TestUtils.scryRenderedComponentsWithType(SafeDom, Transaction)
 
     checkMinedMoveFundsTx(transactions[0], 'Move funds')
-    await checkMinedWithdrawnTx(address, '0.08') // 0.1 - 0.01 tx - 0.01 withdrawn
+    await checkMinedWithdrawTx(address, '0.08') // 0.1 - 0.01 tx - 0.01 withdraw
     checkMinedAddOwnerTx(transactions[1], 'Add Owner Adol Metamask 2')
     checkMinedThresholdTx(transactions[2], 'Change Safe\'s threshold')
   })
@@ -48,7 +48,7 @@ describe('DOM > Feature > SAFE MULTISIG TX 1 Owner 1 Threshold', () => {
     await sendMoveFundsForm(SafeDom, safeButtons[MOVE_FUNDS_INDEX], 'Buy batteries', '0.01', accounts[1])
     const increaseThreshold = true
     await sendAddOwnerForm(SafeDom, safeButtons[ADD_OWNERS_INDEX], 'Adol Metamask 3', accounts[2], increaseThreshold)
-    await sendWithdrawnForm(SafeDom, safeButtons[WITHDRAWN_INDEX], '0.01', accounts[3])
+    await sendWithdrawForm(SafeDom, safeButtons[WITHDRAW_INDEX], '0.01', accounts[3])
 
     // THEN
     await listTxsClickingOn(safeButtons[LIST_TXS_INDEX])
@@ -58,7 +58,7 @@ describe('DOM > Feature > SAFE MULTISIG TX 1 Owner 1 Threshold', () => {
     await checkPendingMoveFundsTx(transactions[3], 2, 'Buy batteries', statusses)
     await checkPendingAddOwnerTx(transactions[4], 2, 'Add Owner Adol Metamask 3', statusses)
     // checkMinedThresholdTx(transactions[4], 'Add Owner Adol Metamask 3')
-    await checkMinedWithdrawnTx(address, '0.07')
+    await checkMinedWithdrawTx(address, '0.07')
   })
 
   it('approves and executes pending transactions', async () => {

src/test/utils/etherMovements.js

@@ -1,7 +1,7 @@
 // @flow
 import { getProviderInfo, getBalanceInEtherOf, getWeb3 } from '~/wallets/getWeb3'
 import { promisify } from '~/utils/promisify'
-import withdrawn, { DESTINATION_PARAM, VALUE_PARAM } from '~/routes/safe/component/Withdrawn/withdrawn'
+import withdraw, { DESTINATION_PARAM, VALUE_PARAM } from '~/routes/safe/component/Withdraw/withdraw'
 
 export const addEtherTo = async (address: string, eth: string) => {
   const web3 = getWeb3()
@@ -10,7 +10,7 @@ export const addEtherTo = async (address: string, eth: string) => {
   return promisify(cb => web3.eth.sendTransaction(txData, cb))
 }
 
-export const executeWithdrawnOn = async (safeAddress: string, value: number) => {
+export const executeWithdrawOn = async (safeAddress: string, value: number) => {
   const providerInfo = await getProviderInfo()
   const userAddress = providerInfo.account
 
@@ -19,7 +19,7 @@ export const executeWithdrawnOn = async (safeAddress: string, value: number) =>
     [VALUE_PARAM]: `${value}`,
   }
 
-  return withdrawn(values, safeAddress, userAddress)
+  return withdraw(values, safeAddress, userAddress)
 }
 
 export const checkBalanceOf = async (addressToTest: string, value: string) => {

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

@@ -3,14 +3,14 @@ import TestUtils from 'react-dom/test-utils'
 import { sleep } from '~/utils/timer'
 import { checkBalanceOf } from '~/test/utils/etherMovements'
 
-export const sendWithdrawnForm = (
+export const sendWithdrawForm = (
   SafeDom: React$Component<any, any>,
-  withdrawnButton: React$Component<any, any>,
+  withdrawButton: React$Component<any, any>,
   amount: string,
   destination: string,
 ) => {
   // load add multisig form component
-  TestUtils.Simulate.click(withdrawnButton)
+  TestUtils.Simulate.click(withdrawButton)
   // give time to re-render it
   sleep(600)
 
@@ -31,6 +31,6 @@ export const sendWithdrawnForm = (
   return sleep(2500)
 }
 
-export const checkMinedWithdrawnTx = async (address: string, funds: number) => {
+export const checkMinedWithdrawTx = async (address: string, funds: number) => {
   await checkBalanceOf(address, funds)
 }