feat: Add ember-light-table

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
   },
   plugins: [
     'babel',
+    'hbs',
     'ember',
   ],
   extends: [
@@ -29,5 +30,6 @@ module.exports = {
     'import/extensions': 'off',
     'import/no-extraneous-dependencies': 'off',
     'import/no-unresolved': 'off',
+    'hbs/check-hbs-template-literals': 'error',
   },
 };

.template-lintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'recommended',
+};

app/components/account-history/component.js

@@ -1,11 +1,48 @@
 import Component from '@ember/component';
+import { get } from '@ember/object';
+
+import { computed } from 'ember-decorators/object';
+
+import Table from 'ember-light-table';
 
 import PagedMixin from '../../mixins/paged';
+import formatAmount from '../../utils/format-amount';
 
 export default Component.extend(PagedMixin, {
   contentKey: 'history',
 
   wallet: null,
   account: null,
   history: null,
+
+  @computed
+  get columns() {
+    return [
+      {
+        label: 'Type',
+        valuePath: 'type',
+        width: '10%',
+      },
+      {
+        label: 'Account',
+        valuePath: 'account',
+        width: '60%',
+        cellClassNames: 'text-truncate',
+        cellComponent: 'account-link',
+      },
+      {
+        label: 'Amount',
+        valuePath: 'amount',
+        cellClassNames: 'text-truncate',
+        format(rawValue) {
+          return formatAmount(rawValue);
+        },
+      },
+    ];
+  },
+
+  @computed('columns', 'pagedContent.@each')
+  get table() {
+    return new Table(get(this, 'columns'), get(this, 'pagedContent'));
+  },
 });

app/components/account-history/template.hbs

@@ -1,29 +1,20 @@
 {{page-numbers content=history currentPage=page totalPages=totalPages}}
 
-<table class="table table-striped table-responsive">
-  <caption class="sr-only">History for account {{account.id}}</caption>
-  <thead>
-    <tr>
-      <th scope="col">Type</th>
-      <th scope="col">Account</th>
-      <th scope="col">Amount</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#each pagedContent as |entry|}}
-      <tr scope="row">
-        <td>
-          {{entry.type}}
-        </td>
-        <td>
-          {{#link-to 'wallets.accounts.index' wallet account disabledWhen=(not (contains account wallet.accounts))}}
-            {{truncate entry.account 30}}
-          {{/link-to}}
-        </td>
-        <td>
-          {{format-amount entry.amount}}
-        </td>
-      </tr>
-    {{/each}}
-  </tbody>
-</table>
+{{#light-table table tableClassNames='table table-striped' height='auto' as |t|}}
+  {{t.head}}
+
+  {{#t.body canSelect=false as |body|}}
+    {{#if (is-pending history)}}
+      {{#body.loader}}
+        {{fa-icon 'refresh' size=3 spin=true}}
+        <span class="sr-only">Loading...</span>
+      {{/body.loader}}
+    {{/if}}
+
+    {{#if table.isEmpty}}
+      {{#body.no-data}}
+        No history found.
+      {{/body.no-data}}
+    {{/if}}
+  {{/t.body}}
+{{/light-table}}

app/components/account-link/component.js

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

app/components/account-link/template.hbs

@@ -0,0 +1,3 @@
+{{#link-to 'wallets.accounts.index' value.wallet value disabledWhen=(not (contains value value.wallet.accounts))}}
+  {{value}}
+{{/link-to}}

app/helpers/format-amount.js

@@ -1,23 +1,9 @@
 import { helper } from '@ember/component/helper';
 
-import BigNumber from 'npm:bignumber.js';
+import formatAmountUtil from '../utils/format-amount';
 
-const base10 = BigNumber(10);
-
-const PREFIXES = {
-  Gxrb: base10.pow(33),
-  Mxrb: base10.pow(30),
-  kxrb: base10.pow(27),
-  xrb: base10.pow(24),
-  mxrb: base10.pow(21),
-  uxrb: base10.pow(18),
-};
-
-export function formatAmount([value = 0], { prefix = 'Mxrb', precision = 6 }) {
-  const divisor = PREFIXES[prefix] || PREFIXES.Mxrb;
-  const quotient = BigNumber(value).dividedBy(divisor);
-  const digits = Math.max(precision, Math.min(1, quotient.decimalPlaces()));
-  return quotient.toFormat(digits);
+export function formatAmount([value], hash) {
+  return formatAmountUtil(value, hash);
 }
 
 export default helper(formatAmount);

app/utils/format-amount.js

@@ -0,0 +1,19 @@
+import BigNumber from 'npm:bignumber.js';
+
+const base10 = BigNumber(10);
+
+const PREFIXES = {
+  Gxrb: base10.pow(33),
+  Mxrb: base10.pow(30),
+  kxrb: base10.pow(27),
+  xrb: base10.pow(24),
+  mxrb: base10.pow(21),
+  uxrb: base10.pow(18),
+};
+
+export default function formatAmount(value = 0, { prefix = 'Mxrb', precision = 6 } = {}) {
+  const divisor = PREFIXES[prefix] || PREFIXES.Mxrb;
+  const quotient = BigNumber(value).dividedBy(divisor);
+  const digits = Math.max(precision, Math.min(1, quotient.decimalPlaces()));
+  return quotient.toFormat(digits);
+}

bower.json

@@ -0,0 +1,6 @@
+{
+  "name": "raiwallet",
+  "dependencies": {
+    "animation-frame": "~0.2.4"
+  }
+}

ember-electron/main.js

@@ -1,6 +1,6 @@
 /* eslint-env node */
 /* eslint-disable no-console */
-const { app, BrowserWindow, protocol } = require('electron');
+const { app, Menu, BrowserWindow, protocol } = require('electron');
 const { dirname, join, resolve } = require('path');
 const protocolServe = require('electron-protocol-serve');
 const log = require('electron-log');
@@ -36,6 +36,31 @@ app.on('ready', () => {
   const subprocess = spawn(cmd, ['--daemon']);
   subprocess.on('error', err => log.error(err));
 
+  const template = [
+    {
+      label: 'Application',
+      submenu: [
+        { label: 'About Application', selector: 'orderFrontStandardAboutPanel:' },
+        { type: 'separator' },
+        { label: 'Quit', accelerator: 'Command+Q', click() { app.quit(); } },
+      ],
+    }, {
+      label: 'Edit',
+      submenu: [
+        { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
+        { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
+        { type: 'separator' },
+        { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
+        { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
+        { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
+        { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' },
+      ],
+    },
+  ];
+
+  const menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+
   mainWindow = new BrowserWindow({
     width: 800,
     height: 600,