From 4c87c05a02d5bf5634234a74910e5d3e559dd413 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 19 Nov 2018 16:06:34 -0800 Subject: 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 --- test/e2e/beta/metamask-beta-ui.spec.js | 8 +++---- test/unit/ui/app/selectors.spec.js | 2 +- ui/app/actions.js | 2 +- .../currency-display/currency-display.container.js | 19 +++++++++++----- .../tests/currency-display.container.test.js | 2 +- ui/app/components/index.scss | 2 ++ .../amount-max-button.component.js | 4 ++-- .../amount-max-button/amount-max-button.utils.js | 25 +++++++++++++-------- .../tests/amount-max-button-utils.test.js | 2 +- .../send-amount-row/send-amount-row.component.js | 5 ++--- .../send-amount-row/send-amount-row.container.js | 4 ++-- .../tests/send-amount-row-component.test.js | 1 - .../from-dropdown/from-dropdown.component.js | 4 ++-- .../send-from-row/send-from-row.component.js | 5 +++-- .../send-from-row/send-from-row.container.js | 10 ++++----- .../send-gas-row/send-gas-row.component.js | 4 ++-- .../send-gas-row/send-gas-row.container.js | 6 ++--- .../send-to-row/send-to-row.component.js | 4 ++-- .../send/send-footer/send-footer.component.js | 4 ++-- ui/app/components/send/send.component.js | 6 ++--- ui/app/components/send/send.utils.js | 6 ++--- .../components/send/tests/send-component.test.js | 2 -- ui/app/components/send/tests/send-utils.test.js | 3 +-- ui/app/components/token-balance/index.scss | 14 ++++++++++++ .../token-balance/token-balance.component.js | 12 +++++----- .../token-currency-display.component.js | 15 ++++++++----- .../token-input/token-input.component.js | 8 +++---- ui/app/components/transaction-list-item/index.scss | 2 ++ .../components/transaction-view-balance/index.scss | 26 +++++++++------------- .../transaction-view-balance.component.js | 12 +++++----- ui/app/components/unit-input/index.scss | 4 ++++ .../components/unit-input/unit-input.component.js | 2 +- ui/app/conversion-util.js | 2 +- ui/app/css/itcss/components/send.scss | 2 ++ ui/app/reducers/metamask.js | 2 +- ui/app/selectors/confirm-transaction.js | 9 ++++---- ui/app/token-util.js | 2 +- 37 files changed, 138 insertions(+), 104 deletions(-) create mode 100644 ui/app/components/token-balance/index.scss diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js index 2b5c8ee18..0ef945f8d 100644 --- a/test/e2e/beta/metamask-beta-ui.spec.js +++ b/test/e2e/beta/metamask-beta-ui.spec.js @@ -840,7 +840,7 @@ describe('MetaMask', function () { }) it('renders the balance for the new token', async () => { - const balance = await findElement(driver, By.css('.transaction-view-balance .transaction-view-balance__token-balance')) + const balance = await findElement(driver, By.css('.transaction-view-balance .transaction-view-balance__primary-balance')) await driver.wait(until.elementTextMatches(balance, /^100\s*TST\s*$/)) const tokenAmount = await balance.getText() assert.ok(/^100\s*TST\s*$/.test(tokenAmount)) @@ -1019,8 +1019,8 @@ 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') { - const tokenBalanceAmount = await findElement(driver, By.css('.transaction-view-balance__token-balance')) - assert.equal(await tokenBalanceAmount.getText(), '43 TST') + const tokenBalanceAmount = await findElements(driver, By.css('.transaction-view-balance__primary-balance')) + await driver.wait(until.elementTextMatches(tokenBalanceAmount[0], /43\s*TST/)) } }) }) @@ -1180,7 +1180,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')) + const balance = await findElement(driver, By.css('.transaction-view-balance__primary-balance')) await driver.wait(until.elementTextMatches(balance, /0\s*BAT/)) await delay(regularDelayMs) }) diff --git a/test/unit/ui/app/selectors.spec.js b/test/unit/ui/app/selectors.spec.js index 78c4267ee..e2b198abf 100644 --- a/test/unit/ui/app/selectors.spec.js +++ b/test/unit/ui/app/selectors.spec.js @@ -148,7 +148,7 @@ describe('Selectors', function () { it('#getSelectedTokenToFiatRate', () => { const selectedTokenToFiatRate = selectors.getSelectedTokenToFiatRate(mockState) - assert.equal(selectedTokenToFiatRate, '0.21880988420033493') + assert.equal(selectedTokenToFiatRate, '0.21880988420033492152') }) describe('#getSelectedTokenContract', () => { diff --git a/ui/app/actions.js b/ui/app/actions.js index 501fef76d..e3cf57c9e 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -995,7 +995,7 @@ function updateSendTokenBalance ({ .then(usersToken => { if (usersToken) { const newTokenBalance = calcTokenBalance({ selectedToken, usersToken }) - dispatch(setSendTokenBalance(newTokenBalance.toString(10))) + dispatch(setSendTokenBalance(newTokenBalance)) } }) .catch(err => { diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js index 6ddf07172..e581f8a5e 100644 --- a/ui/app/components/currency-display/currency-display.container.js +++ b/ui/app/components/currency-display/currency-display.container.js @@ -20,15 +20,24 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { currency, denomination, hideLabel, + displayValue: propsDisplayValue, + suffix: propsSuffix, ...restOwnProps } = ownProps const toCurrency = currency || currentCurrency - const convertedValue = getValueFromWeiHex({ - value, fromCurrency: nativeCurrency, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination, - }) - const displayValue = formatCurrency(convertedValue, toCurrency) - const suffix = hideLabel ? undefined : toCurrency.toUpperCase() + + const displayValue = propsDisplayValue || formatCurrency( + getValueFromWeiHex({ + value, + fromCurrency: nativeCurrency, + toCurrency, conversionRate, + numberOfDecimals, + toDenomination: denomination, + }), + toCurrency + ) + const suffix = propsSuffix || (hideLabel ? undefined : toCurrency.toUpperCase()) return { ...restStateProps, 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 0c886af50..9888c366e 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 @@ -131,7 +131,7 @@ describe('CurrencyDisplay container', () => { }, result: { nativeCurrency: 'ETH', - displayValue: '1e-9', + displayValue: '0.000000001', suffix: undefined, }, }, diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss index e27b0f182..f901aed7d 100644 --- a/ui/app/components/index.scss +++ b/ui/app/components/index.scss @@ -40,6 +40,8 @@ @import './tabs/index'; +@import './token-balance/index'; + @import './transaction-activity-log/index'; @import './transaction-breakdown/index'; diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js index ceb620941..80518977e 100644 --- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js +++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js @@ -11,11 +11,11 @@ export default class AmountMaxButton extends Component { setAmountToMax: PropTypes.func, setMaxModeTo: PropTypes.func, tokenBalance: PropTypes.string, - }; + } static contextTypes = { t: PropTypes.func, - }; + } setMaxAmount () { const { diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js index b490a7fd7..27181d2f5 100644 --- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js +++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js @@ -5,16 +5,23 @@ const { const ethUtil = require('ethereumjs-util') function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) { - const { decimals } = selectedToken || {} - const multiplier = Math.pow(10, Number(decimals || 0)) + const { decimals } = selectedToken || {} + const multiplier = Math.pow(10, Number(decimals || 0)) - return selectedToken - ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'}) - : subtractCurrencies( - ethUtil.addHexPrefix(balance), - ethUtil.addHexPrefix(gasTotal), - { toNumericBase: 'hex' } - ) + return selectedToken + ? multiplyCurrencies( + tokenBalance, + multiplier, + { + toNumericBase: 'hex', + multiplicandBase: 16, + } + ) + : subtractCurrencies( + ethUtil.addHexPrefix(balance), + ethUtil.addHexPrefix(gasTotal), + { toNumericBase: 'hex' } + ) } module.exports = { diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js index 816df6a12..1ee858f67 100644 --- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js +++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js @@ -19,7 +19,7 @@ describe('amount-max-button utils', () => { selectedToken: { decimals: 10, }, - tokenBalance: 100, + tokenBalance: '64', }), 'e8d4a51000') }) }) diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js index 0268376bf..4df1e0ffa 100644 --- a/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js +++ b/ui/app/components/send/send-content/send-amount-row/send-amount-row.component.js @@ -26,11 +26,11 @@ export default class SendAmountRow extends Component { updateSendAmount: PropTypes.func, updateSendAmountError: PropTypes.func, updateGas: PropTypes.func, - }; + } static contextTypes = { t: PropTypes.func, - }; + } validateAmount (amount) { const { @@ -58,7 +58,6 @@ export default class SendAmountRow extends Component { if (selectedToken) { updateGasFeeError({ - amount, amountConversionRate, balance, conversionRate, diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js index 3504d1b73..2b6fe0f6c 100644 --- a/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js +++ b/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js @@ -45,10 +45,10 @@ function mapDispatchToProps (dispatch) { setMaxModeTo: bool => dispatch(setMaxModeTo(bool)), updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)), updateGasFeeError: (amountDataObject) => { - dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject))) + dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject))) }, updateSendAmountError: (amountDataObject) => { - dispatch(updateSendErrors(getAmountErrorObject(amountDataObject))) + dispatch(updateSendErrors(getAmountErrorObject(amountDataObject))) }, } } diff --git a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js index 56e80cb83..14a71129f 100644 --- a/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js +++ b/ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js @@ -82,7 +82,6 @@ describe('SendAmountRow Component', function () { assert.deepEqual( propsMethodSpies.updateGasFeeError.getCall(0).args, [{ - amount: 'someAmount', amountConversionRate: 'mockAmountConversionRate', balance: 'mockBalance', conversionRate: 7, diff --git a/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js b/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js index 4f43a9d61..d512f7d0b 100644 --- a/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js +++ b/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js @@ -12,11 +12,11 @@ export default class FromDropdown extends Component { onSelect: PropTypes.func, openDropdown: PropTypes.func, selectedAccount: PropTypes.object, - }; + } static contextTypes = { t: PropTypes.func, - }; + } render () { const { diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.component.js b/ui/app/components/send/send-content/send-from-row/send-from-row.component.js index 3e0e0de22..b6de9d222 100644 --- a/ui/app/components/send/send-content/send-from-row/send-from-row.component.js +++ b/ui/app/components/send/send-content/send-from-row/send-from-row.component.js @@ -15,11 +15,11 @@ export default class SendFromRow extends Component { tokenContract: PropTypes.object, updateSendFrom: PropTypes.func, setSendTokenBalance: PropTypes.func, - }; + } static contextTypes = { t: PropTypes.func, - }; + } async handleFromChange (newFrom) { const { @@ -32,6 +32,7 @@ export default class SendFromRow extends Component { const usersToken = await tokenContract.balanceOf(newFrom.address) setSendTokenBalance(usersToken) } + updateSendFrom(newFrom) } diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.container.js b/ui/app/components/send/send-content/send-from-row/send-from-row.container.js index 33cb63b43..7008bbea4 100644 --- a/ui/app/components/send/send-content/send-from-row/send-from-row.container.js +++ b/ui/app/components/send/send-content/send-from-row/send-from-row.container.js @@ -10,8 +10,8 @@ import { } from './send-from-row.selectors.js' import { calcTokenBalance } from '../../send.utils.js' import { - updateSendFrom, - setSendTokenBalance, + updateSendFrom, + setSendTokenBalance, } from '../../../../actions' import { closeFromDropdown, @@ -37,10 +37,10 @@ function mapDispatchToProps (dispatch) { openFromDropdown: () => dispatch(openFromDropdown()), updateSendFrom: newFrom => dispatch(updateSendFrom(newFrom)), setSendTokenBalance: (usersToken, selectedToken) => { - if (!usersToken) return + if (!usersToken) return - const tokenBalance = calcTokenBalance({ usersToken, selectedToken }) - dispatch(setSendTokenBalance(tokenBalance)) + const tokenBalance = calcTokenBalance({ usersToken, selectedToken }) + dispatch(setSendTokenBalance(tokenBalance)) }, } } diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js index 91b58cfd0..6ad4499ff 100644 --- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js +++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js @@ -12,11 +12,11 @@ export default class SendGasRow extends Component { gasLoadingError: PropTypes.bool, gasTotal: PropTypes.string, showCustomizeGasModal: PropTypes.func, - }; + } static contextTypes = { t: PropTypes.func, - }; + } render () { const { diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js index 8f8e3e4dd..e44fe4ef1 100644 --- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js +++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js @@ -1,8 +1,8 @@ import { connect } from 'react-redux' import { - getConversionRate, - getCurrentCurrency, - getGasTotal, + getConversionRate, + getCurrentCurrency, + getGasTotal, } from '../../send.selectors.js' import { getGasLoadingError, gasFeeIsInError } from './send-gas-row.selectors.js' import { showModal } from '../../../../actions' diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js index 17c75c817..ce5325314 100644 --- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js +++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js @@ -19,11 +19,11 @@ export default class SendToRow extends Component { updateSendTo: PropTypes.func, updateSendToError: PropTypes.func, scanQrCode: PropTypes.func, - }; + } static contextTypes = { t: PropTypes.func, - }; + } handleToChange (to, nickname = '', toError) { const { hasHexData, updateSendTo, updateSendToError, updateGas } = this.props diff --git a/ui/app/components/send/send-footer/send-footer.component.js b/ui/app/components/send/send-footer/send-footer.component.js index 230bf450f..b78b56373 100644 --- a/ui/app/components/send/send-footer/send-footer.component.js +++ b/ui/app/components/send/send-footer/send-footer.component.js @@ -26,11 +26,11 @@ export default class SendFooter extends Component { tokenBalance: PropTypes.string, unapprovedTxs: PropTypes.object, update: PropTypes.func, - }; + } static contextTypes = { t: PropTypes.func, - }; + } onCancel () { this.props.clearSend() diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js index fb7beca16..a27401f30 100644 --- a/ui/app/components/send/send.component.js +++ b/ui/app/components/send/send.component.js @@ -41,11 +41,11 @@ export default class SendTransactionScreen extends PersistentForm { scanQrCode: PropTypes.func, qrCodeDetected: PropTypes.func, qrCodeData: PropTypes.object, - }; + } static contextTypes = { t: PropTypes.func, - }; + } componentWillReceiveProps (nextProps) { if (nextProps.qrCodeData) { @@ -138,14 +138,12 @@ export default class SendTransactionScreen extends PersistentForm { }) const gasFeeErrorObject = selectedToken ? getGasFeeErrorObject({ - amount, amountConversionRate, balance, conversionRate, gasTotal, primaryCurrency, selectedToken, - tokenBalance, }) : { gasFee: null } updateSendErrors(Object.assign(amountErrorObject, gasFeeErrorObject)) diff --git a/ui/app/components/send/send.utils.js b/ui/app/components/send/send.utils.js index eb1667c63..b2ac41e9c 100644 --- a/ui/app/components/send/send.utils.js +++ b/ui/app/components/send/send.utils.js @@ -89,11 +89,10 @@ function isTokenBalanceSufficient ({ const tokenBalanceIsSufficient = conversionGTE( { value: tokenBalance, - fromNumericBase: 'dec', + fromNumericBase: 'hex', }, { value: calcTokenAmount(amountInDec, decimals), - fromNumericBase: 'dec', }, ) @@ -151,7 +150,6 @@ function getAmountErrorObject ({ } function getGasFeeErrorObject ({ - amount, amountConversionRate, balance, conversionRate, @@ -180,7 +178,7 @@ function getGasFeeErrorObject ({ function calcTokenBalance ({ selectedToken, usersToken }) { const { decimals } = selectedToken || {} - return calcTokenAmount(usersToken.balance.toString(), decimals) + '' + return calcTokenAmount(usersToken.balance.toString(), decimals).toString(16) } function doesAmountErrorRequireUpdate ({ diff --git a/ui/app/components/send/tests/send-component.test.js b/ui/app/components/send/tests/send-component.test.js index f4943e707..bd136a0b8 100644 --- a/ui/app/components/send/tests/send-component.test.js +++ b/ui/app/components/send/tests/send-component.test.js @@ -158,14 +158,12 @@ describe('Send Component', function () { assert.deepEqual( utilsMethodStubs.getGasFeeErrorObject.getCall(0).args[0], { - amount: 'mockAmount', amountConversionRate: 'mockAmountConversionRate', balance: 'mockBalance', conversionRate: 10, gasTotal: 'mockGasTotal', primaryCurrency: 'mockPrimaryCurrency', selectedToken: 'mockSelectedToken', - tokenBalance: 'mockTokenBalance', } ) }) diff --git a/ui/app/components/send/tests/send-utils.test.js b/ui/app/components/send/tests/send-utils.test.js index b72d87eee..f31e1221b 100644 --- a/ui/app/components/send/tests/send-utils.test.js +++ b/ui/app/components/send/tests/send-utils.test.js @@ -285,11 +285,10 @@ describe('send utils', () => { [ { value: 123, - fromNumericBase: 'dec', + fromNumericBase: 'hex', }, { value: 'calc:1610', - fromNumericBase: 'dec', }, ] ) diff --git a/ui/app/components/token-balance/index.scss b/ui/app/components/token-balance/index.scss new file mode 100644 index 000000000..2ff6dfbc8 --- /dev/null +++ b/ui/app/components/token-balance/index.scss @@ -0,0 +1,14 @@ +.token-balance-component { + display: flex; + align-items: center; + + &__text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__suffix { + padding-left: 4px; + } +} diff --git a/ui/app/components/token-balance/token-balance.component.js b/ui/app/components/token-balance/token-balance.component.js index 2b4f73980..af1a32578 100644 --- a/ui/app/components/token-balance/token-balance.component.js +++ b/ui/app/components/token-balance/token-balance.component.js @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import classnames from 'classnames' +import CurrencyDisplay from '../currency-display' export default class TokenBalance extends PureComponent { static propTypes = { @@ -12,12 +12,14 @@ export default class TokenBalance extends PureComponent { } render () { - const { className, string, withSymbol, symbol } = this.props + const { className, string, symbol } = this.props return ( -
- { string + (withSymbol ? ` ${symbol}` : '') } -
+ ) } } diff --git a/ui/app/components/token-currency-display/token-currency-display.component.js b/ui/app/components/token-currency-display/token-currency-display.component.js index 4bb09a4b6..6e9a65300 100644 --- a/ui/app/components/token-currency-display/token-currency-display.component.js +++ b/ui/app/components/token-currency-display/token-currency-display.component.js @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import CurrencyDisplay from '../currency-display/currency-display.component' +import CurrencyDisplay from '../currency-display' import { getTokenData } from '../../helpers/transactions.util' import { getTokenValue, calcTokenAmount } from '../../token-util' @@ -12,6 +12,7 @@ export default class TokenCurrencyDisplay extends PureComponent { state = { displayValue: '', + suffix: '', } componentDidMount () { @@ -29,25 +30,27 @@ export default class TokenCurrencyDisplay extends PureComponent { setDisplayValue () { const { transactionData: data, token } = this.props - const { decimals = '', symbol = '' } = token + const { decimals = '', symbol: suffix = '' } = token const tokenData = getTokenData(data) let displayValue if (tokenData.params && tokenData.params.length) { const tokenValue = getTokenValue(tokenData.params) - const tokenAmount = calcTokenAmount(tokenValue, decimals) - displayValue = `${tokenAmount} ${symbol}` + displayValue = calcTokenAmount(tokenValue, decimals).toString() } - this.setState({ displayValue }) + this.setState({ displayValue, suffix }) } render () { + const { displayValue, suffix } = this.state + return ( ) } diff --git a/ui/app/components/token-input/token-input.component.js b/ui/app/components/token-input/token-input.component.js index d1388945b..10fa1151e 100644 --- a/ui/app/components/token-input/token-input.component.js +++ b/ui/app/components/token-input/token-input.component.js @@ -32,7 +32,7 @@ export default class TokenInput extends PureComponent { super(props) const { value: hexValue } = props - const decimalValue = hexValue ? this.getDecimalValue(props) : 0 + const decimalValue = hexValue ? this.getValue(props) : 0 this.state = { decimalValue, @@ -46,12 +46,12 @@ export default class TokenInput extends PureComponent { const { hexValue: stateHexValue } = this.state if (prevPropsHexValue !== propsHexValue && propsHexValue !== stateHexValue) { - const decimalValue = this.getDecimalValue(this.props) + const decimalValue = this.getValue(this.props) this.setState({ hexValue: propsHexValue, decimalValue }) } } - getDecimalValue (props) { + getValue (props) { const { value: hexValue, selectedToken: { decimals, symbol } = {} } = props const multiplier = Math.pow(10, Number(decimals || 0)) @@ -63,7 +63,7 @@ export default class TokenInput extends PureComponent { invertConversionRate: true, }) - return Number(decimalValueString) || 0 + return Number(decimalValueString) ? decimalValueString : '' } handleChange = decimalValue => { diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss index ac0e7beeb..449974734 100644 --- a/ui/app/components/transaction-list-item/index.scss +++ b/ui/app/components/transaction-list-item/index.scss @@ -80,6 +80,8 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + min-width: 0; + max-width: 100%; &--primary { text-align: end; 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 ? ( - +
+ +
) : (
n.toString(16), - dec: n => Number(n).toString(10), + dec: n => (new BigNumber(n)).toString(10), BN: n => new BN(n.toString(16)), } diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index a57653b45..c791a24c7 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -552,6 +552,7 @@ &__form-field { flex: 1 1 auto; + min-width: 0; .currency-display { color: $tundora; @@ -580,6 +581,7 @@ line-height: 22px; width: 88px; font-weight: 400; + flex: 0 0 auto; } &__from-dropdown { diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index dfa2f3656..302d1627a 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -33,7 +33,7 @@ function reduceMetamask (state, action) { gasLimit: null, gasPrice: null, gasTotal: null, - tokenBalance: null, + tokenBalance: '0x0', from: '', to: '', amount: '0x0', diff --git a/ui/app/selectors/confirm-transaction.js b/ui/app/selectors/confirm-transaction.js index 90924c036..23ef26d95 100644 --- a/ui/app/selectors/confirm-transaction.js +++ b/ui/app/selectors/confirm-transaction.js @@ -137,11 +137,12 @@ export const tokenAmountAndToAddressSelector = createSelector( const valueParam = params.find(param => param.name === TOKEN_PARAM_VALUE) toAddress = toParam ? toParam.value : params[0].value const value = valueParam ? Number(valueParam.value) : Number(params[1].value) - tokenAmount = roundExponential(value) if (tokenDecimals) { - tokenAmount = calcTokenAmount(value, tokenDecimals) + tokenAmount = calcTokenAmount(value, tokenDecimals).toNumber() } + + tokenAmount = roundExponential(tokenAmount) } return { @@ -163,7 +164,7 @@ export const approveTokenAmountAndToAddressSelector = createSelector( const value = Number(params.find(param => param.name === TOKEN_PARAM_VALUE).value) if (tokenDecimals) { - tokenAmount = calcTokenAmount(value, tokenDecimals) + tokenAmount = calcTokenAmount(value, tokenDecimals).toNumber() } tokenAmount = roundExponential(tokenAmount) @@ -188,7 +189,7 @@ export const sendTokenTokenAmountAndToAddressSelector = createSelector( let value = Number(params.find(param => param.name === TOKEN_PARAM_VALUE).value) if (tokenDecimals) { - value = calcTokenAmount(value, tokenDecimals) + value = calcTokenAmount(value, tokenDecimals).toNumber() } tokenAmount = roundExponential(value) diff --git a/ui/app/token-util.js b/ui/app/token-util.js index 6e4992763..35a19a69f 100644 --- a/ui/app/token-util.js +++ b/ui/app/token-util.js @@ -109,7 +109,7 @@ export function tokenInfoGetter () { export function calcTokenAmount (value, decimals) { const multiplier = Math.pow(10, Number(decimals || 0)) - return new BigNumber(String(value)).div(multiplier).toNumber() + return new BigNumber(String(value)).div(multiplier) } export function getTokenValue (tokenParams = []) { -- cgit v1.2.3