Fix rounding issue when sending max tokens (#5695)

* Fix rounding issue when sending max tokens

* Ensure amount row shows exact amount of max tokens on send screen (#2)

* Fix tests

* Change stored redux value from BigNumber to hex string. Fix TokenInput default value

2 files changed, 17 insertions, 21 deletions

diff --git a/ui/app/components/transaction-view-balance/index.scss b/ui/app/components/transaction-view-balance/index.scss
index 659f896ff..43e87459b 100644
--- a/ui/app/components/transaction-view-balance/index.scss
+++ b/ui/app/components/transaction-view-balance/index.scss
@@ -6,6 +6,12 @@
   height: 54px;
   min-width: 0;
 
+  @media screen and (max-width: $break-small) {
+    flex-direction: column;
+    height: initial;
+    width: 100%;
+  }
+
   &__balance {
     margin: 0 12px;
     display: flex;
@@ -15,17 +21,8 @@
     @media screen and (max-width: $break-small) {
       align-items: center;
       margin: 16px 0;
-    }
-  }
-
-  &__token-balance {
-    margin-left: 12px;
-    font-size: 1.5rem;
-
-    @media screen and (max-width: $break-small) {
-      margin: 12px 0;
-      margin-left: 0;
-      font-size: 1.75rem;
+      padding: 0 16px;
+      max-width: 100%;
     }
   }
 
@@ -34,6 +31,7 @@
 
     @media screen and (max-width: $break-small) {
       font-size: 1.75rem;
+      width: 100%;
     }
   }
 
@@ -51,6 +49,7 @@
 
     @media screen and (max-width: $break-small) {
       flex-direction: column;
+      width: 100%;
     }
   }
 
@@ -71,9 +70,4 @@
       margin-right: 12px;
     }
   }
-
-  @media screen and (max-width: $break-small) {
-    flex-direction: column;
-    height: initial
-  }
 }
diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
index 402b0f486..a24b97478 100644
--- a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
+++ b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
@@ -26,11 +26,13 @@ export default class TransactionViewBalance extends PureComponent {
 
     return selectedToken
       ? (
-        <TokenBalance
-          token={selectedToken}
-          withSymbol
-          className="transaction-view-balance__token-balance"
-        />
+        <div className="transaction-view-balance__balance">
+          <TokenBalance
+            token={selectedToken}
+            withSymbol
+            className="transaction-view-balance__primary-balance"
+          />
+        </div>
       ) : (
         <div className="transaction-view-balance__balance">
           <UserPreferencedCurrencyDisplay