From f6881e88e41f569cc3f7d7635239cd5aa7a70dd2 Mon Sep 17 00:00:00 2001
From: Devin Alexander Torres <d@devinus.io>
Date: Fri, 16 Mar 2018 18:50:33 -0500
Subject: [PATCH] fix(account-address): stop cutting out first character in the
 middle

Fixes #8.
---
 app/components/account-address/component.js   | 10 ++++----
 app/components/account-address/template.hbs   |  4 +---
 .../account-address/component-test.js         | 23 +++++++++++++++++++
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/app/components/account-address/component.js b/app/components/account-address/component.js
index 44740455..093a9eca 100644
--- a/app/components/account-address/component.js
+++ b/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 });
       }
diff --git a/app/components/account-address/template.hbs b/app/components/account-address/template.hbs
index 13fe1219..f806811b 100644
--- a/app/components/account-address/template.hbs
+++ b/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>
diff --git a/tests/integration/components/account-address/component-test.js b/tests/integration/components/account-address/component-test.js
index 489d4c37..e66a0c0b 100644
--- a/tests/integration/components/account-address/component-test.js
+++ b/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');
+  });
 });