From bf07a3a3a1080d9db005f65e4d4d5cce2e25e63d Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 20 Oct 2020 13:51:24 -0300
Subject: [PATCH 01/17] Removed containsMethodByHash condition check, now we
 always expect that safeTransferFrom is defined on the erc721 contract

---
 .../SendModal/screens/ReviewCollectible/index.tsx  | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 96a393bf81..85990e9666 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -21,11 +21,7 @@ import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { estimateTxGasCosts } from 'src/logic/safe/transactions/gasNew'
-import {
-  containsMethodByHash,
-  getERC721TokenContract,
-  getHumanFriendlyToken,
-} from 'src/logic/tokens/store/actions/fetchTokens'
+import { getERC721TokenContract } from 'src/logic/tokens/store/actions/fetchTokens'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH } from 'src/logic/tokens/utils/tokenHelpers'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
@@ -57,12 +53,10 @@ const ReviewCollectible = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx
     let isCurrent = true
 
     const estimateGas = async () => {
-      const supportsSafeTransfer = await containsMethodByHash(tx.assetAddress, SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH)
-      const methodToCall = supportsSafeTransfer ? `0x${SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH}` : 'transfer'
+      const methodToCall = `0x${SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH}`
       const transferParams = [tx.recipientAddress, tx.nftTokenId]
-      const params = methodToCall === 'transfer' ? transferParams : [safeAddress, ...transferParams]
-
-      const ERC721Token = methodToCall === 'transfer' ? await getHumanFriendlyToken() : await getERC721TokenContract()
+      const params = [safeAddress, ...transferParams]
+      const ERC721Token = await getERC721TokenContract()
       const tokenInstance = await ERC721Token.at(tx.assetAddress)
       const txData = tokenInstance.contract.methods[methodToCall](...params).encodeABI()
 

From 67b475950b86a2ecbbb209a4ad45e0740942038e Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 20 Oct 2020 15:09:33 -0300
Subject: [PATCH 02/17] Types

---
 .../components/Balances/SendModal/index.tsx   | 21 +++++++++++++-----
 .../ReviewCustomTx/index.tsx                  |  8 ++++++-
 .../SendCustomTx/index.tsx                    |  6 ++++-
 .../screens/ContractInteraction/index.tsx     |  6 ++++-
 .../screens/ReviewCollectible/index.tsx       | 22 +++++++++++++++----
 .../screens/ReviewCollectible/style.ts        |  3 ++-
 .../SendModal/screens/SendFunds/index.tsx     | 14 +++++++-----
 .../SendModal/screens/SendFunds/style.ts      |  3 ++-
 8 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/index.tsx b/src/routes/safe/components/Balances/SendModal/index.tsx
index 15df14040f..6317ea1aeb 100644
--- a/src/routes/safe/components/Balances/SendModal/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/index.tsx
@@ -4,6 +4,11 @@ import cn from 'classnames'
 import React, { Suspense, useEffect, useState } from 'react'
 
 import Modal from 'src/components/Modal'
+import { CollectibleTx } from './screens/ReviewCollectible'
+import { CustomTx } from './screens/ContractInteraction/ReviewCustomTx'
+import { SendFundsTx } from './screens/SendFunds'
+import { ContractInteractionTx } from './screens/ContractInteraction'
+import { CustomTxProps } from './screens/ContractInteraction/SendCustomTx'
 
 const ChooseTxType = React.lazy(() => import('./screens/ChooseTxType'))
 
@@ -42,7 +47,7 @@ const useStyles = makeStyles({
 const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, selectedToken }: any) => {
   const classes = useStyles()
   const [activeScreen, setActiveScreen] = useState(activeScreenType || 'chooseTxType')
-  const [tx, setTx] = useState({})
+  const [tx, setTx] = useState<unknown>({})
   const [isABI, setIsABI] = useState(true)
 
   useEffect(() => {
@@ -97,7 +102,7 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
         )}
         {activeScreen === 'sendFunds' && (
           <SendFunds
-            initialValues={tx}
+            initialValues={tx as SendFundsTx}
             onClose={onClose}
             onNext={handleTxCreation}
             recipientAddress={recipientAddress}
@@ -112,7 +117,7 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
             isABI={isABI}
             switchMethod={handleSwitchMethod}
             contractAddress={recipientAddress}
-            initialValues={tx}
+            initialValues={tx as ContractInteractionTx}
             onClose={onClose}
             onNext={handleContractInteractionCreation}
           />
@@ -122,7 +127,7 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
         )}
         {activeScreen === 'contractInteraction' && !isABI && (
           <SendCustomTx
-            initialValues={tx}
+            initialValues={tx as CustomTxProps}
             isABI={isABI}
             switchMethod={handleSwitchMethod}
             onClose={onClose}
@@ -131,7 +136,7 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
           />
         )}
         {activeScreen === 'reviewCustomTx' && (
-          <ReviewCustomTx onClose={onClose} onPrev={() => setActiveScreen('contractInteraction')} tx={tx} />
+          <ReviewCustomTx onClose={onClose} onPrev={() => setActiveScreen('contractInteraction')} tx={tx as CustomTx} />
         )}
         {activeScreen === 'sendCollectible' && (
           <SendCollectible
@@ -143,7 +148,11 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
           />
         )}
         {activeScreen === 'reviewCollectible' && (
-          <ReviewCollectible onClose={onClose} onPrev={() => setActiveScreen('sendCollectible')} tx={tx} />
+          <ReviewCollectible
+            onClose={onClose}
+            onPrev={() => setActiveScreen('sendCollectible')}
+            tx={tx as CollectibleTx}
+          />
         )}
       </Suspense>
     </Modal>
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index 95273241db..5fde6ed9ee 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -30,10 +30,16 @@ import ArrowDown from '../../assets/arrow-down.svg'
 
 import { styles } from './style'
 
+export type CustomTx = {
+  contractAddress?: string
+  data?: string
+  value?: string
+}
+
 type Props = {
   onClose: () => void
   onPrev: () => void
-  tx: { contractAddress?: string; data?: string; value?: string }
+  tx: CustomTx
 }
 
 const useStyles = makeStyles(styles)
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
index e99edda8c2..867fce6708 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
@@ -40,8 +40,12 @@ export interface CreatedTx {
   value: string | number
 }
 
+export type CustomTxProps = {
+  contractAddress?: string
+}
+
 type Props = {
-  initialValues: { contractAddress?: string }
+  initialValues: CustomTxProps
   onClose: () => void
   onNext: (tx: CreatedTx, submit: boolean) => void
   isABI: boolean
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
index e1c4d55eea..6c5a57630b 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
@@ -31,9 +31,13 @@ export interface CreatedTx {
   value: string | number
 }
 
+export type ContractInteractionTx = {
+  contractAddress?: string
+}
+
 export interface ContractInteractionProps {
   contractAddress: string
-  initialValues: { contractAddress?: string }
+  initialValues: ContractInteractionTx
   isABI: boolean
   onClose: () => void
   switchMethod: () => void
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 85990e9666..daacbe9b00 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -1,7 +1,7 @@
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import { withSnackbar } from 'notistack'
+import { useSnackbar } from 'notistack'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
@@ -35,10 +35,24 @@ import { styles } from './style'
 
 const { nativeCoin } = getNetworkInfo()
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
 
-const ReviewCollectible = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }) => {
+export type CollectibleTx = {
+  recipientAddress: string
+  assetAddress: string
+  assetName: string
+  nftTokenId: string
+}
+
+type Props = {
+  onClose: () => void
+  onPrev: () => void
+  tx: CollectibleTx
+}
+
+const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   const classes = useStyles()
+  const { closeSnackbar, enqueueSnackbar } = useSnackbar()
   const shortener = textShortener()
   const dispatch = useDispatch()
   const { address: safeAddress } = useSelector(safeSelector) || {}
@@ -174,4 +188,4 @@ const ReviewCollectible = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx
   )
 }
 
-export default withSnackbar(ReviewCollectible)
+export default ReviewCollectible
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts
index 52f70b5abc..e6e4fbcffa 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/style.ts
@@ -1,6 +1,7 @@
 import { lg, md, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   heading: {
     padding: `${md} ${lg}`,
     justifyContent: 'flex-start',
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
index 14bdc61f08..0ce681582e 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
@@ -47,14 +47,16 @@ const formMutators = {
   },
 }
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
+
+export type SendFundsTx = {
+  amount?: string
+  recipientAddress?: string
+  token?: string
+}
 
 type SendFundsProps = {
-  initialValues: {
-    amount?: string
-    recipientAddress?: string
-    token?: string
-  }
+  initialValues: SendFundsTx
   onClose: () => void
   onNext: (txInfo: unknown) => void
   recipientAddress: string
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/style.ts b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/style.ts
index 44d7d9bb97..776dea0432 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/style.ts
@@ -1,6 +1,7 @@
 import { lg, md, secondaryText } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   heading: {
     padding: `${md} ${lg}`,
     justifyContent: 'flex-start',

From 5af727a144879a9679118a8e52153771d7c69117 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 20 Oct 2020 15:25:11 -0300
Subject: [PATCH 03/17] More types

---
 .../Balances/Collectibles/index.tsx           | 127 +++++++++---------
 .../components/Balances/SendModal/index.tsx   |  16 ++-
 .../SendModal/screens/ChooseTxType/index.tsx  |   2 +-
 .../SendCustomTx/index.tsx                    |   2 +-
 .../screens/ContractInteraction/index.tsx     |   2 +-
 .../SendModal/screens/SendFunds/index.tsx     |   4 +-
 6 files changed, 82 insertions(+), 71 deletions(-)

diff --git a/src/routes/safe/components/Balances/Collectibles/index.tsx b/src/routes/safe/components/Balances/Collectibles/index.tsx
index c06b7227f1..f7c76ed3e0 100644
--- a/src/routes/safe/components/Balances/Collectibles/index.tsx
+++ b/src/routes/safe/components/Balances/Collectibles/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import Card from '@material-ui/core/Card'
-import { makeStyles } from '@material-ui/core/styles'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { useSelector } from 'react-redux'
 
 import Item from './components/Item'
@@ -8,78 +8,78 @@ import Item from './components/Item'
 import Paragraph from 'src/components/layout/Paragraph'
 import { activeNftAssetsListSelector, nftTokensSelector } from 'src/logic/collectibles/store/selectors'
 import SendModal from 'src/routes/safe/components/Balances/SendModal'
-import { safeSelector } from 'src/logic/safe/store/selectors'
 import { fontColor, lg, screenSm, screenXs } from 'src/theme/variables'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 
-const useStyles = makeStyles({
-  cardInner: {
-    boxSizing: 'border-box',
-    maxWidth: '100%',
-    padding: '52px 54px',
-  },
-  cardOuter: {
-    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
-  },
-  gridRow: {
-    boxSizing: 'border-box',
-    columnGap: '30px',
-    display: 'grid',
-    gridTemplateColumns: '1fr',
-    marginBottom: '45px',
-    maxWidth: '100%',
-    rowGap: '45px',
-
-    '&:last-child': {
-      marginBottom: '0',
+const useStyles = makeStyles(
+  createStyles({
+    cardInner: {
+      boxSizing: 'border-box',
+      maxWidth: '100%',
+      padding: '52px 54px',
     },
-
-    [`@media (min-width: ${screenXs}px)`]: {
-      gridTemplateColumns: '1fr 1fr',
+    cardOuter: {
+      boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
     },
+    gridRow: {
+      boxSizing: 'border-box',
+      columnGap: '30px',
+      display: 'grid',
+      gridTemplateColumns: '1fr',
+      marginBottom: '45px',
+      maxWidth: '100%',
+      rowGap: '45px',
+
+      '&:last-child': {
+        marginBottom: '0',
+      },
 
-    [`@media (min-width: ${screenSm}px)`]: {
-      gridTemplateColumns: '1fr 1fr 1fr 1fr',
+      [`@media (min-width: ${screenXs}px)`]: {
+        gridTemplateColumns: '1fr 1fr',
+      },
+
+      [`@media (min-width: ${screenSm}px)`]: {
+        gridTemplateColumns: '1fr 1fr 1fr 1fr',
+      },
+    },
+    title: {
+      alignItems: 'center',
+      display: 'flex',
+      margin: '0 0 18px',
+    },
+    titleImg: {
+      backgroundPosition: '50% 50%',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'contain',
+      borderRadius: '50%',
+      height: '45px',
+      margin: '0 10px 0 0',
+      width: '45px',
+    },
+    titleText: {
+      color: fontColor,
+      fontSize: '18px',
+      fontWeight: 'normal',
+      lineHeight: '1.2',
+      margin: '0',
+    },
+    titleFiller: {
+      backgroundColor: '#e8e7e6',
+      flexGrow: 1,
+      height: '2px',
+      marginLeft: '40px',
+    },
+    noData: {
+      fontSize: lg,
+      textAlign: 'center',
     },
-  },
-  title: {
-    alignItems: 'center',
-    display: 'flex',
-    margin: '0 0 18px',
-  },
-  titleImg: {
-    backgroundPosition: '50% 50%',
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: 'contain',
-    borderRadius: '50%',
-    height: '45px',
-    margin: '0 10px 0 0',
-    width: '45px',
-  },
-  titleText: {
-    color: fontColor,
-    fontSize: '18px',
-    fontWeight: 'normal',
-    lineHeight: '1.2',
-    margin: '0',
-  },
-  titleFiller: {
-    backgroundColor: '#e8e7e6',
-    flexGrow: '1',
-    height: '2px',
-    marginLeft: '40px',
-  },
-  noData: {
-    fontSize: lg,
-    textAlign: 'center',
-  },
-} as any)
+  }),
+)
 
 const Collectibles = (): React.ReactElement => {
   const classes = useStyles()
-  const [selectedToken, setSelectedToken] = React.useState({})
+  const [selectedToken, setSelectedToken] = React.useState(undefined)
   const [sendNFTsModalOpen, setSendNFTsModalOpen] = React.useState(false)
-  const { address, ethBalance, name } = useSelector(safeSelector) || {}
   const nftTokens = useSelector(nftTokensSelector)
   const activeAssetsList = useSelector(activeNftAssetsListSelector)
   const { trackEvent } = useAnalytics()
@@ -125,11 +125,8 @@ const Collectibles = (): React.ReactElement => {
       </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.tsx b/src/routes/safe/components/Balances/SendModal/index.tsx
index 6317ea1aeb..478aa1c134 100644
--- a/src/routes/safe/components/Balances/SendModal/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/index.tsx
@@ -44,7 +44,21 @@ const useStyles = makeStyles({
   },
 })
 
-const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, selectedToken }: any) => {
+type Props = {
+  activeScreenType: string
+  isOpen: boolean
+  onClose: () => void
+  recipientAddress?: string
+  selectedToken?: string
+}
+
+const SendModal = ({
+  activeScreenType,
+  isOpen,
+  onClose,
+  recipientAddress,
+  selectedToken,
+}: Props): React.ReactElement => {
   const classes = useStyles()
   const [activeScreen, setActiveScreen] = useState(activeScreenType || 'chooseTxType')
   const [tx, setTx] = useState<unknown>({})
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx
index ebbdc9fe19..6bf710770e 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx
@@ -23,7 +23,7 @@ type ActiveScreen = 'sendFunds' | 'sendCollectible' | 'contractInteraction'
 
 interface ChooseTxTypeProps {
   onClose: () => void
-  recipientAddress: string
+  recipientAddress?: string
   setActiveScreen: React.Dispatch<React.SetStateAction<ActiveScreen>>
 }
 
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
index 867fce6708..1f955bdf44 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
@@ -50,7 +50,7 @@ type Props = {
   onNext: (tx: CreatedTx, submit: boolean) => void
   isABI: boolean
   switchMethod: () => void
-  contractAddress: string
+  contractAddress?: string
 }
 
 const useStyles = makeStyles(styles)
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
index 6c5a57630b..bf44d55cec 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
@@ -36,7 +36,7 @@ export type ContractInteractionTx = {
 }
 
 export interface ContractInteractionProps {
-  contractAddress: string
+  contractAddress?: string
   initialValues: ContractInteractionTx
   isABI: boolean
   onClose: () => void
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
index 0ce681582e..92d34615ea 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
@@ -59,8 +59,8 @@ type SendFundsProps = {
   initialValues: SendFundsTx
   onClose: () => void
   onNext: (txInfo: unknown) => void
-  recipientAddress: string
-  selectedToken: string
+  recipientAddress?: string
+  selectedToken?: string
 }
 
 const { nativeCoin } = getNetworkInfo()

From a09bd8987f196287528d928d34bcb18a271ccd5e Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 20 Oct 2020 15:26:12 -0300
Subject: [PATCH 04/17] Add try catch on estimateGas

---
 .../screens/ReviewCollectible/index.tsx       | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index daacbe9b00..e47812a863 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -67,20 +67,24 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
     let isCurrent = true
 
     const estimateGas = async () => {
-      const methodToCall = `0x${SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH}`
-      const transferParams = [tx.recipientAddress, tx.nftTokenId]
-      const params = [safeAddress, ...transferParams]
-      const ERC721Token = await getERC721TokenContract()
-      const tokenInstance = await ERC721Token.at(tx.assetAddress)
-      const txData = tokenInstance.contract.methods[methodToCall](...params).encodeABI()
-
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress as string, tx.recipientAddress, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-        setData(txData)
+      try {
+        const methodToCall = `0x${SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH}`
+        const transferParams = [tx.recipientAddress, tx.nftTokenId]
+        const params = [safeAddress, ...transferParams]
+        const ERC721Token = await getERC721TokenContract()
+        const tokenInstance = await ERC721Token.at(tx.assetAddress)
+        const txData = tokenInstance.contract.methods[methodToCall](...params).encodeABI()
+
+        const estimatedGasCosts = await estimateTxGasCosts(safeAddress as string, tx.recipientAddress, txData)
+        const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
+        const formattedGasCosts = formatAmount(gasCosts)
+
+        if (isCurrent) {
+          setGasCosts(formattedGasCosts)
+          setData(txData)
+        }
+      } catch (error) {
+        console.error('Error while calculating estimated gas:', error)
       }
     }
 

From 95aebedf77c11d7b3284ac8f3f384111f383786e Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 20 Oct 2020 15:29:16 -0300
Subject: [PATCH 05/17] Add try catch on submit transaction

---
 .../screens/ReviewCollectible/index.tsx       | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index e47812a863..3fdf8cf653 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -1,7 +1,6 @@
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import { useSnackbar } from 'notistack'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
@@ -52,7 +51,6 @@ type Props = {
 
 const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
   const classes = useStyles()
-  const { closeSnackbar, enqueueSnackbar } = useSnackbar()
   const shortener = textShortener()
   const dispatch = useDispatch()
   const { address: safeAddress } = useSelector(safeSelector) || {}
@@ -96,18 +94,21 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
   }, [safeAddress, tx.assetAddress, tx.nftTokenId, tx.recipientAddress])
 
   const submitTx = async () => {
-    dispatch(
-      createTransaction({
-        safeAddress,
-        to: tx.assetAddress,
-        valueInWei: '0',
-        txData: data,
-        notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
-        enqueueSnackbar,
-        closeSnackbar,
-      } as any),
-    )
-    onClose()
+    try {
+      dispatch(
+        createTransaction({
+          safeAddress: safeAddress as string,
+          to: tx.assetAddress,
+          valueInWei: '0',
+          txData: data,
+          notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
+        }),
+      )
+    } catch (error) {
+      console.error('Error creating sendCollectible Tx:', error)
+    } finally {
+      onClose()
+    }
   }
 
   return (

From 6cc1709c3fb7bd2666e58e0ee960556b6572a81f Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 20 Oct 2020 15:56:06 -0300
Subject: [PATCH 06/17] More types

---
 .../SendModal/screens/ReviewTx/index.tsx      | 11 ++---
 .../ManageOwners/AddOwnerModal/index.tsx      | 41 +++++++++++++------
 .../ManageOwners/ReplaceOwnerModal/index.tsx  | 35 ++++++++--------
 3 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index 1328cdcf17..605007acc6 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -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 { BigNumber } from 'bignumber.js'
-import { withSnackbar } from 'notistack'
 import React, { useEffect, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { toTokenUnit, fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
@@ -38,7 +37,7 @@ const useStyles = makeStyles(styles as any)
 
 const { nativeCoin } = getNetworkInfo()
 
-const ReviewTx = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }) => {
+const ReviewTx = ({ onClose, onPrev, tx }) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const { address: safeAddress } = useSelector(safeSelector) || {}
@@ -94,14 +93,12 @@ const ReviewTx = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }) => {
 
     dispatch(
       createTransaction({
-        safeAddress,
+        safeAddress: safeAddress as string,
         to: txRecipient,
         valueInWei: txAmount,
         txData: data,
         notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
-        enqueueSnackbar,
-        closeSnackbar,
-      } as any),
+      }),
     )
     onClose()
   }
@@ -196,4 +193,4 @@ const ReviewTx = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx }) => {
   )
 }
 
-export default withSnackbar(ReviewTx)
+export default ReviewTx
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
index 883690a80d..9b7f88d248 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
@@ -1,5 +1,4 @@
-import { withStyles } from '@material-ui/core/styles'
-import { withSnackbar } from 'notistack'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -14,11 +13,12 @@ import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import addSafeOwner from 'src/logic/safe/store/actions/addSafeOwner'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 
-import { safeOwnersSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { checksumAddress } from 'src/utils/checksumAddress'
 import { makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook'
+import { Dispatch } from 'redux'
 
-const styles = () => ({
+const styles = createStyles({
   biggerModalWindow: {
     width: '775px',
     minHeight: '500px',
@@ -26,7 +26,19 @@ const styles = () => ({
   },
 })
 
-export const sendAddOwner = async (values, safeAddress, ownersOld, enqueueSnackbar, closeSnackbar, dispatch) => {
+const useStyles = makeStyles(styles)
+
+type OwnerValues = {
+  ownerAddress: string
+  ownerName: string
+  threshold: string
+}
+
+export const sendAddOwner = async (
+  values: OwnerValues,
+  safeAddress: string,
+  dispatch: Dispatch<any>,
+): Promise<void> => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const txData = gnosisSafe.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI()
 
@@ -37,22 +49,25 @@ export const sendAddOwner = async (values, safeAddress, ownersOld, enqueueSnackb
       valueInWei: '0',
       txData,
       notifiedTransaction: TX_NOTIFICATION_TYPES.SETTINGS_CHANGE_TX,
-      enqueueSnackbar,
-      closeSnackbar,
-    } as any),
+    }),
   )
 
-  if (txHash) {
+  if (!!txHash) {
     dispatch(addSafeOwner({ safeAddress, ownerName: values.ownerName, ownerAddress: values.ownerAddress }))
   }
 }
 
-const AddOwner = ({ classes, closeSnackbar, enqueueSnackbar, isOpen, onClose }) => {
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const AddOwner = ({ isOpen, onClose }: Props): React.ReactElement => {
+  const classes = useStyles()
   const [activeScreen, setActiveScreen] = useState('selectOwner')
   const [values, setValues] = useState<any>({})
   const dispatch = useDispatch()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
-  const owners = useSelector(safeOwnersSelector)
 
   useEffect(
     () => () => {
@@ -91,7 +106,7 @@ const AddOwner = ({ classes, closeSnackbar, enqueueSnackbar, isOpen, onClose })
     onClose()
 
     try {
-      await sendAddOwner(values, safeAddress, owners, enqueueSnackbar, closeSnackbar, dispatch)
+      await sendAddOwner(values, safeAddress, dispatch)
       dispatch(
         addOrUpdateAddressBookEntry(makeAddressBookEntry({ name: values.ownerName, address: values.ownerAddress })),
       )
@@ -121,4 +136,4 @@ const AddOwner = ({ classes, closeSnackbar, enqueueSnackbar, isOpen, onClose })
   )
 }
 
-export default withStyles(styles as any)(withSnackbar(AddOwner))
+export default AddOwner
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
index 8b743074fa..285738a949 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
@@ -1,5 +1,4 @@
-import { withStyles } from '@material-ui/core/styles'
-import { withSnackbar } from 'notistack'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -16,7 +15,7 @@ import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/lo
 import { checksumAddress } from 'src/utils/checksumAddress'
 import { makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook'
 
-const styles = () => ({
+const styles = createStyles({
   biggerModalWindow: {
     width: '775px',
     minHeight: '500px',
@@ -24,15 +23,9 @@ const styles = () => ({
   },
 })
 
-export const sendReplaceOwner = async (
-  values,
-  safeAddress,
-  ownerAddressToRemove,
-  enqueueSnackbar,
-  closeSnackbar,
-  threshold,
-  dispatch,
-) => {
+const useStyles = makeStyles(styles)
+
+export const sendReplaceOwner = async (values, safeAddress, ownerAddressToRemove, threshold, dispatch) => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const safeOwners = await gnosisSafe.methods.getOwners().call()
   const index = safeOwners.findIndex(
@@ -48,9 +41,7 @@ export const sendReplaceOwner = async (
       valueInWei: '0',
       txData,
       notifiedTransaction: TX_NOTIFICATION_TYPES.SETTINGS_CHANGE_TX,
-      enqueueSnackbar,
-      closeSnackbar,
-    } as any),
+    }),
   )
 
   if (txHash && threshold === 1) {
@@ -65,7 +56,15 @@ export const sendReplaceOwner = async (
   }
 }
 
-const ReplaceOwner = ({ classes, closeSnackbar, enqueueSnackbar, isOpen, onClose, ownerAddress, ownerName }) => {
+type ReplaceOwnerProps = {
+  isOpen: boolean
+  onClose: () => void
+  ownerAddress: string
+  ownerName: string
+}
+
+const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwnerProps): React.ReactElement => {
+  const classes = useStyles()
   const [activeScreen, setActiveScreen] = useState('checkOwner')
   const [values, setValues] = useState<any>({})
   const dispatch = useDispatch()
@@ -94,7 +93,7 @@ const ReplaceOwner = ({ classes, closeSnackbar, enqueueSnackbar, isOpen, onClose
   const onReplaceOwner = async () => {
     onClose()
     try {
-      await sendReplaceOwner(values, safeAddress, ownerAddress, enqueueSnackbar, closeSnackbar, threshold, dispatch)
+      await sendReplaceOwner(values, safeAddress, ownerAddress, threshold, dispatch)
 
       dispatch(
         addOrUpdateAddressBookEntry(makeAddressBookEntry({ address: values.ownerAddress, name: values.ownerName })),
@@ -131,4 +130,4 @@ const ReplaceOwner = ({ classes, closeSnackbar, enqueueSnackbar, isOpen, onClose
   )
 }
 
-export default withStyles(styles as any)(withSnackbar(ReplaceOwner))
+export default ReplaceOwner

From 8475e2e83c296fef378c6780b598a67da9748bd1 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 20 Oct 2020 16:02:59 -0300
Subject: [PATCH 07/17] More types

---
 .../ManageOwners/RemoveOwnerModal/index.tsx   | 66 +++++++++----------
 .../ManageOwners/ReplaceOwnerModal/index.tsx  | 22 +++++--
 2 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
index e60d396f73..9ad7126fbc 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
@@ -1,5 +1,4 @@
-import { withStyles } from '@material-ui/core/styles'
-import { withSnackbar } from 'notistack'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -13,13 +12,10 @@ import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import removeSafeOwner from 'src/logic/safe/store/actions/removeSafeOwner'
 
-import {
-  safeOwnersSelector,
-  safeParamAddressFromStateSelector,
-  safeThresholdSelector,
-} from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
+import { Dispatch } from 'redux'
 
-const styles = () => ({
+const styles = createStyles({
   biggerModalWindow: {
     width: '775px',
     minHeight: '500px',
@@ -27,17 +23,22 @@ const styles = () => ({
   },
 })
 
+const useStyles = makeStyles(styles)
+
+type OwnerValues = {
+  ownerAddress: string
+  ownerName: string
+  threshold: string
+}
+
 export const sendRemoveOwner = async (
-  values,
-  safeAddress,
-  ownerAddressToRemove,
-  ownerNameToRemove,
-  ownersOld,
-  enqueueSnackbar,
-  closeSnackbar,
-  threshold,
-  dispatch,
-) => {
+  values: OwnerValues,
+  safeAddress: string,
+  ownerAddressToRemove: string,
+  ownerNameToRemove: string,
+  dispatch: Dispatch<any>,
+  threshold?: number,
+): Promise<void> => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const safeOwners = await gnosisSafe.methods.getOwners().call()
   const index = safeOwners.findIndex(
@@ -53,9 +54,7 @@ export const sendRemoveOwner = async (
       valueInWei: '0',
       txData,
       notifiedTransaction: TX_NOTIFICATION_TYPES.SETTINGS_CHANGE_TX,
-      enqueueSnackbar,
-      closeSnackbar,
-    } as any),
+    }),
   )
 
   if (txHash && threshold === 1) {
@@ -63,11 +62,18 @@ export const sendRemoveOwner = async (
   }
 }
 
-const RemoveOwner = ({ classes, closeSnackbar, enqueueSnackbar, isOpen, onClose, ownerAddress, ownerName }) => {
+type RemoveOwnerProps = {
+  isOpen: boolean
+  onClose: () => void
+  ownerAddress: string
+  ownerName: string
+}
+
+const RemoveOwner = ({ isOpen, onClose, ownerAddress, ownerName }: RemoveOwnerProps): React.ReactElement => {
+  const classes = useStyles()
   const [activeScreen, setActiveScreen] = useState('checkOwner')
   const [values, setValues] = useState<any>({})
   const dispatch = useDispatch()
-  const owners = useSelector(safeOwnersSelector)
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const threshold = useSelector(safeThresholdSelector)
 
@@ -99,17 +105,7 @@ const RemoveOwner = ({ classes, closeSnackbar, enqueueSnackbar, isOpen, onClose,
 
   const onRemoveOwner = () => {
     onClose()
-    sendRemoveOwner(
-      values,
-      safeAddress,
-      ownerAddress,
-      ownerName,
-      owners,
-      enqueueSnackbar,
-      closeSnackbar,
-      threshold,
-      dispatch,
-    )
+    sendRemoveOwner(values, safeAddress, ownerAddress, ownerName, dispatch, threshold)
   }
 
   return (
@@ -142,4 +138,4 @@ const RemoveOwner = ({ classes, closeSnackbar, enqueueSnackbar, isOpen, onClose,
   )
 }
 
-export default withStyles(styles as any)(withSnackbar(RemoveOwner))
+export default RemoveOwner
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
index 285738a949..f31da3820b 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
@@ -14,6 +14,8 @@ import replaceSafeOwner from 'src/logic/safe/store/actions/replaceSafeOwner'
 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { checksumAddress } from 'src/utils/checksumAddress'
 import { makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook'
+import { sameAddress } from 'src/logic/wallets/ethAddresses'
+import { Dispatch } from 'redux'
 
 const styles = createStyles({
   biggerModalWindow: {
@@ -25,12 +27,22 @@ const styles = createStyles({
 
 const useStyles = makeStyles(styles)
 
-export const sendReplaceOwner = async (values, safeAddress, ownerAddressToRemove, threshold, dispatch) => {
+type OwnerValues = {
+  ownerAddress: string
+  ownerName: string
+  threshold: string
+}
+
+export const sendReplaceOwner = async (
+  values: OwnerValues,
+  safeAddress: string,
+  ownerAddressToRemove: string,
+  dispatch: Dispatch<any>,
+  threshold?: number,
+): Promise<void> => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const safeOwners = await gnosisSafe.methods.getOwners().call()
-  const index = safeOwners.findIndex(
-    (ownerAddress) => ownerAddress.toLowerCase() === ownerAddressToRemove.toLowerCase(),
-  )
+  const index = safeOwners.findIndex((ownerAddress) => sameAddress(ownerAddress, ownerAddressToRemove))
   const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1]
   const txData = gnosisSafe.methods.swapOwner(prevAddress, ownerAddressToRemove, values.ownerAddress).encodeABI()
 
@@ -93,7 +105,7 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
   const onReplaceOwner = async () => {
     onClose()
     try {
-      await sendReplaceOwner(values, safeAddress, ownerAddress, threshold, dispatch)
+      await sendReplaceOwner(values, safeAddress, ownerAddress, dispatch, threshold)
 
       dispatch(
         addOrUpdateAddressBookEntry(makeAddressBookEntry({ address: values.ownerAddress, name: values.ownerName })),

From fc12437348b683afad04c90262e1562cd7fa52f2 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 20 Oct 2020 16:04:38 -0300
Subject: [PATCH 08/17] More types

---
 .../screens/ContractInteraction/Review/index.tsx       | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 350d30d7c4..a5f0c48389 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/core/styles'
-import { useSnackbar } from 'notistack'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
@@ -43,7 +42,6 @@ type Props = {
 const { nativeCoin } = getNetworkInfo()
 
 const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
-  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
   const classes = useStyles()
   const dispatch = useDispatch()
   const { address: safeAddress } = useSelector(safeSelector) || {}
@@ -76,14 +74,12 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
     const txValue = tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0'
     dispatch(
       createTransaction({
-        safeAddress,
-        to: txRecipient,
+        safeAddress: safeAddress as string,
+        to: txRecipient as string,
         valueInWei: txValue,
         txData,
         notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
-        enqueueSnackbar,
-        closeSnackbar,
-      } as any),
+      }),
     )
 
     onClose()

From 6c8f2a44bd56c1619126d81eb0f2df769d013ab4 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 20 Oct 2020 16:11:26 -0300
Subject: [PATCH 09/17] ReviewTx modal props

---
 .../components/Balances/SendModal/index.tsx   |  3 ++-
 .../SendModal/screens/ReviewTx/index.tsx      | 21 +++++++++++++++----
 .../SendModal/screens/ReviewTx/style.ts       |  3 ++-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/index.tsx b/src/routes/safe/components/Balances/SendModal/index.tsx
index 478aa1c134..e54f26dda7 100644
--- a/src/routes/safe/components/Balances/SendModal/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/index.tsx
@@ -9,6 +9,7 @@ import { CustomTx } from './screens/ContractInteraction/ReviewCustomTx'
 import { SendFundsTx } from './screens/SendFunds'
 import { ContractInteractionTx } from './screens/ContractInteraction'
 import { CustomTxProps } from './screens/ContractInteraction/SendCustomTx'
+import { ReviewTxProp } from './screens/ReviewTx'
 
 const ChooseTxType = React.lazy(() => import('./screens/ChooseTxType'))
 
@@ -124,7 +125,7 @@ const SendModal = ({
           />
         )}
         {activeScreen === 'reviewTx' && (
-          <ReviewTx onClose={onClose} onPrev={() => setActiveScreen('sendFunds')} tx={tx} />
+          <ReviewTx onClose={onClose} onPrev={() => setActiveScreen('sendFunds')} tx={tx as ReviewTxProp} />
         )}
         {activeScreen === 'contractInteraction' && isABI && (
           <ContractInteraction
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index 605007acc6..2bb1f4369e 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -33,11 +33,24 @@ import ArrowDown from '../assets/arrow-down.svg'
 
 import { styles } from './style'
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
 
 const { nativeCoin } = getNetworkInfo()
 
-const ReviewTx = ({ onClose, onPrev, tx }) => {
+export type ReviewTxProp = {
+  recipientAddress: string
+  amount: string
+  txRecipient: string
+  token: string
+}
+
+type ReviewTxProps = {
+  onClose: () => void
+  onPrev: () => void
+  tx: ReviewTxProp
+}
+
+const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const { address: safeAddress } = useSelector(safeSelector) || {}
@@ -68,7 +81,7 @@ const ReviewTx = ({ onClose, onPrev, tx }) => {
         txData = tokenInstance.contract.methods.transfer(tx.recipientAddress, txAmount).encodeABI()
       }
 
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress as string, txRecipient, txData)
+      const estimatedGasCosts = await estimateTxGasCosts(safeAddress as string, txRecipient as string, txData)
       const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
       const formattedGasCosts = formatAmount(gasCosts)
 
@@ -94,7 +107,7 @@ const ReviewTx = ({ onClose, onPrev, tx }) => {
     dispatch(
       createTransaction({
         safeAddress: safeAddress as string,
-        to: txRecipient,
+        to: txRecipient as string,
         valueInWei: txAmount,
         txData: data,
         notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts
index 52f70b5abc..e6e4fbcffa 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.ts
@@ -1,6 +1,7 @@
 import { lg, md, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   heading: {
     padding: `${md} ${lg}`,
     justifyContent: 'flex-start',

From f6ef0fad7ea48bbd478531da1e41f0f3a63ab67f Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Tue, 20 Oct 2020 16:29:07 -0300
Subject: [PATCH 10/17] Fix SendCollectible modal types

---
 .../Balances/Collectibles/index.tsx           |  5 +++--
 .../components/Balances/SendModal/index.tsx   | 11 ++++++----
 .../screens/SendCollectible/index.tsx         | 22 ++++++++++++++++---
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/routes/safe/components/Balances/Collectibles/index.tsx b/src/routes/safe/components/Balances/Collectibles/index.tsx
index f7c76ed3e0..8bd0593c36 100644
--- a/src/routes/safe/components/Balances/Collectibles/index.tsx
+++ b/src/routes/safe/components/Balances/Collectibles/index.tsx
@@ -10,6 +10,7 @@ import { activeNftAssetsListSelector, nftTokensSelector } from 'src/logic/collec
 import SendModal from 'src/routes/safe/components/Balances/SendModal'
 import { fontColor, lg, screenSm, screenXs } from 'src/theme/variables'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
+import { NFTToken } from 'src/logic/collectibles/sources/collectibles'
 
 const useStyles = makeStyles(
   createStyles({
@@ -78,7 +79,7 @@ const useStyles = makeStyles(
 
 const Collectibles = (): React.ReactElement => {
   const classes = useStyles()
-  const [selectedToken, setSelectedToken] = React.useState(undefined)
+  const [selectedToken, setSelectedToken] = React.useState<NFTToken | undefined>()
   const [sendNFTsModalOpen, setSendNFTsModalOpen] = React.useState(false)
   const nftTokens = useSelector(nftTokensSelector)
   const activeAssetsList = useSelector(activeNftAssetsListSelector)
@@ -88,7 +89,7 @@ const Collectibles = (): React.ReactElement => {
     trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Collectibles' })
   }, [trackEvent])
 
-  const handleItemSend = (nftToken) => {
+  const handleItemSend = (nftToken: NFTToken) => {
     setSelectedToken(nftToken)
     setSendNFTsModalOpen(true)
   }
diff --git a/src/routes/safe/components/Balances/SendModal/index.tsx b/src/routes/safe/components/Balances/SendModal/index.tsx
index e54f26dda7..c07ddbce1e 100644
--- a/src/routes/safe/components/Balances/SendModal/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/index.tsx
@@ -10,6 +10,8 @@ import { SendFundsTx } from './screens/SendFunds'
 import { ContractInteractionTx } from './screens/ContractInteraction'
 import { CustomTxProps } from './screens/ContractInteraction/SendCustomTx'
 import { ReviewTxProp } from './screens/ReviewTx'
+import { NFTToken } from 'src/logic/collectibles/sources/collectibles'
+import { SendCollectibleTxInfo } from './screens/SendCollectible'
 
 const ChooseTxType = React.lazy(() => import('./screens/ChooseTxType'))
 
@@ -50,7 +52,7 @@ type Props = {
   isOpen: boolean
   onClose: () => void
   recipientAddress?: string
-  selectedToken?: string
+  selectedToken?: string | NFTToken
 }
 
 const SendModal = ({
@@ -73,7 +75,7 @@ const SendModal = ({
 
   const scalableModalSize = activeScreen === 'chooseTxType'
 
-  const handleTxCreation = (txInfo) => {
+  const handleTxCreation = (txInfo: SendCollectibleTxInfo) => {
     setActiveScreen('reviewTx')
     setTx(txInfo)
   }
@@ -89,6 +91,7 @@ const SendModal = ({
   }
 
   const handleSendCollectible = (txInfo) => {
+    console.log('review tx info', txInfo)
     setActiveScreen('reviewCollectible')
     setTx(txInfo)
   }
@@ -121,7 +124,7 @@ const SendModal = ({
             onClose={onClose}
             onNext={handleTxCreation}
             recipientAddress={recipientAddress}
-            selectedToken={selectedToken}
+            selectedToken={selectedToken as string}
           />
         )}
         {activeScreen === 'reviewTx' && (
@@ -159,7 +162,7 @@ const SendModal = ({
             onClose={onClose}
             onNext={handleSendCollectible}
             recipientAddress={recipientAddress}
-            selectedToken={selectedToken}
+            selectedToken={selectedToken as NFTToken}
           />
         )}
         {activeScreen === 'reviewCollectible' && (
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
index 833f4e9956..2bbb17fa59 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
@@ -28,6 +28,7 @@ import { sm } from 'src/theme/variables'
 import ArrowDown from '../assets/arrow-down.svg'
 
 import { styles } from './style'
+import { NFTToken } from 'src/logic/collectibles/sources/collectibles'
 
 const formMutators = {
   setMax: (args, state, utils) => {
@@ -43,13 +44,28 @@ const formMutators = {
 
 const useStyles = makeStyles(styles)
 
+type SendCollectibleProps = {
+  initialValues: any
+  onClose: () => void
+  onNext: (txInfo: SendCollectibleTxInfo) => void
+  recipientAddress?: string
+  selectedToken: NFTToken
+}
+
+export type SendCollectibleTxInfo = {
+  assetAddress: string
+  assetName: string
+  nftTokenId: string
+  recipientAddress?: string
+}
+
 const SendCollectible = ({
   initialValues,
   onClose,
   onNext,
   recipientAddress,
-  selectedToken = {},
-}): React.ReactElement => {
+  selectedToken,
+}: SendCollectibleProps): React.ReactElement => {
   const classes = useStyles()
   const nftAssets = useSelector(safeActiveSelectorMap)
   const nftTokens = useSelector(nftTokensSelector)
@@ -67,7 +83,7 @@ const SendCollectible = ({
     }
   }, [selectedEntry, pristine])
 
-  const handleSubmit = (values) => {
+  const handleSubmit = (values: SendCollectibleTxInfo) => {
     // If the input wasn't modified, there was no mutation of the recipientAddress
     if (!values.recipientAddress) {
       values.recipientAddress = selectedEntry?.address

From fbf0785d096ae5e9d2ea0cdacdfc787220ed363e Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Thu, 22 Oct 2020 12:26:00 -0300
Subject: [PATCH 11/17] Add guard for safeAddress

---
 .../ContractInteraction/Review/index.tsx      | 21 ++++++++++---------
 .../ReviewCustomTx/index.tsx                  | 20 ++++++++++--------
 .../screens/ReviewCollectible/index.tsx       | 20 ++++++++++--------
 .../SendModal/screens/ReviewTx/index.tsx      | 20 ++++++++++--------
 4 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index a5f0c48389..2739f97005 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -72,16 +72,17 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
     const txRecipient = tx.contractAddress
     const txData = tx.data ? tx.data.trim() : ''
     const txValue = tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0'
-    dispatch(
-      createTransaction({
-        safeAddress: safeAddress as string,
-        to: txRecipient as string,
-        valueInWei: txValue,
-        txData,
-        notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
-      }),
-    )
-
+    if (safeAddress) {
+      dispatch(
+        createTransaction({
+          safeAddress,
+          to: txRecipient as string,
+          valueInWei: txValue,
+          txData,
+          notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
+        }),
+      )
+    }
     onClose()
   }
 
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index 5fde6ed9ee..699c8be0ab 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -78,15 +78,17 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
     const txData = tx.data ? tx.data.trim() : ''
     const txValue = tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0'
 
-    dispatch(
-      createTransaction({
-        safeAddress: safeAddress as string,
-        to: txRecipient as string,
-        valueInWei: txValue,
-        txData,
-        notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
-      }),
-    )
+    if (safeAddress) {
+      dispatch(
+        createTransaction({
+          safeAddress: safeAddress,
+          to: txRecipient as string,
+          valueInWei: txValue,
+          txData,
+          notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
+        }),
+      )
+    }
 
     onClose()
   }
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 3fdf8cf653..3e63c1ef37 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -95,15 +95,17 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
 
   const submitTx = async () => {
     try {
-      dispatch(
-        createTransaction({
-          safeAddress: safeAddress as string,
-          to: tx.assetAddress,
-          valueInWei: '0',
-          txData: data,
-          notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
-        }),
-      )
+      if (safeAddress) {
+        dispatch(
+          createTransaction({
+            safeAddress,
+            to: tx.assetAddress,
+            valueInWei: '0',
+            txData: data,
+            notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
+          }),
+        )
+      }
     } catch (error) {
       console.error('Error creating sendCollectible Tx:', error)
     } finally {
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index 2bb1f4369e..f87eafb7e2 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -104,15 +104,17 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
     // if txAmount > 0 it would send ETH from the Safe
     const txAmount = isSendingETH ? toTokenUnit(tx.amount, nativeCoin.decimals) : '0'
 
-    dispatch(
-      createTransaction({
-        safeAddress: safeAddress as string,
-        to: txRecipient as string,
-        valueInWei: txAmount,
-        txData: data,
-        notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
-      }),
-    )
+    if (safeAddress) {
+      dispatch(
+        createTransaction({
+          safeAddress: safeAddress,
+          to: txRecipient as string,
+          valueInWei: txAmount,
+          txData: data,
+          notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
+        }),
+      )
+    }
     onClose()
   }
 

From 84e1874f69fca2ba539171c0c2af5c7a48c6b576 Mon Sep 17 00:00:00 2001
From: Daniel Sanchez <daniel.sanchez@gnosis.pm>
Date: Fri, 23 Oct 2020 11:37:25 +0200
Subject: [PATCH 12/17] Move some imports

---
 .../safe/components/Balances/Collectibles/index.tsx       | 2 +-
 .../screens/ContractInteraction/Review/index.tsx          | 5 +++--
 .../screens/ContractInteraction/ReviewCustomTx/index.tsx  | 8 ++++----
 .../screens/ContractInteraction/SendCustomTx/index.tsx    | 4 ++--
 .../SendModal/screens/ReviewCollectible/index.tsx         | 5 +++--
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/routes/safe/components/Balances/Collectibles/index.tsx b/src/routes/safe/components/Balances/Collectibles/index.tsx
index 8bd0593c36..fa2185daf6 100644
--- a/src/routes/safe/components/Balances/Collectibles/index.tsx
+++ b/src/routes/safe/components/Balances/Collectibles/index.tsx
@@ -10,7 +10,7 @@ import { activeNftAssetsListSelector, nftTokensSelector } from 'src/logic/collec
 import SendModal from 'src/routes/safe/components/Balances/SendModal'
 import { fontColor, lg, screenSm, screenXs } from 'src/theme/variables'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
-import { NFTToken } from 'src/logic/collectibles/sources/collectibles'
+import { NFTToken } from 'src/logic/collectibles/sources/collectibles.d'
 
 const useStyles = makeStyles(
   createStyles({
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 2739f97005..8b2ab99be0 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -1,8 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles'
 import React, { useEffect, useState } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
 import { useDispatch, useSelector } from 'react-redux'
-import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+
 import { getNetworkInfo } from 'src/config'
+import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import AddressInfo from 'src/components/AddressInfo'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index 699c8be0ab..f2de913afe 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -1,11 +1,11 @@
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import React, { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { getNetworkInfo } from 'src/config'
 
+import { getNetworkInfo } from 'src/config'
+import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import CopyBtn from 'src/components/CopyBtn'
 import EtherscanBtn from 'src/components/EtherscanBtn'
 import Identicon from 'src/components/Identicon'
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
index 1f955bdf44..9b96d130bc 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
@@ -1,10 +1,10 @@
+import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
 import IconButton from '@material-ui/core/IconButton'
 import InputAdornment from '@material-ui/core/InputAdornment'
 import { makeStyles } from '@material-ui/core/styles'
 import Switch from '@material-ui/core/Switch'
 import Close from '@material-ui/icons/Close'
-import React, { useState } from 'react'
-import { useSelector } from 'react-redux'
 
 import QRIcon from 'src/assets/icons/qrcode.svg'
 import CopyBtn from 'src/components/CopyBtn'
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 3e63c1ef37..363f79f35a 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -1,8 +1,9 @@
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import React, { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getNetworkInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'

From 15c3438417cce4f27507f25a7a3c9fe982723f5d Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 23 Oct 2020 09:29:19 -0300
Subject: [PATCH 13/17] Fix DispatchReturn types

---
 src/logic/safe/store/actions/createTransaction.ts | 6 +++---
 src/logic/safe/store/actions/types.d.ts           | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index 95ea40e5cb..3da0b7ee92 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -42,7 +42,7 @@ import { Transaction, TransactionStatus, TxArgs } from 'src/logic/safe/store/mod
 import { AnyAction } from 'redux'
 import { PayableTx } from 'src/types/contracts/types.d'
 import { AppReduxState } from 'src/store'
-import { Dispatch } from './types'
+import { Dispatch, DispatchReturn } from './types'
 
 export const removeTxFromStore = (
   tx: Transaction,
@@ -109,7 +109,7 @@ interface CreateTransactionArgs {
   valueInWei: string
 }
 
-type CreateTransactionAction = ThunkAction<Promise<void>, AppReduxState, undefined, AnyAction>
+type CreateTransactionAction = ThunkAction<Promise<void | string>, AppReduxState, DispatchReturn, AnyAction>
 type ConfirmEventHandler = (safeTxHash: string) => void
 type ErrorEventHandler = () => void
 
@@ -127,7 +127,7 @@ const createTransaction = (
   }: CreateTransactionArgs,
   onUserConfirm?: ConfirmEventHandler,
   onError?: ErrorEventHandler,
-): CreateTransactionAction => async (dispatch: Dispatch, getState: () => AppReduxState): Promise<void> => {
+): CreateTransactionAction => async (dispatch: Dispatch, getState: () => AppReduxState): Promise<DispatchReturn> => {
   const state = getState()
 
   if (navigateToTransactionsTab) {
diff --git a/src/logic/safe/store/actions/types.d.ts b/src/logic/safe/store/actions/types.d.ts
index 0006a041d0..d95ce82c15 100644
--- a/src/logic/safe/store/actions/types.d.ts
+++ b/src/logic/safe/store/actions/types.d.ts
@@ -3,4 +3,6 @@ import { AnyAction } from 'redux'
 
 import { AppReduxState } from 'src/store'
 
-export type Dispatch = ThunkDispatch<AppReduxState, undefined, AnyAction>
+export type DispatchReturn = string | undefined
+
+export type Dispatch = ThunkDispatch<AppReduxState, DispatchReturn, AnyAction>

From 3a6cdd9277c18cbf0a2d9739ee289a5b8000e161 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 23 Oct 2020 09:29:53 -0300
Subject: [PATCH 14/17] Fix import of Dispatch

---
 .../Settings/ManageOwners/AddOwnerModal/index.tsx      | 10 +++-------
 .../Settings/ManageOwners/RemoveOwnerModal/index.tsx   |  4 ++--
 .../Settings/ManageOwners/ReplaceOwnerModal/index.tsx  |  4 ++--
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
index 9b7f88d248..88a170faec 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
@@ -16,7 +16,7 @@ import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { checksumAddress } from 'src/utils/checksumAddress'
 import { makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook'
-import { Dispatch } from 'redux'
+import { Dispatch } from 'src/logic/safe/store/actions/types'
 
 const styles = createStyles({
   biggerModalWindow: {
@@ -34,11 +34,7 @@ type OwnerValues = {
   threshold: string
 }
 
-export const sendAddOwner = async (
-  values: OwnerValues,
-  safeAddress: string,
-  dispatch: Dispatch<any>,
-): Promise<void> => {
+export const sendAddOwner = async (values: OwnerValues, safeAddress: string, dispatch: Dispatch): Promise<void> => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const txData = gnosisSafe.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI()
 
@@ -52,7 +48,7 @@ export const sendAddOwner = async (
     }),
   )
 
-  if (!!txHash) {
+  if (txHash) {
     dispatch(addSafeOwner({ safeAddress, ownerName: values.ownerName, ownerAddress: values.ownerAddress }))
   }
 }
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
index 9ad7126fbc..347c131d4d 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
@@ -13,7 +13,7 @@ import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import removeSafeOwner from 'src/logic/safe/store/actions/removeSafeOwner'
 
 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
-import { Dispatch } from 'redux'
+import { Dispatch } from 'src/logic/safe/store/actions/types'
 
 const styles = createStyles({
   biggerModalWindow: {
@@ -36,7 +36,7 @@ export const sendRemoveOwner = async (
   safeAddress: string,
   ownerAddressToRemove: string,
   ownerNameToRemove: string,
-  dispatch: Dispatch<any>,
+  dispatch: Dispatch,
   threshold?: number,
 ): Promise<void> => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
index f31da3820b..122a20a033 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
@@ -15,7 +15,7 @@ import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/lo
 import { checksumAddress } from 'src/utils/checksumAddress'
 import { makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook'
 import { sameAddress } from 'src/logic/wallets/ethAddresses'
-import { Dispatch } from 'redux'
+import { Dispatch } from 'src/logic/safe/store/actions/types'
 
 const styles = createStyles({
   biggerModalWindow: {
@@ -37,7 +37,7 @@ export const sendReplaceOwner = async (
   values: OwnerValues,
   safeAddress: string,
   ownerAddressToRemove: string,
-  dispatch: Dispatch<any>,
+  dispatch: Dispatch,
   threshold?: number,
 ): Promise<void> => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)

From 82e642d132ad743f2f1318e303e682c673b28d5e Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 23 Oct 2020 09:30:10 -0300
Subject: [PATCH 15/17] Remove console log

---
 src/routes/safe/components/Balances/SendModal/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/safe/components/Balances/SendModal/index.tsx b/src/routes/safe/components/Balances/SendModal/index.tsx
index c07ddbce1e..ded4b980b2 100644
--- a/src/routes/safe/components/Balances/SendModal/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/index.tsx
@@ -91,7 +91,6 @@ const SendModal = ({
   }
 
   const handleSendCollectible = (txInfo) => {
-    console.log('review tx info', txInfo)
     setActiveScreen('reviewCollectible')
     setTx(txInfo)
   }

From 6f5978da4c714b6a8d9f18484260cf1d5f5ab142 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 23 Oct 2020 09:51:00 -0300
Subject: [PATCH 16/17] Adds logs

---
 .../SendModal/screens/ContractInteraction/Review/index.tsx      | 2 ++
 .../screens/ContractInteraction/ReviewCustomTx/index.tsx        | 2 ++
 .../Balances/SendModal/screens/ReviewCollectible/index.tsx      | 2 ++
 .../components/Balances/SendModal/screens/ReviewTx/index.tsx    | 2 ++
 4 files changed, 8 insertions(+)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 8b2ab99be0..bf6aa77cdb 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -83,6 +83,8 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
           notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
         }),
       )
+    } else {
+      console.error('There was an error trying to submit the transaction, the safeAddress was not found')
     }
     onClose()
   }
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index f2de913afe..065a30d34b 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -88,6 +88,8 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
           notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
         }),
       )
+    } else {
+      console.error('There was an error trying to submit the transaction, the safeAddress was not found')
     }
 
     onClose()
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 363f79f35a..f7d3691ff9 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -106,6 +106,8 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
             notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
           }),
         )
+      } else {
+        console.error('There was an error trying to submit the transaction, the safeAddress was not found')
       }
     } catch (error) {
       console.error('Error creating sendCollectible Tx:', error)
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
index f87eafb7e2..20dee77cad 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@@ -114,6 +114,8 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
           notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
         }),
       )
+    } else {
+      console.error('There was an error trying to submit the transaction, the safeAddress was not found')
     }
     onClose()
   }

From d6595952586f97d8773674c37e072fcfcd8420ca Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 23 Oct 2020 13:30:43 -0300
Subject: [PATCH 17/17] Fix import

---
 .../Balances/SendModal/screens/ReviewCollectible/index.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index f7d3691ff9..d073fd571a 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -20,7 +20,7 @@ import { nftTokensSelector } from 'src/logic/collectibles/store/selectors'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { safeSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gasNew'
+import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { getERC721TokenContract } from 'src/logic/tokens/store/actions/fetchTokens'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { SAFE_TRANSFER_FROM_WITHOUT_DATA_HASH } from 'src/logic/tokens/utils/tokenHelpers'