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

Merge pull request #4627 from TrejGun/gas-fee-display

Browse Source 
refactor gas-fee-display component
This commit is contained in:
Dan J Miller 2018-06-26 16:25:26 -02:30 committed by GitHub
commit 60feeb393b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 121 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/pending-tx/confirm-send-ether.js
View File

@ -20,7 +20,7 @@ const {
calcGasTotal,
isBalanceSufficient,
} = require('../send_/send.utils')
const GasFeeDisplay = require('../send/gas-fee-display-v2')
const GasFeeDisplay = require('../send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component').default
const SenderToRecipient = require('../sender-to-recipient')
const NetworkDisplay = require('../network-display')
const currencyFormatter = require('currency-formatter')

2
ui/app/components/pending-tx/confirm-send-token.js
View File

@ -11,7 +11,7 @@ abiDecoder.addABI(tokenAbi)
const actions = require('../../actions')
const clone = require('clone')
const Identicon = require('../identicon')
const GasFeeDisplay = require('../send/gas-fee-display-v2.js')
const GasFeeDisplay = require('../send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js').default
const NetworkDisplay = require('../network-display')
const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN

53
ui/app/components/send/gas-fee-display-v2.js
View File

@ -1,53 +0,0 @@
const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const inherits = require('util').inherits
const CurrencyDisplay = require('./currency-display')
const connect = require('react-redux').connect
GasFeeDisplay.contextTypes = {
t: PropTypes.func,
}
module.exports = connect()(GasFeeDisplay)
inherits(GasFeeDisplay, Component)
function GasFeeDisplay () {
Component.call(this)
}
GasFeeDisplay.prototype.render = function () {
const {
conversionRate,
gasTotal,
onClick,
primaryCurrency = 'ETH',
convertedCurrency,
gasLoadingError,
} = this.props
return h('div.send-v2__gas-fee-display', [
gasTotal
? h(CurrencyDisplay, {
primaryCurrency,
convertedCurrency,
value: gasTotal,
conversionRate,
convertedPrefix: '$',
readOnly: true,
})
: gasLoadingError
? h('div.currency-display.currency-display--message', this.context.t('setGasPrice'))
: h('div.currency-display', this.context.t('loading')),
h('button.sliders-icon-container', {
onClick,
disabled: !gasTotal && !gasLoadingError,
}, [
h('i.fa.fa-sliders.sliders-icon'),
]),
])
}

61
ui/app/components/send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js Normal file
View File

@ -0,0 +1,61 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import CurrencyDisplay from '../../../../send/currency-display'
export default class GasFeeDisplay extends Component {
static propTypes = {
conversionRate: PropTypes.number,
primaryCurrency: PropTypes.string,
convertedCurrency: PropTypes.string,
gasLoadingError: PropTypes.bool,
gasTotal: PropTypes.string,
onClick: PropTypes.func,
};
render() {
const {
conversionRate,
gasTotal,
onClick,
primaryCurrency = 'ETH',
convertedCurrency,
gasLoadingError,
} = this.props
return (
<div className="send-v2__gas-fee-display">
{gasTotal
? <CurrencyDisplay
primaryCurrency={primaryCurrency}
convertedCurrency={convertedCurrency}
value={gasTotal}
conversionRate={conversionRate}
gasLoadingError={gasLoadingError}
convertedPrefix={'$'}
readOnly
/>
: gasLoadingError
? <div className="currency-display.currency-display--message">
{this.context.t('setGasPrice')}
</div>
: <div className="currency-display">
{this.context.t('loading')}
</div>
}
<button
className="sliders-icon-container"
onClick={onClick}
disabled={!gasTotal && !gasLoadingError}
>
<i className="fa fa-sliders sliders-icon" />
</button>
</div>
)
}
}
GasFeeDisplay.contextTypes = {
t: PropTypes.func,
}

1
ui/app/components/send_/send-content/send-gas-row/gas-fee-display/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './gas-fee-display.component'

55
ui/app/components/send_/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js Normal file
View File

@ -0,0 +1,55 @@
import React from 'react'
import assert from 'assert'
import {shallow} from 'enzyme'
import GasFeeDisplay from '../gas-fee-display.component'
import CurrencyDisplay from '../../../../../send/currency-display'
import sinon from 'sinon'
const propsMethodSpies = {
showCustomizeGasModal: sinon.spy(),
}
describe.only('SendGasRow Component', function() {
let wrapper
beforeEach(() => {
wrapper = shallow(<GasFeeDisplay
conversionRate={20}
gasTotal={'mockGasTotal'}
onClick={propsMethodSpies.showCustomizeGasModal}
primaryCurrency={'mockPrimaryCurrency'}
convertedCurrency={'mockConvertedCurrency'}
/>, {context: {t: str => str + '_t'}})
})
afterEach(() => {
propsMethodSpies.showCustomizeGasModal.resetHistory()
})
describe('render', () => {
it('should render a CurrencyDisplay component', () => {
assert.equal(wrapper.find(CurrencyDisplay).length, 1)
})
it('should render the CurrencyDisplay with the correct props', () => {
const {
conversionRate,
convertedCurrency,
value,
} = wrapper.find(CurrencyDisplay).props()
assert.equal(conversionRate, 20)
assert.equal(convertedCurrency, 'mockConvertedCurrency')
assert.equal(value, 'mockGasTotal')
})
it('should render the Button with the correct props', () => {
const {
onClick,
} = wrapper.find('button').props()
assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0)
onClick()
assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
})
})
})

2
ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import SendRowWrapper from '../send-row-wrapper/'
import GasFeeDisplay from '../../../send/gas-fee-display-v2'
import GasFeeDisplay from './gas-fee-display/gas-fee-display.component'
export default class SendGasRow extends Component {

2
ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
View File

@ -5,7 +5,7 @@ import sinon from 'sinon'
import SendGasRow from '../send-gas-row.component.js'
import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
import GasFeeDisplay from '../../../../send/gas-fee-display-v2'
import GasFeeDisplay from '../gas-fee-display/gas-fee-display.component'
const propsMethodSpies = {
showCustomizeGasModal: sinon.spy(),