feat(account-send): add send max button

nano-wallet-company · Apr 11, 2018 · 18facbe · 18facbe
1 parent 32b502e
commit 18facbe
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 6 deletions.
diff --git a/app/components/account-send/template.hbs b/app/components/account-send/template.hbs
@@ -3,18 +3,43 @@
     {{#form.element controlType="power-select" label=(t 'wallets.accounts.send.source')
         required=true options=accounts property='source' onChange=(action onChange) as |el|}}
       {{#el.control searchField="id" searchPlaceholder=(t 'wallets.accounts.send.search') as |item|}}
-        <div>{{account-address value=item.id truncate=25}} ({{format-amount (if item.amount item.amount item.balance)}})</div>
+        {{#with (or (get item.content 'content') item) as |content|}}
+          <div>
+            {{account-label account=content truncate=30}}
+            {{format-amount content.balance}} {{t 'NANO'}}
+          </div>
+        {{/with}}
       {{/el.control}}
     {{/form.element}}
 
     {{form.element controlType="text" label=(t 'wallets.accounts.send.destination') property="destination"
         autocomplete='on' minlength=64 maxlength=64 required=true pattern="^xrb_[13](?![lv])[a-z1-9]{59}$"
         placeholder=(t 'wallets.accounts.send.placeholder')}}
 
-    {{form.element controlType="text" label=(t 'wallets.accounts.send.amount')
-        model=(changeset (hash amount=null) ChangeAmountValidations) property='amount'
-        required=true minlength=1 pattern="^\d*\.?\d+$"
-        onChange=(action 'changeAmount' model)}}
+    {{#with (format-amount (or (get model.source.balance 'content') model.source.balance) useGrouping=false) as |max|}}
+      {{#form.element
+          min=0
+          max=max
+          step="1"
+          controlType="number"
+          label=(t 'wallets.accounts.send.amount')
+          model=(changeset (hash amount=null) ChangeAmountValidations)
+          property='amount'
+          required=true minlength=1
+          onChange=(action 'changeAmount' model) as |el|}}
+        <div class="input-group">
+          {{el.control lang="en-US"}}
+          <div class="input-group-append">
+            <button type="button" class="btn btn-outline-secondary"
+                title={{t 'totalAvailableBalance'}}
+                disabled={{if (not model.source) 'disabled'}}
+                {{action (mut el.value) max}}>
+              {{t 'max'}}
+            </button>
+          </div>
+        </div>
+      {{/form.element}}
+    {{/with}}
 
     <div role="group" class="d-flex justify-content-center">
       {{#bs-button disabled=model.isInvalid size="lg" type="none" icon="fa fa-paper-plane" buttonType="submit" class="text-light"}}

diff --git a/app/components/send-button/styles.scss b/app/components/send-button/styles.scss
@@ -98,14 +98,35 @@
       padding: 0 0.75rem;
     }
 
-    button {
+    .ember-power-select-trigger {
+      display: flex;
+      align-items: center;
+      font-size: 0.8rem;
+      line-height: 0.9rem;
+
+      .ember-power-select-selected-item {
+        margin: 0;
+      }
+    }
+
+    button[type='submit'] {
       width: 100%;
       height: 60px;
       border-radius: 33px;
       background-color: $dark-blue;
       border: 0;
     }
 
+    .btn-outline-secondary {
+      border-color: $white;
+      color: $white;
+      text-transform: uppercase;
+
+      &:enabled:hover {
+        background-color: $orange;
+      }
+    }
+
     .invalid-feedback {
       color: $red;
     }

diff --git a/translations/en-us.yaml b/translations/en-us.yaml
@@ -10,6 +10,8 @@ password: 'Password'
 confirmPassword: 'Confirm password'
 overview: 'Overview'
 send: 'Send'
+max: 'Max'
+totalAvailableBalance: 'Total available balance'
 receive: 'Receive'
 close: 'Close'
 settings: 'Settings'