Merge pull request #4575 from whymarrh/token-amount-overflow

Handle token amount overflows

8 files changed, 35 insertions, 16 deletions

diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js
index 823c72a3a..8af654319 100644
--- a/test/e2e/beta/from-import-beta-ui.spec.js
+++ b/test/e2e/beta/from-import-beta-ui.spec.js
@@ -348,8 +348,9 @@ describe('Using MetaMask with an existing account', function () {
 
     it('renders the balance for the new token', async () => {
       const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
+      await driver.wait(until.elementTextMatches(balance, /^0\s*BAT\s*$/), 10000)
       const tokenAmount = await balance.getText()
-      assert.equal(tokenAmount, '0BAT')
+      assert.ok(/^0\s*BAT\s*$/.test(tokenAmount))
       await delay(regularDelayMs)
     })
   })
@@ -421,9 +422,9 @@ describe('Using MetaMask with an existing account', function () {
 
     it('renders the balance for the new token', async () => {
       const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
-      await driver.wait(until.elementTextIs(balance, '100TST'))
+      await driver.wait(until.elementTextMatches(balance, /^100\s*TST\s*$/), 10000)
       const tokenAmount = await balance.getText()
-      assert.equal(tokenAmount, '100TST')
+      assert.ok(/^100\s*TST\s*$/.test(tokenAmount))
       await delay(regularDelayMs)
     })
   })
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index d911b91ed..71329bff7 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -430,9 +430,9 @@ describe('MetaMask', function () {
 
     it('renders the balance for the chosen token', async () => {
       const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
-      await driver.wait(until.elementTextIs(balance, '0BAT'))
+      await driver.wait(until.elementTextMatches(balance, /^0\s*BAT\s*$/), 10000)
       const tokenAmount = await balance.getText()
-      assert.equal(tokenAmount, '0BAT')
+      assert.ok(/^0\s*BAT\s*$/.test(tokenAmount))
       await delay(regularDelayMs)
     })
   })
@@ -504,9 +504,9 @@ describe('MetaMask', function () {
 
     it('renders the balance for the new token', async () => {
       const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
-      await driver.wait(until.elementTextIs(balance, '100TST'))
+      await driver.wait(until.elementTextMatches(balance, /^100\s*TST\s*$/))
       const tokenAmount = await balance.getText()
-      assert.equal(tokenAmount, '100TST')
+      assert.ok(/^100\s*TST\s*$/.test(tokenAmount))
       await delay(regularDelayMs)
     })
   })
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index dce9b0449..424048745 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -36,6 +36,7 @@ IdenticonComponent.prototype.render = function () {
         key: 'identicon-' + address,
         style: {
           display: 'flex',
+          flexShrink: 0,
           alignItems: 'center',
           justifyContent: 'center',
           height: diameter,
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index e410bc070..9c8ce0044 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -149,7 +149,7 @@ CurrencyDisplay.prototype.render = function () {
           } : {}),
           ref: input => { this.currencyInput = input },
           style: {
-            width: this.getInputWidth(valueToRender, readOnly),
+            minWidth: this.getInputWidth(valueToRender, readOnly),
           },
           min: 0,
         }),
diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js
index 1900ccec7..df3bd59bb 100644
--- a/ui/app/components/token-balance.js
+++ b/ui/app/components/token-balance.js
@@ -34,7 +34,7 @@ TokenBalance.prototype.render = function () {
   return isLoading
     ? h('span', '')
     : h('span.token-balance', [
-      h('span.token-balance__amount', string),
+      h('span.hide-text-overflow.token-balance__amount', string),
       !balanceOnly && h('span.token-balance__symbol', symbol),
     ])
 }
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index 3560b0b0c..3614aa868 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -1,6 +1,5 @@
 .currency-display {
   height: 54px;
-  width: 100%ß;
   border: 1px solid $alto;
   border-radius: 4px;
   background-color: $white;
@@ -21,7 +20,7 @@
     line-height: 22px;
     border: none;
     outline: 0 !important;
-    max-width: 100%;
+    max-width: 22ch;
   }
 
   &__primary-currency {
@@ -47,6 +46,9 @@
   &__input-wrapper {
     position: relative;
     display: flex;
+    flex: 1;
+    max-width: 100%;
+    overflow-x: scroll;
 
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -75,4 +77,4 @@
       display: none;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 09d66aedd..eba93ecb4 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -27,25 +27,37 @@
     @media screen and (max-width: $break-small) {
       flex-direction: column;
       flex: 0 0 auto;
+      max-width: 100%;
     }
 
     @media screen and (min-width: $break-large) {
       flex-direction: row;
       flex-grow: 3;
+      min-width: 0;
     }
   }
 
   .balance-display {
     .token-amount {
       color: $black;
+      max-width: 100%;
+
+      .token-balance {
+        display: flex;
+      }
     }
 
     @media screen and (max-width: $break-small) {
+      max-width: 100%;
       text-align: center;
 
       .token-amount {
         font-size: 1.75rem;
         margin-top: 1rem;
+
+        .token-balance {
+          flex-direction: column;
+        }
       }
 
       .fiat-amount {
@@ -56,9 +68,10 @@
     }
 
     @media screen and (min-width: $break-large) {
-      margin-left: .8em;
+      margin: 0 .8em;
       justify-content: flex-start;
       align-items: flex-start;
+      min-width: 0;
 
       .token-amount {
         font-size: 1.5rem;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index bbe0ee661..667e45ba2 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -26,14 +26,16 @@ $wallet-view-bg: $alabaster;
 //Account and transaction details
 .account-and-transaction-details {
   display: flex;
-  flex: 1 0 auto;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 // tx view
 
 .tx-view {
-  flex: 63.5 0 66.5%;
+  flex: 1 1 66.5%;
   background: $tx-view-bg;
+  min-width: 0;
 
   // No title on mobile
   @media screen and (max-width: 575px) {
@@ -286,7 +288,7 @@ $wallet-view-bg: $alabaster;
 }
 
 .token-balance__amount {
-  padding-right: 6px;
+  padding: 0 6px;
 }
 
 // first time