feat(settings): add ability to label accounts

app/components/account-card/styles.scss

@@ -1,4 +1,5 @@
 button {
+  cursor: pointer;
   border: 0;
   outline: none;
   background-color: transparent;
@@ -25,6 +26,13 @@ button {
     transform: scale(1.10) !important;
   }
 
+  .settings {
+    outline: none;
+    position: absolute;
+    top: 5px;
+    right: 10px;
+  }
+
   img.qr-code {
     display: block;
     height: auto;
@@ -56,26 +64,23 @@ button {
     font-size: 14px;
   }
 
-  .address {
-    cursor: pointer;
+  .label {
     width: 100%;
-    overflow-wrap: break-word;
-    background-color: $dark-purple;
-    color: white;
-    text-align: center;
   }
 
   .copy-btn {
-    border: 0;
     outline: none;
-    cursor: pointer;
-    background-color: $dark-purple;
-    font-size: 0.7rem;
-    color: white;
+    border: 0;
     margin: 0;
     padding: 10px;
     height: 60px;
-    width: 100%;
+    font-size: 0.7rem;
+    background-color: $dark-purple;
+    color: white;
     overflow-wrap: break-word;
+
+    big {
+      font-size: 1.1rem;
+    }
   }
 }

app/components/account-card/template.hbs

@@ -2,6 +2,10 @@
   <div class="account-card-content">
     {{#if account.id}}
       {{#if hideHistory}}
+        {{#link-to 'wallets.overview.accounts.settings' account bubbles=false class='settings' title=(t 'accountSettings')}}
+          {{bs-tooltip fade=true delayShow=500 placement='top' title=(t 'accountSettings')}}
+          {{fa-icon 'cog' ariaLabel=(t 'accountSettings')}}
+        {{/link-to}}
         {{qr-code text=account.id width=170 height=170}}
       {{/if}}
       <p class="balance">
@@ -12,10 +16,10 @@
         <br>
         <sub>+{{format-amount account.pending}}</sub>
       </p>
-      <div role="button" class="address" {{action (optional) bubbles=false}}>
-        {{bs-tooltip fade=true delayShow=1000 placement='bottom' title=(t 'copyValue' value=(concat (slice 0 9 account.id)))}}
-        {{#copy-button tagName='div' buttonType=null clipboardText=account.id success=(action 'copyAddress' (concat (slice 0 9 account.id) '...' (slice 59 64 account.id)))}}
-          {{account-address value=account.id}}
+      <div role="button" class="label" {{action (optional) bubbles=false}}>
+        {{bs-tooltip fade=true delayShow=1000 placement='bottom' title=(t 'copyAddress')}}
+        {{#copy-button tagName='div' class="d-flex flex-column justify-content-center" buttonType=null clipboardText=account.id success=(action 'copyAddress' (concat (slice 0 9 account.id) '...' (slice 59 64 account.id)))}}
+          {{account-label class="flex-row w-100 align-self-center" account=account}}
         {{/copy-button}}
       </div>
     {{else}}

app/components/account-label/component.js

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

app/components/account-label/styles.scss

@@ -0,0 +1,2 @@
+& {
+}

app/components/account-label/template.hbs

@@ -0,0 +1,7 @@
+{{#if settings.label}}
+  <big>{{settings.label}}</big>
+  <br>
+  {{account-address value=account.id truncate=true}}
+{{else}}
+  {{account-address value=account.id}}
+{{/if}}

app/components/account-settings/component.js

@@ -0,0 +1,26 @@
+import Component from '@ember/component';
+import { get } from '@ember/object';
+import { tryInvoke } from '@ember/utils';
+
+import { storageFor } from 'ember-local-storage';
+
+import { action } from 'ember-decorators/object';
+
+import ChangeAccountSettingsValidations from '../../validations/change-account-settings';
+
+export default Component.extend({
+  ChangeAccountSettingsValidations,
+
+  settings: storageFor('settings', 'account'),
+
+  account: null,
+  onSave: null,
+  onCancel: null,
+
+  @action
+  save(changeset) {
+    const settings = this.get('settings');
+    const label = get(changeset, 'label');
+    tryInvoke(settings, 'setProperties', [{ label }]);
+  },
+});

app/components/account-settings/template.hbs

@@ -0,0 +1,27 @@
+{{#with (changeset (hash label=settings.label) ChangeAccountSettingsValidations) as |model|}}
+  {{#bs-modal onHide=(action (optional onCancel)) as |modal|}}
+    {{#modal.header}}
+      <h4 class="modal-title">
+        {{t 'accountSettings'}}
+      </h4>
+    {{/modal.header}}
+    {{#modal.body}}
+      {{#bs-form model=model onSubmit=(action (queue (action 'save' model) (action (optional onSave)))) as |form|}}
+        <div class="form-group">
+          <label>{{t 'account'}}</label>
+          {{account-address class="form-control-plaintext" value=account.id truncate=true}}
+        </div>
+        {{form.element controlType="text" label=(t 'label') property="label"}}
+      {{/bs-form}}
+    {{/modal.body}}
+    {{#modal.footer}}
+      {{#bs-button onClick=(action modal.close) type="secondary"}}
+        {{t 'cancel'}}
+      {{/bs-button}}
+      {{#bs-button type="primary" buttonType='submit'}}
+        {{fa-icon 'check'}}
+        {{t 'save'}}
+      {{/bs-button}}
+    {{/modal.footer}}
+  {{/bs-modal}}
+{{/with}}

app/components/navigation-bar/template.hbs

@@ -29,7 +29,7 @@
       <li class="nav-item">
         <a href="#" class="nav-link">
           {{t 'settings'}}
-          {{#bs-popover placement="bottom" title=(t 'settings')}}
+          {{#bs-popover placement="bottom" triggerEvents='focus' title=(t 'settings')}}
             {{wallet-settings wallet=wallet representative=wallet.representative onChangeRepresentative=(action onChangeRepresentative) onChangePassword=(action onChangePassword)}}
           {{/bs-popover}}
         </a>

app/components/wallet-settings/template.hbs

@@ -1,11 +1,4 @@
 {{#bs-form model=(changeset (hash representative=representative) ChangeRepresentativeValidations) onSubmit=(action onChangeRepresentative wallet) as |form|}}
-  <div class="form-group">
-    <label>{{t 'wallet'}}</label>
-    <p translate='no'>
-      <code>{{wallet.id}}</code>
-    </p>
-  </div>
-
   {{#form.element controlType="text" label='Representative' property='representative'
       maxlength=64 required=true pattern="^xrb_[13](?![lv])[a-z1-9]{59}$" as |el|}}
     {{el.control class="text-truncate text-monospace"}}

app/router.js

@@ -23,6 +23,7 @@ Router.map(function routerMap() {
       this.route('accounts', { path: '/:account_id' }, function accountsRoute() {
         this.route('send');
         this.route('history');
+        this.route('settings');
       });
     });
     this.route('send');

app/utils/generate-seed.js

@@ -2,5 +2,5 @@ import bip39 from 'npm:bip39';
 
 export default function generateSeed() {
   const mnemonic = bip39.generateMnemonic();
-  return bip39.mnemonicToSeedHex(mnemonic).substr(0, 64);
+  return bip39.mnemonicToSeedHex(mnemonic).slice(0, 64);
 }

app/validations/change-account-settings.js

@@ -0,0 +1,5 @@
+import { validatePresence } from 'ember-changeset-validations/validators';
+
+export default {
+  label: validatePresence(true),
+};

app/wallets/overview/accounts/settings/route.js

@@ -0,0 +1,21 @@
+import Route from '@ember/routing/route';
+
+import { service } from 'ember-decorators/service';
+import { action } from 'ember-decorators/object';
+
+export default Route.extend({
+  @service intl: null,
+  @service flashMessages: null,
+
+  @action
+  save() {
+    const message = this.get('intl').t('accountSettingsSaved');
+    this.get('flashMessages').success(message);
+    return this.transitionTo('wallets.overview');
+  },
+
+  @action
+  cancel() {
+    return this.transitionTo('wallets.overview');
+  },
+});

app/wallets/overview/accounts/settings/template.hbs

@@ -0,0 +1 @@
+{{account-settings account=model onSave=(action (route-action 'save')) onCancel=(action (route-action 'cancel'))}}

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

@@ -23,12 +23,13 @@ describe('Integration | Component | account-card', () => {
     //   {{/account-card}}
     // `);
 
-    const account = {
+    const store = this.container.lookup('service:store');
+    const account = store.createRecord('account', {
       id: '1',
       wallet: '1',
       balance: '1000000000000000000000000000000',
       pending: '0',
-    };
+    });
 
     this.set('account', account);
     this.render(hbs`{{account-card account=account}}`);

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

@@ -23,13 +23,14 @@ describe('Integration | Component | account-carousel', () => {
     //   {{/account-carousel}}
     // `);
 
+    const store = this.container.lookup('service:store');
     const accounts = [
-      {
+      store.createRecord('account', {
         id: '1',
         wallet: '1',
         balance: '1000000000000000000000000000000',
         pending: '0',
-      },
+      }),
     ];
 
     this.set('accounts', accounts);

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

@@ -0,0 +1,24 @@
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { setupComponentTest } from 'ember-mocha';
+import hbs from 'htmlbars-inline-precompile';
+
+describe('Integration | Component | account-label', () => {
+  setupComponentTest('account-label', {
+    integration: true,
+  });
+
+  it('renders', function () {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.on('myAction', function(val) { ... });
+    // Template block usage:
+    // this.render(hbs`
+    //   {{#account-label}}
+    //     template content
+    //   {{/account-label}}
+    // `);
+
+    this.render(hbs`{{account-label}}`);
+    expect(this.$()).to.have.length(1);
+  });
+});

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

@@ -0,0 +1,38 @@
+import { expect } from 'chai';
+import { beforeEach, describe, it } from 'mocha';
+import { setupComponentTest } from 'ember-mocha';
+import hbs from 'htmlbars-inline-precompile';
+
+describe('Integration | Component | account-settings', () => {
+  setupComponentTest('account-settings', {
+    integration: true,
+  });
+
+  beforeEach(function () {
+    this.inject.service('intl');
+    this.get('intl').setLocale('en-us');
+  });
+
+  it('renders', function () {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.on('myAction', function(val) { ... });
+    // Template block usage:
+    // this.render(hbs`
+    //   {{#account-settings}}
+    //     template content
+    //   {{/account-settings}}
+    // `);
+
+    const store = this.container.lookup('service:store');
+    const account = store.createRecord('account', {
+      id: '1',
+      wallet: '1',
+      balance: '1000000000000000000000000000000',
+      pending: '0',
+    });
+
+    this.set('account', account);
+    this.render(hbs`{{account-settings account=account}}`);
+    expect(this.$()).to.have.length(1);
+  });
+});

tests/integration/components/wallet-overview/component-test.js

@@ -29,13 +29,14 @@ describe('Integration | Component | wallet overview', () => {
       accounts: ['1'],
     };
 
+    const store = this.container.lookup('service:store');
     const accounts = [
-      {
+      store.createRecord('account', {
         id: '1',
         wallet: '1',
         balance: '1000000000000000000000000000000',
         pending: '0',
-      },
+      }),
     ];
 
     const page = 1;

tests/unit/wallets/overview/accounts/settings/route-test.js

@@ -0,0 +1,18 @@
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { setupTest } from 'ember-mocha';
+
+describe('Unit | Route | wallets/overview/accounts/settings', () => {
+  setupTest('route:wallets/overview/accounts/settings', {
+    // Specify the other units that are required for this test.
+    needs: [
+      'service:intl',
+      'service:flashMessages',
+    ],
+  });
+
+  it('exists', function () {
+    const route = this.subject();
+    expect(route).to.be.ok;
+  });
+});

translations/en-us.yaml

@@ -32,7 +32,7 @@ verifying: 'Verifying {asset}...'
 extracting: 'Extracting {asset}...'
 starting: 'Starting node'
 currency: '{amount}'
-copyValue: 'Copy {value}...'
+copyAddress: 'Copy address'
 addressCopied: 'Address copied: {address}'
 status:
   state: 'Status'
@@ -45,6 +45,10 @@ balancePending: 'Balance Pending'
 NANO: 'NANO'
 BTC: 'BTC'
 USD: 'USD'
+EUR: 'EUR'
+accountSettings: 'Account Settings'
+accountSettingsSaved: 'Account settings saved!'
+label: 'Label'
 login:
   lead: 'Login to unlock your wallet.'
   instructions: 'You can login to continue using your current wallet by unlocking it. Alternatively, you may choose to create a new wallet.'