Merge branch 'master' into hotix/refund-displayed-as-rejection-desktop-app

2021-01-22 12:57:28 +01:00 · 2021-01-22 12:57:28 +01:00 · a84577cebb
parent f47bc7f175 5bfc4bb15b
commit a84577cebb
70 changed files with 2674 additions and 1765 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "safe-react",
-  "version": "2.17.2",
+  "version": "2.18.1",
  "description": "Allowing crypto users manage funds in a safer way",
  "website": "https://github.com/gnosis/safe-react#readme",
  "bugs": {
@ -158,21 +158,21 @@
    ]
  },
  "dependencies": {
-    "@gnosis.pm/safe-apps-sdk": "1.0.0-beta.4",
+    "@gnosis.pm/safe-apps-sdk": "1.0.2",
    "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
    "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#bf3a84486b7353bd25447ddff39c406f6fafecc6",
    "@gnosis.pm/util-contracts": "2.0.6",
    "@ledgerhq/hw-transport-node-hid-singleton": "5.38.0",
    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "4.9.1",
+    "@material-ui/icons": "^4.11.0",
    "@material-ui/lab": "4.0.0-alpha.56",
    "@openzeppelin/contracts": "3.1.0",
    "@sentry/react": "^5.28.0",
    "@sentry/tracing": "^5.28.0",
-    "@truffle/contract": "4.2.30",
+    "@truffle/contract": "^4.3.0",
    "async-sema": "^3.1.0",
-    "axios": "0.21.0",
+    "axios": "0.21.1",
    "bignumber.js": "9.0.1",
    "bnc-onboard": "^1.16.1",
    "classnames": "^2.2.6",
@ -183,7 +183,7 @@
    "date-fns": "2.16.1",
    "detect-port": "^1.3.0",
    "electron-is-dev": "^1.2.0",
-    "electron-log": "4.3.0",
+    "electron-log": "^4.3.0",
    "electron-settings": "^4.0.2",
    "electron-updater": "4.3.5",
    "eth-sig-util": "^2.5.3",
@ -201,9 +201,10 @@
    "lodash.memoize": "^4.1.2",
    "material-ui-search-bar": "^1.0.0",
    "notistack": "https://github.com/gnosis/notistack.git#v0.9.4",
-    "qrcode.react": "1.0.0",
-    "query-string": "6.13.7",
+    "qrcode.react": "1.0.1",
+    "query-string": "6.13.8",
    "react": "16.13.1",
+    "react-device-detect": "^1.15.0",
    "react-dom": "16.13.1",
    "react-final-form": "^6.5.2",
    "react-final-form-listeners": "^1.0.2",
@ -218,7 +219,7 @@
    "redux-actions": "^2.6.5",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
-    "semver": "7.3.2",
+    "semver": "^7.3.2",
    "styled-components": "^5.2.1",
    "web3": "1.2.11",
    "web3-core": "^1.2.11",
@ -233,8 +234,8 @@
    "@storybook/addons": "^5.3.19",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^5.3.19",
-    "@testing-library/jest-dom": "5.11.6",
-    "@testing-library/react": "11.2.2",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
    "@typechain/web3-v1": "^2.0.0",
    "@types/history": "4.6.2",
    "@types/jest": "^26.0.16",
@ -247,7 +248,6 @@
    "@types/styled-components": "^5.1.4",
    "@typescript-eslint/eslint-plugin": "^4.6.0",
    "@typescript-eslint/parser": "^4.6.0",
-    "autoprefixer": "9.8.6",
    "cross-env": "^7.0.3",
    "dotenv": "^8.2.0",
    "dotenv-expand": "^5.1.0",
@ -255,13 +255,12 @@
    "electron-builder": "22.9.1",
    "electron-notarize": "1.0.0",
    "eslint": "^7.11.0",
-    "eslint-config-prettier": "^6.14.0",
+    "eslint-config-prettier": "^7.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-sort-destructure-keys": "^1.3.5",
-    "ethereumjs-abi": "0.6.8",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.2",
    "patch-package": "^6.2.2",
@ -269,7 +268,7 @@
    "prettier": "^2.2.0",
    "sass": "^1.29.0",
    "typechain": "^4.0.0",
-    "typescript": "4.0.5",
-    "wait-on": "5.2.0"
+    "typescript": "4.1.3",
+    "wait-on": "5.2.1"
  }
 }
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@ -11,7 +11,7 @@ import ErrorIcon from 'src/assets/icons/error.svg'
 import InfoIcon from 'src/assets/icons/info.svg'

 import AppLayout from 'src/components/AppLayout'
-import SafeListSidebarProvider, { SafeListSidebarContext } from 'src/components/SafeListSidebar'
+import { SafeListSidebar, SafeListSidebarContext } from 'src/components/SafeListSidebar'
 import CookiesBanner from 'src/components/CookiesBanner'
 import Notifier from 'src/components/Notifier'
 import Backdrop from 'src/components/layout/Backdrop'
@ -159,9 +159,9 @@ const App: React.FC = ({ children }) => {
 }

 const WrapperAppWithSidebar: React.FC = ({ children }) => (
-  <SafeListSidebarProvider>
+  <SafeListSidebar>
    <App>{children}</App>
-  </SafeListSidebarProvider>
+  </SafeListSidebar>
 )

 export default WrapperAppWithSidebar
--- a/src/components/AppLayout/MobileNotSupported/index.tsx
+++ b/src/components/AppLayout/MobileNotSupported/index.tsx
@ -0,0 +1,134 @@
+import { Button, Text, Card, Icon } from '@gnosis.pm/safe-react-components'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import styled from 'styled-components'
+import React, { ReactElement } from 'react'
+import { MobileView } from 'react-device-detect'
+
+import Phone from 'src/components/AppLayout/MobileStart/assets/phone@2x.png'
+
+const Overlay = styled.div`
+  display: block;
+  position: absolute;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: ${({ theme }) => fade(theme.colors.overlay.color, 0.75)};
+  z-index: 2147483009; /* on top of Intercom Button */
+`
+
+const ModalApp = styled.div`
+  position: fixed;
+  display: flex;
+  justify-content: space-between;
+  bottom: 0;
+  width: 100vw;
+  height: 260px;
+  background-color: ${({ theme }) => theme.colors.background};
+  box-shadow: 1px 2px 10px rgba(40, 54, 61, 0.18);
+  z-index: 2147483004; /* on top of Intercom Button */
+  padding: 20px 16px 0 16px;
+`
+
+const StyledCard = styled(Card)`
+  background-color: #fdfdfd;
+  /*   width: 45vw; */
+  min-width: 245px;
+  height: 220px;
+  padding: 24px 58px 24px 24px;
+  box-sizing: border-box;
+  box-shadow: none;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+
+  @media (max-width: 340px) {
+    padding: 16px;
+    min-width: 215px;
+  }
+`
+const StyledImg = styled.img`
+  margin: 24px -81px 0 -58px;
+  z-index: 1;
+  width: 45%;
+  height: auto;
+  object-fit: cover;
+
+  @media (max-width: 340px) {
+    display: none;
+  }
+
+  @media (min-width: 430px) {
+    width: 30%;
+  }
+
+  @media (min-width: 720px) {
+    width: 25%;
+  }
+
+  @media (min-width: 800px) {
+    width: 20%;
+  }
+`
+
+const StyledCloseIcon = styled(Icon)`
+  margin: 0 34px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.separator};
+    border-radius: 16px;
+    padding: 4px;
+    box-sizing: border-box;
+  }
+
+  @media (max-width: 340px) {
+    margin: 8px 34px 0 16px;
+  }
+`
+const StyledButton = styled(Button)`
+  background-color: transparent;
+  min-width: 0;
+
+  :hover {
+    background-color: transparent;
+  }
+`
+
+const StyledLink = styled.a`
+  text-decoration: none;
+`
+
+type Props = {
+  onClose: () => void
+}
+
+export const MobileNotSupported = ({ onClose }: Props): ReactElement => {
+  return (
+    <MobileView>
+      <Overlay>
+        <ModalApp>
+          <StyledCard>
+            <Text size="lg">The Safe Multisig web app is not optimized for mobile.</Text>
+            <Text size="lg">Get the mobile app for a better experience.</Text>
+            <Button size="md" color="primary" variant="contained">
+              <StyledLink target="_blank" href="https://gnosis-safe.io/#mobile" rel="noopener noreferrer">
+                <Text color="white" size="xl">
+                  Get the App
+                </Text>
+              </StyledLink>
+            </Button>
+          </StyledCard>
+
+          <StyledImg src={Phone} alt="Phone" />
+          <StyledButton size="md" variant="outlined" color="primary" onClick={onClose}>
+            <StyledCloseIcon size="md" type="cross" />
+          </StyledButton>
+        </ModalApp>
+      </Overlay>
+    </MobileView>
+  )
+}
--- a/src/components/AppLayout/MobileStart/assets/phone@2x.png
+++ b/src/components/AppLayout/MobileStart/assets/phone@2x.png
--- a/src/components/AppLayout/index.tsx
+++ b/src/components/AppLayout/index.tsx
@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { ListItemType } from 'src/components/List'

 import Header from './Header'
 import Footer from './Footer'
 import Sidebar from './Sidebar'
+import { MobileNotSupported } from './MobileNotSupported'

 const Container = styled.div`
  height: 100vh;
@ -85,30 +86,38 @@ const Layout: React.FC<Props> = ({
  onNewTransactionClick,
  children,
  sidebarItems,
-}): React.ReactElement => (
-  <Container>
-    <HeaderWrapper>
-      <Header />
-    </HeaderWrapper>
-    <BodyWrapper>
-      <SidebarWrapper>
-        <Sidebar
-          items={sidebarItems}
-          safeAddress={safeAddress}
-          safeName={safeName}
-          balance={balance}
-          granted={granted}
-          onToggleSafeList={onToggleSafeList}
-          onReceiveClick={onReceiveClick}
-          onNewTransactionClick={onNewTransactionClick}
-        />
-      </SidebarWrapper>
-      <ContentWrapper>
-        <div>{children}</div>
-        <Footer />
-      </ContentWrapper>
-    </BodyWrapper>
-  </Container>
-)
+}): React.ReactElement => {
+  const [mobileNotSupportedClosed, setMobileNotSupportedClosed] = useState(false)
+
+  const closeMobileNotSupported = () => setMobileNotSupportedClosed(true)
+
+  return (
+    <Container>
+      <HeaderWrapper>
+        <Header />
+      </HeaderWrapper>
+      <BodyWrapper>
+        <SidebarWrapper>
+          <Sidebar
+            items={sidebarItems}
+            safeAddress={safeAddress}
+            safeName={safeName}
+            balance={balance}
+            granted={granted}
+            onToggleSafeList={onToggleSafeList}
+            onReceiveClick={onReceiveClick}
+            onNewTransactionClick={onNewTransactionClick}
+          />
+        </SidebarWrapper>
+        <ContentWrapper>
+          <div>{children}</div>
+          <Footer />
+        </ContentWrapper>
+      </BodyWrapper>
+
+      {!mobileNotSupportedClosed && <MobileNotSupported onClose={closeMobileNotSupported} />}
+    </Container>
+  )
+}

 export default Layout
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@ -17,7 +17,7 @@ const useStyles = makeStyles(
      position: 'absolute',
      top: '120px',
      width: '500px',
-      height: '540px',
+      height: '580px',
      borderRadius: sm,
      backgroundColor: '#ffffff',
      boxShadow: '0 0 5px 0 rgba(74, 85, 121, 0.5)',
--- a/src/components/SafeListSidebar/SafeList/AddressWrapper.tsx
+++ b/src/components/SafeListSidebar/SafeList/AddressWrapper.tsx
@ -6,9 +6,10 @@ import { sameAddress } from 'src/logic/wallets/ethAddresses'
 import DefaultBadge from './DefaultBadge'
 import { SafeRecordProps } from 'src/logic/safe/store/models/safe'
 import { DefaultSafe } from 'src/routes/safe/store/reducer/types/safe'
-import { SetDefaultSafe } from 'src/logic/safe/store/actions/setDefaultSafe'
+import setDefaultSafe from 'src/logic/safe/store/actions/setDefaultSafe'
 import { makeStyles } from '@material-ui/core/styles'
 import { getNetworkInfo } from 'src/config'
+import { useDispatch } from 'react-redux'

 const StyledButtonLink = styled(ButtonLink)`
  visibility: hidden;
@ -46,14 +47,18 @@ const useStyles = makeStyles({
 type Props = {
  safe: SafeRecordProps
  defaultSafe: DefaultSafe
-  setDefaultSafe: SetDefaultSafe
 }

 const { nativeCoin } = getNetworkInfo()

 export const AddressWrapper = (props: Props): React.ReactElement => {
  const classes = useStyles()
-  const { safe, defaultSafe, setDefaultSafe } = props
+  const { safe, defaultSafe } = props
+  const dispatch = useDispatch()
+
+  const setDefaultSafeAction = (safeAddress: string) => {
+    dispatch(setDefaultSafe(safeAddress))
+  }

  return (
    <div className={classes.wrapper}>
@ -68,7 +73,7 @@ export const AddressWrapper = (props: Props): React.ReactElement => {
            className="safeListMakeDefaultButton"
            textSize="sm"
            onClick={() => {
-              setDefaultSafe(safe.address)
+              setDefaultSafeAction(safe.address)
            }}
            color="primary"
          >
--- a/src/components/SafeListSidebar/SafeList/index.tsx
+++ b/src/components/SafeListSidebar/SafeList/index.tsx
@ -6,12 +6,11 @@ import * as React from 'react'
 import styled from 'styled-components'
 import { SafeRecord } from 'src/logic/safe/store/models/safe'
 import { DefaultSafe } from 'src/routes/safe/store/reducer/types/safe'
-import { SetDefaultSafe } from 'src/logic/safe/store/actions/setDefaultSafe'
 import Hairline from 'src/components/layout/Hairline'
 import Link from 'src/components/layout/Link'
 import { sameAddress } from 'src/logic/wallets/ethAddresses'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
-import { AddressWrapper } from './AddresWrapper'
+import { AddressWrapper } from 'src/components/SafeListSidebar/SafeList/AddressWrapper'
 export const SIDEBAR_SAFELIST_ROW_TESTID = 'SIDEBAR_SAFELIST_ROW_TESTID'

 const StyledIcon = styled(Icon)`
@ -46,10 +45,9 @@ type Props = {
  defaultSafe: DefaultSafe
  safes: SafeRecord[]
  onSafeClick: () => void
-  setDefaultSafe: SetDefaultSafe
 }

-const SafeList = ({ currentSafe, defaultSafe, onSafeClick, safes, setDefaultSafe }: Props): React.ReactElement => {
+export const SafeList = ({ currentSafe, defaultSafe, onSafeClick, safes }: Props): React.ReactElement => {
  const classes = useStyles()

  return (
@ -67,7 +65,7 @@ const SafeList = ({ currentSafe, defaultSafe, onSafeClick, safes, setDefaultSafe
              ) : (
                <div className={classes.noIcon}>placeholder</div>
              )}
-              <AddressWrapper safe={safe} defaultSafe={defaultSafe} setDefaultSafe={setDefaultSafe} />
+              <AddressWrapper safe={safe} defaultSafe={defaultSafe} />
            </ListItem>
          </Link>
          <Hairline />
@ -76,5 +74,3 @@ const SafeList = ({ currentSafe, defaultSafe, onSafeClick, safes, setDefaultSafe
    </MuiList>
  )
 }
-
-export default SafeList
--- a/src/components/SafeListSidebar/index.tsx
+++ b/src/components/SafeListSidebar/index.tsx
@ -1,10 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState, ReactElement } from 'react'
 import Drawer from '@material-ui/core/Drawer'
 import SearchIcon from '@material-ui/icons/Search'
 import SearchBar from 'material-ui-search-bar'
-import { connect } from 'react-redux'
+import { useSelector } from 'react-redux'

-import SafeList from './SafeList'
+import { SafeList } from './SafeList'
 import { sortedSafeListSelector } from './selectors'
 import useSidebarStyles from './style'

@ -15,11 +15,9 @@ import Hairline from 'src/components/layout/Hairline'
 import Link from 'src/components/layout/Link'
 import Row from 'src/components/layout/Row'
 import { WELCOME_ADDRESS } from 'src/routes/routes'
-import setDefaultSafe from 'src/logic/safe/store/actions/setDefaultSafe'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'

 import { defaultSafeSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
-import { AppReduxState } from 'src/store'

 export const SafeListSidebarContext = React.createContext({
  isOpen: false,
@ -34,9 +32,17 @@ const filterBy = (filter, safes) =>
      safe.name.toLowerCase().includes(filter.toLowerCase()),
  )

-const SafeListSidebar = ({ children, currentSafe, defaultSafe, safes, setDefaultSafeAction }) => {
+type Props = {
+  children: ReactElement
+}
+
+export const SafeListSidebar = ({ children }: Props): ReactElement => {
  const [isOpen, setIsOpen] = useState(false)
  const [filter, setFilter] = useState('')
+  const safes = useSelector(sortedSafeListSelector)
+  const defaultSafe = useSelector(defaultSafeSelector)
+  const currentSafe = useSelector(safeParamAddressFromStateSelector)
+
  const classes = useSidebarStyles()
  const { trackEvent } = useAnalytics()

@ -118,19 +124,9 @@ const SafeListSidebar = ({ children, currentSafe, defaultSafe, safes, setDefault
          defaultSafe={defaultSafe}
          onSafeClick={toggleSidebar}
          safes={filteredSafes}
-          setDefaultSafe={setDefaultSafeAction}
        />
      </Drawer>
      {children}
    </SafeListSidebarContext.Provider>
  )
 }
-
-export default connect(
-  (state: AppReduxState) => ({
-    safes: sortedSafeListSelector(state),
-    defaultSafe: defaultSafeSelector(state),
-    currentSafe: safeParamAddressFromStateSelector(state),
-  }),
-  { setDefaultSafeAction: setDefaultSafe },
-)(SafeListSidebar)
--- a/src/components/TransactionFailText/index.tsx
+++ b/src/components/TransactionFailText/index.tsx
@ -0,0 +1,56 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { sm } from 'src/theme/variables'
+import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
+import Row from 'src/components/layout/Row'
+import Paragraph from 'src/components/layout/Paragraph'
+import Img from 'src/components/layout/Img'
+import InfoIcon from 'src/assets/icons/info_red.svg'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { safeThresholdSelector } from 'src/logic/safe/store/selectors'
+
+const styles = createStyles({
+  executionWarningRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    marginRight: sm,
+  },
+})
+
+const useStyles = makeStyles(styles)
+
+type TransactionFailTextProps = {
+  txEstimationExecutionStatus: EstimationStatus
+  isExecution: boolean
+}
+
+export const TransactionFailText = ({
+  txEstimationExecutionStatus,
+  isExecution,
+}: TransactionFailTextProps): React.ReactElement | null => {
+  const classes = useStyles()
+  const threshold = useSelector(safeThresholdSelector)
+
+  if (txEstimationExecutionStatus !== EstimationStatus.FAILURE) {
+    return null
+  }
+
+  let errorMessage = 'To save gas costs, avoid creating the transaction.'
+  if (isExecution) {
+    errorMessage =
+      threshold && threshold > 1
+        ? `To save gas costs, cancel this transaction`
+        : `To save gas costs, avoid executing the transaction.`
+  }
+
+  return (
+    <Row align="center">
+      <Paragraph color="error" className={classes.executionWarningRow}>
+        <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
+        This transaction will most likely fail. {errorMessage}
+      </Paragraph>
+    </Row>
+  )
+}
--- a/src/components/TransactionsFees/index.tsx
+++ b/src/components/TransactionsFees/index.tsx
@ -0,0 +1,54 @@
+import React from 'react'
+import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
+import Paragraph from 'src/components/layout/Paragraph'
+import { getNetworkInfo } from 'src/config'
+import { TransactionFailText } from 'src/components/TransactionFailText'
+import { useSelector } from 'react-redux'
+import { providerNameSelector } from 'src/logic/wallets/store/selectors'
+import { sameString } from 'src/utils/strings'
+import { WALLETS } from 'src/config/networks/network.d'
+
+type TransactionFailTextProps = {
+  txEstimationExecutionStatus: EstimationStatus
+  gasCostFormatted: string
+  isExecution: boolean
+  isCreation: boolean
+  isOffChainSignature: boolean
+}
+const { nativeCoin } = getNetworkInfo()
+
+export const TransactionFees = ({
+  gasCostFormatted,
+  isExecution,
+  isCreation,
+  isOffChainSignature,
+  txEstimationExecutionStatus,
+}: TransactionFailTextProps): React.ReactElement | null => {
+  const providerName = useSelector(providerNameSelector)
+
+  let transactionAction
+  if (isCreation) {
+    transactionAction = 'create'
+  } else if (isExecution) {
+    transactionAction = 'execute'
+  } else {
+    transactionAction = 'approve'
+  }
+
+  // FIXME this should be removed when estimating with WalletConnect correctly
+  if (!providerName || sameString(providerName, WALLETS.WALLET_CONNECT)) {
+    return null
+  }
+
+  return (
+    <>
+      <Paragraph>
+        You&apos;re about to {transactionAction} a transaction and will have to confirm it with your currently connected
+        wallet.
+        {!isOffChainSignature &&
+          ` Make sure you have ${gasCostFormatted} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
+      </Paragraph>
+      <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
+    </>
+  )
+}
--- a/src/components/forms/Field/DebounceValidationField.tsx
+++ b/src/components/forms/Field/DebounceValidationField.tsx
@ -1,33 +0,0 @@
-// source: https://github.com/final-form/react-final-form/issues/369#issuecomment-439823584
-
-import React from 'react'
-import { Field } from 'react-final-form'
-
-import { trimSpaces } from 'src/utils/strings'
-
-const DebounceValidationField = ({ debounce = 1000, validate, ...rest }: any) => {
-  let clearTimeout
-
-  const localValidation = (value, values, fieldState) => {
-    const url = trimSpaces(value)
-
-    if (fieldState.active) {
-      return new Promise((resolve) => {
-        if (clearTimeout) clearTimeout()
-        const timerId = setTimeout(() => {
-          resolve(validate(url, values, fieldState))
-        }, debounce)
-        clearTimeout = () => {
-          clearTimeout(timerId)
-          resolve()
-        }
-      })
-    } else {
-      return validate(url, values, fieldState)
-    }
-  }
-
-  return <Field {...rest} format={trimSpaces} validate={localValidation} />
-}
-
-export default DebounceValidationField
--- a/src/components/forms/Field/index.tsx
+++ b/src/components/forms/Field/index.tsx
@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { Field } from 'react-final-form'

 // $FlowFixMe
--- a/src/logic/contracts/generateBatchRequests.ts
+++ b/src/logic/contracts/generateBatchRequests.ts
@ -46,7 +46,7 @@ const generateBatchRequests = <ReturnValues>({
    return new Promise((resolve) => {
      const resolver = (error, result) => {
        if (error) {
-          resolve()
+          resolve(undefined)
        } else {
          resolve(result)
        }
@ -58,7 +58,7 @@ const generateBatchRequests = <ReturnValues>({
          request = web3[type][method].request(...args, resolver)
        } else {
          if (address === null) {
-            resolve()
+            resolve(undefined)
            return
          }
          request = contractInstance.methods[method](...args).call.request(resolver)
@ -68,7 +68,7 @@ const generateBatchRequests = <ReturnValues>({
        batch ? batch.add(request) : localBatch.add(request)
      } catch (e) {
        console.warn('There was an error trying to batch request from web3.', e)
-        resolve()
+        resolve(undefined)
      }
    })
  })
--- a/src/logic/contracts/safeContracts.ts
+++ b/src/logic/contracts/safeContracts.ts
@ -130,7 +130,11 @@ export const estimateGasForDeployingSafe = async (
  const proxyFactoryData = proxyFactoryMaster.methods
    .createProxyWithNonce(safeMaster.options.address, gnosisSafeData, safeCreationSalt)
    .encodeABI()
-  const gas = await calculateGasOf(proxyFactoryData, userAccount, proxyFactoryMaster.options.address)
+  const gas = await calculateGasOf({
+    data: proxyFactoryData,
+    from: userAccount,
+    to: proxyFactoryMaster.options.address,
+  })
  const gasPrice = await calculateGasPrice()

  return gas * parseInt(gasPrice, 10)
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@ -0,0 +1,257 @@
+import { useEffect, useState } from 'react'
+import {
+  estimateGasForTransactionApproval,
+  estimateGasForTransactionCreation,
+  estimateGasForTransactionExecution,
+} from 'src/logic/safe/transactions/gas'
+import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
+import { calculateGasPrice } from 'src/logic/wallets/ethTransactions'
+import { getNetworkInfo } from 'src/config'
+import { useSelector } from 'react-redux'
+import {
+  safeCurrentVersionSelector,
+  safeParamAddressFromStateSelector,
+  safeThresholdSelector,
+} from 'src/logic/safe/store/selectors'
+import { CALL } from 'src/logic/safe/transactions'
+import { providerSelector } from '../wallets/store/selectors'
+
+import { List } from 'immutable'
+import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
+import { checkIfOffChainSignatureIsPossible } from 'src/logic/safe/safeTxSigner'
+import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
+import { sameString } from 'src/utils/strings'
+import { WALLETS } from 'src/config/networks/network.d'
+
+export enum EstimationStatus {
+  LOADING = 'LOADING',
+  FAILURE = 'FAILURE',
+  SUCCESS = 'SUCCESS',
+}
+
+const checkIfTxIsExecution = (
+  threshold: number,
+  preApprovingOwner?: string,
+  txConfirmations?: number,
+  txType?: string,
+): boolean =>
+  txConfirmations === threshold || !!preApprovingOwner || threshold === 1 || sameString(txType, 'spendingLimit')
+
+const checkIfTxIsApproveAndExecution = (threshold: number, txConfirmations: number, txType?: string): boolean =>
+  txConfirmations + 1 === threshold || sameString(txType, 'spendingLimit')
+
+const checkIfTxIsCreation = (txConfirmations: number, txType?: string): boolean =>
+  txConfirmations === 0 && !sameString(txType, 'spendingLimit')
+
+type TransactionEstimationProps = {
+  txData: string
+  safeAddress: string
+  txRecipient: string
+  txConfirmations?: List<Confirmation>
+  txAmount?: string
+  operation?: number
+  gasPrice?: string
+  gasToken?: string
+  refundReceiver?: string // Address of receiver of gas payment (or 0 if tx.origin).
+  safeTxGas?: number
+  from?: string
+  isExecution: boolean
+  isCreation: boolean
+  isOffChainSignature?: boolean
+  approvalAndExecution?: boolean
+}
+
+const estimateTransactionGas = async ({
+  txData,
+  safeAddress,
+  txRecipient,
+  txConfirmations,
+  txAmount,
+  operation,
+  gasPrice,
+  gasToken,
+  refundReceiver,
+  safeTxGas,
+  from,
+  isExecution,
+  isCreation,
+  isOffChainSignature = false,
+  approvalAndExecution,
+}: TransactionEstimationProps): Promise<number> => {
+  if (isCreation) {
+    return estimateGasForTransactionCreation(safeAddress, txData, txRecipient, txAmount || '0', operation || CALL)
+  }
+
+  if (!from) {
+    throw new Error('No from provided for approving or execute transaction')
+  }
+
+  if (isExecution) {
+    return estimateGasForTransactionExecution({
+      safeAddress,
+      txRecipient,
+      txConfirmations,
+      txAmount: txAmount || '0',
+      txData,
+      operation: operation || CALL,
+      from,
+      gasPrice: gasPrice || '0',
+      gasToken: gasToken || ZERO_ADDRESS,
+      refundReceiver: refundReceiver || ZERO_ADDRESS,
+      safeTxGas: safeTxGas || 0,
+      approvalAndExecution,
+    })
+  }
+
+  return estimateGasForTransactionApproval({
+    safeAddress,
+    operation: operation || CALL,
+    txData,
+    txAmount: txAmount || '0',
+    txRecipient,
+    from,
+    isOffChainSignature,
+  })
+}
+
+type UseEstimateTransactionGasProps = {
+  txData: string
+  txRecipient: string
+  txConfirmations?: List<Confirmation>
+  txAmount?: string
+  preApprovingOwner?: string
+  operation?: number
+  safeTxGas?: number
+  txType?: string
+}
+
+type TransactionGasEstimationResult = {
+  txEstimationExecutionStatus: EstimationStatus
+  gasEstimation: number // Amount of gas needed for execute or approve the transaction
+  gasCost: string // Cost of gas in raw format (estimatedGas * gasPrice)
+  gasCostFormatted: string // Cost of gas in format '< | > 100'
+  gasPrice: string // Current price of gas unit
+  isExecution: boolean // Returns true if the user will execute the tx or false if it just signs it
+  isCreation: boolean // Returns true if the transaction is a creation transaction
+  isOffChainSignature: boolean // Returns true if offChainSignature is available
+}
+
+export const useEstimateTransactionGas = ({
+  txRecipient,
+  txData,
+  txConfirmations,
+  txAmount,
+  preApprovingOwner,
+  operation,
+  safeTxGas,
+  txType,
+}: UseEstimateTransactionGasProps): TransactionGasEstimationResult => {
+  const [gasEstimation, setGasEstimation] = useState<TransactionGasEstimationResult>({
+    txEstimationExecutionStatus: EstimationStatus.LOADING,
+    gasEstimation: 0,
+    gasCost: '0',
+    gasCostFormatted: '< 0.001',
+    gasPrice: '0',
+    isExecution: false,
+    isCreation: false,
+    isOffChainSignature: false,
+  })
+  const { nativeCoin } = getNetworkInfo()
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  const threshold = useSelector(safeThresholdSelector)
+  const safeVersion = useSelector(safeCurrentVersionSelector)
+  const { account: from, smartContractWallet, name: providerName } = useSelector(providerSelector)
+
+  useEffect(() => {
+    const estimateGas = async () => {
+      if (!txData.length) {
+        return
+      }
+      // FIXME this should be removed when estimating with WalletConnect correctly
+      if (!providerName || sameString(providerName, WALLETS.WALLET_CONNECT)) {
+        return null
+      }
+
+      const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations?.size, txType)
+      const isCreation = checkIfTxIsCreation(txConfirmations?.size || 0, txType)
+      const approvalAndExecution = checkIfTxIsApproveAndExecution(Number(threshold), txConfirmations?.size || 0, txType)
+
+      try {
+        const isOffChainSignature = checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion)
+
+        const gasEstimation = await estimateTransactionGas({
+          safeAddress,
+          txRecipient,
+          txData,
+          txAmount,
+          txConfirmations,
+          isExecution,
+          isCreation,
+          isOffChainSignature,
+          operation,
+          from,
+          safeTxGas,
+          approvalAndExecution,
+        })
+        const gasPrice = await calculateGasPrice()
+        const estimatedGasCosts = gasEstimation * parseInt(gasPrice, 10)
+        const gasCost = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
+        const gasCostFormatted = formatAmount(gasCost)
+
+        let txEstimationExecutionStatus = EstimationStatus.SUCCESS
+
+        if (gasEstimation <= 0) {
+          txEstimationExecutionStatus = isOffChainSignature ? EstimationStatus.SUCCESS : EstimationStatus.FAILURE
+        }
+
+        setGasEstimation({
+          txEstimationExecutionStatus,
+          gasEstimation,
+          gasCost,
+          gasCostFormatted,
+          gasPrice,
+          isExecution,
+          isCreation,
+          isOffChainSignature,
+        })
+      } catch (error) {
+        console.warn(error.message)
+        // We put a fixed the amount of gas to let the user try to execute the tx, but it's not accurate so it will probably fail
+        const gasEstimation = 10000
+        const gasCost = fromTokenUnit(gasEstimation, nativeCoin.decimals)
+        const gasCostFormatted = formatAmount(gasCost)
+        setGasEstimation({
+          txEstimationExecutionStatus: EstimationStatus.FAILURE,
+          gasEstimation,
+          gasCost,
+          gasCostFormatted,
+          gasPrice: '1',
+          isExecution,
+          isCreation,
+          isOffChainSignature: false,
+        })
+      }
+    }
+
+    estimateGas()
+  }, [
+    txData,
+    safeAddress,
+    txRecipient,
+    txConfirmations,
+    txAmount,
+    preApprovingOwner,
+    nativeCoin.decimals,
+    threshold,
+    from,
+    operation,
+    safeVersion,
+    smartContractWallet,
+    safeTxGas,
+    txType,
+    providerName,
+  ])
+
+  return gasEstimation
+}
--- a/src/logic/notifications/store/reducer/notifications.ts
+++ b/src/logic/notifications/store/reducer/notifications.ts
@ -20,7 +20,7 @@ export default handleActions(
      const { dismissAll, key } = action.payload

      if (key) {
-        return state.update(key, (prev) => prev.set('dismissed', true))
+        return state.update(key, (prev) => prev?.set('dismissed', true))
      }
      if (dismissAll) {
        return state.withMutations((map) => {
--- a/src/logic/safe/safeTxSigner.ts
+++ b/src/logic/safe/safeTxSigner.ts
@ -1,31 +1,61 @@
-// https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
-// https://github.com/gnosis/safe-contracts/blob/master/test/gnosisSafeTeamEdition.js#L26
-export const generateSignaturesFromTxConfirmations = (confirmations, preApprovingOwner) => {
-  // The constant parts need to be sorted so that the recovered signers are sorted ascending
-  // (natural order) by address (not checksummed).
-  const confirmationsMap = confirmations.reduce((map, obj) => {
-    map[obj.owner.toLowerCase()] = obj // eslint-disable-line no-param-reassign
-    return map
-  }, {})
+import { List } from 'immutable'
+import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
+import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
+import semverSatisfies from 'semver/functions/satisfies'
+import { SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES } from './transactions/offchainSigner'
+
+// Here we're checking that safe contract version is greater or equal 1.1.1, but
+// theoretically EIP712 should also work for 1.0.0 contracts
+// Also, offchain signatures are not working for ledger/trezor wallet because of a bug in their library:
+// https://github.com/LedgerHQ/ledgerjs/issues/378
+// Couldn't find an issue for trezor but the error is almost the same
+export const checkIfOffChainSignatureIsPossible = (
+  isExecution: boolean,
+  isSmartContractWallet: boolean,
+  safeVersion?: string,
+): boolean =>
+  !isExecution &&
+  !isSmartContractWallet &&
+  !!safeVersion &&
+  semverSatisfies(safeVersion, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES)
+
+// https://docs.gnosis.io/safe/docs/contracts_signatures/#pre-validated-signatures
+export const getPreValidatedSignatures = (from: string, initialString: string = EMPTY_DATA): string => {
+  return `${initialString}000000000000000000000000${from.replace(
+    EMPTY_DATA,
+    '',
+  )}000000000000000000000000000000000000000000000000000000000000000001`
+}
+
+export const generateSignaturesFromTxConfirmations = (
+  confirmations?: List<Confirmation>,
+  preApprovingOwner?: string,
+): string => {
+  let confirmationsMap =
+    confirmations?.map((value) => {
+      return {
+        signature: value.signature,
+        owner: value.owner.toLowerCase(),
+      }
+    }) || List([])

  if (preApprovingOwner) {
-    confirmationsMap[preApprovingOwner.toLowerCase()] = { owner: preApprovingOwner }
+    confirmationsMap = confirmationsMap.push({ owner: preApprovingOwner, signature: null })
  }

+  // The constant parts need to be sorted so that the recovered signers are sorted ascending
+  // (natural order) by address (not checksummed).
+  confirmationsMap = confirmationsMap.sort((ownerA, ownerB) => ownerA.owner.localeCompare(ownerB.owner))
+
  let sigs = '0x'
-  Object.keys(confirmationsMap)
-    .sort()
-    .forEach((addr) => {
-      const conf = confirmationsMap[addr]
-      if (conf.signature) {
-        sigs += conf.signature.slice(2)
-      } else {
-        // https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
-        sigs += `000000000000000000000000${addr.replace(
-          '0x',
-          '',
-        )}000000000000000000000000000000000000000000000000000000000000000001`
-      }
-    })
+  confirmationsMap.forEach(({ signature, owner }) => {
+    if (signature) {
+      sigs += signature.slice(2)
+    } else {
+      // https://docs.gnosis.io/safe/docs/contracts_signatures/#pre-validated-signatures
+      sigs += getPreValidatedSignatures(owner, '')
+    }
+  })
+
  return sigs
 }
--- a/src/logic/safe/store/actions/tests/utils.test.ts
+++ b/src/logic/safe/store/actions/tests/utils.test.ts
@ -3,22 +3,8 @@ import { GnosisSafe } from 'src/types/contracts/GnosisSafe.d'
 import { TxServiceModel } from 'src/logic/safe/store/actions/transactions/fetchTransactions/loadOutgoingTransactions'

 describe('Store actions utils > getNewTxNonce', () => {
-  it(`Should return passed predicted transaction nonce if it's a valid value`, async () => {
-    // Given
-    const txNonce = '45'
-    const lastTx = { nonce: 44 } as TxServiceModel
-    const safeInstance = {}
-
-    // When
-    const nonce = await getNewTxNonce(txNonce, lastTx, safeInstance as GnosisSafe)
-
-    // Then
-    expect(nonce).toBe('45')
-  })
-
  it(`Should return nonce of a last transaction + 1 if passed nonce is less than last transaction or invalid`, async () => {
    // Given
-    const txNonce = ''
    const lastTx = { nonce: 44 } as TxServiceModel
    const safeInstance = {
      methods: {
@ -29,7 +15,7 @@ describe('Store actions utils > getNewTxNonce', () => {
    }

    // When
-    const nonce = await getNewTxNonce(txNonce, lastTx, safeInstance as GnosisSafe)
+    const nonce = await getNewTxNonce(lastTx, safeInstance as GnosisSafe)

    // Then
    expect(nonce).toBe('45')
@ -37,7 +23,6 @@ describe('Store actions utils > getNewTxNonce', () => {

  it(`Should retrieve contract's instance nonce value as a fallback, if txNonce and lastTx are not valid`, async () => {
    // Given
-    const txNonce = ''
    const lastTx = null
    const safeInstance = {
      methods: {
@ -48,7 +33,7 @@ describe('Store actions utils > getNewTxNonce', () => {
    }

    // When
-    const nonce = await getNewTxNonce(txNonce, lastTx, safeInstance as GnosisSafe)
+    const nonce = await getNewTxNonce(lastTx, safeInstance as GnosisSafe)

    // Then
    expect(nonce).toBe('45')
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@ -1,5 +1,4 @@
 import { push } from 'connected-react-router'
-import semverSatisfies from 'semver/functions/satisfies'
 import { ThunkAction } from 'redux-thunk'

 import { onboardUser } from 'src/components/ConnectButton'
@ -10,11 +9,10 @@ import {
  CALL,
  getApprovalTransaction,
  getExecutionTransaction,
-  SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES,
  saveTxToHistory,
  tryOffchainSigning,
 } from 'src/logic/safe/transactions'
-import { estimateSafeTxGas } from 'src/logic/safe/transactions/gas'
+import { estimateGasForTransactionCreation } from 'src/logic/safe/transactions/gas'
 import { getCurrentSafeVersion } from 'src/logic/safe/utils/safeVersion'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
@ -40,6 +38,7 @@ import { AnyAction } from 'redux'
 import { PayableTx } from 'src/types/contracts/types.d'
 import { AppReduxState } from 'src/store'
 import { Dispatch, DispatchReturn } from './types'
+import { checkIfOffChainSignatureIsPossible, getPreValidatedSignatures } from 'src/logic/safe/safeTxSigner'

 export interface CreateTransactionArgs {
  navigateToTransactionsTab?: boolean
@ -87,18 +86,18 @@ const createTransaction = (
  const { account: from, hardwareWallet, smartContractWallet } = providerSelector(state)
  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
  const lastTx = await getLastTx(safeAddress)
-  const nonce = await getNewTxNonce(txNonce?.toString(), lastTx, safeInstance)
+  const nonce = txNonce ? txNonce.toString() : await getNewTxNonce(lastTx, safeInstance)
  const isExecution = await shouldExecuteTransaction(safeInstance, nonce, lastTx)
  const safeVersion = await getCurrentSafeVersion(safeInstance)
-  const safeTxGas =
-    safeTxGasArg || (await estimateSafeTxGas(safeInstance, safeAddress, txData, to, valueInWei, operation))
-
-  // https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
-  const sigs = `0x000000000000000000000000${from.replace(
-    '0x',
-    '',
-  )}000000000000000000000000000000000000000000000000000000000000000001`
+  let safeTxGas
+  try {
+    safeTxGas =
+      safeTxGasArg || (await estimateGasForTransactionCreation(safeAddress, txData, to, valueInWei, operation))
+  } catch (error) {
+    safeTxGas = safeTxGasArg || 0
+  }

+  const sigs = getPreValidatedSignatures(from)
  const notificationsQueue = getNotificationsFromTxType(notifiedTransaction, origin)
  const beforeExecutionKey = dispatch(enqueueSnackbar(notificationsQueue.beforeExecution))

@ -123,11 +122,7 @@ const createTransaction = (
  const safeTxHash = generateSafeTxHash(safeAddress, txArgs)

  try {
-    // Here we're checking that safe contract version is greater or equal 1.1.1, but
-    // theoretically EIP712 should also work for 1.0.0 contracts
-    const canTryOffchainSigning =
-      !isExecution && !smartContractWallet && semverSatisfies(safeVersion, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES)
-    if (canTryOffchainSigning) {
+    if (checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion)) {
      const signature = await tryOffchainSigning(safeTxHash, { ...txArgs, safeAddress }, hardwareWallet)

      if (signature) {
@ -141,9 +136,7 @@ const createTransaction = (
      }
    }

-    const tx = isExecution
-      ? await getExecutionTransaction(txArgs)
-      : await getApprovalTransaction(safeInstance, safeTxHash)
+    const tx = isExecution ? getExecutionTransaction(txArgs) : getApprovalTransaction(safeInstance, safeTxHash)
    const sendParams: PayableTx = { from, value: 0 }

    // if not set owner management tests will fail on ganache
--- a/src/logic/safe/store/actions/processTransaction.ts
+++ b/src/logic/safe/store/actions/processTransaction.ts
@ -1,12 +1,15 @@
 import { AnyAction } from 'redux'
 import { ThunkAction } from 'redux-thunk'
-import semverSatisfies from 'semver/functions/satisfies'

 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 import { getNotificationsFromTxType } from 'src/logic/notifications'
-import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
+import {
+  checkIfOffChainSignatureIsPossible,
+  generateSignaturesFromTxConfirmations,
+  getPreValidatedSignatures,
+} from 'src/logic/safe/safeTxSigner'
 import { getApprovalTransaction, getExecutionTransaction, saveTxToHistory } from 'src/logic/safe/transactions'
-import { SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES, tryOffchainSigning } from 'src/logic/safe/transactions/offchainSigner'
+import { tryOffchainSigning } from 'src/logic/safe/transactions/offchainSigner'
 import { getCurrentSafeVersion } from 'src/logic/safe/utils/safeVersion'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
 import { providerSelector } from 'src/logic/wallets/store/selectors'
@ -29,16 +32,18 @@ interface ProcessTransactionArgs {
  safeAddress: string
  tx: Transaction
  userAddress: string
+  thresholdReached: boolean
 }

 type ProcessTransactionAction = ThunkAction<Promise<void | string>, AppReduxState, DispatchReturn, AnyAction>

-const processTransaction = ({
+export const processTransaction = ({
  approveAndExecute,
  notifiedTransaction,
  safeAddress,
  tx,
  userAddress,
+  thresholdReached,
 }: ProcessTransactionArgs): ProcessTransactionAction => async (
  dispatch: Dispatch,
  getState: () => AppReduxState,
@ -49,17 +54,15 @@ const processTransaction = ({
  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)

  const lastTx = await getLastTx(safeAddress)
-  const nonce = await getNewTxNonce(undefined, lastTx, safeInstance)
+  const nonce = await getNewTxNonce(lastTx, safeInstance)
  const isExecution = approveAndExecute || (await shouldExecuteTransaction(safeInstance, nonce, lastTx))
  const safeVersion = await getCurrentSafeVersion(safeInstance)

-  let sigs = generateSignaturesFromTxConfirmations(tx.confirmations, approveAndExecute && userAddress)
-  // https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
+  const preApprovingOwner = approveAndExecute && !thresholdReached ? userAddress : undefined
+  let sigs = generateSignaturesFromTxConfirmations(tx.confirmations, preApprovingOwner)
+
  if (!sigs) {
-    sigs = `0x000000000000000000000000${from.replace(
-      '0x',
-      '',
-    )}000000000000000000000000000000000000000000000000000000000000000001`
+    sigs = getPreValidatedSignatures(from)
  }

  const notificationsQueue = getNotificationsFromTxType(notifiedTransaction, tx.origin)
@ -86,14 +89,7 @@ const processTransaction = ({
  }

  try {
-    // Here we're checking that safe contract version is greater or equal 1.1.1, but
-    // theoretically EIP712 should also work for 1.0.0 contracts
-    // Also, offchain signatures are not working for ledger/trezor wallet because of a bug in their library:
-    // https://github.com/LedgerHQ/ledgerjs/issues/378
-    // Couldn't find an issue for trezor but the error is almost the same
-    const canTryOffchainSigning =
-      !isExecution && !smartContractWallet && semverSatisfies(safeVersion, SAFE_VERSION_FOR_OFFCHAIN_SIGNATURES)
-    if (canTryOffchainSigning) {
+    if (checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion)) {
      const signature = await tryOffchainSigning(tx.safeTxHash, { ...txArgs, safeAddress }, hardwareWallet)

      if (signature) {
@ -109,9 +105,7 @@ const processTransaction = ({
      }
    }

-    transaction = isExecution
-      ? await getExecutionTransaction(txArgs)
-      : await getApprovalTransaction(safeInstance, tx.safeTxHash)
+    transaction = isExecution ? getExecutionTransaction(txArgs) : getApprovalTransaction(safeInstance, tx.safeTxHash)

    const sendParams: any = { from, value: 0 }

@ -196,5 +190,3 @@ const processTransaction = ({

  return txHash
 }
-
-export default processTransaction
--- a/src/logic/safe/store/actions/removeLocalSafe.ts
+++ b/src/logic/safe/store/actions/removeLocalSafe.ts
@ -0,0 +1,11 @@
+import { Action, Dispatch } from 'redux'
+import { loadStoredSafes } from 'src/logic/safe/utils'
+import removeSafe from 'src/logic/safe/store/actions/removeSafe'
+
+export const removeLocalSafe = (safeAddress: string) => async (dispatch: Dispatch): Promise<Action | void> => {
+  const storedSafes = await loadStoredSafes()
+  if (storedSafes) {
+    delete storedSafes[safeAddress]
+  }
+  dispatch(removeSafe(safeAddress))
+}
--- a/src/logic/safe/store/actions/transactions/utils/transactionHelpers.ts
+++ b/src/logic/safe/store/actions/transactions/utils/transactionHelpers.ts
@ -206,12 +206,12 @@ export const calculateTransactionStatus = (

  if (tx.isExecuted && tx.isSuccessful) {
    txStatus = TransactionStatus.SUCCESS
+  } else if (tx.creationTx) {
+    txStatus = TransactionStatus.SUCCESS
  } else if (tx.cancelled || nonce > tx.nonce) {
    txStatus = TransactionStatus.CANCELLED
  } else if (tx.confirmations.size === threshold) {
    txStatus = TransactionStatus.AWAITING_EXECUTION
-  } else if (tx.creationTx) {
-    txStatus = TransactionStatus.SUCCESS
  } else if (!!tx.isPending) {
    txStatus = TransactionStatus.PENDING
  } else {
--- a/src/logic/safe/store/actions/utils.ts
+++ b/src/logic/safe/store/actions/utils.ts
@ -16,15 +16,7 @@ export const getLastTx = async (safeAddress: string): Promise<TxServiceModel | n
  }
 }

-export const getNewTxNonce = async (
-  txNonce: string | undefined,
-  lastTx: TxServiceModel | null,
-  safeInstance: GnosisSafe,
-): Promise<string> => {
-  if (txNonce) {
-    return txNonce
-  }
-
+export const getNewTxNonce = async (lastTx: TxServiceModel | null, safeInstance: GnosisSafe): Promise<string> => {
  // use current's safe nonce as fallback
  return lastTx ? `${lastTx.nonce + 1}` : (await safeInstance.methods.nonce().call()).toString()
 }
--- a/src/logic/safe/store/reducer/safe.ts
+++ b/src/logic/safe/store/reducer/safe.ts
@ -107,17 +107,18 @@ export default handleActions(

    [ADD_OR_UPDATE_SAFE]: (state: SafeReducerMap, action) => {
      const { safe } = action.payload
+      const safeAddress = safe.address

-      if (!state.hasIn(['safes', safe.address])) {
-        return state.setIn(['safes', safe.address], makeSafe(safe))
+      if (!state.hasIn(['safes', safeAddress])) {
+        return state.setIn(['safes', safeAddress], makeSafe(safe))
      }

-      const shouldUpdate = shouldSafeStoreBeUpdated(safe, state.getIn(['safes', safe.safeAddress]))
+      const shouldUpdate = shouldSafeStoreBeUpdated(safe, state.getIn(['safes', safeAddress]))

      return shouldUpdate
        ? state.updateIn(
-            ['safes', safe.address],
-            makeSafe({ name: safe?.name || 'LOADED SAFE', address: safe.address }),
+            ['safes', safeAddress],
+            makeSafe({ name: safe?.name || 'LOADED SAFE', address: safeAddress }),
            (prevSafe) => updateSafeProps(prevSafe, safe),
          )
        : state
@ -125,7 +126,14 @@ export default handleActions(
    [REMOVE_SAFE]: (state: SafeReducerMap, action) => {
      const safeAddress = action.payload

-      return state.deleteIn(['safes', safeAddress])
+      const currentDefaultSafe = state.get('defaultSafe')
+
+      let newState = state.deleteIn(['safes', safeAddress])
+      if (sameAddress(safeAddress, currentDefaultSafe)) {
+        newState = newState.set('defaultSafe', DEFAULT_SAFE_INITIAL_STATE)
+      }
+
+      return newState
    },
    [ADD_SAFE_OWNER]: (state: SafeReducerMap, action) => {
      const { ownerAddress, ownerName, safeAddress } = action.payload
--- a/src/logic/safe/transactions/tests/gas.test.ts
+++ b/src/logic/safe/transactions/tests/gas.test.ts
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@ -1,19 +1,15 @@
-import GnosisSafeSol from '@gnosis.pm/safe-contracts/build/contracts/GnosisSafe.json'
 import { BigNumber } from 'bignumber.js'
-import { AbiItem } from 'web3-utils'
-
-import { CALL } from '.'
-
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
-import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
-import { Transaction } from 'src/logic/safe/store/models/types/transaction'
-import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
-import { EMPTY_DATA, calculateGasOf, calculateGasPrice } from 'src/logic/wallets/ethTransactions'
-import { getAccountFrom, getWeb3 } from 'src/logic/wallets/getWeb3'
-import { GnosisSafe } from 'src/types/contracts/GnosisSafe.d'
+import { calculateGasOf, EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
+import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import { sameString } from 'src/utils/strings'
+import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
+import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
+import { List } from 'immutable'
+import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'

-const estimateDataGasCosts = (data: string): number => {
+// Receives the response data of the safe method requiredTxGas() and parses it to get the gas amount
+const parseRequiredTxGasResponse = (data: string): number => {
  const reducer = (accumulator, currentValue) => {
    if (currentValue === EMPTY_DATA) {
      return accumulator + 0
@ -29,76 +25,38 @@ const estimateDataGasCosts = (data: string): number => {
  return data.match(/.{2}/g)?.reduce(reducer, 0)
 }

-export const estimateTxGasCosts = async (
-  safeAddress: string,
-  to: string,
-  data: string,
-  tx?: Transaction,
-  preApprovingOwner?: string,
-): Promise<number> => {
+interface ErrorDataJson extends JSON {
+  originalError?: {
+    data?: string
+  }
+  data?: string
+}
+
+const getJSONOrNullFromString = (stringInput: string): ErrorDataJson | null => {
  try {
-    const web3 = getWeb3()
-    const from = await getAccountFrom(web3)
-
-    if (!from) {
-      return 0
-    }
-
-    const safeInstance = (new web3.eth.Contract(GnosisSafeSol.abi as AbiItem[], safeAddress) as unknown) as GnosisSafe
-    const nonce = await safeInstance.methods.nonce().call()
-    const threshold = await safeInstance.methods.getThreshold().call()
-    const isExecution = tx?.confirmations.size === Number(threshold) || !!preApprovingOwner || threshold === '1'
-
-    let txData
-    if (isExecution) {
-      // https://docs.gnosis.io/safe/docs/docs5/#pre-validated-signatures
-      const signatures = tx?.confirmations
-        ? generateSignaturesFromTxConfirmations(tx.confirmations, preApprovingOwner)
-        : `0x000000000000000000000000${from.replace(
-            EMPTY_DATA,
-            '',
-          )}000000000000000000000000000000000000000000000000000000000000000001`
-      txData = await safeInstance.methods
-        .execTransaction(
-          to,
-          tx?.value || 0,
-          data,
-          CALL,
-          tx?.safeTxGas || 0,
-          0,
-          0,
-          ZERO_ADDRESS,
-          ZERO_ADDRESS,
-          signatures,
-        )
-        .encodeABI()
-    } else {
-      const txHash = await safeInstance.methods
-        .getTransactionHash(to, tx?.value || 0, data, CALL, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, nonce)
-        .call({
-          from,
-        })
-      txData = await safeInstance.methods.approveHash(txHash).encodeABI()
-    }
-
-    const gas = await calculateGasOf(txData, from, safeAddress)
-    const gasPrice = await calculateGasPrice()
-
-    return gas * parseInt(gasPrice, 10)
-  } catch (err) {
-    console.error('Error while estimating transaction execution gas costs:')
-    console.error(err)
-
-    return 10000
+    return JSON.parse(stringInput)
+  } catch (error) {
+    return null
  }
 }

 // Parses the result from the error message (GETH, OpenEthereum/Parity and Nethermind) and returns the data value
 export const getDataFromNodeErrorMessage = (errorMessage: string): string | undefined => {
+  // Replace illegal characters that often comes within the error string (like <20> for example)
+  // https://stackoverflow.com/questions/12754256/removing-invalid-characters-in-javascript
+  const normalizedErrorString = errorMessage.replace(/\uFFFD/g, '')
+
  // Extracts JSON object from the error message
-  const [, ...error] = errorMessage.split('\n')
+  const [, ...error] = normalizedErrorString.split('\n')
+
  try {
-    const errorAsJSON = JSON.parse(error.join(''))
+    const errorAsString = error.join('')
+    const errorAsJSON = getJSONOrNullFromString(errorAsString)
+
+    // Trezor wallet returns the error not as an JSON object but directly as string
+    if (!errorAsJSON) {
+      return errorAsString.length ? errorAsString : undefined
+    }

    // For new GETH nodes they will return the data as error in the format:
    // {
@ -130,7 +88,7 @@ export const getDataFromNodeErrorMessage = (errorMessage: string): string | unde
  }
 }

-const getGasEstimationTxResponse = async (txConfig: {
+export const getGasEstimationTxResponse = async (txConfig: {
  to: string
  from: string
  data: string
@ -190,8 +148,7 @@ const calculateMinimumGasForTransaction = async (
  return 0
 }

-export const estimateSafeTxGas = async (
-  safe: GnosisSafe | undefined,
+export const estimateGasForTransactionCreation = async (
  safeAddress: string,
  data: string,
  to: string,
@ -199,10 +156,7 @@ export const estimateSafeTxGas = async (
  operation: number,
 ): Promise<number> => {
  try {
-    let safeInstance = safe
-    if (!safeInstance) {
-      safeInstance = await getGnosisSafeInstanceAt(safeAddress)
-    }
+    const safeInstance = await getGnosisSafeInstanceAt(safeAddress)

    const estimateData = safeInstance.methods.requiredTxGas(to, valueInWei, data, operation).encodeABI()
    const gasEstimationResponse = await getGasEstimationTxResponse({
@ -214,7 +168,7 @@ export const estimateSafeTxGas = async (
    const txGasEstimation = gasEstimationResponse + 10000

    // 21000 - additional gas costs (e.g. base tx costs, transfer costs)
-    const dataGasEstimation = estimateDataGasCosts(estimateData) + 21000
+    const dataGasEstimation = parseRequiredTxGasResponse(estimateData) + 21000
    const additionalGasBatches = [0, 10000, 20000, 40000, 80000, 160000, 320000, 640000, 1280000, 2560000, 5120000]

    return await calculateMinimumGasForTransaction(
@ -225,7 +179,102 @@ export const estimateSafeTxGas = async (
      dataGasEstimation,
    )
  } catch (error) {
-    console.error('Error calculating tx gas estimation', error)
-    return 0
+    console.info('Error calculating tx gas estimation', error.message)
+    throw error
  }
 }
+
+type TransactionExecutionEstimationProps = {
+  txData: string
+  safeAddress: string
+  txRecipient: string
+  txConfirmations?: List<Confirmation>
+  txAmount: string
+  operation: number
+  gasPrice: string
+  gasToken: string
+  refundReceiver: string // Address of receiver of gas payment (or 0 if tx.origin).
+  safeTxGas: number
+  from: string
+  approvalAndExecution?: boolean
+}
+
+export const estimateGasForTransactionExecution = async ({
+  safeAddress,
+  txRecipient,
+  txConfirmations,
+  txAmount,
+  txData,
+  operation,
+  gasPrice,
+  gasToken,
+  refundReceiver,
+  safeTxGas,
+  approvalAndExecution,
+}: TransactionExecutionEstimationProps): Promise<number> => {
+  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+  try {
+    if (approvalAndExecution) {
+      console.info(`Estimating transaction success for execution & approval...`)
+      // @todo (agustin) once we solve the problem with the preApprovingOwner, we need to use the method bellow (execTransaction) with sigs = generateSignaturesFromTxConfirmations(txConfirmations,from)
+      const gasEstimation = await estimateGasForTransactionCreation(
+        safeAddress,
+        txData,
+        txRecipient,
+        txAmount,
+        operation,
+      )
+      console.info(`Gas estimation successfully finished with gas amount: ${gasEstimation}`)
+      return gasEstimation
+    }
+    const sigs = generateSignaturesFromTxConfirmations(txConfirmations)
+    console.info(`Estimating transaction success for with gas amount: ${safeTxGas}...`)
+    await safeInstance.methods
+      .execTransaction(txRecipient, txAmount, txData, operation, safeTxGas, 0, gasPrice, gasToken, refundReceiver, sigs)
+      .call()
+
+    console.info(`Gas estimation successfully finished with gas amount: ${safeTxGas}`)
+    return safeTxGas
+  } catch (error) {
+    throw new Error(`Gas estimation failed with gas amount: ${safeTxGas}`)
+  }
+}
+
+type TransactionApprovalEstimationProps = {
+  txData: string
+  safeAddress: string
+  txRecipient: string
+  txAmount: string
+  operation: number
+  from: string
+  isOffChainSignature: boolean
+}
+
+export const estimateGasForTransactionApproval = async ({
+  safeAddress,
+  txRecipient,
+  txAmount,
+  txData,
+  operation,
+  from,
+  isOffChainSignature,
+}: TransactionApprovalEstimationProps): Promise<number> => {
+  if (isOffChainSignature) {
+    return 0
+  }
+
+  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+
+  const nonce = await safeInstance.methods.nonce().call()
+  const txHash = await safeInstance.methods
+    .getTransactionHash(txRecipient, txAmount, txData, operation, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, nonce)
+    .call({
+      from,
+    })
+  const approveTransactionTxData = await safeInstance.methods.approveHash(txHash).encodeABI()
+  return calculateGasOf({
+    data: approveTransactionTxData,
+    from,
+    to: safeAddress,
+  })
+}
--- a/src/logic/safe/transactions/send.ts
+++ b/src/logic/safe/transactions/send.ts
@ -30,10 +30,7 @@ export const getTransactionHash = async ({
  return txHash
 }

-export const getApprovalTransaction = async (
-  safeInstance: GnosisSafe,
-  txHash: string,
-): Promise<NonPayableTransactionObject<void>> => {
+export const getApprovalTransaction = (safeInstance: GnosisSafe, txHash: string): NonPayableTransactionObject<void> => {
  try {
    return safeInstance.methods.approveHash(txHash)
  } catch (err) {
--- a/src/logic/safe/utils/upgradeSafe.ts
+++ b/src/logic/safe/utils/upgradeSafe.ts
@ -6,7 +6,6 @@ import {
  SAFE_MASTER_COPY_ADDRESS,
  getGnosisSafeInstanceAt,
 } from 'src/logic/contracts/safeContracts'
-import { DELEGATE_CALL } from 'src/logic/safe/transactions'
 import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import { MultiSend } from 'src/types/contracts/MultiSend.d'

@ -49,7 +48,7 @@ export const getEncodedMultiSendCallData = (txs: MultiSendTx[], web3: Web3): str
  return encodedMultiSendCallData
 }

-export const upgradeSafeToLatestVersion = async (safeAddress: string, createTransaction): Promise<void> => {
+export const getUpgradeSafeTransactionHash = async (safeAddress: string): Promise<string> => {
  const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
  const fallbackHandlerTxData = safeInstance.methods.setFallbackHandler(DEFAULT_FALLBACK_HANDLER_ADDRESS).encodeABI()
  const updateSafeTxData = safeInstance.methods.changeMasterCopy(SAFE_MASTER_COPY_ADDRESS).encodeABI()
@ -69,17 +68,5 @@ export const upgradeSafeToLatestVersion = async (safeAddress: string, createTran
  ]

  const web3 = getWeb3()
-  const encodeMultiSendCallData = getEncodedMultiSendCallData(txs, web3)
-  createTransaction({
-    safeAddress,
-    to: MULTI_SEND_ADDRESS,
-    valueInWei: 0,
-    txData: encodeMultiSendCallData,
-    notifiedTransaction: 'STANDARD_TX',
-    enqueueSnackbar: () => {},
-    closeSnackbar: () => {},
-    operation: DELEGATE_CALL,
-  })
-
-  return
+  return getEncodedMultiSendCallData(txs, web3)
 }
--- a/src/logic/wallets/ethTransactions.ts
+++ b/src/logic/wallets/ethTransactions.ts
@ -50,10 +50,16 @@ export const calculateGasPrice = async (): Promise<string> => {
  }
 }

-export const calculateGasOf = async (data: string, from: string, to: string): Promise<number> => {
+export const calculateGasOf = async (txConfig: {
+  to: string
+  from: string
+  data: string
+  gasPrice?: number
+  gas?: number
+}): Promise<number> => {
  const web3 = getWeb3()
  try {
-    const gas = await web3.eth.estimateGas({ data, from, to })
+    const gas = await web3.eth.estimateGas(txConfig)

    return gas * 2
  } catch (err) {
--- a/src/routes/open/components/Layout.tsx
+++ b/src/routes/open/components/Layout.tsx
@ -17,7 +17,7 @@ import {
  getOwnerAddressBy,
  getOwnerNameBy,
 } from 'src/routes/open/components/fields'
-import Welcome from 'src/routes/welcome/components/Layout'
+import { WelcomeLayout } from 'src/routes/welcome/components/index'
 import { history } from 'src/store'
 import { secondary, sm } from 'src/theme/variables'
 import { networkSelector, providerNameSelector, userAccountSelector } from 'src/logic/wallets/store/selectors'
@ -138,7 +138,7 @@ export const Layout = (props: LayoutProps): React.ReactElement => {
          </Stepper>
        </Block>
      ) : (
-        <Welcome isOldMultisigMigration provider={provider} />
+        <WelcomeLayout isOldMultisigMigration />
      )}
    </>
  )
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@ -32,7 +32,7 @@ import { LoadingContainer } from 'src/components/LoaderContainer/index'
 import { TIMEOUT } from 'src/utils/constants'
 import { web3ReadOnly } from 'src/logic/wallets/getWeb3'

-import ConfirmTransactionModal from '../components/ConfirmTransactionModal'
+import { ConfirmTransactionModal } from '../components/ConfirmTransactionModal'
 import { useIframeMessageHandler } from '../hooks/useIframeMessageHandler'
 import { useLegalConsent } from '../hooks/useLegalConsent'
 import LegalDisclaimer from './LegalDisclaimer'
--- a/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
+++ b/src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx
@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Icon, Text, Title, GenericModal, ModalFooterConfirmation } from '@gnosis.pm/safe-react-components'
+import { GenericModal, Icon, ModalFooterConfirmation, Text, Title } from '@gnosis.pm/safe-react-components'
 import { Transaction } from '@gnosis.pm/safe-apps-sdk-v1'
 import styled from 'styled-components'
 import { useDispatch } from 'react-redux'
@ -20,11 +20,13 @@ import createTransaction from 'src/logic/safe/store/actions/createTransaction'
 import { MULTI_SEND_ADDRESS } from 'src/logic/contracts/safeContracts'
 import { DELEGATE_CALL, TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { encodeMultiSendCall } from 'src/logic/safe/transactions/multisend'
-import { estimateSafeTxGas } from 'src/logic/safe/transactions/gas'

 import GasEstimationInfo from './GasEstimationInfo'
 import { getNetworkInfo } from 'src/config'
 import { TransactionParams } from './AppFrame'
+import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import Row from 'src/components/layout/Row'
+import { TransactionFees } from 'src/components/TransactionsFees'

 const isTxValid = (t: Transaction): boolean => {
  if (!['string', 'number'].includes(typeof t.value)) {
@ -67,6 +69,10 @@ const StyledTextBox = styled(TextBox)`
  max-width: 444px;
 `

+const Container = styled.div`
+  max-width: 480px;
+`
+
 type OwnProps = {
  isOpen: boolean
  app: SafeApp
@ -82,7 +88,7 @@ type OwnProps = {

 const { nativeCoin } = getNetworkInfo()

-const ConfirmTransactionModal = ({
+export const ConfirmTransactionModal = ({
  isOpen,
  app,
  txs,
@ -95,32 +101,25 @@ const ConfirmTransactionModal = ({
  onTxReject,
 }: OwnProps): React.ReactElement | null => {
  const [estimatedSafeTxGas, setEstimatedSafeTxGas] = useState(0)
-  const [estimatingGas, setEstimatingGas] = useState(false)
+
+  const {
+    gasEstimation,
+    isOffChainSignature,
+    isCreation,
+    isExecution,
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+  } = useEstimateTransactionGas({
+    txData: encodeMultiSendCall(txs),
+    txRecipient: MULTI_SEND_ADDRESS,
+    operation: DELEGATE_CALL,
+  })

  useEffect(() => {
-    const estimateGas = async () => {
-      try {
-        setEstimatingGas(true)
-        const safeTxGas = await estimateSafeTxGas(
-          undefined,
-          safeAddress,
-          encodeMultiSendCall(txs),
-          MULTI_SEND_ADDRESS,
-          '0',
-          DELEGATE_CALL,
-        )
-
-        setEstimatedSafeTxGas(safeTxGas)
-      } catch (err) {
-        console.error(err)
-      } finally {
-        setEstimatingGas(false)
-      }
-    }
    if (params?.safeTxGas) {
-      estimateGas()
+      setEstimatedSafeTxGas(gasEstimation)
    }
-  }, [params, safeAddress, txs])
+  }, [params, gasEstimation])

  const dispatch = useDispatch()
  if (!isOpen) {
@ -173,7 +172,7 @@ const ConfirmTransactionModal = ({
      </Text>
    </>
  ) : (
-    <>
+    <Container>
      <AddressInfo ethBalance={ethBalance} safeAddress={safeAddress} safeName={safeName} />
      <DividerLine withArrow />
      {txs.map((tx, index) => (
@ -205,11 +204,20 @@ const ConfirmTransactionModal = ({
          <GasEstimationInfo
            appEstimation={params.safeTxGas}
            internalEstimation={estimatedSafeTxGas}
-            loading={estimatingGas}
+            loading={txEstimationExecutionStatus === EstimationStatus.LOADING}
          />
        </div>
      )}
-    </>
+      <Row>
+        <TransactionFees
+          gasCostFormatted={gasCostFormatted}
+          isExecution={isExecution}
+          isCreation={isCreation}
+          isOffChainSignature={isOffChainSignature}
+          txEstimationExecutionStatus={txEstimationExecutionStatus}
+        />
+      </Row>
+    </Container>
  )

  return (
@ -229,5 +237,3 @@ const ConfirmTransactionModal = ({
    />
  )
 }
-
-export default ConfirmTransactionModal
--- a/src/routes/safe/components/Balances/Coins/styles.ts
+++ b/src/routes/safe/components/Balances/Coins/styles.ts
@ -46,7 +46,6 @@ export const styles = createStyles({
    marginRight: sm,
  },
  currencyValueRow: {
-    maxWidth: '125px',
    textAlign: 'right',
  },
 })
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { useDispatch, useSelector } from 'react-redux'

 import { getNetworkInfo } from 'src/config'
-import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import { 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'
@ -14,15 +14,15 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { AbiItemExtended } from 'src/logic/contractInteraction/sources/ABIService'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
 import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
 import Header from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Header'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
-import { safeSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { generateFormFieldKey, getValueFromTxInputs } from '../utils'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFees } from 'src/components/TransactionsFees'

 const useStyles = makeStyles(styles)

@ -45,41 +45,41 @@ const { nativeCoin } = getNetworkInfo()
 const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
  const classes = useStyles()
  const dispatch = useDispatch()
-  const { address: safeAddress } = useSelector(safeSelector) || {}
-  const [gasCosts, setGasCosts] = useState('< 0.001')
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  const [txParameters, setTxParameters] = useState<{
+    txRecipient: string
+    txData: string
+    txAmount: string
+  }>({ txData: '', txAmount: '', txRecipient: '' })
+
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isOffChainSignature,
+    isCreation,
+  } = useEstimateTransactionGas({
+    txRecipient: txParameters?.txRecipient,
+    txAmount: txParameters?.txAmount,
+    txData: txParameters?.txData,
+  })
+
  useEffect(() => {
-    let isCurrent = true
-
-    const estimateGas = async (): Promise<void> => {
-      const txData = tx.data ? tx.data.trim() : ''
-
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress as string, tx.contractAddress as string, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-      }
-    }
-
-    estimateGas()
-
-    return () => {
-      isCurrent = false
-    }
-  }, [safeAddress, tx.contractAddress, tx.data])
+    setTxParameters({
+      txRecipient: tx.contractAddress as string,
+      txAmount: tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0',
+      txData: tx.data ? tx.data.trim() : '',
+    })
+  }, [tx.contractAddress, tx.value, tx.data, safeAddress])

  const submitTx = async () => {
-    const txRecipient = tx.contractAddress
-    const txData = tx.data ? tx.data.trim() : ''
-    const txValue = tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0'
-    if (safeAddress) {
+    if (safeAddress && txParameters) {
      dispatch(
        createTransaction({
          safeAddress,
-          to: txRecipient as string,
-          valueInWei: txValue,
-          txData,
+          to: txParameters?.txRecipient,
+          valueInWei: txParameters?.txAmount,
+          txData: txParameters?.txData,
          notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
        }),
      )
@ -162,9 +162,13 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
          </Col>
        </Row>
        <Row>
-          <Paragraph>
-            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-          </Paragraph>
+          <TransactionFees
+            gasCostFormatted={gasCostFormatted}
+            isExecution={isExecution}
+            isCreation={isCreation}
+            isOffChainSignature={isOffChainSignature}
+            txEstimationExecutionStatus={txEstimationExecutionStatus}
+          />
        </Row>
      </Block>
      <Hairline />
--- 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 React 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 { getExplorerInfo, getNetworkInfo } from 'src/config'
-import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
@ -16,10 +16,8 @@ import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
-import { safeSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
@ -29,6 +27,8 @@ import ArrowDown from '../../assets/arrow-down.svg'

 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFees } from 'src/components/TransactionsFees'

 export type CustomTx = {
  contractAddress?: string
@ -49,29 +49,19 @@ const { nativeCoin } = getNetworkInfo()
 const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
  const classes = useStyles()
  const dispatch = useDispatch()
-  const { address: safeAddress } = useSelector(safeSelector) || {}
-  const [gasCosts, setGasCosts] = useState<string>('< 0.001')
-  useEffect(() => {
-    let isCurrent = true
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)

-    const estimateGas = async () => {
-      const txData = tx.data ? tx.data.trim() : ''
-
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress as string, tx.contractAddress as string, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-      }
-    }
-
-    estimateGas()
-
-    return () => {
-      isCurrent = false
-    }
-  }, [safeAddress, tx.data, tx.contractAddress])
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isCreation,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
+    txRecipient: tx.contractAddress as string,
+    txData: tx.data ? tx.data.trim() : '',
+    txAmount: tx.value ? toTokenUnit(tx.value, nativeCoin.decimals) : '0',
+  })

  const submitTx = async (): Promise<void> => {
    const txRecipient = tx.contractAddress
@ -161,9 +151,13 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
          </Col>
        </Row>
        <Row>
-          <Paragraph>
-            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-          </Paragraph>
+          <TransactionFees
+            gasCostFormatted={gasCostFormatted}
+            isExecution={isExecution}
+            isCreation={isCreation}
+            isOffChainSignature={isOffChainSignature}
+            txEstimationExecutionStatus={txEstimationExecutionStatus}
+          />
        </Row>
      </Block>
      <Hairline />
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
@ -7,7 +7,7 @@ import GnoForm from 'src/components/forms/GnoForm'
 import Block from 'src/components/layout/Block'
 import Hairline from 'src/components/layout/Hairline'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
-import { safeSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import Paragraph from 'src/components/layout/Paragraph'
 import Buttons from './Buttons'
 import ContractABI from './ContractABI'
@ -53,14 +53,14 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
  isABI,
 }) => {
  const classes = useStyles()
-  const { address: safeAddress = '' } = useSelector(safeSelector) || {}
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  let setCallResults

  React.useMemo(() => {
    if (contractAddress) {
      initialValues.contractAddress = contractAddress
    }
-  }, [contractAddress, initialValues.contractAddress])
+  }, [contractAddress, initialValues])

  const saveForm = async (values: CreatedTx): Promise<void> => {
    await handleSubmit(values, false)
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@ -3,9 +3,7 @@ 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 { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { getExplorerInfo, getNetworkInfo } from 'src/config'
+import { getExplorerInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
@ -17,10 +15,8 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 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 { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
 import { sm } from 'src/theme/variables'
@ -31,8 +27,8 @@ import ArrowDown from '../assets/arrow-down.svg'

 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
-
-const { nativeCoin } = getNetworkInfo()
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFees } from 'src/components/TransactionsFees'

 const useStyles = makeStyles(styles)

@ -53,34 +49,38 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
  const classes = useStyles()
  const shortener = textShortener()
  const dispatch = useDispatch()
-  const { address: safeAddress } = useSelector(safeSelector) || {}
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  const nftTokens = useSelector(nftTokensSelector)
-  const [gasCosts, setGasCosts] = useState('< 0.001')
  const txToken = nftTokens.find(
    ({ assetAddress, tokenId }) => assetAddress === tx.assetAddress && tokenId === tx.nftTokenId,
  )
  const [data, setData] = useState('')

+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isOffChainSignature,
+    isCreation,
+  } = useEstimateTransactionGas({
+    txData: data,
+    txRecipient: tx.assetAddress,
+  })
+
  useEffect(() => {
    let isCurrent = true

-    const estimateGas = async () => {
+    const calculateERC721TransferData = async () => {
      try {
        const txData = await generateERC721TransferTxData(tx, safeAddress)
-        const estimatedGasCosts = await estimateTxGasCosts(safeAddress ?? '', 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)
+        console.error('Error calculating ERC721 transfer data:', error.message)
      }
    }
-
-    estimateGas()
+    calculateERC721TransferData()

    return () => {
      isCurrent = false
@ -164,9 +164,13 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
          </Row>
        )}
        <Row>
-          <Paragraph>
-            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-          </Paragraph>
+          <TransactionFees
+            gasCostFormatted={gasCostFormatted}
+            isExecution={isExecution}
+            isCreation={isCreation}
+            isOffChainSignature={isOffChainSignature}
+            txEstimationExecutionStatus={txEstimationExecutionStatus}
+          />
        </Row>
      </Block>
      <Hairline style={{ position: 'absolute', bottom: 85 }} />
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx
@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import React, { useEffect, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { toTokenUnit, fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'

 import CopyBtn from 'src/components/CopyBtn'
@ -17,11 +17,9 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { getSpendingLimitContract } from 'src/logic/contracts/safeContracts'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
-import { safeSelector } from 'src/logic/safe/store/selectors'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { getHumanFriendlyToken } from 'src/logic/tokens/store/actions/fetchTokens'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { sameAddress, ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
@ -35,7 +33,10 @@ import ArrowDown from '../assets/arrow-down.svg'

 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
-
+import { TokenProps } from 'src/logic/tokens/store/model/token'
+import { RecordOf } from 'immutable'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFees } from 'src/components/TransactionsFees'
 const useStyles = makeStyles(styles)

 const { nativeCoin } = getNetworkInfo()
@ -55,59 +56,61 @@ type ReviewTxProps = {
  tx: ReviewTxProp
 }

-const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement => {
-  const classes = useStyles()
-  const dispatch = useDispatch()
-  const { address: safeAddress } = useSelector(safeSelector) || {}
-  const tokens = useSelector(extendedSafeTokensSelector)
-  const [gasCosts, setGasCosts] = useState('< 0.001')
+const useTxData = (
+  isSendingNativeToken: boolean,
+  txAmount: string,
+  recipientAddress: string,
+  txToken?: RecordOf<TokenProps>,
+): string => {
  const [data, setData] = useState('')

-  const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
-  const isSendingETH = sameAddress(txToken?.address, nativeCoin.address)
-  const txRecipient = isSendingETH ? tx.recipientAddress : txToken?.address
-
  useEffect(() => {
-    let isCurrent = true
-
-    const estimateGas = async () => {
+    const updateTxDataAsync = async () => {
      if (!txToken) {
        return
      }

      let txData = EMPTY_DATA
-
-      if (!isSendingETH) {
+      if (!isSendingNativeToken) {
        const StandardToken = await getHumanFriendlyToken()
        const tokenInstance = await StandardToken.at(txToken.address as string)
-        const txAmount = toTokenUnit(tx.amount, txToken.decimals)
-
-        txData = tokenInstance.contract.methods.transfer(tx.recipientAddress, txAmount).encodeABI()
-      }
-
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress as string, txRecipient as string, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-        setData(txData)
+        const erc20TransferAmount = toTokenUnit(txAmount, txToken.decimals)
+        txData = tokenInstance.contract.methods.transfer(recipientAddress, erc20TransferAmount).encodeABI()
      }
+      setData(txData)
    }

-    estimateGas()
+    updateTxDataAsync()
+  }, [isSendingNativeToken, recipientAddress, txAmount, txToken])

-    return () => {
-      isCurrent = false
-    }
-  }, [isSendingETH, safeAddress, tx.amount, tx.recipientAddress, txRecipient, txToken])
+  return data
+}
+
+const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  const tokens = useSelector(extendedSafeTokensSelector)
+  const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
+  const isSendingNativeToken = sameAddress(txToken?.address, nativeCoin.address)
+  const txRecipient = isSendingNativeToken ? tx.recipientAddress : txToken?.address || ''
+  const txValue = isSendingNativeToken ? toTokenUnit(tx.amount, nativeCoin.decimals) : '0'
+  const data = useTxData(isSendingNativeToken, tx.amount, tx.recipientAddress, txToken)
+
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isCreation,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
+    txData: data,
+    txRecipient,
+    txType: tx.txType,
+  })

  const submitTx = async () => {
    const isSpendingLimit = sameString(tx.txType, 'spendingLimit')
-    // 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 ? toTokenUnit(tx.amount, nativeCoin.decimals) : '0'

    if (!safeAddress) {
      console.error('There was an error trying to submit the transaction, the safeAddress was not found')
@ -115,11 +118,12 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
    }

    if (isSpendingLimit && txToken && tx.tokenSpendingLimit) {
+      const spendingLimitTokenAddress = isSendingNativeToken ? ZERO_ADDRESS : txToken.address
      const spendingLimit = getSpendingLimitContract()
      spendingLimit.methods
        .executeAllowanceTransfer(
          safeAddress,
-          sameAddress(txToken.address, nativeCoin.address) ? ZERO_ADDRESS : txToken.address,
+          spendingLimitTokenAddress,
          tx.recipientAddress,
          toTokenUnit(tx.amount, txToken.decimals),
          ZERO_ADDRESS,
@ -135,7 +139,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
        createTransaction({
          safeAddress: safeAddress,
          to: txRecipient as string,
-          valueInWei: txAmount,
+          valueInWei: txValue,
          txData: data,
          notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
        }),
@ -207,9 +211,13 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement =>
          </Paragraph>
        </Row>
        <Row>
-          <Paragraph data-testid="fee-meg-review-step">
-            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-          </Paragraph>
+          <TransactionFees
+            gasCostFormatted={gasCostFormatted}
+            isExecution={isExecution}
+            isCreation={isCreation}
+            isOffChainSignature={isOffChainSignature}
+            txEstimationExecutionStatus={txEstimationExecutionStatus}
+          />
        </Row>
      </Block>
      <Hairline style={{ position: 'absolute', bottom: 85 }} />
--- a/src/routes/safe/components/Balances/dataFetcher.ts
+++ b/src/routes/safe/components/Balances/dataFetcher.ts
@ -13,15 +13,7 @@ export const BALANCE_TABLE_VALUE_ID = 'value'

 const { nativeCoin } = getNetworkInfo()

-const getTokenPriceInCurrency = (
-  token: Token,
-  currencySelected?: string,
-  currencyValues?: BalanceCurrencyList,
-  currencyRate?: number,
-): string => {
-  if (!currencySelected) {
-    return ''
-  }
+const getTokenValue = (token: Token, currencyValues?: BalanceCurrencyList, currencyRate?: number): string => {
  const currencyValue = currencyValues?.find(({ tokenAddress }) => {
    if (token.address === nativeCoin.address && !tokenAddress) {
      return true
@ -35,9 +27,16 @@ const getTokenPriceInCurrency = (
  }

  const { balanceInBaseCurrency } = currencyValue
-  const balance = new BigNumber(balanceInBaseCurrency).times(currencyRate).toFixed(2)
+  const balance = new BigNumber(balanceInBaseCurrency).times(currencyRate).toString()

-  return `${formatAmountInUsFormat(balance)} ${currencySelected}`
+  return balance
+}
+
+const getTokenPriceInCurrency = (balance: string, currencySelected?: string): string => {
+  if (!currencySelected) {
+    return Number('').toFixed(2)
+  }
+  return `${formatAmountInUsFormat(Number(balance).toFixed(2))} ${currencySelected}`
 }

 export interface BalanceData {
@ -47,6 +46,7 @@ export interface BalanceData {
  balanceOrder: number
  fixed: boolean
  value: string
+  valueOrder: number
 }

 export const getBalanceData = (
@ -56,19 +56,23 @@ export const getBalanceData = (
  currencyRate?: number,
 ): List<BalanceData> => {
  const { nativeCoin } = getNetworkInfo()
-  return activeTokens.map((token) => ({
-    [BALANCE_TABLE_ASSET_ID]: {
-      name: token.name,
-      logoUri: token.logoUri,
-      address: token.address,
-      symbol: token.symbol,
-    },
-    assetOrder: token.name,
-    [BALANCE_TABLE_BALANCE_ID]: `${formatAmountInUsFormat(token.balance?.toString() || '0')} ${token.symbol}`,
-    balanceOrder: Number(token.balance),
-    [FIXED]: token.symbol === nativeCoin.symbol,
-    [BALANCE_TABLE_VALUE_ID]: getTokenPriceInCurrency(token, currencySelected, currencyValues, currencyRate),
-  }))
+  return activeTokens.map((token) => {
+    const balance = getTokenValue(token, currencyValues, currencyRate)
+    return {
+      [BALANCE_TABLE_ASSET_ID]: {
+        name: token.name,
+        logoUri: token.logoUri,
+        address: token.address,
+        symbol: token.symbol,
+      },
+      assetOrder: token.name,
+      [BALANCE_TABLE_BALANCE_ID]: `${formatAmountInUsFormat(token.balance?.toString() || '0')} ${token.symbol}`,
+      balanceOrder: Number(token.balance),
+      [FIXED]: token.symbol === nativeCoin.symbol,
+      [BALANCE_TABLE_VALUE_ID]: getTokenPriceInCurrency(balance, currencySelected),
+      valueOrder: Number(balance),
+    }
+  })
 }

 export const generateColumns = (): List<TableColumn> => {
@ -101,21 +105,11 @@ export const generateColumns = (): List<TableColumn> => {

  const value: TableColumn = {
    id: BALANCE_TABLE_VALUE_ID,
-    order: false,
+    align: 'right',
+    order: true,
    label: 'Value',
    custom: false,
-    static: true,
    disablePadding: false,
-    style: {
-      fontSize: '11px',
-      color: '#5d6d74',
-      borderBottomWidth: '2px',
-      width: '125px',
-      fontFamily: 'Averta',
-      fontWeight: 'normal',
-      fontStyle: 'normal',
-      textAlign: 'right',
-    },
  }

  return List([assetColumn, balanceColumn, value, actions])
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.tsx
@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'

 import { OwnerForm } from './screens/OwnerForm'
-import ReviewAddOwner from './screens/Review'
+import { ReviewAddOwner } from './screens/Review'
 import ThresholdForm from './screens/ThresholdForm'

 import Modal from 'src/components/Modal'
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.tsx
@ -1,11 +1,10 @@
 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 classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { getExplorerInfo, getNetworkInfo } from 'src/config'
+import { getExplorerInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
@ -16,37 +15,61 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 import { safeNameSelector, safeOwnersSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'

 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFees } from 'src/components/TransactionsFees'

 export const ADD_OWNER_SUBMIT_BTN_TEST_ID = 'add-owner-submit-btn'

-const { nativeCoin } = getNetworkInfo()
+const useStyles = makeStyles(styles)

-const ReviewAddOwner = ({ classes, onClickBack, onClose, onSubmit, values }) => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+type ReviewAddOwnerProps = {
+  onClickBack: () => void
+  onClose: () => void
+  onSubmit: () => void
+  values: {
+    ownerAddress: string
+    threshold: string
+    ownerName: string
+  }
+}
+
+export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: ReviewAddOwnerProps): React.ReactElement => {
+  const classes = useStyles()
+  const [data, setData] = useState('')
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  const safeName = useSelector(safeNameSelector)
  const owners = useSelector(safeOwnersSelector)
+
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isOffChainSignature,
+    isCreation,
+  } = useEstimateTransactionGas({
+    txData: data,
+    txRecipient: safeAddress,
+  })
+
  useEffect(() => {
    let isCurrent = true
-    const estimateGas = async () => {
-      const safeInstance = await getGnosisSafeInstanceAt(safeAddress)

-      const txData = safeInstance.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI()
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, txData)
+    const calculateAddOwnerData = async () => {
+      try {
+        const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
+        const txData = safeInstance.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI()

-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
+        if (isCurrent) {
+          setData(txData)
+        }
+      } catch (error) {
+        console.error('Error calculating ERC721 transfer data:', error.message)
      }
    }
-
-    estimateGas()
+    calculateAddOwnerData()

    return () => {
      isCurrent = false
@ -68,7 +91,7 @@ const ReviewAddOwner = ({ classes, onClickBack, onClose, onSubmit, values }) =>
        </IconButton>
      </Row>
      <Hairline />
-      <Block className={classes.formContainer}>
+      <Block>
        <Row className={classes.root}>
          <Col layout="column" xs={4}>
            <Block className={classes.details}>
@ -157,11 +180,13 @@ const ReviewAddOwner = ({ classes, onClickBack, onClose, onSubmit, values }) =>
      </Block>
      <Hairline />
      <Block className={classes.gasCostsContainer}>
-        <Paragraph>
-          You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
-          <br />
-          {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-        </Paragraph>
+        <TransactionFees
+          gasCostFormatted={gasCostFormatted}
+          isExecution={isExecution}
+          isCreation={isCreation}
+          isOffChainSignature={isOffChainSignature}
+          txEstimationExecutionStatus={txEstimationExecutionStatus}
+        />
      </Block>
      <Hairline />
      <Row align="center" className={classes.buttonRow}>
@ -183,5 +208,3 @@ const ReviewAddOwner = ({ classes, onClickBack, onClose, onSubmit, values }) =>
    </>
  )
 }
-
-export default withStyles(styles as any)(ReviewAddOwner)
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
@ -1,6 +1,7 @@
 import { background, border, lg, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'

-export const styles = () => ({
+export const styles = createStyles({
  root: {
    height: '372px',
  },
@ -76,7 +77,9 @@ export const styles = () => ({
    },
  },
  gasCostsContainer: {
-    padding: `0 ${lg}`,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
    textAlign: 'center',
    width: '100%',
  },
--- a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx
@ -40,17 +40,18 @@ type OwnProps = {
  selectedOwnerName: string
 }

-const EditOwnerComponent = ({ isOpen, onClose, ownerAddress, selectedOwnerName }: OwnProps): React.ReactElement => {
+export const EditOwnerModal = ({ isOpen, onClose, ownerAddress, selectedOwnerName }: OwnProps): React.ReactElement => {
  const classes = useStyles()
  const dispatch = useDispatch()
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
-  const handleSubmit = (values) => {
-    const { ownerName } = values
-
-    dispatch(editSafeOwner({ safeAddress, ownerAddress, ownerName }))
-    dispatch(addOrUpdateAddressBookEntry(makeAddressBookEntry({ address: ownerAddress, name: ownerName })))
-    dispatch(enqueueSnackbar(NOTIFICATIONS.OWNER_NAME_CHANGE_EXECUTED_MSG))
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)

+  const handleSubmit = ({ ownerName }: { ownerName: string }): void => {
+    // Update the value only if the ownerName really changed
+    if (ownerName !== selectedOwnerName) {
+      dispatch(editSafeOwner({ safeAddress, ownerAddress, ownerName }))
+      dispatch(addOrUpdateAddressBookEntry(makeAddressBookEntry({ address: ownerAddress, name: ownerName })))
+      dispatch(enqueueSnackbar(NOTIFICATIONS.OWNER_NAME_CHANGE_EXECUTED_MSG))
+    }
    onClose()
  }

@ -71,54 +72,56 @@ const EditOwnerComponent = ({ isOpen, onClose, ownerAddress, selectedOwnerName }
        </IconButton>
      </Row>
      <Hairline />
-      <GnoForm onSubmit={handleSubmit}>
-        {() => (
-          <>
-            <Block className={classes.container}>
-              <Row margin="md">
-                <Field
-                  component={TextField}
-                  initialValue={selectedOwnerName}
-                  name="ownerName"
-                  placeholder="Owner name*"
-                  testId={RENAME_OWNER_INPUT_TEST_ID}
-                  text="Owner name*"
-                  type="text"
-                  validate={composeValidators(required, minMaxLength(1, 50))}
-                />
+      <GnoForm onSubmit={handleSubmit} subscription={{ pristine: true }}>
+        {(...args) => {
+          const pristine = args[2].pristine
+          return (
+            <>
+              <Block className={classes.container}>
+                <Row margin="md">
+                  <Field
+                    component={TextField}
+                    initialValue={selectedOwnerName}
+                    name="ownerName"
+                    placeholder="Owner name*"
+                    testId={RENAME_OWNER_INPUT_TEST_ID}
+                    text="Owner name*"
+                    type="text"
+                    validate={composeValidators(required, minMaxLength(1, 50))}
+                  />
+                </Row>
+                <Row>
+                  <Block justify="center">
+                    <Identicon address={ownerAddress} diameter={32} />
+                    <Paragraph color="disabled" noMargin size="md" style={{ marginLeft: sm, marginRight: sm }}>
+                      {ownerAddress}
+                    </Paragraph>
+                    <CopyBtn content={ownerAddress} />
+                    <ExplorerButton explorerUrl={getExplorerInfo(ownerAddress)} />
+                  </Block>
+                </Row>
+              </Block>
+              <Hairline />
+              <Row align="center" className={classes.buttonRow}>
+                <Button minHeight={42} minWidth={140} onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button
+                  color="primary"
+                  minHeight={42}
+                  minWidth={140}
+                  testId={SAVE_OWNER_CHANGES_BTN_TEST_ID}
+                  type="submit"
+                  variant="contained"
+                  disabled={pristine}
+                >
+                  Save
+                </Button>
              </Row>
-              <Row>
-                <Block justify="center">
-                  <Identicon address={ownerAddress} diameter={32} />
-                  <Paragraph color="disabled" noMargin size="md" style={{ marginLeft: sm, marginRight: sm }}>
-                    {ownerAddress}
-                  </Paragraph>
-                  <CopyBtn content={ownerAddress} />
-                  <ExplorerButton explorerUrl={getExplorerInfo(ownerAddress)} />
-                </Block>
-              </Row>
-            </Block>
-            <Hairline />
-            <Row align="center" className={classes.buttonRow}>
-              <Button minHeight={42} minWidth={140} onClick={onClose}>
-                Cancel
-              </Button>
-              <Button
-                color="primary"
-                minHeight={42}
-                minWidth={140}
-                testId={SAVE_OWNER_CHANGES_BTN_TEST_ID}
-                type="submit"
-                variant="contained"
-              >
-                Save
-              </Button>
-            </Row>
-          </>
-        )}
+            </>
+          )
+        }}
      </GnoForm>
    </Modal>
  )
 }
-
-export default EditOwnerComponent
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.tsx
@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'

 import CheckOwner from './screens/CheckOwner'
-import ReviewRemoveOwner from './screens/Review'
+import { ReviewRemoveOwnerModal } from './screens/Review'
 import ThresholdForm from './screens/ThresholdForm'

 import Modal from 'src/components/Modal'
@ -69,7 +69,12 @@ type RemoveOwnerProps = {
  ownerName: string
 }

-const RemoveOwner = ({ isOpen, onClose, ownerAddress, ownerName }: RemoveOwnerProps): React.ReactElement => {
+export const RemoveOwnerModal = ({
+  isOpen,
+  onClose,
+  ownerAddress,
+  ownerName,
+}: RemoveOwnerProps): React.ReactElement => {
  const classes = useStyles()
  const [activeScreen, setActiveScreen] = useState('checkOwner')
  const [values, setValues] = useState<any>({})
@ -124,18 +129,16 @@ const RemoveOwner = ({ isOpen, onClose, ownerAddress, ownerName }: RemoveOwnerPr
          <ThresholdForm onClickBack={onClickBack} onClose={onClose} onSubmit={thresholdSubmitted} />
        )}
        {activeScreen === 'reviewRemoveOwner' && (
-          <ReviewRemoveOwner
+          <ReviewRemoveOwnerModal
            onClickBack={onClickBack}
            onClose={onClose}
            onSubmit={onRemoveOwner}
            ownerAddress={ownerAddress}
            ownerName={ownerName}
-            values={values}
+            threshold={threshold}
          />
        )}
      </>
    </Modal>
  )
 }
-
-export default RemoveOwner
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
@ -1,11 +1,10 @@
 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 classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { getExplorerInfo, getNetworkInfo } from 'src/config'
+import { getExplorerInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
@ -16,50 +15,84 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { getGnosisSafeInstanceAt, SENTINEL_ADDRESS } from 'src/logic/contracts/safeContracts'
 import { safeNameSelector, safeOwnersSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'

 import { styles } from './style'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 import { getOwnersWithNameFromAddressBook } from 'src/logic/addressBook/utils'
 import { List } from 'immutable'
 import { addressBookSelector } from 'src/logic/addressBook/store/selectors'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFees } from 'src/components/TransactionsFees'

 export const REMOVE_OWNER_REVIEW_BTN_TEST_ID = 'remove-owner-review-btn'

-const { nativeCoin } = getNetworkInfo()
+const useStyles = makeStyles(styles)

-const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddress, ownerName, values }) => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+type ReviewRemoveOwnerProps = {
+  onClickBack: () => void
+  onClose: () => void
+  onSubmit: () => void
+  ownerAddress: string
+  ownerName: string
+  threshold?: number
+}
+
+export const ReviewRemoveOwnerModal = ({
+  onClickBack,
+  onClose,
+  onSubmit,
+  ownerAddress,
+  ownerName,
+  threshold,
+}: ReviewRemoveOwnerProps): React.ReactElement => {
+  const classes = useStyles()
+  const [data, setData] = useState('')
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  const safeName = useSelector(safeNameSelector)
  const owners = useSelector(safeOwnersSelector)
  const addressBook = useSelector(addressBookSelector)
  const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])

+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isCreation,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
+    txData: data,
+    txRecipient: safeAddress,
+  })
+
  useEffect(() => {
    let isCurrent = true

-    const estimateGas = async () => {
-      const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
-      const safeOwners = await gnosisSafe.methods.getOwners().call()
-      const index = safeOwners.findIndex((owner) => owner.toLowerCase() === ownerAddress.toLowerCase())
-      const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1]
-      const txData = gnosisSafe.methods.removeOwner(prevAddress, ownerAddress, values.threshold).encodeABI()
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-      }
+    if (!threshold) {
+      console.error("Threshold value was not define, tx can't be executed")
+      return
    }

-    estimateGas()
+    const calculateRemoveOwnerData = async () => {
+      try {
+        const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
+        const safeOwners = await gnosisSafe.methods.getOwners().call()
+        const index = safeOwners.findIndex((owner) => owner.toLowerCase() === ownerAddress.toLowerCase())
+        const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1]
+        const txData = gnosisSafe.methods.removeOwner(prevAddress, ownerAddress, threshold).encodeABI()
+
+        if (isCurrent) {
+          setData(txData)
+        }
+      } catch (error) {
+        console.error('Error calculating ERC721 transfer data:', error.message)
+      }
+    }
+    calculateRemoveOwnerData()
+
    return () => {
      isCurrent = false
    }
-  }, [ownerAddress, safeAddress, values.threshold])
+  }, [safeAddress, ownerAddress, threshold])

  return (
    <>
@ -95,7 +128,7 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
                  Any transaction requires the confirmation of:
                </Paragraph>
                <Paragraph className={classes.name} color="primary" noMargin size="lg" weight="bolder">
-                  {`${values.threshold} out of ${owners ? owners.size - 1 : 0} owner(s)`}
+                  {`${threshold} out of ${owners ? owners.size - 1 : 0} owner(s)`}
                </Paragraph>
              </Block>
            </Block>
@ -165,11 +198,13 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
      </Block>
      <Hairline />
      <Block className={classes.gasCostsContainer}>
-        <Paragraph>
-          You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
-          <br />
-          {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-        </Paragraph>
+        <TransactionFees
+          gasCostFormatted={gasCostFormatted}
+          isExecution={isExecution}
+          isCreation={isCreation}
+          isOffChainSignature={isOffChainSignature}
+          txEstimationExecutionStatus={txEstimationExecutionStatus}
+        />
      </Block>
      <Hairline />
      <Row align="center" className={classes.buttonRow}>
@ -191,5 +226,3 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
    </>
  )
 }
-
-export default withStyles(styles as any)(ReviewRemoveOwner)
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
@ -1,6 +1,7 @@
 import { background, border, lg, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'

-export const styles = () => ({
+export const styles = createStyles({
  root: {
    height: '372px',
  },
@ -76,7 +77,9 @@ export const styles = () => ({
    },
  },
  gasCostsContainer: {
-    padding: `0 ${lg}`,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
    textAlign: 'center',
    width: '100%',
  },
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.tsx
@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'

 import OwnerForm from './screens/OwnerForm'
-import ReviewReplaceOwner from './screens/Review'

 import Modal from 'src/components/Modal'
 import { addOrUpdateAddressBookEntry } from 'src/logic/addressBook/store/actions/addOrUpdateAddressBookEntry'
@ -16,6 +15,7 @@ import { checksumAddress } from 'src/utils/checksumAddress'
 import { makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook'
 import { sameAddress } from 'src/logic/wallets/ethAddresses'
 import { Dispatch } from 'src/logic/safe/store/actions/types.d'
+import { ReviewReplaceOwnerModal } from './screens/Review'

 const styles = createStyles({
  biggerModalWindow: {
@ -28,9 +28,8 @@ const styles = createStyles({
 const useStyles = makeStyles(styles)

 type OwnerValues = {
-  ownerAddress: string
-  ownerName: string
-  threshold: string
+  newOwnerAddress: string
+  newOwnerName: string
 }

 export const sendReplaceOwner = async (
@ -44,7 +43,7 @@ export const sendReplaceOwner = async (
  const safeOwners = await gnosisSafe.methods.getOwners().call()
  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()
+  const txData = gnosisSafe.methods.swapOwner(prevAddress, ownerAddressToRemove, values.newOwnerAddress).encodeABI()

  const txHash = await dispatch(
    createTransaction({
@ -61,8 +60,8 @@ export const sendReplaceOwner = async (
      replaceSafeOwner({
        safeAddress,
        oldOwnerAddress: ownerAddressToRemove,
-        ownerAddress: values.ownerAddress,
-        ownerName: values.ownerName,
+        ownerAddress: values.newOwnerAddress,
+        ownerName: values.newOwnerName,
      }),
    )
  }
@ -75,10 +74,18 @@ type ReplaceOwnerProps = {
  ownerName: string
 }

-const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwnerProps): React.ReactElement => {
+export const ReplaceOwnerModal = ({
+  isOpen,
+  onClose,
+  ownerAddress,
+  ownerName,
+}: ReplaceOwnerProps): React.ReactElement => {
  const classes = useStyles()
  const [activeScreen, setActiveScreen] = useState('checkOwner')
-  const [values, setValues] = useState<any>({})
+  const [values, setValues] = useState({
+    newOwnerAddress: '',
+    newOwnerName: '',
+  })
  const dispatch = useDispatch()
  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  const threshold = useSelector(safeThresholdSelector)
@ -86,7 +93,10 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
  useEffect(
    () => () => {
      setActiveScreen('checkOwner')
-      setValues({})
+      setValues({
+        newOwnerAddress: '',
+        newOwnerName: '',
+      })
    },
    [isOpen],
  )
@ -96,9 +106,10 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
  const ownerSubmitted = (newValues) => {
    const { ownerAddress, ownerName } = newValues
    const checksumAddr = checksumAddress(ownerAddress)
-    values.ownerName = ownerName
-    values.ownerAddress = checksumAddr
-    setValues(values)
+    setValues({
+      newOwnerAddress: checksumAddr,
+      newOwnerName: ownerName,
+    })
    setActiveScreen('reviewReplaceOwner')
  }

@ -108,7 +119,9 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
      await sendReplaceOwner(values, safeAddress, ownerAddress, dispatch, threshold)

      dispatch(
-        addOrUpdateAddressBookEntry(makeAddressBookEntry({ address: values.ownerAddress, name: values.ownerName })),
+        addOrUpdateAddressBookEntry(
+          makeAddressBookEntry({ address: values.newOwnerAddress, name: values.newOwnerName }),
+        ),
      )
    } catch (error) {
      console.error('Error while removing an owner', error)
@ -128,7 +141,7 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
          <OwnerForm onClose={onClose} onSubmit={ownerSubmitted} ownerAddress={ownerAddress} ownerName={ownerName} />
        )}
        {activeScreen === 'reviewReplaceOwner' && (
-          <ReviewReplaceOwner
+          <ReviewReplaceOwnerModal
            onClickBack={onClickBack}
            onClose={onClose}
            onSubmit={onReplaceOwner}
@ -141,5 +154,3 @@ const ReplaceOwner = ({ isOpen, onClose, ownerAddress, ownerName }: ReplaceOwner
    </Modal>
  )
 }
-
-export default ReplaceOwner
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.tsx
@ -1,5 +1,5 @@
 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 classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
@ -7,8 +7,7 @@ import { useSelector } from 'react-redux'
 import { List } from 'immutable'
 import { ExplorerButton } from '@gnosis.pm/safe-react-components'

-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { getExplorerInfo, getNetworkInfo } from 'src/config'
+import { getExplorerInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
 import Identicon from 'src/components/Identicon'
 import Block from 'src/components/layout/Block'
@ -24,47 +23,75 @@ import {
  safeParamAddressFromStateSelector,
  safeThresholdSelector,
 } from 'src/logic/safe/store/selectors'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { getOwnersWithNameFromAddressBook } from 'src/logic/addressBook/utils'
 import { addressBookSelector } from 'src/logic/addressBook/store/selectors'

 import { styles } from './style'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFees } from 'src/components/TransactionsFees'

 export const REPLACE_OWNER_SUBMIT_BTN_TEST_ID = 'replace-owner-submit-btn'

-const { nativeCoin } = getNetworkInfo()
+const useStyles = makeStyles(styles)

-const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddress, ownerName, values }) => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+type ReplaceOwnerProps = {
+  onClose: () => void
+  onClickBack: () => void
+  onSubmit: () => void
+  ownerAddress: string
+  ownerName: string
+  values: {
+    newOwnerAddress: string
+    newOwnerName: string
+  }
+}
+
+export const ReviewReplaceOwnerModal = ({
+  onClickBack,
+  onClose,
+  onSubmit,
+  ownerAddress,
+  ownerName,
+  values,
+}: ReplaceOwnerProps): React.ReactElement => {
+  const classes = useStyles()
+  const [data, setData] = useState('')
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  const safeName = useSelector(safeNameSelector)
  const owners = useSelector(safeOwnersSelector)
  const threshold = useSelector(safeThresholdSelector)
  const addressBook = useSelector(addressBookSelector)
  const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])

+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isCreation,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
+    txData: data,
+    txRecipient: safeAddress,
+  })
+
  useEffect(() => {
    let isCurrent = true
-    const estimateGas = async () => {
+    const calculateReplaceOwnerData = async () => {
      const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
      const safeOwners = await gnosisSafe.methods.getOwners().call()
      const index = safeOwners.findIndex((owner) => owner.toLowerCase() === ownerAddress.toLowerCase())
      const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1]
-      const txData = gnosisSafe.methods.swapOwner(prevAddress, ownerAddress, values.ownerAddress).encodeABI()
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, txData)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
+      const txData = gnosisSafe.methods.swapOwner(prevAddress, ownerAddress, values.newOwnerAddress).encodeABI()
      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
+        setData(txData)
      }
    }

-    estimateGas()
+    calculateReplaceOwnerData()
    return () => {
      isCurrent = false
    }
-  }, [ownerAddress, safeAddress, values.ownerAddress])
+  }, [ownerAddress, safeAddress, values.newOwnerAddress])

  return (
    <>
@ -78,7 +105,7 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
        </IconButton>
      </Row>
      <Hairline />
-      <Block className={classes.formContainer}>
+      <Block>
        <Row className={classes.root}>
          <Col layout="column" xs={4}>
            <Block className={classes.details}>
@ -172,19 +199,19 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
            <Hairline />
            <Row className={classes.selectedOwnerAdded}>
              <Col align="center" xs={1}>
-                <Identicon address={values.ownerAddress} diameter={32} />
+                <Identicon address={values.newOwnerAddress} diameter={32} />
              </Col>
              <Col xs={11}>
                <Block className={classNames(classes.name, classes.userName)}>
                  <Paragraph noMargin size="lg" weight="bolder">
-                    {values.ownerName}
+                    {values.newOwnerName}
                  </Paragraph>
                  <Block className={classes.user} justify="center">
                    <Paragraph className={classes.address} color="disabled" noMargin size="md">
-                      {values.ownerAddress}
+                      {values.newOwnerAddress}
                    </Paragraph>
-                    <CopyBtn content={values.ownerAddress} />
-                    <ExplorerButton explorerUrl={getExplorerInfo(values.ownerAddress)} />
+                    <CopyBtn content={values.newOwnerAddress} />
+                    <ExplorerButton explorerUrl={getExplorerInfo(values.newOwnerAddress)} />
                  </Block>
                </Block>
              </Col>
@ -195,11 +222,13 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
      </Block>
      <Hairline />
      <Block className={classes.gasCostsContainer}>
-        <Paragraph>
-          You&apos;re about to create a transaction and will have to confirm it with your currently connected wallet.
-          <br />
-          {`Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-        </Paragraph>
+        <TransactionFees
+          gasCostFormatted={gasCostFormatted}
+          isExecution={isExecution}
+          isCreation={isCreation}
+          isOffChainSignature={isOffChainSignature}
+          txEstimationExecutionStatus={txEstimationExecutionStatus}
+        />
      </Block>
      <Hairline />
      <Row align="center" className={classes.buttonRow}>
@ -221,5 +250,3 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
    </>
  )
 }
-
-export default withStyles(styles as any)(ReviewRemoveOwner)
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
@ -1,6 +1,7 @@
 import { background, border, lg, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'

-export const styles = () => ({
+export const styles = createStyles({
  root: {
    height: '372px',
  },
@ -81,7 +82,9 @@ export const styles = () => ({
    },
  },
  gasCostsContainer: {
-    padding: `0 ${lg}`,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
    textAlign: 'center',
    width: '100%',
  },
--- a/src/routes/safe/components/Settings/ManageOwners/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/index.tsx
@ -9,10 +9,10 @@ import { List } from 'immutable'
 import RemoveOwnerIcon from '../assets/icons/bin.svg'

 import AddOwnerModal from './AddOwnerModal'
-import EditOwnerModal from './EditOwnerModal'
+import { EditOwnerModal } from './EditOwnerModal'
 import OwnerAddressTableCell from './OwnerAddressTableCell'
-import RemoveOwnerModal from './RemoveOwnerModal'
-import ReplaceOwnerModal from './ReplaceOwnerModal'
+import { RemoveOwnerModal } from './RemoveOwnerModal'
+import { ReplaceOwnerModal } from './ReplaceOwnerModal'
 import RenameOwnerIcon from './assets/icons/rename-owner.svg'
 import ReplaceOwnerIcon from './assets/icons/replace-owner.svg'
 import { OWNERS_TABLE_ADDRESS_ID, OWNERS_TABLE_NAME_ID, generateColumns, getOwnerData } from './dataFetcher'
--- a/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
+++ b/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
@ -18,9 +18,16 @@ import Hairline from 'src/components/layout/Hairline'
 import Link from 'src/components/layout/Link'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
-import removeSafe from 'src/logic/safe/store/actions/removeSafe'
-import { safeNameSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import {
+  defaultSafeSelector,
+  safeNameSelector,
+  safeParamAddressFromStateSelector,
+} from 'src/logic/safe/store/selectors'
 import { md, secondary } from 'src/theme/variables'
+import { WELCOME_ADDRESS } from 'src/routes/routes'
+import { removeLocalSafe } from 'src/logic/safe/store/actions/removeLocalSafe'
+import { sameAddress } from 'src/logic/wallets/ethAddresses'
+import { saveDefaultSafe } from 'src/logic/safe/utils'

 const openIconStyle = {
  height: md,
@ -29,14 +36,33 @@ const openIconStyle = {

 const useStyles = makeStyles(styles)

-const RemoveSafeComponent = ({ isOpen, onClose }) => {
+type RemoveSafeModalProps = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const RemoveSafeModal = ({ isOpen, onClose }: RemoveSafeModalProps): React.ReactElement => {
  const classes = useStyles()
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  const safeName = useSelector(safeNameSelector)
+  const defaultSafe = useSelector(defaultSafeSelector)
  const dispatch = useDispatch()
  const explorerInfo = getExplorerInfo(safeAddress)
  const { url } = explorerInfo()

+  const onRemoveSafeHandler = async () => {
+    await dispatch(removeLocalSafe(safeAddress))
+    if (sameAddress(safeAddress, defaultSafe)) {
+      await saveDefaultSafe('')
+    }
+
+    onClose()
+    // using native redirect in order to avoid problems in several components
+    // trying to access references of the removed safe.
+    const relativePath = window.location.href.split('/#/')[0]
+    window.location.href = `${relativePath}/#/${WELCOME_ADDRESS}`
+  }
+
  return (
    <Modal
      description="Remove the selected Safe"
@ -91,13 +117,7 @@ const RemoveSafeComponent = ({ isOpen, onClose }) => {
        <Button
          className={classes.buttonRemove}
          minWidth={140}
-          onClick={() => {
-            dispatch(removeSafe(safeAddress))
-            onClose()
-            // using native redirect in order to avoid problems in several components
-            // trying to access references of the removed safe.
-            window.location.href = '/app/'
-          }}
+          onClick={onRemoveSafeHandler}
          type="submit"
          variant="contained"
        >
@ -107,5 +127,3 @@ const RemoveSafeComponent = ({ isOpen, onClose }) => {
    </Modal>
  )
 }
-
-export const RemoveSafeModal = RemoveSafeComponent
--- a/src/routes/safe/components/Settings/SafeDetails/index.tsx
+++ b/src/routes/safe/components/Settings/SafeDetails/index.tsx
@ -19,7 +19,7 @@ import enqueueSnackbar from 'src/logic/notifications/store/actions/enqueueSnackb
 import { getNotificationsFromTxType, enhanceSnackbarForAction } from 'src/logic/notifications'
 import { sameAddress } from 'src/logic/wallets/ethAddresses'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import UpdateSafeModal from 'src/routes/safe/components/Settings/UpdateSafeModal'
+import { UpdateSafeModal } from 'src/routes/safe/components/Settings/UpdateSafeModal'
 import { grantedSelector } from 'src/routes/safe/container/selector'
 import updateSafe from 'src/logic/safe/store/actions/updateSafe'
 import Link from 'src/components/layout/Link'
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
@ -1,10 +1,8 @@
 import IconButton from '@material-ui/core/IconButton'
 import MenuItem from '@material-ui/core/MenuItem'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import React, { useEffect, useState } from 'react'
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { getNetworkInfo } from 'src/config'
 import { styles } from './style'

 import Field from 'src/components/forms/Field'
@ -18,35 +16,60 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
+import { SafeOwner } from 'src/logic/safe/store/models/safe'
+import { List } from 'immutable'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+
+import { TransactionFees } from 'src/components/TransactionsFees'

 const THRESHOLD_FIELD_NAME = 'threshold'

-const { nativeCoin } = getNetworkInfo()
+const useStyles = makeStyles(styles)

-const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddress, threshold }) => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
+type ChangeThresholdModalProps = {
+  onChangeThreshold: (newThreshold: number) => void
+  onClose: () => void
+  owners?: List<SafeOwner>
+  safeAddress: string
+  threshold?: number
+}
+
+export const ChangeThresholdModal = ({
+  onChangeThreshold,
+  onClose,
+  owners,
+  safeAddress,
+  threshold = 1,
+}: ChangeThresholdModalProps): React.ReactElement => {
+  const classes = useStyles()
+  const [data, setData] = useState('')
+
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isCreation,
+    isExecution,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
+    txData: data,
+    txRecipient: safeAddress,
+  })

  useEffect(() => {
    let isCurrent = true
-    const estimateGasCosts = async () => {
+    const calculateChangeThresholdData = async () => {
      const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
-      const txData = safeInstance.methods.changeThreshold('1').encodeABI()
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, txData)
-      const gasCostsAsEth = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCostsAsEth)
+      const txData = safeInstance.methods.changeThreshold(threshold).encodeABI()
      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
+        setData(txData)
      }
    }

-    estimateGasCosts()
-
+    calculateChangeThresholdData()
    return () => {
      isCurrent = false
    }
-  }, [safeAddress])
+  }, [safeAddress, threshold])

  const handleSubmit = (values) => {
    const newThreshold = values[THRESHOLD_FIELD_NAME]
@ -81,7 +104,7 @@ const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddr
                    render={(props) => (
                      <>
                        <SelectField {...props} disableError>
-                          {[...Array(Number(owners.size))].map((x, index) => (
+                          {[...Array(Number(owners?.size))].map((x, index) => (
                            <MenuItem key={index} value={`${index + 1}`}>
                              {index + 1}
                            </MenuItem>
@ -99,14 +122,18 @@ const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddr
                </Col>
                <Col xs={10}>
                  <Paragraph className={classes.ownersText} color="primary" noMargin size="lg">
-                    {`out of ${owners.size} owner(s)`}
+                    {`out of ${owners?.size} owner(s)`}
                  </Paragraph>
                </Col>
              </Row>
              <Row>
-                <Paragraph>
-                  {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-                </Paragraph>
+                <TransactionFees
+                  gasCostFormatted={gasCostFormatted}
+                  isExecution={isExecution}
+                  isCreation={isCreation}
+                  isOffChainSignature={isOffChainSignature}
+                  txEstimationExecutionStatus={txEstimationExecutionStatus}
+                />
              </Row>
            </Block>
            <Hairline style={{ position: 'absolute', bottom: 85 }} />
@ -124,5 +151,3 @@ const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddr
    </>
  )
 }
-
-export default withStyles(styles as any)(ChangeThreshold)
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.ts
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/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: `${sm} ${lg}`,
    justifyContent: 'space-between',
--- a/src/routes/safe/components/Settings/ThresholdSettings/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/index.tsx
@ -2,7 +2,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import React, { useState, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'

-import ChangeThreshold from './ChangeThreshold'
+import { ChangeThresholdModal } from './ChangeThreshold'
 import { styles } from './style'

 import Modal from 'src/components/Modal'
@ -30,7 +30,7 @@ const ThresholdSettings = (): React.ReactElement => {
  const [isModalOpen, setModalOpen] = useState(false)
  const dispatch = useDispatch()
  const threshold = useSelector(safeThresholdSelector)
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  const owners = useSelector(safeOwnersSelector)
  const granted = useSelector(grantedSelector)

@ -38,7 +38,7 @@ const ThresholdSettings = (): React.ReactElement => {
    setModalOpen((prevOpen) => !prevOpen)
  }

-  const onChangeThreshold = async (newThreshold) => {
+  const onChangeThreshold = async (newThreshold: number) => {
    const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
    const txData = safeInstance.methods.changeThreshold(newThreshold).encodeABI()

@ -87,7 +87,7 @@ const ThresholdSettings = (): React.ReactElement => {
        open={isModalOpen}
        title="Change Required Confirmations"
      >
-        <ChangeThreshold
+        <ChangeThresholdModal
          onChangeThreshold={onChangeThreshold}
          onClose={toggleModal}
          owners={owners}
--- a/src/routes/safe/components/Settings/UpdateSafeModal/index.tsx
+++ b/src/routes/safe/components/Settings/UpdateSafeModal/index.tsx
@ -1,9 +1,7 @@
 import IconButton from '@material-ui/core/IconButton'
 import Close from '@material-ui/icons/Close'
-import { withStyles } from '@material-ui/styles'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { bindActionCreators } from 'redux'

 import { styles } from './style'

@ -13,17 +11,61 @@ import Button from 'src/components/layout/Button'
 import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
-import { upgradeSafeToLatestVersion } from 'src/logic/safe/utils/upgradeSafe'
+import { getUpgradeSafeTransactionHash } from 'src/logic/safe/utils/upgradeSafe'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'
+import { makeStyles } from '@material-ui/core'
+import { TransactionFees } from 'src/components/TransactionsFees'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { MULTI_SEND_ADDRESS } from 'src/logic/contracts/safeContracts'
+import { DELEGATE_CALL } from 'src/logic/safe/transactions'
+import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'

-const UpdateSafeModal = ({ classes, onClose, safeAddress }) => {
+const useStyles = makeStyles(styles)
+
+type Props = {
+  onClose: () => void
+  safeAddress: string
+}
+
+export const UpdateSafeModal = ({ onClose, safeAddress }: Props): React.ReactElement => {
+  const classes = useStyles()
  const dispatch = useDispatch()
+  const [multiSendCallData, setMultiSendCallData] = useState(EMPTY_DATA)
+
+  useEffect(() => {
+    const calculateUpgradeSafeModal = async () => {
+      const encodeMultiSendCallData = await getUpgradeSafeTransactionHash(safeAddress)
+      setMultiSendCallData(encodeMultiSendCallData)
+    }
+    calculateUpgradeSafeModal()
+  }, [safeAddress])
+
  const handleSubmit = async () => {
    // Call the update safe method
-    await upgradeSafeToLatestVersion(safeAddress, bindActionCreators(createTransaction, dispatch))
+    dispatch(
+      createTransaction({
+        safeAddress,
+        to: MULTI_SEND_ADDRESS,
+        valueInWei: '0',
+        txData: multiSendCallData,
+        notifiedTransaction: 'STANDARD_TX',
+        operation: DELEGATE_CALL,
+      }),
+    )
    onClose()
  }

+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isCreation,
+    isOffChainSignature,
+  } = useEstimateTransactionGas({
+    txData: multiSendCallData,
+    txRecipient: safeAddress,
+  })
+
  return (
    <>
      <Row align="center" className={classes.heading} grow>
@ -56,6 +98,15 @@ const UpdateSafeModal = ({ classes, onClose, safeAddress }) => {
                  have to confirm the update in case more than one confirmation is required for this Safe.
                </Paragraph>
              </Row>
+              <Row>
+                <TransactionFees
+                  gasCostFormatted={gasCostFormatted}
+                  isExecution={isExecution}
+                  isCreation={isCreation}
+                  isOffChainSignature={isOffChainSignature}
+                  txEstimationExecutionStatus={txEstimationExecutionStatus}
+                />
+              </Row>
            </Block>
            <Hairline style={{ position: 'absolute', bottom: 85 }} />
            <Row align="center" className={classes.buttonRow}>
@ -72,5 +123,3 @@ const UpdateSafeModal = ({ classes, onClose, safeAddress }) => {
    </>
  )
 }
-
-export default withStyles(styles as any)(UpdateSafeModal)
--- a/src/routes/safe/components/Settings/UpdateSafeModal/style.ts
+++ b/src/routes/safe/components/Settings/UpdateSafeModal/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: `${sm} ${lg}`,
    justifyContent: 'space-between',
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.tsx
@ -3,10 +3,8 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'
 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 React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { getNetworkInfo } from 'src/config'

 import { styles } from './style'

@ -18,13 +16,13 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { userAccountSelector } from 'src/logic/wallets/store/selectors'
-import processTransaction from 'src/logic/safe/store/actions/processTransaction'
+import { processTransaction } from 'src/logic/safe/store/actions/processTransaction'

 import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFees } from 'src/components/TransactionsFees'

 const useStyles = makeStyles(styles)

@ -62,9 +60,8 @@ type Props = {
  thresholdReached: boolean
  tx: Transaction
 }
-const { nativeCoin } = getNetworkInfo()

-const ApproveTxModal = ({
+export const ApproveTxModal = ({
  canExecute,
  isCancelTx = false,
  isOpen,
@ -76,37 +73,27 @@ const ApproveTxModal = ({
  const userAddress = useSelector(userAccountSelector)
  const classes = useStyles()
  const threshold = useSelector(safeThresholdSelector)
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  const [approveAndExecute, setApproveAndExecute] = useState(canExecute)
-  const [gasCosts, setGasCosts] = useState('< 0.001')
  const { description, title } = getModalTitleAndDescription(thresholdReached, isCancelTx)
  const oneConfirmationLeft = !thresholdReached && tx.confirmations.size + 1 === threshold
  const isTheTxReadyToBeExecuted = oneConfirmationLeft ? true : thresholdReached

-  useEffect(() => {
-    let isCurrent = true
-
-    const estimateGas = async () => {
-      const estimatedGasCosts = await estimateTxGasCosts(
-        safeAddress,
-        tx.recipient,
-        tx.data as string,
-        tx,
-        approveAndExecute ? userAddress : undefined,
-      )
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-      }
-    }
-
-    estimateGas()
-
-    return () => {
-      isCurrent = false
-    }
-  }, [approveAndExecute, safeAddress, tx, userAddress])
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isOffChainSignature,
+    isCreation,
+  } = useEstimateTransactionGas({
+    txRecipient: tx.recipient,
+    txData: tx.data || '',
+    txConfirmations: tx.confirmations,
+    txAmount: tx.value,
+    preApprovingOwner: approveAndExecute ? userAddress : undefined,
+    safeTxGas: tx.safeTxGas,
+    operation: tx.operation,
+  })

  const handleExecuteCheckbox = () => setApproveAndExecute((prevApproveAndExecute) => !prevApproveAndExecute)

@ -118,6 +105,7 @@ const ApproveTxModal = ({
        userAddress,
        notifiedTransaction: TX_NOTIFICATION_TYPES.CONFIRMATION_TX,
        approveAndExecute: canExecute && approveAndExecute && isTheTxReadyToBeExecuted,
+        thresholdReached,
      }),
    )
    onClose()
@ -159,15 +147,13 @@ const ApproveTxModal = ({
            </>
          )}
        </Row>
-        <Row>
-          <Paragraph>
-            {`You're about to ${
-              approveAndExecute ? 'execute' : 'approve'
-            } a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ${
-              nativeCoin.name
-            } in this wallet to fund this confirmation.`}
-          </Paragraph>
-        </Row>
+        <TransactionFees
+          gasCostFormatted={gasCostFormatted}
+          isExecution={isExecution}
+          isCreation={isCreation}
+          isOffChainSignature={isOffChainSignature}
+          txEstimationExecutionStatus={txEstimationExecutionStatus}
+        />
      </Block>
      <Row align="center" className={classes.buttonRow}>
        <Button minHeight={42} minWidth={140} onClick={onClose}>
@ -188,5 +174,3 @@ const ApproveTxModal = ({
    </Modal>
  )
 }
-
-export default ApproveTxModal
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx
@ -33,7 +33,7 @@ function getOwnersConfirmations(tx: Transaction, userAddress: string): [string[]
  const ownersWhoConfirmed: string[] = []
  let currentUserAlreadyConfirmed = false

-  tx.confirmations.forEach((conf) => {
+  tx.confirmations?.forEach((conf) => {
    if (conf.owner === userAddress) {
      currentUserAlreadyConfirmed = true
    }
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/RejectTxModal/index.tsx
@ -1,10 +1,8 @@
 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 React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { getNetworkInfo } from 'src/config'

 import { styles } from './style'

@ -16,13 +14,13 @@ import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
-import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
 import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
 import createTransaction from 'src/logic/safe/store/actions/createTransaction'

 import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/transaction'
+import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFees } from 'src/components/TransactionsFees'

 const useStyles = makeStyles(styles)

@ -32,31 +30,21 @@ type Props = {
  tx: Transaction
 }

-const { nativeCoin } = getNetworkInfo()
-
-const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElement => {
-  const [gasCosts, setGasCosts] = useState('< 0.001')
+export const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElement => {
  const dispatch = useDispatch()
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  const classes = useStyles()

-  useEffect(() => {
-    let isCurrent = true
-    const estimateGasCosts = async () => {
-      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, EMPTY_DATA)
-      const gasCosts = fromTokenUnit(estimatedGasCosts, nativeCoin.decimals)
-      const formattedGasCosts = formatAmount(gasCosts)
-      if (isCurrent) {
-        setGasCosts(formattedGasCosts)
-      }
-    }
-
-    estimateGasCosts()
-
-    return () => {
-      isCurrent = false
-    }
-  }, [safeAddress])
+  const {
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+    isExecution,
+    isOffChainSignature,
+    isCreation,
+  } = useEstimateTransactionGas({
+    txData: EMPTY_DATA,
+    txRecipient: safeAddress,
+  })

  const sendReplacementTransaction = () => {
    dispatch(
@ -95,9 +83,13 @@ const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElement => {
          </Paragraph>
        </Row>
        <Row>
-          <Paragraph>
-            {`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ${nativeCoin.name} in this wallet to fund this confirmation.`}
-          </Paragraph>
+          <TransactionFees
+            gasCostFormatted={gasCostFormatted}
+            isExecution={isExecution}
+            isCreation={isCreation}
+            isOffChainSignature={isOffChainSignature}
+            txEstimationExecutionStatus={txEstimationExecutionStatus}
+          />
        </Row>
      </Block>
      <Row align="center" className={classes.buttonRow}>
@ -118,5 +110,3 @@ const RejectTxModal = ({ isOpen, onClose, tx }: Props): React.ReactElement => {
    </Modal>
  )
 }
-
-export default RejectTxModal
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/TransferDescription.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/TransferDescription.tsx
@ -26,7 +26,6 @@ const TransferDescription = ({
 }: TransferDescriptionProps): ReactElement | null => {
  const recipientName = useSelector((state) => getNameFromAddressBookSelector(state, recipient))
  const [sendModalOpen, setSendModalOpen] = React.useState(false)
-
  const sendModalOpenHandler = () => {
    setSendModalOpen(true)
  }
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
@ -3,9 +3,9 @@ import React, { ReactElement, useMemo, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { EthHashInfo } from '@gnosis.pm/safe-react-components'

-import ApproveTxModal from './ApproveTxModal'
+import { ApproveTxModal } from './ApproveTxModal'
 import OwnersColumn from './OwnersColumn'
-import RejectTxModal from './RejectTxModal'
+import { RejectTxModal } from './RejectTxModal'
 import TxDescription from './TxDescription'
 import { IncomingTx } from './IncomingTx'
 import { CreationTx } from './CreationTx'
@ -73,13 +73,11 @@ const ExpandedModuleTx = ({ tx }: { tx: SafeModuleTransaction }): ReactElement =
          </Block>
          <Hairline />
          <Block className={cn(classes.txDataContainer, classes.incomingTxBlock)}>
-            {recipient && (
-              <TransferDescription
-                amountWithSymbol={amountWithSymbol}
-                isTokenTransfer={!sameAddress(amountWithSymbol, NOT_AVAILABLE)}
-                recipient={recipient}
-              />
-            )}
+            <TransferDescription
+              amountWithSymbol={amountWithSymbol}
+              isTokenTransfer={!sameAddress(amountWithSymbol, NOT_AVAILABLE)}
+              recipient={recipient}
+            />
          </Block>
        </Col>
      </Row>
@ -107,7 +105,7 @@ const ExpandedSafeTx = ({ cancelTx, tx }: ExpandedSafeTxProps): ReactElement =>

  const thresholdReached = !isIncomingTx && threshold <= tx.confirmations.size
  const canExecute = !isIncomingTx && nonce === tx.nonce
-  const cancelThresholdReached = !!cancelTx && threshold <= cancelTx.confirmations.size
+  const cancelThresholdReached = !!cancelTx && threshold <= cancelTx.confirmations?.size
  const canExecuteCancel = nonce === tx.nonce

  const openRejectModal = () => {
--- a/src/routes/safe/components/Transactions/TxsTable/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/index.tsx
@ -121,12 +121,9 @@ const TxsTable = (): React.ReactElement => {
                      colSpan={6}
                      style={{ paddingBottom: 0, paddingTop: 0 }}
                    >
-                      <Collapse
-                        component={() => <ExpandedTx row={row} />}
-                        in={expandedTx === rowId}
-                        timeout="auto"
-                        unmountOnExit
-                      />
+                      <Collapse in={expandedTx === rowId} unmountOnExit>
+                        <ExpandedTx row={row} />
+                      </Collapse>
                    </TableCell>
                  </TableRow>
                </React.Fragment>
--- a/src/routes/safe/store/actions/transactions/tests/utils.test.ts
+++ b/src/routes/safe/store/actions/transactions/tests/utils.test.ts
@ -66,7 +66,7 @@ describe('getNewTxNonce', () => {
    const expectedResult = '2'

    // when
-    const result = await getNewTxNonce(undefined, lastTx, safeInstance)
+    const result = await getNewTxNonce(lastTx, safeInstance)

    // then
    expect(result).toBe(expectedResult)
@ -82,7 +82,7 @@ describe('getNewTxNonce', () => {
    safeInstance.methods.nonce = mockFnNonce

    // when
-    const result = await getNewTxNonce(undefined, null, safeInstance)
+    const result = await getNewTxNonce(null, safeInstance)

    // then
    expect(result).toBe(expectedResult)
@ -98,19 +98,7 @@ describe('getNewTxNonce', () => {
    const lastTx = getMockedTxServiceModel({ nonce: 10 })

    // when
-    const result = await getNewTxNonce(undefined, lastTx, safeInstance)
-
-    // then
-    expect(result).toBe(expectedResult)
-  })
-  it('Given a pre-calculated nonce number should return it', async () => {
-    // given
-    const safeInstance = getMockedSafeInstance({})
-    const expectedResult = '114'
-    const nextNonce = '114'
-
-    // when
-    const result = await getNewTxNonce(nextNonce, null, safeInstance)
+    const result = await getNewTxNonce(lastTx, safeInstance)

    // then
    expect(result).toBe(expectedResult)
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@ -16,6 +16,8 @@ import Link from 'src/components/layout/Link'
 import Block from 'src/components/layout/Block'
 import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
 import { onConnectButtonClick } from 'src/components/ConnectButton'
+import { useSelector } from 'react-redux'
+import { providerNameSelector } from 'src/logic/wallets/store/selectors'

 const Wrapper = styled.div`
  display: flex;
@ -67,10 +69,10 @@ const StyledButtonLink = styled(ButtonLink)`

 type Props = {
  isOldMultisigMigration?: boolean
-  provider: any
 }

-const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElement => {
+export const WelcomeLayout = ({ isOldMultisigMigration }: Props): React.ReactElement => {
+  const provider = useSelector(providerNameSelector)
  return (
    <Block>
      {/* Title */}
@ -125,7 +127,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
              color="primary"
              variant="contained"
              onClick={onConnectButtonClick}
-              disabled={provider}
+              disabled={!!provider}
              data-testid="connect-btn"
            >
              <Text size="xl" color="white">
@ -187,5 +189,3 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
    </Block>
  )
 }
-
-export default Welcome
--- a/src/routes/welcome/container/index.tsx
+++ b/src/routes/welcome/container/index.tsx
@ -1,16 +1,12 @@
-import * as React from 'react'
-import { connect } from 'react-redux'
-
-import Layout from '../components/Layout'
-
-import selector from './selector'
+import React, { ReactElement } from 'react'
+import { WelcomeLayout } from 'src/routes/welcome/components'

 import Page from 'src/components/layout/Page'

-const Welcome = ({ provider }) => (
+const Welcome = (): ReactElement => (
  <Page align="center">
-    <Layout provider={provider} />
+    <WelcomeLayout />
  </Page>
 )

-export default connect(selector)(Welcome)
+export default Welcome
--- a/src/routes/welcome/container/selector.ts
+++ b/src/routes/welcome/container/selector.ts
@ -1,7 +0,0 @@
-import { createStructuredSelector } from 'reselect'
-
-import { providerNameSelector } from 'src/logic/wallets/store/selectors'
-
-export default createStructuredSelector({
-  provider: providerNameSelector,
-})
--- a/src/test/signatures.blockchain.ts
+++ b/src/test/signatures.blockchain.ts
@ -1,8 +1,14 @@
-// 
+//
 import { List } from 'immutable'
 import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
+import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
+import { makeConfirmation } from 'src/logic/safe/store/models/confirmation'

-const makeMockConfirmation = (address) => ({ owner: { address } })
+const makeMockConfirmation = (address: string): Confirmation => {
+  return makeConfirmation({
+    owner: address
+  })
+}

 describe('Signatures Blockchain Test', () => {
  it('generates signatures in natural order even checksumed', async () => {
--- a/yarn.lock
+++ b/yarn.lock