From b9c2994d24e688305d63aaefd7fac88d88773ad9 Mon Sep 17 00:00:00 2001 From: brunobar79 <brunobar79@gmail.com> Date: Tue, 10 Jul 2018 19:19:29 -0400 Subject: finish warning modal UI --- .../confirm-remove-account.component.js | 60 ++++++++++++++++++++++ .../confirm-remove-account.container.js | 13 +++++ .../modals/confirm-remove-account/index.js | 2 + ui/app/components/modals/index.scss | 11 ++++ ui/app/components/modals/modal.js | 19 ++++++- 5 files changed, 103 insertions(+), 2 deletions(-) create mode 100644 ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js create mode 100644 ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js create mode 100644 ui/app/components/modals/confirm-remove-account/index.js (limited to 'ui/app/components/modals') 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 new file mode 100644 index 000000000..93be2a4e7 --- /dev/null +++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js @@ -0,0 +1,60 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Button from '../../button' +import { addressSummary } from '../../../util' + +class ConfirmRemoveAccount extends Component { + static propTypes = { + hideModal: PropTypes.func.isRequired, + removeAccount: PropTypes.func.isRequired, + address: PropTypes.string.isRequired, + } + + static contextTypes = { + t: PropTypes.func, + } + + handleRemove () { + this.props.removeAccount(this.props.address) + .then(() => this.props.hideModal()) + } + + render () { + const { t } = this.context + + return ( + <div className="modal-container"> + <div className="modal-container__content"> + <div className="modal-container__title"> + { `${t('removeAccount')}` } + </div> + <div className="modal-container__address"> + {addressSummary(this.props.address)} + </div> + <div className="modal-container__description"> + { t('removeAccountDescription') } + <a className="modal-container__link" rel="noopener noreferrer" target="_blank" href="https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI-">{ t('learnMore') }</a> + </div> + </div> + <div className="modal-container__footer"> + <Button + type="default" + className="modal-container__footer-button" + onClick={() => this.props.hideModal()} + > + { t('nevermind') } + </Button> + <Button + type="secondary" + className="modal-container__footer-button" + onClick={() => this.handleRemove()} + > + { t('remove') } + </Button> + </div> + </div> + ) + } +} + +export default ConfirmRemoveAccount 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 new file mode 100644 index 000000000..9a612f2f6 --- /dev/null +++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux' +import ConfirmRemoveAccount from './confirm-remove-account.component' + +const { hideModal, removeAccount } = require('../../../actions') + +const mapDispatchToProps = dispatch => { + return { + hideModal: () => dispatch(hideModal()), + removeAccount: (address) => dispatch(removeAccount(address)), + } +} + +export default connect(null, mapDispatchToProps)(ConfirmRemoveAccount) diff --git a/ui/app/components/modals/confirm-remove-account/index.js b/ui/app/components/modals/confirm-remove-account/index.js new file mode 100644 index 000000000..9763fbe05 --- /dev/null +++ b/ui/app/components/modals/confirm-remove-account/index.js @@ -0,0 +1,2 @@ +import ConfirmRemoveAccount from './confirm-remove-account.container' +module.exports = ConfirmRemoveAccount diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss index ad6fe16d3..591e35148 100644 --- a/ui/app/components/modals/index.scss +++ b/ui/app/components/modals/index.scss @@ -17,6 +17,17 @@ text-align: center; font-size: .875rem; } + + &__address { + text-align: center; + font-size: 1rem; + margin-top: 20px; + margin-bottom: 20px; + } + + &__link { + color: #2f9ae0; + } &__content { overflow-y: auto; diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 85e85597a..758cfa4a2 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -1,4 +1,5 @@ -const Component = require('react').Component +const React = require('react') +const Component = React.Component const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect @@ -20,6 +21,7 @@ const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const CustomizeGasModal = require('../customize-gas-modal') const NotifcationModal = require('./notification-modal') const ConfirmResetAccount = require('./confirm-reset-account') +const ConfirmRemoveAccount = require('./confirm-remove-account') const TransactionConfirmed = require('./transaction-confirmed') const WelcomeBeta = require('./welcome-beta') const Notification = require('./notification') @@ -241,6 +243,19 @@ const MODALS = { }, }, + CONFIRM_FORGET_ACCOUNT: { + contents: h(ConfirmRemoveAccount), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), @@ -370,7 +385,7 @@ Modal.prototype.render = function () { backdropStyle: BACKDROPSTYLE, closeOnClick: !disableBackdropClick, }, - children, + React.cloneElement(children, {...this.props.modalState.props}, null), ) } -- cgit v1.2.3 From 523cf9ad33d88719520ae5e7293329d133b64d4d Mon Sep 17 00:00:00 2001 From: brunobar79 <brunobar79@gmail.com> Date: Wed, 11 Jul 2018 00:20:40 -0400 Subject: account removal is working --- .../confirm-remove-account/confirm-remove-account.container.js | 8 +++++++- ui/app/components/modals/modal.js | 5 ++--- 2 files changed, 9 insertions(+), 4 deletions(-) (limited to 'ui/app/components/modals') 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 index 9a612f2f6..fcb149b3f 100644 --- 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 @@ -3,6 +3,12 @@ import ConfirmRemoveAccount from './confirm-remove-account.component' const { hideModal, removeAccount } = require('../../../actions') +const mapStateToProps = state => { + return { + address: state.appState.modal.modalState.props.address, + } +} + const mapDispatchToProps = dispatch => { return { hideModal: () => dispatch(hideModal()), @@ -10,4 +16,4 @@ const mapDispatchToProps = dispatch => { } } -export default connect(null, mapDispatchToProps)(ConfirmRemoveAccount) +export default connect(mapStateToProps, mapDispatchToProps)(ConfirmRemoveAccount) diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 758cfa4a2..9ace56661 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -1,5 +1,4 @@ -const React = require('react') -const Component = React.Component +const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect @@ -385,7 +384,7 @@ Modal.prototype.render = function () { backdropStyle: BACKDROPSTYLE, closeOnClick: !disableBackdropClick, }, - React.cloneElement(children, {...this.props.modalState.props}, null), + children, ) } -- cgit v1.2.3 From 5a2a34591f8ab2aec3a056d5bb9e38ba5236cd07 Mon Sep 17 00:00:00 2001 From: brunobar79 <brunobar79@gmail.com> Date: Wed, 11 Jul 2018 01:35:37 -0400 Subject: clean up --- ui/app/components/modals/modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 9ace56661..e40944165 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -242,7 +242,7 @@ const MODALS = { }, }, - CONFIRM_FORGET_ACCOUNT: { + CONFIRM_REMOVE_ACCOUNT: { contents: h(ConfirmRemoveAccount), mobileModalStyle: { ...modalContainerMobileStyle, -- cgit v1.2.3 From 2a0a7853249284cb27831890f3b62847ea27eb83 Mon Sep 17 00:00:00 2001 From: brunobar79 <brunobar79@gmail.com> Date: Thu, 12 Jul 2018 00:23:08 -0400 Subject: added tooltip --- .../modals/confirm-remove-account/confirm-remove-account.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/modals') 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 index 93be2a4e7..d6c0c796d 100644 --- 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 @@ -26,7 +26,7 @@ class ConfirmRemoveAccount extends Component { <div className="modal-container"> <div className="modal-container__content"> <div className="modal-container__title"> - { `${t('removeAccount')}` } + { `${t('removeAccount')}` }? </div> <div className="modal-container__address"> {addressSummary(this.props.address)} -- cgit v1.2.3 From 4b528405eac7cea54c743307e6f577abd6ce9507 Mon Sep 17 00:00:00 2001 From: brunobar79 <brunobar79@gmail.com> Date: Thu, 12 Jul 2018 13:19:51 -0400 Subject: catching up with develop --- .../confirm-remove-account.component.js | 44 +++++++++++++++++++--- .../confirm-remove-account.container.js | 3 +- 2 files changed, 41 insertions(+), 6 deletions(-) (limited to 'ui/app/components/modals') 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 index d6c0c796d..b9dc6364f 100644 --- 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 @@ -2,12 +2,15 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import Button from '../../button' import { addressSummary } from '../../../util' +import Identicon from '../../identicon' +import genAccountLink from '../../../../lib/account-link' class ConfirmRemoveAccount extends Component { static propTypes = { hideModal: PropTypes.func.isRequired, removeAccount: PropTypes.func.isRequired, - address: PropTypes.string.isRequired, + identity: PropTypes.object.isRequired, + network: PropTypes.string.isRequired, } static contextTypes = { @@ -15,10 +18,43 @@ class ConfirmRemoveAccount extends Component { } handleRemove () { - this.props.removeAccount(this.props.address) + this.props.removeAccount(this.props.identity.address) .then(() => this.props.hideModal()) } + renderSelectedAccount () { + const { identity } = this.props + return ( + <div className="modal-container__address"> + <div className="account_identicon"> + <Identicon + address={identity.address} + diameter={32} + style={{'marginLeft': '10px'}} + /> + </div> + <div className="account_name"> + <span className="account_label">Name</span> + <span className="account_value">{identity.name}</span> + </div> + <div className="account_address"> + <span className="account_label">Public Address</span> + <span className="account_value">{ addressSummary(identity.address) }</span> + </div> + <div className="account_link"> + <a + className="hw-account-list__item__link" + 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 @@ -28,9 +64,7 @@ class ConfirmRemoveAccount extends Component { <div className="modal-container__title"> { `${t('removeAccount')}` }? </div> - <div className="modal-container__address"> - {addressSummary(this.props.address)} - </div> + { this.renderSelectedAccount() } <div className="modal-container__description"> { t('removeAccountDescription') } <a className="modal-container__link" rel="noopener noreferrer" target="_blank" href="https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI-">{ t('learnMore') }</a> 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 index fcb149b3f..4b194c995 100644 --- 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 @@ -5,7 +5,8 @@ const { hideModal, removeAccount } = require('../../../actions') const mapStateToProps = state => { return { - address: state.appState.modal.modalState.props.address, + identity: state.appState.modal.modalState.props.identity, + network: state.metamask.network, } } -- cgit v1.2.3 From 5710e648bd77aa7be6e9a4ba1d7d3fe4ea20c010 Mon Sep 17 00:00:00 2001 From: brunobar79 <brunobar79@gmail.com> Date: Thu, 12 Jul 2018 18:19:33 -0400 Subject: remove account modal updated --- .../confirm-remove-account.component.js | 19 ++++---- ui/app/components/modals/index.scss | 51 +++++++++++++++++++--- 2 files changed, 55 insertions(+), 15 deletions(-) (limited to 'ui/app/components/modals') 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 index b9dc6364f..5a9f0f289 100644 --- 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 @@ -25,25 +25,24 @@ class ConfirmRemoveAccount extends Component { renderSelectedAccount () { const { identity } = this.props return ( - <div className="modal-container__address"> - <div className="account_identicon"> + <div className="modal-container__account"> + <div className="modal-container__account__identicon"> <Identicon address={identity.address} diameter={32} - style={{'marginLeft': '10px'}} /> </div> - <div className="account_name"> - <span className="account_label">Name</span> + <div className="modal-container__account__name"> + <span className="modal-container__account__label">Name</span> <span className="account_value">{identity.name}</span> </div> - <div className="account_address"> - <span className="account_label">Public Address</span> - <span className="account_value">{ addressSummary(identity.address) }</span> + <div className="modal-container__account__address"> + <span className="modal-container__account__label">Public Address</span> + <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span> </div> - <div className="account_link"> + <div className="modal-container__account__link"> <a - className="hw-account-list__item__link" + className="" href={genAccountLink(identity.address, this.props.network)} target={'_blank'} title={this.context.t('etherscanView')} diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss index b7f1f249d..1cefcb49c 100644 --- a/ui/app/components/modals/index.scss +++ b/ui/app/components/modals/index.scss @@ -19,12 +19,53 @@ text-align: center; font-size: .875rem; } - - &__address { - text-align: center; - font-size: 1rem; - margin-top: 20px; + + &__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: 16px; + + img { + width: 15px; + height: 15px; + } + } + + @media screen and (max-width: 575px) { + &__name { + width: 90px; + } + } } &__link { -- cgit v1.2.3 From 289795fb1251f3d6bc2206efb2d640fcedae5ee4 Mon Sep 17 00:00:00 2001 From: brunobar79 <brunobar79@gmail.com> Date: Fri, 13 Jul 2018 00:09:42 -0400 Subject: fix account balance bug --- ui/app/components/modals/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss index 1cefcb49c..e198cca44 100644 --- a/ui/app/components/modals/index.scss +++ b/ui/app/components/modals/index.scss @@ -53,7 +53,7 @@ } &__link { - margin-top: 16px; + margin-top: 14px; img { width: 15px; -- cgit v1.2.3