Migrate account switcher to a page - Closes #530, #338

i18n/locales/en/common.json

@@ -153,8 +153,6 @@
   "Redo": "Redo",
   "Register": "Register",
   "Register 2nd passphrase": "Register 2nd passphrase",
-  "Register Second Passphrase": "Register Second Passphrase",
-  "Register as delegate": "Register as delegate",
   "Reload": "Reload",
   "Remove": "Remove",
   "Remove vote from": "Remove vote from",
@@ -220,7 +218,6 @@
   "Username": "Username",
   "Version": "Version",
   "View": "View",
-  "Vote for delegates": "Vote for delegates",
   "Vote_noun": "Vote",
   "Vote_verb": "Vote",
   "Voted": "Voted",

src/components/accountVisual/index.js

@@ -2,6 +2,7 @@ import BigNumber from 'bignumber.js';
 import React from 'react';
 import sha256 from 'js-sha256';
 import { Gradients, gradientSchemes } from './gradients';
+import generateUniqueId from './../../utils/generateUniqueId';
 import breakpoints from './../../constants/breakpoints';
 import styles from './accountVisual.css';
 
@@ -184,6 +185,10 @@ class AccountVisual extends React.Component {
     this.setState({ isSBreakpoint: window.innerWidth <= breakpoints.s });
   }
 
+  componentWillMount() {
+    this.uniqueSvgUrlHash = generateUniqueId();
+  }
+
   componentDidMount() {
     window.addEventListener('resize', this.resizeWindow.bind(this));
   }
@@ -196,14 +201,25 @@ class AccountVisual extends React.Component {
     const {
       address, size, sizeS, className,
     } = this.props;
+
+    const replaceUrlByHashOnScheme = gradientScheme => ({
+      ...gradientScheme,
+      url: gradientScheme.url.replace(/\)/g, `-${this.uniqueSvgUrlHash})`),
+      id: `${gradientScheme.id}-${this.uniqueSvgUrlHash}`,
+    });
     const sizeL = size || 200;
     const newSize = this.state.isSBreakpoint && sizeS ? sizeS : sizeL;
 
     const addressHashChunks = getHashChunks(address);
     const gradientScheme = gradientSchemes[
       addressHashChunks[0].substr(1, 2) % gradientSchemes.length];
-    const primaryGradients = pickTwo(addressHashChunks[1], gradientScheme.primary);
-    const secondaryGradients = pickTwo(addressHashChunks[2], gradientScheme.secondary);
+
+    const gradientsSchemesUrlsHashed = {
+      primary: gradientScheme.primary.map(replaceUrlByHashOnScheme),
+      secondary: gradientScheme.secondary.map(replaceUrlByHashOnScheme),
+    };
+    const primaryGradients = pickTwo(addressHashChunks[1], gradientsSchemesUrlsHashed.primary);
+    const secondaryGradients = pickTwo(addressHashChunks[2], gradientsSchemesUrlsHashed.secondary);
     const shapes = [
       getBackgroundCircle(newSize, primaryGradients[0]),
       getShape(addressHashChunks[1], newSize, primaryGradients[1], 1),
@@ -213,7 +229,7 @@ class AccountVisual extends React.Component {
     return (
       <div style={{ height: newSize, width: newSize }} className={`${styles.wrapper} ${className}`}>
         <svg height={newSize} width={newSize} className={styles.accountVisual}>
-          <Gradients scheme={gradientScheme}/>
+          <Gradients scheme={gradientsSchemesUrlsHashed}/>
           {shapes.map((shape, i) => (
             <shape.component {...shape.props} key={i}/>
           ))}

src/components/app/index.js

@@ -12,9 +12,9 @@ import SearchResult from '../search/searchResult';
 import TransactionDashboard from '../transactionDashboard';
 import AccountTransactions from '../accountTransactions';
 import Voting from '../voting';
+import SavedAccounts from '../savedAccounts';
 import SingleTransaction from './../singleTransaction';
 import styles from './app.css';
-import Dialog from '../dialog';
 import Toaster from '../toaster';
 import MainMenu from '../mainMenu';
 import LoadingBar from '../loadingBar';
@@ -35,38 +35,38 @@ class App extends React.Component {
       <OfflineWrapper>
         <main className={`${styles.bodyWrapper}`} ref={(el) => { this.main = el; }}>
           <MainMenu />
+          <Route path={routes.accounts.path} component={SavedAccounts} />
           <section>
             <div className={styles.mainBox}>
               <Header />
               <Switch>
                 <PrivateRoutes path={routes.main.path} render={ ({ match }) => (
                   <main className={offlineStyle.disableWhenOffline}>
                     <Switch>
-                      <Route path={`${match.url}${routes.accountVisualDemo.path}/:dialog?`} component={AccountVisualDemo} />
-                      <Route path={`${match.url}${routes.dashboard.path}/:dialog?`} component={Dashboard} />
-                      <Route path={`${match.url}${routes.wallet.path}/:dialog?`} component={TransactionDashboard} />
-                      <Route path={`${match.url}${routes.voting.path}/:dialog?`} component={Voting} />
-                      <Route path={`${match.url}${routes.sidechains.path}/:dialog?`} component={Sidechains} />
-                      <Route path={`${match.url}${routes.secondPassphrase.path}/:dialog?`} component={SecondPassphrase} />
+                      <Route path={`${match.url}${routes.accountVisualDemo.path}`} component={AccountVisualDemo} />
+                      <Route path={`${match.url}${routes.dashboard.path}`} component={Dashboard} />
+                      <Route path={`${match.url}${routes.wallet.path}`} component={TransactionDashboard} />
+                      <Route path={`${match.url}${routes.voting.path}`} component={Voting} />
+                      <Route path={`${match.url}${routes.sidechains.path}`} component={Sidechains} />
+                      <Route path={`${match.url}${routes.secondPassphrase.path}`} component={SecondPassphrase} />
                       <Route path='*' component={NotFound} />
                     </Switch>
                   </main>
                 )} />
                 <Route path={routes.explorer.path} render={ ({ match }) => (
                   <main>
-                    <Route path={`${match.url}${routes.search.path}/:dialog?`} component={Search} />
+                    <Route path={`${match.url}${routes.search.path}`} component={Search} />
                     <Route path={`${match.url}${routes.searchResult.path}/:query?`} component={SearchResult} />
                     <Route path={`${match.url}${routes.account.path}/:address?`} component={AccountTransactions} />
                     <Route path={`${match.url}${routes.transaction.path}/:id`} component={SingleTransaction} />
                   </main>
                 )} />
-                <Route path={`${routes.register.path}:dialog?`} component={Register} />
-                <Route path={`${routes.addAccount.path}:dialog?`} component={Login} />
+                <Route path={routes.register.path} component={Register} />
+                <Route path={routes.addAccount.path} component={Login} />
                 <Route exact path={routes.login.path} component={Login} />
                 <Route path='*' component={NotFound} />
               </Switch>
             </div>
-            <Dialog />
             <Toaster />
             <LoadingBar markAsLoaded={this.markAsLoaded.bind(this)} />
           </section>

src/components/app/variables.css

@@ -129,6 +129,9 @@ or "warn/action" ineastd of "red/green"
         Z-Indexes
   *************************/
   --normal-index: 1;
+  --headerbar-index: 20;
+  --menubar-index: 4;
+  --accounts-index: 21;
 
   /*************************
         Margins

src/components/dialog/dialog.js

@@ -5,52 +5,24 @@ import AppBar from 'react-toolbox/lib/app_bar';
 import IconButton from '../toolbox/buttons/iconButton';
 import { parseSearchParams } from '../../utils/searchParams';
 import styles from './dialog.css';
-import getDialogs from './dialogs';
-import routesReg from '../../utils/routes';
 
 class DialogElement extends Component {
   constructor() {
     super();
     this.state = {};
-    this.current = {
-      pathname: '/',
-      reg: routesReg[3],
-      list: [],
-      dialog: '',
-    };
-  }
-
-  componentDidMount() {
-    this.checkForDialog();
   }
 
   componentDidUpdate() {
-    this.checkForDialog();
-  }
-
-  checkForDialog() {
-    // if the dialog is wrong, show a toast
-    if (this.current.pathname !== this.props.history.location.pathname) {
-      this.current.reg = routesReg.find(item =>
-        item.regex.test(this.props.history.location.pathname));
-      this.current.pathname = this.props.history.location.pathname;
-      const dialogName = this.props.history.location.pathname.replace(this.current.reg.path, '');
-      const dialogs = getDialogs();
-      if (dialogs[dialogName] !== undefined) {
-        this.open(this.current.reg, dialogs[dialogName]);
-      } else {
-        this.close();
-      }
-    }
+    this.open();
   }
 
-  open(config, dialog) {
+  open() {
     clearTimeout(this.timeout);
     this.setState({ hidden: false });
     this.props.dialogDisplayed({
-      title: dialog.title,
-      theme: dialog.theme,
-      childComponent: dialog.component,
+      title: this.props.dialog.title,
+      theme: this.props.dialog.theme,
+      childComponent: this.props.dialog.childComponent,
       childComponentProps: parseSearchParams(this.props.history.location.search),
     });
   }
@@ -64,9 +36,8 @@ class DialogElement extends Component {
   }
 
   goBack() {
-    this.props.history.push((this.current.reg.path instanceof RegExp) ?
-      this.props.history.location.pathname.match(this.current.reg.path)[0] :
-      this.current.reg.path);
+    this.close();
+    this.props.history.goBack();
   }
 
   render() {

src/components/dialog/dialog.test.js

@@ -19,7 +19,7 @@ describe('Dialog', () => {
         pathname: `${routes.explorer.path}${routes.search.path}saved-accounts`,
         search: '',
       },
-      push: sinon.spy(),
+      goBack: sinon.spy(),
     };
     dialogProps = {
       title: 'Saved Accounts',
@@ -31,6 +31,7 @@ describe('Dialog', () => {
 
     props = {
       dialogDisplayed: () => {},
+      dialogHidden: sinon.spy(),
       t: key => key,
     };
     wrapper = shallow(<Dialog dialog={dialogProps} history={history} {...props}/>);
@@ -44,19 +45,39 @@ describe('Dialog', () => {
     expect(wrapper.find(SavedAccounts)).to.have.length(1);
   });
 
+  it('doesn\'t render appBar if title not provided', () => {
+    const propsWithoutTitle = { ...dialogProps };
+    delete propsWithoutTitle.title;
+    wrapper = shallow(<Dialog dialog={propsWithoutTitle} history={history} {...props}/>);
+    expect(wrapper.find('AppBar')).to.have.length(0);
+  });
+
+  it('doesn\'t render body if not childComponents present', () => {
+    const propsWithoutChildComponent = { ...dialogProps };
+    delete propsWithoutChildComponent.childComponent;
+    wrapper = shallow(<Dialog dialog={propsWithoutChildComponent} history={history} {...props}/>);
+    expect(wrapper.find(SavedAccounts)).to.have.length(0);
+  });
+
   it('allows to close the dialog on regexp path ', () => {
     const basePath = `${routes.explorer.path}${routes.wallet.path}/1523498127498/`;
     history.location.pathname = `${basePath}saved-accounts`;
     wrapper.setProps({ history });
     wrapper.find('.x-button').simulate('click');
-    expect(history.push).to.have.been.calledWith(basePath);
+    expect(history.goBack).to.have.been.calledWith();
   });
 
   it('allows to close the dialog on non-regexp path ', () => {
+    const clock = sinon.useFakeTimers({
+      toFake: ['setTimeout', 'clearTimeout'],
+    });
     history.location.pathname = `${routes.main.path}${routes.wallet.path}saved-accounts`;
     wrapper.setProps({ history });
     wrapper.find('.x-button').simulate('click');
-    expect(history.push).to.have.been.calledWith();
+    clock.tick(600);
+    expect(props.dialogHidden).to.have.been.calledWith();
+    expect(history.goBack).to.have.been.calledWith();
+    clock.restore();
   });
 
   // this test used to pass only because the history.push spy was not in beforeEach
@@ -65,6 +86,6 @@ describe('Dialog', () => {
     newProps.dialog.title = 'Send1';
     // trying to update the component
     wrapper.setProps(newProps);
-    expect(history.push).to.have.been.calledWith();
+    expect(history.goBack).to.have.been.calledWith();
   });
 });

src/components/header/header.css

@@ -183,7 +183,7 @@
     position: fixed;
     top: 0;
     background-color: var(--color-white);
-    z-index: 20;
+    z-index: var(--headerbar-index);
     height: auto;
 
     & .searchBar {

src/components/header/header.js

@@ -12,7 +12,6 @@ import logo from '../../assets/images/logo-beta.svg';
 import PrivateWrapper from '../privateWrapper';
 import { ActionButton } from './../toolbox/buttons/button';
 import styles from './header.css';
-import RelativeLink from '../relativeLink';
 import routes from './../../constants/routes';
 
 class Header extends React.Component {
@@ -72,16 +71,17 @@ class Header extends React.Component {
                       </div>
                     }
                   </div>
-                  <RelativeLink to='saved-accounts' className={styles.avatar}>
+                  <Link to={`${routes.accounts.path}`} className={styles.avatar}>
                     <AccountVisual
                       address={this.props.account.address}
                       size={69} sizeS={40}
                     />
-                  </RelativeLink>
+                  </Link>
                   <div className={styles.menu}>
                     <figure className={styles.iconCircle}>
-                      <RelativeLink className={`${styles.link} saved-accounts`}
-                        to='saved-accounts'><FontIcon value='more'/></RelativeLink>
+                      <Link to={`${routes.accounts.path}`} className={`${styles.link} saved-accounts`}>
+                        <FontIcon value='more'/>
+                      </Link>
                     </figure>
                   </div>
                 </div>

src/components/menuBar/menuBar.css

@@ -39,7 +39,7 @@
     font-size: var(--menu-bar-font-size-m);
     font-family: var(--heading-font);
     background-color: var(--color-white);
-    z-index: 1;
+    z-index: var(--menubar-index);
     flex-direction: row-reverse;
     justify-content: space-between;
   }

src/components/relativeLink/index.js

@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
 import { withRouter } from 'react-router';
 import buttonStyle from 'react-toolbox/lib/button/theme.css';
 import offlineStyle from '../offlineWrapper/offlineWrapper.css';
-import dialogs from '../dialog/dialogs';
 
 const RelativeLink = ({
   location, to, children, className, raised, neutral, primary, flat, disableWhenOffline,
@@ -17,13 +16,7 @@ const RelativeLink = ({
   if (disableWhenOffline !== undefined) style += `${offlineStyle.disableWhenOffline} `;
   if (style !== '') style += ` ${buttonStyle.button}`;
 
-  const dialogNames = Object.keys(dialogs());
-  let pathname = location.pathname;
-  dialogNames.forEach((dialog) => {
-    pathname = pathname.replace(`/${dialog}`, '');
-  });
-
-  const path = `${pathname}/${to}`.replace('//', '/');
+  const path = `${location.pathname}/${to}`.replace('//', '/');
   return (
     <Link className={`${className} ${style}`} to={path}>{ children }</Link>
   );

src/components/savedAccounts/index.js

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
 import { translate } from 'react-i18next';
 import { accountRemoved, accountSwitched, removeSavedAccountPassphrase } from '../../actions/savedAccounts';
 import { removePassphrase } from '../../actions/account';
@@ -20,4 +19,4 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(withRouter(translate()(SavedAccounts)));
+)(translate()(SavedAccounts));