perf(wallets): use a modal for wallet settings and smooth transitions

app/components/navigation-bar/template.hbs

@@ -27,12 +27,9 @@
         </a>
       </li>
       <li class="nav-item">
-        <a href="#" class="nav-link">
+        {{#link-to 'wallets.overview.settings' wallet class="nav-link"}}
           {{t 'settings'}}
-          {{#bs-popover placement="bottom" triggerEvents='click focus' title=(t 'walletSettings')}}
-            {{wallet-settings wallet=wallet representative=wallet.representative onChangeRepresentative=(action onChangeRepresentative) onChangePassword=(action onChangePassword)}}
-          {{/bs-popover}}
-        </a>
+        {{/link-to}}
       </li>
       <li class="nav-item">
         {{#link-to 'wallets.logout' wallet class="nav-link"}}

app/router.js

@@ -19,23 +19,24 @@ Router.map(function routerMap() {
   });
 
   this.route('wallets', { path: '/:wallet_id' }, function walletsRoute() {
+    this.route('send');
+    this.route('logout');
+
     this.route('overview', function overviewRoute() {
+      this.route('settings');
       this.route('accounts', { path: '/:account_id' }, function accountsRoute() {
         this.route('send');
         this.route('history');
         this.route('settings');
       });
     });
-    this.route('send');
-    this.route('settings', function settingsRoute() {
-      this.route('password');
-    });
-    this.route('logout');
+
     this.route('accounts', { path: '/:account_id' }, function accountsRoute() {
       this.route('send');
       this.route('history');
     });
   });
+
   this.route('login');
   this.route('logout');
   this.route('error');

app/setup/template.hbs

@@ -19,7 +19,7 @@
           </picture>
         </h1>
 
-        {{liquid-outlet class="toLeft liquid-outlet px-2"}}
+        {{liquid-outlet class="setup-step px-2"}}
       </div>
     </div>
   </section>

app/styles/setup.scss

@@ -15,10 +15,11 @@
   }
 }
 
-.liquid-outlet {
-  button.btn-lg {
+.setup-step {
+  .btn-lg {
     width: 49%;
   }
+
   .lead {
     margin-bottom: 20px;
     text-align: left;

app/transitions.js

@@ -1,81 +1,9 @@
 export default function () {
-  const duration = 100;
   this.transition(
-    this.hasClass('hide-history'),
-
-    // this makes our rule apply when the liquid-if transitions to the
-    // true state.
-    this.toValue(false),
-    this.use('fade', { duration: 250 }),
-    this.reverse('fade', { duration: 250 }),
-  );
-  this.transition(
-    this.hasClass('hide-balance'),
-
-    // this makes our rule apply when the liquid-if transitions to the
-    // true state.
-    this.toValue(false),
-    this.use('toUp', { duration: 300 }),
-    this.reverse('toUp', { duration: 300 }),
-  );
-  this.transition(
-    this.hasClass('hide-qr'),
-
-    // this makes our rule apply when the liquid-if transitions to the
-    // true state.
-    this.toValue(false),
-    this.use('fade', { duration: 500 }),
-
-    // which means we can also apply a reverse rule for transitions to
-    // the false state.
-    this.reverse('fade', { duration: 500 }),
-  );
-
-  this.transition(
-    this.fromRoute('wallets.overview'),
-    this.toRoute('wallets.overview.accounts.history'),
-    this.hasClass('history'),
-    this.use('wait', 3000, { then: 'toUp' }),
-    this.reverse('wait', 3000, { then: 'toDown' }),
-  );
-
-  this.transition(
-    this.hasClass('toLeft'),
-    this.fromRoute('setup'),
-    this.toRoute('setup.index'),
-    this.use('fade'),
-    this.reverse('fade'),
-  );
-
-  this.transition(
-    this.hasClass('toLeft'),
-    this.fromRoute('setup.index'),
-    this.toRoute('setup.backup'),
-    this.use('toLeft', { duration }),
-    this.reverse('toRight', { duration }),
-  );
-
-  this.transition(
-    this.hasClass('toLeft'),
+    this.hasClass('setup-step'),
     this.fromRoute('setup.index'),
     this.toRoute('setup.import'),
-    this.use('toLeft', { duration }),
-    this.reverse('toRight', { duration }),
-  );
-
-  this.transition(
-    this.hasClass('toLeft'),
-    this.fromRoute('setup.backup'),
-    this.toRoute('setup.password'),
-    this.use('toLeft', { duration }),
-    this.reverse('toRight', { duration }),
-  );
-
-  this.transition(
-    this.fromRoute('wallets.overview'),
-    this.toRoute('wallets.overview.accounts.send'),
-    this.hasClass('send-outlet'),
-    this.use('wait', 1000, { then: 'fade' }),
-    this.reverse('wait', 1000, { then: 'fade' }),
+    this.use('toLeft', { duration: 100 }),
+    this.reverse('toRight', { duration: 100 }),
   );
 }

app/wallets/overview/accounts/history/route.js

@@ -1,16 +1,10 @@
 import Route from '@ember/routing/route';
-import { get } from '@ember/object';
+import { get, set } from '@ember/object';
 import { action } from 'ember-decorators/object';
 
 import { hash } from 'rsvp';
 
 export default Route.extend({
-  beforeModel() {
-    this.controllerFor('wallets.overview').set('hideHistory', false);
-    const hideHistory = this.controllerFor('wallets.overview').get('hideHistory');
-    this.controllerFor('wallets.overview.accounts.history').set('hideHistory', hideHistory);
-  },
-
   async model() {
     const wallet = this.modelFor('wallets');
     const account = this.modelFor('wallets.overview.accounts');
@@ -26,10 +20,21 @@ export default Route.extend({
     });
   },
 
+  setupController(controller, model) {
+    const overviewController = this.controllerFor('wallets.overview');
+    set(overviewController, 'hideHistory', false);
+    set(controller, 'hideHistory', false);
+    return this._super(controller, model);
+  },
+
+  deactivate() {
+    const overviewController = this.controllerFor('wallets.overview');
+    set(overviewController, 'hideHistory', true);
+    set(this.controller, 'hideHistory', true);
+  },
+
   @action
   hideHistory() {
-    this.controllerFor(this.routeName).set('hideHistory', true);
-    this.controllerFor('wallets.overview').set('hideHistory', true);
     return this.transitionTo('wallets.overview');
   },
 });

app/wallets/overview/accounts/history/template.hbs

@@ -2,9 +2,9 @@
   <div class="container">
     <div class="row">
       <div class="col">
-        <a href="#" class="toggle-history-arrow" {{action (route-action 'hideHistory')}}>
+        {{#link-to 'wallets.overview' model.wallet class="toggle-history-arrow"}}
           {{fa-icon "chevron-up"}}
-        </a>
+        {{/link-to}}
       </div>
     </div>
   </div>

app/wallets/overview/settings/route.js

@@ -0,0 +1,17 @@
+import Route from '@ember/routing/route';
+
+import { action } from 'ember-decorators/object';
+
+export default Route.extend({
+  renderTemplate() {
+    this.render('wallets/overview/settings', {
+      into: 'wallets',
+      outlet: 'walletSettings',
+    });
+  },
+
+  @action
+  cancel() {
+    return this.transitionTo('wallets.overview');
+  },
+});

app/wallets/overview/settings/template.hbs

@@ -0,0 +1,10 @@
+{{#bs-modal onHide=(route-action 'cancel') as |modal|}}
+  {{#modal.header}}
+    <h4 class="modal-title">
+      {{t 'walletSettings'}}
+    </h4>
+  {{/modal.header}}
+  {{#modal.body}}
+    {{wallet-settings wallet=model representative=model.representative onChangeRepresentative=(route-action 'changeRepresentative') onChangePassword=(route-action 'changePassword')}}
+  {{/modal.body}}
+{{/bs-modal}}

app/wallets/overview/template.hbs

@@ -1,6 +1,6 @@
-{{#liquid-if hideHistory class="hide-balance"}}
+{{#if hideHistory}}
   {{balance-overview wallet=model}}
-{{/liquid-if}}
+{{/if}}
 
 {{wallet-overview wallet=model accounts=sortedAccounts hideHistory=hideHistory createAccount=(route-action 'createAccount') page=page perPage=perPage}}
 

app/wallets/template.hbs

@@ -1,7 +1,9 @@
-{{navigation-bar wallet=model onChangeRepresentative=(route-action 'changeRepresentative') onCreateAccount=(route-action 'createAccount') onChangePassword=(route-action 'changePassword')}}
+{{navigation-bar wallet=model onCreateAccount=(route-action 'createAccount')}}
 
 <main role="main">
   {{notification-center}}
 
   {{outlet}}
+
+  {{outlet 'walletSettings'}}
 </main>

tests/unit/wallets/settings/route-test.js → tests/unit/wallets/overview/settings/route-test.js

@@ -2,8 +2,8 @@ import { expect } from 'chai';
 import { describe, it } from 'mocha';
 import { setupTest } from 'ember-mocha';
 
-describe('Unit | Route | wallets/settings', () => {
-  setupTest('route:wallets/settings', {
+describe('Unit | Route | wallets/overview/settings', () => {
+  setupTest('route:wallets/overview/settings', {
     // Specify the other units that are required for this test.
     // needs: ['controller:foo']
   });