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 --- .../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 +- 29 files changed, 122 insertions(+), 91 deletions(-) create mode 100644 ui/app/components/token-balance/index.scss (limited to 'ui/app/components') 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 ? ( - +
+ +
) : (