New settings page rebased (#6333)
* New setting tab * Add InfoTab * Add Advanced tab * Add Security Tab * Finish mobile view * Make new setting page responsive * Fix linter * Fix y scrolling * Update link in network dropdown * Fix e2e tests * Remove duplicate translation key * Resolve merge conflict * Only change settings header in popup view. * Place mobile-sync button in advanced-tab of settingsfeature/default_network_editable
Dan J Miller
6 years ago
committed by
GitHub
parent
4ff9126ff2
commit
961ad267df
|
After Width: | Height: | Size: 913 B |
@ -0,0 +1,378 @@ |
|||||||
|
import React, { PureComponent } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import validUrl from 'valid-url' |
||||||
|
import { exportAsFile } from '../../../helpers/utils/util' |
||||||
|
import ToggleButton from 'react-toggle-button' |
||||||
|
import TextField from '../../../components/ui/text-field' |
||||||
|
import Button from '../../../components/ui/button' |
||||||
|
import { MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes' |
||||||
|
|
||||||
|
export default class AdvancedTab extends PureComponent { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
metricsEvent: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
setHexDataFeatureFlag: PropTypes.func, |
||||||
|
setRpcTarget: PropTypes.func, |
||||||
|
displayWarning: PropTypes.func, |
||||||
|
showResetAccountConfirmationModal: PropTypes.func, |
||||||
|
warning: PropTypes.string, |
||||||
|
history: PropTypes.object, |
||||||
|
sendHexData: PropTypes.bool, |
||||||
|
setAdvancedInlineGasFeatureFlag: PropTypes.func, |
||||||
|
advancedInlineGas: PropTypes.bool, |
||||||
|
showFiatInTestnets: PropTypes.bool, |
||||||
|
setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired, |
||||||
|
} |
||||||
|
|
||||||
|
state = { |
||||||
|
newRpc: '', |
||||||
|
chainId: '', |
||||||
|
showOptions: false, |
||||||
|
ticker: '', |
||||||
|
nickname: '', |
||||||
|
} |
||||||
|
|
||||||
|
renderNewRpcUrl () { |
||||||
|
const { t } = this.context |
||||||
|
const { newRpc, chainId, ticker, nickname } = this.state |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('newNetwork') }</span> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<TextField |
||||||
|
type="text" |
||||||
|
id="new-rpc" |
||||||
|
placeholder={t('rpcURL')} |
||||||
|
value={newRpc} |
||||||
|
onChange={e => this.setState({ newRpc: e.target.value })} |
||||||
|
onKeyPress={e => { |
||||||
|
if (e.key === 'Enter') { |
||||||
|
this.validateRpc(newRpc, chainId, ticker, nickname) |
||||||
|
} |
||||||
|
}} |
||||||
|
fullWidth |
||||||
|
margin="dense" |
||||||
|
/> |
||||||
|
<TextField |
||||||
|
type="text" |
||||||
|
id="chainid" |
||||||
|
placeholder={t('optionalChainId')} |
||||||
|
value={chainId} |
||||||
|
onChange={e => this.setState({ chainId: e.target.value })} |
||||||
|
onKeyPress={e => { |
||||||
|
if (e.key === 'Enter') { |
||||||
|
this.validateRpc(newRpc, chainId, ticker, nickname) |
||||||
|
} |
||||||
|
}} |
||||||
|
style={{ |
||||||
|
display: this.state.showOptions ? null : 'none', |
||||||
|
}} |
||||||
|
fullWidth |
||||||
|
margin="dense" |
||||||
|
/> |
||||||
|
<TextField |
||||||
|
type="text" |
||||||
|
id="ticker" |
||||||
|
placeholder={t('optionalSymbol')} |
||||||
|
value={ticker} |
||||||
|
onChange={e => this.setState({ ticker: e.target.value })} |
||||||
|
onKeyPress={e => { |
||||||
|
if (e.key === 'Enter') { |
||||||
|
this.validateRpc(newRpc, chainId, ticker, nickname) |
||||||
|
} |
||||||
|
}} |
||||||
|
style={{ |
||||||
|
display: this.state.showOptions ? null : 'none', |
||||||
|
}} |
||||||
|
fullWidth |
||||||
|
margin="dense" |
||||||
|
/> |
||||||
|
<TextField |
||||||
|
type="text" |
||||||
|
id="nickname" |
||||||
|
placeholder={t('optionalNickname')} |
||||||
|
value={nickname} |
||||||
|
onChange={e => this.setState({ nickname: e.target.value })} |
||||||
|
onKeyPress={e => { |
||||||
|
if (e.key === 'Enter') { |
||||||
|
this.validateRpc(newRpc, chainId, ticker, nickname) |
||||||
|
} |
||||||
|
}} |
||||||
|
style={{ |
||||||
|
display: this.state.showOptions ? null : 'none', |
||||||
|
}} |
||||||
|
fullWidth |
||||||
|
margin="dense" |
||||||
|
/> |
||||||
|
<div className="flex-row flex-align-center space-between"> |
||||||
|
<span className="settings-tab__advanced-link" |
||||||
|
onClick={e => { |
||||||
|
e.preventDefault() |
||||||
|
this.setState({ showOptions: !this.state.showOptions }) |
||||||
|
}} |
||||||
|
> |
||||||
|
{ t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') } |
||||||
|
</span> |
||||||
|
<button |
||||||
|
className="button btn-primary settings-tab__rpc-save-button" |
||||||
|
onClick={e => { |
||||||
|
e.preventDefault() |
||||||
|
this.validateRpc(newRpc, chainId, ticker, nickname) |
||||||
|
}} |
||||||
|
> |
||||||
|
{ t('save') } |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
validateRpc (newRpc, chainId, ticker = 'ETH', nickname) { |
||||||
|
const { setRpcTarget, displayWarning } = this.props |
||||||
|
if (validUrl.isWebUri(newRpc)) { |
||||||
|
this.context.metricsEvent({ |
||||||
|
eventOpts: { |
||||||
|
category: 'Settings', |
||||||
|
action: 'Custom RPC', |
||||||
|
name: 'Success', |
||||||
|
}, |
||||||
|
customVariables: { |
||||||
|
networkId: newRpc, |
||||||
|
chainId, |
||||||
|
}, |
||||||
|
}) |
||||||
|
if (!!chainId && Number.isNaN(parseInt(chainId))) { |
||||||
|
return displayWarning(`${this.context.t('invalidInput')} chainId`) |
||||||
|
} |
||||||
|
|
||||||
|
setRpcTarget(newRpc, chainId, ticker, nickname) |
||||||
|
} else { |
||||||
|
this.context.metricsEvent({ |
||||||
|
eventOpts: { |
||||||
|
category: 'Settings', |
||||||
|
action: 'Custom RPC', |
||||||
|
name: 'Error', |
||||||
|
}, |
||||||
|
customVariables: { |
||||||
|
networkId: newRpc, |
||||||
|
chainId, |
||||||
|
}, |
||||||
|
}) |
||||||
|
const appendedRpc = `http://${newRpc}` |
||||||
|
|
||||||
|
if (validUrl.isWebUri(appendedRpc)) { |
||||||
|
displayWarning(this.context.t('uriErrorMsg')) |
||||||
|
} else { |
||||||
|
displayWarning(this.context.t('invalidRPC')) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
renderMobileSync () { |
||||||
|
const { t } = this.context |
||||||
|
const { history } = this.props |
||||||
|
//
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('syncWithMobile') }</span> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<Button |
||||||
|
type="primary" |
||||||
|
large |
||||||
|
onClick={event => { |
||||||
|
event.preventDefault() |
||||||
|
history.push(MOBILE_SYNC_ROUTE) |
||||||
|
}} |
||||||
|
> |
||||||
|
{ t('syncWithMobile') } |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderStateLogs () { |
||||||
|
const { t } = this.context |
||||||
|
const { displayWarning } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('stateLogs') }</span> |
||||||
|
<span className="settings-page__content-description"> |
||||||
|
{ t('stateLogsDescription') } |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<Button |
||||||
|
type="primary" |
||||||
|
large |
||||||
|
onClick={() => { |
||||||
|
window.logStateString((err, result) => { |
||||||
|
if (err) { |
||||||
|
displayWarning(t('stateLogError')) |
||||||
|
} else { |
||||||
|
exportAsFile('MetaMask State Logs.json', result) |
||||||
|
} |
||||||
|
}) |
||||||
|
}} |
||||||
|
> |
||||||
|
{ t('downloadStateLogs') } |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderResetAccount () { |
||||||
|
const { t } = this.context |
||||||
|
const { showResetAccountConfirmationModal } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('resetAccount') }</span> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<Button |
||||||
|
type="secondary" |
||||||
|
large |
||||||
|
className="settings-tab__button--orange" |
||||||
|
onClick={event => { |
||||||
|
event.preventDefault() |
||||||
|
this.context.metricsEvent({ |
||||||
|
eventOpts: { |
||||||
|
category: 'Settings', |
||||||
|
action: 'Reset Account', |
||||||
|
name: 'Reset Account', |
||||||
|
}, |
||||||
|
}) |
||||||
|
showResetAccountConfirmationModal() |
||||||
|
}} |
||||||
|
> |
||||||
|
{ t('resetAccount') } |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderHexDataOptIn () { |
||||||
|
const { t } = this.context |
||||||
|
const { sendHexData, setHexDataFeatureFlag } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('showHexData') }</span> |
||||||
|
<div className="settings-page__content-description"> |
||||||
|
{ t('showHexDataDescription') } |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<ToggleButton |
||||||
|
value={sendHexData} |
||||||
|
onToggle={value => setHexDataFeatureFlag(!value)} |
||||||
|
activeLabel="" |
||||||
|
inactiveLabel="" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderAdvancedGasInputInline () { |
||||||
|
const { t } = this.context |
||||||
|
const { advancedInlineGas, setAdvancedInlineGasFeatureFlag } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('showAdvancedGasInline') }</span> |
||||||
|
<div className="settings-page__content-description"> |
||||||
|
{ t('showAdvancedGasInlineDescription') } |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<ToggleButton |
||||||
|
value={advancedInlineGas} |
||||||
|
onToggle={value => setAdvancedInlineGasFeatureFlag(!value)} |
||||||
|
activeLabel="" |
||||||
|
inactiveLabel="" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderShowConversionInTestnets () { |
||||||
|
const { t } = this.context |
||||||
|
const { |
||||||
|
showFiatInTestnets, |
||||||
|
setShowFiatConversionOnTestnetsPreference, |
||||||
|
} = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('showFiatConversionInTestnets') }</span> |
||||||
|
<div className="settings-page__content-description"> |
||||||
|
{ t('showFiatConversionInTestnetsDescription') } |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<ToggleButton |
||||||
|
value={showFiatInTestnets} |
||||||
|
onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)} |
||||||
|
activeLabel="" |
||||||
|
inactiveLabel="" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderContent () { |
||||||
|
const { warning } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__body"> |
||||||
|
{ warning && <div className="settings-tab__error">{ warning }</div> } |
||||||
|
{ this.renderStateLogs() } |
||||||
|
{ this.renderMobileSync() } |
||||||
|
{ this.renderNewRpcUrl() } |
||||||
|
{ this.renderResetAccount() } |
||||||
|
{ this.renderAdvancedGasInputInline() } |
||||||
|
{ this.renderHexDataOptIn() } |
||||||
|
{ this.renderShowConversionInTestnets() } |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
return this.renderContent() |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import AdvancedTab from './advanced-tab.component' |
||||||
|
import { compose } from 'recompose' |
||||||
|
import { connect } from 'react-redux' |
||||||
|
import { withRouter } from 'react-router-dom' |
||||||
|
import { |
||||||
|
updateAndSetCustomRpc, |
||||||
|
displayWarning, |
||||||
|
setFeatureFlag, |
||||||
|
showModal, |
||||||
|
setShowFiatConversionOnTestnetsPreference, |
||||||
|
} from '../../../store/actions' |
||||||
|
import {preferencesSelector} from '../../../selectors/selectors' |
||||||
|
|
||||||
|
const mapStateToProps = state => { |
||||||
|
const { appState: { warning }, metamask } = state |
||||||
|
const { |
||||||
|
featureFlags: { |
||||||
|
sendHexData, |
||||||
|
advancedInlineGas, |
||||||
|
} = {}, |
||||||
|
} = metamask |
||||||
|
const { showFiatInTestnets } = preferencesSelector(state) |
||||||
|
|
||||||
|
return { |
||||||
|
warning, |
||||||
|
sendHexData, |
||||||
|
advancedInlineGas, |
||||||
|
showFiatInTestnets, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => { |
||||||
|
return { |
||||||
|
setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)), |
||||||
|
setRpcTarget: (newRpc, chainId, ticker, nickname) => dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname)), |
||||||
|
displayWarning: warning => dispatch(displayWarning(warning)), |
||||||
|
showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })), |
||||||
|
setAdvancedInlineGasFeatureFlag: shouldShow => dispatch(setFeatureFlag('advancedInlineGas', shouldShow)), |
||||||
|
setShowFiatConversionOnTestnetsPreference: value => { |
||||||
|
return dispatch(setShowFiatConversionOnTestnetsPreference(value)) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default compose( |
||||||
|
withRouter, |
||||||
|
connect(mapStateToProps, mapDispatchToProps) |
||||||
|
)(AdvancedTab) |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './advanced-tab.container' |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './security-tab.container' |
||||||
@ -0,0 +1,195 @@ |
|||||||
|
import React, { PureComponent } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import { exportAsFile } from '../../../helpers/utils/util' |
||||||
|
import ToggleButton from 'react-toggle-button' |
||||||
|
import { REVEAL_SEED_ROUTE } from '../../../helpers/constants/routes' |
||||||
|
import Button from '../../../components/ui/button' |
||||||
|
|
||||||
|
export default class SecurityTab extends PureComponent { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
metricsEvent: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
setPrivacyMode: PropTypes.func, |
||||||
|
privacyMode: PropTypes.bool, |
||||||
|
displayWarning: PropTypes.func, |
||||||
|
revealSeedConfirmation: PropTypes.func, |
||||||
|
showClearApprovalModal: PropTypes.func, |
||||||
|
warning: PropTypes.string, |
||||||
|
history: PropTypes.object, |
||||||
|
mobileSync: PropTypes.bool, |
||||||
|
participateInMetaMetrics: PropTypes.bool, |
||||||
|
setParticipateInMetaMetrics: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
renderStateLogs () { |
||||||
|
const { t } = this.context |
||||||
|
const { displayWarning } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('stateLogs') }</span> |
||||||
|
<span className="settings-page__content-description"> |
||||||
|
{ t('stateLogsDescription') } |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<Button |
||||||
|
type="primary" |
||||||
|
large |
||||||
|
onClick={() => { |
||||||
|
window.logStateString((err, result) => { |
||||||
|
if (err) { |
||||||
|
displayWarning(t('stateLogError')) |
||||||
|
} else { |
||||||
|
exportAsFile('MetaMask State Logs.json', result) |
||||||
|
} |
||||||
|
}) |
||||||
|
}} |
||||||
|
> |
||||||
|
{ t('downloadStateLogs') } |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderClearApproval () { |
||||||
|
const { t } = this.context |
||||||
|
const { showClearApprovalModal } = this.props |
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('approvalData') }</span> |
||||||
|
<span className="settings-page__content-description"> |
||||||
|
{ t('approvalDataDescription') } |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<Button |
||||||
|
type="secondary" |
||||||
|
large |
||||||
|
className="settings-tab__button--orange" |
||||||
|
onClick={event => { |
||||||
|
event.preventDefault() |
||||||
|
showClearApprovalModal() |
||||||
|
}} |
||||||
|
> |
||||||
|
{ t('clearApprovalData') } |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderSeedWords () { |
||||||
|
const { t } = this.context |
||||||
|
const { history } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('revealSeedWords') }</span> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<Button |
||||||
|
type="secondary" |
||||||
|
large |
||||||
|
onClick={event => { |
||||||
|
event.preventDefault() |
||||||
|
this.context.metricsEvent({ |
||||||
|
eventOpts: { |
||||||
|
category: 'Settings', |
||||||
|
action: 'Reveal Seed Phrase', |
||||||
|
name: 'Reveal Seed Phrase', |
||||||
|
}, |
||||||
|
}) |
||||||
|
history.push(REVEAL_SEED_ROUTE) |
||||||
|
}} |
||||||
|
> |
||||||
|
{ t('revealSeedWords') } |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderPrivacyOptIn () { |
||||||
|
const { t } = this.context |
||||||
|
const { privacyMode, setPrivacyMode } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('privacyMode') }</span> |
||||||
|
<div className="settings-page__content-description"> |
||||||
|
{ t('privacyModeDescription') } |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<ToggleButton |
||||||
|
value={privacyMode} |
||||||
|
onToggle={value => setPrivacyMode(!value)} |
||||||
|
activeLabel="" |
||||||
|
inactiveLabel="" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderMetaMetricsOptIn () { |
||||||
|
const { t } = this.context |
||||||
|
const { participateInMetaMetrics, setParticipateInMetaMetrics } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__content-row"> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<span>{ t('participateInMetaMetrics') }</span> |
||||||
|
<div className="settings-page__content-description"> |
||||||
|
<span>{ t('participateInMetaMetricsDescription') }</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="settings-page__content-item"> |
||||||
|
<div className="settings-page__content-item-col"> |
||||||
|
<ToggleButton |
||||||
|
value={participateInMetaMetrics} |
||||||
|
onToggle={value => setParticipateInMetaMetrics(!value)} |
||||||
|
activeLabel="" |
||||||
|
inactiveLabel="" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderContent () { |
||||||
|
const { warning } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="settings-page__body"> |
||||||
|
{ warning && <div className="settings-tab__error">{ warning }</div> } |
||||||
|
{ this.renderPrivacyOptIn() } |
||||||
|
{ this.renderClearApproval() } |
||||||
|
{ this.renderSeedWords() } |
||||||
|
{ this.renderMetaMetricsOptIn() } |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
return this.renderContent() |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
import SecurityTab from './security-tab.component' |
||||||
|
import { compose } from 'recompose' |
||||||
|
import { connect } from 'react-redux' |
||||||
|
import { withRouter } from 'react-router-dom' |
||||||
|
import { |
||||||
|
displayWarning, |
||||||
|
revealSeedConfirmation, |
||||||
|
setFeatureFlag, |
||||||
|
showModal, |
||||||
|
setParticipateInMetaMetrics, |
||||||
|
} from '../../../store/actions' |
||||||
|
|
||||||
|
const mapStateToProps = state => { |
||||||
|
const { appState: { warning }, metamask } = state |
||||||
|
const { |
||||||
|
featureFlags: { |
||||||
|
privacyMode, |
||||||
|
} = {}, |
||||||
|
participateInMetaMetrics, |
||||||
|
} = metamask |
||||||
|
|
||||||
|
return { |
||||||
|
warning, |
||||||
|
privacyMode, |
||||||
|
participateInMetaMetrics, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => { |
||||||
|
return { |
||||||
|
displayWarning: warning => dispatch(displayWarning(warning)), |
||||||
|
revealSeedConfirmation: () => dispatch(revealSeedConfirmation()), |
||||||
|
setPrivacyMode: enabled => dispatch(setFeatureFlag('privacyMode', enabled)), |
||||||
|
showClearApprovalModal: () => dispatch(showModal({ name: 'CLEAR_APPROVED_ORIGINS' })), |
||||||
|
setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default compose( |
||||||
|
withRouter, |
||||||
|
connect(mapStateToProps, mapDispatchToProps) |
||||||
|
)(SecurityTab) |
||||||
Loading…
Reference in new issue