feat(overview): Flesh out overview and send functionality

app/account/adapter.js

@@ -11,8 +11,9 @@ export default DS.Adapter.extend({
     return assign(data, info);
   },
 
-  createRecord(store, type, snapshot) {
+  async createRecord(store, type, snapshot) {
     const { wallet } = this.serialize(snapshot, { includeId: true });
-    return this.get('rpc').accountCreate(wallet);
+    const { account } = await this.get('rpc').accountCreate(wallet);
+    return this.get('rpc').accountInfo(account);
   },
 });

app/account/model.js

@@ -2,6 +2,8 @@ import DS from 'ember-data';
 
 export default DS.Model.extend({
   wallet: DS.belongsTo('wallet'),
+  blocks: DS.hasMany('block', { inverse: 'source' }),
 
-  balance: DS.attr('bigint'),
+  balance: DS.attr('big-number'),
+  pending: DS.attr('big-number'),
 });

app/big-number/transform.js

@@ -0,0 +1,13 @@
+import DS from 'ember-data';
+
+import BigNumber from 'npm:bignumber.js';
+
+export default DS.Transform.extend({
+  deserialize(serialized = 0) {
+    return BigNumber(serialized);
+  },
+
+  serialize(deserialized = 0) {
+    return BigNumber(deserialized);
+  }
+});

app/block/adapter.js

@@ -0,0 +1,17 @@
+import DS from 'ember-data';
+import { inject as service } from '@ember/service';
+
+export default DS.Adapter.extend({
+  rpc: service(),
+
+  createRecord(store, type, snapshot) {
+    const {
+      wallet,
+      source,
+      destination,
+      amount,
+    } = this.serialize(snapshot, { includeId: true });
+
+    return this.get('rpc').send(wallet, source, destination, amount);
+  },
+});

app/block/model.js

@@ -0,0 +1,9 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  wallet: DS.belongsTo('wallet', { inverse: null }),
+  source: DS.belongsTo('account', { inverse: 'blocks' }),
+
+  destination: DS.attr('string'),
+  amount: DS.attr('big-number'),
+});

app/block/serializer.js

@@ -0,0 +1,5 @@
+import DS from 'ember-data';
+
+export default DS.JSONSerializer.extend({
+  primaryKey: 'block',
+});

app/components/account-send/component.js

@@ -13,7 +13,7 @@ export default Component.extend({
     this._super(...args);
 
     const model = {
-      account: null,
+      source: null,
       destination: null,
       amount: null,
     };

app/components/account-send/template.hbs

@@ -1,5 +1,5 @@
 {{#bs-form model=changeset onSubmit=(action 'sendAmount') as |form|}}
-  {{#form.element class="form-control-lg" controlType="power-select" label="From Account" property="account" options=accounts as |el|}}
+  {{#form.element class="form-control-lg" controlType="power-select" label="Source Account" property="source" options=accounts as |el|}}
     {{#el.control searchField="id" searchPlaceholder="Search for account" as |item|}}
       <b>{{item.id}}</b>
     {{/el.control}}

app/components/wallet-overview/template.hbs

@@ -1,14 +1,37 @@
-<h1>Wallet</h1>
+<p class="lead">
+  Total Balance: {{format-amount wallet.balance}}
+</p>
 
-Total Balance: {{wallet.balance}}
+{{!-- <h2>Accounts</h2> --}}
 
-<h2>Accounts</h2>
+<table class="table table-striped table-responsive">
+  <thead>
+    <tr>
+      <th scope="col">Account</th>
+      <th scope="col">Balance</th>
+      <th scope="col">Pending</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each wallet.accounts as |acc|}}
+      <tr scope="row">
+        <td>
+          {{#link-to 'wallets.accounts' wallet acc}}
+            {{truncate acc.id 30}}
+          {{/link-to}}
+        </td>
+        <td>
+          {{truncate (format-amount wallet.balance) 20}}
+        </td>
+        <td>
+          {{format-amount wallet.pending}}
+        </td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>
 
-<ul>
-  {{#each wallet.accounts as |acc|}}
-    <li>{{acc.id}} (balance: {{acc.balance}})</li>
-  {{/each}}
-</ul>
+{{!-- {{truncate "Lorem ipsum dolor sit amet, consectetur adipiscing elit." 20}} --}}
 
 {{#bs-button type="primary" icon="fa fa-plus-circle" value=wallet onClick=(action 'createAccount')}}
   Create Account

app/helpers/format-amount.js

@@ -0,0 +1,21 @@
+import { helper } from '@ember/component/helper';
+
+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 function formatAmount([value = 0], { prefix = 'Mxrb' }) {
+  const divisor = PREFIXES[prefix] || PREFIXES['Mxrb'];
+  return BigNumber(value).dividedBy(divisor).toFormat();
+}
+
+export default helper(formatAmount);

app/rpc/service.js

@@ -18,13 +18,18 @@ export default Service.extend({
     return this.call('account_create', { wallet });
   },
 
-  async accountInfo(account) {
-    const info = await this.call('account_info', { account });
+  async accountInfo(account, pending = true) {
+    let info = await this.call('account_info', { account, pending });
 
     // When an account has no transactions, the RPC seems to return an
     // HTTP OK *and* an error.
     if (info.error === 'Account not found') {
-      return { account, balance: "0" };
+      info = { account, balance: "0" };
+      if (pending) {
+        info.pending = "0";
+      }
+
+      return info;
     }
 
     return info;
@@ -37,4 +42,13 @@ export default Service.extend({
   accountList(wallet) {
     return this.call('account_list', { wallet });
   },
+
+  send(wallet, source, destination, amount) {
+    return this.call('send', {
+      wallet,
+      source,
+      destination,
+      amount,
+    });
+  },
 });

app/styles/app.scss

@@ -1,10 +1,15 @@
 @import "ember-bootstrap/bootstrap";
 
+@import "ember-power-select/themes/bootstrap";
+
+@import "ember-power-select";
+
 main {
   margin-top: 1em;
 }
 
-
-@import "ember-power-select/themes/bootstrap";
-
-@import "ember-power-select";
+h1 {
+  margin-bottom: 20px;
+  padding-bottom: 9px;
+  border-bottom: 1px solid #eee;
+}

app/validations/send.js

@@ -3,7 +3,7 @@ import { validatePresence } from 'ember-changeset-validations/validators';
 import validateAccount from '../validators/account';
 
 export default {
-  account: validatePresence(true),
+  source: validatePresence(true),
   destination: validateAccount(),
   amount: validatePresence(true),
 };

app/wallet/adapter.js

@@ -1,6 +1,5 @@
 import DS from 'ember-data';
 import { inject as service } from '@ember/service';
-import { assign } from '@ember/polyfills';
 
 import { all } from 'rsvp';
 

app/wallet/model.js

@@ -3,5 +3,5 @@ import DS from 'ember-data';
 export default DS.Model.extend({
   accounts: DS.hasMany('account', { async: true }),
 
-  balance: DS.attr('bigint'),
+  balance: DS.attr('big-number'),
 });

app/wallets/accounts/index/template.hbs

@@ -1,29 +1,32 @@
-{{!-- Total Balance: {{model.balance}}
-{{qr-code content=model.id}} --}}
-
 <div class="card-group">
   <div class="card">
-    {{qr-code class="card-img-top" content=model.id}}
-    <div class="card-body">
-      <h4 class="card-title">{{model.id}}</h4>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    </div>
-  </div>
-  <div class="card">
-    {{qr-code class="card-img-top" content=model.id}}
-    <div class="card-body">
-      <h4 class="card-title">{{model.id}}</h4>
-      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    </div>
-  </div>
-  <div class="card">
-    <{{qr-code class="card-img-top" content=model.id}}
+    <h5 class="card-header text-center text-truncate" title="{{model.id}}">
+      {{model.id}}
+    </h5>
+
     <div class="card-body">
-      <h4 class="card-title">{{model.id}}</h4>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <div class="d-flex justify-content-center">
+        {{qr-code content=model.id}}
+      </div>
+
+      <dl class="row justify-content-md-center">
+        <dt class="col-md-3">Account</dt>
+        <dd class="col-md-9 text-truncate" title="{{model.id}}">{{model.id}}</dd>
+
+        <dt class="col-md-3">Balance</dt>
+        <dd class="col-md-9 text-truncate" title="{{model.balance}}">{{model.balance}}</dd>
+
+        <dt class="col-md-3">Pending</dt>
+        <dd class="col-md-9 text-truncate" title="{{model.pending}}">{{model.pending}}</dd>
+      </dl>
+
+      {{#link-to 'wallets.send' model.wallet class="card-link"}}
+        Send
+      {{/link-to}}
+
+      {{#link-to 'wallets.send' model.wallet class="card-link"}}
+        Receive
+      {{/link-to}}
     </div>
   </div>
-</div>
+</div>

app/wallets/overview/route.js

@@ -1,12 +1,6 @@
 import Route from '@ember/routing/route';
-import { get } from '@ember/object';
-import { inject as service } from '@ember/service';
-
-import { hash } from 'rsvp';
 
 export default Route.extend({
-  rpc: service('rpc'),
-
   actions: {
     createAccount(wallet) {
       const account = this.store.createRecord('account', { wallet });

app/wallets/overview/template.hbs

@@ -1 +1,3 @@
+<h1>Overview</h1>
+
 {{wallet-overview wallet=model createAccount=(route-action 'createAccount')}}

app/wallets/send/route.js

@@ -3,7 +3,16 @@ import Route from '@ember/routing/route';
 export default Route.extend({
   actions: {
     sendAmount(changeset) {
-      console.log(...arguments);
+      const wallet = this.modelFor('wallets');
+      const { source, destination, amount } = changeset.getProperties('source', 'destination', 'amount');
+      const block = this.store.createRecord('block', {
+        wallet,
+        source,
+        destination,
+        amount,
+      });
+
+      return block.save();
     }
   }
 });

app/wallets/send/template.hbs

@@ -1,8 +1,3 @@
-<div class="jumbotron jumbotron-fluid">
-  <div class="container">
-    <h1 class="display-3">Send</h1>
-    <p class="lead">Send XRB from one of your accounts to another account.</p>
-  </div>
-</div>
+<h1>Send</h1>
 
 {{account-send accounts=model.accounts sendAmount=(route-action 'sendAmount')}}

config/environment.js

@@ -34,6 +34,7 @@ module.exports = function(environment) {
 
   if (environment === 'test') {
     // Testem prefers this...
+    ENV.rootURL = '/';
     ENV.locationType = 'none';
 
     // keep test console output quieter