feat(app): added legacy import link and added fetch balances polling (#…

…1361)

* feat(app): added legacy import link and added fetch balances on mount

* chore(app): move updating of balances app-wide

* chore(app): disable lint rule

* chore(auth): adjust help link color

* chore(app): upgrade lockfile to resolve security vulns

* chore(app): bump deps

* chore(app): upgrade lockfile

package.json

@@ -27,13 +27,13 @@
     "classnames": "2.2.6",
     "coingecko-api": "1.0.8",
     "connected-react-router": "5.0.1",
-    "ejs": "3.0.1",
+    "ejs": "3.1.5",
     "electron-context-menu": "0.11.0",
     "electron-is-dev": "0.3.0",
-    "electron-json-storage": "4.1.8",
+    "electron-json-storage": "4.2.0",
     "electron-localshortcut": "3.2.1",
     "electron-updater": "3.2.3",
-    "es6-promisify": "6.0.2",
+    "es6-promisify": "6.1.1",
     "ethereumjs-utils": "5.2.5",
     "file-type": "12.4.2",
     "format-currency": "1.0.0",
@@ -50,7 +50,7 @@
     "react-is": "16.8.6",
     "react-redux": "5.1.1",
     "react-router-dom": "4.3.1",
-    "react-scroll": "1.7.15",
+    "react-scroll": "1.8.1",
     "react-sticky": "6.0.3",
     "recharts": "1.8.5",
     "recompose": "0.30.0",
@@ -111,14 +111,14 @@
     "electron-webpack": "1.13.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.2",
-    "eslint": "6.8.0",
-    "eslint-config-airbnb": "18.0.1",
+    "eslint": "7.7.0",
+    "eslint-config-airbnb": "18.2.0",
     "eslint-config-prettier": "6.9.0",
     "eslint-import-resolver-babel-module": "5.1.0",
     "eslint-plugin-import": "2.19.1",
     "eslint-plugin-jest": "23.2.0",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prettier": "3.1.2",
+    "eslint-plugin-jsx-a11y": "6.3.1",
+    "eslint-plugin-prettier": "3.1.4",
     "eslint-plugin-react": "7.17.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",
@@ -129,17 +129,17 @@
     "npm-run-all": "4.1.5",
     "postcss-loader": "3.0.0",
     "prettier": "1.19.1",
-    "react-hot-loader": "4.12.18",
+    "react-hot-loader": "4.12.21",
     "react-router-test-context": "0.1.0",
     "redux-devtools-extension": "2.13.8",
     "redux-mock-store": "1.5.4",
     "rimraf": "3.0.2",
     "sass-loader": "7.3.1",
     "standard-version": "8.0.1",
     "style-loader": "0.23.1",
-    "stylelint": "12.0.1",
-    "stylelint-config-recommended-scss": "4.1.0",
-    "stylelint-scss": "3.13.0",
+    "stylelint": "13.6.1",
+    "stylelint-config-recommended-scss": "4.2.0",
+    "stylelint-scss": "3.18.0",
     "svg-react-loader": "0.4.6",
     "wait-on": "3.3.0",
     "webpack": "3.12.0",

src/renderer/account/components/Portfolio/Portfolio.js

@@ -1,24 +1,12 @@
 import React from 'react';
-import { func, string } from 'prop-types';
 
 import Page from 'shared/components/Page';
-import blockShape from 'shared/shapes/blockShape';
 
 import AccountPanel from './AccountPanel';
 import TransactionsPanel from './TransactionsPanel';
 import styles from './Portfolio.scss';
 
 export default class Portfolio extends React.PureComponent {
-  componentDidUpdate(prevProps) {
-    if (prevProps.block.index < this.props.block.index) {
-      this.props.balancesWithPrices({
-        currency: this.props.currency,
-        net: this.props.net,
-        address: this.props.address
-      });
-    }
-  }
-
   render() {
     return (
       <div className={styles.account}>
@@ -31,12 +19,6 @@ export default class Portfolio extends React.PureComponent {
   }
 }
 
-Portfolio.propTypes = {
-  block: blockShape.isRequired,
-  balancesWithPrices: func.isRequired,
-  currency: string.isRequired,
-  net: string.isRequired,
-  address: string.isRequired
-};
+Portfolio.propTypes = {};
 
 Portfolio.defaultProps = {};

src/renderer/auth/components/AuthPanel/AuthPanel.js

@@ -1,10 +1,13 @@
+/* eslint-disable react/no-unescaped-entities */
 /* eslint-disable consistent-return */
 
 import React from 'react';
 import classNames from 'classnames';
 import { string, node, bool, func } from 'prop-types';
 
+import { EXTERNAL } from 'browser/values/browserValues';
 import SidePanel from 'shared/components/SidePanel';
+import TabLink from 'root/components/AuthenticatedLayout/TabLink';
 import CloseIcon from 'shared/images/icons/close-modal.svg';
 
 import styles from './AuthPanel.scss';
@@ -21,13 +24,30 @@ export default function AuthPanel({
   footer,
   footerText
 }) {
+  const handleOnLink = () => {
+    onCancel();
+  };
+
   return (
     <div className={classNames(styles.authPanel, className)}>
       {sidePanel && <SidePanel step={step} title={sidePanelTitle} text={sidePanelText} />}
 
       <div className={styles.content}>
         <CloseIcon className={styles.closeIcon} onClick={onCancel} />
         {children}
+        {step === '1' && (
+          <div onClick={handleOnLink} role="button" tabIndex={0}>
+            <TabLink
+              className={styles.returningUser}
+              id="blog"
+              styling={false}
+              type={EXTERNAL}
+              target="https://docs.nos.io/docs/nos-client/import-neo-wallet.html"
+            >
+              Can't find your old account? Click here to learn how to import it!
+            </TabLink>
+          </div>
+        )}
         {footer && (
           <div className={styles.footer} onClick={redirect} role="button" tabIndex={0}>
             <div className={styles.text}>{footerText}</div>

src/renderer/auth/components/AuthPanel/AuthPanel.scss

@@ -10,6 +10,23 @@
       align-self: flex-end;
       cursor: pointer;
     }
+
+    .returningUser {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+
+      cursor: pointer;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 12px;
+      user-select: none;
+      color: #ffad00;
+
+      &:hover {
+        color: #d8d400;
+      }
+    }
   }
 
   .footer {

src/renderer/root/components/AuthenticatedLayout/TabLink/TabLink.js

@@ -15,7 +15,8 @@ export default class TabLink extends React.PureComponent {
     active: bool,
     disabled: bool,
     children: node,
-    openTab: func
+    openTab: func,
+    styling: bool
   };
 
   static defaultProps = {
@@ -25,11 +26,12 @@ export default class TabLink extends React.PureComponent {
     active: false,
     disabled: false,
     children: null,
-    openTab: noop
+    openTab: noop,
+    styling: true
   };
 
   render() {
-    const className = classNames(this.props.className, styles.tabLink, {
+    const className = classNames(this.props.className, this.props.styling ? styles.tabLink : null, {
       [styles.active]: this.props.active,
       [styles.disabled]: this.props.disabled
     });

src/renderer/root/components/AuthenticatedLayout/index.js

@@ -6,9 +6,12 @@ import { isEqual } from 'lodash';
 import authActions from 'auth/actions/authActions';
 import blockActions from 'shared/actions/blockActions';
 import withAuthState from 'auth/hocs/withAuthState';
+import withAuthData from 'shared/hocs/withAuthData';
 import withNetworkData from 'shared/hocs/withNetworkData';
 import withProgressChange from 'shared/hocs/withProgressChange';
 import notifyWebviews from 'shared/util/notifyWebviews';
+import balanceWithPricesActions from 'account/actions/balanceWithPricesActions';
+import currencyActions from 'settings/actions/currencyActions';
 
 import AuthenticatedLayout from './AuthenticatedLayout';
 
@@ -20,27 +23,43 @@ const mapStateToProps = (state) => {
 };
 
 const mapAuthDataToProps = (props) => ({
-  address: (props && props.address) || undefined
+  address: (props && props.auth && props.auth.wallet && props.auth.wallet.address) || undefined
 });
 
+const mapCurrencyDataToProps = (currency) => ({ currency });
+
 const mapBlockActionsToProps = (actions, props) => ({
   getLastBlock: () => actions.call({ net: props.currentNetwork })
 });
 
+const mapbalanceWithPricesActionsToProps = (actions) => ({
+  balancesWithPrices: (data) => actions.call(data)
+});
+
 const mapBlockDataToProps = (block) => ({ block });
 
 export default compose(
   connect(mapStateToProps),
   withAuthState(),
+  withData(currencyActions, mapCurrencyDataToProps),
+  withAuthData(),
   withNetworkData('currentNetwork'),
   withActions(blockActions, mapBlockActionsToProps),
+  withActions(balanceWithPricesActions, mapbalanceWithPricesActionsToProps),
 
   // Whenever a new block is received, notify all dApps & update account balances.
   withData(authActions, mapAuthDataToProps),
   withData(blockActions, mapBlockDataToProps),
   withProgressChange(blockActions, LOADED, (state, props, prevProps) => {
     if (!isEqual(props.block, prevProps.block)) {
       notifyWebviews('event', 'block', props.block);
+      if (props.authenticated) {
+        props.balancesWithPrices({
+          currency: props.currency,
+          net: props.currentNetwork,
+          address: props.auth.wallet.address
+        });
+      }
     }
   })
 )(AuthenticatedLayout);