fix(account-address): stop cutting out first character in the middle

Fixes #8.

app/components/account-address/component.js

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { bool } from '@ember/object/computed';
 
 import { observes } from 'ember-decorators/object';
 import { on } from 'ember-decorators/object/evented';
@@ -7,11 +8,12 @@ export const MINIMUM_LENGTH = 64;
 
 export default Component.extend({
   tagName: 'span',
+  isVisible: bool('value'),
 
   value: null,
-  truncate: false,
+  truncate: 0,
 
-  attributeBindings: ['value:title', 'translate'],
+  attributeBindings: ['title', 'translate'],
   translate: false,
 
   head: null,
@@ -25,8 +27,8 @@ export default Component.extend({
     if (value) {
       const str = String(value);
       if (str.length >= MINIMUM_LENGTH) {
-        const head = str.slice(0, 10);
-        const body = str.slice(11, -5);
+        const head = str.slice(0, 9);
+        const body = str.slice(9, -5);
         const tail = str.slice(-5);
         this.setProperties({ head, body, tail });
       }

app/components/account-address/template.hbs

@@ -1,3 +1 @@
-{{#if value}}
-  <span>{{head}}</span><span class="middle">{{if truncate (truncate body truncate) body}}</span><span>{{tail}}</span>
-{{/if}}
+<span>{{head}}</span><span class="text-muted">{{if truncate (truncate body truncate) body}}</span><span>{{tail}}</span>

tests/integration/components/account-address/component-test.js

@@ -21,4 +21,27 @@ describe('Integration | Component | account-address', () => {
     this.render(hbs`{{account-address}}`);
     expect(this.$()).to.have.length(1);
   });
+
+  it('displays the full address', function () {
+    const value = 'xrb_3arg3asgtigae3xckabaaewkx3bzsh7nwz7jkmjos79ihyaxwphhm6qgjps4';
+    this.set('value', value);
+    this.render(hbs`{{account-address value=value}}`);
+
+    const address = this.$().text().trim();
+    expect(address).to.equal(value);
+  });
+
+  it('visually separates the first 9 and last 5 characters', function () {
+    const value = 'xrb_3arg3asgtigae3xckabaaewkx3bzsh7nwz7jkmjos79ihyaxwphhm6qgjps4';
+    this.set('value', value);
+    this.render(hbs`{{account-address value=value}}`);
+
+    const parts = this.$('span > span');
+    expect(parts).to.have.length(3);
+
+    const [head, body, tail] = parts.map((idx, el) => el.innerText.trim());
+    expect(head).to.equal('xrb_3arg3');
+    expect(body).to.equal('asgtigae3xckabaaewkx3bzsh7nwz7jkmjos79ihyaxwphhm6q');
+    expect(tail).to.equal('gjps4');
+  });
 });