Merge with develop

.env.example

@@ -29,4 +29,3 @@ REACT_APP_APP_VERSION=$npm_package_version
 
 # For Apps
 REACT_APP_GNOSIS_APPS_URL=https://safe-apps.staging.gnosisdev.com
-REACT_APP_APPS_DISABLED=false

package.json

@@ -18,6 +18,7 @@
   "main": "public/electron.js",
   "postinstall": "electron-builder install-app-deps",
   "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "build-desktop": "cross-env REACT_APP_BUILD_FOR_DESKTOP=true REACT_APP_ENV=production yarn build-mainnet",
     "build-mainnet": "cross-env REACT_APP_NETWORK=mainnet yarn build",
     "build": "REACT_APP_APP_VERSION=$npm_package_version react-app-rewired --max-old-space-size=8192 build",
@@ -155,43 +156,35 @@
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "4.0.0-alpha.39",
     "@openzeppelin/contracts": "3.0.1",
-    "@welldone-software/why-did-you-render": "4.2.1",
     "async-sema": "^3.1.0",
     "axios": "0.19.2",
     "bignumber.js": "9.0.0",
     "bnc-onboard": "1.9.0",
-    "connected-react-router": "6.8.0",
-    "cross-env": "^7.0.2",
+    "classnames": "^2.2.6",
+    "connected-react-router": "6.8.0",    
     "currency-flags": "2.1.2",
-    "date-fns": "2.13.0",
-    "dotenv": "^8.2.0",
+    "date-fns": "2.13.0",    
     "electron-is-dev": "^1.1.0",
     "electron-log": "4.1.2",
     "electron-updater": "4.3.1",
     "ethereum-ens": "0.8.0",
     "express": "^4.17.1",
-    "final-form": "4.19.1",
     "final-form-calculate": "^1.3.1",
+    "final-form": "4.19.1",
     "history": "4.10.1",
     "immortal-db": "^1.0.2",
     "immutable": "^4.0.0-rc.9",
-    "install": "^0.13.0",
-    "js-cookie": "^2.2.1",
-    "lint-staged": "10.2.2",
+    "js-cookie": "^2.2.1",    
     "lodash.memoize": "^4.1.2",
     "material-ui-search-bar": "^1.0.0-beta.13",
     "notistack": "https://github.com/gnosis/notistack.git#v0.9.4",
-    "npm": "6.14.5",
     "open": "^7.0.3",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
     "polished": "3.6.3",
     "qrcode.react": "1.0.0",
     "query-string": "6.12.1",
-    "react": "16.13.1",
-    "react-dev-utils": "10.2.1",
     "react-dom": "16.13.1",
-    "react-final-form": "6.4.0",
     "react-final-form-listeners": "^1.0.2",
+    "react-final-form": "6.4.0",
     "react-ga": "^2.7.0",
     "react-hot-loader": "4.12.21",
     "react-qr-reader": "^2.2.1",
@@ -199,15 +192,15 @@
     "react-router-dom": "5.2.0",
     "react-scripts": "^3.4.1",
     "react-window": "^1.8.5",
+    "react": "16.13.1",
     "recompose": "^0.30.0",
-    "redux": "4.0.5",
     "redux-actions": "^2.6.5",
     "redux-thunk": "^2.3.0",
+    "redux": "4.0.5",
     "reselect": "^4.0.0",
     "semver": "7.3.2",
     "styled-components": "^5.0.1",
-    "truffle-contract": "4.0.31",
-    "wait-on": "5.0.0",
+    "truffle-contract": "4.0.31",    
     "web3": "1.2.7"
   },
   "devDependencies": {
@@ -216,38 +209,32 @@
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.11.0",
-    "@types/react": "^16.9.32",
     "@types/react-dom": "^16.9.6",
+    "@types/react": "^16.9.32",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
-    "autoprefixer": "9.7.6",
-    "classnames": "^2.2.6",
-    "concurrently": "4.1.2",
-    "css-loader": "3.5.2",
-    "detect-port": "^1.3.0",
+    "@typescript-eslint/parser": "^2.34.0",    
+    "autoprefixer": "9.7.6",        
+    "cross-env": "^7.0.2",
     "dotenv-expand": "^5.1.0",
-    "electron": "7.1.8",
+    "dotenv": "^8.2.0",
     "electron-builder": "22.2.0",
     "electron-notarize": "^0.2.1",
-    "eslint": "^6.8.0",
+    "electron": "7.1.8",
     "eslint-config-prettier": "6.11.0",
     "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-sort-destructure-keys": "1.3.4",
+    "eslint": "^6.8.0",
     "ethereumjs-abi": "0.6.8",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "fs-extra": "9.0.0",
-    "html-loader": "1.1.0",
     "husky": "^4.2.2",
-    "json-loader": "^0.5.7",
+    "lint-staged": "10.2.2",
     "node-sass": "^4.14.1",
     "prettier": "2.0.5",
     "react-app-rewired": "^2.1.6",
-    "run-with-testrpc": "0.3.1",
     "truffle": "5.1.23",
-    "truffle-solidity-loader": "0.1.32",
-    "typescript": "~3.7.2"
+    "typescript": "~3.7.2"  ,
+    "wait-on": "5.0.0" 
   }
 }

src/components/Root/index.tsx

@@ -2,7 +2,6 @@ import { theme as styledTheme } from '@gnosis.pm/safe-react-components'
 import { MuiThemeProvider } from '@material-ui/core/styles'
 import { ConnectedRouter } from 'connected-react-router'
 import React from 'react'
-import { hot } from 'react-hot-loader/root'
 import { Provider } from 'react-redux'
 import { ThemeProvider } from 'styled-components'
 
@@ -29,4 +28,4 @@ const Root = () => (
   </ThemeProvider>
 )
 
-export default hot(Root)
+export default Root

src/components/layout/Col/index.module.scss

@@ -1,4 +1,3 @@
-// @ts-nocheck
 @import 'src/theme/variables.scss';
 
 .col {
@@ -185,6 +184,11 @@
   }
 }
 
+@media only screen and (min-width: #{$screenXs}px) {
+  @include col(xs);
+  @include autoWidth(xs);
+}
+
 @media only screen and (min-width: #{$screenSm}px) {
   @include col(sm);
   @include autoWidth(sm);
@@ -200,6 +204,10 @@
   @include autoWidth(lg);
 }
 
+@media only screen and (min-width: #{$screenXs}px) {
+  @include row(Xs);
+}
+
 @media only screen and (min-width: #{$screenSm}px) {
   @include row(Sm);
 }

src/index.tsx

@@ -11,12 +11,6 @@ import { store } from 'src/store'
 
 BigNumber.set({ EXPONENTIAL_AT: [-7, 255] })
 
-if (process.env.NODE_ENV !== 'production') {
-  // eslint-disable-next-line
-  const whyDidYouRender = require('@welldone-software/why-did-you-render')
-  whyDidYouRender(React)
-}
-
 store.dispatch(loadActiveTokens())
 store.dispatch(loadSafesFromStorage())
 store.dispatch(loadDefaultSafe())

src/routes/safe/components/Balances/index.tsx

@@ -15,10 +15,10 @@ import Row from 'src/components/layout/Row'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import SendModal from 'src/routes/safe/components/Balances/SendModal'
 import CurrencyDropdown from 'src/routes/safe/components/CurrencyDropdown'
-import { useFetchTokens } from 'src/routes/safe/container/hooks/useFetchTokens'
 import { safeFeaturesEnabledSelector, safeParamAddressFromStateSelector } from 'src/routes/safe/store/selectors'
 import { history } from 'src/store/index'
 import { wrapInSuspense } from 'src/utils/wrapInSuspense'
+import { useFetchTokens } from '../../container/Hooks/useFetchTokens'
 const Collectibles = React.lazy(() => import('src/routes/safe/components/Balances/Collectibles'))
 const Coins = React.lazy(() => import('src/routes/safe/components/Balances/Coins'))
 

src/routes/safe/components/Layout/Tabs/index.tsx

@@ -100,17 +100,15 @@ const TabsComponent = (props: Props) => {
         label={TransactionsLabel}
         value={`${match.url}/transactions`}
       />
-      {process.env.REACT_APP_APPS_DISABLED !== 'true' && (
-        <Tab
-          classes={{
-            selected: classes.tabWrapperSelected,
-            wrapper: classes.tabWrapper,
-          }}
-          data-testid={TRANSACTIONS_TAB_BTN_TEST_ID}
-          label={AppsLabel}
-          value={`${match.url}/apps`}
-        />
-      )}
+      <Tab
+        classes={{
+          selected: classes.tabWrapperSelected,
+          wrapper: classes.tabWrapper,
+        }}
+        data-testid={TRANSACTIONS_TAB_BTN_TEST_ID}
+        label={AppsLabel}
+        value={`${match.url}/apps`}
+      />
       <Tab
         classes={{
           selected: classes.tabWrapperSelected,

src/routes/safe/components/Layout/index.tsx

@@ -89,13 +89,11 @@ const Layout = (props: Props) => {
       <Switch>
         <Route exact path={`${match.path}/balances/:assetType?`} render={() => wrapInSuspense(<Balances />, null)} />
         <Route exact path={`${match.path}/transactions`} render={() => wrapInSuspense(<TxsTable />, null)} />
-        {process.env.REACT_APP_APPS_DISABLED !== 'true' && (
-          <Route
-            exact
-            path={`${match.path}/apps`}
-            render={() => wrapInSuspense(<Apps closeModal={closeGenericModal} openModal={openGenericModal} />, null)}
-          />
-        )}
+        <Route
+          exact
+          path={`${match.path}/apps`}
+          render={() => wrapInSuspense(<Apps closeModal={closeGenericModal} openModal={openGenericModal} />, null)}
+        />
         <Route exact path={`${match.path}/settings`} render={() => wrapInSuspense(<Settings />, null)} />
         <Route exact path={`${match.path}/address-book`} render={() => wrapInSuspense(<AddressBookTable />, null)} />
         <Redirect to={`${match.path}/balances`} />

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.tsx

@@ -135,22 +135,14 @@ const SettingsDescription = ({ action, addedOwner, newThreshold, removedOwner })
   )
 }
 
-const CustomDescription = ({ amount = 0, classes, data, recipient }: any) => {
+const TxData = (props) => {
+  const { classes, data } = props
   const [showTxData, setShowTxData] = useState(false)
-  const recipientName = useSelector((state) => getNameFromAddressBook(state, recipient))
+  const showExpandBtn = data.length > 20
   return (
-    <>
-      <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
-        <Bold>Send {amount} to:</Bold>
-        {recipientName ? (
-          <OwnerAddressTableCell address={recipient} knownAddress showLinks userName={recipientName} />
-        ) : (
-          <EtherscanLink knownAddress={false} type="address" value={recipient} />
-        )}
-      </Block>
-      <Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
-        <Bold>Data (hex encoded):</Bold>
-        <Paragraph className={classes.txDataParagraph} noMargin size="md">
+    <Paragraph className={classes.txDataParagraph} noMargin size="md">
+      {showExpandBtn ? (
+        <>
           {showTxData ? (
             <>
               {data}{' '}
@@ -178,7 +170,29 @@ const CustomDescription = ({ amount = 0, classes, data, recipient }: any) => {
               </LinkWithRef>
             </>
           )}
-        </Paragraph>
+        </>
+      ) : (
+        data
+      )}
+    </Paragraph>
+  )
+}
+
+const CustomDescription = ({ amount = 0, classes, data, recipient }: any) => {
+  const recipientName = useSelector((state) => getNameFromAddressBook(state, recipient))
+  return (
+    <>
+      <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
+        <Bold>Send {amount} to:</Bold>
+        {recipientName ? (
+          <OwnerAddressTableCell address={recipient} knownAddress showLinks userName={recipientName} />
+        ) : (
+          <EtherscanLink knownAddress={false} type="address" value={recipient} />
+        )}
+      </Block>
+      <Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
+        <Bold>Data (hex encoded):</Bold>
+        <TxData classes={classes} data={data} />
       </Block>
     </>
   )

src/routes/safe/components/Transactions/TxsTable/columns.tsx

@@ -1,5 +1,7 @@
 import { BigNumber } from 'bignumber.js'
-import { format, getTime, parseISO } from 'date-fns'
+import format from 'date-fns/format'
+import getTime from 'date-fns/getTime'
+import parseISO from 'date-fns/parseISO'
 import { List, Map } from 'immutable'
 import React from 'react'
 

src/routes/safe/container/index.tsx

@@ -1,76 +0,0 @@
-import * as React from 'react'
-import { useState } from 'react'
-import { useSelector } from 'react-redux'
-
-import Page from 'src/components/layout/Page'
-
-import Layout from 'src/routes/safe/components/Layout'
-import { useCheckForUpdates } from 'src/routes/safe/container/hooks/useCheckForUpdates'
-import { useLoadSafe } from 'src/routes/safe/container/hooks/useLoadSafe'
-import { safeParamAddressFromStateSelector } from 'src/routes/safe/store/selectors'
-
-const INITIAL_STATE = {
-  sendFunds: {
-    isOpen: false,
-    selectedToken: undefined,
-  },
-  showReceive: false,
-}
-
-const SafeView = () => {
-  const [state, setState] = useState(INITIAL_STATE)
-  const safeAddress = useSelector(safeParamAddressFromStateSelector)
-
-  useLoadSafe(safeAddress)
-  useCheckForUpdates()
-
-  const onShow = (action) => () => {
-    setState((prevState) => ({
-      ...prevState,
-      [`show${action}`]: true,
-    }))
-  }
-
-  const onHide = (action) => () => {
-    setState((prevState) => ({
-      ...prevState,
-      [`show${action}`]: false,
-    }))
-  }
-
-  const showSendFunds = (token) => {
-    setState((prevState) => ({
-      ...prevState,
-      sendFunds: {
-        isOpen: true,
-        selectedToken: token,
-      },
-    }))
-  }
-
-  const hideSendFunds = () => {
-    setState((prevState) => ({
-      ...prevState,
-      sendFunds: {
-        isOpen: false,
-        selectedToken: undefined,
-      },
-    }))
-  }
-  const { sendFunds, showReceive } = state
-
-  return (
-    <Page>
-      <Layout
-        hideSendFunds={hideSendFunds}
-        onHide={onHide}
-        onShow={onShow}
-        sendFunds={sendFunds}
-        showReceive={showReceive}
-        showSendFunds={showSendFunds}
-      />
-    </Page>
-  )
-}
-
-export default SafeView

src/routes/safe/store/middleware/notificationsMiddleware.ts

@@ -152,7 +152,11 @@ const notificationsMiddleware = (store) => (next) => async (action) => {
       }
       case ADD_SAFE: {
         const state = store.getState()
-        const currentSafeAddress = safeParamAddressFromStateSelector(state)
+        const { safe } = action.payload
+        const currentSafeAddress = safeParamAddressFromStateSelector(state) || safe.address
+        if (!currentSafeAddress) {
+          break
+        }
         const isUserOwner = grantedSelector(state)
         const { needUpdate } = await getSafeVersionInfo(currentSafeAddress)