refactor: several big refactors

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 8.9.4
+nodejs 8.10.0
 python 2.7.14

.travis.yml

@@ -1,7 +1,7 @@
 ---
 language: node_js
 node_js:
-  - "6"
+  - "8"
 
 sudo: false
 dist: trusty
@@ -10,17 +10,20 @@ addons:
   chrome: stable
 
 cache:
-  directories:
-    - $HOME/.npm
+  yarn: true
 
 env:
   global:
     # See https://git.io/vdao3 for details.
     - JOBS=1
 
 before_install:
-  - npm config set spin false
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH=$HOME/.yarn/bin:$PATH
+
+install:
+  - yarn install --non-interactive
 
 script:
-  - npm run lint:js
-  - npm test
+  - yarn lint:js
+  - yarn test

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "javascript.validate.enable": false
+}

Dockerfile

@@ -1,21 +1,24 @@
-FROM node:8.9.4
+FROM node:8.10.0
 LABEL maintainer="Nano Labs <engineering@nano.co>"
 
-RUN curl -sSL https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
-RUN echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list
+RUN curl -fsSL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
+RUN curl -fsSL https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
+RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
+RUN echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" | tee /etc/apt/sources.list.d/google.list
 
 RUN apt-get update
-RUN apt-get install -qq --no-install-recommends google-chrome-stable
+RUN apt-get install -qq --no-install-recommends yarn=1.5.1 google-chrome-stable
 
 RUN useradd -s /bin/bash -mb /usr/src app
 USER app
 WORKDIR /usr/src/app
 
 COPY --chown=app:app package.json .
-COPY --chown=app:app package-lock.json .
-RUN npm install
+COPY --chown=app:app yarn.lock .
+
+RUN yarn install --frozen-lockfile --non-interactive
 
 COPY --chown=app:app . .
 
 EXPOSE 4200 7020 7357 9222
-CMD ["npm", "start"]
+CMD ["yarn", "start"]

README.md

@@ -9,18 +9,19 @@ This is an Ember application that can build into an [Electron](https://electronj
 You will need the following things properly installed on your computer.
 
 * [Git](https://git-scm.com/)
-* [Node.js](https://nodejs.org/) (with npm)
+* [Node.js](https://nodejs.org/)
+* [Yarn](https://yarnpkg.com/)
 * [Google Chrome](https://google.com/chrome/)
 
 ## Installation
 
 * `git clone https://github.com/nanocurrency/nano-desktop.git`
 * `cd nano-desktop`
-* `npm install`
+* `yarn install`
 
 ## Running / Development
 
-* `npm start`
+* `yarn start`
 * Visit the app at [http://localhost:4200](http://localhost:4200).
 * Visit the tests at [http://localhost:4200/tests](http://localhost:4200/tests).
 
@@ -30,18 +31,18 @@ Make use of the many generators for code, try `npx ember help generate` for more
 
 ### Running Tests
 
-* `npm test`
-* `npm test -- --server`
+* `yarn test`
+* `yarn test -- --server`
 
 ### Linting
 
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
+* `yarn run lint:js`
+* `yarn run lint:js -- --fix`
 
 ### Building
 
-* `npm run build` (development)
-* `npm run build --environment production` (production)
+* `yarn run build` (development)
+* `yarn run build --environment production` (production)
 
 ### Using Docker Compose
 

app/authenticators/wallet.js

@@ -6,33 +6,33 @@ import { service } from 'ember-decorators/service';
 
 import { defineError } from 'ember-exex/error';
 
-export const AuthenticationError = defineError({
+export const AuthenticatorError = defineError({
   name: 'AuthenticationError',
-  message: 'Authentication error',
+  message: 'Wallet authenticator error',
 });
 
-export const SessionRestoreError = defineError({
-  name: 'SessionRestoreError',
-  message: 'Unable to restore session',
-  extends: AuthenticationError,
+export const RestoreError = defineError({
+  name: 'RestoreError',
+  message: 'Unable to restore wallet',
+  extends: AuthenticatorError,
 });
 
 export const NodeNotStartedError = defineError({
   name: 'NodeStoppedError',
   message: 'Node not started',
-  extends: SessionRestoreError,
+  extends: RestoreError,
 });
 
 export const WalletLockedError = defineError({
   name: 'WalletLocked',
   message: 'Wallet locked',
-  extends: SessionRestoreError,
+  extends: RestoreError,
 });
 
-export const InvalidPasswordError = defineError({
-  name: 'InvalidPasswordError',
-  message: 'Invalid password',
-  extends: AuthenticationError,
+export const AuthenticateError = defineError({
+  name: 'AuthenticateError',
+  message: 'Unable to authenticate wallet',
+  extends: AuthenticatorError,
 });
 
 export default Base.extend({
@@ -42,7 +42,7 @@ export default Base.extend({
 
   async restore({ wallet }) {
     if (!wallet) {
-      throw new SessionRestoreError();
+      throw new RestoreError();
     }
 
     const electron = this.get('electron');
@@ -65,8 +65,8 @@ export default Base.extend({
   async authenticate({ wallet, password }) {
     try {
       await this.get('rpc').passwordEnter(wallet, password);
-    } catch (previous) {
-      throw new InvalidPasswordError({ previous });
+    } catch (err) {
+      throw new AuthenticateError().withPreviousError(err);
     }
 
     return { wallet };

app/components/account-address/component.js

@@ -0,0 +1,32 @@
+import Component from '@ember/component';
+
+import { observes } from 'ember-decorators/object';
+import { on } from 'ember-decorators/object/evented';
+
+export const MINIMUM_LENGTH = 64;
+
+export default Component.extend({
+  value: null,
+
+  attributeBindings: ['value:title', 'translate'],
+  translate: false,
+
+  head: null,
+  body: null,
+  tail: null,
+
+  @on('init')
+  @observes('value')
+  valueDidChange() {
+    const value = this.get('value');
+    if (value) {
+      const str = String(value);
+      if (str.length >= MINIMUM_LENGTH) {
+        const head = str.slice(0, 10);
+        const body = str.slice(11, -5);
+        const tail = str.slice(-5);
+        this.setProperties({ head, body, tail });
+      }
+    }
+  },
+});

app/components/account-address/styles.scss

@@ -0,0 +1,14 @@
+span {
+  &:first-child,
+  &:last-child {
+    font-weight: bold;
+  }
+
+  &:first-child {
+    color: $light-blue;
+  }
+
+  &:last-child {
+    color: $orange;
+  }
+}

app/components/account-address/template.hbs

@@ -0,0 +1,3 @@
+{{!-- {{#if value}} --}}
+<span>{{head}}</span><span class="middle">{{body}}</span><span>{{tail}}</span>
+{{!-- {{/if}} --}}

app/components/account-card/styles.scss

@@ -1,3 +1,7 @@
+a {
+  outline: none;
+}
+
 .account-card-content {
   align-items: center;
   background-color: white;
@@ -15,6 +19,17 @@
     transform: scale(1.10) !important;
   }
 
+  img.qr-code {
+    display: block;
+    height: auto;
+    margin: 0 auto;
+    width: 90%;
+  }
+
+  i {
+    color: $blue;
+  }
+
   sup > img {
     display: inline-block;
   }
@@ -40,30 +55,12 @@
     background-color: $dark-purple;
     color: white;
     display: block;
-    font-size: 12px;
+    font-size: 1.4vh;
     height: 60px;
     margin: 0;
-    padding: 10px;
     overflow-wrap: break-word;
+    padding: 10px;
+    text-align: center;
     width: 100%;
   }
-
-  .account-id span:first-child {
-    color: $light-blue;
-  }
-
-  .account-id span:last-child {
-    color: $orange;
-  }
-
-  img.qr-code{
-    display: block;
-    height: auto;
-    margin: 0 auto;
-    width: 90%;
-  }
-
-  i {
-    color: $blue;
-  }
 }

app/components/account-card/template.hbs

@@ -8,14 +8,12 @@
         <sup>
           <img src="images/nano-icon.svg" alt="{{t 'NANO'}}">
         </sup>
-        {{format-amount account.balance precision=2}}
+        {{format-amount account.balance}}
         <br>
-        <sub>+{{format-amount account.pending precision=2}}</sub>
+        <sub>+{{format-amount account.pending}}</sub>
       </p>
       <p class="account-id">
-        {{account.id}} {{!--
-        <span>xrb_17oqj</span>4rpads4o6ud448yymzk9jot8yzmzyeuteq3bj38cwjpt4rrgxhfx
-        <span>fr1</span> --}}
+        {{account-address value=account.id}}
       </p>
       {{else}}
         {{fa-icon "spinner" size=5 spin=true ariaLabel=(t 'loading')}}

app/components/account-carousel/component.js

@@ -1,30 +1,31 @@
 import Component from '@ember/component';
-import { run, debounce, scheduleOnce } from '@ember/runloop';
+import { scheduleOnce } from '@ember/runloop';
 import { sort } from '@ember/object/computed';
 
+import RunMixin from 'ember-lifeline/mixins/run';
+
 import { computed, observes } from 'ember-decorators/object';
 import { on } from 'ember-decorators/object/evented';
 
-export default Component.extend({
+export default Component.extend(RunMixin, {
   accounts: null,
 
   currentSlide: 0,
   sortedAccounts: sort('accounts', 'sortBy'),
 
   @computed()
   get sortBy() {
-    return ['modifiedTimestamp'];
+    // Fallback to sorting by `id` for stable sort.
+    return ['modifiedTimestamp', 'id'];
   },
 
   slickInstance: null,
 
   @on('didInsertElement')
   addChangeListener() {
     this.$().on('afterChange', (event, slick, currentSlide) => {
-      run(() => {
-        if (!this.isDestroying) {
-          this.set('currentSlide', currentSlide);
-        }
+      this.runTask(() => {
+        this.set('currentSlide', currentSlide);
       });
     });
   },
@@ -74,9 +75,9 @@ export default Component.extend({
     return this.slickInstance;
   },
 
-  @observes('sortedAccounts.@each')
+  @observes('sortedAccounts.@each.id')
   sortedAccountsDidChange() {
-    debounce(this, this.refreshSlider, 1000, true);
+    this.debounceTask('refreshSlider', 1000, true);
   },
 
   @computed()