feat: Full intl support

.eslintrc.js

@@ -10,8 +10,8 @@ module.exports = {
   },
   plugins: [
     'babel',
-    'hbs',
     'ember',
+    'hbs',
   ],
   extends: [
     'airbnb-base',

.travis.yml

@@ -20,3 +20,7 @@ env:
 
 before_install:
   - npm config set spin false
+
+script:
+  - npm run lint:js
+  - npm test

app/components/account-amount/component.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['text-truncate'],
+
+  value: null,
+});

app/components/account-amount/template.hbs

@@ -0,0 +1 @@
+{{format-amount value}}

app/components/account-history-entry/template.hbs

@@ -1,8 +1,7 @@
 {{#each columns as |column|}}
   {{component (concat 'light-table/cells/' column.cellType) column row
-    table=table
-    rawValue=(get row column.valuePath)
-    tableActions=tableActions
-    extra=extra
-  }}
+      table=table
+      rawValue=(get row column.valuePath)
+      tableActions=tableActions
+      extra=extra}}
 {{/each}}

app/components/account-history/component.js

@@ -1,39 +1,38 @@
 import Component from '@ember/component';
-import { get } from '@ember/object';
 
+import { service } from 'ember-decorators/service';
 import { computed } from 'ember-decorators/object';
 
 import Table from 'ember-light-table';
 
 import PagedMixin from '../../mixins/paged';
-import fromRaw from '../../utils/from-raw';
 
 export default Component.extend(PagedMixin, {
+  @service intl: null,
+
   contentKey: 'history',
 
   wallet: null,
   account: null,
   history: null,
 
-  @computed
+  @computed('intl.locale')
   get columns() {
+    const intl = this.get('intl');
     return [
       {
-        label: 'Type',
+        label: intl.t('type'),
         valuePath: 'type',
         width: '10%',
       },
       {
-        label: 'Amount',
+        label: intl.t('amount'),
         valuePath: 'amount',
         width: '20%',
-        cellClassNames: 'text-truncate',
-        format(rawValue) {
-          return fromRaw(rawValue);
-        },
+        cellComponent: 'account-amount',
       },
       {
-        label: 'Account',
+        label: intl.t('account'),
         valuePath: 'account',
         // width: '60%',
         cellComponent: 'account-link',
@@ -43,6 +42,8 @@ export default Component.extend(PagedMixin, {
 
   @computed('columns', 'pagedContent.@each')
   get table() {
-    return new Table(get(this, 'columns'), get(this, 'pagedContent'));
+    const columns = this.get('columns');
+    const pagedContent = this.get('pagedContent');
+    return new Table(columns, pagedContent);
   },
 });

app/components/account-history/template.hbs

@@ -6,13 +6,13 @@
   {{#t.body canSelect=false rowComponent=(component 'account-history-entry') as |body|}}
     {{#if (is-pending content)}}
       {{#body.loader}}
-        {{fa-icon 'refresh' size=3 spin=true ariaLabel="Loading..."}}
+        {{fa-icon 'refresh' size=3 spin=true ariaLabel=(t 'loading')}}
       {{/body.loader}}
     {{/if}}
 
     {{#if table.isEmpty}}
       {{#body.no-data}}
-        No history found.
+        {{t 'wallets.accounts.history.noData'}}
       {{/body.no-data}}
     {{/if}}
   {{/t.body}}

app/components/account-overview/component.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  account: null,
+});

app/components/account-overview/template.hbs

@@ -0,0 +1,32 @@
+<div class="card-group">
+  <div class="card">
+    <h5 class="card-header text-center text-truncate">
+      {{account.id}}
+    </h5>
+
+    <div class="card-body">
+      <div class="d-flex justify-content-center">
+        {{qr-code content=account.id}}
+      </div>
+
+      <dl class="row justify-content-md-center">
+        <dt class="col-md-3">{{t 'account'}}</dt>
+        <dd class="col-md-9 text-truncate">{{account.id}}</dd>
+
+        <dt class="col-md-3">{{t 'balance'}}</dt>
+        <dd class="col-md-9 text-truncate">{{format-amount account.balance}}</dd>
+
+        <dt class="col-md-3">{{t 'pending'}}</dt>
+        <dd class="col-md-9 text-truncate">{{format-amount account.pending}}</dd>
+      </dl>
+
+      {{#link-to 'wallets.accounts.send' class="card-link"}}
+        {{t 'send'}}
+      {{/link-to}}
+
+      {{#link-to 'wallets.accounts.history' class="card-link"}}
+        {{t 'history'}}
+      {{/link-to}}
+    </div>
+  </div>
+</div>

app/components/account-send/component.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { get, set } from '@ember/object';
+import { set } from '@ember/object';
 
 import { action } from 'ember-decorators/object';
 import { on } from 'ember-decorators/object/evented';
@@ -23,7 +23,7 @@ export default Component.extend({
 
   @on('init')
   createChangeset() {
-    const block = get(this, 'block');
+    const block = this.get('block');
     this.changeset = new Changeset(block, lookupValidator(SendValidations), SendValidations);
   },
 

app/components/account-send/template.hbs

@@ -1,17 +1,17 @@
 {{#bs-form model=changeset onSubmit=onSubmit as |form|}}
-  {{#form.element class="form-control-lg" controlType="power-select" label="Source Account" property="source" required=true options=accounts onChange=onChange as |el|}}
-    {{#el.control searchField="id" searchPlaceholder="Search for account" as |item|}}
+  {{#form.element class="form-control-lg" controlType="power-select" label=(t 'wallets.accounts.send.source') property="source" required=true options=accounts onChange=onChange as |el|}}
+    {{#el.control searchField="id" searchPlaceholder=(t 'wallets.accounts.send.search') as |item|}}
       <b>{{item.id}}</b>
     {{/el.control}}
   {{/form.element}}
 
-  {{form.element class="form-control-lg" controlType="text" label="Destination Account" property="destination" autocomplete='on' minlength=64 maxlength=64 required=true pattern="^xrb_[a-z0-9]{60}$" placeholder="e.g. xrb_3e3j5tkog48pnny9dmfzj1r16pg8t1e76dz5tmac6iq689wyjfpiij4txtdo"}}
+  {{form.element class="form-control-lg" controlType="text" label=(t 'wallets.accounts.send.destination') property="destination" autocomplete='on' minlength=64 maxlength=64 required=true pattern="^xrb_[a-z0-9]{60}$" placeholder=(t 'wallets.accounts.send.placeholder')}}
 
-  {{form.element class="form-control-lg" controlType="text" label="Amount (XRB)" model=(changeset (hash amount=amount) ChangeAmountValidations) property='amount' required=true minlength=1 pattern="^\d*\.?\d+$" onChange=(action 'changeAmount')}}
+  {{form.element class="form-control-lg" controlType="text" label=(t 'wallets.accounts.send.amount') model=(changeset (hash amount=amount) ChangeAmountValidations) property='amount' required=true minlength=1 pattern="^\d*\.?\d+$" onChange=(action 'changeAmount')}}
 
   <div role="group" class="d-flex justify-content-center">
     {{#bs-button size="lg" type="primary" icon="fa fa-paper-plane" buttonType="submit"}}
-      Send
+      {{t 'send'}}
     {{/bs-button}}
   </div>
 {{/bs-form}}

app/components/wallet-backup/component.js

@@ -0,0 +1,45 @@
+import Component from '@ember/component';
+import { reject } from 'rsvp';
+
+import { action } from 'ember-decorators/object';
+
+import downloadjs from 'npm:downloadjs';
+
+export default Component.extend({
+  wallet: null,
+  seed: null,
+  mnemonic: null,
+
+  onCancel: null,
+  onDone: null,
+
+  needsConfirm: false,
+  hasConfirmed: false,
+
+  @action
+  copySeed() {
+    this.get('flashMessages').success('Seed copied to clipboard!');
+  },
+
+  @action
+  downloadMnemonic(mnemonic) {
+    const fileName = String(mnemonic).split(' ').slice(0, 2).join('-');
+    downloadjs(mnemonic, fileName, 'text/plain');
+  },
+
+  @action
+  confirmDone() {
+    const needsConfirm = this.get('needsConfirm');
+    if (needsConfirm) {
+      this.toggleProperty('hasConfirmed');
+    }
+
+    const hasConfirmed = this.get('hasConfirmed');
+    if (!hasConfirmed) {
+      this.toggleProperty('needsConfirm');
+      return reject();
+    }
+
+    return true;
+  },
+});

app/components/wallet-backup/template.hbs

@@ -0,0 +1,37 @@
+{{#bs-modal onHide=(action onCancel) onSubmit=(action (queue (action 'confirmDone') (action onDone)) wallet seed) as |modal|}}
+  {{#modal.header}}
+    <h4 class="modal-title">{{t 'wallets.backup.title'}}</h4>
+  {{/modal.header}}
+  {{#modal.body}}
+    {{#each flashMessages.arrangedQueue as |flash|}}
+      {{flash-message class="d-flex w-100" flash=flash}}
+    {{/each}}
+    <p class="lead">{{t 'wallets.backup.lead'}}</p>
+    <p><code>{{mnemonic}}</code></p>
+    <p>
+      {{#copy-button class="btn btn-sm btn-outline-danger" clipboardText=seed success=(action 'copySeed')}}
+        {{fa-icon 'copy'}} {{t 'wallets.backup.copy'}}
+      {{/copy-button}}
+      {{#bs-button size='sm' type='outline-primary' class="ml-1" onClick=(action 'downloadMnemonic' mnemonic)}}
+        {{fa-icon 'download'}} {{t 'wallets.backup.download'}}
+      {{/bs-button}}
+    </p>
+    <small class="text-muted">{{t 'wallets.backup.help'}}</small>
+  {{/modal.body}}
+  {{#modal.footer}}
+    {{#bs-button onClick=(action modal.close) type="secondary"}}
+      {{t 'cancel'}}
+    {{/bs-button}}
+    {{#bs-button onClick=(action modal.submit) type="primary"}}
+      {{#bs-popover triggerElement="parentView"}}
+        {{t 'wallets.backup.confirm'}}
+      {{/bs-popover}}
+      {{#if needsConfirm}}
+        {{fa-icon 'question-circle-o'}}
+      {{else}}
+        {{fa-icon 'check'}}
+      {{/if}}
+      {{t 'done'}}
+    {{/bs-button}}
+  {{/modal.footer}}
+{{/bs-modal}}

app/components/wallet-import/component.js

@@ -1,19 +1,24 @@
 import Component from '@ember/component';
 import { get, set } from '@ember/object';
 
+import { service } from 'ember-decorators/service';
 import { action } from 'ember-decorators/object';
 
 import bip39 from 'npm:bip39';
 
 import ImportWalletValidations from '../../validations/import-wallet';
 
 export default Component.extend({
+  @service intl: null,
+
   ImportWalletValidations,
 
+  type: 'seed',
   wallet: null,
   seed: null,
 
-  type: 'seed',
+  onCancel: null,
+  onSubmit: null,
 
   @action
   convertMnemonic(wallet, changeset) {

app/components/wallet-import/template.hbs

@@ -1,22 +1,43 @@
-{{#bs-form model=(changeset (hash type=type seed=seed mnemonic=mnemonic) ImportWalletValidations) onSubmit=(action (queue (action 'convertMnemonic') (action onSubmit)) wallet) as |form|}}
-  {{#form.group}}
-    {{#bs-button-group type="radio" value=type onChange=(action (mut type)) as |bg|}}
-      {{#bg.button type="secondary" value='seed'}}{{t 'seed'}}{{/bg.button}}
-      {{#bg.button type="secondary" value='mnemonic'}}{{t 'mnemonic'}}{{/bg.button}}
-    {{/bs-button-group}}
-  {{/form.group}}
+{{#bs-modal onHide=(action onCancel) as |modal|}}
+  {{#modal.header}}
+    <h4 class="modal-title">{{t 'wallets.import.title'}}</h4>
+  {{/modal.header}}
+  {{#modal.body}}
+    {{#bs-form model=(changeset (hash type=type seed=seed mnemonic=mnemonic) ImportWalletValidations)
+        onSubmit=(action (queue (action 'convertMnemonic') (action onSubmit)) wallet) as |form|}}
+      {{#form.group}}
+        {{#bs-button-group type="radio" value=type onChange=(action (mut type)) as |bg|}}
+          {{#bg.button type="secondary" value='seed'}}
+            {{t 'seed'}}
+          {{/bg.button}}
+          {{#bg.button type="secondary" value='mnemonic'}}
+            {{t 'mnemonic'}}
+          {{/bg.button}}
+        {{/bs-button-group}}
+      {{/form.group}}
 
-  {{#form.group}}
-    {{#if (eq type 'seed')}}
-      {{form.element size='lg' controlType="text" property="seed" autocomplete='off' minlength=64 maxlength=64 required=true pattern="^[a-fA-F0-9]{64}$"}}
-      <small class="form-text text-muted">Your wallet's 64 character hex seed.</small>
-    {{/if}}
+      {{#form.group}}
+        {{#if (eq type 'seed')}}
+          {{form.element size='lg' controlType="text" property="seed" autocomplete='off' minlength=64 maxlength=64 required=true pattern="^[a-fA-F0-9]{64}$"}}
+          <small class="form-text text-muted">{{t 'wallets.import.help.seed'}}</small>
+        {{/if}}
 
-    {{#if (eq type 'mnemonic')}}
-      {{#form.element rows=4 controlType="textarea" property="mnemonic" autocomplete='off' required=true as |el|}}
-        {{el.control class="text-monospace"}}
-      {{/form.element}}
-      <small class="form-text text-muted">Your wallet's easy to remember seed mnemonic.</small>
-    {{/if}}
-  {{/form.group}}
-{{/bs-form}}
+        {{#if (eq type 'mnemonic')}}
+          {{#form.element rows=4 controlType="textarea" property="mnemonic" autocomplete='off' required=true as |el|}}
+            {{el.control class="text-monospace"}}
+          {{/form.element}}
+          <small class="form-text text-muted">{{t 'wallets.import.help.mnemonic'}}</small>
+        {{/if}}
+      {{/form.group}}
+    {{/bs-form}}
+  {{/modal.body}}
+  {{#modal.footer}}
+    {{#bs-button onClick=(action modal.close) type="secondary"}}
+      {{t 'cancel'}}
+    {{/bs-button}}
+    {{#bs-button onClick=(action modal.submit) type="primary"}}
+      {{fa-icon 'upload'}}
+      {{t 'import'}}
+    {{/bs-button}}
+  {{/modal.footer}}
+{{/bs-modal}}