Merge pull request #5570 from alextsg/i5558-account-display-width

Fix account display width for large currency values

13 files changed, 68 insertions, 44 deletions

diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js
index b782a1c40..d2c3f8958 100644
--- a/test/e2e/beta/from-import-beta-ui.spec.js
+++ b/test/e2e/beta/from-import-beta-ui.spec.js
@@ -319,7 +319,7 @@ describe('Using MetaMask with an existing account', function () {
 
       const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
       assert.equal(txValues.length, 1)
-      assert.equal(await txValues[0].getText(), '-1 ETH')
+      assert.ok(/-1\s*ETH/.test(await txValues[0].getText()))
     })
   })
 
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index f29f242c1..eaa7d18cd 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -371,7 +371,7 @@ describe('MetaMask', function () {
 
     it('balance renders', async () => {
       const balance = await findElement(driver, By.css('.balance-display .token-amount'))
-      await driver.wait(until.elementTextMatches(balance, /100.+ETH/))
+      await driver.wait(until.elementTextMatches(balance, /100\s*ETH/))
       await delay(regularDelayMs)
     })
   })
@@ -420,7 +420,7 @@ describe('MetaMask', function () {
 
       if (process.env.SELENIUM_BROWSER !== 'firefox') {
         const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
-        await driver.wait(until.elementTextMatches(txValues, /-1\sETH/), 10000)
+        await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
       }
     })
   })
@@ -462,7 +462,7 @@ describe('MetaMask', function () {
       assert.equal(transactions.length, 2)
 
       const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
-      await driver.wait(until.elementTextMatches(txValues, /-3\sETH/), 10000)
+      await driver.wait(until.elementTextMatches(txValues, /-3\s*ETH/), 10000)
     })
   })
 
@@ -540,7 +540,7 @@ describe('MetaMask', function () {
 
       await findElements(driver, By.css('.transaction-list-item'))
       const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
-      await driver.wait(until.elementTextMatches(txListValue, /-4\sETH/), 10000)
+      await driver.wait(until.elementTextMatches(txListValue, /-4\s*ETH/), 10000)
       await txListValue.click()
       await delay(regularDelayMs)
 
@@ -574,7 +574,7 @@ describe('MetaMask', function () {
       }, 10000)
 
       const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
-      await driver.wait(until.elementTextMatches(txValues[0], /-4\sETH/), 10000)
+      await driver.wait(until.elementTextMatches(txValues[0], /-4\s*ETH/), 10000)
 
       // const txAccounts = await findElements(driver, By.css('.tx-list-account'))
       // const firstTxAddress = await txAccounts[0].getText()
@@ -606,7 +606,7 @@ describe('MetaMask', function () {
       }, 10000)
 
       const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
-      await driver.wait(until.elementTextMatches(txValues, /-0\sETH/), 10000)
+      await driver.wait(until.elementTextMatches(txValues, /-0\s*ETH/), 10000)
 
       await closeAllWindowHandlesExcept(driver, [extension, dapp])
       await driver.switchTo().window(extension)
@@ -616,9 +616,9 @@ describe('MetaMask', function () {
       const balance = await findElement(driver, By.css('.transaction-view-balance__primary-balance'))
       await delay(regularDelayMs)
       if (process.env.SELENIUM_BROWSER !== 'firefox') {
-        await driver.wait(until.elementTextMatches(balance, /^92.*ETH.*$/), 10000)
+        await driver.wait(until.elementTextMatches(balance, /^92.*\s*ETH.*$/), 10000)
         const tokenAmount = await balance.getText()
-        assert.ok(/^92.*ETH.*$/.test(tokenAmount))
+        assert.ok(/^92.*\s*ETH.*$/.test(tokenAmount))
         await delay(regularDelayMs)
       }
     })
@@ -764,7 +764,7 @@ describe('MetaMask', function () {
       // test cancelled on firefox until https://github.com/mozilla/geckodriver/issues/906 is resolved,
       // or possibly until we use latest version of firefox in the tests
       if (process.env.SELENIUM_BROWSER !== 'firefox') {
-        await driver.wait(until.elementTextMatches(txValues[0], /-50\sTST/), 10000)
+        await driver.wait(until.elementTextMatches(txValues[0], /-50\s*TST/), 10000)
       }
 
       driver.wait(async () => {
@@ -798,7 +798,7 @@ describe('MetaMask', function () {
 
       await findElements(driver, By.css('.transaction-list__pending-transactions'))
       const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
-      await driver.wait(until.elementTextMatches(txListValue, /-7\sTST/), 10000)
+      await driver.wait(until.elementTextMatches(txListValue, /-7\s*TST/), 10000)
       await txListValue.click()
       await delay(regularDelayMs)
 
@@ -851,7 +851,7 @@ describe('MetaMask', function () {
       }, 10000)
 
       const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
-      await driver.wait(until.elementTextMatches(txValues[0], /-7\sTST/))
+      await driver.wait(until.elementTextMatches(txValues[0], /-7\s*TST/))
       const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))
       await driver.wait(until.elementTextMatches(txStatuses[0], /Sent\sToken/))
 
@@ -897,7 +897,7 @@ describe('MetaMask', function () {
 
       const [txListItem] = await findElements(driver, By.css('.transaction-list-item'))
       const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
-      await driver.wait(until.elementTextMatches(txListValue, /-7\sTST/))
+      await driver.wait(until.elementTextMatches(txListValue, /-7\s*TST/))
       await txListItem.click()
       await delay(regularDelayMs)
     })
@@ -974,7 +974,7 @@ describe('MetaMask', function () {
       }, 10000)
 
       const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
-      await driver.wait(until.elementTextMatches(txValues[0], /-7\sTST/))
+      await driver.wait(until.elementTextMatches(txValues[0], /-7\s*TST/))
       const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))
       await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/))
     })
@@ -1027,7 +1027,7 @@ describe('MetaMask', function () {
 
     it('renders the balance for the chosen token', async () => {
       const balance = await findElement(driver, By.css('.transaction-view-balance__token-balance'))
-      await driver.wait(until.elementTextMatches(balance, /0\sBAT/))
+      await driver.wait(until.elementTextMatches(balance, /0\s*BAT/))
       await delay(regularDelayMs)
     })
   })
diff --git a/test/integration/lib/currency-localization.js b/test/integration/lib/currency-localization.js
index 8d5acf5d0..f6b751ba2 100644
--- a/test/integration/lib/currency-localization.js
+++ b/test/integration/lib/currency-localization.js
@@ -25,5 +25,5 @@ async function runCurrencyLocalizationTest (assert, done) {
   const txView = await queryAsync($, '.transaction-view')
   const heroBalance = await findAsync($(txView), '.transaction-view-balance__balance')
   const fiatAmount = await findAsync($(heroBalance), '.transaction-view-balance__secondary-balance')
-  assert.equal(fiatAmount[0].textContent, '₱102,707.97 PHP')
+  assert.equal(fiatAmount[0].textContent, '₱102,707.97PHP')
 }
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
index e13016e68..271dd91cf 100644
--- a/test/integration/lib/send-new-ui.js
+++ b/test/integration/lib/send-new-ui.js
@@ -112,9 +112,9 @@ async function runSendFlowTest (assert, done) {
   errorMessage = $('.send-v2__error')
   assert.equal(errorMessage.length, 0, 'send should stop rendering amount error message after amount is corrected')
 
-  await customizeGas(assert, 0, 21000, '0 ETH', '$0.00 USD')
-  await customizeGas(assert, 1, 21000, '0.000021 ETH', '$0.03 USD')
-  await customizeGas(assert, 500, 60000, '0.03 ETH', '$36.03 USD')
+  await customizeGas(assert, 0, 21000, '0ETH', '$0.00USD')
+  await customizeGas(assert, 1, 21000, '0.000021ETH', '$0.03USD')
+  await customizeGas(assert, 500, 60000, '0.03ETH', '$36.03USD')
 
   const sendButton = await queryAsync($, 'button.btn-primary.btn--large.page-container__footer-button')
   assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index e1fcf08e0..c1b713ccd 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -81,11 +81,12 @@ BalanceComponent.prototype.renderBalance = function () {
   }
 
   return h('div.flex-column.balance-display', {}, [
-    h('div.token-amount', {}, h(UserPreferencedCurrencyDisplay, {
+    h(UserPreferencedCurrencyDisplay, {
+      className: 'token-amount',
       value: balanceValue,
       type: PRIMARY,
       ethNumberOfDecimals: 3,
-    })),
+    }),
 
     showFiat && h(UserPreferencedCurrencyDisplay, {
       value: balanceValue,
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
index 5f5717be3..f39e60269 100644
--- a/ui/app/components/currency-display/currency-display.component.js
+++ b/ui/app/components/currency-display/currency-display.component.js
@@ -10,6 +10,7 @@ export default class CurrencyDisplay extends PureComponent {
     prefix: PropTypes.string,
     prefixComponent: PropTypes.node,
     style: PropTypes.object,
+    suffix: PropTypes.string,
     // Used in container
     currency: PropTypes.oneOf([ETH]),
     denomination: PropTypes.oneOf([GWEI]),
@@ -19,17 +20,25 @@ export default class CurrencyDisplay extends PureComponent {
   }
 
   render () {
-    const { className, displayValue, prefix, prefixComponent, style } = this.props
+    const { className, displayValue, prefix, prefixComponent, style, suffix } = this.props
     const text = `${prefix || ''}${displayValue}`
+    const title = `${text} ${suffix}`
 
     return (
       <div
         className={classnames('currency-display-component', className)}
         style={style}
-        title={text}
+        title={title}
       >
         { prefixComponent}
         <span className="currency-display-component__text">{ text }</span>
+        {
+          suffix && (
+            <span className="currency-display-component__suffix">
+              { suffix }
+            </span>
+          )
+        }
       </div>
     )
   }
diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js
index b387229b5..1b3fe74da 100644
--- a/ui/app/components/currency-display/currency-display.container.js
+++ b/ui/app/components/currency-display/currency-display.container.js
@@ -26,14 +26,15 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const convertedValue = getValueFromWeiHex({
     value, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination,
   })
-  const formattedValue = formatCurrency(convertedValue, toCurrency)
-  const displayValue = hideLabel ? formattedValue : `${formattedValue} ${toCurrency.toUpperCase()}`
+  const displayValue = formatCurrency(convertedValue, toCurrency)
+  const suffix = hideLabel ? undefined : toCurrency.toUpperCase()
 
   return {
     ...restStateProps,
     ...dispatchProps,
     ...restOwnProps,
     displayValue,
+    suffix,
   }
 }
 
diff --git a/ui/app/components/currency-display/index.scss b/ui/app/components/currency-display/index.scss
index 8c0196102..313c932b8 100644
--- a/ui/app/components/currency-display/index.scss
+++ b/ui/app/components/currency-display/index.scss
@@ -7,4 +7,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  &__suffix {
+    padding-left: 4px;
+  }
 }
diff --git a/ui/app/components/currency-display/tests/currency-display.container.test.js b/ui/app/components/currency-display/tests/currency-display.container.test.js
index b9f98c543..fb6678776 100644
--- a/ui/app/components/currency-display/tests/currency-display.container.test.js
+++ b/ui/app/components/currency-display/tests/currency-display.container.test.js
@@ -45,7 +45,8 @@ describe('CurrencyDisplay container', () => {
             currency: 'usd',
           },
           result: {
-            displayValue: '$2.80 USD',
+            displayValue: '$2.80',
+            suffix: 'USD',
           },
         },
         {
@@ -53,7 +54,8 @@ describe('CurrencyDisplay container', () => {
             value: '0x2386f26fc10000',
           },
           result: {
-            displayValue: '$2.80 USD',
+            displayValue: '$2.80',
+            suffix: 'USD',
           },
         },
         {
@@ -63,7 +65,8 @@ describe('CurrencyDisplay container', () => {
             numberOfDecimals: 3,
           },
           result: {
-            displayValue: '1.266 ETH',
+            displayValue: '1.266',
+            suffix: 'ETH',
           },
         },
         {
@@ -75,6 +78,7 @@ describe('CurrencyDisplay container', () => {
           },
           result: {
             displayValue: '1.266',
+            suffix: undefined,
           },
         },
         {
@@ -86,6 +90,7 @@ describe('CurrencyDisplay container', () => {
           },
           result: {
             displayValue: '1',
+            suffix: undefined,
           },
         },
         {
@@ -97,6 +102,7 @@ describe('CurrencyDisplay container', () => {
           },
           result: {
             displayValue: '1000000000',
+            suffix: undefined,
           },
         },
         {
@@ -108,6 +114,7 @@ describe('CurrencyDisplay container', () => {
           },
           result: {
             displayValue: '1e-9',
+            suffix: undefined,
           },
         },
       ]
diff --git a/ui/app/components/currency-input/tests/currency-input.component.test.js b/ui/app/components/currency-input/tests/currency-input.component.test.js
index 8de0ef863..5db53066f 100644
--- a/ui/app/components/currency-input/tests/currency-input.component.test.js
+++ b/ui/app/components/currency-input/tests/currency-input.component.test.js
@@ -69,7 +69,7 @@ describe('CurrencyInput Component', () => {
       assert.equal(wrapper.find('.unit-input__suffix').length, 1)
       assert.equal(wrapper.find('.unit-input__suffix').text(), 'ETH')
       assert.equal(wrapper.find('.unit-input__input').props().value, '1')
-      assert.equal(wrapper.find('.currency-display-component').text(), '$231.06 USD')
+      assert.equal(wrapper.find('.currency-display-component').text(), '$231.06USD')
     })
 
     it('should render properly with a fiat value', () => {
@@ -100,7 +100,7 @@ describe('CurrencyInput Component', () => {
       assert.equal(wrapper.find('.unit-input__suffix').length, 1)
       assert.equal(wrapper.find('.unit-input__suffix').text(), 'USD')
       assert.equal(wrapper.find('.unit-input__input').props().value, '1')
-      assert.equal(wrapper.find('.currency-display-component').text(), '0.004328 ETH')
+      assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')
     })
   })
 
@@ -140,14 +140,14 @@ describe('CurrencyInput Component', () => {
       const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
       assert.equal(currencyInputInstance.state.decimalValue, 0)
       assert.equal(currencyInputInstance.state.hexValue, undefined)
-      assert.equal(wrapper.find('.currency-display-component').text(), '$0.00 USD')
+      assert.equal(wrapper.find('.currency-display-component').text(), '$0.00USD')
       const input = wrapper.find('input')
       assert.equal(input.props().value, 0)
 
       input.simulate('change', { target: { value: 1 } })
       assert.equal(handleChangeSpy.callCount, 1)
       assert.ok(handleChangeSpy.calledWith('de0b6b3a7640000'))
-      assert.equal(wrapper.find('.currency-display-component').text(), '$231.06 USD')
+      assert.equal(wrapper.find('.currency-display-component').text(), '$231.06USD')
       assert.equal(currencyInputInstance.state.decimalValue, 1)
       assert.equal(currencyInputInstance.state.hexValue, 'de0b6b3a7640000')
 
@@ -185,14 +185,14 @@ describe('CurrencyInput Component', () => {
       const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
       assert.equal(currencyInputInstance.state.decimalValue, 0)
       assert.equal(currencyInputInstance.state.hexValue, undefined)
-      assert.equal(wrapper.find('.currency-display-component').text(), '0 ETH')
+      assert.equal(wrapper.find('.currency-display-component').text(), '0ETH')
       const input = wrapper.find('input')
       assert.equal(input.props().value, 0)
 
       input.simulate('change', { target: { value: 1 } })
       assert.equal(handleChangeSpy.callCount, 1)
       assert.ok(handleChangeSpy.calledWith('f602f2234d0ea'))
-      assert.equal(wrapper.find('.currency-display-component').text(), '0.004328 ETH')
+      assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')
       assert.equal(currencyInputInstance.state.decimalValue, 1)
       assert.equal(currencyInputInstance.state.hexValue, 'f602f2234d0ea')
 
diff --git a/ui/app/components/token-input/tests/token-input.component.test.js b/ui/app/components/token-input/tests/token-input.component.test.js
index 2131e7705..2dacb9bc4 100644
--- a/ui/app/components/token-input/tests/token-input.component.test.js
+++ b/ui/app/components/token-input/tests/token-input.component.test.js
@@ -122,7 +122,7 @@ describe('TokenInput Component', () => {
       assert.equal(wrapper.find('.unit-input__suffix').length, 1)
       assert.equal(wrapper.find('.unit-input__suffix').text(), 'ABC')
       assert.equal(wrapper.find('.unit-input__input').props().value, '1')
-      assert.equal(wrapper.find('.currency-display-component').text(), '2 ETH')
+      assert.equal(wrapper.find('.currency-display-component').text(), '2ETH')
     })
 
     it('should render properly with a token value for fiat', () => {
@@ -157,7 +157,7 @@ describe('TokenInput Component', () => {
       assert.equal(wrapper.find('.unit-input__suffix').length, 1)
       assert.equal(wrapper.find('.unit-input__suffix').text(), 'ABC')
       assert.equal(wrapper.find('.unit-input__input').props().value, '1')
-      assert.equal(wrapper.find('.currency-display-component').text(), '$462.12 USD')
+      assert.equal(wrapper.find('.currency-display-component').text(), '$462.12USD')
     })
   })
 
@@ -201,14 +201,14 @@ describe('TokenInput Component', () => {
       const tokenInputInstance = wrapper.find(TokenInput).at(0).instance()
       assert.equal(tokenInputInstance.state.decimalValue, 0)
       assert.equal(tokenInputInstance.state.hexValue, undefined)
-      assert.equal(wrapper.find('.currency-display-component').text(), '0 ETH')
+      assert.equal(wrapper.find('.currency-display-component').text(), '0ETH')
       const input = wrapper.find('input')
       assert.equal(input.props().value, 0)
 
       input.simulate('change', { target: { value: 1 } })
       assert.equal(handleChangeSpy.callCount, 1)
       assert.ok(handleChangeSpy.calledWith('2710'))
-      assert.equal(wrapper.find('.currency-display-component').text(), '2 ETH')
+      assert.equal(wrapper.find('.currency-display-component').text(), '2ETH')
       assert.equal(tokenInputInstance.state.decimalValue, 1)
       assert.equal(tokenInputInstance.state.hexValue, '2710')
 
@@ -250,14 +250,14 @@ describe('TokenInput Component', () => {
       const tokenInputInstance = wrapper.find(TokenInput).at(0).instance()
       assert.equal(tokenInputInstance.state.decimalValue, 0)
       assert.equal(tokenInputInstance.state.hexValue, undefined)
-      assert.equal(wrapper.find('.currency-display-component').text(), '$0.00 USD')
+      assert.equal(wrapper.find('.currency-display-component').text(), '$0.00USD')
       const input = wrapper.find('input')
       assert.equal(input.props().value, 0)
 
       input.simulate('change', { target: { value: 1 } })
       assert.equal(handleChangeSpy.callCount, 1)
       assert.ok(handleChangeSpy.calledWith('2710'))
-      assert.equal(wrapper.find('.currency-display-component').text(), '$462.12 USD')
+      assert.equal(wrapper.find('.currency-display-component').text(), '$462.12USD')
       assert.equal(tokenInputInstance.state.decimalValue, 1)
       assert.equal(tokenInputInstance.state.hexValue, '2710')
 
diff --git a/ui/app/components/transaction-view-balance/index.scss b/ui/app/components/transaction-view-balance/index.scss
index 12045ab6d..190072be0 100644
--- a/ui/app/components/transaction-view-balance/index.scss
+++ b/ui/app/components/transaction-view-balance/index.scss
@@ -4,11 +4,13 @@
   align-items: center;
   flex: 1;
   height: 54px;
+  min-width: 0;
 
   &__balance {
-    margin-left: 12px;
+    margin: 0 12px;
     display: flex;
     flex-direction: column;
+    min-width: 0;
 
     @media screen and (max-width: $break-small) {
       align-items: center;
@@ -45,6 +47,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    min-width: 0;
 
     @media screen and (max-width: $break-small) {
       flex-direction: column;
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
index 293771550..3c3349ae0 100644
--- a/ui/app/css/itcss/components/wallet-balance.scss
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -29,7 +29,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     align-items: center;
     margin: 20px 24px;
     flex-direction: row;
-    flex-grow: 3;
+    min-width: 0;
 
     @media #{$wallet-balance-breakpoint-range} {
       margin: 10% 4%;
@@ -38,8 +38,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 
   .balance-display {
     margin-left: 15px;
-    justify-content: flex-start;
-    align-items: flex-start;
+    min-width: 0;
 
     .token-amount {
       font-size: 1.5rem;