diff options
Diffstat (limited to 'ui')
15 files changed, 196 insertions, 0 deletions
diff --git a/ui/app/actions.js b/ui/app/actions.js index a8b9189e9..501fef76d 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -325,6 +325,9 @@ var actions = { clearPendingTokens, createCancelTransaction, + approveProviderRequest, + rejectProviderRequest, + clearApprovedOrigins, } module.exports = actions @@ -2484,3 +2487,21 @@ function setPendingTokens (pendingTokens) { payload: tokens, } } + +function approveProviderRequest (origin) { + return (dispatch) => { + background.approveProviderRequest(origin) + } +} + +function rejectProviderRequest (origin) { + return (dispatch) => { + background.rejectProviderRequest(origin) + } +} + +function clearApprovedOrigins () { + return (dispatch) => { + background.clearApprovedOrigins() + } +} diff --git a/ui/app/components/modals/clear-approved-origins/clear-approved-origins.component.js b/ui/app/components/modals/clear-approved-origins/clear-approved-origins.component.js new file mode 100644 index 000000000..ceaa20a95 --- /dev/null +++ b/ui/app/components/modals/clear-approved-origins/clear-approved-origins.component.js @@ -0,0 +1,39 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Modal, { ModalContent } from '../../modal' + +export default class ClearApprovedOrigins extends PureComponent { + static propTypes = { + hideModal: PropTypes.func.isRequired, + clearApprovedOrigins: PropTypes.func.isRequired, + } + + static contextTypes = { + t: PropTypes.func, + } + + handleClear = () => { + const { clearApprovedOrigins, hideModal } = this.props + clearApprovedOrigins() + hideModal() + } + + render () { + const { t } = this.context + + return ( + <Modal + onSubmit={this.handleClear} + onCancel={() => this.props.hideModal()} + submitText={t('ok')} + cancelText={t('nevermind')} + submitType="secondary" + > + <ModalContent + title={t('clearApprovalData')} + description={t('confirmClear')} + /> + </Modal> + ) + } +} diff --git a/ui/app/components/modals/clear-approved-origins/clear-approved-origins.container.js b/ui/app/components/modals/clear-approved-origins/clear-approved-origins.container.js new file mode 100644 index 000000000..3a801a062 --- /dev/null +++ b/ui/app/components/modals/clear-approved-origins/clear-approved-origins.container.js @@ -0,0 +1,16 @@ +import { connect } from 'react-redux' +import { compose } from 'recompose' +import withModalProps from '../../../higher-order-components/with-modal-props' +import ClearApprovedOriginsComponent from './clear-approved-origins.component' +import { clearApprovedOrigins } from '../../../actions' + +const mapDispatchToProps = dispatch => { + return { + clearApprovedOrigins: () => dispatch(clearApprovedOrigins()), + } +} + +export default compose( + withModalProps, + connect(null, mapDispatchToProps) +)(ClearApprovedOriginsComponent) diff --git a/ui/app/components/modals/clear-approved-origins/index.js b/ui/app/components/modals/clear-approved-origins/index.js new file mode 100644 index 000000000..b3e321995 --- /dev/null +++ b/ui/app/components/modals/clear-approved-origins/index.js @@ -0,0 +1 @@ +export { default } from './clear-approved-origins.container' diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 338229a28..5aff4f5e1 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -28,6 +28,7 @@ import ConfirmCustomizeGasModal from './customize-gas' import CancelTransaction from './cancel-transaction' import WelcomeBeta from './welcome-beta' import RejectTransactions from './reject-transactions' +import ClearApprovedOrigins from './clear-approved-origins' const modalContainerBaseStyle = { transform: 'translate3d(-50%, 0, 0px)', @@ -212,6 +213,19 @@ const MODALS = { }, }, + CLEAR_APPROVED_ORIGINS: { + contents: h(ClearApprovedOrigins), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + OLD_UI_NOTIFICATION_MODAL: { contents: [ h(NotifcationModal, { diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss index 6742e3082..ba1215e84 100644 --- a/ui/app/components/page-container/index.scss +++ b/ui/app/components/page-container/index.scss @@ -101,6 +101,7 @@ font-size: 2rem; font-weight: 500; line-height: 2rem; + margin-right: 1.5rem; } &__subtitle { diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js index d3c71c4f6..7b64ebc4e 100644 --- a/ui/app/components/pages/home/home.component.js +++ b/ui/app/components/pages/home/home.component.js @@ -4,6 +4,8 @@ import Media from 'react-media' import { Redirect } from 'react-router-dom' import WalletView from '../../wallet-view' import TransactionView from '../../transaction-view' +import ProviderApproval from '../provider-approval' + import { INITIALIZE_BACKUP_PHRASE_ROUTE, RESTORE_VAULT_ROUTE, @@ -21,6 +23,7 @@ export default class Home extends PureComponent { seedWords: PropTypes.string, suggestedTokens: PropTypes.object, unconfirmedTransactionsCount: PropTypes.number, + providerRequests: PropTypes.array, } componentDidMount () { @@ -46,6 +49,7 @@ export default class Home extends PureComponent { lostAccounts, forgottenPassword, seedWords, + providerRequests, } = this.props // notices @@ -62,6 +66,10 @@ export default class Home extends PureComponent { return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} /> } + if (providerRequests && providerRequests.length > 0) { + return <ProviderApproval origin={providerRequests[0].origin} /> + } + return ( <div className="main-container"> <div className="account-and-transaction-details"> diff --git a/ui/app/components/pages/home/home.container.js b/ui/app/components/pages/home/home.container.js index 58001df6b..bb8cf5e81 100644 --- a/ui/app/components/pages/home/home.container.js +++ b/ui/app/components/pages/home/home.container.js @@ -11,6 +11,7 @@ const mapStateToProps = state => { lostAccounts, seedWords, suggestedTokens, + providerRequests, } = metamask const { forgottenPassword } = appState @@ -21,6 +22,7 @@ const mapStateToProps = state => { seedWords, suggestedTokens, unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state), + providerRequests, } } diff --git a/ui/app/components/pages/provider-approval/index.js b/ui/app/components/pages/provider-approval/index.js new file mode 100644 index 000000000..4162f3155 --- /dev/null +++ b/ui/app/components/pages/provider-approval/index.js @@ -0,0 +1 @@ +export { default } from './provider-approval.container' diff --git a/ui/app/components/pages/provider-approval/provider-approval.component.js b/ui/app/components/pages/provider-approval/provider-approval.component.js new file mode 100644 index 000000000..67e8bdd4c --- /dev/null +++ b/ui/app/components/pages/provider-approval/provider-approval.component.js @@ -0,0 +1,35 @@ +import PageContainerContent from '../../page-container' +import PropTypes from 'prop-types' +import React, { Component } from 'react' + +export default class ProviderApproval extends Component { + static propTypes = { + approveProviderRequest: PropTypes.func, + origin: PropTypes.string, + rejectProviderRequest: PropTypes.func, + }; + + static contextTypes = { + t: PropTypes.func, + }; + + render () { + const { approveProviderRequest, origin, rejectProviderRequest } = this.props + return ( + <PageContainerContent + title={this.context.t('providerAPIRequest')} + subtitle={this.context.t('reviewProviderRequest')} + contentComponent={( + <div className="provider_approval_content"> + {this.context.t('providerRequestInfo')} + <div className="provider_approval_origin">{origin}</div> + </div> + )} + submitText={this.context.t('approve')} + cancelText={this.context.t('reject')} + onSubmit={() => { approveProviderRequest(origin) }} + onCancel={() => { rejectProviderRequest(origin) }} + onClose={() => { rejectProviderRequest(origin) }} /> + ) + } +} diff --git a/ui/app/components/pages/provider-approval/provider-approval.container.js b/ui/app/components/pages/provider-approval/provider-approval.container.js new file mode 100644 index 000000000..b223244a1 --- /dev/null +++ b/ui/app/components/pages/provider-approval/provider-approval.container.js @@ -0,0 +1,12 @@ +import { connect } from 'react-redux' +import ProviderApproval from './provider-approval.component' +import { approveProviderRequest, rejectProviderRequest } from '../../../actions' + +function mapDispatchToProps (dispatch) { + return { + approveProviderRequest: origin => dispatch(approveProviderRequest(origin)), + rejectProviderRequest: origin => dispatch(rejectProviderRequest(origin)), + } +} + +export default connect(null, mapDispatchToProps)(ProviderApproval) diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js index cd81491a8..21119086e 100644 --- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js +++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js @@ -45,6 +45,7 @@ export default class SettingsTab extends PureComponent { displayWarning: PropTypes.func, revealSeedConfirmation: PropTypes.func, setFeatureFlagToBeta: PropTypes.func, + showClearApprovalModal: PropTypes.func, showResetAccountConfirmationModal: PropTypes.func, warning: PropTypes.string, history: PropTypes.object, @@ -276,6 +277,36 @@ export default class SettingsTab extends PureComponent { ) } + 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 @@ -473,6 +504,7 @@ export default class SettingsTab extends PureComponent { { this.renderNewRpcUrl() } { this.renderStateLogs() } { this.renderSeedWords() } + { this.renderClearApproval() } { !isMascara && this.renderOldUI() } { this.renderResetAccount() } { this.renderBlockieOptIn() } diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js index f4110207e..2c0739a91 100644 --- a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js +++ b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js @@ -59,6 +59,7 @@ const mapDispatchToProps = dispatch => { setUseNativeCurrencyAsPrimaryCurrencyPreference: value => { return dispatch(setUseNativeCurrencyAsPrimaryCurrencyPreference(value)) }, + showClearApprovalModal: () => dispatch(showModal({ name: 'CLEAR_APPROVED_ORIGINS' })), } } diff --git a/ui/app/css/itcss/components/pages/index.scss b/ui/app/css/itcss/components/pages/index.scss index 709f8baf6..45e47f447 100644 --- a/ui/app/css/itcss/components/pages/index.scss +++ b/ui/app/css/itcss/components/pages/index.scss @@ -1 +1,3 @@ @import './reveal-seed.scss'; + +@import './provider-approval.scss'; diff --git a/ui/app/css/itcss/components/pages/provider-approval.scss b/ui/app/css/itcss/components/pages/provider-approval.scss new file mode 100644 index 000000000..f172165ab --- /dev/null +++ b/ui/app/css/itcss/components/pages/provider-approval.scss @@ -0,0 +1,11 @@ +.provider_approval_content { + height: auto; + overflow: auto; + padding: 16px; +} + +.provider_approval_origin { + font-weight: 999; + margin-top: 16px; + word-wrap: break-word; +} |