m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fix account display width for large currency values

Browse Source
This commit is contained in:
Alexander Tseung 2018-10-21 19:12:40 +08:00
parent ba3617b685
commit 614995c0e9
13 changed files with 68 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/e2e/beta/from-import-beta-ui.spec.js
View File

@ -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()))
})
})

28
test/e2e/beta/metamask-beta-ui.spec.js
View File

@ -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)
})
})

2
test/integration/lib/currency-localization.js
View File

@ -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')
}

6
test/integration/lib/send-new-ui.js
View File

@ -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')

5
ui/app/components/balance-component.js
View File

@ -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,

13
ui/app/components/currency-display/currency-display.component.js
View File

@ -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>
)
}

5
ui/app/components/currency-display/currency-display.container.js
View File

@ -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,
}
}

4
ui/app/components/currency-display/index.scss
View File

@ -7,4 +7,8 @@
overflow: hidden;
text-overflow: ellipsis;
}
&__suffix {
padding-left: 4px;
}
}

13
ui/app/components/currency-display/tests/currency-display.container.test.js
View File

@ -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,
},
},
]

12
ui/app/components/currency-input/tests/currency-input.component.test.js
View File

@ -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')

12
ui/app/components/token-input/tests/token-input.component.test.js
View File

@ -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')

5
ui/app/components/transaction-view-balance/index.scss
View File

@ -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;

5
ui/app/css/itcss/components/wallet-balance.scss
View File

@ -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;