diff options
Diffstat (limited to 'ui/app/components/modals')
56 files changed, 0 insertions, 3196 deletions
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js deleted file mode 100644 index 67d8eb0fd..000000000 --- a/ui/app/components/modals/account-details-modal.js +++ /dev/null @@ -1,101 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../actions') -const AccountModalContainer = require('./account-modal-container') -const { getSelectedIdentity } = require('../../selectors') -const genAccountLink = require('../../../lib/account-link.js') -const QrView = require('../qr-code') -const EditableLabel = require('../editable-label') - -import Button from '../button' - -function mapStateToProps (state) { - return { - network: state.metamask.network, - selectedIdentity: getSelectedIdentity(state), - keyrings: state.metamask.keyrings, - } -} - -function mapDispatchToProps (dispatch) { - return { - // Is this supposed to be used somewhere? - showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), - showExportPrivateKeyModal: () => { - dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) - }, - hideModal: () => dispatch(actions.hideModal()), - setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)), - } -} - -inherits(AccountDetailsModal, Component) -function AccountDetailsModal () { - Component.call(this) -} - -AccountDetailsModal.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) - - -// Not yet pixel perfect todos: - // fonts of qr-header - -AccountDetailsModal.prototype.render = function () { - const { - selectedIdentity, - network, - showExportPrivateKeyModal, - setAccountLabel, - keyrings, - } = this.props - const { name, address } = selectedIdentity - - const keyring = keyrings.find((kr) => { - return kr.accounts.includes(address) - }) - - let exportPrivateKeyFeatureEnabled = true - // This feature is disabled for hardware wallets - if (keyring && keyring.type.search('Hardware') !== -1) { - exportPrivateKeyFeatureEnabled = false - } - - return h(AccountModalContainer, {}, [ - h(EditableLabel, { - className: 'account-modal__name', - defaultValue: name, - onSubmit: label => setAccountLabel(address, label), - }), - - h(QrView, { - Qr: { - data: address, - network: network, - }, - }), - - h('div.account-modal-divider'), - - h(Button, { - type: 'primary', - className: 'account-modal__button', - onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), - }, this.context.t('etherscanView')), - - // Holding on redesign for Export Private Key functionality - - exportPrivateKeyFeatureEnabled ? h(Button, { - type: 'primary', - className: 'account-modal__button', - onClick: () => showExportPrivateKeyModal(), - }, this.context.t('exportPrivateKey')) : null, - - ]) -} diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js deleted file mode 100644 index 2a6c655e1..000000000 --- a/ui/app/components/modals/account-modal-container.js +++ /dev/null @@ -1,80 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../actions') -const { getSelectedIdentity } = require('../../selectors') -import Identicon from '../identicon' - -function mapStateToProps (state, ownProps) { - return { - selectedIdentity: ownProps.selectedIdentity || getSelectedIdentity(state), - } -} - -function mapDispatchToProps (dispatch) { - return { - hideModal: () => { - dispatch(actions.hideModal()) - }, - } -} - -inherits(AccountModalContainer, Component) -function AccountModalContainer () { - Component.call(this) -} - -AccountModalContainer.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer) - - -AccountModalContainer.prototype.render = function () { - const { - selectedIdentity, - showBackButton = false, - backButtonAction, - } = this.props - let { children } = this.props - - if (children.constructor !== Array) { - children = [children] - } - - return h('div', { style: { borderRadius: '4px' }}, [ - h('div.account-modal-container', [ - - h('div', [ - - // Needs a border; requires changes to svg - h(Identicon, { - address: selectedIdentity.address, - diameter: 64, - style: {}, - }), - - ]), - - showBackButton && h('div.account-modal-back', { - onClick: backButtonAction, - }, [ - - h('i.fa.fa-angle-left.fa-lg'), - - h('span.account-modal-back__text', ' ' + this.context.t('back')), - - ]), - - h('div.account-modal-close', { - onClick: this.props.hideModal, - }), - - ...children, - - ]), - ]) -} diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js deleted file mode 100644 index c70510b5f..000000000 --- a/ui/app/components/modals/buy-options-modal.js +++ /dev/null @@ -1,101 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../actions') -const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util') - -function mapStateToProps (state) { - return { - network: state.metamask.network, - address: state.metamask.selectedAddress, - } -} - -function mapDispatchToProps (dispatch) { - return { - toCoinbase: (address) => { - dispatch(actions.buyEth({ network: '1', address, amount: 0 })) - }, - hideModal: () => { - dispatch(actions.hideModal()) - }, - showAccountDetailModal: () => { - dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) - }, - toFaucet: network => dispatch(actions.buyEth({ network })), - } -} - -inherits(BuyOptions, Component) -function BuyOptions () { - Component.call(this) -} - -BuyOptions.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) - - -BuyOptions.prototype.renderModalContentOption = function (title, header, onClick) { - return h('div.buy-modal-content-option', { - onClick, - }, [ - h('div.buy-modal-content-option-title', {}, title), - h('div.buy-modal-content-option-subtitle', {}, header), - ]) -} - -BuyOptions.prototype.render = function () { - const { network, toCoinbase, address, toFaucet } = this.props - const isTestNetwork = ['3', '4', '42'].find(n => n === network) - const networkName = getNetworkDisplayName(network) - - return h('div', {}, [ - h('div.buy-modal-content.transfers-subview', { - }, [ - h('div.buy-modal-content-title-wrapper.flex-column.flex-center', { - style: {}, - }, [ - h('div.buy-modal-content-title', { - style: {}, - }, this.context.t('transfers')), - h('div', {}, this.context.t('howToDeposit')), - ]), - - h('div.buy-modal-content-options.flex-column.flex-center', {}, [ - - isTestNetwork - ? this.renderModalContentOption(networkName, this.context.t('testFaucet'), () => toFaucet(network)) - : this.renderModalContentOption('Coinbase', this.context.t('depositFiat'), () => toCoinbase(address)), - - // h('div.buy-modal-content-option', {}, [ - // h('div.buy-modal-content-option-title', {}, 'Shapeshift'), - // h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), - // ]),, - - this.renderModalContentOption( - this.context.t('directDeposit'), - this.context.t('depositFromAccount'), - () => this.goToAccountDetailsModal() - ), - - ]), - - h('button', { - style: { - background: 'white', - }, - onClick: () => { this.props.hideModal() }, - }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, this.context.t('cancel'))), - ]), - ]) -} - -BuyOptions.prototype.goToAccountDetailsModal = function () { - this.props.hideModal() - this.props.showAccountDetailModal() -} diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js deleted file mode 100644 index b973f221c..000000000 --- a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js +++ /dev/null @@ -1,29 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display' -import { PRIMARY, SECONDARY } from '../../../../constants/common' - -export default class CancelTransaction extends PureComponent { - static propTypes = { - value: PropTypes.string, - } - - render () { - const { value } = this.props - - return ( - <div className="cancel-transaction-gas-fee"> - <UserPreferencedCurrencyDisplay - className="cancel-transaction-gas-fee__eth" - value={value} - type={PRIMARY} - /> - <UserPreferencedCurrencyDisplay - className="cancel-transaction-gas-fee__fiat" - value={value} - type={SECONDARY} - /> - </div> - ) - } -} diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js deleted file mode 100644 index 1a9ae2e07..000000000 --- a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './cancel-transaction-gas-fee.component' diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss deleted file mode 100644 index ce81dd448..000000000 --- a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss +++ /dev/null @@ -1,17 +0,0 @@ -.cancel-transaction-gas-fee { - background: #F1F4F9; - padding: 16px; - display: flex; - flex-direction: column; - align-items: center; - padding: 12px; - - &__eth { - font-size: 1.5rem; - font-weight: 500; - } - - &__fiat { - font-size: .75rem; - } -} diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js deleted file mode 100644 index 014815503..000000000 --- a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { shallow } from 'enzyme' -import CancelTransactionGasFee from '../cancel-transaction-gas-fee.component' -import UserPreferencedCurrencyDisplay from '../../../../user-preferenced-currency-display' - -describe('CancelTransactionGasFee Component', () => { - it('should render', () => { - const wrapper = shallow( - <CancelTransactionGasFee - value="0x3b9aca00" - /> - ) - - assert.ok(wrapper) - assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2) - const ethDisplay = wrapper.find(UserPreferencedCurrencyDisplay).at(0) - const fiatDisplay = wrapper.find(UserPreferencedCurrencyDisplay).at(1) - - assert.equal(ethDisplay.props().value, '0x3b9aca00') - assert.equal(ethDisplay.props().className, 'cancel-transaction-gas-fee__eth') - - assert.equal(fiatDisplay.props().value, '0x3b9aca00') - assert.equal(fiatDisplay.props().className, 'cancel-transaction-gas-fee__fiat') - }) -}) diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js deleted file mode 100644 index 8fd7b2679..000000000 --- a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js +++ /dev/null @@ -1,76 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Modal from '../../modal' -import CancelTransactionGasFee from './cancel-transaction-gas-fee' -import { SUBMITTED_STATUS } from '../../../constants/transactions' - -export default class CancelTransaction extends PureComponent { - static contextTypes = { - t: PropTypes.func, - } - - static propTypes = { - createCancelTransaction: PropTypes.func, - hideModal: PropTypes.func, - showTransactionConfirmedModal: PropTypes.func, - transactionStatus: PropTypes.string, - newGasFee: PropTypes.string, - } - - state = { - busy: false, - } - - componentDidUpdate () { - const { transactionStatus, showTransactionConfirmedModal } = this.props - - if (transactionStatus !== SUBMITTED_STATUS) { - showTransactionConfirmedModal() - return - } - } - - handleSubmit = async () => { - const { createCancelTransaction, hideModal } = this.props - - this.setState({ busy: true }) - - await createCancelTransaction() - this.setState({ busy: false }, () => hideModal()) - } - - handleCancel = () => { - this.props.hideModal() - } - - render () { - const { t } = this.context - const { newGasFee } = this.props - const { busy } = this.state - - return ( - <Modal - headerText={t('attemptToCancel')} - onClose={this.handleCancel} - onSubmit={this.handleSubmit} - onCancel={this.handleCancel} - submitText={t('yesLetsTry')} - cancelText={t('nevermind')} - submitType="secondary" - submitDisabled={busy} - > - <div> - <div className="cancel-transaction__title"> - { t('cancellationGasFee') } - </div> - <div className="cancel-transaction__cancel-transaction-gas-fee-container"> - <CancelTransactionGasFee value={newGasFee} /> - </div> - <div className="cancel-transaction__description"> - { t('attemptToCancelDescription') } - </div> - </div> - </Modal> - ) - } -} diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js deleted file mode 100644 index 10931a001..000000000 --- a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js +++ /dev/null @@ -1,60 +0,0 @@ -import { connect } from 'react-redux' -import { compose } from 'recompose' -import ethUtil from 'ethereumjs-util' -import { multiplyCurrencies } from '../../../conversion-util' -import withModalProps from '../../../higher-order-components/with-modal-props' -import CancelTransaction from './cancel-transaction.component' -import { showModal, createCancelTransaction } from '../../../actions' -import { getHexGasTotal } from '../../../helpers/confirm-transaction/util' - -const mapStateToProps = (state, ownProps) => { - const { metamask } = state - const { transactionId, originalGasPrice } = ownProps - const { selectedAddressTxList } = metamask - const transaction = selectedAddressTxList.find(({ id }) => id === transactionId) - const transactionStatus = transaction ? transaction.status : '' - - const defaultNewGasPrice = ethUtil.addHexPrefix( - multiplyCurrencies(originalGasPrice, 1.1, { - toNumericBase: 'hex', - multiplicandBase: 16, - multiplierBase: 10, - }) - ) - - const newGasFee = getHexGasTotal({ gasPrice: defaultNewGasPrice, gasLimit: '0x5208' }) - - return { - transactionId, - transactionStatus, - originalGasPrice, - defaultNewGasPrice, - newGasFee, - } -} - -const mapDispatchToProps = dispatch => { - return { - createCancelTransaction: (txId, customGasPrice) => { - return dispatch(createCancelTransaction(txId, customGasPrice)) - }, - showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })), - } -} - -const mergeProps = (stateProps, dispatchProps, ownProps) => { - const { transactionId, defaultNewGasPrice, ...restStateProps } = stateProps - const { createCancelTransaction, ...restDispatchProps } = dispatchProps - - return { - ...restStateProps, - ...restDispatchProps, - ...ownProps, - createCancelTransaction: () => createCancelTransaction(transactionId, defaultNewGasPrice), - } -} - -export default compose( - withModalProps, - connect(mapStateToProps, mapDispatchToProps, mergeProps), -)(CancelTransaction) diff --git a/ui/app/components/modals/cancel-transaction/index.js b/ui/app/components/modals/cancel-transaction/index.js deleted file mode 100644 index 7abc871ee..000000000 --- a/ui/app/components/modals/cancel-transaction/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './cancel-transaction.container' diff --git a/ui/app/components/modals/cancel-transaction/index.scss b/ui/app/components/modals/cancel-transaction/index.scss deleted file mode 100644 index 62e8e36fd..000000000 --- a/ui/app/components/modals/cancel-transaction/index.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import './cancel-transaction-gas-fee/index'; - -.cancel-transaction { - &__title { - font-weight: 500; - padding-bottom: 16px; - text-align: center; - } - - &__description { - text-align: center; - font-size: .875rem; - } - - &__cancel-transaction-gas-fee-container { - margin-bottom: 16px; - } -}
\ No newline at end of file diff --git a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js deleted file mode 100644 index 345951b0f..000000000 --- a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { shallow } from 'enzyme' -import sinon from 'sinon' -import CancelTransaction from '../cancel-transaction.component' -import CancelTransactionGasFee from '../cancel-transaction-gas-fee' -import Modal from '../../../modal' - -describe('CancelTransaction Component', () => { - const t = key => key - - it('should render a CancelTransaction modal', () => { - const wrapper = shallow( - <CancelTransaction - newGasFee="0x1319718a5000" - />, - { context: { t }} - ) - - assert.ok(wrapper) - assert.equal(wrapper.find(Modal).length, 1) - assert.equal(wrapper.find(CancelTransactionGasFee).length, 1) - assert.equal(wrapper.find(CancelTransactionGasFee).props().value, '0x1319718a5000') - assert.equal(wrapper.find('.cancel-transaction__title').text(), 'cancellationGasFee') - assert.equal(wrapper.find('.cancel-transaction__description').text(), 'attemptToCancelDescription') - }) - - it('should pass the correct props to the Modal component', async () => { - const createCancelTransactionSpy = sinon.stub().callsFake(() => Promise.resolve()) - const hideModalSpy = sinon.spy() - - const wrapper = shallow( - <CancelTransaction - defaultNewGasPrice="0x3b9aca00" - createCancelTransaction={createCancelTransactionSpy} - hideModal={hideModalSpy} - showTransactionConfirmedModal={() => {}} - />, - { context: { t }} - ) - - assert.equal(wrapper.find(Modal).length, 1) - const modalProps = wrapper.find(Modal).props() - - assert.equal(modalProps.headerText, 'attemptToCancel') - assert.equal(modalProps.submitText, 'yesLetsTry') - assert.equal(modalProps.cancelText, 'nevermind') - - assert.equal(createCancelTransactionSpy.callCount, 0) - assert.equal(hideModalSpy.callCount, 0) - await modalProps.onSubmit() - assert.equal(createCancelTransactionSpy.callCount, 1) - assert.equal(hideModalSpy.callCount, 1) - modalProps.onCancel() - assert.equal(hideModalSpy.callCount, 2) - }) -}) 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 deleted file mode 100644 index ceaa20a95..000000000 --- a/ui/app/components/modals/clear-approved-origins/clear-approved-origins.component.js +++ /dev/null @@ -1,39 +0,0 @@ -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 deleted file mode 100644 index 3a801a062..000000000 --- a/ui/app/components/modals/clear-approved-origins/clear-approved-origins.container.js +++ /dev/null @@ -1,16 +0,0 @@ -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 deleted file mode 100644 index b3e321995..000000000 --- a/ui/app/components/modals/clear-approved-origins/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './clear-approved-origins.container' diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js deleted file mode 100644 index 195c55421..000000000 --- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js +++ /dev/null @@ -1,89 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import Modal from '../../modal' -import { addressSummary } from '../../../util' -import Identicon from '../../identicon' -import genAccountLink from '../../../../lib/account-link' - -export default class ConfirmRemoveAccount extends Component { - static propTypes = { - hideModal: PropTypes.func.isRequired, - removeAccount: PropTypes.func.isRequired, - identity: PropTypes.object.isRequired, - network: PropTypes.string.isRequired, - } - - static contextTypes = { - t: PropTypes.func, - } - - handleRemove = () => { - this.props.removeAccount(this.props.identity.address) - .then(() => this.props.hideModal()) - } - - handleCancel = () => { - this.props.hideModal() - } - - renderSelectedAccount () { - const { identity } = this.props - return ( - <div className="confirm-remove-account__account"> - <div className="confirm-remove-account__account__identicon"> - <Identicon - address={identity.address} - diameter={32} - /> - </div> - <div className="confirm-remove-account__account__name"> - <span className="confirm-remove-account__account__label">Name</span> - <span className="account_value">{identity.name}</span> - </div> - <div className="confirm-remove-account__account__address"> - <span className="confirm-remove-account__account__label">Public Address</span> - <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span> - </div> - <div className="confirm-remove-account__account__link"> - <a - className="" - href={genAccountLink(identity.address, this.props.network)} - target={'_blank'} - title={this.context.t('etherscanView')} - > - <img src="images/popout.svg" /> - </a> - </div> - </div> - ) - } - - render () { - const { t } = this.context - - return ( - <Modal - headerText={`${t('removeAccount')}?`} - onClose={this.handleCancel} - onSubmit={this.handleRemove} - onCancel={this.handleCancel} - submitText={t('remove')} - cancelText={t('nevermind')} - submitType="secondary" - > - <div> - { this.renderSelectedAccount() } - <div className="confirm-remove-account__description"> - { t('removeAccountDescription') } - <a - className="confirm-remove-account__link" - rel="noopener noreferrer" - target="_blank" href="https://metamask.zendesk.com/hc/en-us/articles/360015289932"> - { t('learnMore') } - </a> - </div> - </div> - </Modal> - ) - } -} diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js deleted file mode 100644 index 45c6654ab..000000000 --- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js +++ /dev/null @@ -1,22 +0,0 @@ -import { connect } from 'react-redux' -import { compose } from 'recompose' -import ConfirmRemoveAccount from './confirm-remove-account.component' -import withModalProps from '../../../higher-order-components/with-modal-props' -import { removeAccount } from '../../../actions' - -const mapStateToProps = state => { - return { - network: state.metamask.network, - } -} - -const mapDispatchToProps = dispatch => { - return { - removeAccount: (address) => dispatch(removeAccount(address)), - } -} - -export default compose( - withModalProps, - connect(mapStateToProps, mapDispatchToProps) -)(ConfirmRemoveAccount) diff --git a/ui/app/components/modals/confirm-remove-account/index.js b/ui/app/components/modals/confirm-remove-account/index.js deleted file mode 100644 index ecb5f7790..000000000 --- a/ui/app/components/modals/confirm-remove-account/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './confirm-remove-account.container' diff --git a/ui/app/components/modals/confirm-remove-account/index.scss b/ui/app/components/modals/confirm-remove-account/index.scss deleted file mode 100644 index 3be3a1967..000000000 --- a/ui/app/components/modals/confirm-remove-account/index.scss +++ /dev/null @@ -1,58 +0,0 @@ -.confirm-remove-account { - &__description { - text-align: center; - font-size: .875rem; - } - - &__account { - border: 1px solid #b7b7b7; - border-radius: 4px; - padding: 10px; - display: flex; - margin-top: 10px; - margin-bottom: 20px; - width: 100%; - - &__identicon { - margin-right: 10px; - } - - &__name, - &__address { - margin-right: 10px; - font-size: 14px; - } - - &__name { - width: 100px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &__label { - font-size: 11px; - display: block; - color: #9b9b9b; - } - - &__link { - margin-top: 14px; - - img { - width: 15px; - height: 15px; - } - } - - @media screen and (max-width: 575px) { - &__name { - width: 90px; - } - } - } - - &__link { - color: #2f9ae0; - } -}
\ No newline at end of file diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js deleted file mode 100644 index f1a4542ac..000000000 --- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Modal, { ModalContent } from '../../modal' - -export default class ConfirmResetAccount extends PureComponent { - static propTypes = { - hideModal: PropTypes.func.isRequired, - resetAccount: PropTypes.func.isRequired, - } - - static contextTypes = { - t: PropTypes.func, - } - - handleReset = () => { - this.props.resetAccount() - .then(() => this.props.hideModal()) - } - - render () { - const { t } = this.context - - return ( - <Modal - onSubmit={this.handleReset} - onCancel={() => this.props.hideModal()} - submitText={t('reset')} - cancelText={t('nevermind')} - submitType="secondary" - > - <ModalContent - title={`${t('resetAccount')}?`} - description={t('resetAccountDescription')} - /> - </Modal> - ) - } -} diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js deleted file mode 100644 index c8a7b8478..000000000 --- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js +++ /dev/null @@ -1,16 +0,0 @@ -import { connect } from 'react-redux' -import { compose } from 'recompose' -import withModalProps from '../../../higher-order-components/with-modal-props' -import ConfirmResetAccount from './confirm-reset-account.component' -import { resetAccount } from '../../../actions' - -const mapDispatchToProps = dispatch => { - return { - resetAccount: () => dispatch(resetAccount()), - } -} - -export default compose( - withModalProps, - connect(null, mapDispatchToProps) -)(ConfirmResetAccount) diff --git a/ui/app/components/modals/confirm-reset-account/index.js b/ui/app/components/modals/confirm-reset-account/index.js deleted file mode 100644 index ca4d9c5bf..000000000 --- a/ui/app/components/modals/confirm-reset-account/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './confirm-reset-account.container' diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js deleted file mode 100644 index 4e2e20660..000000000 --- a/ui/app/components/modals/customize-gas/customize-gas.component.js +++ /dev/null @@ -1,162 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import BigNumber from 'bignumber.js' -import GasModalCard from '../../customize-gas-modal/gas-modal-card' -import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants' -import Button from '../../button' - -import { - getDecimalGasLimit, - getDecimalGasPrice, - getPrefixedHexGasLimit, - getPrefixedHexGasPrice, -} from './customize-gas.util' - -export default class CustomizeGas extends Component { - static contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, - } - - static propTypes = { - txData: PropTypes.object.isRequired, - hideModal: PropTypes.func, - validate: PropTypes.func, - onSubmit: PropTypes.func, - } - - state = { - gasPrice: 0, - gasLimit: 0, - originalGasPrice: 0, - originalGasLimit: 0, - } - - componentDidMount () { - const { txData = {} } = this.props - const { txParams: { gas: hexGasLimit, gasPrice: hexGasPrice } = {} } = txData - - const gasLimit = getDecimalGasLimit(hexGasLimit) - const gasPrice = getDecimalGasPrice(hexGasPrice) - - this.setState({ - gasPrice, - gasLimit, - originalGasPrice: gasPrice, - originalGasLimit: gasLimit, - }) - } - - handleRevert () { - const { originalGasPrice, originalGasLimit } = this.state - - this.setState({ - gasPrice: originalGasPrice, - gasLimit: originalGasLimit, - }) - } - - handleSave () { - const { onSubmit, hideModal } = this.props - const { gasLimit, gasPrice } = this.state - const prefixedHexGasPrice = getPrefixedHexGasPrice(gasPrice) - const prefixedHexGasLimit = getPrefixedHexGasLimit(gasLimit) - - Promise.resolve(onSubmit({ gasPrice: prefixedHexGasPrice, gasLimit: prefixedHexGasLimit })) - .then(() => hideModal()) - } - - validate () { - const { gasLimit, gasPrice } = this.state - return this.props.validate({ - gasPrice: getPrefixedHexGasPrice(gasPrice), - gasLimit: getPrefixedHexGasLimit(gasLimit), - }) - } - - render () { - const { t, metricsEvent } = this.context - const { hideModal } = this.props - const { gasPrice, gasLimit, originalGasPrice, originalGasLimit } = this.state - const { valid, errorKey } = this.validate() - - return ( - <div className="customize-gas"> - <div className="customize-gas__content"> - <div className="customize-gas__header"> - <div className="customize-gas__title"> - { this.context.t('customGas') } - </div> - <div - className="customize-gas__close" - onClick={() => hideModal()} - /> - </div> - <div className="customize-gas__body"> - <GasModalCard - value={gasPrice} - min={MIN_GAS_PRICE_GWEI} - step={1} - onChange={value => this.setState({ gasPrice: value })} - title={t('gasPrice')} - copy={t('gasPriceCalculation')} - /> - <GasModalCard - value={gasLimit} - min={1} - step={1} - onChange={value => this.setState({ gasLimit: value })} - title={t('gasLimit')} - copy={t('gasLimitCalculation')} - /> - </div> - <div className="customize-gas__footer"> - { !valid && <div className="customize-gas__error-message">{ t(errorKey) }</div> } - <div - className="customize-gas__revert" - onClick={() => this.handleRevert()} - > - { t('revert') } - </div> - <div className="customize-gas__buttons"> - <Button - type="default" - className="customize-gas__cancel" - onClick={() => hideModal()} - style={{ marginRight: '10px' }} - > - { t('cancel') } - </Button> - <Button - type="primary" - className="customize-gas__save" - onClick={() => { - metricsEvent({ - eventOpts: { - category: 'Activation', - action: 'userCloses', - name: 'closeCustomizeGas', - }, - pageOpts: { - section: 'customizeGasModal', - component: 'customizeGasSaveButton', - }, - customVariables: { - gasPriceChange: (new BigNumber(gasPrice)).minus(new BigNumber(originalGasPrice)).toString(10), - gasLimitChange: (new BigNumber(gasLimit)).minus(new BigNumber(originalGasLimit)).toString(10), - }, - }) - this.handleSave() - }} - style={{ marginRight: '10px' }} - disabled={!valid} - > - { t('save') } - </Button> - </div> - </div> - </div> - </div> - ) - } -} diff --git a/ui/app/components/modals/customize-gas/customize-gas.container.js b/ui/app/components/modals/customize-gas/customize-gas.container.js deleted file mode 100644 index 46a799795..000000000 --- a/ui/app/components/modals/customize-gas/customize-gas.container.js +++ /dev/null @@ -1,22 +0,0 @@ -import { connect } from 'react-redux' -import CustomizeGas from './customize-gas.component' -import { hideModal } from '../../../actions' - -const mapStateToProps = state => { - const { appState: { modal: { modalState: { props } } } } = state - const { txData, onSubmit, validate } = props - - return { - txData, - onSubmit, - validate, - } -} - -const mapDispatchToProps = dispatch => { - return { - hideModal: () => dispatch(hideModal()), - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(CustomizeGas) diff --git a/ui/app/components/modals/customize-gas/customize-gas.util.js b/ui/app/components/modals/customize-gas/customize-gas.util.js deleted file mode 100644 index 6ba4a7705..000000000 --- a/ui/app/components/modals/customize-gas/customize-gas.util.js +++ /dev/null @@ -1,34 +0,0 @@ -import ethUtil from 'ethereumjs-util' -import { conversionUtil } from '../../../conversion-util' - -export function getDecimalGasLimit (hexGasLimit) { - return conversionUtil(hexGasLimit, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - }) -} - -export function getDecimalGasPrice (hexGasPrice) { - return conversionUtil(hexGasPrice, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - fromDenomination: 'WEI', - toDenomination: 'GWEI', - }) -} - -export function getPrefixedHexGasLimit (gasLimit) { - return ethUtil.addHexPrefix(conversionUtil(gasLimit, { - fromNumericBase: 'dec', - toNumericBase: 'hex', - })) -} - -export function getPrefixedHexGasPrice (gasPrice) { - return ethUtil.addHexPrefix(conversionUtil(gasPrice, { - fromNumericBase: 'dec', - toNumericBase: 'hex', - fromDenomination: 'GWEI', - toDenomination: 'WEI', - })) -} diff --git a/ui/app/components/modals/customize-gas/index.js b/ui/app/components/modals/customize-gas/index.js deleted file mode 100644 index 3a0ab7edc..000000000 --- a/ui/app/components/modals/customize-gas/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './customize-gas.container' diff --git a/ui/app/components/modals/customize-gas/index.scss b/ui/app/components/modals/customize-gas/index.scss deleted file mode 100644 index e10452691..000000000 --- a/ui/app/components/modals/customize-gas/index.scss +++ /dev/null @@ -1,110 +0,0 @@ -.customize-gas { - border: 1px solid #D8D8D8; - border-radius: 4px; - background-color: #FFFFFF; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14); - font-family: Roboto; - display: flex; - flex-flow: column; - - @media screen and (max-width: $break-small) { - width: 100vw; - height: 100vh; - } - - &__header { - height: 52px; - border-bottom: 1px solid $alto; - display: flex; - align-items: center; - justify-content: space-between; - font-size: 22px; - - @media screen and (max-width: $break-small) { - flex: 0 0 auto; - } - } - - &__title { - margin-left: 19.25px; - } - - &__close::after { - content: '\00D7'; - font-size: 1.8em; - color: $dusty-gray; - font-family: sans-serif; - cursor: pointer; - margin-right: 19.25px; - } - - &__content { - display: flex; - flex-flow: column nowrap; - height: 100%; - } - - &__body { - display: flex; - margin-bottom: 24px; - - @media screen and (max-width: $break-small) { - flex-flow: column; - flex: 1 1 auto; - } - } - - &__footer { - height: 75px; - border-top: 1px solid $alto; - display: flex; - align-items: center; - justify-content: space-between; - font-size: 22px; - position: relative; - - @media screen and (max-width: $break-small) { - flex: 0 0 auto; - } - } - - &__buttons { - display: flex; - justify-content: space-between; - margin-right: 21.25px; - } - - &__revert, &__cancel, &__save, &__save__error { - display: flex; - justify-content: center; - align-items: center; - padding: 0 3px; - cursor: pointer; - } - - &__revert { - color: $silver-chalice; - font-size: 16px; - margin-left: 21.25px; - } - - &__cancel, &__save, &__save__error { - width: 85.74px; - min-width: initial; - } - - &__save__error { - opacity: 0.5; - cursor: auto; - } - - &__error-message { - display: block; - position: absolute; - top: 4px; - right: 4px; - font-size: 12px; - line-height: 12px; - color: $red; - } -} diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js deleted file mode 100644 index 09137d39a..000000000 --- a/ui/app/components/modals/deposit-ether-modal.js +++ /dev/null @@ -1,220 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../actions') -const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util') -const ShapeshiftForm = require('../shapeshift-form') - -import Button from '../button' - -let DIRECT_DEPOSIT_ROW_TITLE -let DIRECT_DEPOSIT_ROW_TEXT -let COINBASE_ROW_TITLE -let COINBASE_ROW_TEXT -let SHAPESHIFT_ROW_TITLE -let SHAPESHIFT_ROW_TEXT -let FAUCET_ROW_TITLE - -function mapStateToProps (state) { - return { - network: state.metamask.network, - address: state.metamask.selectedAddress, - } -} - -function mapDispatchToProps (dispatch) { - return { - toCoinbase: (address) => { - dispatch(actions.buyEth({ network: '1', address, amount: 0 })) - }, - hideModal: () => { - dispatch(actions.hideModal()) - }, - hideWarning: () => { - dispatch(actions.hideWarning()) - }, - showAccountDetailModal: () => { - dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) - }, - toFaucet: network => dispatch(actions.buyEth({ network })), - } -} - -inherits(DepositEtherModal, Component) -function DepositEtherModal (props, context) { - Component.call(this) - - // need to set after i18n locale has loaded - DIRECT_DEPOSIT_ROW_TITLE = context.t('directDepositEther') - DIRECT_DEPOSIT_ROW_TEXT = context.t('directDepositEtherExplainer') - COINBASE_ROW_TITLE = context.t('buyCoinbase') - COINBASE_ROW_TEXT = context.t('buyCoinbaseExplainer') - SHAPESHIFT_ROW_TITLE = context.t('depositShapeShift') - SHAPESHIFT_ROW_TEXT = context.t('depositShapeShiftExplainer') - FAUCET_ROW_TITLE = context.t('testFaucet') - - this.state = { - buyingWithShapeshift: false, - } -} - -DepositEtherModal.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal) - - -DepositEtherModal.prototype.facuetRowText = function (networkName) { - return this.context.t('getEtherFromFaucet', [networkName]) -} - -DepositEtherModal.prototype.renderRow = function ({ - logo, - title, - text, - buttonLabel, - onButtonClick, - hide, - className, - hideButton, - hideTitle, - onBackClick, - showBackButton, -}) { - if (hide) { - return null - } - - return h('div', { - className: className || 'deposit-ether-modal__buy-row', - }, [ - - onBackClick && showBackButton && h('div.deposit-ether-modal__buy-row__back', { - onClick: onBackClick, - }, [ - - h('i.fa.fa-arrow-left.cursor-pointer'), - - ]), - - h('div.deposit-ether-modal__buy-row__logo-container', [logo]), - - h('div.deposit-ether-modal__buy-row__description', [ - - !hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]), - - h('div.deposit-ether-modal__buy-row__description__text', [text]), - - ]), - - !hideButton && h('div.deposit-ether-modal__buy-row__button', [ - h(Button, { - type: 'primary', - className: 'deposit-ether-modal__deposit-button', - large: true, - onClick: onButtonClick, - }, [buttonLabel]), - ]), - - ]) -} - -DepositEtherModal.prototype.render = function () { - const { network, toCoinbase, address, toFaucet } = this.props - const { buyingWithShapeshift } = this.state - - const isTestNetwork = ['3', '4', '42'].find(n => n === network) - const networkName = getNetworkDisplayName(network) - - return h('div.page-container.page-container--full-width.page-container--full-height', {}, [ - - h('div.page-container__header', [ - - h('div.page-container__title', [this.context.t('depositEther')]), - - h('div.page-container__subtitle', [ - this.context.t('needEtherInWallet'), - ]), - - h('div.page-container__header-close', { - onClick: () => { - this.setState({ buyingWithShapeshift: false }) - this.props.hideWarning() - this.props.hideModal() - }, - }), - - ]), - - h('.page-container__content', {}, [ - - h('div.deposit-ether-modal__buy-rows', [ - - this.renderRow({ - logo: h('img.deposit-ether-modal__logo', { - src: './images/deposit-eth.svg', - }), - title: DIRECT_DEPOSIT_ROW_TITLE, - text: DIRECT_DEPOSIT_ROW_TEXT, - buttonLabel: this.context.t('viewAccount'), - onButtonClick: () => this.goToAccountDetailsModal(), - hide: buyingWithShapeshift, - }), - - this.renderRow({ - logo: h('i.fa.fa-tint.fa-2x'), - title: FAUCET_ROW_TITLE, - text: this.facuetRowText(networkName), - buttonLabel: this.context.t('getEther'), - onButtonClick: () => toFaucet(network), - hide: !isTestNetwork || buyingWithShapeshift, - }), - - this.renderRow({ - logo: h('div.deposit-ether-modal__logo', { - style: { - backgroundImage: 'url(\'./images/coinbase logo.png\')', - height: '40px', - }, - }), - title: COINBASE_ROW_TITLE, - text: COINBASE_ROW_TEXT, - buttonLabel: this.context.t('continueToCoinbase'), - onButtonClick: () => toCoinbase(address), - hide: isTestNetwork || buyingWithShapeshift, - }), - - this.renderRow({ - logo: h('div.deposit-ether-modal__logo', { - style: { - backgroundImage: 'url(\'./images/shapeshift logo.png\')', - }, - }), - title: SHAPESHIFT_ROW_TITLE, - text: SHAPESHIFT_ROW_TEXT, - buttonLabel: this.context.t('shapeshiftBuy'), - onButtonClick: () => this.setState({ buyingWithShapeshift: true }), - hide: isTestNetwork, - hideButton: buyingWithShapeshift, - hideTitle: buyingWithShapeshift, - onBackClick: () => this.setState({ buyingWithShapeshift: false }), - showBackButton: this.state.buyingWithShapeshift, - className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', - }), - - buyingWithShapeshift && h(ShapeshiftForm), - - ]), - - ]), - ]) -} - -DepositEtherModal.prototype.goToAccountDetailsModal = function () { - this.props.hideWarning() - this.props.hideModal() - this.props.showAccountDetailModal() -} diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js deleted file mode 100644 index edced8725..000000000 --- a/ui/app/components/modals/edit-account-name-modal.js +++ /dev/null @@ -1,83 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../actions') -const { getSelectedAccount } = require('../../selectors') - -function mapStateToProps (state) { - return { - selectedAccount: getSelectedAccount(state), - identity: state.appState.modal.modalState.props.identity, - } -} - -function mapDispatchToProps (dispatch) { - return { - hideModal: () => { - dispatch(actions.hideModal()) - }, - setAccountLabel: (account, label) => { - dispatch(actions.setAccountLabel(account, label)) - }, - } -} - -inherits(EditAccountNameModal, Component) -function EditAccountNameModal (props) { - Component.call(this) - - this.state = { - inputText: props.identity.name, - } -} - -EditAccountNameModal.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal) - - -EditAccountNameModal.prototype.render = function () { - const { hideModal, setAccountLabel, identity } = this.props - - return h('div', {}, [ - h('div.flex-column.edit-account-name-modal-content', { - }, [ - - h('div.edit-account-name-modal-cancel', { - onClick: () => { - hideModal() - }, - }, [ - h('i.fa.fa-times'), - ]), - - h('div.edit-account-name-modal-title', { - }, [this.context.t('editAccountName')]), - - h('input.edit-account-name-modal-input', { - placeholder: identity.name, - onChange: (event) => { - this.setState({ inputText: event.target.value }) - }, - value: this.state.inputText, - }, []), - - h('button.btn-clear.edit-account-name-modal-save-button.allcaps', { - onClick: () => { - if (this.state.inputText.length !== 0) { - setAccountLabel(identity.address, this.state.inputText) - hideModal() - } - }, - disabled: this.state.inputText.length === 0, - }, [ - this.context.t('save'), - ]), - - ]), - ]) -} diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js deleted file mode 100644 index d3e3c9a56..000000000 --- a/ui/app/components/modals/export-private-key-modal.js +++ /dev/null @@ -1,177 +0,0 @@ -const log = require('loglevel') -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const { stripHexPrefix } = require('ethereumjs-util') -const actions = require('../../actions') -const AccountModalContainer = require('./account-modal-container') -const { getSelectedIdentity } = require('../../selectors') -const ReadOnlyInput = require('../readonly-input') -const copyToClipboard = require('copy-to-clipboard') -const { checksumAddress } = require('../../util') -import Button from '../button' - -function mapStateToPropsFactory () { - let selectedIdentity = null - return function mapStateToProps (state) { - // We should **not** change the identity displayed here even if it changes from underneath us. - // If we do, we will be showing the user one private key and a **different** address and name. - // Note that the selected identity **will** change from underneath us when we unlock the keyring - // which is the expected behavior that we are side-stepping. - selectedIdentity = selectedIdentity || getSelectedIdentity(state) - return { - warning: state.appState.warning, - privateKey: state.appState.accountDetail.privateKey, - network: state.metamask.network, - selectedIdentity, - previousModalState: state.appState.modal.previousModalState.name, - } - } -} - -function mapDispatchToProps (dispatch) { - return { - exportAccount: (password, address) => { - return dispatch(actions.exportAccount(password, address)) - .then((res) => { - dispatch(actions.hideWarning()) - return res - }) - }, - showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })), - hideModal: () => dispatch(actions.hideModal()), - } -} - -inherits(ExportPrivateKeyModal, Component) -function ExportPrivateKeyModal () { - Component.call(this) - - this.state = { - password: '', - privateKey: null, - showWarning: true, - } -} - -ExportPrivateKeyModal.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToPropsFactory, mapDispatchToProps)(ExportPrivateKeyModal) - - -ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) { - const { exportAccount } = this.props - - exportAccount(password, address) - .then(privateKey => this.setState({ - privateKey, - showWarning: false, - })) - .catch((e) => log.error(e)) -} - -ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) { - return h('span.private-key-password-label', privateKey - ? this.context.t('copyPrivateKey') - : this.context.t('typePassword') - ) -} - -ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) { - const plainKey = privateKey && stripHexPrefix(privateKey) - - return privateKey - ? h(ReadOnlyInput, { - wrapperClass: 'private-key-password-display-wrapper', - inputClass: 'private-key-password-display-textarea', - textarea: true, - value: plainKey, - onClick: () => copyToClipboard(plainKey), - }) - : h('input.private-key-password-input', { - type: 'password', - onChange: event => this.setState({ password: event.target.value }), - }) -} - -ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) { - return h('div.export-private-key-buttons', {}, [ - !privateKey && h(Button, { - type: 'default', - large: true, - className: 'export-private-key__button export-private-key__button--cancel', - onClick: () => hideModal(), - }, this.context.t('cancel')), - - (privateKey - ? ( - h(Button, { - type: 'primary', - large: true, - className: 'export-private-key__button', - onClick: () => hideModal(), - }, this.context.t('done')) - ) : ( - h(Button, { - type: 'primary', - large: true, - className: 'export-private-key__button', - onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address), - }, this.context.t('confirm')) - ) - ), - - ]) -} - -ExportPrivateKeyModal.prototype.render = function () { - const { - selectedIdentity, - warning, - showAccountDetailModal, - hideModal, - previousModalState, - } = this.props - const { name, address } = selectedIdentity - - const { - privateKey, - showWarning, - } = this.state - - return h(AccountModalContainer, { - selectedIdentity, - showBackButton: previousModalState === 'ACCOUNT_DETAILS', - backButtonAction: () => showAccountDetailModal(), - }, [ - - h('span.account-name', name), - - h(ReadOnlyInput, { - wrapperClass: 'ellip-address-wrapper', - inputClass: 'qr-ellip-address ellip-address', - value: checksumAddress(address), - }), - - h('div.account-modal-divider'), - - h('span.modal-body-title', this.context.t('showPrivateKeys')), - - h('div.private-key-password', {}, [ - this.renderPasswordLabel(privateKey), - - this.renderPasswordInput(privateKey), - - showWarning && warning ? h('span.private-key-password-error', warning) : null, - ]), - - h('div.private-key-password-warning', this.context.t('privateKeyWarning')), - - this.renderButtons(privateKey, this.state.password, address, hideModal), - - ]) -} diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js deleted file mode 100644 index 43f3009a5..000000000 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ /dev/null @@ -1,83 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../actions') -import Identicon from '../identicon' - -function mapStateToProps (state) { - return { - network: state.metamask.network, - token: state.appState.modal.modalState.props.token, - assetImages: state.metamask.assetImages, - } -} - -function mapDispatchToProps (dispatch) { - return { - hideModal: () => dispatch(actions.hideModal()), - hideToken: address => { - dispatch(actions.removeToken(address)) - .then(() => { - dispatch(actions.hideModal()) - }) - }, - } -} - -inherits(HideTokenConfirmationModal, Component) -function HideTokenConfirmationModal () { - Component.call(this) - - this.state = {} -} - -HideTokenConfirmationModal.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal) - - -HideTokenConfirmationModal.prototype.render = function () { - const { token, network, hideToken, hideModal, assetImages } = this.props - const { symbol, address } = token - const image = assetImages[address] - - return h('div.hide-token-confirmation', {}, [ - h('div.hide-token-confirmation__container', { - }, [ - h('div.hide-token-confirmation__title', {}, [ - this.context.t('hideTokenPrompt'), - ]), - - h(Identicon, { - className: 'hide-token-confirmation__identicon', - diameter: 45, - address, - network, - image, - }), - - h('div.hide-token-confirmation__symbol', {}, symbol), - - h('div.hide-token-confirmation__copy', {}, [ - this.context.t('readdToken'), - ]), - - h('div.hide-token-confirmation__buttons', {}, [ - h('button.btn-cancel.hide-token-confirmation__button.allcaps', { - onClick: () => hideModal(), - }, [ - this.context.t('cancel'), - ]), - h('button.btn-clear.hide-token-confirmation__button.allcaps', { - onClick: () => hideToken(address), - }, [ - this.context.t('hide'), - ]), - ]), - ]), - ]) -} diff --git a/ui/app/components/modals/index.js b/ui/app/components/modals/index.js deleted file mode 100644 index 1db1d33d4..000000000 --- a/ui/app/components/modals/index.js +++ /dev/null @@ -1,5 +0,0 @@ -const Modal = require('./modal') - -module.exports = { - Modal, -} diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss deleted file mode 100644 index 555da87ef..000000000 --- a/ui/app/components/modals/index.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import './cancel-transaction/index'; - -@import './confirm-remove-account/index'; - -@import './customize-gas/index'; - -@import './qr-scanner/index'; - -@import './transaction-confirmed/index'; - -@import './metametrics-opt-in-modal/index'; diff --git a/ui/app/components/modals/loading-network-error/index.js b/ui/app/components/modals/loading-network-error/index.js deleted file mode 100644 index b3737458a..000000000 --- a/ui/app/components/modals/loading-network-error/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './loading-network-error.container' diff --git a/ui/app/components/modals/loading-network-error/loading-network-error.component.js b/ui/app/components/modals/loading-network-error/loading-network-error.component.js deleted file mode 100644 index 44f71e4b2..000000000 --- a/ui/app/components/modals/loading-network-error/loading-network-error.component.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Modal, { ModalContent } from '../../modal' - -const LoadingNetworkError = (props, context) => { - const { t } = context - const { hideModal } = props - - return ( - <Modal - onSubmit={() => hideModal()} - submitText={t('tryAgain')} - > - <ModalContent - description={'Oops! Something went wrong.'} - /> - </Modal> - ) -} - -LoadingNetworkError.contextTypes = { - t: PropTypes.func, -} - -LoadingNetworkError.propTypes = { - hideModal: PropTypes.func, -} - -export default LoadingNetworkError diff --git a/ui/app/components/modals/loading-network-error/loading-network-error.container.js b/ui/app/components/modals/loading-network-error/loading-network-error.container.js deleted file mode 100644 index 3fcba20aa..000000000 --- a/ui/app/components/modals/loading-network-error/loading-network-error.container.js +++ /dev/null @@ -1,4 +0,0 @@ -import LoadingNetworkError from './loading-network-error.component' -import withModalProps from '../../../higher-order-components/with-modal-props' - -export default withModalProps(LoadingNetworkError) diff --git a/ui/app/components/modals/metametrics-opt-in-modal/index.js b/ui/app/components/modals/metametrics-opt-in-modal/index.js deleted file mode 100644 index 47f946757..000000000 --- a/ui/app/components/modals/metametrics-opt-in-modal/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './metametrics-opt-in-modal.container' diff --git a/ui/app/components/modals/metametrics-opt-in-modal/index.scss b/ui/app/components/modals/metametrics-opt-in-modal/index.scss deleted file mode 100644 index 88b6d7a4d..000000000 --- a/ui/app/components/modals/metametrics-opt-in-modal/index.scss +++ /dev/null @@ -1,30 +0,0 @@ -.metametrics-opt-in-modal { - .metametrics-opt-in__main { - justify-content: center; - margin-left: 3%; - margin-right: 0%; - max-height: 75vh; - - @media screen and (max-width: 575px) { - max-height: 100vh; - } - } - - - .metametrics-opt-in__title { - font-size: 38px; - } - - .metametrics-opt-in__content { - padding-right: 6px; - } - - .metametrics-opt-in__footer { - @media screen and (max-width: 575px) { - margin-top: 10px; - justify-content: center; - margin-left: 2%; - max-height: 520px; - } - } -}
\ No newline at end of file diff --git a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js deleted file mode 100644 index 1a224eb12..000000000 --- a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js +++ /dev/null @@ -1,141 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import PageContainerFooter from '../../page-container/page-container-footer' - -export default class MetaMetricsOptInModal extends Component { - static propTypes = { - setParticipateInMetaMetrics: PropTypes.func, - hideModal: PropTypes.func, - } - - static contextTypes = { - metricsEvent: PropTypes.func, - } - - render () { - const { metricsEvent } = this.context - const { setParticipateInMetaMetrics, hideModal } = this.props - - return ( - <div className="metametrics-opt-in metametrics-opt-in-modal"> - <div className="metametrics-opt-in__main"> - <div className="metametrics-opt-in__content"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> - <div className="metametrics-opt-in__body-graphic"> - <img src="images/metrics-chart.svg" /> - </div> - <div className="metametrics-opt-in__title">Help Us Improve MetaMask</div> - <div className="metametrics-opt-in__body"> - <div className="metametrics-opt-in__description"> - MetaMask would like to gather usage data to better understand how our users interact with the extension. This data - will be used to continually improve the usability and user experience of our product and the Ethereum ecosystem. - </div> - <div className="metametrics-opt-in__description"> - MetaMask will.. - </div> - - <div className="metametrics-opt-in__committments"> - <div className="metametrics-opt-in__row"> - <i className="fa fa-check" /> - <div className="metametrics-opt-in__row-description"> - Always allow you to opt-out via Settings - </div> - </div> - <div className="metametrics-opt-in__row"> - <i className="fa fa-check" /> - <div className="metametrics-opt-in__row-description"> - Send anonymized click & pageview events - </div> - </div> - <div className="metametrics-opt-in__row"> - <i className="fa fa-check" /> - <div className="metametrics-opt-in__row-description"> - Maintain a public aggregate dashboard to educate the community - </div> - </div> - <div className="metametrics-opt-in__row metametrics-opt-in__break-row"> - <i className="fa fa-times" /> - <div className="metametrics-opt-in__row-description"> - <span className="metametrics-opt-in__bold">Never</span> collect keys, addresses, transactions, balances, hashes, or any personal information - </div> - </div> - <div className="metametrics-opt-in__row"> - <i className="fa fa-times" /> - <div className="metametrics-opt-in__row-description"> - <span className="metametrics-opt-in__bold">Never</span> collect your full IP address - </div> - </div> - <div className="metametrics-opt-in__row"> - <i className="fa fa-times" /> - <div className="metametrics-opt-in__row-description"> - <span className="metametrics-opt-in__bold">Never</span> sell data for profit. Ever! - </div> - </div> - </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 - href="https://metamask.io/privacy.html" - target="_blank" - rel="noopener noreferrer" - > - Privacy Policy here - </a>. - </div> - </div> - <div className="metametrics-opt-in__footer"> - <PageContainerFooter - onCancel={() => { - setParticipateInMetaMetrics(false) - .then(() => { - metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Metrics Option', - name: 'Metrics Opt Out', - }, - isOptIn: true, - }, { - excludeMetaMetricsId: true, - }) - hideModal() - }) - }} - cancelText={'No Thanks'} - hideCancel={false} - onSubmit={() => { - setParticipateInMetaMetrics(true) - .then(() => { - metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Metrics Option', - name: 'Metrics Opt In', - }, - isOptIn: true, - }) - hideModal() - }) - }} - submitText={'I agree'} - submitButtonType={'confirm'} - disabled={false} - /> - </div> - </div> - </div> - ) - } -} diff --git a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js deleted file mode 100644 index 525806b75..000000000 --- a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js +++ /dev/null @@ -1,24 +0,0 @@ -import { connect } from 'react-redux' -import { compose } from 'recompose' -import MetaMetricsOptInModal from './metametrics-opt-in-modal.component' -import withModalProps from '../../../higher-order-components/with-modal-props' -import { setParticipateInMetaMetrics } from '../../../actions' - -const mapStateToProps = (state, ownProps) => { - const { unapprovedTxCount } = ownProps - - return { - unapprovedTxCount, - } -} - -const mapDispatchToProps = dispatch => { - return { - setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)), - } -} - -export default compose( - withModalProps, - connect(mapStateToProps, mapDispatchToProps), -)(MetaMetricsOptInModal) diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js deleted file mode 100644 index 8ab599a71..000000000 --- a/ui/app/components/modals/modal.js +++ /dev/null @@ -1,511 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const FadeModal = require('boron').FadeModal -const actions = require('../../actions') -const { resetCustomData: resetCustomGasData } = require('../../ducks/gas.duck') -const isMobileView = require('../../../lib/is-mobile-view') -const { getEnvironmentType } = require('../../../../app/scripts/lib/util') -const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums') - -// Modal Components -const BuyOptions = require('./buy-options-modal') -const DepositEtherModal = require('./deposit-ether-modal') -const AccountDetailsModal = require('./account-details-modal') -const EditAccountNameModal = require('./edit-account-name-modal') -const ExportPrivateKeyModal = require('./export-private-key-modal') -const NewAccountModal = require('./new-account-modal') -const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') -const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') -const NotifcationModal = require('./notification-modal') -const QRScanner = require('./qr-scanner') - -import ConfirmRemoveAccount from './confirm-remove-account' -import ConfirmResetAccount from './confirm-reset-account' -import TransactionConfirmed from './transaction-confirmed' -import CancelTransaction from './cancel-transaction' - -import MetaMetricsOptInModal from './metametrics-opt-in-modal' -import RejectTransactions from './reject-transactions' -import ClearApprovedOrigins from './clear-approved-origins' -import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container' - -const modalContainerBaseStyle = { - transform: 'translate3d(-50%, 0, 0px)', - border: '1px solid #CCCFD1', - borderRadius: '8px', - backgroundColor: '#FFFFFF', - boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)', -} - -const modalContainerLaptopStyle = { - ...modalContainerBaseStyle, - width: '344px', - top: '15%', -} - -const modalContainerMobileStyle = { - ...modalContainerBaseStyle, - width: '309px', - top: '12.5%', -} - -const accountModalStyle = { - mobileModalStyle: { - width: '95%', - // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', - borderRadius: '4px', - top: '10%', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - laptopModalStyle: { - width: '360px', - // top: 'calc(33% + 45px)', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', - borderRadius: '4px', - top: '10%', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - contentStyle: { - borderRadius: '4px', - }, -} - -const MODALS = { - BUY: { - contents: [ - h(BuyOptions, {}, []), - ], - mobileModalStyle: { - width: '95%', - // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', - top: '10%', - }, - laptopModalStyle: { - width: '66%', - maxWidth: '550px', - top: 'calc(10% + 10px)', - left: '0', - right: '0', - margin: '0 auto', - boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', - transform: 'none', - }, - }, - - DEPOSIT_ETHER: { - contents: [ - h(DepositEtherModal, {}, []), - ], - onHide: (props) => props.hideWarning(), - mobileModalStyle: { - width: '100%', - height: '100%', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', - top: '0', - display: 'flex', - }, - laptopModalStyle: { - width: 'initial', - maxWidth: '850px', - top: 'calc(10% + 10px)', - left: '0', - right: '0', - margin: '0 auto', - boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)', - borderRadius: '7px', - transform: 'none', - height: 'calc(80% - 20px)', - overflowY: 'hidden', - }, - contentStyle: { - borderRadius: '7px', - height: '100%', - }, - }, - - EDIT_ACCOUNT_NAME: { - contents: [ - h(EditAccountNameModal, {}, []), - ], - mobileModalStyle: { - width: '95%', - // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', - top: '10%', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - laptopModalStyle: { - width: '375px', - // top: 'calc(30% + 10px)', - top: '10%', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - }, - - ACCOUNT_DETAILS: { - contents: [ - h(AccountDetailsModal, {}, []), - ], - ...accountModalStyle, - }, - - EXPORT_PRIVATE_KEY: { - contents: [ - h(ExportPrivateKeyModal, {}, []), - ], - ...accountModalStyle, - }, - - SHAPESHIFT_DEPOSIT_TX: { - contents: [ - h(ShapeshiftDepositTxModal), - ], - ...accountModalStyle, - }, - - HIDE_TOKEN_CONFIRMATION: { - contents: [ - h(HideTokenConfirmationModal, {}, []), - ], - mobileModalStyle: { - width: '95%', - top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', - }, - laptopModalStyle: { - width: '449px', - top: 'calc(33% + 45px)', - }, - }, - - CLEAR_APPROVED_ORIGINS: { - contents: h(ClearApprovedOrigins), - mobileModalStyle: { - ...modalContainerMobileStyle, - }, - laptopModalStyle: { - ...modalContainerLaptopStyle, - }, - contentStyle: { - borderRadius: '8px', - }, - }, - - METAMETRICS_OPT_IN_MODAL: { - contents: h(MetaMetricsOptInModal), - mobileModalStyle: { - ...modalContainerMobileStyle, - width: '100%', - height: '100%', - top: '0px', - }, - laptopModalStyle: { - ...modalContainerLaptopStyle, - top: '10%', - }, - contentStyle: { - borderRadius: '8px', - }, - }, - - OLD_UI_NOTIFICATION_MODAL: { - contents: [ - h(NotifcationModal, { - header: 'oldUI', - message: 'oldUIMessage', - }), - ], - mobileModalStyle: { - width: '95%', - top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', - }, - laptopModalStyle: { - width: '449px', - top: 'calc(33% + 45px)', - }, - }, - - GAS_PRICE_INFO_MODAL: { - contents: [ - h(NotifcationModal, { - header: 'gasPriceNoDenom', - message: 'gasPriceInfoModalContent', - }), - ], - mobileModalStyle: { - width: '95%', - top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', - }, - laptopModalStyle: { - width: '449px', - top: 'calc(33% + 45px)', - }, - }, - - GAS_LIMIT_INFO_MODAL: { - contents: [ - h(NotifcationModal, { - header: 'gasLimit', - message: 'gasLimitInfoModalContent', - }), - ], - mobileModalStyle: { - width: '95%', - top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', - }, - laptopModalStyle: { - width: '449px', - top: 'calc(33% + 45px)', - }, - }, - - CONFIRM_RESET_ACCOUNT: { - contents: h(ConfirmResetAccount), - mobileModalStyle: { - ...modalContainerMobileStyle, - }, - laptopModalStyle: { - ...modalContainerLaptopStyle, - }, - contentStyle: { - borderRadius: '8px', - }, - }, - - CONFIRM_REMOVE_ACCOUNT: { - contents: h(ConfirmRemoveAccount), - mobileModalStyle: { - ...modalContainerMobileStyle, - }, - laptopModalStyle: { - ...modalContainerLaptopStyle, - }, - contentStyle: { - borderRadius: '8px', - }, - }, - - NEW_ACCOUNT: { - contents: [ - h(NewAccountModal, {}, []), - ], - mobileModalStyle: { - width: '95%', - // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', - top: '10%', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - laptopModalStyle: { - width: '449px', - // top: 'calc(33% + 45px)', - top: '10%', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - }, - - CUSTOMIZE_GAS: { - contents: [ - h(ConfirmCustomizeGasModal), - ], - mobileModalStyle: { - width: '100vw', - height: '100vh', - top: '0', - transform: 'none', - left: '0', - right: '0', - margin: '0 auto', - }, - laptopModalStyle: { - width: 'auto', - height: '0px', - top: '80px', - left: '0px', - transform: 'none', - margin: '0 auto', - position: 'relative', - }, - contentStyle: { - borderRadius: '8px', - }, - customOnHideOpts: { - action: resetCustomGasData, - args: [], - }, - }, - - TRANSACTION_CONFIRMED: { - disableBackdropClick: true, - contents: h(TransactionConfirmed), - mobileModalStyle: { - ...modalContainerMobileStyle, - }, - laptopModalStyle: { - ...modalContainerLaptopStyle, - }, - contentStyle: { - borderRadius: '8px', - }, - }, - - QR_SCANNER: { - contents: h(QRScanner), - mobileModalStyle: { - ...modalContainerMobileStyle, - }, - laptopModalStyle: { - ...modalContainerLaptopStyle, - }, - contentStyle: { - borderRadius: '8px', - }, - }, - - CANCEL_TRANSACTION: { - contents: h(CancelTransaction), - mobileModalStyle: { - ...modalContainerMobileStyle, - }, - laptopModalStyle: { - ...modalContainerLaptopStyle, - }, - contentStyle: { - borderRadius: '8px', - }, - }, - - REJECT_TRANSACTIONS: { - contents: h(RejectTransactions), - mobileModalStyle: { - ...modalContainerMobileStyle, - }, - laptopModalStyle: { - ...modalContainerLaptopStyle, - }, - contentStyle: { - borderRadius: '8px', - }, - }, - - DEFAULT: { - contents: [], - mobileModalStyle: {}, - laptopModalStyle: {}, - }, -} - -const BACKDROPSTYLE = { - backgroundColor: 'rgba(0, 0, 0, 0.5)', -} - -function mapStateToProps (state) { - return { - active: state.appState.modal.open, - modalState: state.appState.modal.modalState, - } -} - -function mapDispatchToProps (dispatch) { - return { - hideModal: (customOnHideOpts) => { - dispatch(actions.hideModal()) - if (customOnHideOpts && customOnHideOpts.action) { - dispatch(customOnHideOpts.action(...customOnHideOpts.args)) - } - }, - hideWarning: () => { - dispatch(actions.hideWarning()) - }, - - } -} - -// Global Modal Component -inherits(Modal, Component) -function Modal () { - Component.call(this) -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal) - -Modal.prototype.render = function () { - const modal = MODALS[this.props.modalState.name || 'DEFAULT'] - - const { contents: children, disableBackdropClick = false } = modal - const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'] - const contentStyle = modal.contentStyle || {} - - return h(FadeModal, - { - className: 'modal', - keyboard: false, - onHide: () => { - if (modal.onHide) { - modal.onHide(this.props) - } - this.onHide(modal.customOnHideOpts) - }, - ref: (ref) => { - this.modalRef = ref - }, - modalStyle, - contentStyle, - backdropStyle: BACKDROPSTYLE, - closeOnClick: !disableBackdropClick, - }, - children, - ) -} - -Modal.prototype.componentWillReceiveProps = function (nextProps) { - if (nextProps.active) { - this.show() - } else if (this.props.active) { - this.hide() - } -} - -Modal.prototype.onHide = function (customOnHideOpts) { - if (this.props.onHideCallback) { - this.props.onHideCallback() - } - this.props.hideModal(customOnHideOpts) -} - -Modal.prototype.hide = function () { - this.modalRef.hide() -} - -Modal.prototype.show = function () { - this.modalRef.show() -} diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js deleted file mode 100644 index a66a3ed4a..000000000 --- a/ui/app/components/modals/new-account-modal.js +++ /dev/null @@ -1,112 +0,0 @@ -const { Component } = require('react') -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const connect = require('react-redux').connect -const actions = require('../../actions') - -class NewAccountModal extends Component { - constructor (props) { - super(props) - const { numberOfExistingAccounts = 0 } = props - const newAccountNumber = numberOfExistingAccounts + 1 - - this.state = { - newAccountName: `${this.context.t('account')} ${newAccountNumber}`, - } - } - - render () { - const { newAccountName } = this.state - - return h('div', [ - h('div.new-account-modal-wrapper', { - }, [ - h('div.new-account-modal-header', {}, [ - this.context.t('newAccount'), - ]), - - h('div.modal-close-x', { - onClick: this.props.hideModal, - }), - - h('div.new-account-modal-content', {}, [ - this.context.t('accountName'), - ]), - - h('div.new-account-input-wrapper', {}, [ - h('input.new-account-input', { - value: this.state.newAccountName, - placeholder: this.context.t('sampleAccountName'), - onChange: event => this.setState({ newAccountName: event.target.value }), - }, []), - ]), - - h('div.new-account-modal-content.after-input', {}, [ - this.context.t('or'), - ]), - - h('div.new-account-modal-content.after-input.pointer', { - onClick: () => { - this.props.hideModal() - this.props.showImportPage() - }, - }, this.context.t('importAnAccount')), - - h('div.new-account-modal-content.button.allcaps', {}, [ - h('button.btn-clear', { - onClick: () => this.props.createAccount(newAccountName), - }, [ - this.context.t('save'), - ]), - ]), - ]), - ]) - } -} - -NewAccountModal.propTypes = { - hideModal: PropTypes.func, - showImportPage: PropTypes.func, - createAccount: PropTypes.func, - numberOfExistingAccounts: PropTypes.number, - t: PropTypes.func, -} - -const mapStateToProps = state => { - const { metamask: { network, selectedAddress, identities = {} } } = state - const numberOfExistingAccounts = Object.keys(identities).length - - return { - network, - address: selectedAddress, - numberOfExistingAccounts, - } -} - -const mapDispatchToProps = dispatch => { - return { - toCoinbase: (address) => { - dispatch(actions.buyEth({ network: '1', address, amount: 0 })) - }, - hideModal: () => { - dispatch(actions.hideModal()) - }, - createAccount: (newAccountName) => { - dispatch(actions.addNewAccount()) - .then((newAccountAddress) => { - if (newAccountName) { - dispatch(actions.setAccountLabel(newAccountAddress, newAccountName)) - } - dispatch(actions.hideModal()) - }) - }, - showImportPage: () => dispatch(actions.showImportPage()), - } -} - -NewAccountModal.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal) - diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js deleted file mode 100644 index 46a4c8a21..000000000 --- a/ui/app/components/modals/notification-modal.js +++ /dev/null @@ -1,81 +0,0 @@ -const { Component } = require('react') -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const connect = require('react-redux').connect -const actions = require('../../actions') - -class NotificationModal extends Component { - render () { - const { - header, - message, - showCancelButton = false, - showConfirmButton = false, - hideModal, - onConfirm, - } = this.props - - const showButtons = showCancelButton || showConfirmButton - - return h('div', [ - h('div.notification-modal__wrapper', { - }, [ - - h('div.notification-modal__header', {}, [ - this.context.t(header), - ]), - - h('div.notification-modal__message-wrapper', {}, [ - h('div.notification-modal__message', {}, [ - this.context.t(message), - ]), - ]), - - h('div.modal-close-x', { - onClick: hideModal, - }), - - showButtons && h('div.notification-modal__buttons', [ - - showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', { - onClick: hideModal, - }, 'Cancel'), - - showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', { - onClick: () => { - onConfirm() - hideModal() - }, - }, 'Confirm'), - - ]), - - ]), - ]) - } -} - -NotificationModal.propTypes = { - hideModal: PropTypes.func, - header: PropTypes.string, - message: PropTypes.node, - showCancelButton: PropTypes.bool, - showConfirmButton: PropTypes.bool, - onConfirm: PropTypes.func, - t: PropTypes.func, -} - -const mapDispatchToProps = dispatch => { - return { - hideModal: () => { - dispatch(actions.hideModal()) - }, - } -} - -NotificationModal.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(null, mapDispatchToProps)(NotificationModal) - diff --git a/ui/app/components/modals/qr-scanner/index.js b/ui/app/components/modals/qr-scanner/index.js deleted file mode 100644 index 470dee1f4..000000000 --- a/ui/app/components/modals/qr-scanner/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import QrScanner from './qr-scanner.container' -module.exports = QrScanner diff --git a/ui/app/components/modals/qr-scanner/index.scss b/ui/app/components/modals/qr-scanner/index.scss deleted file mode 100644 index 6fa81d51f..000000000 --- a/ui/app/components/modals/qr-scanner/index.scss +++ /dev/null @@ -1,83 +0,0 @@ -.qr-scanner { - width: 100%; - height: 100%; - background-color: #fff; - display: flex; - flex-flow: column; - border-radius: 8px; - - &__title { - font-size: 1.5rem; - font-weight: 500; - padding: 16px 0; - text-align: center; - } - - &__content { - padding-left: 20px; - padding-right: 20px; - - &__video-wrapper { - overflow: hidden; - width: 100%; - height: 275px; - display: flex; - align-items: center; - justify-content: center; - - video { - transform: scaleX(-1); - width: auto; - height: 275px; - } - } - } - - &__status { - text-align: center; - font-size: 14px; - padding: 15px; - } - - &__image { - font-size: 1.5rem; - font-weight: 500; - padding: 16px 0 0; - text-align: center; - } - - &__error { - text-align: center; - font-size: 16px; - padding: 15px; - } - - &__footer { - padding: 20px; - flex-direction: row; - display: flex; - - button { - margin-right: 15px; - } - - button:last-of-type { - margin-right: 0; - background-color: #009eec; - border: none; - color: #fff; - } - } - - &__close::after { - content: '\00D7'; - font-size: 35px; - color: #9b9b9b; - position: absolute; - top: 4px; - right: 20px; - cursor: pointer; - font-weight: 300; - } -} - diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/modals/qr-scanner/qr-scanner.component.js deleted file mode 100644 index cb8d07d83..000000000 --- a/ui/app/components/modals/qr-scanner/qr-scanner.component.js +++ /dev/null @@ -1,216 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import { BrowserQRCodeReader } from '@zxing/library' -import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars -import Spinner from '../../spinner' -import WebcamUtils from '../../../../lib/webcam-utils' -import PageContainerFooter from '../../page-container/page-container-footer/page-container-footer.component' - -export default class QrScanner extends Component { - static propTypes = { - hideModal: PropTypes.func.isRequired, - qrCodeDetected: PropTypes.func, - scanQrCode: PropTypes.func, - error: PropTypes.bool, - errorType: PropTypes.string, - } - - static contextTypes = { - t: PropTypes.func, - } - - constructor (props, context) { - super(props) - - this.state = { - ready: false, - msg: context.t('accessingYourCamera'), - } - this.codeReader = null - this.permissionChecker = null - this.needsToReinit = false - - // Clear pre-existing qr code data before scanning - this.props.qrCodeDetected(null) - } - - componentDidMount () { - this.initCamera() - } - - async checkPermisisions () { - const { permissions } = await WebcamUtils.checkStatus() - if (permissions) { - clearTimeout(this.permissionChecker) - // Let the video stream load first... - setTimeout(_ => { - this.setState({ - ready: true, - msg: this.context.t('scanInstructions'), - }) - if (this.needsToReinit) { - this.initCamera() - this.needsToReinit = false - } - }, 2000) - } else { - // Keep checking for permissions - this.permissionChecker = setTimeout(_ => { - this.checkPermisisions() - }, 1000) - } - } - - componentWillUnmount () { - clearTimeout(this.permissionChecker) - if (this.codeReader) { - this.codeReader.reset() - } - } - - initCamera () { - this.codeReader = new BrowserQRCodeReader() - this.codeReader.getVideoInputDevices() - .then(videoInputDevices => { - clearTimeout(this.permissionChecker) - this.checkPermisisions() - this.codeReader.decodeFromInputVideoDevice(undefined, 'video') - .then(content => { - const result = this.parseContent(content.text) - if (result.type !== 'unknown') { - this.props.qrCodeDetected(result) - this.stopAndClose() - } else { - this.setState({msg: this.context.t('unknownQrCode')}) - } - }) - .catch(err => { - if (err && err.name === 'NotAllowedError') { - this.setState({msg: this.context.t('youNeedToAllowCameraAccess')}) - clearTimeout(this.permissionChecker) - this.needsToReinit = true - this.checkPermisisions() - } - }) - }).catch(err => { - console.error('[QR-SCANNER]: getVideoInputDevices threw an exception: ', err) - }) - } - - parseContent (content) { - let type = 'unknown' - let values = {} - - // Here we could add more cases - // To parse other type of links - // For ex. EIP-681 (https://eips.ethereum.org/EIPS/eip-681) - - - // Ethereum address links - fox ex. ethereum:0x.....1111 - if (content.split('ethereum:').length > 1) { - - type = 'address' - values = {'address': content.split('ethereum:')[1] } - - // Regular ethereum addresses - fox ex. 0x.....1111 - } else if (content.substring(0, 2).toLowerCase() === '0x') { - - type = 'address' - values = {'address': content } - - } - return {type, values} - } - - - stopAndClose = () => { - if (this.codeReader) { - this.codeReader.reset() - } - this.setState({ ready: false }) - this.props.hideModal() - } - - tryAgain = () => { - // close the modal - this.stopAndClose() - // wait for the animation and try again - setTimeout(_ => { - this.props.scanQrCode() - }, 1000) - } - - renderVideo () { - return ( - <div className={'qr-scanner__content__video-wrapper'}> - <video - id="video" - style={{ - display: this.state.ready ? 'block' : 'none', - }} - /> - { !this.state.ready ? <Spinner color={'#F7C06C'} /> : null} - </div> - ) - } - - renderErrorModal () { - let title, msg - - if (this.props.error) { - if (this.props.errorType === 'NO_WEBCAM_FOUND') { - title = this.context.t('noWebcamFoundTitle') - msg = this.context.t('noWebcamFound') - } else { - title = this.context.t('unknownCameraErrorTitle') - msg = this.context.t('unknownCameraError') - } - } - - return ( - <div className="qr-scanner"> - <div className="qr-scanner__close" onClick={this.stopAndClose}></div> - - <div className="qr-scanner__image"> - <img src={'images/webcam.svg'} width={70} height={70} /> - </div> - <div className="qr-scanner__title"> - { title } - </div> - <div className={'qr-scanner__error'}> - {msg} - </div> - <PageContainerFooter - onCancel={this.stopAndClose} - onSubmit={this.tryAgain} - cancelText={this.context.t('cancel')} - submitText={this.context.t('tryAgain')} - submitButtonType="confirm" - /> - </div> - ) - } - - render () { - const { t } = this.context - - if (this.props.error) { - return this.renderErrorModal() - } - - return ( - <div className="qr-scanner"> - <div className="qr-scanner__close" onClick={this.stopAndClose}></div> - <div className="qr-scanner__title"> - { `${t('scanQrCode')}` } - </div> - <div className="qr-scanner__content"> - { this.renderVideo() } - </div> - <div className={'qr-scanner__status'}> - {this.state.msg} - </div> - </div> - ) - } -} diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.container.js b/ui/app/components/modals/qr-scanner/qr-scanner.container.js deleted file mode 100644 index d0a35e03b..000000000 --- a/ui/app/components/modals/qr-scanner/qr-scanner.container.js +++ /dev/null @@ -1,24 +0,0 @@ -import { connect } from 'react-redux' -import QrScanner from './qr-scanner.component' - -const { hideModal, qrCodeDetected, showQrScanner } = require('../../../actions') -import { - SEND_ROUTE, -} from '../../../routes' - -const mapStateToProps = state => { - return { - error: state.appState.modal.modalState.props.error, - errorType: state.appState.modal.modalState.props.errorType, - } -} - -const mapDispatchToProps = dispatch => { - return { - hideModal: () => dispatch(hideModal()), - qrCodeDetected: (data) => dispatch(qrCodeDetected(data)), - scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)), - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(QrScanner) diff --git a/ui/app/components/modals/reject-transactions/index.js b/ui/app/components/modals/reject-transactions/index.js deleted file mode 100644 index fcdc372b6..000000000 --- a/ui/app/components/modals/reject-transactions/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './reject-transactions.container' diff --git a/ui/app/components/modals/reject-transactions/index.scss b/ui/app/components/modals/reject-transactions/index.scss deleted file mode 100644 index 753466883..000000000 --- a/ui/app/components/modals/reject-transactions/index.scss +++ /dev/null @@ -1,6 +0,0 @@ -.reject-transactions { - &__description { - text-align: center; - font-size: .875rem; - } -} diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.component.js b/ui/app/components/modals/reject-transactions/reject-transactions.component.js deleted file mode 100644 index 60b259bdc..000000000 --- a/ui/app/components/modals/reject-transactions/reject-transactions.component.js +++ /dev/null @@ -1,45 +0,0 @@ -import PropTypes from 'prop-types' -import React, { PureComponent } from 'react' -import Modal from '../../modal' - -export default class RejectTransactionsModal extends PureComponent { - static contextTypes = { - t: PropTypes.func.isRequired, - } - - static propTypes = { - onSubmit: PropTypes.func.isRequired, - hideModal: PropTypes.func.isRequired, - unapprovedTxCount: PropTypes.number.isRequired, - } - - onSubmit = async () => { - const { onSubmit, hideModal } = this.props - - await onSubmit() - hideModal() - } - - render () { - const { t } = this.context - const { hideModal, unapprovedTxCount } = this.props - - return ( - <Modal - headerText={t('rejectTxsN', [unapprovedTxCount])} - onClose={hideModal} - onSubmit={this.onSubmit} - onCancel={hideModal} - submitText={t('rejectAll')} - cancelText={t('cancel')} - submitType="secondary" - > - <div> - <div className="reject-transactions__description"> - { t('rejectTxsDescription', [unapprovedTxCount]) } - </div> - </div> - </Modal> - ) - } -} diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.container.js b/ui/app/components/modals/reject-transactions/reject-transactions.container.js deleted file mode 100644 index 81e98d3ff..000000000 --- a/ui/app/components/modals/reject-transactions/reject-transactions.container.js +++ /dev/null @@ -1,17 +0,0 @@ -import { connect } from 'react-redux' -import { compose } from 'recompose' -import RejectTransactionsModal from './reject-transactions.component' -import withModalProps from '../../../higher-order-components/with-modal-props' - -const mapStateToProps = (state, ownProps) => { - const { unapprovedTxCount } = ownProps - - return { - unapprovedTxCount, - } -} - -export default compose( - withModalProps, - connect(mapStateToProps), -)(RejectTransactionsModal) diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js deleted file mode 100644 index 242c7b89d..000000000 --- a/ui/app/components/modals/shapeshift-deposit-tx-modal.js +++ /dev/null @@ -1,40 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../actions') -const QrView = require('../qr-code') -const AccountModalContainer = require('./account-modal-container') - -function mapStateToProps (state) { - return { - Qr: state.appState.modal.modalState.props.Qr, - } -} - -function mapDispatchToProps (dispatch) { - return { - hideModal: () => { - dispatch(actions.hideModal()) - }, - } -} - -inherits(ShapeshiftDepositTxModal, Component) -function ShapeshiftDepositTxModal () { - Component.call(this) - -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftDepositTxModal) - -ShapeshiftDepositTxModal.prototype.render = function () { - const { Qr } = this.props - - return h(AccountModalContainer, { - }, [ - h('div', {}, [ - h(QrView, {key: 'qr', Qr}), - ]), - ]) -} diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/modals/transaction-confirmed/index.js deleted file mode 100644 index 7776b969e..000000000 --- a/ui/app/components/modals/transaction-confirmed/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './transaction-confirmed.container' diff --git a/ui/app/components/modals/transaction-confirmed/index.scss b/ui/app/components/modals/transaction-confirmed/index.scss deleted file mode 100644 index c97371fb6..000000000 --- a/ui/app/components/modals/transaction-confirmed/index.scss +++ /dev/null @@ -1,22 +0,0 @@ -.transaction-confirmed { - &__title { - font-size: 1.5rem; - font-weight: 500; - padding: 16px 0; - text-align: center; - } - - &__description { - text-align: center; - font-size: .875rem; - } - - &__content { - overflow-y: auto; - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - padding: 16px; - } -} diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js deleted file mode 100644 index 0a98eb1a1..000000000 --- a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js +++ /dev/null @@ -1,45 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Modal from '../../modal' - -export default class TransactionConfirmed extends PureComponent { - static contextTypes = { - t: PropTypes.func, - } - - static propTypes = { - onSubmit: PropTypes.func, - hideModal: PropTypes.func, - } - - handleSubmit = () => { - const { hideModal, onSubmit } = this.props - - hideModal() - - if (onSubmit && typeof onSubmit === 'function') { - onSubmit() - } - } - - render () { - const { t } = this.context - - return ( - <Modal - onSubmit={this.handleSubmit} - submitText={t('ok')} - > - <div className="transaction-confirmed__content"> - <img src="images/check-icon.svg" /> - <div className="transaction-confirmed__title"> - { `${t('confirmed')}!` } - </div> - <div className="transaction-confirmed__description"> - { t('initialTransactionConfirmed') } - </div> - </div> - </Modal> - ) - } -} diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js deleted file mode 100644 index d4e39681a..000000000 --- a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js +++ /dev/null @@ -1,4 +0,0 @@ -import TransactionConfirmed from './transaction-confirmed.component' -import withModalProps from '../../../higher-order-components/with-modal-props' - -export default withModalProps(TransactionConfirmed) |