Fix Ledger Fees; Minor UI fixes (#386)

* wallet: fix tx fee when using ledger

* ui: sidenav update

* styling fix

Author: chikeichan

app/background/wallet/service.js

@@ -554,7 +554,10 @@ class WalletService {
   );
 
   send = (to, amount, fee) => this._ledgerProxy(
-    () => this._executeRPC('createsendtoaddress', [to, Number(amount), '', '', false, 'default']),
+    async () => {
+      await this._executeRPC('settxfee', [Number(fee)]);
+      return this._executeRPC('createsendtoaddress', [to, Number(amount), '', '', false, 'default']);
+    },
     async () => {
       const res = await this.client.send(this.name, {
         rate: Number(toBaseUnits(fee)),

app/components/Sidebar/index.js

@@ -49,14 +49,12 @@ class Sidebar extends Component {
     return (
       <div className="sidebar">
         <div className="sidebar__content">
-          <div>
-            <div className="sidebar__logo-wrapper">
-              <Logo />
-            </div>
-            {this.renderNav()}
+          <div className="sidebar__logo-wrapper">
+            <Logo />
           </div>
-          {this.renderFooter()}
+          {this.renderNav()}
         </div>
+        {this.renderFooter()}
       </div>
     );
   }
@@ -90,67 +88,83 @@ class Sidebar extends Component {
           >
             Receive
           </NavLink>
+
           <NavLink
             className="sidebar__action"
-            to="/sign_message"
+            to="/domain_manager"
             activeClassName="sidebar__action--selected"
           >
-            Sign Message
+            Domain Manager
           </NavLink>
+        </div>
+        <div className="sidebar__section">Top-Level Domains</div>
+        <div className="sidebar__actions">
           <NavLink
             className="sidebar__action"
-            to="/verify_message"
+            to="/domains"
             activeClassName="sidebar__action--selected"
           >
-            Verify Message
+            Browse Domains
           </NavLink>
           <NavLink
             className="sidebar__action"
-            to="/domain_manager"
+            to="/bids"
             activeClassName="sidebar__action--selected"
           >
-            Domain Manager
+            Your Bids
           </NavLink>
           <NavLink
             className="sidebar__action"
-            to="/get_coins"
+            to="/watching"
             activeClassName="sidebar__action--selected"
           >
-            Add Funds
+            Watching
           </NavLink>
-        </div>
-        <div className="sidebar__section">Top-Level Domains</div>
-        <div className="sidebar__actions">
           <NavLink
             className="sidebar__action"
-            to="/domains"
+            to="/exchange"
             activeClassName="sidebar__action--selected"
           >
-            Browse Domains
+            Exchange
           </NavLink>
+        </div>
+        { this.renderMisc() }
+      </React.Fragment>
+    );
+  }
+
+  renderMisc() {
+    return (
+      <>
+        <div
+          className="sidebar__section"
+        >
+          Miscellaneous
+        </div>
+        <div className="sidebar__actions">
           <NavLink
             className="sidebar__action"
-            to="/bids"
+            to="/get_coins"
             activeClassName="sidebar__action--selected"
           >
-            Your Bids
+            Add Funds
           </NavLink>
           <NavLink
             className="sidebar__action"
-            to="/watching"
+            to="/sign_message"
             activeClassName="sidebar__action--selected"
           >
-            Watching
+            Sign Message
           </NavLink>
           <NavLink
             className="sidebar__action"
-            to="/exchange"
+            to="/verify_message"
             activeClassName="sidebar__action--selected"
           >
-            Exchange
+            Verify Message
           </NavLink>
         </div>
-      </React.Fragment>
+      </>
     );
   }
 

app/components/Sidebar/sidebar.scss

@@ -2,14 +2,13 @@
 
 .sidebar {
   @extend %col-nowrap;
-
   background-color: $athens-gray;
   box-shadow: 1px 0 0 0 rgba($black, 0.1);
-  padding: 0 2rem 0 1.5rem;
   font-size: 0.9rem;
   flex: 1 1 auto;
   height: 100%;
   overflow-x: hidden;
+  cursor: default;
 
   &--empty {
     .sidebar__logo {
@@ -29,18 +28,25 @@
     @extend %col-nowrap;
     height: 100%;
     justify-content: space-between;
+    padding: 0 2rem 0 1.5rem;
+    flex: 1 1 auto;
+    overflow-y: auto;
   }
 
   &__section {
     @extend %h6;
     color: $manatee-gray;
     text-transform: uppercase;
     padding: 0.5rem 0.75rem 0.5rem 0;
+
+    &--clickable {
+      cursor: pointer;
+    }
   }
 
   &__actions {
     @extend %col-nowrap;
-    margin-bottom: 1rem;
+    margin-bottom: .5rem;
   }
 
   &__action {
@@ -73,13 +79,17 @@
 
   &__footer {
     @extend %col-nowrap;
-    bottom: 1rem;
+    padding-bottom: 1rem;
     position: relative;
+    flex: 0 0 auto;
+    border-top: 1px solid rgba($black, 0.1);
+    background-color: rgba($white, 0.5);
 
     &__row {
       @extend %col-nowrap;
-      padding: 0.5rem 0.75rem;
+      padding: .25rem .75rem .5rem;
     }
+
     &__title {
       @extend %h6;
       opacity: 0.5;

app/pages/Account/account.scss

@@ -7,11 +7,12 @@
 
   &__header {
     @extend %row-nowrap;
-    padding: 1rem 0;
+    padding: 1rem;
     align-items: center;
     background: rgba($black, 0.04);
     border: solid 1px #f1f1f3;
     overflow-x: auto;
+    cursor: default;
 
     &__section {
       padding: 0 1rem;
@@ -20,10 +21,11 @@
       // Spendable block
       &:first-child {
         text-align: right;
-        border-right: solid 2px rgba($black, 0.5);
+        border-right: solid 1px rgba($black, 0.25);
 
         & > .label {
           visibility: visible;
+          color: rgba($black, 0.25);
         }
         & > .amount {
           font-weight: 700;
@@ -36,24 +38,24 @@
       }
 
       & > .label {
-        font-size: 0.75rem;
+        font-size: 0.6875rem;
         font-weight: 700;
         visibility: hidden;
+        color: rgba($black, 0.25);
       }
 
       & > .amount {
-        margin: 0;
         font-size: 1.125rem;
         font-weight: 500;
-        line-height: 1.75rem;
+        margin: .3125rem 0 .125rem;
       }
 
       & > .subtext {
         display: inline-block;
-        font-size: 0.875rem;
+        font-size: 0.8125rem;
         font-weight: 500;
         line-height: 1.25rem;
-        color: rgba($black, 0.6);
+        color: rgba($black, 0.25);
       }
     }
 

app/pages/Account/index.js

@@ -175,7 +175,7 @@ export default class Account extends Component {
         <div className="account__header__section">
           <span className="label">SPENDABLE</span>
           <p className="amount">
-            {displayBalance(spendableBalance.HNS || 0, true)}
+            {displayBalance(spendableBalance.HNS || 0, true, 2)}
           </p>
           <span className="subtext">
             ~${spendableBalance.converted || "0.00"} {spendableBalance.currency}
@@ -187,7 +187,7 @@ export default class Account extends Component {
           <div className="account__header__section">
             <span className="label">LOCKED</span>
             <p className="amount">
-              {displayBalance(lockedBalance.bidding.HNS, true)}
+              {displayBalance(lockedBalance.bidding.HNS, true, 2)}
             </p>
             <span className="subtext">
               In bids ({lockedBalance.bidding.num}{" "}
@@ -205,7 +205,7 @@ export default class Account extends Component {
           <div className="account__header__section">
             <span className="label">LOCKED</span>
             <p className="amount">
-              {displayBalance(lockedBalance.revealable.HNS, true)}
+              {displayBalance(lockedBalance.revealable.HNS, true, 2)}
             </p>
             <span className="subtext">
               In reveal ({lockedBalance.revealable.num}{" "}
@@ -223,7 +223,7 @@ export default class Account extends Component {
           <div className="account__header__section">
             <span className="label">LOCKED</span>
             <p className="amount">
-              {displayBalance(lockedBalance.finished.HNS, true)}
+              {displayBalance(lockedBalance.finished.HNS, true, 2)}
             </p>
             <span className="subtext">
               In finished auctions ({lockedBalance.finished.num}{" "}

app/utils/balances.js

@@ -4,8 +4,8 @@ import {consensus} from "hsd/lib/protocol";
 const DECIMALS = 6;
 const UNIT_DIVISOR = 1000000;
 
-export function displayBalance(bal, withUnit) {
-  const ret = new BigNumber(bal).div(UNIT_DIVISOR).toFixed(DECIMALS);
+export function displayBalance(bal, withUnit, decimals = DECIMALS) {
+  const ret = new BigNumber(bal).div(UNIT_DIVISOR).toFixed(decimals);
   return withUnit ? `${ret} HNS` : ret;
 }
 

package-lock.json

@@ -2,7 +2,7 @@
   "name": "bob-wallet",
   "productName": "Bob",
   "author": "Kyokan Group, Inc.",
-  "version": "0.8.0-rc.1",
+  "version": "0.8.0",
   "description": "A Handshake wallet and auction manager.",
   "scripts": {
     "build": "./scripts/package.sh",