From a0ce9683ddfd487534c1ef320fa0785ac16d7559 Mon Sep 17 00:00:00 2001
From: Fernando <fernando.greco@gmail.com>
Date: Fri, 20 Mar 2020 17:06:27 -0300
Subject: [PATCH] (Fix) send tx from address book (#677)

* fix: Send funds not working when selecting receipt from addressBook

Also, this commit includes an intent to unify/simplify SendModal component

fixes #632

* Set default value to txData for custom txs

fixes #632
---
 .../safe/components/AddressBook/index.jsx     | 10 +-
 .../Balances/Collectibles/index.jsx           |  5 -
 .../components/Balances/SendModal/index.jsx   | 57 ++---------
 .../screens/ReviewCollectible/index.jsx       |  9 +-
 .../screens/ReviewCustomTx/index.jsx          | 73 +++++++-------
 .../SendModal/screens/ReviewTx/index.jsx      | 99 +++++++++----------
 .../SendModal/screens/SendCustomTx/index.jsx  | 33 +++----
 .../SendModal/screens/SendFunds/index.jsx     | 41 +++-----
 src/routes/safe/components/Balances/index.jsx | 11 +--
 src/routes/safe/components/Layout.jsx         |  7 --
 10 files changed, 122 insertions(+), 223 deletions(-)

diff --git a/src/routes/safe/components/AddressBook/index.jsx b/src/routes/safe/components/AddressBook/index.jsx
index ddf1d259..d3176882 100644
--- a/src/routes/safe/components/AddressBook/index.jsx
+++ b/src/routes/safe/components/AddressBook/index.jsx
@@ -42,8 +42,7 @@ import RenameOwnerIcon from '~/routes/safe/components/Settings/ManageOwners/asse
 import type { OwnerRow } from '~/routes/safe/components/Settings/ManageOwners/dataFetcher'
 import RemoveOwnerIcon from '~/routes/safe/components/Settings/assets/icons/bin.svg'
 import RemoveOwnerIconDisabled from '~/routes/safe/components/Settings/assets/icons/disabled-bin.svg'
-import { extendedSafeTokensSelector } from '~/routes/safe/container/selector'
-import { addressBookQueryParamsSelector, safeSelector, safesListSelector } from '~/routes/safe/store/selectors'
+import { addressBookQueryParamsSelector, safesListSelector } from '~/routes/safe/store/selectors'
 
 type Props = {
   classes: Object,
@@ -86,10 +85,7 @@ const AddressBookTable = ({ classes }: Props) => {
     }
   }, [addressBook])
 
-  const safe = useSelector(safeSelector)
   const safesList = useSelector(safesListSelector)
-  const activeTokens = useSelector(extendedSafeTokensSelector)
-  const { address, ethBalance, name } = safe
 
   const newEntryModalHandler = (entry: AddressBookEntry) => {
     setEditCreateEntryModalOpen(false)
@@ -223,13 +219,9 @@ const AddressBookTable = ({ classes }: Props) => {
       />
       <SendModal
         activeScreenType="chooseTxType"
-        ethBalance={ethBalance}
         isOpen={sendFundsModalOpen}
         onClose={() => setSendFundsModalOpen(false)}
         recipientAddress={selectedEntry && selectedEntry.entry ? selectedEntry.entry.address : undefined}
-        safeAddress={address}
-        safeName={name}
-        tokens={activeTokens}
       />
     </>
   )
diff --git a/src/routes/safe/components/Balances/Collectibles/index.jsx b/src/routes/safe/components/Balances/Collectibles/index.jsx
index a1f70ae7..0bb8e3af 100644
--- a/src/routes/safe/components/Balances/Collectibles/index.jsx
+++ b/src/routes/safe/components/Balances/Collectibles/index.jsx
@@ -10,7 +10,6 @@ import Paragraph from '~/components/layout/Paragraph'
 import type { NFTAssetsState, NFTTokensState } from '~/logic/collectibles/store/reducer/collectibles'
 import { nftAssetsSelector, nftTokensSelector } from '~/logic/collectibles/store/selectors'
 import SendModal from '~/routes/safe/components/Balances/SendModal'
-import { safeSelector } from '~/routes/safe/store/selectors'
 import { fontColor, lg, screenSm, screenXs } from '~/theme/variables'
 
 const useStyles = makeStyles({
@@ -80,7 +79,6 @@ const Collectibles = () => {
   const classes = useStyles()
   const [selectedToken, setSelectedToken] = React.useState({})
   const [sendNFTsModalOpen, setSendNFTsModalOpen] = React.useState(false)
-  const { address, ethBalance, name } = useSelector(safeSelector)
   const nftAssets: NFTAssetsState = useSelector(nftAssetsSelector)
   const nftTokens: NFTTokensState = useSelector(nftTokensSelector)
   const nftAssetsKeys = Object.keys(nftAssets)
@@ -124,11 +122,8 @@ const Collectibles = () => {
       </div>
       <SendModal
         activeScreenType="sendCollectible"
-        ethBalance={ethBalance}
         isOpen={sendNFTsModalOpen}
         onClose={() => setSendNFTsModalOpen(false)}
-        safeAddress={address}
-        safeName={name}
         selectedToken={selectedToken}
       />
     </Card>
diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx
index 8898069d..5bf4d6d0 100644
--- a/src/routes/safe/components/Balances/SendModal/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/index.jsx
@@ -2,7 +2,6 @@
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { makeStyles } from '@material-ui/core/styles'
 import cn from 'classnames'
-import { List } from 'immutable'
 import React, { Suspense, useEffect, useState } from 'react'
 
 import Modal from '~/components/Modal'
@@ -33,16 +32,11 @@ type ActiveScreen =
   | 'reviewCollectible'
 
 type Props = {
-  onClose: () => void,
-  isOpen: boolean,
-  safeAddress: string,
-  safeName: string,
-  ethBalance: string,
-  tokens: List<Token>,
-  selectedToken?: string | NFTToken | {},
-  createTransaction?: Function,
   activeScreenType: ActiveScreen,
+  isOpen: boolean,
+  onClose: () => void,
   recipientAddress?: string,
+  selectedToken?: string | NFTToken | {},
 }
 
 type TxStateType =
@@ -71,18 +65,7 @@ const useStyles = makeStyles({
   },
 })
 
-const SendModal = ({
-  activeScreenType,
-  createTransaction,
-  ethBalance,
-  isOpen,
-  onClose,
-  recipientAddress,
-  safeAddress,
-  safeName,
-  selectedToken,
-  tokens,
-}: Props) => {
+const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, selectedToken }: Props) => {
   const classes = useStyles()
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>(activeScreenType || 'chooseTxType')
   const [tx, setTx] = useState<TxStateType>({})
@@ -129,50 +112,26 @@ const SendModal = ({
         )}
         {activeScreen === 'sendFunds' && (
           <SendFunds
-            ethBalance={ethBalance}
             initialValues={tx}
             onClose={onClose}
-            onSubmit={handleTxCreation}
+            onNext={handleTxCreation}
             recipientAddress={recipientAddress}
-            safeAddress={safeAddress}
-            safeName={safeName}
             selectedToken={selectedToken}
-            tokens={tokens}
           />
         )}
         {activeScreen === 'reviewTx' && (
-          <ReviewTx
-            createTransaction={createTransaction}
-            ethBalance={ethBalance}
-            onClose={onClose}
-            safeAddress={safeAddress}
-            safeName={safeName}
-            setActiveScreen={setActiveScreen}
-            tokens={tokens}
-            tx={tx}
-          />
+          <ReviewTx onClose={onClose} onPrev={() => setActiveScreen('sendFunds')} tx={tx} />
         )}
         {activeScreen === 'sendCustomTx' && (
           <SendCustomTx
-            ethBalance={ethBalance}
             initialValues={tx}
             onClose={onClose}
-            onSubmit={handleCustomTxCreation}
+            onNext={handleCustomTxCreation}
             recipientAddress={recipientAddress}
-            safeAddress={safeAddress}
-            safeName={safeName}
           />
         )}
         {activeScreen === 'reviewCustomTx' && (
-          <ReviewCustomTx
-            createTransaction={createTransaction}
-            ethBalance={ethBalance}
-            onClose={onClose}
-            safeAddress={safeAddress}
-            safeName={safeName}
-            setActiveScreen={setActiveScreen}
-            tx={tx}
-          />
+          <ReviewCustomTx onClose={onClose} onPrev={() => setActiveScreen('sendCustomTx')} tx={tx} />
         )}
         {activeScreen === 'sendCollectible' && (
           <SendCollectible
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.jsx
index 8dfbb89a..8c1cddf6 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.jsx
@@ -2,7 +2,6 @@
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import { List } from 'immutable'
 import { withSnackbar } from 'notistack'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
@@ -30,7 +29,6 @@ import {
   getERC721TokenContract,
   getHumanFriendlyToken,
 } from '~/logic/tokens/store/actions/fetchTokens'
-import { type Token } from '~/logic/tokens/store/model/token'
 import { formatAmount } from '~/logic/tokens/utils/formatAmount'
 import { SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH } from '~/logic/tokens/utils/tokenHelpers'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
@@ -44,14 +42,11 @@ import { textShortener } from '~/utils/strings'
 const useStyles = makeStyles(styles)
 
 type Props = {
+  closeSnackbar: Function,
+  enqueueSnackbar: Function,
   onClose: () => void,
   onPrev: () => void,
-  classes: Object,
   tx: Object,
-  tokens: List<Token>,
-  createTransaction: Function,
-  enqueueSnackbar: Function,
-  closeSnackbar: Function,
 }
 
 const ReviewCollectible = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }: Props) => {
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx
index 794ec87a..5e2c11b1 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx
@@ -1,9 +1,10 @@
 // @flow
 import IconButton from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import { withSnackbar } from 'notistack'
 import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 
 import ArrowDown from '../assets/arrow-down.svg'
 
@@ -26,44 +27,37 @@ import { getEthAsToken } from '~/logic/tokens/utils/tokenHelpers'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
 import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
+import createTransaction from '~/routes/safe/store/actions/createTransaction'
+import { safeSelector } from '~/routes/safe/store/selectors'
 import { sm } from '~/theme/variables'
 
 type Props = {
+  closeSnackbar: () => void,
+  enqueueSnackbar: () => void,
   onClose: () => void,
-  setActiveScreen: Function,
-  classes: Object,
-  safeAddress: string,
-  safeName: string,
-  ethBalance: string,
+  onPrev: () => void,
   tx: Object,
-  createTransaction: Function,
-  enqueueSnackbar: Function,
-  closeSnackbar: Function,
 }
 
-const ReviewCustomTx = ({
-  classes,
-  closeSnackbar,
-  createTransaction,
-  enqueueSnackbar,
-  ethBalance,
-  onClose,
-  safeAddress,
-  safeName,
-  setActiveScreen,
-  tx,
-}: Props) => {
+const useStyles = makeStyles(styles)
+
+const ReviewCustomTx = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }: Props) => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  const { address: safeAddress, ethBalance, name: safeName } = useSelector(safeSelector)
   const [gasCosts, setGasCosts] = useState<string>('< 0.001')
 
   useEffect(() => {
     let isCurrent = true
-    const estimateGas = async () => {
-      const web3 = getWeb3()
-      const { fromWei, toBN } = web3.utils
 
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, tx.recipientAddress, tx.data.trim())
+    const estimateGas = async () => {
+      const { fromWei, toBN } = getWeb3().utils
+      const txData = tx.data ? tx.data.trim() : ''
+
+      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, tx.recipientAddress, txData)
       const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')
       const formattedGasCosts = formatAmount(gasCostsAsEth)
+
       if (isCurrent) {
         setGasCosts(formattedGasCosts)
       }
@@ -79,18 +73,21 @@ const ReviewCustomTx = ({
   const submitTx = async () => {
     const web3 = getWeb3()
     const txRecipient = tx.recipientAddress
-    const txData = tx.data.trim()
-    const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : 0
+    const txData = tx.data ? tx.data.trim() : ''
+    const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : '0'
+
+    dispatch(
+      createTransaction({
+        safeAddress,
+        to: txRecipient,
+        valueInWei: txValue,
+        txData,
+        notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
+        enqueueSnackbar,
+        closeSnackbar,
+      }),
+    )
 
-    createTransaction({
-      safeAddress,
-      to: txRecipient,
-      valueInWei: txValue,
-      txData,
-      notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
-      enqueueSnackbar,
-      closeSnackbar,
-    })
     onClose()
   }
 
@@ -167,7 +164,7 @@ const ReviewCustomTx = ({
       </Block>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
-        <Button minWidth={140} onClick={() => setActiveScreen('sendCustomTx')}>
+        <Button minWidth={140} onClick={onPrev}>
           Back
         </Button>
         <Button
@@ -186,4 +183,4 @@ const ReviewCustomTx = ({
   )
 }
 
-export default withStyles(styles)(withSnackbar(ReviewCustomTx))
+export default withSnackbar(ReviewCustomTx)
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx
index 937405ce..d9bc143b 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx
@@ -1,11 +1,11 @@
 // @flow
 import IconButton from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import { BigNumber } from 'bignumber.js'
-import { List } from 'immutable'
 import { withSnackbar } from 'notistack'
 import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 
 import ArrowDown from '../assets/arrow-down.svg'
 
@@ -24,65 +24,63 @@ import Row from '~/components/layout/Row'
 import { TX_NOTIFICATION_TYPES } from '~/logic/safe/transactions'
 import { estimateTxGasCosts } from '~/logic/safe/transactions/gasNew'
 import { getHumanFriendlyToken } from '~/logic/tokens/store/actions/fetchTokens'
-import { type Token } from '~/logic/tokens/store/model/token'
 import { formatAmount } from '~/logic/tokens/utils/formatAmount'
 import { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers'
 import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
 import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
+import { extendedSafeTokensSelector } from '~/routes/safe/container/selector'
+import createTransaction from '~/routes/safe/store/actions/createTransaction'
+import { safeSelector } from '~/routes/safe/store/selectors'
 import { sm } from '~/theme/variables'
 
 type Props = {
-  onClose: () => void,
-  setActiveScreen: Function,
-  classes: Object,
-  safeAddress: string,
-  safeName: string,
-  ethBalance: string,
-  tx: Object,
-  tokens: List<Token>,
-  createTransaction: Function,
-  enqueueSnackbar: Function,
   closeSnackbar: Function,
+  enqueueSnackbar: Function,
+  onClose: () => void,
+  onPrev: () => void,
+  tx: Object,
 }
 
-const ReviewTx = ({
-  classes,
-  closeSnackbar,
-  createTransaction,
-  enqueueSnackbar,
-  ethBalance,
-  onClose,
-  safeAddress,
-  safeName,
-  setActiveScreen,
-  tokens,
-  tx,
-}: Props) => {
+const useStyles = makeStyles(styles)
+
+const ReviewTx = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }: Props) => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  const { address: safeAddress, ethBalance, name: safeName } = useSelector(safeSelector)
+  const tokens = useSelector(extendedSafeTokensSelector)
   const [gasCosts, setGasCosts] = useState<string>('< 0.001')
+  const [data, setData] = useState('')
+
   const txToken = tokens.find(token => token.address === tx.token)
   const isSendingETH = txToken.address === ETH_ADDRESS
   const txRecipient = isSendingETH ? tx.recipientAddress : txToken.address
 
   useEffect(() => {
     let isCurrent = true
+
     const estimateGas = async () => {
-      const web3 = getWeb3()
-      const { fromWei, toBN } = web3.utils
+      const { fromWei, toBN } = getWeb3().utils
+
       let txData = EMPTY_DATA
+
       if (!isSendingETH) {
         const StandardToken = await getHumanFriendlyToken()
         const tokenInstance = await StandardToken.at(txToken.address)
+        const decimals = await tokenInstance.decimals()
+        const txAmount = new BigNumber(tx.amount).times(10 ** decimals.toNumber()).toString()
 
-        txData = tokenInstance.contract.methods.transfer(tx.recipientAddress, 0).encodeABI()
+        txData = tokenInstance.contract.methods.transfer(tx.recipientAddress, txAmount).encodeABI()
       }
 
       const estimatedGasCosts = await estimateTxGasCosts(safeAddress, txRecipient, txData)
       const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')
       const formattedGasCosts = formatAmount(gasCostsAsEth)
+
       if (isCurrent) {
         setGasCosts(formattedGasCosts)
+        setData(txData)
       }
     }
 
@@ -95,30 +93,22 @@ const ReviewTx = ({
 
   const submitTx = async () => {
     const web3 = getWeb3()
-    let txData = EMPTY_DATA
-    let txAmount = web3.utils.toWei(tx.amount, 'ether')
-    if (!isSendingETH) {
-      const HumanFriendlyToken = await getHumanFriendlyToken()
-      const tokenInstance = await HumanFriendlyToken.at(txToken.address)
-      const decimals = await tokenInstance.decimals()
-      txAmount = new BigNumber(tx.amount).times(10 ** decimals.toNumber()).toString()
+    // txAmount should be 0 if we send tokens
+    // the real value is encoded in txData and will be used by the contract
+    // if txAmount > 0 it would send ETH from the Safe
+    const txAmount = isSendingETH ? web3.utils.toWei(tx.amount, 'ether') : '0'
 
-      txData = tokenInstance.contract.methods.transfer(tx.recipientAddress, txAmount).encodeABI()
-      // txAmount should be 0 if we send tokens
-      // the real value is encoded in txData and will be used by the contract
-      // if txAmount > 0 it would send ETH from the Safe
-      txAmount = 0
-    }
-
-    createTransaction({
-      safeAddress,
-      to: txRecipient,
-      valueInWei: txAmount,
-      txData,
-      notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
-      enqueueSnackbar,
-      closeSnackbar,
-    })
+    dispatch(
+      createTransaction({
+        safeAddress,
+        to: txRecipient,
+        valueInWei: txAmount,
+        txData: data,
+        notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
+        enqueueSnackbar,
+        closeSnackbar,
+      }),
+    )
     onClose()
   }
 
@@ -182,13 +172,14 @@ const ReviewTx = ({
       </Block>
       <Hairline style={{ position: 'absolute', bottom: 85 }} />
       <Row align="center" className={classes.buttonRow}>
-        <Button minWidth={140} onClick={() => setActiveScreen('sendFunds')}>
+        <Button minWidth={140} onClick={onPrev}>
           Back
         </Button>
         <Button
           className={classes.submitButton}
           color="primary"
           data-testid="submit-tx-btn"
+          disabled={!data}
           minWidth={140}
           onClick={submitTx}
           type="submit"
@@ -201,4 +192,4 @@ const ReviewTx = ({
   )
 }
 
-export default withStyles(styles)(withSnackbar(ReviewTx))
+export default withSnackbar(ReviewTx)
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx
index 30233fce..90e40b1e 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx
@@ -1,9 +1,10 @@
 // @flow
 import IconButton from '@material-ui/core/IconButton'
 import InputAdornment from '@material-ui/core/InputAdornment'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
 
 import ArrowDown from '../assets/arrow-down.svg'
 
@@ -29,29 +30,21 @@ import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
 import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
 import AddressBookInput from '~/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
+import { safeSelector } from '~/routes/safe/store/selectors'
 import { sm } from '~/theme/variables'
 
 type Props = {
-  onClose: () => void,
-  classes: Object,
-  recipientAddress: string,
-  safeAddress: string,
-  safeName: string,
-  ethBalance: string,
-  onSubmit: Function,
   initialValues: Object,
+  onClose: () => void,
+  onNext: any => void,
+  recipientAddress: string,
 }
 
-const SendCustomTx = ({
-  classes,
-  ethBalance,
-  initialValues,
-  onClose,
-  onSubmit,
-  recipientAddress,
-  safeAddress,
-  safeName,
-}: Props) => {
+const useStyles = makeStyles(styles)
+
+const SendCustomTx = ({ initialValues, onClose, onNext, recipientAddress }: Props) => {
+  const classes = useStyles()
+  const { address: safeAddress, ethBalance, name: safeName } = useSelector(safeSelector)
   const [qrModalOpen, setQrModalOpen] = useState<boolean>(false)
   const [selectedEntry, setSelectedEntry] = useState<Object | null>({
     address: recipientAddress || initialValues.recipientAddress,
@@ -68,7 +61,7 @@ const SendCustomTx = ({
 
   const handleSubmit = (values: Object) => {
     if (values.data || values.value) {
-      onSubmit(values)
+      onNext(values)
     }
   }
 
@@ -268,4 +261,4 @@ const SendCustomTx = ({
   )
 }
 
-export default withStyles(styles)(SendCustomTx)
+export default SendCustomTx
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx
index 7cba6715..8950d711 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx
@@ -1,11 +1,11 @@
 // @flow
 import IconButton from '@material-ui/core/IconButton'
 import InputAdornment from '@material-ui/core/InputAdornment'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import { List } from 'immutable'
 import React, { useState } from 'react'
 import { OnChange } from 'react-final-form-listeners'
+import { useSelector } from 'react-redux'
 
 import ArrowDown from '../assets/arrow-down.svg'
 
@@ -32,19 +32,16 @@ import { type Token } from '~/logic/tokens/store/model/token'
 import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
 import AddressBookInput from '~/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
 import TokenSelectField from '~/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField'
+import { extendedSafeTokensSelector } from '~/routes/safe/container/selector'
+import { safeSelector } from '~/routes/safe/store/selectors'
 import { sm } from '~/theme/variables'
 
 type Props = {
-  onClose: () => void,
-  classes: Object,
-  safeAddress: string,
-  safeName: string,
-  ethBalance: string,
-  selectedToken: string,
-  tokens: List<Token>,
-  onSubmit: Function,
   initialValues: Object,
+  onClose: () => void,
+  onNext: any => void,
   recipientAddress?: string,
+  selectedToken: string,
 }
 
 const formMutators = {
@@ -59,21 +56,15 @@ const formMutators = {
   },
 }
 
-const SendFunds = ({
-  classes,
-  ethBalance,
-  initialValues,
-  onClose,
-  onSubmit,
-  recipientAddress,
-  safeAddress,
-  safeName,
-  selectedToken,
-  tokens,
-}: Props) => {
+const useStyles = makeStyles(styles)
+
+const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedToken = '' }: Props) => {
+  const classes = useStyles()
+  const { address: safeAddress, ethBalance, name: safeName } = useSelector(safeSelector)
+  const tokens: Token = useSelector(extendedSafeTokensSelector)
   const [qrModalOpen, setQrModalOpen] = useState<boolean>(false)
   const [selectedEntry, setSelectedEntry] = useState<Object | null>({
-    address: recipientAddress,
+    address: recipientAddress || initialValues.recipientAddress,
     name: '',
   })
   const [pristine, setPristine] = useState<boolean>(true)
@@ -91,7 +82,7 @@ const SendFunds = ({
     if (!values.recipientAddress) {
       submitValues.recipientAddress = selectedEntry.address
     }
-    onSubmit(submitValues)
+    onNext(submitValues)
   }
 
   const openQrModal = () => {
@@ -294,4 +285,4 @@ const SendFunds = ({
   )
 }
 
-export default withStyles(styles)(SendFunds)
+export default SendFunds
diff --git a/src/routes/safe/components/Balances/index.jsx b/src/routes/safe/components/Balances/index.jsx
index efa9e948..aad43eb7 100644
--- a/src/routes/safe/components/Balances/index.jsx
+++ b/src/routes/safe/components/Balances/index.jsx
@@ -51,10 +51,10 @@ type Props = {
   activeTokens: List<Token>,
   blacklistedTokens: List<Token>,
   classes: Object,
-  createTransaction: Function,
+  createTransaction?: Function,
   currencySelected: string,
   currencyValues: BalanceCurrencyType[],
-  ethBalance: string,
+  ethBalance?: string,
   featuresEnabled: string[],
   fetchCurrencyValues: Function,
   fetchTokens: Function,
@@ -156,10 +156,8 @@ class Balances extends React.Component<Props, State> {
       activeTokens,
       blacklistedTokens,
       classes,
-      createTransaction,
       currencySelected,
       currencyValues,
-      ethBalance,
       granted,
       safeAddress,
       safeName,
@@ -304,14 +302,9 @@ class Balances extends React.Component<Props, State> {
         {erc721Enabled && showCollectibles && <Collectibles />}
         <SendModal
           activeScreenType="sendFunds"
-          createTransaction={createTransaction}
-          ethBalance={ethBalance}
           isOpen={sendFunds.isOpen}
           onClose={this.hideSendFunds}
-          safeAddress={safeAddress}
-          safeName={safeName}
           selectedToken={sendFunds.selectedToken}
-          tokens={activeTokens}
         />
         <Modal
           description="Receive Tokens Form"
diff --git a/src/routes/safe/components/Layout.jsx b/src/routes/safe/components/Layout.jsx
index 561f86c9..0526b0ce 100644
--- a/src/routes/safe/components/Layout.jsx
+++ b/src/routes/safe/components/Layout.jsx
@@ -316,10 +316,8 @@ const Layout = (props: Props) => {
               activateTokensByBalance={activateTokensByBalance}
               activeTokens={activeTokens}
               blacklistedTokens={blacklistedTokens}
-              createTransaction={createTransaction}
               currencySelected={currencySelected}
               currencyValues={currencyValues}
-              ethBalance={ethBalance}
               featuresEnabled={featuresEnabled}
               fetchCurrencyValues={fetchCurrencyValues}
               fetchTokens={fetchTokens}
@@ -378,14 +376,9 @@ const Layout = (props: Props) => {
       </Switch>
       <SendModal
         activeScreenType="chooseTxType"
-        createTransaction={createTransaction}
-        ethBalance={ethBalance}
         isOpen={sendFunds.isOpen}
         onClose={hideSendFunds}
-        safeAddress={address}
-        safeName={name}
         selectedToken={sendFunds.selectedToken}
-        tokens={activeTokens}
       />
       <Modal
         description="Receive Tokens Form"