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

eslint: Enable more react/jsx-* rules (#7592)

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-12-03 13:05:44 -03:30 committed by GitHub
parent 2c33ad3eb4
commit 2e69f3233e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
97 changed files with 1243 additions and 962 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.eslintrc
View File

@ -156,6 +156,25 @@
"react/jsx-equals-spacing": 2,
"react/no-deprecated": 0,
"react/default-props-match-prop-types": 2,
"react/jsx-closing-tag-location": 2,
"react/jsx-no-duplicate-props": 2,
"react/jsx-closing-bracket-location": 2,
"react/jsx-first-prop-new-line": 2,
"react/jsx-max-props-per-line": [2, { "maximum": 1, "when": "multiline"} ],
"react/jsx-tag-spacing": [2, {
"closingSlash": "never",
"beforeSelfClosing": "always",
"afterOpening": "never"
}],
"react/jsx-wrap-multilines": [2, {
"declaration": "parens-new-line",
"assignment": "parens-new-line",
"return": "parens-new-line",
"arrow": "parens-new-line",
"condition": "parens-new-line",
"logical": "parens-new-line",
"prop": "parens-new-line"
}],
"semi": [2, "never"],
"semi-spacing": [2, { "before": false, "after": true }],
"space-before-blocks": [2, "always"],

2
development/mock-dev.js
View File

@ -135,7 +135,7 @@ function startApp () {
margin: '20px',
}}
>
<Root store={store}/>
<Root store={store} />
</div>
</div>,
container,

16
ui/app/components/app/account-menu/account-menu.component.js
View File

@ -253,12 +253,12 @@ export default class AccountMenu extends PureComponent {
})
history.push(NEW_ACCOUNT_ROUTE)
}}
icon={
icon={(
<img
className="account-menu__item-icon"
src="images/plus-btn-white.svg"
/>
}
)}
text={t('createAccount')}
/>
<Item
@ -273,12 +273,12 @@ export default class AccountMenu extends PureComponent {
})
history.push(IMPORT_ACCOUNT_ROUTE)
}}
icon={
icon={(
<img
className="account-menu__item-icon"
src="images/import-account.svg"
/>
}
)}
text={t('importAccount')}
/>
<Item
@ -297,12 +297,12 @@ export default class AccountMenu extends PureComponent {
history.push(CONNECT_HARDWARE_ROUTE)
}
}}
icon={
icon={(
<img
className="account-menu__item-icon"
src="images/connect-icon.svg"
/>
}
)}
text={t('connectHardwareWallet')}
/>
<Divider />
@ -328,12 +328,12 @@ export default class AccountMenu extends PureComponent {
},
})
}}
icon={
icon={(
<img
className="account-menu__item-icon"
src="images/settings.svg"
/>
}
)}
text={t('settings')}
/>
</Menu>

3
ui/app/components/app/app-header/app-header.component.js
View File

@ -89,7 +89,8 @@ export default class AppHeader extends PureComponent {
return (
<div
className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}
>
<div className="app-header__contents">
<MetaFoxLogo
unsetIconHeight

8
ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
View File

@ -47,9 +47,11 @@ const ConfirmPageContainerSummary = props => {
</div>
</div>
{
hideSubtitle || <div className="confirm-page-container-summary__subtitle">
{ subtitleComponent || subtitle }
</div>
hideSubtitle || (
<div className="confirm-page-container-summary__subtitle">
{ subtitleComponent || subtitle }
</div>
)
}
</div>
)

54
ui/app/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
View File

@ -34,36 +34,40 @@ export default class ConfirmPageContainerHeader extends Component {
return (
<div className="confirm-page-container-header__row">
{ !showAccountInHeader
? <div
className="confirm-page-container-header__back-button-container"
style={{
visibility: showEdit ? 'initial' : 'hidden',
}}
>
<img
src="/images/caret-left.svg"
/>
<span
className="confirm-page-container-header__back-button"
onClick={() => onEdit()}
? (
<div
className="confirm-page-container-header__back-button-container"
style={{
visibility: showEdit ? 'initial' : 'hidden',
}}
>
{ this.context.t('edit') }
</span>
</div>
<img
src="/images/caret-left.svg"
/>
<span
className="confirm-page-container-header__back-button"
onClick={() => onEdit()}
>
{ this.context.t('edit') }
</span>
</div>
)
: null
}
{ showAccountInHeader
? <div className="confirm-page-container-header__address-container">
<div className="confirm-page-container-header__address-identicon">
<Identicon
address={accountAddress}
diameter={24}
/>
? (
<div className="confirm-page-container-header__address-container">
<div className="confirm-page-container-header__address-identicon">
<Identicon
address={accountAddress}
diameter={24}
/>
</div>
<div className="confirm-page-container-header__address">
{ addressSlicer(accountAddress) }
</div>
</div>
<div className="confirm-page-container-header__address">
{ addressSlicer(accountAddress) }
</div>
</div>
)
: null
}
{ !isFullScreen && <NetworkDisplay /> }

24
ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
View File

@ -5,23 +5,28 @@ const ConfirmPageContainerNavigation = props => {
const { onNextTx, totalTx, positionOfCurrentTx, nextTxId, prevTxId, showNavigation, firstTx, lastTx, ofText, requestsWaitingText } = props
return (
<div className="confirm-page-container-navigation"
<div
className="confirm-page-container-navigation"
style={{
display: showNavigation ? 'flex' : 'none',
}}
>
<div className="confirm-page-container-navigation__container"
<div
className="confirm-page-container-navigation__container"
style={{
visibility: prevTxId ? 'initial' : 'hidden',
}}>
}}
>
<div
className="confirm-page-container-navigation__arrow"
onClick={() => onNextTx(firstTx)}>
onClick={() => onNextTx(firstTx)}
>
<img src="/images/double-arrow.svg" />
</div>
<div
className="confirm-page-container-navigation__arrow"
onClick={() => onNextTx(prevTxId)}>
onClick={() => onNextTx(prevTxId)}
>
<img src="/images/single-arrow.svg" />
</div>
</div>
@ -37,15 +42,18 @@ const ConfirmPageContainerNavigation = props => {
className="confirm-page-container-navigation__container"
style={{
visibility: nextTxId ? 'initial' : 'hidden',
}}>
}}
>
<div
className="confirm-page-container-navigation__arrow"
onClick={() => onNextTx(nextTxId)}>
onClick={() => onNextTx(nextTxId)}
>
<img className="confirm-page-container-navigation__imageflip" src="/images/single-arrow.svg" />
</div>
<div
className="confirm-page-container-navigation__arrow"
onClick={() => onNextTx(lastTx)}>
onClick={() => onNextTx(lastTx)}
>
<img className="confirm-page-container-navigation__imageflip" src="/images/double-arrow.svg" />
</div>
</div>

20
ui/app/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -133,15 +133,17 @@ export default class ConfirmPageContainer extends Component {
>
{ hideSenderToRecipient
? null
: <SenderToRecipient
senderName={fromName}
senderAddress={fromAddress}
recipientName={toName}
recipientAddress={toAddress}
recipientEns={toEns}
recipientNickname={toNickname}
assetImage={renderAssetImage ? assetImage : undefined}
/>
: (
<SenderToRecipient
senderName={fromName}
senderAddress={fromAddress}
recipientName={toName}
recipientAddress={toAddress}
recipientEns={toEns}
recipientNickname={toNickname}
assetImage={renderAssetImage ? assetImage : undefined}
/>
)
}
</ConfirmPageContainerHeader>
{

8
ui/app/components/app/contact-list/recipient-group/recipient-group.component.js
View File

@ -15,9 +15,11 @@ export default function RecipientGroup ({ label, items, onSelect, selectedAddres
return (
<div className="send__select-recipient-wrapper__group">
{label && <div className="send__select-recipient-wrapper__group-label">
{label}
</div>}
{label && (
<div className="send__select-recipient-wrapper__group-label">
{label}
</div>
)}
{
items.map(({ address, name }) => (
<div

14
ui/app/components/app/dropdowns/components/network-dropdown-icon.js
View File

@ -25,12 +25,14 @@ function NetworkDropdownIcon (props) {
)
: (
<div className={`menu-icon-circle${isSelected ? '--active' : ''}`}>
<div style={{
background: backgroundColor,
border: innerBorder,
height: `${diameter}px`,
width: `${diameter}px`,
}} />
<div
style={{
background: backgroundColor,
border: innerBorder,
height: `${diameter}px`,
width: `${diameter}px`,
}}
/>
</div>
)
}

10
ui/app/components/app/dropdowns/tests/menu.test.js
View File

@ -11,7 +11,7 @@ describe('Dropdown Menu Components', () => {
beforeEach(() => {
wrapper = shallow(
<Menu className="Test Class" isShowing/>
<Menu className="Test Class" isShowing />
)
})
@ -73,9 +73,11 @@ describe('Dropdown Menu Components', () => {
const onClickSpy = sinon.spy()
beforeEach(() => {
wrapper = shallow(<CloseArea
onClick={onClickSpy}
/>)
wrapper = shallow((
<CloseArea
onClick={onClickSpy}
/>
))
})
it('simulates click', () => {

2
ui/app/components/app/dropdowns/tests/network-dropdown.test.js
View File

@ -57,7 +57,7 @@ describe('Network Dropdown', () => {
beforeEach(() => {
wrapper = mountWithRouter(
<NetworkDropdown store={store}/>,
<NetworkDropdown store={store} />,
)
})

22
ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
View File

@ -119,10 +119,12 @@ export default class AdvancedGasInputs extends Component {
value={value}
onChange={onChange}
/>
<div className={classnames('advanced-gas-inputs__gas-edit-row__input-arrows', {
'advanced-gas-inputs__gas-edit-row__input--error': errorType === 'error',
'advanced-gas-inputs__gas-edit-row__input--warning': errorType === 'warning',
})}>
<div
className={classnames('advanced-gas-inputs__gas-edit-row__input-arrows', {
'advanced-gas-inputs__gas-edit-row__input--error': errorType === 'error',
'advanced-gas-inputs__gas-edit-row__input--warning': errorType === 'warning',
})}
>
<div
className="advanced-gas-inputs__gas-edit-row__input-arrows__i-wrap"
onClick={() => onChange({ target: { value: value + 1 } })}
@ -159,21 +161,21 @@ export default class AdvancedGasInputs extends Component {
errorText: gasPriceErrorText,
errorType: gasPriceErrorType,
} = this.gasPriceError({ insufficientBalance, customPriceIsSafe, isSpeedUp, gasPrice })
const gasPriceErrorComponent = gasPriceErrorType ?
const gasPriceErrorComponent = gasPriceErrorType ? (
<div className={`advanced-gas-inputs__gas-edit-row__${gasPriceErrorType}-text`}>
{ gasPriceErrorText }
</div> :
null
</div>
) : null
const {
errorText: gasLimitErrorText,
errorType: gasLimitErrorType,
} = this.gasLimitError({ insufficientBalance, gasLimit })
const gasLimitErrorComponent = gasLimitErrorType ?
const gasLimitErrorComponent = gasLimitErrorType ? (
<div className={`advanced-gas-inputs__gas-edit-row__${gasLimitErrorType}-text`}>
{ gasLimitErrorText }
</div> :
null
</div>
) : null
return (
<div className="advanced-gas-inputs__gas-edit-rows">

22
ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
View File

@ -83,17 +83,19 @@ export default class AdvancedTabContent extends Component {
/>
</div>
{ isEthereumNetwork
? <div>
<div className="advanced-tab__fee-chart__title">{ t('liveGasPricePredictions') }</div>
{!gasEstimatesLoading
? <GasPriceChart {...gasChartProps} updateCustomGasPrice={this.onGasChartUpdate} />
: <Loading />
}
<div className="advanced-tab__fee-chart__speed-buttons">
<span>{ t('slower') }</span>
<span>{ t('faster') }</span>
? (
<div>
<div className="advanced-tab__fee-chart__title">{ t('liveGasPricePredictions') }</div>
{!gasEstimatesLoading
? <GasPriceChart {...gasChartProps} updateCustomGasPrice={this.onGasChartUpdate} />
: <Loading />
}
<div className="advanced-tab__fee-chart__speed-buttons">
<span>{ t('slower') }</span>
<span>{ t('faster') }</span>
</div>
</div>
</div>
)
: <div className="advanced-tab__fee-chart__title">{ t('chartOnlyAvailableEth') }</div>
}
</div>

26
ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
View File

@ -18,18 +18,20 @@ describe('AdvancedTabContent Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<AdvancedTabContent
updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
customModalGasPriceInHex="11"
customModalGasLimitInHex="23456"
timeRemaining="21500"
transactionFee="$0.25"
insufficientBalance={false}
customPriceIsSafe
isSpeedUp={false}
isEthereumNetwork
/>)
wrapper = shallow((
<AdvancedTabContent
updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
customModalGasPriceInHex="11"
customModalGasLimitInHex="23456"
timeRemaining="21500"
transactionFee="$0.25"
insufficientBalance={false}
customPriceIsSafe
isSpeedUp={false}
isEthereumNetwork
/>
))
})
afterEach(() => {

12
ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
View File

@ -21,11 +21,13 @@ export default class BasicTabContent extends Component {
<div className="basic-tab-content__title">{ t('estimatedProcessingTimes') }</div>
<div className="basic-tab-content__blurb">{ t('selectAHigherGasFee') }</div>
{!gasPriceButtonGroupProps.loading
? <GasPriceButtonGroup
className="gas-price-button-group--alt"
showCheck
{...gasPriceButtonGroupProps}
/>
? (
<GasPriceButtonGroup
className="gas-price-button-group--alt"
showCheck
{...gasPriceButtonGroupProps}
/>
)
: <Loading />
}
<div className="basic-tab-content__footer-blurb">{ t('acceleratingATransaction') }</div>

8
ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
View File

@ -38,9 +38,11 @@ describe('BasicTabContent Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<BasicTabContent
gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
/>)
wrapper = shallow((
<BasicTabContent
gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
/>
))
})
describe('render', () => {

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

@ -160,13 +160,14 @@ export default class GasModalPageContainer extends Component {
return (
<Tabs>
{tabsToRender.map(({ name, content }, i) => <Tab name={name} key={`gas-modal-tab-${i}`}>
<div className="gas-modal-content">
{ content }
{ this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
</div>
</Tab>
)}
{tabsToRender.map(({ name, content }, i) => (
<Tab name={name} key={`gas-modal-tab-${i}`}>
<div className="gas-modal-content">
{ content }
{ this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
</div>
</Tab>
))}
</Tabs>
)
}

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

@ -63,23 +63,25 @@ describe('GasModalPageContainer Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<GasModalPageContainer
cancelAndClose={propsMethodSpies.cancelAndClose}
onSubmit={propsMethodSpies.onSubmit}
fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
customGasPrice={21}
customGasLimit={54321}
gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
infoRowProps={mockInfoRowProps}
currentTimeEstimate="1 min 31 sec"
customGasPriceInHex="mockCustomGasPriceInHex"
customGasLimitInHex="mockCustomGasLimitInHex"
insufficientBalance={false}
disableSave={false}
/>)
wrapper = shallow((
<GasModalPageContainer
cancelAndClose={propsMethodSpies.cancelAndClose}
onSubmit={propsMethodSpies.onSubmit}
fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
customGasPrice={21}
customGasLimit={54321}
gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
infoRowProps={mockInfoRowProps}
currentTimeEstimate="1 min 31 sec"
customGasPriceInHex="mockCustomGasPriceInHex"
customGasLimitInHex="mockCustomGasLimitInHex"
insufficientBalance={false}
disableSave={false}
/>
))
})
afterEach(() => {
@ -134,10 +136,12 @@ describe('GasModalPageContainer Component', function () {
it('should pass the correct renderTabs property to PageContainer', () => {
sinon.stub(GP, 'renderTabs').returns('mockTabs')
const renderTabsWrapperTester = shallow(<GasModalPageContainer
fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
/>, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
const renderTabsWrapperTester = shallow((
<GasModalPageContainer
fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
/>
), { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
const { tabsComponent } = renderTabsWrapperTester.find(PageContainer).props()
assert.equal(tabsComponent, 'mockTabs')
GasModalPageContainer.prototype.renderTabs.restore()
@ -184,24 +188,26 @@ describe('GasModalPageContainer Component', function () {
})
it('should not render the basic tab if hideBasic is true', () => {
wrapper = shallow(<GasModalPageContainer
cancelAndClose={propsMethodSpies.cancelAndClose}
onSubmit={propsMethodSpies.onSubmit}
fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
customGasPrice={21}
customGasLimit={54321}
gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
infoRowProps={mockInfoRowProps}
currentTimeEstimate="1 min 31 sec"
customGasPriceInHex="mockCustomGasPriceInHex"
customGasLimitInHex="mockCustomGasLimitInHex"
insufficientBalance={false}
disableSave={false}
hideBasic
/>)
wrapper = shallow((
<GasModalPageContainer
cancelAndClose={propsMethodSpies.cancelAndClose}
onSubmit={propsMethodSpies.onSubmit}
fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates}
fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
customGasPrice={21}
customGasLimit={54321}
gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
infoRowProps={mockInfoRowProps}
currentTimeEstimate="1 min 31 sec"
customGasPriceInHex="mockCustomGasPriceInHex"
customGasLimitInHex="mockCustomGasLimitInHex"
insufficientBalance={false}
disableSave={false}
hideBasic
/>
))
const renderTabsResult = wrapper.instance().renderTabs()
const renderedTabs = shallow(renderTabsResult)

34
ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js
View File

@ -49,13 +49,15 @@ export default class GasPriceButtonGroup extends Component {
className,
showCheck,
}) {
return (<div>
{ gasEstimateType && <div className={`${className}__label`}>{ this.gasEstimateTypeLabel(gasEstimateType) }</div> }
{ timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
{ feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> }
{ feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> }
{ showCheck && <div className="button-check-wrapper"><i className="fa fa-check fa-sm" /></div> }
</div>)
return (
<div>
{ gasEstimateType && <div className={`${className}__label`}>{ this.gasEstimateTypeLabel(gasEstimateType) }</div> }
{ timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
{ feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> }
{ feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> }
{ showCheck && <div className="button-check-wrapper"><i className="fa fa-check fa-sm" /></div> }
</div>
)
}
renderButton ({
@ -88,14 +90,16 @@ export default class GasPriceButtonGroup extends Component {
return (
!buttonDataLoading
? <ButtonGroup
className={buttonPropsAndFlags.className}
defaultActiveButtonIndex={defaultActiveButtonIndex}
newActiveButtonIndex={newActiveButtonIndex}
noButtonActiveByDefault={noButtonActiveByDefault}
>
{ gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
</ButtonGroup>
? (
<ButtonGroup
className={buttonPropsAndFlags.className}
defaultActiveButtonIndex={defaultActiveButtonIndex}
newActiveButtonIndex={newActiveButtonIndex}
noButtonActiveByDefault={noButtonActiveByDefault}
>
{ gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
</ButtonGroup>
)
: <div className={`${buttonPropsAndFlags.className}__loading-container`}>{ this.context.t('loading') }</div>
)
}

8
ui/app/components/app/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
View File

@ -48,9 +48,11 @@ describe('GasPriceButtonGroup Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<GasPriceButtonGroup
{...mockGasPriceButtonGroupProps}
/>)
wrapper = shallow((
<GasPriceButtonGroup
{...mockGasPriceButtonGroupProps}
/>
))
})
afterEach(() => {

2
ui/app/components/app/gas-customization/gas-slider/gas-slider.component.js
View File

@ -36,7 +36,7 @@ export default class GasSlider extends Component {
onChange={event => onChange(event.target.value)}
/>
<div className="gas-slider__bar">
<div className="gas-slider__colored"/>
<div className="gas-slider__colored" />
</div>
<div className="gas-slider__labels">
<span>{lowLabel}</span>

3
ui/app/components/app/input-number.js
View File

@ -69,7 +69,8 @@ InputNumber.prototype.render = function InputNumber () {
/>
<span className="gas-tooltip-input-detail">{unitLabel}</span>
<div className="gas-tooltip-input-arrows">
<div className="gas-tooltip-input-arrow-wrapper"
<div
className="gas-tooltip-input-arrow-wrapper"
onClick={() => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' }))}
>
<i className="fa fa-angle-up" />

62
ui/app/components/app/loading-network-screen/loading-network-screen.component.js
View File

@ -61,42 +61,46 @@ export default class LoadingNetworkScreen extends PureComponent {
}
renderLoadingScreenContent = () => {
return <div className="loading-overlay__screen-content">
<Spinner color="#F7C06C" />
{this.renderMessage()}
</div>
return (
<div className="loading-overlay__screen-content">
<Spinner color="#F7C06C" />
{this.renderMessage()}
</div>
)
}
renderErrorScreenContent = () => {
const { showNetworkDropdown, setProviderArgs, setProviderType } = this.props
return <div className="loading-overlay__error-screen">
<span className="loading-overlay__emoji">&#128542;</span>
<span>{ this.context.t('somethingWentWrong') }</span>
<div className="loading-overlay__error-buttons">
<Button
type="default"
onClick={() => {
window.clearTimeout(this.cancelCallTimeout)
showNetworkDropdown()
}}
>
{ this.context.t('switchNetworks') }
</Button>
return (
<div className="loading-overlay__error-screen">
<span className="loading-overlay__emoji">&#128542;</span>
<span>{ this.context.t('somethingWentWrong') }</span>
<div className="loading-overlay__error-buttons">
<Button
type="default"
onClick={() => {
window.clearTimeout(this.cancelCallTimeout)
showNetworkDropdown()
}}
>
{ this.context.t('switchNetworks') }
</Button>
<Button
type="primary"
onClick={() => {
this.setState({ showErrorScreen: false })
setProviderType(...setProviderArgs)
window.clearTimeout(this.cancelCallTimeout)
this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
}}
>
{ this.context.t('tryAgain') }
</Button>
<Button
type="primary"
onClick={() => {
this.setState({ showErrorScreen: false })
setProviderType(...setProviderArgs)
window.clearTimeout(this.cancelCallTimeout)
this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
}}
>
{ this.context.t('tryAgain') }
</Button>
</div>
</div>
</div>
)
}
cancelCall = () => {

18
ui/app/components/app/modals/account-details-modal/account-details-modal.component.js
View File

@ -56,7 +56,7 @@ export default class AccountDetailsModal extends Component {
}}
/>
<div className="account-modal-divider"/>
<div className="account-modal-divider" />
<Button
type="secondary"
@ -72,13 +72,15 @@ export default class AccountDetailsModal extends Component {
</Button>
{exportPrivateKeyFeatureEnabled
? <Button
type="secondary"
className="account-modal__button"
onClick={() => showExportPrivateKeyModal()}
>
{this.context.t('exportPrivateKey')}
</Button>
? (
<Button
type="secondary"
className="account-modal__button"
onClick={() => showExportPrivateKeyModal()}
>
{this.context.t('exportPrivateKey')}
</Button>
)
: null
}
</AccountModalContainer>

4
ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.component.js
View File

@ -78,7 +78,9 @@ export default class ConfirmRemoveAccount extends Component {
<a
className="confirm-remove-account__link"
rel="noopener noreferrer"
target="_blank" href="https://metamask.zendesk.com/hc/en-us/articles/360015289932">
target="_blank"
href="https://metamask.zendesk.com/hc/en-us/articles/360015289932"
>
{ t('learnMore') }
</a>
</div>

3
ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js
View File

@ -84,7 +84,8 @@ export default class DepositEtherModal extends Component {
return (
<div
className="page-container page-container--full-width page-container--full-height">
className="page-container page-container--full-width page-container--full-height"
>
<div className="page-container__header">
<div className="page-container__title">
{this.context.t('depositEther')}

40
ui/app/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
View File

@ -76,18 +76,22 @@ export default class EditApprovalPermission extends PureComponent {
className="edit-approval-permission__edit-section__radio-button"
onClick={() => this.setState({ selectedOptionIsUnlimited: true })}
>
<div className={classnames({
'edit-approval-permission__edit-section__radio-button-outline': !selectedOptionIsUnlimited,
'edit-approval-permission__edit-section__radio-button-outline--selected': selectedOptionIsUnlimited,
})} />
<div
className={classnames({
'edit-approval-permission__edit-section__radio-button-outline': !selectedOptionIsUnlimited,
'edit-approval-permission__edit-section__radio-button-outline--selected': selectedOptionIsUnlimited,
})}
/>
<div className="edit-approval-permission__edit-section__radio-button-fill" />
{ selectedOptionIsUnlimited && <div className="edit-approval-permission__edit-section__radio-button-dot" />}
</div>
<div className="edit-approval-permission__edit-section__option-text">
<div className={classnames({
'edit-approval-permission__edit-section__option-label': !selectedOptionIsUnlimited,
'edit-approval-permission__edit-section__option-label--selected': selectedOptionIsUnlimited,
})}>
<div
className={classnames({
'edit-approval-permission__edit-section__option-label': !selectedOptionIsUnlimited,
'edit-approval-permission__edit-section__option-label--selected': selectedOptionIsUnlimited,
})}
>
{
tokenAmount < tokenBalance
? t('proposedApprovalLimit')
@ -107,18 +111,22 @@ export default class EditApprovalPermission extends PureComponent {
className="edit-approval-permission__edit-section__radio-button"
onClick={() => this.setState({ selectedOptionIsUnlimited: false })}
>
<div className={classnames({
'edit-approval-permission__edit-section__radio-button-outline': selectedOptionIsUnlimited,
'edit-approval-permission__edit-section__radio-button-outline--selected': !selectedOptionIsUnlimited,
})} />
<div
className={classnames({
'edit-approval-permission__edit-section__radio-button-outline': selectedOptionIsUnlimited,
'edit-approval-permission__edit-section__radio-button-outline--selected': !selectedOptionIsUnlimited,
})}
/>
<div className="edit-approval-permission__edit-section__radio-button-fill" />
{ !selectedOptionIsUnlimited && <div className="edit-approval-permission__edit-section__radio-button-dot" />}
</div>
<div className="edit-approval-permission__edit-section__option-text">
<div className={classnames({
'edit-approval-permission__edit-section__option-label': selectedOptionIsUnlimited,
'edit-approval-permission__edit-section__option-label--selected': !selectedOptionIsUnlimited,
})}>
<div
className={classnames({
'edit-approval-permission__edit-section__option-label': selectedOptionIsUnlimited,
'edit-approval-permission__edit-section__option-label--selected': !selectedOptionIsUnlimited,
})}
>
{ t('customSpendLimit') }
</div>
<div className="edit-approval-permission__edit-section__option-description" >

2
ui/app/components/app/modals/export-private-key-modal/export-private-key-modal.component.js
View File

@ -149,7 +149,7 @@ export default class ExportPrivateKeyModal extends Component {
inputClass="qr-ellip-address ellip-address"
value={checksumAddress(address)}
/>
<div className="account-modal-divider"/>
<div className="account-modal-divider" />
<span className="modal-body-title">{this.context.t('showPrivateKeys')}</span>
<div className="private-key-password">
{this.renderPasswordLabel(privateKey)}

3
ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
View File

@ -75,7 +75,8 @@ export default class MetaMetricsOptInModal extends Component {
</div>
</div>
<div className="metametrics-opt-in__bottom-text">
This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our <a
This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our&nbsp;
<a
href="https://metamask.io/privacy.html"
target="_blank"
rel="noopener noreferrer"

10
ui/app/components/app/multiple-notifications/multiple-notifications.component.js
View File

@ -38,9 +38,13 @@ export default class MultipleNotifications extends PureComponent {
className="home-notification-wrapper__i-container"
onClick={() => this.setState({ showAll: !showAll })}
>
{childrenToRender.length > 1 ? <i className={classnames('fa fa-sm fa-sort-amount-asc', {
'flipped': !showAll,
})} /> : null}
{childrenToRender.length > 1 ? (
<i
className={classnames('fa fa-sm fa-sort-amount-asc', {
'flipped': !showAll,
})}
/>
) : null}
</div>
</div>
)

32
ui/app/components/app/network-display/network-display.component.js
View File

@ -38,13 +38,15 @@ export default class NetworkDisplay extends Component {
return networkClass
? <div className={`network-display__icon network-display__icon--${networkClass}`} />
: <div
className="i fa fa-question-circle fa-med"
style={{
margin: '0 4px',
color: 'rgb(125, 128, 130)',
}}
/>
: (
<div
className="i fa fa-question-circle fa-med"
style={{
margin: '0 4px',
color: 'rgb(125, 128, 130)',
}}
/>
)
}
render () {
@ -61,13 +63,15 @@ export default class NetworkDisplay extends Component {
{
networkClass
? <div className={`network-display__icon network-display__icon--${networkClass}`} />
: <div
className="i fa fa-question-circle fa-med"
style={{
margin: '0 4px',
color: 'rgb(125, 128, 130)',
}}
/>
: (
<div
className="i fa fa-question-circle fa-med"
style={{
margin: '0 4px',
color: 'rgb(125, 128, 130)',
}}
/>
)
}
<div className="network-display__name">
{ type === 'rpc' && nickname ? nickname : this.context.t(type) }

2
ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
View File

@ -68,7 +68,7 @@ export default class ProviderPageContainerContent extends PureComponent {
<h1>{t('providerRequest', [title])}</h1>
<p>
{t('providerRequestInfo')}
<br/>
<br />
<a
href="https://medium.com/metamask/introducing-privacy-mode-42549d4870fa"
target="_blank"

10
ui/app/components/app/selected-account/tests/selected-account-component.test.js
View File

@ -5,10 +5,12 @@ import SelectedAccount from '../selected-account.component'
describe('SelectedAccount Component', () => {
it('should render checksummed address', () => {
const wrapper = render(<SelectedAccount
selectedAddress="0x1b82543566f41a7db9a9a75fc933c340ffb55c9d"
selectedIdentity={{ name: 'testName' }}
/>, { context: { t: () => {}}})
const wrapper = render((
<SelectedAccount
selectedAddress="0x1b82543566f41a7db9a9a75fc933c340ffb55c9d"
selectedIdentity={{ name: 'testName' }}
/>
), { context: { t: () => {}}})
// Checksummed version of address is displayed
assert.equal(wrapper.find('.selected-account__address').text(), '0x1B82...5C9D')
assert.equal(wrapper.find('.selected-account__name').text(), 'testName')

16
ui/app/components/app/sidebars/sidebar.component.js
View File

@ -20,13 +20,15 @@ export default class Sidebar extends Component {
renderOverlay () {
const { onOverlayClose } = this.props
return <div
className="sidebar-overlay"
onClick={() => {
onOverlayClose && onOverlayClose()
this.props.hideSidebar()
}
} />
return (
<div
className="sidebar-overlay"
onClick={() => {
onOverlayClose && onOverlayClose()
this.props.hideSidebar()
}}
/>
)
}
renderSidebarContent () {

14
ui/app/components/app/sidebars/tests/sidebars-component.test.js
View File

@ -16,12 +16,14 @@ describe('Sidebar Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<Sidebar
sidebarOpen={false}
hideSidebar={propsMethodSpies.hideSidebar}
transitionName="someTransition"
type="wallet-view"
/>)
wrapper = shallow((
<Sidebar
sidebarOpen={false}
hideSidebar={propsMethodSpies.hideSidebar}
transitionName="someTransition"
type="wallet-view"
/>
))
})
afterEach(() => {

50
ui/app/components/app/signature-request-original/signature-request-original.component.js
View File

@ -171,22 +171,26 @@ export default class SignatureRequestOriginal extends Component {
<div className="request-signature__typed-container">
{
domain
? <div>
<h1>
Domain
</h1>
<ObjectInspector data={domain} expandLevel={1} name="domain" />
</div>
? (
<div>
<h1>
Domain
</h1>
<ObjectInspector data={domain} expandLevel={1} name="domain" />
</div>
)
: ''
}
{
message
? <div>
<h1>
Message
</h1>
<ObjectInspector data={message} expandLevel={1} name="message" />
</div>
? (
<div>
<h1>
Message
</h1>
<ObjectInspector data={message} expandLevel={1} name="message" />
</div>
)
: ''
}
</div>
@ -221,16 +225,18 @@ export default class SignatureRequestOriginal extends Component {
{ notice }
{
type === 'eth_sign'
? <span
className="request-signature__help-link"
onClick={() => {
global.platform.openWindow({
url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
})
}}
>
{ this.context.t('learnMore') }
</span>
? (
<span
className="request-signature__help-link"
onClick={() => {
global.platform.openWindow({
url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
})
}}
>
{ this.context.t('learnMore') }
</span>
)
: null
}
</div>

10
ui/app/components/app/signature-request/signature-request-header/signature-request-header.component.js
View File

@ -14,10 +14,12 @@ export default class SignatureRequestHeader extends PureComponent {
return (
<div className="signature-request-header">
<div className="signature-request-header--account">
{selectedAccount && <AccountListItem
displayBalance={false}
account={selectedAccount}
/>}
{selectedAccount && (
<AccountListItem
displayBalance={false}
account={selectedAccount}
/>
)}
{name}
</div>
<div className="signature-request-header--network">

15
ui/app/components/app/signature-request/tests/signature-request.test.js
View File

@ -8,11 +8,16 @@ describe('Signature Request Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<SignatureRequest txData={{
msgParams: {
data: '{"message": {"from": {"name": "hello"}}}',
from: '0x123456789abcdef',
} }} />)
wrapper = shallow((
<SignatureRequest
txData={{
msgParams: {
data: '{"message": {"from": {"name": "hello"}}}',
from: '0x123456789abcdef',
},
}}
/>
))
})
describe('render', () => {

3
ui/app/components/app/token-cell/token-cell.component.js
View File

@ -107,7 +107,8 @@ export default class TokenCell extends Component {
</div>
)}
</div>
<i className="fa fa-ellipsis-h fa-lg token-list-item__ellipsis cursor-pointer"
<i
className="fa fa-ellipsis-h fa-lg token-list-item__ellipsis cursor-pointer"
onClick={(e) => {
e.stopPropagation()
this.setState({ tokenMenuOpen: true })

12
ui/app/components/app/token-list.js
View File

@ -66,12 +66,16 @@ TokenList.prototype.render = function TokenList () {
if (error) {
log.error(error)
return (
<div className="hotFix" style={{
padding: '80px',
}}>
<div
className="hotFix"
style={{
padding: '80px',
}}
>
{this.context.t('troubleTokenBalances')}
<span
className="hotFix" style={{
className="hotFix"
style={{
color: 'rgba(247, 134, 28, 1)',
cursor: 'pointer',
}}

12
ui/app/components/app/transaction-action/tests/transaction-action.component.test.js
View File

@ -35,11 +35,13 @@ describe('TransactionAction Component', () => {
},
}
const wrapper = shallow(<TransactionAction
methodData={methodData}
transaction={transaction}
className="transaction-action"
/>, { context: { t }})
const wrapper = shallow((
<TransactionAction
methodData={methodData}
transaction={transaction}
className="transaction-action"
/>
), { context: { t }})
assert.equal(wrapper.find('.transaction-action').length, 1)
wrapper.setState({ transactionAction: 'sentEther' })

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

@ -50,10 +50,12 @@ export default class TransactionBreakdown extends PureComponent {
className="transaction-breakdown__row-title"
>
{typeof gas !== 'undefined'
? <HexToDecimal
className="transaction-breakdown__value"
value={gas}
/>
? (
<HexToDecimal
className="transaction-breakdown__value"
value={gas}
/>
)
: '?'
}
</TransactionBreakdownRow>
@ -72,13 +74,15 @@ export default class TransactionBreakdown extends PureComponent {
}
<TransactionBreakdownRow title={t('gasPrice')}>
{typeof gasPrice !== 'undefined'
? <CurrencyDisplay
className="transaction-breakdown__value"
currency={nativeCurrency}
denomination={GWEI}
value={gasPrice}
hideLabel
/>
? (
<CurrencyDisplay
className="transaction-breakdown__value"
currency={nativeCurrency}
denomination={GWEI}
value={gasPrice}
hideLabel
/>
)
: '?'
}
</TransactionBreakdownRow>

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

@ -191,15 +191,17 @@ export default class TransactionListItemDetails extends PureComponent {
</Button>
</Tooltip>
{
showRetry && <Tooltip title={blockExplorerUrl ? t('viewOnCustomBlockExplorer', [blockExplorerUrl]) : t('retryTransaction')}>
<Button
type="raised"
onClick={this.handleRetry}
className="transaction-list-item-details__header-button"
>
<i className="fa fa-refresh"></i>
</Button>
</Tooltip>
showRetry && (
<Tooltip title={blockExplorerUrl ? t('viewOnCustomBlockExplorer', [blockExplorerUrl]) : t('retryTransaction')}>
<Button
type="raised"
onClick={this.handleRetry}
className="transaction-list-item-details__header-button"
>
<i className="fa fa-refresh"></i>
</Button>
</Tooltip>
)
}
</div>
</div>

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

@ -236,18 +236,22 @@ export default class TransactionListItem extends PureComponent {
)}
/>
{ showEstimatedTime
? <TransactionTimeRemaining
className="transaction-list-item__estimated-time"
transaction={ primaryTransaction }
/>
? (
<TransactionTimeRemaining
className="transaction-list-item__estimated-time"
transaction={ primaryTransaction }
/>
)
: null
}
{ this.renderPrimaryCurrency() }
{ this.renderSecondaryCurrency() }
</div>
<div className={classnames('transaction-list-item__expander', {
'transaction-list-item__expander--show': showTransactionDetails,
})}>
<div
className={classnames('transaction-list-item__expander', {
'transaction-list-item__expander--show': showTransactionDetails,
})}
>
{
showTransactionDetails && (
<div className="transaction-list-item__details-container">

38
ui/app/components/app/transaction-view-balance/tests/token-view-balance.component.test.js
View File

@ -25,14 +25,16 @@ describe('TransactionViewBalance Component', () => {
})
it('should render ETH balance properly', () => {
const wrapper = shallow(<TransactionViewBalance
showDepositModal={propsMethodSpies.showDepositModal}
history={historySpies}
network="3"
ethBalance={123}
fiatBalance={456}
currentCurrency="usd"
/>, { context: { t, metricsEvent } })
const wrapper = shallow((
<TransactionViewBalance
showDepositModal={propsMethodSpies.showDepositModal}
history={historySpies}
network="3"
ethBalance={123}
fiatBalance={456}
currentCurrency="usd"
/>
), { context: { t, metricsEvent } })
assert.equal(wrapper.find('.transaction-view-balance').length, 1)
assert.equal(wrapper.find('.transaction-view-balance__button').length, 2)
@ -55,15 +57,17 @@ describe('TransactionViewBalance Component', () => {
symbol: 'ABC',
}
const wrapper = shallow(<TransactionViewBalance
showDepositModal={propsMethodSpies.showDepositModal}
history={historySpies}
network="3"
ethBalance={123}
fiatBalance={456}
currentCurrency="usd"
selectedToken={token}
/>, { context: { t } })
const wrapper = shallow((
<TransactionViewBalance
showDepositModal={propsMethodSpies.showDepositModal}
history={historySpies}
network="3"
ethBalance={123}
fiatBalance={456}
currentCurrency="usd"
selectedToken={token}
/>
), { context: { t } })
assert.equal(wrapper.find('.transaction-view-balance').length, 1)
assert.equal(wrapper.find('.transaction-view-balance__button').length, 1)

8
ui/app/components/app/wallet-view/wallet-view.component.js
View File

@ -44,9 +44,11 @@ export default class WalletView extends Component {
} = this.props
return (
<div className={classnames('flex-column', 'wallet-balance-wrapper', {
'wallet-balance-wrapper--active': Boolean(selectedTokenAddress),
})}>
<div
className={classnames('flex-column', 'wallet-balance-wrapper', {
'wallet-balance-wrapper--active': Boolean(selectedTokenAddress),
})}
>
<div
className="wallet-balance"
onClick={() => {

8
ui/app/components/ui/button-group/button-group.stories.js
View File

@ -6,7 +6,7 @@ import Button from '../button'
import { text, boolean } from '@storybook/addon-knobs/react'
storiesOf('ButtonGroup', module)
.add('with Buttons', () =>
.add('with Buttons', () => (
<ButtonGroup
style={{ width: '300px' }}
disabled={boolean('Disabled', false)}
@ -28,8 +28,8 @@ storiesOf('ButtonGroup', module)
{text('Button3', 'Fast')}
</Button>
</ButtonGroup>
)
.add('with a disabled Button', () =>
))
.add('with a disabled Button', () => (
<ButtonGroup
style={{ width: '300px' }}
disabled={boolean('Disabled', false)}
@ -46,4 +46,4 @@ storiesOf('ButtonGroup', module)
{text('Button2', 'Disabled')}
</Button>
</ButtonGroup>
)
))

16
ui/app/components/ui/button-group/tests/button-group-component.test.js
View File

@ -21,12 +21,16 @@ describe('ButtonGroup Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<ButtonGroup
defaultActiveButtonIndex={1}
disabled={false}
className="someClassName"
style={ { color: 'red' } }
>{mockButtons}</ButtonGroup>)
wrapper = shallow((
<ButtonGroup
defaultActiveButtonIndex={1}
disabled={false}
className="someClassName"
style={ { color: 'red' } }
>
{mockButtons}
</ButtonGroup>
))
})
afterEach(() => {

28
ui/app/components/ui/button/button.stories.js
View File

@ -6,7 +6,7 @@ import { text, boolean } from '@storybook/addon-knobs/react'
// ', 'secondary', 'default', 'warning', 'danger', 'danger-primary', 'link'], 'primary')}
storiesOf('Button', module)
.add('Button - Primary', () =>
.add('Button - Primary', () => (
<Button
onClick={action('clicked')}
type="primary"
@ -14,8 +14,8 @@ storiesOf('Button', module)
>
{text('text', 'Click me')}
</Button>
)
.add('Button - Secondary', () =>
))
.add('Button - Secondary', () => (
<Button
onClick={action('clicked')}
type="secondary"
@ -23,8 +23,8 @@ storiesOf('Button', module)
>
{text('text', 'Click me')}
</Button>
)
.add('Button - Default', () =>
))
.add('Button - Default', () => (
<Button
onClick={action('clicked')}
type="default"
@ -32,8 +32,8 @@ storiesOf('Button', module)
>
{text('text', 'Click me')}
</Button>
)
.add('Button - Warning', () =>
))
.add('Button - Warning', () => (
<Button
onClick={action('clicked')}
type="warning"
@ -41,8 +41,8 @@ storiesOf('Button', module)
>
{text('text', 'Click me')}
</Button>
)
.add('Button - Danger', () =>
))
.add('Button - Danger', () => (
<Button
onClick={action('clicked')}
type="danger"
@ -50,8 +50,8 @@ storiesOf('Button', module)
>
{text('text', 'Click me')}
</Button>
)
.add('Button - Danger Primary', () =>
))
.add('Button - Danger Primary', () => (
<Button
onClick={action('clicked')}
type="danger-primary"
@ -59,8 +59,8 @@ storiesOf('Button', module)
>
{text('text', 'Click me')}
</Button>
)
.add('Button - Link', () =>
))
.add('Button - Link', () => (
<Button
onClick={action('clicked')}
type="link"
@ -68,4 +68,4 @@ storiesOf('Button', module)
>
{text('text', 'Click me')}
</Button>
)
))

22
ui/app/components/ui/currency-display/tests/currency-display.component.test.js
View File

@ -5,21 +5,25 @@ import CurrencyDisplay from '../currency-display.component'
describe('CurrencyDisplay Component', () => {
it('should render text with a className', () => {
const wrapper = shallow(<CurrencyDisplay
displayValue="$123.45"
className="currency-display"
/>)
const wrapper = shallow((
<CurrencyDisplay
displayValue="$123.45"
className="currency-display"
/>
))
assert.ok(wrapper.hasClass('currency-display'))
assert.equal(wrapper.text(), '$123.45')
})
it('should render text with a prefix', () => {
const wrapper = shallow(<CurrencyDisplay
displayValue="$123.45"
className="currency-display"
prefix="-"
/>)
const wrapper = shallow((
<CurrencyDisplay
displayValue="$123.45"
className="currency-display"
prefix="-"
/>
))
assert.ok(wrapper.hasClass('currency-display'))
assert.equal(wrapper.text(), '-$123.45')

44
ui/app/components/ui/eth-balance/eth-balance.component.js
View File

@ -67,29 +67,36 @@ export default class EthBalance extends Component {
return (
<TooltipComponent {...containerProps}>
<div className="flex-column">
<div className="flex-row" style={{
alignItems: 'flex-end',
lineHeight: lineHeight || '13px',
fontFamily: fontFamily || 'Montserrat Light',
textRendering: 'geometricPrecision',
}}>
<div style={{
width: '100%',
textAlign: 'right',
fontSize: fontSize || 'inherit',
color: color || 'inherit',
}}>
<div
className="flex-row"
style={{
alignItems: 'flex-end',
lineHeight: lineHeight || '13px',
fontFamily: fontFamily || 'Montserrat Light',
textRendering: 'geometricPrecision',
}}
>
<div
style={{
width: '100%',
textAlign: 'right',
fontSize: fontSize || 'inherit',
color: color || 'inherit',
}}
>
{
incoming
? `+${balanceToRender}`
: balanceToRender
}
</div>
<div style={{
color: color || '#AEAEAE',
fontSize: fontSize || '12px',
marginLeft: '5px',
}}>
<div
style={{
color: color || '#AEAEAE',
fontSize: fontSize || '12px',
marginLeft: '5px',
}}
>
{label}
</div>
</div>
@ -120,7 +127,8 @@ export default class EthBalance extends Component {
<div style={{
display: 'inline',
width,
}}>
}}
>
{this.renderBalance(formattedValue)}
</div>
</div>

20
ui/app/components/ui/hex-to-decimal/tests/hex-to-decimal.component.test.js
View File

@ -5,20 +5,24 @@ import HexToDecimal from '../hex-to-decimal.component'
describe('HexToDecimal Component', () => {
it('should render a prefixed hex as a decimal with a className', () => {
const wrapper = shallow(<HexToDecimal
value="0x3039"
className="hex-to-decimal"
/>)
const wrapper = shallow((
<HexToDecimal
value="0x3039"
className="hex-to-decimal"
/>
))
assert.ok(wrapper.hasClass('hex-to-decimal'))
assert.equal(wrapper.text(), '12345')
})
it('should render an unprefixed hex as a decimal with a className', () => {
const wrapper = shallow(<HexToDecimal
value="1A85"
className="hex-to-decimal"
/>)
const wrapper = shallow((
<HexToDecimal
value="1A85"
className="hex-to-decimal"
/>
))
assert.ok(wrapper.hasClass('hex-to-decimal'))
assert.equal(wrapper.text(), '6789')

2
ui/app/components/ui/identicon/tests/identicon.component.test.js
View File

@ -18,7 +18,7 @@ describe('Identicon', () => {
it('renders default eth_logo identicon with no props', () => {
const wrapper = mount(
<Identicon store={store}/>
<Identicon store={store} />
)
assert.equal(wrapper.find('img.balance-icon').prop('src'), './images/eth_logo.svg')

18
ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
View File

@ -37,14 +37,16 @@ export default class PageContainerFooter extends Component {
<div className="page-container__footer">
<header>
{!hideCancel && <Button
type={cancelButtonType || 'default'}
large
className="page-container__footer-button"
onClick={e => onCancel(e)}
>
{ cancelText || this.context.t('cancel') }
</Button>}
{!hideCancel && (
<Button
type={cancelButtonType || 'default'}
large
className="page-container__footer-button"
onClick={e => onCancel(e)}
>
{ cancelText || this.context.t('cancel') }
</Button>
)}
<Button
type={submitButtonType || 'secondary'}

18
ui/app/components/ui/page-container/page-container-footer/tests/page-container-footer.component.test.js
View File

@ -11,14 +11,16 @@ describe('Page Footer', () => {
const onSubmit = sinon.spy()
beforeEach(() => {
wrapper = shallow(<PageFooter
onCancel={onCancel}
onSubmit={onSubmit}
cancelText="Cancel"
submitText="Submit"
disabled={false}
submitButtonType="Test Type"
/>)
wrapper = shallow((
<PageFooter
onCancel={onCancel}
onSubmit={onSubmit}
cancelText="Cancel"
submitText="Submit"
disabled={false}
submitButtonType="Test Type"
/>
))
})
it('renders page container footer', () => {

26
ui/app/components/ui/page-container/page-container-header/page-container-header.component.js
View File

@ -55,24 +55,30 @@ export default class PageContainerHeader extends Component {
{ this.renderHeaderRow() }
{
title && <div className="page-container__title">
{ title }
</div>
title && (
<div className="page-container__title">
{ title }
</div>
)
}
{
subtitle && <div className="page-container__subtitle">
{ subtitle }
</div>
subtitle && (
<div className="page-container__subtitle">
{ subtitle }
</div>
)
}
{
onClose && headerCloseText
? <div className="page-container__header-close-text" onClick={() => onClose()}>{ headerCloseText }</div>
: onClose && <div
className="page-container__header-close"
onClick={() => onClose()}
/>
: onClose && (
<div
className="page-container__header-close"
onClick={() => onClose()}
/>
)
}
{ this.renderTabs() }

20
ui/app/components/ui/page-container/page-container-header/tests/page-container-header.component.test.js
View File

@ -12,15 +12,17 @@ describe('Page Container Header', () => {
onBackButtonClick = sinon.spy()
onClose = sinon.spy()
wrapper = shallow(<PageContainerHeader
showBackButton
onBackButtonClick={onBackButtonClick}
backButtonStyles={style}
title="Test Title"
subtitle="Test Subtitle"
tabs="Test Tab"
onClose={onClose}
/>)
wrapper = shallow((
<PageContainerHeader
showBackButton
onBackButtonClick={onBackButtonClick}
backButtonStyles={style}
title="Test Title"
subtitle="Test Subtitle"
tabs="Test Tab"
onClose={onClose}
/>
))
})
describe('Render Header Row', () => {

4
ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
View File

@ -67,7 +67,7 @@ export default class SenderToRecipient extends PureComponent {
? <p>{t('copyAddress')}</p>
: (
<p>
{addressSlicer(checksummedSenderAddress)}<br/>
{addressSlicer(checksummedSenderAddress)}<br />
{t('copyAddress')}
</p>
)
@ -127,7 +127,7 @@ export default class SenderToRecipient extends PureComponent {
? <p>{t('copyAddress')}</p>
: (
<p>
{addressSlicer(checksummedRecipientAddress)}<br/>
{addressSlicer(checksummedRecipientAddress)}<br />
{t('copyAddress')}
</p>
)

28
ui/app/components/ui/text-field/text-field.stories.js
View File

@ -3,51 +3,51 @@ import { storiesOf } from '@storybook/react'
import TextField from '.'
storiesOf('TextField', module)
.add('text', () =>
.add('text', () => (
<TextField
label="Text"
type="text"
/>
)
.add('password', () =>
))
.add('password', () => (
<TextField
label="Password"
type="password"
/>
)
.add('error', () =>
))
.add('error', () => (
<TextField
type="text"
label="Name"
error="Invalid value"
/>
)
.add('Mascara text', () =>
))
.add('Mascara text', () => (
<TextField
label="Text"
type="text"
largeLabel
/>
)
.add('Material text', () =>
))
.add('Material text', () => (
<TextField
label="Text"
type="text"
material
/>
)
.add('Material password', () =>
))
.add('Material password', () => (
<TextField
label="Password"
type="password"
material
/>
)
.add('Material error', () =>
))
.add('Material error', () => (
<TextField
type="text"
label="Name"
error="Invalid value"
material
/>
)
))

3
ui/app/pages/add-token/token-list/token-list.component.js
View File

@ -44,7 +44,8 @@ export default class InfoBox extends Component {
>
<div
className="token-list__token-icon"
style={{ backgroundImage: logo && `url(images/contract/${logo})` }}>
style={{ backgroundImage: logo && `url(images/contract/${logo})` }}
>
</div>
<div className="token-list__token-data">
<span className="token-list__token-name">{ `${name} (${symbol})` }</span>

57
ui/app/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
View File

@ -46,17 +46,23 @@ export default class ConfirmApproveContent extends Component {
noBorder,
}) {
return (
<div className={classnames({
'confirm-approve-content__card': !noBorder,
'confirm-approve-content__card--no-border': noBorder,
})}>
<div
className={classnames({
'confirm-approve-content__card': !noBorder,
'confirm-approve-content__card--no-border': noBorder,
})}
>
<div className="confirm-approve-content__card-header">
<div className="confirm-approve-content__card-header__symbol">{ symbol }</div>
<div className="confirm-approve-content__card-header__title">{ title }</div>
{ showEdit && <div
className="confirm-approve-content__small-blue-text cursor-pointer"
onClick={() => onEditClick()}
>Edit</div> }
{showEdit && (
<div
className="confirm-approve-content__small-blue-text cursor-pointer"
onClick={() => onEditClick()}
>
Edit
</div>
)}
</div>
<div className="confirm-approve-content__card-content">
{ content }
@ -137,9 +143,11 @@ export default class ConfirmApproveContent extends Component {
const { showFullTxDetails } = this.state
return (
<div className={classnames('confirm-approve-content', {
'confirm-approve-content--full': showFullTxDetails,
})}>
<div
className={classnames('confirm-approve-content', {
'confirm-approve-content--full': showFullTxDetails,
})}
>
<div className="confirm-approve-content__identicon-wrapper">
<Identicon
className="confirm-approve-content__identicon"
@ -172,20 +180,23 @@ export default class ConfirmApproveContent extends Component {
onEditClick: showCustomizeGasModal,
content: this.renderTransactionDetailsContent(),
noBorder: !showFullTxDetails,
footer: <div
className="confirm-approve-content__view-full-tx-button-wrapper"
onClick={() => this.setState({ showFullTxDetails: !this.state.showFullTxDetails })}
>
<div className="confirm-approve-content__view-full-tx-button cursor-pointer">
<div className="confirm-approve-content__small-blue-text">
View full transaction details
footer: (
<div
className="confirm-approve-content__view-full-tx-button-wrapper"
onClick={() => this.setState({ showFullTxDetails: !this.state.showFullTxDetails })}
>
<div className="confirm-approve-content__view-full-tx-button cursor-pointer">
<div className="confirm-approve-content__small-blue-text">
View full transaction details
</div>
<i className={classnames({
'fa fa-caret-up': showFullTxDetails,
'fa fa-caret-down': !showFullTxDetails,
})}
/>
</div>
<i className={classnames({
'fa fa-caret-up': showFullTxDetails,
'fa fa-caret-down': !showFullTxDetails,
})} />
</div>
</div>,
),
})}
</div>

40
ui/app/pages/confirm-approve/confirm-approve.component.js
View File

@ -81,25 +81,27 @@ export default class ConfirmApprove extends Component {
identiconAddress={tokenAddress}
showAccountInHeader
title={tokensText}
contentComponent={<ConfirmApproveContent
siteImage={siteImage}
tokenAddress={tokenAddress}
setCustomAmount={(newAmount) => {
this.setState({ customPermissionAmount: newAmount })
}}
customTokenAmount={String(customPermissionAmount)}
tokenAmount={String(tokenAmount)}
origin={origin}
tokenSymbol={tokenSymbol}
tokenBalance={tokenBalance}
showCustomizeGasModal={() => showCustomizeGasModal(txData)}
showEditApprovalPermissionModal={showEditApprovalPermissionModal}
data={data}
toAddress={toAddress}
currentCurrency={currentCurrency}
ethTransactionTotal={ethTransactionTotal}
fiatTransactionTotal={fiatTransactionTotal}
/>}
contentComponent={(
<ConfirmApproveContent
siteImage={siteImage}
tokenAddress={tokenAddress}
setCustomAmount={(newAmount) => {
this.setState({ customPermissionAmount: newAmount })
}}
customTokenAmount={String(customPermissionAmount)}
tokenAmount={String(tokenAmount)}
origin={origin}
tokenSymbol={tokenSymbol}
tokenBalance={tokenBalance}
showCustomizeGasModal={() => showCustomizeGasModal(txData)}
showEditApprovalPermissionModal={showEditApprovalPermissionModal}
data={data}
toAddress={toAddress}
currentCurrency={currentCurrency}
ethTransactionTotal={ethTransactionTotal}
fiatTransactionTotal={fiatTransactionTotal}
/>
)}
hideSenderToRecipient
customTxParamsData={customPermissionAmount
? getCustomTxParamsData(data, { customPermissionAmount, tokenAmount, decimals })

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

@ -255,15 +255,17 @@ export default class ConfirmTransactionBase extends Component {
secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : ''}
/>
{advancedInlineGasShown
? <AdvancedGasInputs
updateCustomGasPrice={newGasPrice => updateGasAndCalculate({ ...customGas, gasPrice: newGasPrice })}
updateCustomGasLimit={newGasLimit => updateGasAndCalculate({ ...customGas, gasLimit: newGasLimit })}
customGasPrice={customGas.gasPrice}
customGasLimit={customGas.gasLimit}
insufficientBalance={insufficientBalance}
customPriceIsSafe
isSpeedUp={false}
/>
? (
<AdvancedGasInputs
updateCustomGasPrice={newGasPrice => updateGasAndCalculate({ ...customGas, gasPrice: newGasPrice })}
updateCustomGasLimit={newGasLimit => updateGasAndCalculate({ ...customGas, gasLimit: newGasLimit })}
customGasPrice={customGas.gasPrice}
customGasLimit={customGas.gasLimit}
insufficientBalance={insufficientBalance}
customPriceIsSafe
isSpeedUp={false}
/>
)
: null
}
</div>
@ -278,31 +280,33 @@ export default class ConfirmTransactionBase extends Component {
primaryValueTextColor="#2f9ae0"
/>
</div>
{useNonceField ? <div>
<div className="confirm-detail-row">
<div className="confirm-detail-row__label">
{ this.context.t('nonceFieldHeading') }
</div>
<div className="custom-nonce-input">
<TextField
type="number"
min="0"
placeholder={ nextNonce ? nextNonce.toString() : null }
onChange={({ target: { value } }) => {
if (!value.length || Number(value) < 0) {
updateCustomNonce('')
} else {
updateCustomNonce(String(Math.floor(value)))
}
getNextNonce()
}}
fullWidth
margin="dense"
value={ customNonceValue || '' }
/>
{useNonceField ? (
<div>
<div className="confirm-detail-row">
<div className="confirm-detail-row__label">
{ this.context.t('nonceFieldHeading') }
</div>
<div className="custom-nonce-input">
<TextField
type="number"
min="0"
placeholder={ nextNonce ? nextNonce.toString() : null }
onChange={({ target: { value } }) => {
if (!value.length || Number(value) < 0) {
updateCustomNonce('')
} else {
updateCustomNonce(String(Math.floor(value)))
}
getNextNonce()
}}
fullWidth
margin="dense"
value={ customNonceValue || '' }
/>
</div>
</div>
</div>
</div> : null}
) : null}
</div>
)
)

3
ui/app/pages/create-account/connect-hardware/connect-screen.js
View File

@ -176,7 +176,8 @@ class ConnectScreen extends Component {
className="hw-tutorial"
ref={node => {
this.referenceNode = node
}}>
}}
>
{steps.map((step, index) => (
<div className="hw-connect" key={index}>
<h3 className="hw-connect__title">{step.title}</h3>

18
ui/app/pages/create-account/create-account.component.js
View File

@ -23,15 +23,15 @@ export default class CreateAccountPage extends Component {
return (
<div className="new-account__tabs">
<div className={getClassNames(NEW_ACCOUNT_ROUTE)} onClick={() => history.push(NEW_ACCOUNT_ROUTE)}>{
this.context.t('create')
}</div>
<div className={getClassNames(IMPORT_ACCOUNT_ROUTE)} onClick={() => history.push(IMPORT_ACCOUNT_ROUTE)}>{
this.context.t('import')
}</div>
<div className={getClassNames(CONNECT_HARDWARE_ROUTE)} onClick={() => history.push(CONNECT_HARDWARE_ROUTE)}>{
this.context.t('connect')
}</div>
<div className={getClassNames(NEW_ACCOUNT_ROUTE)} onClick={() => history.push(NEW_ACCOUNT_ROUTE)}>
{this.context.t('create')}
</div>
<div className={getClassNames(IMPORT_ACCOUNT_ROUTE)} onClick={() => history.push(IMPORT_ACCOUNT_ROUTE)}>
{this.context.t('import')}
</div>
<div className={getClassNames(CONNECT_HARDWARE_ROUTE)} onClick={() => history.push(CONNECT_HARDWARE_ROUTE)}>
{this.context.t('connect')}
</div>
</div>
)
}

3
ui/app/pages/create-account/import-account/index.js
View File

@ -46,7 +46,8 @@ AccountImportSubview.prototype.render = function () {
global.platform.openWindow({
url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
})
}}>
}}
>
{this.context.t('here')}
</span>
</div>

11
ui/app/pages/create-account/new-account.component.js
View File

@ -49,7 +49,8 @@ export default class NewAccountCreateForm extends Component {
{this.context.t('accountName')}
</div>
<div className="new-account-create-form__input-wrapper">
<input className="new-account-create-form__input"
<input
className="new-account-create-form__input"
value={newAccountName}
placeholder={defaultAccountName}
onChange={event => this.setState({ newAccountName: event.target.value })}
@ -61,13 +62,17 @@ export default class NewAccountCreateForm extends Component {
large
className="new-account-create-form__button"
onClick={() => history.push(DEFAULT_ROUTE)}
>{this.context.t('cancel')}</Button>
>
{this.context.t('cancel')}
</Button>
<Button
type="secondary"
large
className="new-account-create-form__button"
onClick={createClick}
>{this.context.t('create')}</Button>
>
{this.context.t('create')}
</Button>
</div>
</div>
)

3
ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
View File

@ -283,7 +283,8 @@ export default class ImportWithSeedPhrase extends PureComponent {
{termsChecked ? <i className="fa fa-check fa-2x" /> : null}
</div>
<span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
I have read and agree to the <a
I have read and agree to the&nbsp;
<a
href="https://metamask.io/terms.html"
target="_blank"
rel="noopener noreferrer"

3
ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
View File

@ -204,7 +204,8 @@ export default class NewAccount extends PureComponent {
{termsChecked ? <i className="fa fa-check fa-2x" /> : null}
</div>
<span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
I have read and agree to the <a
I have read and agree to the&nbsp;
<a
href="https://metamask.io/terms.html"
target="_blank"
rel="noopener noreferrer"

9
ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js
View File

@ -73,7 +73,8 @@ export default class EndOfFlowScreen extends PureComponent {
{ '• ' + t('endOfFlowMessage7') }
</div>
<div className="first-time-flow__text-block end-of-flow__text-4">
{ '*' + t('endOfFlowMessage8') } <a
{ '*' + t('endOfFlowMessage8') }&nbsp;
<a
href="https://metamask.zendesk.com/hc/en-us/articles/360015489591-Basic-Safety-Tips"
target="_blank"
rel="noopener noreferrer"
@ -91,11 +92,11 @@ export default class EndOfFlowScreen extends PureComponent {
{ t('endOfFlowMessage10') }
</Button>
{
onboardingInitiator ?
onboardingInitiator ? (
<Snackbar
content={t('onboardingReturnNotice', [t('endOfFlowMessage10'), onboardingInitiator.location])}
/> :
null
/>
) : null
}
</div>
)

3
ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
View File

@ -142,7 +142,8 @@ export default class MetaMetricsOptIn extends Component {
disabled={false}
/>
<div className="metametrics-opt-in__bottom-text">
This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our <a
This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our&nbsp;
<a
href="https://metamask.io/privacy.html"
target="_blank"
rel="noopener noreferrer"

21
ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
View File

@ -78,10 +78,12 @@ export default class RevealSeedPhrase extends PureComponent {
return (
<div className="reveal-seed-phrase__secret">
<div className={classnames(
'reveal-seed-phrase__secret-words notranslate',
{ 'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase }
)}>
<div
className={classnames(
'reveal-seed-phrase__secret-words notranslate', {
'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase,
})}
>
{ seedPhrase }
</div>
{
@ -150,7 +152,8 @@ export default class RevealSeedPhrase extends PureComponent {
<div className="first-time-flow__text-block">
<a
className="reveal-seed-phrase__export-text"
onClick={this.handleExport}>
onClick={this.handleExport}
>
{ t('downloadSecretBackup') }
</a>
</div>
@ -175,9 +178,11 @@ export default class RevealSeedPhrase extends PureComponent {
</div>
{
onboardingInitiator ?
<Snackbar
content={t('onboardingReturnNotice', [t('remindMeLater'), onboardingInitiator.location])}
/> :
(
<Snackbar
content={t('onboardingReturnNotice', [t('remindMeLater'), onboardingInitiator.location])}
/>
) :
null
}
</div>

90
ui/app/pages/home/home.component.js
View File

@ -124,56 +124,62 @@ export default class Home extends PureComponent {
<MultipleNotifications>
{
showPrivacyModeNotification
? <HomeNotification
descriptionText={t('privacyModeDefault')}
acceptText={t('learnMore')}
onAccept={() => {
unsetMigratedPrivacyMode()
window.open('https://medium.com/metamask/42549d4870fa', '_blank', 'noopener')
}}
ignoreText={t('dismiss')}
onIgnore={() => {
unsetMigratedPrivacyMode()
}}
key="home-privacyModeDefault"
/>
? (
<HomeNotification
descriptionText={t('privacyModeDefault')}
acceptText={t('learnMore')}
onAccept={() => {
unsetMigratedPrivacyMode()
window.open('https://medium.com/metamask/42549d4870fa', '_blank', 'noopener')
}}
ignoreText={t('dismiss')}
onIgnore={() => {
unsetMigratedPrivacyMode()
}}
key="home-privacyModeDefault"
/>
)
: null
}
{
shouldShowSeedPhraseReminder
? <HomeNotification
descriptionText={t('backupApprovalNotice')}
acceptText={t('backupNow')}
onAccept={() => {
if (isPopup) {
global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
} else {
history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
}
}}
infoText={t('backupApprovalInfo')}
key="home-backupApprovalNotice"
/>
? (
<HomeNotification
descriptionText={t('backupApprovalNotice')}
acceptText={t('backupNow')}
onAccept={() => {
if (isPopup) {
global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
} else {
history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
}
}}
infoText={t('backupApprovalInfo')}
key="home-backupApprovalNotice"
/>
)
: null
}
{
threeBoxLastUpdated && showRestorePrompt
? <HomeNotification
descriptionText={t('restoreWalletPreferences', [ formatDate(threeBoxLastUpdated, 'M/d/y') ])}
acceptText={t('restore')}
ignoreText={t('noThanks')}
infoText={t('dataBackupFoundInfo')}
onAccept={() => {
restoreFromThreeBox(selectedAddress)
.then(() => {
turnThreeBoxSyncingOn()
})
}}
onIgnore={() => {
setShowRestorePromptToFalse()
}}
key="home-privacyModeDefault"
/>
? (
<HomeNotification
descriptionText={t('restoreWalletPreferences', [ formatDate(threeBoxLastUpdated, 'M/d/y') ])}
acceptText={t('restore')}
ignoreText={t('noThanks')}
infoText={t('dataBackupFoundInfo')}
onAccept={() => {
restoreFromThreeBox(selectedAddress)
.then(() => {
turnThreeBoxSyncingOn()
})
}}
onIgnore={() => {
setShowRestorePromptToFalse()
}}
key="home-privacyModeDefault"
/>
)
: null
}
{

72
ui/app/pages/send/account-list-item/account-list-item.component.js
View File

@ -44,30 +44,32 @@ export default class AccountListItem extends Component {
const { name, address, balance } = account || {}
return (<div
className={`account-list-item ${className}`}
onClick={() => handleClick && handleClick({ name, address, balance })}
>
return (
<div
className={`account-list-item ${className}`}
onClick={() => handleClick && handleClick({ name, address, balance })}
>
<div className="account-list-item__top-row">
<Identicon
address={address}
className="account-list-item__identicon"
diameter={18}
/>
<div className="account-list-item__top-row">
<Identicon
address={address}
className="account-list-item__identicon"
diameter={18}
/>
<div className="account-list-item__account-name">{ name || address }</div>
<div className="account-list-item__account-name">{ name || address }</div>
{icon && <div className="account-list-item__icon">{ icon }</div>}
{icon && <div className="account-list-item__icon">{ icon }</div>}
</div>
</div>
{displayAddress && name && <div className="account-list-item__account-address">
{ checksumAddress(address) }
</div>}
{displayAddress && name && (
<div className="account-list-item__account-address">
{ checksumAddress(address) }
</div>
)}
{
displayBalance && (
{displayBalance && (
<Tooltip
position="left"
title={this.context.t('balanceOutdated')}
@ -76,9 +78,11 @@ export default class AccountListItem extends Component {
left: '-20px !important',
}}
>
<div className={classnames('account-list-item__account-balances', {
'account-list-item__cached-balances': balanceIsCached,
})}>
<div
className={classnames('account-list-item__account-balances', {
'account-list-item__cached-balances': balanceIsCached,
})}
>
<div className="account-list-item__primary-cached-container">
<UserPreferencedCurrencyDisplay
type={PRIMARY}
@ -86,23 +90,23 @@ export default class AccountListItem extends Component {
hideTitle
/>
{
balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
balanceIsCached
? <span className="account-list-item__cached-star">*</span>
: null
}
</div>
{
showFiat && (
<UserPreferencedCurrencyDisplay
type={SECONDARY}
value={balance}
hideTitle
/>
)
}
{showFiat && (
<UserPreferencedCurrencyDisplay
type={SECONDARY}
value={balance}
hideTitle
/>
)}
</div>
</Tooltip>
)
}
)}
</div>)
</div>
)
}
}

24
ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js
View File

@ -23,17 +23,19 @@ describe('AccountListItem Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<AccountListItem
account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
className="mockClassName"
conversionRate={4}
currentCurrency="mockCurrentyCurrency"
nativeCurrency="ETH"
displayAddress={false}
displayBalance={false}
handleClick={propsMethodSpies.handleClick}
icon={<i className="mockIcon" />}
/>, { context: { t: str => str + '_t' } })
wrapper = shallow((
<AccountListItem
account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
className="mockClassName"
conversionRate={4}
currentCurrency="mockCurrentyCurrency"
nativeCurrency="ETH"
displayAddress={false}
displayBalance={false}
handleClick={propsMethodSpies.handleClick}
icon={<i className="mockIcon" />}
/>
), { context: { t: str => str + '_t' } })
})
afterEach(() => {

2
ui/app/pages/send/send-content/add-recipient/add-recipient.component.js
View File

@ -155,7 +155,7 @@ export default class AddRecipient extends Component {
className="send__select-recipient-wrapper__list__link"
onClick={() => this.setState({ isShowingTransfer: false })}
>
<div className="send__select-recipient-wrapper__list__back-caret"/>
<div className="send__select-recipient-wrapper__list__back-caret" />
{ t('backToAll') }
</div>
<RecipientGroup

36
ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js
View File

@ -19,23 +19,25 @@ describe('AddRecipient Component', function () {
let instance
beforeEach(() => {
wrapper = shallow(<AddRecipient
closeToDropdown={propsMethodSpies.closeToDropdown}
inError={false}
inWarning={false}
network="mockNetwork"
openToDropdown={propsMethodSpies.openToDropdown}
to="mockTo"
toAccounts={['mockAccount']}
toDropdownOpen={false}
updateGas={propsMethodSpies.updateGas}
updateSendTo={propsMethodSpies.updateSendTo}
updateSendToError={propsMethodSpies.updateSendToError}
updateSendToWarning={propsMethodSpies.updateSendToWarning}
addressBook={[{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 5' }]}
nonContacts={[{ address: '0x70F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 7' }]}
contacts={[{ address: '0x60F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 6' }]}
/>, { context: { t: str => str + '_t' } })
wrapper = shallow((
<AddRecipient
closeToDropdown={propsMethodSpies.closeToDropdown}
inError={false}
inWarning={false}
network="mockNetwork"
openToDropdown={propsMethodSpies.openToDropdown}
to="mockTo"
toAccounts={['mockAccount']}
toDropdownOpen={false}
updateGas={propsMethodSpies.updateGas}
updateSendTo={propsMethodSpies.updateSendTo}
updateSendToError={propsMethodSpies.updateSendToError}
updateSendToWarning={propsMethodSpies.updateSendToWarning}
addressBook={[{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 5' }]}
nonContacts={[{ address: '0x70F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 7' }]}
contacts={[{ address: '0x60F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 6' }]}
/>
), { context: { t: str => str + '_t' } })
instance = wrapper.instance()
})

20
ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
View File

@ -18,15 +18,17 @@ describe('AmountMaxButton Component', function () {
let instance
beforeEach(() => {
wrapper = shallow(<AmountMaxButton
balance="mockBalance"
gasTotal="mockGasTotal"
maxModeOn={false}
selectedToken={ { address: 'mockTokenAddress' } }
setAmountToMax={propsMethodSpies.setAmountToMax}
setMaxModeTo={propsMethodSpies.setMaxModeTo}
tokenBalance="mockTokenBalance"
/>, {
wrapper = shallow((
<AmountMaxButton
balance="mockBalance"
gasTotal="mockGasTotal"
maxModeOn={false}
selectedToken={ { address: 'mockTokenAddress' } }
setAmountToMax={propsMethodSpies.setAmountToMax}
setMaxModeTo={propsMethodSpies.setMaxModeTo}
tokenBalance="mockTokenBalance"
/>
), {
context: {
t: str => str + '_t',
metricsEvent: () => {},

36
ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
View File

@ -25,23 +25,25 @@ describe('SendAmountRow Component', function () {
let instance
beforeEach(() => {
wrapper = shallow(<SendAmountRow
amount="mockAmount"
amountConversionRate="mockAmountConversionRate"
balance="mockBalance"
conversionRate={7}
convertedCurrency="mockConvertedCurrency"
gasTotal="mockGasTotal"
inError={false}
primaryCurrency="mockPrimaryCurrency"
selectedToken={ { address: 'mockTokenAddress' } }
setMaxModeTo={propsMethodSpies.setMaxModeTo}
tokenBalance="mockTokenBalance"
updateGasFeeError={propsMethodSpies.updateGasFeeError}
updateSendAmount={propsMethodSpies.updateSendAmount}
updateSendAmountError={propsMethodSpies.updateSendAmountError}
updateGas={propsMethodSpies.updateGas}
/>, { context: { t: str => str + '_t' } })
wrapper = shallow((
<SendAmountRow
amount="mockAmount"
amountConversionRate="mockAmountConversionRate"
balance="mockBalance"
conversionRate={7}
convertedCurrency="mockConvertedCurrency"
gasTotal="mockGasTotal"
inError={false}
primaryCurrency="mockPrimaryCurrency"
selectedToken={ { address: 'mockTokenAddress' } }
setMaxModeTo={propsMethodSpies.setMaxModeTo}
tokenBalance="mockTokenBalance"
updateGasFeeError={propsMethodSpies.updateGasFeeError}
updateSendAmount={propsMethodSpies.updateSendAmount}
updateSendAmountError={propsMethodSpies.updateSendAmountError}
updateGas={propsMethodSpies.updateGas}
/>
), { context: { t: str => str + '_t' } })
instance = wrapper.instance()
})

3
ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js
View File

@ -128,7 +128,8 @@ export default class SendAssetRow extends Component {
return (
<div
key={address} className="send-v2__asset-dropdown__asset"
key={address}
className="send-v2__asset-dropdown__asset"
onClick={() => this.selectToken(address)}
>
<div className="send-v2__asset-dropdown__asset-icon">

40
ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js
View File

@ -17,7 +17,7 @@ export default class SendDropdownList extends Component {
getListItemIcon (accountAddress, activeAddress) {
return accountAddress === activeAddress
? <i className="fa fa-check fa-lg" style={ { color: '#02c9b1' } }/>
? <i className="fa fa-check fa-lg" style={ { color: '#02c9b1' } } />
: null
}
@ -29,24 +29,28 @@ export default class SendDropdownList extends Component {
activeAddress,
} = this.props
return (<div>
<div
className="send-v2__from-dropdown__close-area"
onClick={() => closeDropdown()}
/>
<div className="send-v2__from-dropdown__list">
{accounts.map((account, index) => <AccountListItem
account={account}
className="account-list-item__dropdown"
handleClick={() => {
onSelect(account)
closeDropdown()
}}
icon={this.getListItemIcon(account.address, activeAddress)}
key={`send-dropdown-account-#${index}`}
/>)}
return (
<div>
<div
className="send-v2__from-dropdown__close-area"
onClick={() => closeDropdown()}
/>
<div className="send-v2__from-dropdown__list">
{accounts.map((account, index) => (
<AccountListItem
account={account}
className="account-list-item__dropdown"
handleClick={() => {
onSelect(account)
closeDropdown()
}}
icon={this.getListItemIcon(account.address, activeAddress)}
key={`send-dropdown-account-#${index}`}
/>
))}
</div>
</div>
</div>)
)
}
}

24
ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js
View File

@ -17,16 +17,18 @@ describe('SendDropdownList Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<SendDropdownList
accounts={[
{ address: 'mockAccount0' },
{ address: 'mockAccount1' },
{ address: 'mockAccount2' },
]}
closeDropdown={propsMethodSpies.closeDropdown}
onSelect={propsMethodSpies.onSelect}
activeAddress="mockAddress2"
/>, { context: { t: str => str + '_t' } })
wrapper = shallow((
<SendDropdownList
accounts={[
{ address: 'mockAccount0' },
{ address: 'mockAccount1' },
{ address: 'mockAccount2' },
]}
closeDropdown={propsMethodSpies.closeDropdown}
onSelect={propsMethodSpies.onSelect}
activeAddress="mockAddress2"
/>
), { context: { t: str => str + '_t' } })
})
afterEach(() => {
@ -39,7 +41,7 @@ describe('SendDropdownList Component', function () {
it('should return check icon if the passed addresses are the same', () => {
assert.deepEqual(
wrapper.instance().getListItemIcon('mockAccount0', 'mockAccount0'),
<i className="fa fa-check fa-lg" style={ { color: '#02c9b1' } }/>
<i className="fa fa-check fa-lg" style={ { color: '#02c9b1' } } />
)
})

16
ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
View File

@ -38,12 +38,16 @@ export default class GasFeeDisplay extends Component {
</div>
)
: gasLoadingError
? <div className="currency-display.currency-display--message">
{this.context.t('setGasPrice')}
</div>
: <div className="currency-display">
{this.context.t('loading')}
</div>
? (
<div className="currency-display.currency-display--message">
{this.context.t('setGasPrice')}
</div>
)
: (
<div className="currency-display">
{this.context.t('loading')}
</div>
)
}
<button
className="gas-fee-reset"

18
ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
View File

@ -15,14 +15,16 @@ describe('GasFeeDisplay Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<GasFeeDisplay
conversionRate={20}
gasTotal="mockGasTotal"
primaryCurrency="mockPrimaryCurrency"
convertedCurrency="mockConvertedCurrency"
showGasButtonGroup={propsMethodSpies.showCustomizeGasModal}
onReset={propsMethodSpies.onReset}
/>, {context: {t: str => str + '_t'}})
wrapper = shallow((
<GasFeeDisplay
conversionRate={20}
gasTotal="mockGasTotal"
primaryCurrency="mockPrimaryCurrency"
convertedCurrency="mockConvertedCurrency"
showGasButtonGroup={propsMethodSpies.showCustomizeGasModal}
onReset={propsMethodSpies.onReset}
/>
), {context: {t: str => str + '_t'}})
})
afterEach(() => {

117
ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
View File

@ -38,18 +38,23 @@ export default class SendGasRow extends Component {
renderAdvancedOptionsButton () {
const { metricsEvent } = this.context
const { showCustomizeGasModal } = this.props
return <div className="advanced-gas-options-btn" onClick={() => {
metricsEvent({
eventOpts: {
category: 'Transactions',
action: 'Edit Screen',
name: 'Clicked "Advanced Options"',
},
})
showCustomizeGasModal()
}}>
{ this.context.t('advancedOptions') }
</div>
return (
<div
className="advanced-gas-options-btn"
onClick={() => {
metricsEvent({
eventOpts: {
category: 'Transactions',
action: 'Edit Screen',
name: 'Clicked "Advanced Options"',
},
})
showCustomizeGasModal()
}}
>
{ this.context.t('advancedOptions') }
</div>
)
}
setMaxAmount () {
@ -89,52 +94,58 @@ export default class SendGasRow extends Component {
} = this.props
const { metricsEvent } = this.context
const gasPriceButtonGroup = <div>
<GasPriceButtonGroup
className="gas-price-button-group--small"
showCheck={false}
{...gasPriceButtonGroupProps}
handleGasPriceSelection={async (...args) => {
metricsEvent({
eventOpts: {
category: 'Transactions',
action: 'Edit Screen',
name: 'Changed Gas Button',
},
})
await gasPriceButtonGroupProps.handleGasPriceSelection(...args)
const gasPriceButtonGroup = (
<div>
<GasPriceButtonGroup
className="gas-price-button-group--small"
showCheck={false}
{...gasPriceButtonGroupProps}
handleGasPriceSelection={async (...args) => {
metricsEvent({
eventOpts: {
category: 'Transactions',
action: 'Edit Screen',
name: 'Changed Gas Button',
},
})
await gasPriceButtonGroupProps.handleGasPriceSelection(...args)
if (maxModeOn) {
this.setMaxAmount()
}
}}
/>
{ this.renderAdvancedOptionsButton() }
</div>
)
const gasFeeDisplay = (
<GasFeeDisplay
conversionRate={conversionRate}
convertedCurrency={convertedCurrency}
gasLoadingError={gasLoadingError}
gasTotal={gasTotal}
onReset={() => {
resetGasButtons()
if (maxModeOn) {
this.setMaxAmount()
}
}}
onClick={() => showCustomizeGasModal()}
/>
{ this.renderAdvancedOptionsButton() }
</div>
const gasFeeDisplay = <GasFeeDisplay
conversionRate={conversionRate}
convertedCurrency={convertedCurrency}
gasLoadingError={gasLoadingError}
gasTotal={gasTotal}
onReset={() => {
resetGasButtons()
if (maxModeOn) {
this.setMaxAmount()
}
}}
onClick={() => showCustomizeGasModal()}
/>
const advancedGasInputs = <div>
<AdvancedGasInputs
updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)}
updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)}
customGasPrice={gasPrice}
customGasLimit={gasLimit}
insufficientBalance={insufficientBalance}
customPriceIsSafe
isSpeedUp={false}
/>
{ this.renderAdvancedOptionsButton() }
</div>
)
const advancedGasInputs = (
<div>
<AdvancedGasInputs
updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)}
updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)}
customGasPrice={gasPrice}
customGasLimit={gasLimit}
insufficientBalance={insufficientBalance}
customPriceIsSafe
isSpeedUp={false}
/>
{ this.renderAdvancedOptionsButton() }
</div>
)
if (advancedInlineGasShown) {
return advancedGasInputs

30
ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
View File

@ -17,20 +17,22 @@ describe('SendGasRow Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<SendGasRow
conversionRate={20}
convertedCurrency="mockConvertedCurrency"
gasFeeError="mockGasFeeError"
gasLoadingError={false}
gasTotal="mockGasTotal"
gasButtonGroupShown={false}
showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
resetGasButtons={propsMethodSpies.resetGasButtons}
gasPriceButtonGroupProps={{
someGasPriceButtonGroupProp: 'foo',
anotherGasPriceButtonGroupProp: 'bar',
}}
/>, { context: { t: str => str + '_t', metricsEvent: () => ({}) } })
wrapper = shallow((
<SendGasRow
conversionRate={20}
convertedCurrency="mockConvertedCurrency"
gasFeeError="mockGasFeeError"
gasLoadingError={false}
gasTotal="mockGasTotal"
gasButtonGroupShown={false}
showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
resetGasButtons={propsMethodSpies.resetGasButtons}
gasPriceButtonGroupProps={{
someGasPriceButtonGroupProp: 'foo',
anotherGasPriceButtonGroupProp: 'bar',
}}
/>
), { context: { t: str => str + '_t', metricsEvent: () => ({}) } })
})
afterEach(() => {

10
ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js
View File

@ -7,10 +7,12 @@ describe('SendRowErrorMessage Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<SendRowErrorMessage
errors={{ error1: 'abc', error2: 'def' }}
errorType="error3"
/>, { context: { t: str => str + '_t' } })
wrapper = shallow((
<SendRowErrorMessage
errors={{ error1: 'abc', error2: 'def' }}
errorType="error3"
/>
), { context: { t: str => str + '_t' } })
})
describe('render', () => {

52
ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
View File

@ -9,13 +9,15 @@ describe('SendContent Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<SendRowWrapper
errorType="mockErrorType"
label="mockLabel"
showError={false}
>
<span>Mock Form Field</span>
</SendRowWrapper>)
wrapper = shallow((
<SendRowWrapper
errorType="mockErrorType"
label="mockLabel"
showError={false}
>
<span>Mock Form Field</span>
</SendRowWrapper>
))
})
describe('render', () => {
@ -53,26 +55,30 @@ describe('SendContent Component', function () {
})
it('should render its second child as a child of the send-v2__form-field, if it has two children', () => {
wrapper = shallow(<SendRowWrapper
errorType="mockErrorType"
label="mockLabel"
showError={false}
>
<span>Mock Custom Label Content</span>
<span>Mock Form Field</span>
</SendRowWrapper>)
wrapper = shallow((
<SendRowWrapper
errorType="mockErrorType"
label="mockLabel"
showError={false}
>
<span>Mock Custom Label Content</span>
<span>Mock Form Field</span>
</SendRowWrapper>
))
assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field')
})
it('should render its first child as the last child of the send-v2__form-label, if it has two children', () => {
wrapper = shallow(<SendRowWrapper
errorType="mockErrorType"
label="mockLabel"
showError={false}
>
<span>Mock Custom Label Content</span>
<span>Mock Form Field</span>
</SendRowWrapper>)
wrapper = shallow((
<SendRowWrapper
errorType="mockErrorType"
label="mockLabel"
showError={false}
>
<span>Mock Custom Label Content</span>
<span>Mock Form Field</span>
</SendRowWrapper>
))
assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1).text(), 'Mock Custom Label Content')
})
})

90
ui/app/pages/send/send-footer/tests/send-footer-component.test.js
View File

@ -25,28 +25,30 @@ describe('SendFooter Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<SendFooter
addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
amount="mockAmount"
clearSend={propsMethodSpies.clearSend}
disabled
editingTransactionId="mockEditingTransactionId"
errors={{}}
from={ { address: 'mockAddress', balance: 'mockBalance' } }
gasLimit="mockGasLimit"
gasPrice="mockGasPrice"
gasTotal="mockGasTotal"
history={historySpies}
inError={false}
selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
sign={propsMethodSpies.sign}
to="mockTo"
toAccounts={['mockAccount']}
tokenBalance="mockTokenBalance"
unapprovedTxs={['mockTx']}
update={propsMethodSpies.update}
sendErrors={{}}
/>, { context: { t: str => str, metricsEvent: () => ({}) } })
wrapper = shallow((
<SendFooter
addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
amount="mockAmount"
clearSend={propsMethodSpies.clearSend}
disabled
editingTransactionId="mockEditingTransactionId"
errors={{}}
from={ { address: 'mockAddress', balance: 'mockBalance' } }
gasLimit="mockGasLimit"
gasPrice="mockGasPrice"
gasTotal="mockGasTotal"
history={historySpies}
inError={false}
selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
sign={propsMethodSpies.sign}
to="mockTo"
toAccounts={['mockAccount']}
tokenBalance="mockTokenBalance"
unapprovedTxs={['mockTx']}
update={propsMethodSpies.update}
sendErrors={{}}
/>
), { context: { t: str => str, metricsEvent: () => ({}) } })
})
afterEach(() => {
@ -182,27 +184,29 @@ describe('SendFooter Component', function () {
describe('render', () => {
beforeEach(() => {
sinon.stub(SendFooter.prototype, 'formShouldBeDisabled').returns('formShouldBeDisabledReturn')
wrapper = shallow(<SendFooter
addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
amount="mockAmount"
clearSend={propsMethodSpies.clearSend}
disabled
editingTransactionId="mockEditingTransactionId"
errors={{}}
from={ { address: 'mockAddress', balance: 'mockBalance' } }
gasLimit="mockGasLimit"
gasPrice="mockGasPrice"
gasTotal="mockGasTotal"
history={historySpies}
inError={false}
selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
sign={propsMethodSpies.sign}
to="mockTo"
toAccounts={['mockAccount']}
tokenBalance="mockTokenBalance"
unapprovedTxs={['mockTx']}
update={propsMethodSpies.update}
/>, { context: { t: str => str, metricsEvent: () => ({}) } })
wrapper = shallow((
<SendFooter
addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
amount="mockAmount"
clearSend={propsMethodSpies.clearSend}
disabled
editingTransactionId="mockEditingTransactionId"
errors={{}}
from={ { address: 'mockAddress', balance: 'mockBalance' } }
gasLimit="mockGasLimit"
gasPrice="mockGasPrice"
gasTotal="mockGasTotal"
history={historySpies}
inError={false}
selectedToken={{ mockProp: 'mockSelectedTokenProp' }}
sign={propsMethodSpies.sign}
to="mockTo"
toAccounts={['mockAccount']}
tokenBalance="mockTokenBalance"
unapprovedTxs={['mockTx']}
update={propsMethodSpies.update}
/>
), { context: { t: str => str, metricsEvent: () => ({}) } })
})
afterEach(() => {

12
ui/app/pages/send/send-header/tests/send-header-component.test.js
View File

@ -20,11 +20,13 @@ describe('SendHeader Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<SendHeader
clearSend={propsMethodSpies.clearSend}
history={historySpies}
titleKey="mockTitleKey"
/>, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
wrapper = shallow((
<SendHeader
clearSend={propsMethodSpies.clearSend}
history={historySpies}
titleKey="mockTitleKey"
/>
), { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
})
afterEach(() => {

56
ui/app/pages/send/tests/send-component.test.js
View File

@ -40,33 +40,35 @@ describe('Send Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<SendTransactionScreen
amount="mockAmount"
amountConversionRate="mockAmountConversionRate"
blockGasLimit="mockBlockGasLimit"
conversionRate={10}
editingTransactionId="mockEditingTransactionId"
fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
from={ { address: 'mockAddress', balance: 'mockBalance' } }
gasLimit="mockGasLimit"
gasPrice="mockGasPrice"
gasTotal="mockGasTotal"
history={{ mockProp: 'history-abc'}}
network="3"
primaryCurrency="mockPrimaryCurrency"
recentBlocks={['mockBlock']}
selectedAddress="mockSelectedAddress"
selectedToken={{ address: 'mockTokenAddress', decimals: 18, symbol: 'TST' }}
showHexData
tokenBalance="mockTokenBalance"
tokenContract={{ method: 'mockTokenMethod' }}
updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
updateSendErrors={propsMethodSpies.updateSendErrors}
updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
resetSendState={propsMethodSpies.resetSendState}
updateToNicknameIfNecessary={propsMethodSpies.updateToNicknameIfNecessary}
/>)
wrapper = shallow((
<SendTransactionScreen
amount="mockAmount"
amountConversionRate="mockAmountConversionRate"
blockGasLimit="mockBlockGasLimit"
conversionRate={10}
editingTransactionId="mockEditingTransactionId"
fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
from={ { address: 'mockAddress', balance: 'mockBalance' } }
gasLimit="mockGasLimit"
gasPrice="mockGasPrice"
gasTotal="mockGasTotal"
history={{ mockProp: 'history-abc'}}
network="3"
primaryCurrency="mockPrimaryCurrency"
recentBlocks={['mockBlock']}
selectedAddress="mockSelectedAddress"
selectedToken={{ address: 'mockTokenAddress', decimals: 18, symbol: 'TST' }}
showHexData
tokenBalance="mockTokenBalance"
tokenContract={{ method: 'mockTokenMethod' }}
updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
updateSendErrors={propsMethodSpies.updateSendErrors}
updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
resetSendState={propsMethodSpies.resetSendState}
updateToNicknameIfNecessary={propsMethodSpies.updateToNicknameIfNecessary}
/>
))
})
afterEach(() => {

12
ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js
View File

@ -85,12 +85,14 @@ export default class AddContact extends PureComponent {
return (
<div className="settings-page__content-row address-book__add-contact">
{this.state.ensAddress && <div className="address-book__view-contact__group">
<Identicon address={this.state.ensAddress} diameter={60} />
<div className="address-book__view-contact__group__value">
{ this.state.ensAddress }
{this.state.ensAddress && (
<div className="address-book__view-contact__group">
<Identicon address={this.state.ensAddress} diameter={60} />
<div className="address-book__view-contact__group__value">
{ this.state.ensAddress }
</div>
</div>
</div>}
)}
<div className="address-book__add-contact__content">
<div className="address-book__view-contact__group">
<div className="address-book__view-contact__group__label">

49
ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js
View File

@ -49,16 +49,19 @@ export default class ContactListTab extends Component {
renderAddButton () {
const { history } = this.props
return <div
className="address-book-add-button__button"
onClick={() => {
history.push(CONTACT_ADD_ROUTE)
}}>
<img
className="account-menu__item-icon"
src="images/plus-btn-white.svg"
/>
</div>
return (
<div
className="address-book-add-button__button"
onClick={() => {
history.push(CONTACT_ADD_ROUTE)
}}
>
<img
className="account-menu__item-icon"
src="images/plus-btn-white.svg"
/>
</div>
)
}
renderMyAccountsButton () {
@ -98,19 +101,23 @@ export default class ContactListTab extends Component {
ContactContentComponent = AddContact
}
return (ContactContentComponent && <div className="address-book-contact-content">
<ContactContentComponent />
</div>)
return (ContactContentComponent && (
<div className="address-book-contact-content">
<ContactContentComponent />
</div>
))
}
renderAddressBookContent () {
const { hideAddressBook, showingMyAccounts } = this.props
if (!hideAddressBook && !showingMyAccounts) {
return (<div className="address-book">
{ this.renderMyAccountsButton() }
{ this.renderAddresses() }
</div>)
return (
<div className="address-book">
{ this.renderMyAccountsButton() }
{ this.renderAddresses() }
</div>
)
} else if (!hideAddressBook && showingMyAccounts) {
return (<MyAccounts />)
}
@ -123,9 +130,11 @@ export default class ContactListTab extends Component {
<div className="address-book-wrapper">
{ this.renderAddressBookContent() }
{ this.renderContactContent() }
{!addingContact && <div className="address-book-add-button">
{ this.renderAddButton() }
</div>}
{!addingContact && (
<div className="address-book-add-button">
{ this.renderAddButton() }
</div>
)}
</div>
)
}

2
ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
View File

@ -45,7 +45,7 @@ export default class EditContact extends PureComponent {
return (
<div className="settings-page__content-row address-book__edit-contact">
<div className="settings-page__header address-book__header--edit">
<Identicon address={address} diameter={60}/>
<Identicon address={address} diameter={60} />
<Button
type="link"
className="settings-page__address-book-button"

34
ui/app/pages/settings/networks-tab/networks-tab.component.js
View File

@ -114,9 +114,11 @@ export default class NetworksTab extends PureComponent {
backgroundColor={iconColor || 'white'}
innerBorder={border}
/>
<div className={ classnames('networks-tab__networks-list-name', {
'networks-tab__networks-list-name--selected': displayNetworkListItemAsSelected,
}) }>
<div
className={classnames('networks-tab__networks-list-name', {
'networks-tab__networks-list-name--selected': displayNetworkListItemAsSelected,
})}
>
{ label || this.context.t(labelKey) }
</div>
<div className="networks-tab__networks-list-arrow" />
@ -224,18 +226,20 @@ export default class NetworksTab extends PureComponent {
{this.renderSubHeader()}
{this.renderNetworksTabContent()}
{!networkIsSelected && !networksTabIsInAddMode
? <div className="networks-tab__add-network-button-wrapper">
<Button
type="primary"
onClick={event => {
event.preventDefault()
setSelectedSettingsRpcUrl(null)
setNetworksTabAddMode(true)
}}
>
{ this.context.t('addNetwork') }
</Button>
</div>
? (
<div className="networks-tab__add-network-button-wrapper">
<Button
type="primary"
onClick={event => {
event.preventDefault()
setSelectedSettingsRpcUrl(null)
setNetworksTabAddMode(true)
}}
>
{ this.context.t('addNetwork') }
</Button>
</div>
)
: null
}
</div>

20
ui/app/pages/settings/settings.component.js
View File

@ -135,13 +135,19 @@ class SettingsPage extends PureComponent {
<div
className={c({ 'settings-page__subheader--link': initialBreadCrumbRoute })}
onClick={() => initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)}
>{subheaderText}</div>
{breadCrumbTextKey && <div
className="settings-page__subheader--break"
><span>{' > '}</span>{t(breadCrumbTextKey)}</div>}
{isAddressEntryPage && <div
className="settings-page__subheader--break"
><span>{' > '}</span>{addressName}</div>}
>
{subheaderText}
</div>
{breadCrumbTextKey && (
<div className="settings-page__subheader--break">
<span>{' > '}</span>{t(breadCrumbTextKey)}
</div>
)}
{isAddressEntryPage && (
<div className="settings-page__subheader--break">
<span>{' > '}</span>{addressName}
</div>
)}
</div>
)
}