diff --git a/ui/app/components/app/modals/buy-options-modal.js b/ui/app/components/app/modals/buy-options-modal.js deleted file mode 100644 index 2df20e65c..000000000 --- a/ui/app/components/app/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('../../../store/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/app/modals/edit-account-name-modal.js b/ui/app/components/app/modals/edit-account-name-modal.js deleted file mode 100644 index aa21765c4..000000000 --- a/ui/app/components/app/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('../../../store/actions') -const { getSelectedAccount } = require('../../../selectors/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.button.btn-secondary.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/app/modals/modal.js b/ui/app/components/app/modals/modal.js index 4044ded8c..c901d6db8 100644 --- a/ui/app/components/app/modals/modal.js +++ b/ui/app/components/app/modals/modal.js @@ -10,12 +10,9 @@ 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') import AccountDetailsModal from './account-details-modal' -const EditAccountNameModal = require('./edit-account-name-modal') const ExportPrivateKeyModal = require('./export-private-key-modal') -const NewAccountModal = require('./new-account-modal') const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const NotifcationModal = require('./notification-modal') const QRScanner = require('./qr-scanner') @@ -81,32 +78,6 @@ const accountModalStyle = { } 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, {}, []), @@ -142,32 +113,6 @@ const MODALS = { }, }, - 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', - }, - }, - ADD_TO_ADDRESSBOOK: { contents: [ h(AddToAddressBookModal, {}, []), @@ -255,23 +200,6 @@ const MODALS = { }, }, - 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, { @@ -345,30 +273,6 @@ const MODALS = { }, }, - 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), diff --git a/ui/app/components/app/modals/new-account-modal.js b/ui/app/components/app/modals/new-account-modal.js deleted file mode 100644 index 4b18c52ba..000000000 --- a/ui/app/components/app/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('../../../store/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/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index a32930c84..185f204aa 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -2,189 +2,6 @@ outline: none !important; } -// Buy Modal -.buy-modal-content { - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - font-family: Roboto; - padding: 0 16px; -} - -.buy-modal-content-option { - cursor: pointer; - color: #5B5D67; -} - -.qr-ellip-address, .ellip-address { - /*rtl:ignore*/ - direction: ltr; - width: 247px; - border: none; - font-family: Roboto; - font-size: 14px; -} - -@media screen and (max-width: 575px) { - .buy-modal-content-title-wrapper { - justify-content: space-around; - width: 100%; - height: 100px; - } - - .buy-modal-content-title { - font-size: 26px; - margin-top: 15px; - } - - .buy-modal-content-options { - flex-direction: column; - padding: 5% 33%; - } - - .buy-modal-content-footer { - text-transform: uppercase; - width: 100%; - height: 50px; - } - - div.buy-modal-content-option { - display: flex; - flex-direction: column; - width: 80vw; - height: 15vh; - margin: 10px; - text-align: center; - border-radius: 6px; - border: 1px solid $black; - padding: 0% 7%; - justify-content: center; - - div.buy-modal-content-option-title { - font-size: 20px; - } - - div.buy-modal-content-option-subtitle { - font-size: 16px; - } - } -} - -@media screen and (min-width: 576px) { - .buy-modal-content-title-wrapper { - justify-content: space-around; - width: 100%; - height: 110px; - } - - .buy-modal-content-title { - font-size: 26px; - margin-top: 15px; - } - - .buy-modal-content-footer { - text-transform: uppercase; - width: 100%; - height: 50px; - } - - .buy-modal-content-options { - flex-direction: row; - margin: 20px 0 60px; - } - - div.buy-modal-content-option { - display: flex; - flex-direction: column; - width: 20vw; - height: 120px; - text-align: center; - border-radius: 6px; - border: 1px solid $black; - margin: 0 8px; - padding: 18px 0; - - div.buy-modal-content-option-title { - font-size: 20px; - margin-bottom: 12px; - - @media screen and (max-width: 679px) { - font-size: 14px; - } - - @media screen and (min-width: 1281px) { - font-size: 20px; - } - } - - div.buy-modal-content-option-subtitle { - font-size: 16px; - padding: 0 10px; - height: 25%; - - @media screen and (max-width: 679px) { - font-size: 10px; - padding: 0 10px; - margin-bottom: 5px; - line-height: 15px; - } - - @media screen and (min-width: 680px) { - font-size: 14px; - padding: 0 4px; - margin-bottom: 2px; - } - - @media screen and (min-width: 1281px) { - font-size: 16px; - padding: 0; - } - } - - div.buy-modal-content-footer { - margin-top: 8vh; - } - } -} - -// Edit Account Name Modal -.edit-account-name-modal-content { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - position: relative; -} - -.edit-account-name-modal-cancel { - position: absolute; - top: 12px; - right: 20px; - font-size: 25px; -} - -.edit-account-name-modal-title { - margin: 15px; -} - -.edit-account-name-modal-save-button { - width: 33%; - height: 45px; - margin: 15px; - font-weight: 700; - margin-top: 25px; -} - -.edit-account-name-modal-input { - width: 90%; - height: 50px; - text-align: left; - margin: 10px; - padding: 10px; - font-size: 18px; -} - // Account Modal Container .account-modal-container { display: flex; @@ -372,30 +189,6 @@ text-transform: uppercase; } - -// New Account Modal -.new-account-modal-wrapper { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - position: relative; - border: 1px solid $alto; - box-shadow: 0 0 2px 2px $alto; - font-family: Roboto; -} - -.new-account-modal-header { - background: $wild-sand; - width: 100%; - display: flex; - justify-content: center; - padding: 30px; - font-size: 22px; - color: $nile-blue; - height: 79px; -} - .modal-close-x::after { content: '\00D7'; font-size: 2em; @@ -407,81 +200,6 @@ cursor: pointer; } -.new-account-modal-content { - width: 100%; - display: flex; - justify-content: center; - margin-top: 15px; - font-size: 17px; - color: $nile-blue; -} - -.new-account-modal-content.after-input { - margin-top: 15px; - line-height: 25px; -} - -.new-account-input-wrapper { - display: flex; - width: 100%; - justify-content: center; - padding-bottom: 2px; - margin-top: 13px; -} - -.new-account-input { - padding: 15px; - padding-bottom: 20px; - border-radius: 8px; - border: 1px solid $alto; - width: 100%; - font-size: 1em; - color: $dusty-gray; - font-family: Roboto; - font-size: 17px; - margin: 0 60px; -} - -// For reference on below placeholder selectors: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css -.new-account-input::-webkit-input-placeholder { - color: $dusty-gray; -} - -.new-account-input:-moz-placeholder { - color: $dusty-gray; - opacity: 1; -} - -.new-account-input::-moz-placeholder { - color: $dusty-gray; - opacity: 1; -} - -.new-account-input:-ms-input-placeholder { - color: $dusty-gray; -} - -.new-account-input::-ms-input-placeholder { - color: $dusty-gray; -} - -.new-account-modal-content.button { - margin-top: 22px; - margin-bottom: 30px; - width: 113px; - height: 44px; -} - -.new-account-modal-wrapper .btn-clear { - font-size: 14px; - font-weight: 700; - background: $white; - border: 1px solid; - border-radius: 2px; - color: $tundora; - flex: 1; -} - // Hide token confirmation .hide-token-confirmation { diff --git a/ui/app/css/itcss/trumps/index.scss b/ui/app/css/itcss/trumps/index.scss index d9a4202a4..0c71d04ff 100644 --- a/ui/app/css/itcss/trumps/index.scss +++ b/ui/app/css/itcss/trumps/index.scss @@ -59,14 +59,3 @@ i.fa.fa-question-circle.fa-lg.menu-icon { font-size: 18px; } - -// This text is contained inside a div. -// ID needed to override user agent stylesheet. -// See components/modal.scss - -/* stylelint-disable */ -#buy-modal-content-footer-text { - font-family: 'DIN OT'; - font-size: 16px; -} -/* stylelint-enable */