Merge branch 'development' into 536-notifications-status-labels-sync

# Conflicts:
#	yarn.lock

package.json

@@ -53,6 +53,7 @@
   "build": {
     "appId": "io.gnosis.safe.macos",
     "afterSign": "scripts/notarize.js",
+    "extends": null,
     "productName": "Safe Multisig",
     "asar": true,
     "publish": [
@@ -85,7 +86,6 @@
       "!migrations${/*}",
       "!flow-typed${/*}",
       "!apps${/*}",
-      "!build${/*}",
       "!out${/*}",
       "!.editorconfig",
       "!.gitignore",
@@ -159,8 +159,9 @@
     "async-sema": "^3.1.0",
     "axios": "0.19.2",
     "bignumber.js": "9.0.0",
-    "bnc-onboard": "1.9.0",
+    "bnc-onboard": "1.9.1",
     "classnames": "^2.2.6",
+    "concurrently": "^5.2.0",
     "connected-react-router": "6.8.0",
     "currency-flags": "2.1.2",
     "date-fns": "2.13.0",

public/electron.js

@@ -1,14 +1,12 @@
 const electron = require("electron");
-const  express = require('express');
+const express = require('express');
 const open = require('open');
 const log = require('electron-log');
 const fs = require('fs');
-const dialog = electron.dialog;
 const Menu = electron.Menu;
 const https = require('https');
 const autoUpdater = require('./auto-updater');
 
-const url = require('url');
 const app = electron.app;
 const session = electron.session;
 const BrowserWindow = electron.BrowserWindow;
@@ -164,4 +162,4 @@ app.on("activate", () => {
   if (mainWindow === null) {
     createWindow();
   }
-});
+});

scripts/notarize.js

@@ -0,0 +1,41 @@
+const fs = require("fs");
+const path = require("path");
+const { notarize } = require("electron-notarize");
+const envConfig = require('dotenv').config({path:path.join(__dirname, '../.env')});
+
+Object.entries(envConfig.parsed || {}).forEach(([key, value]) => {
+  process.env[key] = value;
+});
+
+
+module.exports = async function (params) {
+
+    // Only notarize the app on Mac OS only.
+  if (process.platform !== "darwin") {
+    return;
+  }
+  // Same appId in electron-builder.
+  let appId = "io.gnosis.safe.macos";
+  let appPath = path.join(
+    params.appOutDir,
+    `${params.packager.appInfo.productFilename}.app`
+  );
+  if (!fs.existsSync(appPath)) {
+    throw new Error(`Cannot find application at: ${appPath}`);
+  }
+
+  console.log(`Notarizing ${appId} found at ${appPath}`);
+
+  try {
+    await notarize({
+      appBundleId: appId,
+      appPath: appPath,
+      appleId: process.env.APPLEID,
+      appleIdPassword: process.env.APPLEIDPASS,
+    });
+  } catch (error) {
+    console.error(error);
+  }
+
+  console.log(`Done notarizing ${appId}`);
+};

src/components/ConnectButton/index.tsx

@@ -50,9 +50,9 @@ export const onboard = Onboard({
   walletCheck: [
     { checkName: 'derivationPath' },
     { checkName: 'connect' },
-    transactionDataCheck(),
-    { checkName: 'network' },
     { checkName: 'accounts' },
+    { checkName: 'network' },
+    transactionDataCheck(),
   ],
 })
 

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

@@ -10,15 +10,16 @@ import Modal from 'src/components/Modal'
 import ButtonLink from 'src/components/layout/ButtonLink'
 import Col from 'src/components/layout/Col'
 import Divider from 'src/components/layout/Divider'
-import Link from 'src/components/layout/Link'
+
 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 { 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'
+import { Route, Switch, NavLink, Redirect } from 'react-router-dom'
 
 const Collectibles = React.lazy(() => import('src/routes/safe/components/Balances/Collectibles'))
 const Coins = React.lazy(() => import('src/routes/safe/components/Balances/Coins'))
@@ -28,15 +29,12 @@ export const BALANCE_ROW_TEST_ID = 'balance-row'
 
 const INITIAL_STATE = {
   erc721Enabled: false,
-  subMenuOptions: [],
   showToken: false,
   showManageCollectibleModal: false,
   sendFunds: {
     isOpen: false,
     selectedToken: undefined,
   },
-  showCoins: true,
-  showCollectibles: false,
   showReceive: false,
 }
 
@@ -52,36 +50,13 @@ const Balances = (props) => {
   useFetchTokens()
 
   useEffect(() => {
-    const showCollectibles = COLLECTIBLES_LOCATION_REGEX.test(history.location.pathname)
-    const showCoins = COINS_LOCATION_REGEX.test(history.location.pathname)
-    const subMenuOptions = [{ enabled: showCoins, legend: 'Coins', url: `${SAFELIST_ADDRESS}/${address}/balances` }]
-
-    if (!showCollectibles && !showCoins) {
-      history.replace(`${SAFELIST_ADDRESS}/${address}/balances`)
-    }
-
     const erc721Enabled = featuresEnabled && featuresEnabled.includes('ERC721')
 
-    if (erc721Enabled) {
-      subMenuOptions.push({
-        enabled: showCollectibles,
-        legend: 'Collectibles',
-        url: `${SAFELIST_ADDRESS}/${address}/balances/collectibles`,
-      })
-    } else {
-      if (showCollectibles) {
-        history.replace(subMenuOptions[0].url)
-      }
-    }
-
     setState((prevState) => ({
       ...prevState,
-      showCoins,
-      showCollectibles,
       erc721Enabled,
-      subMenuOptions,
     }))
-  }, [featuresEnabled, address])
+  }, [featuresEnabled])
 
   const onShow = (action) => {
     setState((prevState) => ({ ...prevState, [`show${action}`]: true }))
@@ -121,65 +96,118 @@ const Balances = (props) => {
     receiveModal,
     tokenControls,
   } = props.classes
-  const {
+  const { erc721Enabled, sendFunds, showManageCollectibleModal, showReceive, showToken } = state
-    erc721Enabled,
-    sendFunds,
-    showCoins,
-    showCollectibles,
-    showManageCollectibleModal,
-    showReceive,
-    showToken,
-    subMenuOptions,
-  } = state
 
   return (
     <>
       <Row align="center" className={controls}>
         <Col className={assetTabs} sm={6} start="sm" xs={12}>
-          {subMenuOptions.length > 1 &&
+          <NavLink
-            subMenuOptions.map(({ enabled, legend, url }, index) => (
+            to={`${SAFELIST_ADDRESS}/${address}/balances`}
-              <React.Fragment key={`legend-${index}`}>
+            activeClassName={assetTabActive}
-                {index > 0 && <Divider className={assetDivider} />}
+            className={assetTab}
-                <Link
+            data-testid={'coins-assets-btn'}
-                  className={enabled ? assetTabActive : assetTab}
+            exact
-                  data-testid={`${legend.toLowerCase()}'-assets-btn'`}
-                  size="md"
-                  to={url}
-                  weight={enabled ? 'bold' : 'regular'}
-                >
-                  {legend}
-                </Link>
-              </React.Fragment>
-            ))}
-        </Col>
-        <Col className={tokenControls} end="sm" sm={6} xs={12}>
-          {showCoins && <CurrencyDropdown />}
-          <ButtonLink
-            className={manageTokensButton}
-            onClick={erc721Enabled && showCollectibles ? () => onShow('ManageCollectibleModal') : () => onShow('Token')}
-            size="lg"
-            testId="manage-tokens-btn"
           >
-            Manage List
+            Coins
-          </ButtonLink>
+          </NavLink>
-          <Modal
+          {erc721Enabled ? (
-            description={
+            <>
-              erc721Enabled ? 'Enable and disables assets to be listed' : 'Enable and disable tokens to be listed'
+              <Divider className={assetDivider} />
-            }
+              <NavLink
-            handleClose={showManageCollectibleModal ? () => onHide('ManageCollectibleModal') : () => onHide('Token')}
+                to={`${SAFELIST_ADDRESS}/${address}/balances/collectibles`}
-            open={showToken || showManageCollectibleModal}
+                activeClassName={assetTabActive}
-            title="Manage List"
+                className={assetTab}
-          >
+                data-testid={'collectibles-assets-btn'}
-            <Tokens
+                exact
-              modalScreen={showManageCollectibleModal ? 'assetsList' : 'tokenList'}
+              >
-              onClose={showManageCollectibleModal ? () => onHide('ManageCollectibleModal') : () => onHide('Token')}
+                Collectibles
-              safeAddress={address}
+              </NavLink>
-            />
+            </>
-          </Modal>
+          ) : null}
         </Col>
+        <Switch>
+          <Route
+            path={`${SAFELIST_ADDRESS}/${address}/balances/collectibles`}
+            exact
+            render={() => {
+              return !erc721Enabled ? (
+                <Redirect to={`${SAFELIST_ADDRESS}/${address}/balances`} />
+              ) : (
+                <Col className={tokenControls} end="sm" sm={6} xs={12}>
+                  <ButtonLink
+                    className={manageTokensButton}
+                    onClick={() => onShow('ManageCollectibleModal')}
+                    size="lg"
+                    testId="manage-tokens-btn"
+                  >
+                    Manage List
+                  </ButtonLink>
+                  <Modal
+                    description={'Enable and disable tokens to be listed'}
+                    handleClose={() => onHide('ManageCollectibleModal')}
+                    open={showManageCollectibleModal}
+                    title="Manage List"
+                  >
+                    <Tokens
+                      modalScreen={'assetsList'}
+                      onClose={() => onHide('ManageCollectibleModal')}
+                      safeAddress={address}
+                    />
+                  </Modal>
+                </Col>
+              )
+            }}
+          />
+          <Route
+            path={`${SAFELIST_ADDRESS}/${address}/balances`}
+            exact
+            render={() => {
+              return (
+                <>
+                  <Col className={tokenControls} end="sm" sm={6} xs={12}>
+                    <CurrencyDropdown />
+                    <ButtonLink
+                      className={manageTokensButton}
+                      onClick={() => onShow('Token')}
+                      size="lg"
+                      testId="manage-tokens-btn"
+                    >
+                      Manage List
+                    </ButtonLink>
+                    <Modal
+                      description={'Enable and disable tokens to be listed'}
+                      handleClose={() => onHide('Token')}
+                      open={showToken}
+                      title="Manage List"
+                    >
+                      <Tokens modalScreen={'tokenList'} onClose={() => onHide('Token')} safeAddress={address} />
+                    </Modal>
+                  </Col>
+                </>
+              )
+            }}
+          />
+        </Switch>
       </Row>
-      {showCoins && wrapInSuspense(<Coins showReceiveFunds={() => onShow('Receive')} showSendFunds={showSendFunds} />)}
+      <Switch>
-      {erc721Enabled && showCollectibles && wrapInSuspense(<Collectibles />)}
+        <Route
+          path={`${SAFELIST_ADDRESS}/${address}/balances/collectibles`}
+          exact
+          render={() => {
+            if (erc721Enabled) {
+              return wrapInSuspense(<Collectibles />)
+            }
+            return null
+          }}
+        />
+        <Route
+          path={`${SAFELIST_ADDRESS}/${address}/balances`}
+          render={() => {
+            return wrapInSuspense(<Coins showReceiveFunds={() => onShow('Receive')} showSendFunds={showSendFunds} />)
+          }}
+        />
+      </Switch>
       <SendModal
         activeScreenType="sendFunds"
         isOpen={sendFunds.isOpen}

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

@@ -6,7 +6,7 @@ import MenuItem from '@material-ui/core/MenuItem'
 import { MuiThemeProvider } from '@material-ui/core/styles'
 import SearchIcon from '@material-ui/icons/Search'
 import classNames from 'classnames'
-import style from 'currency-flags/dist/currency-flags.min.css'
+import 'currency-flags/dist/currency-flags.min.css'
 import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -99,9 +99,9 @@ const CurrencyDropdown = () => {
                   <div
                     className={classNames(
                       classes.localFlag,
-                      style['currency-flag'],
+                      'currency-flag',
-                      style['currency-flag-lg'],
+                      'currency-flag-lg',
-                      style[`currency-flag-${currencyName.toLowerCase()}`],
+                      `currency-flag-${currencyName.toLowerCase()}`,
                     )}
                   />
                 </ListItemIcon>