Merge branch 'development' of github.com:gnosis/safe-react into 1013-undefined-error

2020-06-26 18:09:55 +04:00 · 2020-06-26 18:09:55 +04:00 · ca51768b04
parent 01358de643 51634e559d
commit ca51768b04
37 changed files with 1666 additions and 817 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -18,7 +18,6 @@ module.exports = {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/prop-types': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "safe-react",
-  "version": "2.1.1",
+  "version": "2.3.1",
  "description": "Allowing crypto users manage funds in a safer way",
  "website": "https://github.com/gnosis/safe-react#readme",
  "bugs": {
--- a/src/components/CookiesBanner/index.tsx
+++ b/src/components/CookiesBanner/index.tsx
@ -144,6 +144,7 @@ const CookiesBanner = () => {
        onKeyDown={closeCookiesBannerHandler}
        role="button"
        tabIndex={0}
+        data-testid="accept-preferences"
      >
        Accept preferences &gt;
      </span>
--- a/src/components/Header/components/Layout.tsx
+++ b/src/components/Header/components/Layout.tsx
@ -61,7 +61,7 @@ const Layout = openHoc(({ classes, clickAway, open, providerDetails, providerInf
  <Row className={classes.summary}>
    <Col className={classes.logo} middle="xs" start="xs">
      <Link to="/">
-        <Img alt="Gnosis Team Safe" height={32} src={logo} />
+        <Img alt="Gnosis Team Safe" height={32} src={logo} testId="heading-gnosis-logo" />
      </Link>
    </Col>
    <Divider />
--- a/src/components/Header/components/ProviderDetails/ConnectDetails.tsx
+++ b/src/components/Header/components/ProviderDetails/ConnectDetails.tsx
@ -45,7 +45,7 @@ const ConnectDetails = ({ classes }) => (
      <CircleDot center circleSize={75} dotRight={25} dotSize={25} dotTop={50} keySize={32} mode="error" />
    </Row>
    <Block className={classes.connect}>
-      <ConnectButton />
+      <ConnectButton data-testid="heading-connect-btn" />
    </Block>
  </>
 )
--- a/src/components/Header/components/ProviderDetails/UserDetails.tsx
+++ b/src/components/Header/components/ProviderDetails/UserDetails.tsx
@ -163,7 +163,14 @@ const UserDetails = ({ classes, connected, network, onDisconnect, openDashboard,
        </Row>
      )}
      <Row className={classes.disconnect}>
-        <Button color="primary" fullWidth onClick={onDisconnect} size="medium" variant="contained">
+        <Button
+          color="primary"
+          fullWidth
+          onClick={onDisconnect}
+          size="medium"
+          variant="contained"
+          data-testid="disconnect-btn"
+        >
          <Paragraph className={classes.disconnectText} color="white" noMargin size="md">
            Disconnect
          </Paragraph>
--- a/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
+++ b/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
@ -62,7 +62,14 @@ const ProviderInfo = ({ classes, connected, network, provider, userAddress }) =>
      )}
      {!connected && <CircleDot circleSize={35} dotRight={11} dotSize={16} dotTop={24} keySize={14} mode="warning" />}
      <Col className={classes.account} layout="column" start="sm">
-        <Paragraph className={classes.network} noMargin size="xs" transform="capitalize" weight="bolder">
+        <Paragraph
+          className={classes.network}
+          noMargin
+          size="xs"
+          transform="capitalize"
+          weight="bolder"
+          data-testid="connected-wallet"
+        >
          {providerText}
        </Paragraph>
        <Paragraph className={classes.address} color={color} noMargin size="xs">
--- a/src/components/Header/components/ProviderInfo/ProviderDisconnected.tsx
+++ b/src/components/Header/components/ProviderInfo/ProviderDisconnected.tsx
@ -29,7 +29,14 @@ const ProviderDisconnected = ({ classes }) => (
  <>
    <CircleDot circleSize={35} dotRight={11} dotSize={16} dotTop={24} keySize={17} mode="error" />
    <Col className={classes.account} end="sm" layout="column" middle="xs">
-      <Paragraph className={classes.network} noMargin size="sm" transform="capitalize" weight="bold">
+      <Paragraph
+        className={classes.network}
+        noMargin
+        size="sm"
+        transform="capitalize"
+        weight="bold"
+        data-testid="not-connected-wallet"
+      >
        Not Connected
      </Paragraph>
      <Paragraph className={classes.connect} color="fancy" noMargin size="sm">
--- a/src/components/Header/components/SafeListHeader/index.tsx
+++ b/src/components/Header/components/SafeListHeader/index.tsx
@ -44,7 +44,7 @@ const SafeListHeader = ({ safesCount }) => {
  return (
    <Col className={classes.container} middle="xs" start="xs">
      Safes
-      <Paragraph className={classes.counter} size="xs">
+      <Paragraph className={classes.counter} size="xs" data-testid="safe-counter-heading">
        {safesCount}
      </Paragraph>
      <IconButton
--- a/src/components/ScanQRModal/ScanQRWrapper/index.tsx
+++ b/src/components/ScanQRModal/ScanQRWrapper/index.tsx
@ -39,6 +39,7 @@ export const ScanQRWrapper = (props) => {
        }}
        role="button"
        src={QRIcon}
+        testId="qr-icon"
      />
      {qrModalOpen && <ScanQRModal isOpen={qrModalOpen} onClose={closeQrModal} onScan={onScanFinished} />}
    </>
--- a/src/components/forms/validator.ts
+++ b/src/components/forms/validator.ts
@ -58,14 +58,18 @@ export const minValue = (min: number | string) => (value: string) => {
  return `Should be at least ${min}`
 }

-export const maxValue = (max: number | string) => (value: string) => {
-  if (Number.isNaN(Number(value)) || parseFloat(value) <= parseFloat(max.toString())) {
+export const maxValueCheck = (max: number | string, value: string): string | undefined => {
+  if (!max || Number.isNaN(Number(value)) || parseFloat(value) <= parseFloat(max.toString())) {
    return undefined
  }

  return `Maximum value is ${max}`
 }

+export const maxValue = (max: number | string) => (value: string) => {
+  return maxValueCheck(max, value)
+}
+
 export const ok = () => undefined

 export const mustBeEthereumAddress = simpleMemoize((address: string) => {
--- a/src/routes/load/components/DetailsForm/index.tsx
+++ b/src/routes/load/components/DetailsForm/index.tsx
@ -100,6 +100,7 @@ const Details = ({ classes, errors, form }) => {
            text="Safe name"
            type="text"
            validate={required}
+            testId="load-safe-name-field"
          />
        </Col>
      </Block>
@ -114,7 +115,7 @@ const Details = ({ classes, errors, form }) => {
              noErrorsOn(FIELD_LOAD_ADDRESS, errors) && {
                endAdornment: (
                  <InputAdornment position="end">
-                    <CheckCircle className={classes.check} />
+                    <CheckCircle className={classes.check} data-testid="valid-address" />
                  </InputAdornment>
                ),
              }
@ -123,6 +124,7 @@ const Details = ({ classes, errors, form }) => {
            placeholder="Safe Address*"
            text="Safe Address"
            type="text"
+            testId="load-safe-address-field"
          />
        </Col>
        <Col center="xs" className={classes} middle="xs" xs={1}>
--- a/src/routes/load/components/OwnerList/index.tsx
+++ b/src/routes/load/components/OwnerList/index.tsx
@ -109,7 +109,7 @@ const OwnerListComponent = (props) => {
  return (
    <>
      <Block className={classes.title}>
-        <Paragraph color="primary" noMargin size="md">
+        <Paragraph color="primary" noMargin size="md" data-testid="load-safe-step-two">
          {`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
        </Paragraph>
      </Block>
@ -122,7 +122,7 @@ const OwnerListComponent = (props) => {
        <Hairline />
        <Block margin="md" padding="md">
          {owners.map((address, index) => (
-            <Row className={classes.owner} key={address}>
+            <Row className={classes.owner} key={address} data-testid="owner-row">
              <Col className={classes.ownerName} xs={4}>
                <Field
                  className={classes.name}
@ -133,6 +133,7 @@ const OwnerListComponent = (props) => {
                  text="Owner Name"
                  type="text"
                  validate={required}
+                  testId={`load-safe-owner-name-${index}`}
                />
              </Col>
              <Col xs={8}>
--- a/src/routes/load/components/ReviewInformation/index.tsx
+++ b/src/routes/load/components/ReviewInformation/index.tsx
@ -109,7 +109,7 @@ class ReviewComponent extends React.PureComponent<any> {
          <Col className={classes.detailsColumn} layout="column" xs={4}>
            <Block className={classes.details}>
              <Block margin="lg">
-                <Paragraph color="primary" noMargin size="lg">
+                <Paragraph color="primary" noMargin size="lg" data-testid="load-safe-step-three">
                  Review details
                </Paragraph>
              </Block>
@ -117,7 +117,14 @@ class ReviewComponent extends React.PureComponent<any> {
                <Paragraph color="disabled" noMargin size="sm">
                  Name of the Safe
                </Paragraph>
-                <Paragraph className={classes.name} color="primary" noMargin size="lg" weight="bolder">
+                <Paragraph
+                  className={classes.name}
+                  color="primary"
+                  noMargin
+                  size="lg"
+                  weight="bolder"
+                  data-testid="load-form-review-safe-name"
+                >
                  {values[FIELD_LOAD_NAME]}
                </Paragraph>
              </Block>
@ -168,7 +175,7 @@ class ReviewComponent extends React.PureComponent<any> {
                    </Col>
                    <Col xs={11}>
                      <Block className={classNames(classes.name, classes.userName)}>
-                        <Paragraph noMargin size="lg">
+                        <Paragraph noMargin size="lg" data-testid="load-safe-review-owner-name">
                          {values[getOwnerNameBy(index)]}
                        </Paragraph>
                        <Block className={classes.user} justify="center">
--- a/src/routes/open/components/Layout.tsx
+++ b/src/routes/open/components/Layout.tsx
@ -87,7 +87,9 @@ const Layout = (props) => {
            <IconButton disableRipple onClick={back} style={iconStyle}>
              <ChevronLeft />
            </IconButton>
-            <Heading tag="h2">Create New Safe</Heading>
+            <Heading tag="h2" testId="create-safe-form-title">
+              Create New Safe
+            </Heading>
          </Row>
          <Stepper
            initialValues={initialValues}
--- a/src/routes/open/components/ReviewInformation/index.tsx
+++ b/src/routes/open/components/ReviewInformation/index.tsx
@ -112,7 +112,7 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
        <Col className={classes.detailsColumn} layout="column" xs={4}>
          <Block className={classes.details}>
            <Block margin="lg">
-              <Paragraph color="primary" noMargin size="lg">
+              <Paragraph color="primary" noMargin size="lg" data-testid="create-safe-step-three">
                Details
              </Paragraph>
            </Block>
@ -120,7 +120,14 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
              <Paragraph color="disabled" noMargin size="sm">
                Name of new Safe
              </Paragraph>
-              <Paragraph className={classes.name} color="primary" noMargin size="lg" weight="bolder">
+              <Paragraph
+                className={classes.name}
+                color="primary"
+                noMargin
+                size="lg"
+                weight="bolder"
+                data-testid="create-safe-review-name"
+              >
                {values[FIELD_NAME]}
              </Paragraph>
            </Block>
@ -128,7 +135,13 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
              <Paragraph color="disabled" noMargin size="sm">
                Any transaction requires the confirmation of:
              </Paragraph>
-              <Paragraph color="primary" noMargin size="lg" weight="bolder">
+              <Paragraph
+                color="primary"
+                noMargin
+                size="lg"
+                weight="bolder"
+                data-testid={`create-safe-review-req-owners-${values[FIELD_CONFIRMATIONS]}`}
+              >
                {`${values[FIELD_CONFIRMATIONS]} out of ${numOwners} owners`}
              </Paragraph>
            </Block>
@ -150,11 +163,16 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
                  </Col>
                  <Col xs={11}>
                    <Block className={classNames(classes.name, classes.userName)}>
-                      <Paragraph noMargin size="lg">
+                      <Paragraph noMargin size="lg" data-testid={`create-safe-owner-name-${index}`}>
                        {name}
                      </Paragraph>
                      <Block className={classes.user} justify="center">
-                        <Paragraph color="disabled" noMargin size="md">
+                        <Paragraph
+                          color="disabled"
+                          noMargin
+                          size="md"
+                          data-testid={`create-safe-owner-address-${index}`}
+                        >
                          {addresses[index]}
                        </Paragraph>
                        <CopyBtn content={addresses[index]} />
--- a/src/routes/open/components/SafeNameForm/index.tsx
+++ b/src/routes/open/components/SafeNameForm/index.tsx
@ -45,6 +45,7 @@ const SafeName = ({ classes, safeName }) => (
        text="Safe name"
        type="text"
        validate={required}
+        testId="create-safe-name-field"
      />
    </Block>
    <Block margin="lg">
--- a/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
+++ b/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
@ -99,7 +99,7 @@ const SafeOwners = (props) => {
  return (
    <>
      <Block className={classes.title}>
-        <Paragraph color="primary" noMargin size="md">
+        <Paragraph color="primary" noMargin size="md" data-testid="create-safe-step-two">
          Your Safe will have one or more owners. We have prefilled the first owner with your connected wallet details,
          but you are free to change this to a different owner.
          <br />
@ -120,7 +120,7 @@ const SafeOwners = (props) => {
          const addressName = getOwnerAddressBy(index)

          return (
-            <Row className={classes.owner} key={`owner${index}`}>
+            <Row className={classes.owner} key={`owner${index}`} data-testid={`create-safe-owner-row`}>
              <Col className={classes.ownerName} xs={4}>
                <Field
                  className={classes.name}
@ -130,6 +130,7 @@ const SafeOwners = (props) => {
                  text="Owner Name"
                  type="text"
                  validate={required}
+                  testId={`create-safe-owner-name-field-${index}`}
                />
              </Col>
              <Col className={classes.ownerAddress} xs={6}>
@ -142,7 +143,7 @@ const SafeOwners = (props) => {
                    noErrorsOn(addressName, errors) && {
                      endAdornment: (
                        <InputAdornment position="end">
-                          <CheckCircle className={classes.check} />
+                          <CheckCircle className={classes.check} data-testid={`valid-address-${index}`} />
                        </InputAdornment>
                      ),
                    }
@ -152,6 +153,7 @@ const SafeOwners = (props) => {
                  text="Owner Address"
                  type="text"
                  validators={[getAddressValidator(otherAccounts, index)]}
+                  testId={`create-safe-address-field-${index}`}
                />
              </Col>
              <Col center="xs" className={classes.remove} middle="xs" xs={1}>
@ -191,14 +193,20 @@ const SafeOwners = (props) => {
              validate={composeValidators(required, mustBeInteger, minValue(1))}
            >
              {[...Array(Number(validOwners))].map((x, index) => (
-                <MenuItem key={`selectOwner${index}`} value={`${index + 1}`}>
+                <MenuItem key={`selectOwner${index}`} value={`${index + 1}`} data-testid={`input-${index + 1}`}>
                  {index + 1}
                </MenuItem>
              ))}
            </Field>
          </Col>
          <Col className={classes.ownersAmountItem} xs={10}>
-            <Paragraph className={classes.owners} color="primary" noMargin size="lg">
+            <Paragraph
+              className={classes.owners}
+              color="primary"
+              noMargin
+              size="lg"
+              data-testid={`create-safe-req-conf-${validOwners}`}
+            >
              out of {validOwners} owner(s)
            </Paragraph>
          </Col>
--- a/src/routes/opening/components/Footer.tsx
+++ b/src/routes/opening/components/Footer.tsx
@ -38,7 +38,13 @@ export const ContinueFooter = ({
  continueButtonDisabled: boolean
  onContinue: (event: SyntheticEvent) => void
 }) => (
-  <Button color="primary" disabled={continueButtonDisabled} onClick={onContinue} variant="contained">
+  <Button
+    color="primary"
+    disabled={continueButtonDisabled}
+    onClick={onContinue}
+    variant="contained"
+    data-testid="continue-btn"
+  >
    Continue
  </Button>
 )
--- a/src/routes/opening/index.tsx
+++ b/src/routes/opening/index.tsx
@ -302,7 +302,9 @@ const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, provider

  return (
    <Wrapper>
-      <Title tag="h2">Safe creation process</Title>
+      <Title tag="h2" testId="safe-creation-process-title">
+        Safe creation process
+      </Title>
      <Nav>
        <Stepper activeStepIndex={stepIndex} error={error} orientation="vertical" steps={steps} />
      </Nav>
@ -336,7 +338,7 @@ const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, provider
          ) : null}
        </BodyFooter>
      </Body>
-      <BackButton color="primary" minWidth={140} onClick={onCancel}>
+      <BackButton color="primary" minWidth={140} onClick={onCancel} data-testid="safe-creation-back-btn">
        Back
      </BackButton>
    </Wrapper>
--- a/src/routes/safe/components/Apps/confirmTransactions.tsx
+++ b/src/routes/safe/components/Apps/confirmTransactions.tsx
@ -3,7 +3,6 @@ import { BigNumber } from 'bignumber.js'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'

-import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import AddressInfo from 'src/components/AddressInfo'
 import DividerLine from 'src/components/DividerLine'
 import Collapse from 'src/components/Collapse'
@ -55,17 +54,12 @@ const IconText = styled.div`
    margin-right: 4px;
  }
 `
-const isTxValid = (t): boolean => {
-  try {
-    if (!['string', 'number'].includes(typeof t.value)) {
-      return false
-    }
+const isTxValid = (t: SafeAppTx): boolean => {
+  if (!['string', 'number'].includes(typeof t.value)) {
+    return false
+  }

-    if (typeof t.value === 'string') {
-      const web3 = getWeb3()
-      web3.eth.abi.decodeParameter('uint256', t.value)
-    }
-  } catch (error) {
+  if (typeof t.value === 'string' && !/^\d+$/.test(t.value)) {
    return false
  }

--- a/src/routes/safe/components/Apps/utils.ts
+++ b/src/routes/safe/components/Apps/utils.ts
@ -13,10 +13,14 @@ const removeLastTrailingSlash = (url) => {

 const gnosisAppsUrl = removeLastTrailingSlash(getGnosisSafeAppsUrl())
 export const staticAppsList: Array<{ url: string; disabled: boolean }> = [
+  // Sablier
+  { url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmabPEk7g4zaytFefp6fE4nz8f85QMJoWmRQQZypvJViNG`, disabled: false },
+  // request
  { url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmQapdJP6zERqpDKKPECNeMDDgwmGUqbKk1PjHpYj8gfDJ`, disabled: false },
+  // Aave
+  // { url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmUfgEqdJ5kVjWTQofnDmvxdhDLBAaejiHkhQhfw6aYvBg`, disabled: false },
  { url: `${gnosisAppsUrl}/compound`, disabled: false },
  { url: `${gnosisAppsUrl}/tx-builder`, disabled: false },
-  { url: `${gnosisAppsUrl}/aave`, disabled: false },
  { url: `${gnosisAppsUrl}/pool-together`, disabled: false },
  { url: `${gnosisAppsUrl}/open-zeppelin`, disabled: false },
  { url: `${gnosisAppsUrl}/synthetix`, disabled: false },
--- a/src/routes/safe/components/Balances/SendModal/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/index.tsx
@ -19,6 +19,10 @@ const ContractInteraction = React.lazy(() => import('./screens/ContractInteracti

 const ContractInteractionReview: any = React.lazy(() => import('./screens/ContractInteraction/Review'))

+const SendCustomTx = React.lazy(() => import('./screens/ContractInteraction/SendCustomTx'))
+
+const ReviewCustomTx = React.lazy(() => import('./screens/ContractInteraction/ReviewCustomTx'))
+
 const useStyles = makeStyles({
  scalableModalWindow: {
    height: 'auto',
@ -40,9 +44,11 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
  const classes = useStyles()
  const [activeScreen, setActiveScreen] = useState(activeScreenType || 'chooseTxType')
  const [tx, setTx] = useState({})
+  const [isABI, setIsABI] = useState(true)

  useEffect(() => {
    setActiveScreen(activeScreenType || 'chooseTxType')
+    setIsABI(true)
    setTx({})
  }, [activeScreenType, isOpen])

@ -53,9 +59,14 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
    setTx(txInfo)
  }

-  const handleContractInteractionCreation = (contractInteractionInfo) => {
+  const handleContractInteractionCreation = (contractInteractionInfo: any, submit: boolean): void => {
    setTx(contractInteractionInfo)
-    setActiveScreen('contractInteractionReview')
+    if (submit) setActiveScreen('contractInteractionReview')
+  }
+
+  const handleCustomTxCreation = (customTxInfo: any, submit: boolean): void => {
+    setTx(customTxInfo)
+    if (submit) setActiveScreen('reviewCustomTx')
  }

  const handleSendCollectible = (txInfo) => {
@ -63,6 +74,10 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
    setTx(txInfo)
  }

+  const handleSwitchMethod = (): void => {
+    setIsABI(!isABI)
+  }
+
  return (
    <Modal
      description="Send Tokens Form"
@ -93,17 +108,32 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
        {activeScreen === 'reviewTx' && (
          <ReviewTx onClose={onClose} onPrev={() => setActiveScreen('sendFunds')} tx={tx} />
        )}
-        {activeScreen === 'contractInteraction' && (
+        {activeScreen === 'contractInteraction' && isABI && (
          <ContractInteraction
+            isABI={isABI}
+            switchMethod={handleSwitchMethod}
            contractAddress={recipientAddress}
            initialValues={tx}
            onClose={onClose}
            onNext={handleContractInteractionCreation}
          />
        )}
-        {activeScreen === 'contractInteractionReview' && tx && (
+        {activeScreen === 'contractInteractionReview' && isABI && tx && (
          <ContractInteractionReview onClose={onClose} onPrev={() => setActiveScreen('contractInteraction')} tx={tx} />
        )}
+        {activeScreen === 'contractInteraction' && !isABI && (
+          <SendCustomTx
+            initialValues={tx}
+            isABI={isABI}
+            switchMethod={handleSwitchMethod}
+            onClose={onClose}
+            onNext={handleCustomTxCreation}
+            contractAddress={recipientAddress}
+          />
+        )}
+        {activeScreen === 'reviewCustomTx' && (
+          <ReviewCustomTx onClose={onClose} onPrev={() => setActiveScreen('contractInteraction')} tx={tx} />
+        )}
        {activeScreen === 'sendCollectible' && (
          <SendCollectible
            initialValues={tx}
--- a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx
@ -88,6 +88,9 @@ const AddressBookInput = ({
        )
      })
      setADBKList(filteredADBK)
+      if (!isValidText) {
+        setSelectedEntry({ address: addressValue })
+      }
    }
    setIsValidForm(isValidText === undefined)
    setValidationText(isValidText)
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@ -50,7 +50,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props) => {
  useEffect(() => {
    let isCurrent = true

-    const estimateGas = async () => {
+    const estimateGas = async (): Promise<void> => {
      const { fromWei, toBN } = getWeb3().utils
      const txData = tx.data ? tx.data.trim() : ''

--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@ -0,0 +1,184 @@
+import IconButton from '@material-ui/core/IconButton'
+import { makeStyles } from '@material-ui/core/styles'
+import Close from '@material-ui/icons/Close'
+import { useSnackbar } from 'notistack'
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import ArrowDown from '../../assets/arrow-down.svg'
+
+import { styles } from './style'
+
+import CopyBtn from 'src/components/CopyBtn'
+import EtherscanBtn from 'src/components/EtherscanBtn'
+import Identicon from 'src/components/Identicon'
+import Block from 'src/components/layout/Block'
+import Button from 'src/components/layout/Button'
+import Col from 'src/components/layout/Col'
+import Hairline from 'src/components/layout/Hairline'
+import Img from 'src/components/layout/Img'
+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/gasNew'
+import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
+import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
+import { getWeb3 } from 'src/logic/wallets/getWeb3'
+import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
+import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
+import createTransaction from 'src/routes/safe/store/actions/createTransaction'
+import { safeSelector } from 'src/routes/safe/store/selectors'
+import { sm } from 'src/theme/variables'
+
+type Props = {
+  onClose: () => void
+  onPrev: () => void
+  tx: { contractAddress?: string; data?: string; value?: string }
+}
+
+const useStyles = makeStyles(styles)
+
+const ReviewCustomTx = ({ onClose, onPrev, tx }: Props) => {
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  const { address: safeAddress } = useSelector(safeSelector)
+  const [gasCosts, setGasCosts] = useState<string>('< 0.001')
+
+  useEffect(() => {
+    let isCurrent = true
+
+    const estimateGas = async () => {
+      const { fromWei, toBN } = getWeb3().utils
+      const txData = tx.data ? tx.data.trim() : ''
+
+      const estimatedGasCosts = await estimateTxGasCosts(safeAddress, tx.contractAddress, txData)
+      const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')
+      const formattedGasCosts = formatAmount(gasCostsAsEth)
+
+      if (isCurrent) {
+        setGasCosts(formattedGasCosts)
+      }
+    }
+
+    estimateGas()
+
+    return () => {
+      isCurrent = false
+    }
+  }, [safeAddress, tx.data, tx.contractAddress])
+
+  const submitTx = async (): Promise<void> => {
+    const web3 = getWeb3()
+    const txRecipient = tx.contractAddress
+    const txData = tx.data ? tx.data.trim() : ''
+    const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : '0'
+
+    dispatch(
+      createTransaction({
+        safeAddress,
+        to: txRecipient,
+        valueInWei: txValue,
+        txData,
+        notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
+        enqueueSnackbar,
+        closeSnackbar,
+      } as any),
+    )
+
+    onClose()
+  }
+
+  return (
+    <>
+      <Row align="center" className={classes.heading} grow>
+        <Paragraph className={classes.headingText} noMargin weight="bolder">
+          Send Custom Tx
+        </Paragraph>
+        <Paragraph className={classes.annotation}>2 of 2</Paragraph>
+        <IconButton disableRipple onClick={onClose}>
+          <Close className={classes.closeIcon} />
+        </IconButton>
+      </Row>
+      <Hairline />
+      <Block className={classes.container}>
+        <SafeInfo />
+        <Row margin="md">
+          <Col xs={1}>
+            <img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
+          </Col>
+          <Col center="xs" layout="column" xs={11}>
+            <Hairline />
+          </Col>
+        </Row>
+        <Row margin="xs">
+          <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
+            Recipient
+          </Paragraph>
+        </Row>
+        <Row align="center" margin="md">
+          <Col xs={1}>
+            <Identicon address={tx.contractAddress} diameter={32} />
+          </Col>
+          <Col layout="column" xs={11}>
+            <Block justify="left">
+              <Paragraph noMargin weight="bolder">
+                {tx.contractAddress}
+              </Paragraph>
+              <CopyBtn content={tx.contractAddress} />
+              <EtherscanBtn type="address" value={tx.contractAddress} />
+            </Block>
+          </Col>
+        </Row>
+        <Row margin="xs">
+          <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
+            Value
+          </Paragraph>
+        </Row>
+        <Row align="center" margin="md">
+          <Img alt="Ether" height={28} onError={setImageToPlaceholder} src={getEthAsToken('0').logoUri} />
+          <Paragraph className={classes.value} noMargin size="md">
+            {tx.value || 0}
+            {' ETH'}
+          </Paragraph>
+        </Row>
+        <Row margin="xs">
+          <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
+            Data (hex encoded)
+          </Paragraph>
+        </Row>
+        <Row align="center" margin="md">
+          <Col className={classes.outerData}>
+            <Row className={classes.data} size="md">
+              {tx.data}
+            </Row>
+          </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) ETH in this wallet to fund this confirmation.`}
+          </Paragraph>
+        </Row>
+      </Block>
+      <Hairline />
+      <Row align="center" className={classes.buttonRow}>
+        <Button minWidth={140} onClick={onPrev}>
+          Back
+        </Button>
+        <Button
+          className={classes.submitButton}
+          color="primary"
+          data-testid="submit-tx-btn"
+          minWidth={140}
+          onClick={submitTx}
+          type="submit"
+          variant="contained"
+        >
+          Submit
+        </Button>
+      </Row>
+    </>
+  )
+}
+
+export default ReviewCustomTx
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
@ -0,0 +1,58 @@
+import { border, lg, md, secondaryText, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
+
+export const styles = createStyles({
+  heading: {
+    padding: `${md} ${lg}`,
+    justifyContent: 'flex-start',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  annotation: {
+    letterSpacing: '-1px',
+    color: secondaryText,
+    marginRight: 'auto',
+    marginLeft: '20px',
+  },
+  headingText: {
+    fontSize: lg,
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+  container: {
+    padding: `${md} ${lg}`,
+  },
+  value: {
+    marginLeft: sm,
+  },
+  outerData: {
+    borderRadius: '5px',
+    border: `1px solid ${border}`,
+    padding: '11px',
+    minHeight: '21px',
+  },
+  data: {
+    wordBreak: 'break-all',
+    overflow: 'auto',
+    fontSize: '14px',
+    fontFamily: 'Averta',
+    maxHeight: '100px',
+    letterSpacing: 'normal',
+    fontStretch: 'normal',
+    lineHeight: '1.43',
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+    '& > button': {
+      fontFamily: 'Averta',
+      fontSize: md,
+    },
+  },
+  submitButton: {
+    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+    marginLeft: '15px',
+  },
+})
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
@ -0,0 +1,278 @@
+import IconButton from '@material-ui/core/IconButton'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import Switch from '@material-ui/core/Switch'
+import { makeStyles } from '@material-ui/core/styles'
+import Close from '@material-ui/icons/Close'
+import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
+
+import ArrowDown from '../../assets/arrow-down.svg'
+
+import { styles } from './style'
+
+import QRIcon from 'src/assets/icons/qrcode.svg'
+import CopyBtn from 'src/components/CopyBtn'
+import EtherscanBtn from 'src/components/EtherscanBtn'
+import Identicon from 'src/components/Identicon'
+import ScanQRModal from 'src/components/ScanQRModal'
+import Field from 'src/components/forms/Field'
+import GnoForm from 'src/components/forms/GnoForm'
+import TextField from 'src/components/forms/TextField'
+import TextareaField from 'src/components/forms/TextareaField'
+import { composeValidators, maxValue, mustBeFloat, greaterThan } from 'src/components/forms/validator'
+import Block from 'src/components/layout/Block'
+import Button from 'src/components/layout/Button'
+import ButtonLink from 'src/components/layout/ButtonLink'
+import Col from 'src/components/layout/Col'
+import Hairline from 'src/components/layout/Hairline'
+import Img from 'src/components/layout/Img'
+import Paragraph from 'src/components/layout/Paragraph'
+import Row from 'src/components/layout/Row'
+import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
+import AddressBookInput from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
+import { safeSelector } from 'src/routes/safe/store/selectors'
+import { sm } from 'src/theme/variables'
+
+export interface CreatedTx {
+  contractAddress: string
+  data: string
+  value: string | number
+}
+
+type Props = {
+  initialValues: { contractAddress?: string }
+  onClose: () => void
+  onNext: (tx: CreatedTx, submit: boolean) => void
+  isABI: boolean
+  switchMethod: () => void
+  contractAddress: string
+}
+
+const useStyles = makeStyles(styles)
+
+const SendCustomTx: React.FC<Props> = ({ initialValues, onClose, onNext, contractAddress, switchMethod, isABI }) => {
+  const classes = useStyles()
+  const { ethBalance } = useSelector(safeSelector)
+  const [qrModalOpen, setQrModalOpen] = useState<boolean>(false)
+  const [selectedEntry, setSelectedEntry] = useState<{ address?: string; name?: string } | null>({
+    address: contractAddress || initialValues.contractAddress,
+    name: '',
+  })
+  const [isValidAddress, setIsValidAddress] = useState<boolean>(true)
+
+  const saveForm = async (values) => {
+    await handleSubmit(values, false)
+    switchMethod()
+  }
+
+  const handleSubmit = (values: any, submit = true) => {
+    if (values.data || values.value) {
+      onNext(values, submit)
+    }
+  }
+
+  const openQrModal = () => {
+    setQrModalOpen(true)
+  }
+
+  const closeQrModal = () => {
+    setQrModalOpen(false)
+  }
+
+  const formMutators = {
+    setMax: (args, state, utils) => {
+      utils.changeValue(state, 'value', () => ethBalance)
+    },
+    setRecipient: (args, state, utils) => {
+      utils.changeValue(state, 'contractAddress', () => args[0])
+    },
+  }
+
+  return (
+    <>
+      <Row align="center" className={classes.heading} grow>
+        <Paragraph className={classes.manage} noMargin weight="bolder">
+          Send custom transactions
+        </Paragraph>
+        <Paragraph className={classes.annotation}>1 of 2</Paragraph>
+        <IconButton disableRipple onClick={onClose}>
+          <Close className={classes.closeIcon} />
+        </IconButton>
+      </Row>
+      <Hairline />
+      <GnoForm
+        formMutators={formMutators}
+        initialValues={initialValues}
+        subscription={{ submitting: true, pristine: true, values: true }}
+        onSubmit={handleSubmit}
+      >
+        {(...args) => {
+          const mutators = args[3]
+          const pristine = args[2].pristine
+          let shouldDisableSubmitButton = !isValidAddress
+          if (selectedEntry) {
+            shouldDisableSubmitButton = !selectedEntry.address
+          }
+
+          const handleScan = (value) => {
+            let scannedAddress = value
+
+            if (scannedAddress.startsWith('ethereum:')) {
+              scannedAddress = scannedAddress.replace('ethereum:', '')
+            }
+
+            mutators.setRecipient(scannedAddress)
+            closeQrModal()
+          }
+
+          return (
+            <>
+              <Block className={classes.formContainer}>
+                <SafeInfo />
+                <Row margin="md">
+                  <Col xs={1}>
+                    <img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
+                  </Col>
+                  <Col center="xs" layout="column" xs={11}>
+                    <Hairline />
+                  </Col>
+                </Row>
+                {selectedEntry && selectedEntry.address ? (
+                  <div
+                    onKeyDown={(e) => {
+                      if (e.keyCode !== 9) {
+                        setSelectedEntry(null)
+                      }
+                    }}
+                    role="listbox"
+                    tabIndex={0}
+                  >
+                    <Row margin="xs">
+                      <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
+                        Recipient
+                      </Paragraph>
+                    </Row>
+                    <Row align="center" margin="md">
+                      <Col xs={1}>
+                        <Identicon address={selectedEntry.address} diameter={32} />
+                      </Col>
+                      <Col layout="column" xs={11}>
+                        <Block justify="left">
+                          <Block>
+                            <Paragraph
+                              className={classes.selectAddress}
+                              noMargin
+                              onClick={() => setSelectedEntry(null)}
+                              weight="bolder"
+                            >
+                              {selectedEntry.name}
+                            </Paragraph>
+                            <Paragraph
+                              className={classes.selectAddress}
+                              noMargin
+                              onClick={() => setSelectedEntry(null)}
+                              weight="bolder"
+                            >
+                              {selectedEntry.address}
+                            </Paragraph>
+                          </Block>
+                          <CopyBtn content={selectedEntry.address} />
+                          <EtherscanBtn type="address" value={selectedEntry.address} />
+                        </Block>
+                      </Col>
+                    </Row>
+                  </div>
+                ) : (
+                  <>
+                    <Row margin="md">
+                      <Col xs={11}>
+                        <AddressBookInput
+                          fieldMutator={mutators.setRecipient}
+                          isCustomTx
+                          pristine={pristine}
+                          setIsValidAddress={setIsValidAddress}
+                          setSelectedEntry={setSelectedEntry}
+                        />
+                      </Col>
+                      <Col center="xs" className={classes} middle="xs" xs={1}>
+                        <Img
+                          alt="Scan QR"
+                          className={classes.qrCodeBtn}
+                          height={20}
+                          onClick={() => {
+                            openQrModal()
+                          }}
+                          role="button"
+                          src={QRIcon}
+                        />
+                      </Col>
+                    </Row>
+                  </>
+                )}
+                <Row margin="xs">
+                  <Col between="lg">
+                    <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
+                      Value
+                    </Paragraph>
+                    <ButtonLink onClick={mutators.setMax} weight="bold">
+                      Send max
+                    </ButtonLink>
+                  </Col>
+                </Row>
+                <Row margin="md">
+                  <Col>
+                    <Field
+                      component={TextField}
+                      inputAdornment={{
+                        endAdornment: <InputAdornment position="end">ETH</InputAdornment>,
+                      }}
+                      name="value"
+                      placeholder="Value*"
+                      text="Value*"
+                      type="text"
+                      validate={composeValidators(mustBeFloat, maxValue(ethBalance), greaterThan(0))}
+                    />
+                  </Col>
+                </Row>
+                <Row margin="sm">
+                  <Col>
+                    <TextareaField
+                      name="data"
+                      placeholder="Data (hex encoded)*"
+                      text="Data (hex encoded)*"
+                      type="text"
+                    />
+                  </Col>
+                </Row>
+                <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
+                  Use custom data (hex encoded)
+                  <Switch onChange={() => saveForm(args[2].values)} checked={!isABI} />
+                </Paragraph>
+              </Block>
+              <Hairline />
+              <Row align="center" className={classes.buttonRow}>
+                <Button minWidth={140} onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button
+                  className={classes.submitButton}
+                  color="primary"
+                  data-testid="review-tx-btn"
+                  disabled={shouldDisableSubmitButton}
+                  minWidth={140}
+                  type="submit"
+                  variant="contained"
+                >
+                  Review
+                </Button>
+              </Row>
+              {qrModalOpen && <ScanQRModal isOpen={qrModalOpen} onClose={closeQrModal} onScan={handleScan} />}
+            </>
+          )
+        }}
+      </GnoForm>
+    </>
+  )
+}
+
+export default SendCustomTx
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/style.ts
@ -0,0 +1,51 @@
+import { lg, md } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
+
+export const styles = createStyles({
+  heading: {
+    padding: `${md} ${lg}`,
+    justifyContent: 'flex-start',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  annotation: {
+    letterSpacing: '-1px',
+    color: '#a2a8ba',
+    marginRight: 'auto',
+    marginLeft: '20px',
+  },
+  manage: {
+    fontSize: lg,
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+  qrCodeBtn: {
+    cursor: 'pointer',
+  },
+  formContainer: {
+    padding: `${md} ${lg}`,
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+    '& > button': {
+      fontFamily: 'Averta',
+      fontSize: md,
+    },
+  },
+  submitButton: {
+    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+    marginLeft: '15px',
+  },
+  dataInput: {
+    '& TextField-root-294': {
+      lineHeight: 'auto',
+      border: 'green',
+    },
+  },
+  selectAddress: {
+    cursor: 'pointer',
+  },
+})
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
@ -1,13 +1,14 @@
 import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
 import { useSelector } from 'react-redux'
-
+import Switch from '@material-ui/core/Switch'
 import { styles } from './style'
 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/routes/safe/store/selectors'
+import Paragraph from 'src/components/layout/Paragraph'
 import Buttons from './Buttons'
 import ContractABI from './ContractABI'
 import EthAddressInput from './EthAddressInput'
@ -33,11 +34,20 @@ export interface CreatedTx {
 export interface ContractInteractionProps {
  contractAddress: string
  initialValues: { contractAddress?: string }
+  isABI: boolean
  onClose: () => void
-  onNext: (tx: CreatedTx) => void
+  switchMethod: () => void
+  onNext: (tx: CreatedTx, submit: boolean) => void
 }

-const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }: ContractInteractionProps) => {
+const ContractInteraction: React.FC<ContractInteractionProps> = ({
+  contractAddress,
+  initialValues,
+  onClose,
+  onNext,
+  switchMethod,
+  isABI,
+}) => {
  const classes = useStyles()
  const { address: safeAddress = '' } = useSelector(safeSelector)
  let setCallResults
@ -48,13 +58,21 @@ const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }
    }
  }, [contractAddress, initialValues.contractAddress])

-  const handleSubmit = async ({ contractAddress, selectedMethod, value, ...values }) => {
+  const saveForm = async (values: CreatedTx): Promise<void> => {
+    await handleSubmit(values, false)
+    switchMethod()
+  }
+
+  const handleSubmit = async (
+    { contractAddress, selectedMethod, value, ...values },
+    submit = true,
+  ): Promise<void | any> => {
    if (value || (contractAddress && selectedMethod)) {
      try {
        const txObject = createTxObject(selectedMethod, contractAddress, values)
        const data = txObject.encodeABI()

-        if (isReadMethod(selectedMethod)) {
+        if (isReadMethod(selectedMethod) && submit) {
          const result = await txObject.call({ from: safeAddress })
          setCallResults(result)

@ -62,7 +80,7 @@ const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }
          return
        }

-        onNext({ ...values, contractAddress, data, selectedMethod, value })
+        onNext({ ...values, contractAddress, data, selectedMethod, value }, submit)
      } catch (error) {
        return handleSubmitError(error, values)
      }
@ -78,7 +96,7 @@ const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }
        formMutators={formMutators}
        initialValues={initialValues}
        onSubmit={handleSubmit}
-        subscription={{ submitting: true, pristine: true }}
+        subscription={{ submitting: true, pristine: true, values: true }}
      >
        {(submitting, validating, rest, mutators) => {
          setCallResults = mutators.setCallResults
@ -99,6 +117,10 @@ const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }
                <RenderInputParams />
                <RenderOutputParams />
                <FormErrorMessage />
+                <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
+                  Use custom data (hex encoded)
+                  <Switch checked={!isABI} onChange={() => saveForm(rest.values)} />
+                </Paragraph>
              </Block>
              <Hairline />
              <Buttons onClose={onClose} />
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
@ -17,7 +17,14 @@ import { ScanQRWrapper } from 'src/components/ScanQRModal/ScanQRWrapper'
 import Field from 'src/components/forms/Field'
 import GnoForm from 'src/components/forms/GnoForm'
 import TextField from 'src/components/forms/TextField'
-import { composeValidators, greaterThan, maxValue, mustBeFloat, required } from 'src/components/forms/validator'
+import {
+  composeValidators,
+  greaterThan,
+  maxValue,
+  maxValueCheck,
+  mustBeFloat,
+  required,
+} from 'src/components/forms/validator'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
 import ButtonLink from 'src/components/layout/ButtonLink'
@ -39,7 +46,7 @@ const formMutators = {
    utils.changeValue(state, 'amount', () => args[0])
  },
  onTokenChange: (args, state, utils) => {
-    utils.changeValue(state, 'amount', () => '')
+    utils.changeValue(state, 'amount', () => state.formState.values.amount)
  },
  setRecipient: (args, state, utils) => {
    utils.changeValue(state, 'recipientAddress', () => args[0])
@ -56,6 +63,7 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
    address: recipientAddress || initialValues.recipientAddress,
    name: '',
  })
+
  const [pristine, setPristine] = useState(true)
  const [isValidAddress, setIsValidAddress] = useState(true)

@ -86,7 +94,18 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
        </IconButton>
      </Row>
      <Hairline />
-      <GnoForm formMutators={formMutators} initialValues={initialValues} onSubmit={handleSubmit}>
+      <GnoForm
+        formMutators={formMutators}
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+        validation={(values) => {
+          const selectedTokenRecord = tokens.find((token) => token.address === values?.token)
+
+          return {
+            amount: maxValueCheck(selectedTokenRecord?.balance, values.amount),
+          }
+        }}
+      >
        {(...args) => {
          const formState = args[2]
          const mutators = args[3]
@ -224,11 +243,15 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
                        required,
                        mustBeFloat,
                        greaterThan(0),
-                        maxValue(selectedTokenRecord && selectedTokenRecord.balance),
+                        maxValue(selectedTokenRecord?.balance),
                      )}
                    />
                    <OnChange name="token">
                      {() => {
+                        setSelectedEntry({
+                          name: selectedEntry?.name,
+                          address: selectedEntry?.address,
+                        })
                        mutators.onTokenChange()
                      }}
                    </OnChange>
--- a/src/routes/safe/components/Layout/Header/index.tsx
+++ b/src/routes/safe/components/Layout/Header/index.tsx
@ -38,7 +38,13 @@ const LayoutHeader = (props) => {
            {!granted && <Block className={classes.readonly}>Read Only</Block>}
          </Row>
          <Block className={classes.user} justify="center">
-            <Paragraph className={classes.address} color="disabled" noMargin size="md">
+            <Paragraph
+              className={classes.address}
+              color="disabled"
+              noMargin
+              size="md"
+              data-testid="safe-address-heading"
+            >
              {address}
            </Paragraph>
            <CopyBtn content={address} />
@ -54,6 +60,7 @@ const LayoutHeader = (props) => {
          onClick={() => showSendFunds('')}
          size="small"
          variant="contained"
+          testId="main-send-btn"
        >
          <CallMade
            alt="Send Transaction"
--- a/src/routes/safe/components/Layout/Tabs/index.tsx
+++ b/src/routes/safe/components/Layout/Tabs/index.tsx
@ -10,6 +10,7 @@ import {
  ADDRESS_BOOK_TAB_BTN_TEST_ID,
  BALANCES_TAB_BTN_TEST_ID,
  SETTINGS_TAB_BTN_TEST_ID,
+  APPS_TAB_BTN_TEST_ID,
  TRANSACTIONS_TAB_BTN_TEST_ID,
 } from 'src/routes/safe/components/Layout'
 import SettingsTab from 'src/routes/safe/components/Layout/Tabs/SettingsTab'
@ -105,7 +106,7 @@ const TabsComponent = (props: Props) => {
          selected: classes.tabWrapperSelected,
          wrapper: classes.tabWrapper,
        }}
-        data-testid={TRANSACTIONS_TAB_BTN_TEST_ID}
+        data-testid={APPS_TAB_BTN_TEST_ID}
        label={AppsLabel}
        value={`${match.url}/apps`}
      />
--- a/src/routes/safe/components/Layout/index.tsx
+++ b/src/routes/safe/components/Layout/index.tsx
@ -21,6 +21,7 @@ import { wrapInSuspense } from 'src/utils/wrapInSuspense'

 export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
 export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
+export const APPS_TAB_BTN_TEST_ID = 'apps-tab-btn'
 export const TRANSACTIONS_TAB_BTN_TEST_ID = 'transactions-tab-btn'
 export const ADDRESS_BOOK_TAB_BTN_TEST_ID = 'address-book-tab-btn'
 export const SAFE_VIEW_NAME_HEADING_TEST_ID = 'safe-name-heading'
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/utils.ts
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/utils.ts
@ -18,15 +18,13 @@ export const getTxData = (tx) => {
      const { to } = tx.decodedParams.transfer
      txData.recipient = to
      txData.isTokenTransfer = true
-    }
-    if (tx.isCollectibleTransfer) {
+    } else if (tx.isCollectibleTransfer) {
      const { safeTransferFrom, transfer, transferFrom } = tx.decodedParams
      const { to, value } = safeTransferFrom || transferFrom || transfer
      txData.recipient = to
      txData.tokenId = value
      txData.isCollectibleTransfer = true
-    }
-    if (tx.modifySettingsTx) {
+    } else if (tx.modifySettingsTx) {
      txData.recipient = tx.recipient
      txData.modifySettingsTx = true

@ -50,11 +48,12 @@ export const getTxData = (tx) => {
        txData.removedOwner = oldOwner
        txData.addedOwner = newOwner
      }
-    }
-    if (tx.multiSendTx) {
+    } else if (tx.multiSendTx) {
      txData.recipient = tx.recipient
      txData.data = tx.data
      txData.customTx = true
+    } else {
+      txData.recipient = tx.recipient
    }
  } else if (tx.customTx) {
    txData.recipient = tx.recipient
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@ -35,6 +35,7 @@ export const CreateSafe = ({ provider, size }: any) => (
    size={size || 'medium'}
    to={OPEN_ADDRESS}
    variant="contained"
+    testId="create-new-safe-btn"
  >
    <Img alt="Safe" height={14} src={plus} />
    <div style={buttonStyle}>Create new Safe</div>
@ -50,6 +51,7 @@ export const LoadSafe = ({ provider, size }) => (
    size={size || 'medium'}
    to={LOAD_ADDRESS}
    variant="outlined"
+    testId="load-existing-safe-btn"
  >
    <Img alt="Safe" height={14} src={safe} />
    <div style={buttonStyle}>Load existing Safe</div>
@ -108,7 +110,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
          <Heading align="center" margin="md" tag="h3">
            Get Started by Connecting a Wallet
          </Heading>
-          <ConnectButton minHeight={42} minWidth={240} />
+          <ConnectButton minHeight={42} minWidth={240} data-testid="connect-btn" />
        </Block>
      )}
    </Block>
--- a/yarn.lock
+++ b/yarn.lock