m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00
Code

Show/Hide Fiat on Testnets based on User Preference (#6153)

Browse Source
This commit is contained in:
Chi Kei Chan 2019-02-26 10:30:41 -08:00 committed by Whymarrh Whitby
parent fc1655eecb
commit a2320c76fe
39 changed files with 1169 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/_locales/en/messages.json
View File

@ -1237,6 +1237,12 @@
"showAdvancedGasInlineDescription": {
"message": "Select this to show gas price and limit controls directly on the send and confirm screens."
},
"showFiatConversionInTestnets": {
"message": "Show Conversion in Testnets"
},
"showFiatConversionInTestnetsDescription": {
"message": "Select this to show fiat conversion in when you are on Testnets"
},
"showPrivateKeys": {
"message": "Show Private Keys"
},

3
development/states/confirm-new-ui.json
View File

@ -131,7 +131,8 @@
},
"currentLocale": "en",
"preferences": {
"useNativeCurrencyAsPrimaryCurrency": true
"useNativeCurrencyAsPrimaryCurrency": true,
"showFiatInTestnets": true
}
},
"appState": {

3
development/states/currency-localization.json
View File

@ -113,7 +113,8 @@
},
"currentLocale": "en",
"preferences": {
"useNativeCurrencyAsPrimaryCurrency": true
"useNativeCurrencyAsPrimaryCurrency": true,
"showFiatInTestnets": true
}
},
"appState": {

3
development/states/send-edit.json
View File

@ -135,7 +135,8 @@
},
"currentLocale": "en",
"preferences": {
"useNativeCurrencyAsPrimaryCurrency": true
"useNativeCurrencyAsPrimaryCurrency": true,
"showFiatInTestnets": true
}
},
"appState": {

3
development/states/send-new-ui.json
View File

@ -114,7 +114,8 @@
},
"currentLocale": "en",
"preferences": {
"useNativeCurrencyAsPrimaryCurrency": true
"useNativeCurrencyAsPrimaryCurrency": true,
"showFiatInTestnets": true
}
},
"appState": {

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

@ -495,10 +495,13 @@ describe('MetaMask', function () {
await findElement(driver, By.css('.tab-bar'))
const showConversionToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(3) .settings-page__content-item-col > div'))
await showConversionToggle.click()
const advancedGasTitle = await findElement(driver, By.xpath(`//span[contains(text(), 'Advanced gas controls')]`))
await driver.executeScript('arguments[0].scrollIntoView(true)', advancedGasTitle)
const advancedGasToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(11) .settings-page__content-item-col > div'))
const advancedGasToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(12) .settings-page__content-item-col > div'))
await advancedGasToggle.click()
windowHandles = await driver.getAllWindowHandles()
extension = windowHandles[0]
@ -560,23 +563,37 @@ describe('MetaMask', function () {
await delay(regularDelayMs)
})
let txValues
it('finds the transaction in the transactions list', async function () {
const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 4)
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues, /-3\s*ETH/), 10000)
txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues[0], /-3\s*ETH/), 10000)
})
it('the transaction has the expected gas price', async function () {
const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
await txValues.click()
await delay(tinyDelayMs)
await findElement(driver, By.xpath(`//div[contains(text(), 'Gas Price (GWEI)')]`))
await delay(largeDelayMs)
let txGasPriceLabels
let txGasPrices
try {
await txValues[0].click()
txGasPrices = await findElements(driver, By.css('.transaction-breakdown__value'))
txGasPriceLabels = await findElements(driver, By.css('.transaction-breakdown-row__title'))
txGasPrices = await findElements(driver, By.css('.transaction-breakdown__value'))
await driver.wait(until.elementTextMatches(txGasPrices[3], /^10$/), 10000)
} catch (e) {
console.log(e.message)
txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
await txValues[0].click()
txGasPriceLabels = await findElements(driver, By.css('.transaction-breakdown-row__title'))
txGasPrices = await findElements(driver, By.css('.transaction-breakdown__value'))
await driver.wait(until.elementTextMatches(txGasPrices[3], /^10$/), 10000)
}
assert(txGasPriceLabels[2])
await findElement(driver, By.xpath(`//span[contains(text(), '7')]`))
txValues.click()
await txValues[0].click()
})
})
@ -1125,6 +1142,7 @@ describe('MetaMask', function () {
return confirmedTxes.length === 2
}, 10000)
await delay(regularDelayMs)
const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
await driver.wait(until.elementTextMatches(txValues[0], /-7\s*TST/))
const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))

5
ui/app/actions.js
View File

@ -317,6 +317,7 @@ var actions = {
updatePreferences,
UPDATE_PREFERENCES: 'UPDATE_PREFERENCES',
setUseNativeCurrencyAsPrimaryCurrencyPreference,
setShowFiatConversionOnTestnetsPreference,
// Migration of users to new UI
setCompletedUiMigration,
@ -2470,6 +2471,10 @@ function setUseNativeCurrencyAsPrimaryCurrencyPreference (value) {
return setPreference('useNativeCurrencyAsPrimaryCurrency', value)
}
function setShowFiatConversionOnTestnetsPreference (value) {
return setPreference('showFiatInTestnets', value)
}
function setCompletedOnboarding () {
return dispatch => {
dispatch(actions.showLoadingIndication())

5
ui/app/components/balance/balance.container.js
View File

@ -6,9 +6,13 @@ import {
conversionRateSelector,
getCurrentCurrency,
getMetaMaskAccounts,
getIsMainnet,
preferencesSelector,
} from '../../selectors'
const mapStateToProps = state => {
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
const accounts = getMetaMaskAccounts(state)
const network = state.metamask.network
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
@ -21,6 +25,7 @@ const mapStateToProps = state => {
conversionRate: conversionRateSelector(state),
currentCurrency: getCurrentCurrency(state),
assetImages: getAssetImages(state),
showFiat: (isMainnet || !!showFiatInTestnets),
}
}

22
ui/app/components/currency-input/currency-input.component.js
View File

@ -11,6 +11,10 @@ import { ETH } from '../../constants/common'
* gets converted into a decimal value depending on the currency (ETH or Fiat).
*/
export default class CurrencyInput extends PureComponent {
static contextTypes = {
t: PropTypes.func,
}
static propTypes = {
conversionRate: PropTypes.number,
currentCurrency: PropTypes.string,
@ -18,6 +22,7 @@ export default class CurrencyInput extends PureComponent {
onChange: PropTypes.func,
onBlur: PropTypes.func,
useFiat: PropTypes.bool,
hideFiat: PropTypes.bool,
value: PropTypes.string,
fiatSuffix: PropTypes.string,
nativeSuffix: PropTypes.string,
@ -61,8 +66,13 @@ export default class CurrencyInput extends PureComponent {
}
shouldUseFiat = () => {
const { useFiat } = this.props
const { useFiat, hideFiat } = this.props
const { isSwapped } = this.state || {}
if (hideFiat) {
return false
}
return isSwapped ? !useFiat : useFiat
}
@ -93,10 +103,18 @@ export default class CurrencyInput extends PureComponent {
}
renderConversionComponent () {
const { currentCurrency, nativeCurrency } = this.props
const { currentCurrency, nativeCurrency, hideFiat } = this.props
const { hexValue } = this.state
let currency, numberOfDecimals
if (hideFiat) {
return (
<div className="currency-input__conversion-component">
{ this.context.t('noConversionRateAvailable') }
</div>
)
}
if (this.shouldUseFiat()) {
// Display ETH
currency = nativeCurrency || ETH

4
ui/app/components/currency-input/currency-input.container.js
View File

@ -1,14 +1,18 @@
import { connect } from 'react-redux'
import CurrencyInput from './currency-input.component'
import { ETH } from '../../constants/common'
import {getIsMainnet, preferencesSelector} from '../../selectors'
const mapStateToProps = state => {
const { metamask: { nativeCurrency, currentCurrency, conversionRate } } = state
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
return {
nativeCurrency,
currentCurrency,
conversionRate,
hideFiat: (!isMainnet && !showFiatInTestnets),
}
}

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

@ -1,4 +1,5 @@
import React from 'react'
import PropTypes from 'prop-types'
import assert from 'assert'
import { shallow, mount } from 'enzyme'
import sinon from 'sinon'
@ -111,6 +112,45 @@ describe('CurrencyInput Component', () => {
assert.equal(wrapper.find('.unit-input__input').props().value, '1')
assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')
})
it('should render properly with a native value when hideFiat is true', () => {
const mockStore = {
metamask: {
nativeCurrency: 'ETH',
currentCurrency: 'usd',
conversionRate: 231.06,
},
}
const store = configureMockStore()(mockStore)
const wrapper = mount(
<Provider store={store}>
<CurrencyInput
value="f602f2234d0ea"
fiatSuffix="USD"
nativeSuffix="ETH"
useFiat
hideFiat={true}
nativeCurrency="ETH"
currentCurrency="usd"
conversionRate={231.06}
/>
</Provider>,
{
context: { t: str => str + '_t' },
childContextTypes: { t: PropTypes.func },
}
)
assert.ok(wrapper)
const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
assert.equal(currencyInputInstance.state.decimalValue, 0.004328)
assert.equal(currencyInputInstance.state.hexValue, 'f602f2234d0ea')
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, '0.004328')
assert.equal(wrapper.find('.currency-input__conversion-component').text(), 'noConversionRateAvailable_t')
})
})
describe('handling actions', () => {

146
ui/app/components/currency-input/tests/currency-input.container.test.js
View File

@ -15,47 +15,155 @@ proxyquire('../currency-input.container.js', {
describe('CurrencyInput container', () => {
describe('mapStateToProps()', () => {
it('should return the correct props', () => {
const mockState = {
const tests = [
// Test # 1
{
comment: 'should return correct props in mainnet',
mockState: {
metamask: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
preferences: {
showFiatInTestnets: false,
},
}
assert.deepEqual(mapStateToProps(mockState), {
provider: {
type: 'mainnet',
},
},
},
expected: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
})
hideFiat: false,
},
},
// Test # 2
{
comment: 'should return correct props when not in mainnet and showFiatInTestnets is false',
mockState: {
metamask: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'rinkeby',
},
},
},
expected: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
hideFiat: true,
},
},
// Test # 3
{
comment: 'should return correct props when not in mainnet and showFiatInTestnets is true',
mockState: {
metamask: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
preferences: {
showFiatInTestnets: true,
},
provider: {
type: 'rinkeby',
},
},
},
expected: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
hideFiat: false,
},
},
// Test # 4
{
comment: 'should return correct props when in mainnet and showFiatInTestnets is true',
mockState: {
metamask: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
preferences: {
showFiatInTestnets: true,
},
provider: {
type: 'mainnet',
},
},
},
expected: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
hideFiat: false,
},
},
]
tests.forEach(({ mockState, expected, comment }) => {
it(comment, () => assert.deepEqual(mapStateToProps(mockState), expected))
})
})
describe('mergeProps()', () => {
it('should return the correct props', () => {
const mockStateProps = {
const tests = [
// Test # 1
{
comment: 'should return the correct props',
mock: {
stateProps: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
}
const mockDispatchProps = {}
assert.deepEqual(mergeProps(mockStateProps, mockDispatchProps, { useFiat: true }), {
},
dispatchProps: {},
ownProps: {},
},
expected: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
// useFiat: true,
nativeSuffix: 'ETH',
fiatSuffix: 'USD',
},
},
// Test # 1
{
comment: 'should return the correct props when useFiat is true',
mock: {
stateProps: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
},
dispatchProps: {},
ownProps: { useFiat: true },
},
expected: {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
useFiat: true,
nativeSuffix: 'ETH',
fiatSuffix: 'USD',
})
},
},
]
assert.deepEqual(mergeProps(mockStateProps, mockDispatchProps, {}), {
conversionRate: 280.45,
currentCurrency: 'usd',
nativeCurrency: 'ETH',
nativeSuffix: 'ETH',
fiatSuffix: 'USD',
tests.forEach(({ mock: { stateProps, dispatchProps, ownProps }, expected, comment }) => {
it(comment, () => {
assert.deepEqual(mergeProps(stateProps, dispatchProps, ownProps), expected)
})
})
})

7
ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
View File

@ -63,6 +63,7 @@ import {
} from '../../send/send.utils'
import { addHexPrefix } from 'ethereumjs-util'
import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
import {getIsMainnet, preferencesSelector} from '../../../selectors'
const mapStateToProps = (state, ownProps) => {
const { transaction = {} } = ownProps
@ -91,6 +92,10 @@ const mapStateToProps = (state, ownProps) => {
const estimatedTimes = getEstimatedGasTimes(state)
const balance = getCurrentEthBalance(state)
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
const showFiat = Boolean(isMainnet || showFiatInTestnets)
const insufficientBalance = !isBalanceSufficient({
amount: value,
gasTotal,
@ -124,7 +129,7 @@ const mapStateToProps = (state, ownProps) => {
infoRowProps: {
originalTotalFiat: addHexWEIsToRenderableFiat(value, gasTotal, currentCurrency, conversionRate),
originalTotalEth: addHexWEIsToRenderableEth(value, gasTotal),
newTotalFiat,
newTotalFiat: showFiat ? newTotalFiat : '',
newTotalEth: addHexWEIsToRenderableEth(value, customGasTotal),
transactionFee: addHexWEIsToRenderableEth('0x0', customGasTotal),
sendAmount: addHexWEIsToRenderableEth(value, '0x0'),

63
ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
View File

@ -71,6 +71,12 @@ describe('gas-modal-page-container container', () => {
},
currentCurrency: 'abc',
conversionRate: 50,
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'mainnet',
},
},
gas: {
basicEstimates: {
@ -152,6 +158,63 @@ describe('gas-modal-page-container container', () => {
}),
expectedResult: Object.assign({}, baseExpectedResult, { isSpeedUp: true }),
},
{
mockState: Object.assign({}, baseMockState, {
metamask: {
...baseMockState.metamask,
preferences: {
...baseMockState.metamask.preferences,
showFiatInTestnets: false,
},
provider: {
...baseMockState.metamask.provider,
type: 'rinkeby',
},
},
}),
mockOwnProps: baseMockOwnProps,
expectedResult: {
...baseExpectedResult,
infoRowProps: {
...baseExpectedResult.infoRowProps,
newTotalFiat: '',
},
},
},
{
mockState: Object.assign({}, baseMockState, {
metamask: {
...baseMockState.metamask,
preferences: {
...baseMockState.metamask.preferences,
showFiatInTestnets: true,
},
provider: {
...baseMockState.metamask.provider,
type: 'rinkeby',
},
},
}),
mockOwnProps: baseMockOwnProps,
expectedResult: baseExpectedResult,
},
{
mockState: Object.assign({}, baseMockState, {
metamask: {
...baseMockState.metamask,
preferences: {
...baseMockState.metamask.preferences,
showFiatInTestnets: true,
},
provider: {
...baseMockState.metamask.provider,
type: 'mainnet',
},
},
}),
mockOwnProps: baseMockOwnProps,
expectedResult: baseExpectedResult,
},
]
let result

5
ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -86,6 +86,7 @@ export default class ConfirmTransactionBase extends Component {
warning: PropTypes.string,
advancedInlineGasShown: PropTypes.bool,
insufficientBalance: PropTypes.bool,
hideFiatConversion: PropTypes.bool,
}
state = {
@ -174,6 +175,7 @@ export default class ConfirmTransactionBase extends Component {
customGas,
insufficientBalance,
updateGasAndCalculate,
hideFiatConversion,
} = this.props
if (hideDetails) {
@ -190,6 +192,7 @@ export default class ConfirmTransactionBase extends Component {
headerText="Edit"
headerTextClassName="confirm-detail-row__header-text--edit"
onHeaderClick={() => this.handleEditGas()}
secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : ''}
/>
{advancedInlineGasShown
? <AdvancedGasInputs
@ -209,7 +212,7 @@ export default class ConfirmTransactionBase extends Component {
label="Total"
value={hexTransactionTotal}
primaryText={primaryTotalTextOverride}
secondaryText={secondaryTotalTextOverride}
secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : secondaryTotalTextOverride}
headerText="Amount + Gas Fee"
headerTextClassName="confirm-detail-row__header-text--total"
primaryValueTextColor="#2f9ae0"

6
ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
View File

@ -18,7 +18,7 @@ import { isBalanceSufficient, calcGasTotal } from '../../send/send.utils'
import { conversionGreaterThan } from '../../../conversion-util'
import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
import { checksumAddress, addressSlicer, valuesFor } from '../../../util'
import { getMetaMaskAccounts, getAdvancedInlineGasShown } from '../../../selectors'
import {getMetaMaskAccounts, getAdvancedInlineGasShown, preferencesSelector, getIsMainnet} from '../../../selectors'
const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
return {
@ -29,6 +29,8 @@ const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
const mapStateToProps = (state, props) => {
const { toAddress: propsToAddress } = props
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
const { confirmTransaction, metamask, gas } = state
const {
ethTransactionAmount,
@ -135,6 +137,8 @@ const mapStateToProps = (state, props) => {
},
advancedInlineGasShown: getAdvancedInlineGasShown(state),
insufficientBalance,
hideSubtitle: (!isMainnet && !showFiatInTestnets),
hideFiatConversion: (!isMainnet && !showFiatInTestnets),
}
}

32
ui/app/components/pages/settings/settings-tab/settings-tab.component.js
View File

@ -63,6 +63,8 @@ export default class SettingsTab extends PureComponent {
setAdvancedInlineGasFeatureFlag: PropTypes.func,
advancedInlineGas: PropTypes.bool,
mobileSync: PropTypes.bool,
showFiatInTestnets: PropTypes.bool,
setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired,
}
state = {
@ -529,6 +531,35 @@ export default class SettingsTab extends PureComponent {
)
}
renderShowConversionInTestnets () {
const { t } = this.context
const {
showFiatInTestnets,
setShowFiatConversionOnTestnetsPreference,
} = this.props
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{ t('showFiatConversionInTestnets') }</span>
<div className="settings-page__content-description">
{ t('showFiatConversionInTestnetsDescription') }
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={showFiatInTestnets}
onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)}
activeLabel=""
inactiveLabel=""
/>
</div>
</div>
</div>
)
}
renderPrivacyOptIn () {
const { t } = this.context
const { privacyMode, setPrivacyMode } = this.props
@ -563,6 +594,7 @@ export default class SettingsTab extends PureComponent {
{ warning && <div className="settings-tab__error">{ warning }</div> }
{ this.renderCurrentConversion() }
{ this.renderUsePrimaryCurrencyOptions() }
{ this.renderShowConversionInTestnets() }
{ this.renderCurrentLocale() }
{ this.renderNewRpcUrl() }
{ this.renderStateLogs() }

7
ui/app/components/pages/settings/settings-tab/settings-tab.container.js
View File

@ -12,6 +12,7 @@ import {
setFeatureFlag,
showModal,
setUseNativeCurrencyAsPrimaryCurrencyPreference,
setShowFiatConversionOnTestnetsPreference,
} from '../../../../actions'
import { preferencesSelector } from '../../../../selectors'
@ -31,7 +32,7 @@ const mapStateToProps = state => {
provider = {},
currentLocale,
} = metamask
const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
const { useNativeCurrencyAsPrimaryCurrency, showFiatInTestnets } = preferencesSelector(state)
return {
warning,
@ -46,6 +47,7 @@ const mapStateToProps = state => {
provider,
useNativeCurrencyAsPrimaryCurrency,
mobileSync,
showFiatInTestnets,
}
}
@ -64,6 +66,9 @@ const mapDispatchToProps = dispatch => {
setUseNativeCurrencyAsPrimaryCurrencyPreference: value => {
return dispatch(setUseNativeCurrencyAsPrimaryCurrencyPreference(value))
},
setShowFiatConversionOnTestnetsPreference: value => {
return dispatch(setShowFiatConversionOnTestnetsPreference(value))
},
showClearApprovalModal: () => dispatch(showModal({ name: 'CLEAR_APPROVED_ORIGINS' })),
}
}

10
ui/app/components/send/account-list-item/account-list-item.component.js
View File

@ -19,8 +19,13 @@ export default class AccountListItem extends Component {
handleClick: PropTypes.func,
icon: PropTypes.node,
balanceIsCached: PropTypes.bool,
showFiat: PropTypes.bool,
};
static defaultProps = {
showFiat: true,
}
static contextTypes = {
t: PropTypes.func,
};
@ -34,6 +39,7 @@ export default class AccountListItem extends Component {
handleClick,
icon = null,
balanceIsCached,
showFiat,
} = this.props
const { name, address, balance } = account || {}
@ -83,11 +89,15 @@ export default class AccountListItem extends Component {
balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
}
</div>
{
showFiat && (
<UserPreferencedCurrencyDisplay
type={SECONDARY}
value={balance}
hideTitle={true}
/>
)
}
</div>
</Tooltip>
)

6
ui/app/components/send/account-list-item/account-list-item.container.js
View File

@ -5,17 +5,23 @@ import {
getNativeCurrency,
} from '../send.selectors.js'
import {
getIsMainnet,
isBalanceCached,
preferencesSelector,
} from '../../../selectors'
import AccountListItem from './account-list-item.component'
export default connect(mapStateToProps)(AccountListItem)
function mapStateToProps (state) {
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
return {
conversionRate: getConversionRate(state),
currentCurrency: getCurrentCurrency(state),
nativeCurrency: getNativeCurrency(state),
balanceIsCached: isBalanceCached(state),
showFiat: (isMainnet || !!showFiatInTestnets),
}
}

14
ui/app/components/send/account-list-item/tests/account-list-item-component.test.js
View File

@ -126,9 +126,23 @@ describe('AccountListItem Component', function () {
)
})
it('should only render one CurrencyDisplay if showFiat is false', () => {
wrapper.setProps({ showFiat: false, displayBalance: true })
assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 1)
assert.deepEqual(
wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
{
type: 'PRIMARY',
value: 'mockBalance',
hideTitle: true,
}
)
})
it('should not render a CurrencyDisplay if displayBalance is false', () => {
wrapper.setProps({ displayBalance: false })
assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 0)
})
})
})

53
ui/app/components/send/account-list-item/tests/account-list-item-container.test.js
View File

@ -11,12 +11,16 @@ proxyquire('../account-list-item.container.js', {
},
},
'../send.selectors.js': {
getConversionRate: (s) => `mockConversionRate:${s}`,
getCurrentCurrency: (s) => `mockCurrentCurrency:${s}`,
getNativeCurrency: (s) => `mockNativeCurrency:${s}`,
getConversionRate: () => `mockConversionRate`,
getCurrentCurrency: () => `mockCurrentCurrency`,
getNativeCurrency: () => `mockNativeCurrency`,
},
'../../../selectors.js': {
isBalanceCached: (s) => `mockBalanceIsCached:${s}`,
isBalanceCached: () => `mockBalanceIsCached`,
preferencesSelector: ({ showFiatInTestnets }) => ({
showFiatInTestnets,
}),
getIsMainnet: ({ isMainnet }) => isMainnet,
},
})
@ -25,11 +29,42 @@ describe('account-list-item container', () => {
describe('mapStateToProps()', () => {
it('should map the correct properties to props', () => {
assert.deepEqual(mapStateToProps('mockState'), {
conversionRate: 'mockConversionRate:mockState',
currentCurrency: 'mockCurrentCurrency:mockState',
nativeCurrency: 'mockNativeCurrency:mockState',
balanceIsCached: 'mockBalanceIsCached:mockState',
assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: false }), {
conversionRate: 'mockConversionRate',
currentCurrency: 'mockCurrentCurrency',
nativeCurrency: 'mockNativeCurrency',
balanceIsCached: 'mockBalanceIsCached',
showFiat: true,
})
})
it('should map the correct properties to props when in mainnet and showFiatInTestnet is true', () => {
assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: true }), {
conversionRate: 'mockConversionRate',
currentCurrency: 'mockCurrentCurrency',
nativeCurrency: 'mockNativeCurrency',
balanceIsCached: 'mockBalanceIsCached',
showFiat: true,
})
})
it('should map the correct properties to props when not in mainnet and showFiatInTestnet is true', () => {
assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: true }), {
conversionRate: 'mockConversionRate',
currentCurrency: 'mockCurrentCurrency',
nativeCurrency: 'mockNativeCurrency',
balanceIsCached: 'mockBalanceIsCached',
showFiat: true,
})
})
it('should map the correct properties to props when not in mainnet and showFiatInTestnet is false', () => {
assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: false }), {
conversionRate: 'mockConversionRate',
currentCurrency: 'mockCurrentCurrency',
nativeCurrency: 'mockNativeCurrency',
balanceIsCached: 'mockBalanceIsCached',
showFiat: false,
})
})

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

@ -159,6 +159,48 @@ describe('TokenInput Component', () => {
assert.equal(wrapper.find('.unit-input__input').props().value, '1')
assert.equal(wrapper.find('.currency-display-component').text(), '$462.12USD')
})
it('should render properly with a token value for fiat, but hideConversion is true', () => {
const mockStore = {
metamask: {
currentCurrency: 'usd',
conversionRate: 231.06,
},
}
const store = configureMockStore()(mockStore)
const wrapper = mount(
<Provider store={store}>
<TokenInput
value="2710"
selectedToken={{
address: '0x1',
decimals: '4',
symbol: 'ABC',
}}
suffix="ABC"
selectedTokenExchangeRate={2}
showFiat
hideConversion
/>
</Provider>,
{
context: { t },
childContextTypes: {
t: PropTypes.func,
},
},
)
assert.ok(wrapper)
const tokenInputInstance = wrapper.find(TokenInput).at(0).instance()
assert.equal(tokenInputInstance.state.decimalValue, 1)
assert.equal(tokenInputInstance.state.hexValue, '2710')
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-input__conversion-component').text(), 'translate noConversionRateAvailable')
})
})
describe('handling actions', () => {

126
ui/app/components/token-input/tests/token-input.container.test.js
View File

@ -29,6 +29,12 @@ describe('TokenInput container', () => {
selectedTokenAddress: '0x1',
contractExchangeRates: {},
send: {},
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'mainnet',
},
},
}
@ -40,6 +46,7 @@ describe('TokenInput container', () => {
symbol: 'ABC',
},
selectedTokenExchangeRate: 0,
hideConversion: false,
})
})
@ -59,6 +66,12 @@ describe('TokenInput container', () => {
send: {
token: { address: 'test' },
},
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'mainnet',
},
},
}
@ -68,6 +81,7 @@ describe('TokenInput container', () => {
address: 'test',
},
selectedTokenExchangeRate: 0,
hideConversion: false,
})
})
@ -87,6 +101,12 @@ describe('TokenInput container', () => {
'0x1': 5,
},
send: {},
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'mainnet',
},
},
}
@ -98,6 +118,112 @@ describe('TokenInput container', () => {
symbol: 'ABC',
},
selectedTokenExchangeRate: 5,
hideConversion: false,
})
})
it('should return the correct props when not in mainnet and showFiatInTestnets is false', () => {
const mockState = {
metamask: {
currentCurrency: 'usd',
tokens: [
{
address: '0x1',
decimals: '4',
symbol: 'ABC',
},
],
selectedTokenAddress: '0x1',
contractExchangeRates: {},
send: {},
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'rinkeby',
},
},
}
assert.deepEqual(mapStateToProps(mockState), {
currentCurrency: 'usd',
selectedToken: {
address: '0x1',
decimals: '4',
symbol: 'ABC',
},
selectedTokenExchangeRate: 0,
hideConversion: true,
})
})
it('should return the correct props when not in mainnet and showFiatInTestnets is true', () => {
const mockState = {
metamask: {
currentCurrency: 'usd',
tokens: [
{
address: '0x1',
decimals: '4',
symbol: 'ABC',
},
],
selectedTokenAddress: '0x1',
contractExchangeRates: {},
send: {},
preferences: {
showFiatInTestnets: true,
},
provider: {
type: 'rinkeby',
},
},
}
assert.deepEqual(mapStateToProps(mockState), {
currentCurrency: 'usd',
selectedToken: {
address: '0x1',
decimals: '4',
symbol: 'ABC',
},
selectedTokenExchangeRate: 0,
hideConversion: false,
})
})
it('should return the correct props when in mainnet and showFiatInTestnets is true', () => {
const mockState = {
metamask: {
currentCurrency: 'usd',
tokens: [
{
address: '0x1',
decimals: '4',
symbol: 'ABC',
},
],
selectedTokenAddress: '0x1',
contractExchangeRates: {},
send: {},
preferences: {
showFiatInTestnets: true,
},
provider: {
type: 'mainnet',
},
},
}
assert.deepEqual(mapStateToProps(mockState), {
currentCurrency: 'usd',
selectedToken: {
address: '0x1',
decimals: '4',
symbol: 'ABC',
},
selectedTokenExchangeRate: 0,
hideConversion: false,
})
})
})

11
ui/app/components/token-input/token-input.component.js
View File

@ -24,6 +24,7 @@ export default class TokenInput extends PureComponent {
value: PropTypes.string,
suffix: PropTypes.string,
showFiat: PropTypes.bool,
hideConversion: PropTypes.bool,
selectedToken: PropTypes.object,
selectedTokenExchangeRate: PropTypes.number,
}
@ -81,10 +82,18 @@ export default class TokenInput extends PureComponent {
}
renderConversionComponent () {
const { selectedTokenExchangeRate, showFiat, currentCurrency } = this.props
const { selectedTokenExchangeRate, showFiat, currentCurrency, hideConversion } = this.props
const { decimalValue } = this.state
let currency, numberOfDecimals
if (hideConversion) {
return (
<div className="currency-input__conversion-component">
{ this.context.t('noConversionRateAvailable') }
</div>
)
}
if (showFiat) {
// Display Fiat
currency = currentCurrency

5
ui/app/components/token-input/token-input.container.js
View File

@ -1,14 +1,17 @@
import { connect } from 'react-redux'
import TokenInput from './token-input.component'
import { getSelectedToken, getSelectedTokenExchangeRate } from '../../selectors'
import {getIsMainnet, getSelectedToken, getSelectedTokenExchangeRate, preferencesSelector} from '../../selectors'
const mapStateToProps = state => {
const { metamask: { currentCurrency } } = state
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
return {
currentCurrency,
selectedToken: getSelectedToken(state),
selectedTokenExchangeRate: getSelectedTokenExchangeRate(state),
hideConversion: (!isMainnet && !showFiatInTestnets),
}
}

8
ui/app/components/transaction-breakdown/transaction-breakdown.component.js
View File

@ -18,15 +18,17 @@ export default class TransactionBreakdown extends PureComponent {
transaction: PropTypes.object,
className: PropTypes.string,
nativeCurrency: PropTypes.string.isRequired,
showFiat: PropTypes.bool,
}
static defaultProps = {
transaction: {},
showFiat: true,
}
render () {
const { t } = this.context
const { transaction, className, nativeCurrency } = this.props
const { transaction, className, nativeCurrency, showFiat } = this.props
const { txParams: { gas, gasPrice, value } = {}, txReceipt: { gasUsed } = {} } = transaction
const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas
@ -84,11 +86,15 @@ export default class TransactionBreakdown extends PureComponent {
type={PRIMARY}
value={totalInHex}
/>
{
showFiat && (
<UserPreferencedCurrencyDisplay
className="transaction-breakdown__value"
type={SECONDARY}
value={totalInHex}
/>
)
}
</div>
</TransactionBreakdownRow>
</div>

6
ui/app/components/transaction-breakdown/transaction-breakdown.container.js
View File

@ -1,10 +1,14 @@
import { connect } from 'react-redux'
import TransactionBreakdown from './transaction-breakdown.component'
import { getNativeCurrency } from '../../selectors'
import {getIsMainnet, getNativeCurrency, preferencesSelector} from '../../selectors'
const mapStateToProps = (state) => {
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
return {
nativeCurrency: getNativeCurrency(state),
showFiat: (isMainnet || !!showFiatInTestnets),
}
}

9
ui/app/components/transaction-list-item/transaction-list-item.component.js
View File

@ -24,6 +24,7 @@ export default class TransactionListItem extends PureComponent {
showCancelModal: PropTypes.func,
showCancel: PropTypes.bool,
showRetry: PropTypes.bool,
showFiat: PropTypes.bool,
token: PropTypes.object,
tokenData: PropTypes.object,
transaction: PropTypes.object,
@ -33,6 +34,10 @@ export default class TransactionListItem extends PureComponent {
fetchGasEstimates: PropTypes.func,
}
static defaultProps = {
showFiat: true,
}
state = {
showTransactionDetails: false,
}
@ -115,9 +120,9 @@ export default class TransactionListItem extends PureComponent {
}
renderSecondaryCurrency () {
const { token, value } = this.props
const { token, value, showFiat } = this.props
return token
return token || !showFiat
? null
: (
<UserPreferencedCurrencyDisplay

5
ui/app/components/transaction-list-item/transaction-list-item.container.js
View File

@ -14,11 +14,16 @@ import {
setCustomGasPriceForRetry,
setCustomGasLimit,
} from '../../ducks/gas.duck'
import {getIsMainnet, preferencesSelector} from '../../selectors'
const mapStateToProps = state => {
const { metamask: { knownMethodData } } = state
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
return {
knownMethodData,
showFiat: (isMainnet || !!showFiatInTestnets),
}
}

11
ui/app/components/transaction-view-balance/transaction-view-balance.component.js
View File

@ -22,10 +22,15 @@ export default class TransactionViewBalance extends PureComponent {
balance: PropTypes.string,
assetImage: PropTypes.string,
balanceIsCached: PropTypes.bool,
showFiat: PropTypes.bool,
}
static defaultProps = {
showFiat: true,
}
renderBalance () {
const { selectedToken, balance, balanceIsCached } = this.props
const { selectedToken, balance, balanceIsCached, showFiat } = this.props
return selectedToken
? (
@ -53,6 +58,8 @@ export default class TransactionViewBalance extends PureComponent {
balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null
}
</div>
{
showFiat && (
<UserPreferencedCurrencyDisplay
className={classnames({
'transaction-view-balance__cached-secondary-balance': balanceIsCached,
@ -63,6 +70,8 @@ export default class TransactionViewBalance extends PureComponent {
ethNumberOfDecimals={4}
hideTitle={true}
/>
)
}
</div>
</Tooltip>
)

5
ui/app/components/transaction-view-balance/transaction-view-balance.container.js
View File

@ -9,10 +9,14 @@ import {
getSelectedTokenAssetImage,
getMetaMaskAccounts,
isBalanceCached,
preferencesSelector,
getIsMainnet,
} from '../../selectors'
import { showModal } from '../../actions'
const mapStateToProps = state => {
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
const selectedAddress = getSelectedAddress(state)
const { metamask: { network } } = state
const accounts = getMetaMaskAccounts(state)
@ -26,6 +30,7 @@ const mapStateToProps = state => {
nativeCurrency: getNativeCurrency(state),
assetImage: getSelectedTokenAssetImage(state),
balanceIsCached: isBalanceCached(state),
showFiat: (isMainnet || !!showFiatInTestnets),
}
}

87
ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js
View File

@ -21,6 +21,10 @@ describe('UserPreferencedCurrencyDisplay container', () => {
nativeCurrency: 'ETH',
preferences: {
useNativeCurrencyAsPrimaryCurrency: true,
showFiatInTestnets: false,
},
provider: {
type: 'mainnet',
},
},
}
@ -28,6 +32,30 @@ describe('UserPreferencedCurrencyDisplay container', () => {
assert.deepEqual(mapStateToProps(mockState), {
nativeCurrency: 'ETH',
useNativeCurrencyAsPrimaryCurrency: true,
isMainnet: true,
showFiatInTestnets: false,
})
})
it('should return the correct props when not in mainnet and showFiatInTestnets is true', () => {
const mockState = {
metamask: {
nativeCurrency: 'ETH',
preferences: {
useNativeCurrencyAsPrimaryCurrency: true,
showFiatInTestnets: true,
},
provider: {
type: 'rinkeby',
},
},
}
assert.deepEqual(mapStateToProps(mockState), {
nativeCurrency: 'ETH',
useNativeCurrencyAsPrimaryCurrency: true,
isMainnet: false,
showFiatInTestnets: true,
})
})
})
@ -41,6 +69,8 @@ describe('UserPreferencedCurrencyDisplay container', () => {
stateProps: {
useNativeCurrencyAsPrimaryCurrency: true,
nativeCurrency: 'ETH',
isMainnet: true,
showFiatInTestnets: false,
},
ownProps: {
type: 'PRIMARY',
@ -56,6 +86,8 @@ describe('UserPreferencedCurrencyDisplay container', () => {
stateProps: {
useNativeCurrencyAsPrimaryCurrency: false,
nativeCurrency: 'ETH',
isMainnet: true,
showFiatInTestnets: false,
},
ownProps: {
type: 'PRIMARY',
@ -71,6 +103,8 @@ describe('UserPreferencedCurrencyDisplay container', () => {
stateProps: {
useNativeCurrencyAsPrimaryCurrency: true,
nativeCurrency: 'ETH',
isMainnet: true,
showFiatInTestnets: false,
},
ownProps: {
type: 'SECONDARY',
@ -88,6 +122,8 @@ describe('UserPreferencedCurrencyDisplay container', () => {
stateProps: {
useNativeCurrencyAsPrimaryCurrency: false,
nativeCurrency: 'ETH',
isMainnet: true,
showFiatInTestnets: false,
},
ownProps: {
type: 'SECONDARY',
@ -103,6 +139,57 @@ describe('UserPreferencedCurrencyDisplay container', () => {
prefix: 'b',
},
},
{
stateProps: {
useNativeCurrencyAsPrimaryCurrency: false,
nativeCurrency: 'ETH',
isMainnet: false,
showFiatInTestnets: false,
},
ownProps: {
type: 'PRIMARY',
},
result: {
currency: 'ETH',
nativeCurrency: 'ETH',
numberOfDecimals: 6,
prefix: undefined,
},
},
{
stateProps: {
useNativeCurrencyAsPrimaryCurrency: false,
nativeCurrency: 'ETH',
isMainnet: false,
showFiatInTestnets: true,
},
ownProps: {
type: 'PRIMARY',
},
result: {
currency: undefined,
nativeCurrency: 'ETH',
numberOfDecimals: 2,
prefix: undefined,
},
},
{
stateProps: {
useNativeCurrencyAsPrimaryCurrency: false,
nativeCurrency: 'ETH',
isMainnet: true,
showFiatInTestnets: true,
},
ownProps: {
type: 'PRIMARY',
},
result: {
currency: undefined,
nativeCurrency: 'ETH',
numberOfDecimals: 2,
prefix: undefined,
},
},
]
tests.forEach(({ stateProps, ownProps, result }) => {

19
ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.container.js
View File

@ -1,19 +1,26 @@
import { connect } from 'react-redux'
import UserPreferencedCurrencyDisplay from './user-preferenced-currency-display.component'
import { preferencesSelector } from '../../selectors'
import { preferencesSelector, getIsMainnet } from '../../selectors'
import { ETH, PRIMARY, SECONDARY } from '../../constants/common'
const mapStateToProps = (state, ownProps) => {
const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
const {
useNativeCurrencyAsPrimaryCurrency,
showFiatInTestnets,
} = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
return {
useNativeCurrencyAsPrimaryCurrency,
showFiatInTestnets,
isMainnet,
nativeCurrency: state.metamask.nativeCurrency,
}
}
const mergeProps = (stateProps, dispatchProps, ownProps) => {
const { useNativeCurrencyAsPrimaryCurrency, nativeCurrency, ...restStateProps } = stateProps
const { useNativeCurrencyAsPrimaryCurrency, showFiatInTestnets, isMainnet, nativeCurrency, ...restStateProps } = stateProps
const {
type,
numberOfDecimals: propsNumberOfDecimals,
@ -40,6 +47,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
prefix = propsPrefix || fiatPrefix
}
if (!isMainnet && !showFiatInTestnets) {
currency = nativeCurrency || ETH
numberOfDecimals = propsNumberOfDecimals || ethNumberOfDecimals || 6
prefix = propsPrefix || ethPrefix
}
return {
...restStateProps,
...dispatchProps,

4
ui/app/constants/common.js
View File

@ -4,3 +4,7 @@ export const WEI = 'WEI'
export const PRIMARY = 'PRIMARY'
export const SECONDARY = 'SECONDARY'
export const NETWORK_TYPES = {
MAINNET: 'mainnet',
}

6
ui/app/reducers/metamask.js
View File

@ -53,6 +53,7 @@ function reduceMetamask (state, action) {
currentLocale: '',
preferences: {
useNativeCurrencyAsPrimaryCurrency: true,
showFiatInTestnets: false,
},
completedOnboarding: false,
knownMethodData: {},
@ -375,7 +376,10 @@ function reduceMetamask (state, action) {
case actions.UPDATE_PREFERENCES: {
return extend(metamaskState, {
preferences: { ...action.payload },
preferences: {
...metamaskState.preferences,
...action.payload,
},
})
}

8
ui/app/selectors.js
View File

@ -1,3 +1,5 @@
import {NETWORK_TYPES} from './constants/common'
const abi = require('human-standard-token-abi')
import {
transactionsSelector,
@ -37,6 +39,7 @@ const selectors = {
getNetworkIdentifier,
isBalanceCached,
getAdvancedInlineGasShown,
getIsMainnet,
}
module.exports = selectors
@ -228,6 +231,11 @@ function getTotalUnapprovedCount ({ metamask }) {
unapprovedTypedMessagesCount
}
function getIsMainnet (state) {
const networkType = getNetworkIdentifier(state)
return networkType === NETWORK_TYPES.MAINNET
}
function preferencesSelector ({ metamask }) {
return metamask.preferences
}

40
ui/app/selectors/custom-gas.js
View File

@ -5,7 +5,7 @@ import {
conversionGreaterThan,
} from '../conversion-util'
import {
getCurrentCurrency,
getCurrentCurrency, getIsMainnet, preferencesSelector,
} from '../selectors'
import {
formatCurrency,
@ -225,6 +225,10 @@ function getRenderableBasicEstimateData (state, gasLimit) {
if (getBasicGasEstimateLoadingStatus(state)) {
return []
}
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
const showFiat = (isMainnet || !!showFiatInTestnets)
const conversionRate = state.metamask.conversionRate
const currentCurrency = getCurrentCurrency(state)
const {
@ -243,22 +247,28 @@ function getRenderableBasicEstimateData (state, gasLimit) {
return [
{
labelKey: 'slow',
feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(safeLow, gasLimit, currentCurrency, conversionRate),
feeInSecondaryCurrency: getRenderableEthFee(safeLow, gasLimit),
feeInPrimaryCurrency: getRenderableEthFee(safeLow, gasLimit),
feeInSecondaryCurrency: showFiat
? getRenderableConvertedCurrencyFee(safeLow, gasLimit, currentCurrency, conversionRate)
: '',
timeEstimate: safeLowWait && getRenderableTimeEstimate(safeLowWait),
priceInHexWei: getGasPriceInHexWei(safeLow),
},
{
labelKey: 'average',
feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(fast, gasLimit, currentCurrency, conversionRate),
feeInSecondaryCurrency: getRenderableEthFee(fast, gasLimit),
feeInPrimaryCurrency: getRenderableEthFee(fast, gasLimit),
feeInSecondaryCurrency: showFiat
? getRenderableConvertedCurrencyFee(fast, gasLimit, currentCurrency, conversionRate)
: '',
timeEstimate: fastWait && getRenderableTimeEstimate(fastWait),
priceInHexWei: getGasPriceInHexWei(fast),
},
{
labelKey: 'fast',
feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(fastest, gasLimit, currentCurrency, conversionRate),
feeInSecondaryCurrency: getRenderableEthFee(fastest, gasLimit),
feeInPrimaryCurrency: getRenderableEthFee(fastest, gasLimit),
feeInSecondaryCurrency: showFiat
? getRenderableConvertedCurrencyFee(fastest, gasLimit, currentCurrency, conversionRate)
: '',
timeEstimate: fastestWait && getRenderableTimeEstimate(fastestWait),
priceInHexWei: getGasPriceInHexWei(fastest),
},
@ -269,6 +279,10 @@ function getRenderableEstimateDataForSmallButtonsFromGWEI (state) {
if (getBasicGasEstimateLoadingStatus(state)) {
return []
}
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
const showFiat = (isMainnet || !!showFiatInTestnets)
const gasLimit = state.metamask.send.gasLimit || getCustomGasLimit(state) || '0x5208'
const conversionRate = state.metamask.conversionRate
const currentCurrency = getCurrentCurrency(state)
@ -285,19 +299,25 @@ function getRenderableEstimateDataForSmallButtonsFromGWEI (state) {
return [
{
labelKey: 'slow',
feeInSecondaryCurrency: getRenderableConvertedCurrencyFee(safeLow, gasLimit, currentCurrency, conversionRate),
feeInSecondaryCurrency: showFiat
? getRenderableConvertedCurrencyFee(safeLow, gasLimit, currentCurrency, conversionRate)
: '',
feeInPrimaryCurrency: getRenderableEthFee(safeLow, gasLimit, NUMBER_OF_DECIMALS_SM_BTNS, true),
priceInHexWei: getGasPriceInHexWei(safeLow, true),
},
{
labelKey: 'average',
feeInSecondaryCurrency: getRenderableConvertedCurrencyFee(fast, gasLimit, currentCurrency, conversionRate),
feeInSecondaryCurrency: showFiat
? getRenderableConvertedCurrencyFee(fast, gasLimit, currentCurrency, conversionRate)
: '',
feeInPrimaryCurrency: getRenderableEthFee(fast, gasLimit, NUMBER_OF_DECIMALS_SM_BTNS, true),
priceInHexWei: getGasPriceInHexWei(fast, true),
},
{
labelKey: 'fast',
feeInSecondaryCurrency: getRenderableConvertedCurrencyFee(fastest, gasLimit, currentCurrency, conversionRate),
feeInSecondaryCurrency: showFiat
? getRenderableConvertedCurrencyFee(fastest, gasLimit, currentCurrency, conversionRate)
: '',
feeInPrimaryCurrency: getRenderableEthFee(fastest, gasLimit, NUMBER_OF_DECIMALS_SM_BTNS, true),
priceInHexWei: getGasPriceInHexWei(fastest, true),
},

345
ui/app/selectors/tests/custom-gas.test.js
View File

@ -78,22 +78,22 @@ describe('custom-gas selectors', () => {
expectedResult: [
{
labelKey: 'slow',
feeInPrimaryCurrency: '$0.01',
feeInSecondaryCurrency: '0.0000525 ETH',
feeInSecondaryCurrency: '$0.01',
feeInPrimaryCurrency: '0.0000525 ETH',
timeEstimate: '~6 min 36 sec',
priceInHexWei: '0x9502f900',
},
{
labelKey: 'average',
feeInPrimaryCurrency: '$0.03',
feeInSecondaryCurrency: '0.000105 ETH',
feeInSecondaryCurrency: '$0.03',
feeInPrimaryCurrency: '0.000105 ETH',
timeEstimate: '~3 min 18 sec',
priceInHexWei: '0x12a05f200',
},
{
labelKey: 'fast',
feeInPrimaryCurrency: '$0.05',
feeInSecondaryCurrency: '0.00021 ETH',
feeInSecondaryCurrency: '$0.05',
feeInPrimaryCurrency: '0.00021 ETH',
timeEstimate: '~30 sec',
priceInHexWei: '0x2540be400',
},
@ -102,6 +102,12 @@ describe('custom-gas selectors', () => {
metamask: {
conversionRate: 255.71,
currentCurrency: 'usd',
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'mainnet',
},
},
gas: {
basicEstimates: {
@ -120,22 +126,22 @@ describe('custom-gas selectors', () => {
expectedResult: [
{
labelKey: 'slow',
feeInPrimaryCurrency: '$0.27',
feeInSecondaryCurrency: '0.000105 ETH',
feeInSecondaryCurrency: '$0.27',
feeInPrimaryCurrency: '0.000105 ETH',
timeEstimate: '~13 min 12 sec',
priceInHexWei: '0x12a05f200',
},
{
labelKey: 'average',
feeInPrimaryCurrency: '$0.54',
feeInSecondaryCurrency: '0.00021 ETH',
feeInSecondaryCurrency: '$0.54',
feeInPrimaryCurrency: '0.00021 ETH',
timeEstimate: '~6 min 36 sec',
priceInHexWei: '0x2540be400',
},
{
labelKey: 'fast',
feeInPrimaryCurrency: '$1.07',
feeInSecondaryCurrency: '0.00042 ETH',
feeInSecondaryCurrency: '$1.07',
feeInPrimaryCurrency: '0.00042 ETH',
timeEstimate: '~1 min',
priceInHexWei: '0x4a817c800',
},
@ -147,6 +153,165 @@ describe('custom-gas selectors', () => {
send: {
gasLimit: '0x5208',
},
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'mainnet',
},
},
gas: {
basicEstimates: {
blockTime: 14.16326530612245,
safeLow: 5,
safeLowWait: 13.2,
fast: 10,
fastWait: 6.6,
fastest: 20,
fastestWait: 1.0,
},
},
},
},
{
expectedResult: [
{
labelKey: 'slow',
feeInSecondaryCurrency: '',
feeInPrimaryCurrency: '0.000105 ETH',
timeEstimate: '~13 min 12 sec',
priceInHexWei: '0x12a05f200',
},
{
labelKey: 'average',
feeInSecondaryCurrency: '',
feeInPrimaryCurrency: '0.00021 ETH',
timeEstimate: '~6 min 36 sec',
priceInHexWei: '0x2540be400',
},
{
labelKey: 'fast',
feeInSecondaryCurrency: '',
feeInPrimaryCurrency: '0.00042 ETH',
timeEstimate: '~1 min',
priceInHexWei: '0x4a817c800',
},
],
mockState: {
metamask: {
conversionRate: 2557.1,
currentCurrency: 'usd',
send: {
gasLimit: '0x5208',
},
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'rinkeby',
},
},
gas: {
basicEstimates: {
blockTime: 14.16326530612245,
safeLow: 5,
safeLowWait: 13.2,
fast: 10,
fastWait: 6.6,
fastest: 20,
fastestWait: 1.0,
},
},
},
},
{
expectedResult: [
{
labelKey: 'slow',
feeInSecondaryCurrency: '$0.27',
feeInPrimaryCurrency: '0.000105 ETH',
timeEstimate: '~13 min 12 sec',
priceInHexWei: '0x12a05f200',
},
{
labelKey: 'average',
feeInSecondaryCurrency: '$0.54',
feeInPrimaryCurrency: '0.00021 ETH',
timeEstimate: '~6 min 36 sec',
priceInHexWei: '0x2540be400',
},
{
labelKey: 'fast',
feeInSecondaryCurrency: '$1.07',
feeInPrimaryCurrency: '0.00042 ETH',
timeEstimate: '~1 min',
priceInHexWei: '0x4a817c800',
},
],
mockState: {
metamask: {
conversionRate: 2557.1,
currentCurrency: 'usd',
send: {
gasLimit: '0x5208',
},
preferences: {
showFiatInTestnets: true,
},
provider: {
type: 'rinkeby',
},
},
gas: {
basicEstimates: {
blockTime: 14.16326530612245,
safeLow: 5,
safeLowWait: 13.2,
fast: 10,
fastWait: 6.6,
fastest: 20,
fastestWait: 1.0,
},
},
},
},
{
expectedResult: [
{
labelKey: 'slow',
feeInSecondaryCurrency: '$0.27',
feeInPrimaryCurrency: '0.000105 ETH',
timeEstimate: '~13 min 12 sec',
priceInHexWei: '0x12a05f200',
},
{
labelKey: 'average',
feeInSecondaryCurrency: '$0.54',
feeInPrimaryCurrency: '0.00021 ETH',
timeEstimate: '~6 min 36 sec',
priceInHexWei: '0x2540be400',
},
{
labelKey: 'fast',
feeInSecondaryCurrency: '$1.07',
feeInPrimaryCurrency: '0.00042 ETH',
timeEstimate: '~1 min',
priceInHexWei: '0x4a817c800',
},
],
mockState: {
metamask: {
conversionRate: 2557.1,
currentCurrency: 'usd',
send: {
gasLimit: '0x5208',
},
preferences: {
showFiatInTestnets: true,
},
provider: {
type: 'mainnet',
},
},
gas: {
basicEstimates: {
@ -203,6 +368,12 @@ describe('custom-gas selectors', () => {
send: {
gasLimit: '0x5208',
},
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'mainnet',
},
},
gas: {
basicEstimates: {
@ -245,6 +416,156 @@ describe('custom-gas selectors', () => {
send: {
gasLimit: '0x5208',
},
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'mainnet',
},
},
gas: {
basicEstimates: {
blockTime: 14.16326530612245,
safeLow: 50,
safeLowWait: 13.2,
fast: 100,
fastWait: 6.6,
fastest: 200,
fastestWait: 1.0,
},
},
},
},
{
expectedResult: [
{
feeInSecondaryCurrency: '',
feeInPrimaryCurrency: '0.00105 ETH',
labelKey: 'slow',
priceInHexWei: '0xba43b7400',
},
{
feeInSecondaryCurrency: '',
feeInPrimaryCurrency: '0.0021 ETH',
labelKey: 'average',
priceInHexWei: '0x174876e800',
},
{
feeInSecondaryCurrency: '',
feeInPrimaryCurrency: '0.0042 ETH',
labelKey: 'fast',
priceInHexWei: '0x2e90edd000',
},
],
mockState: {
metamask: {
conversionRate: 2557.1,
currentCurrency: 'usd',
send: {
gasLimit: '0x5208',
},
preferences: {
showFiatInTestnets: false,
},
provider: {
type: 'rinkeby',
},
},
gas: {
basicEstimates: {
blockTime: 14.16326530612245,
safeLow: 50,
safeLowWait: 13.2,
fast: 100,
fastWait: 6.6,
fastest: 200,
fastestWait: 1.0,
},
},
},
},
{
expectedResult: [
{
feeInSecondaryCurrency: '$2.68',
feeInPrimaryCurrency: '0.00105 ETH',
labelKey: 'slow',
priceInHexWei: '0xba43b7400',
},
{
feeInSecondaryCurrency: '$5.37',
feeInPrimaryCurrency: '0.0021 ETH',
labelKey: 'average',
priceInHexWei: '0x174876e800',
},
{
feeInSecondaryCurrency: '$10.74',
feeInPrimaryCurrency: '0.0042 ETH',
labelKey: 'fast',
priceInHexWei: '0x2e90edd000',
},
],
mockState: {
metamask: {
conversionRate: 2557.1,
currentCurrency: 'usd',
send: {
gasLimit: '0x5208',
},
preferences: {
showFiatInTestnets: true,
},
provider: {
type: 'rinkeby',
},
},
gas: {
basicEstimates: {
blockTime: 14.16326530612245,
safeLow: 50,
safeLowWait: 13.2,
fast: 100,
fastWait: 6.6,
fastest: 200,
fastestWait: 1.0,
},
},
},
},
{
expectedResult: [
{
feeInSecondaryCurrency: '$2.68',
feeInPrimaryCurrency: '0.00105 ETH',
labelKey: 'slow',
priceInHexWei: '0xba43b7400',
},
{
feeInSecondaryCurrency: '$5.37',
feeInPrimaryCurrency: '0.0021 ETH',
labelKey: 'average',
priceInHexWei: '0x174876e800',
},
{
feeInSecondaryCurrency: '$10.74',
feeInPrimaryCurrency: '0.0042 ETH',
labelKey: 'fast',
priceInHexWei: '0x2e90edd000',
},
],
mockState: {
metamask: {
conversionRate: 2557.1,
currentCurrency: 'usd',
send: {
gasLimit: '0x5208',
},
preferences: {
showFiatInTestnets: true,
},
provider: {
type: 'mainnet',
},
},
gas: {
basicEstimates: {