From d206f183f5a07787535acd196c506145f00a199e Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 16:33:29 -0230 Subject: [PATCH] Hide token confirmation modal ui --- .../dropdowns/token-menu-dropdown.js | 18 ++++- .../modals/hide-token-confirmation-modal.js | 66 +++++++++++++++++ ui/app/components/modals/modal.js | 15 ++++ ui/app/components/token-cell.js | 1 + ui/app/css/itcss/components/modal.scss | 73 +++++++++++++++++++ 5 files changed, 170 insertions(+), 3 deletions(-) create mode 100644 ui/app/components/modals/hide-token-confirmation-modal.js diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js index b948534c2..0f4bc2b87 100644 --- a/ui/app/components/dropdowns/token-menu-dropdown.js +++ b/ui/app/components/dropdowns/token-menu-dropdown.js @@ -1,8 +1,19 @@ 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') + +module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown) + +function mapDispatchToProps (dispatch) { + return { + showHideTokenConfirmationModal: (token) => { + dispatch(actions.showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token })) + } + } +} -module.exports = TokenMenuDropdown inherits(TokenMenuDropdown, Component) function TokenMenuDropdown () { @@ -17,6 +28,8 @@ TokenMenuDropdown.prototype.onClose = function (e) { } TokenMenuDropdown.prototype.render = function () { + const { showHideTokenConfirmationModal } = this.props + return h('div.token-menu-dropdown', {}, [ h('div.token-menu-dropdown__close-area', { onClick: this.onClose, @@ -27,7 +40,7 @@ TokenMenuDropdown.prototype.render = function () { h('div.token-menu-dropdown__option', { onClick: (e) => { e.stopPropagation() - console.log('div.token-menu-dropdown__option!') + showHideTokenConfirmationModal(this.props.token) }, }, 'Hide Token') @@ -35,4 +48,3 @@ TokenMenuDropdown.prototype.render = function () { ]), ]) } - diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js new file mode 100644 index 000000000..d3f06b483 --- /dev/null +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -0,0 +1,66 @@ +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 Identicon = require('../identicon') + +function mapStateToProps (state) { + return { + network: state.metamask.network, + token: state.appState.modal.modalState.token, + } +} + +function mapDispatchToProps (dispatch) { + return {} +} + +inherits(HideTokenConfirmationModal, Component) +function HideTokenConfirmationModal () { + Component.call(this) + + this.state = {} +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal) + +HideTokenConfirmationModal.prototype.render = function () { + const { token, network } = this.props + const { symbol, address } = token + + return h('div.hide-token-confirmation', {}, [ + h('div.hide-token-confirmation__container', { + }, [ + h('div.hide-token-confirmation__title', {}, [ + 'Hide Token?', + ]), + + h(Identicon, { + className: 'hide-token-confirmation__identicon', + diameter: 45, + address, + network, + }), + + h('div.hide-token-confirmation__symbol', {}, symbol), + + h('div.hide-token-confirmation__copy', {}, [ + 'You can add this token back in the future by going go to “Add token” in your accounts options menu.', + ]), + + h('div.hide-token-confirmation__buttons', {}, [ + h('button.btn-clear', { + onClick: () => {}, + }, [ + 'CANCEL', + ]), + h('button.btn-clear', { + onClick: () => {}, + }, [ + 'HIDE', + ]), + ]), + ]), + ]) +} diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 765e46312..7247d840e 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -14,6 +14,7 @@ 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 accountModalStyle = { mobileModalStyle: { @@ -117,6 +118,20 @@ const MODALS = { ...accountModalStyle, }, + HIDE_TOKEN_CONFIRMATION: { + contents: [ + h(HideTokenConfirmationModal, {}, []), + ], + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '449px', + top: 'calc(33% + 45px)', + }, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index df73577e9..ad431df69 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -120,6 +120,7 @@ TokenCell.prototype.render = function () { tokenMenuOpen && h(TokenMenuDropdown, { onClose: () => this.setState({ tokenMenuOpen: false }), + token: { symbol, address }, }), /* diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index ccfaa7db5..aa18ed37d 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -483,3 +483,76 @@ color: $tundora; flex: 1; } + +// Hide token confirmation + +.hide-token-confirmation { + min-height: 250.72px; + width: 374.49px; + border-radius: 4px; + background-color: #FFFFFF; + box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5); + + &__container { + padding: 24px 27px 21px; + display: flex; + flex-direction: column; + align-items: center; + } + + &__identicon { + margin-bottom: 10px + } + + &__symbol { + color: $tundora; + font-family: 'DIN OT'; + font-size: 16px; + line-height: 24px; + text-align: center; + margin-bottom: 7.5px; + } + + &__title { + height: 30px; + width: 271.28px; + color: $tundora; + font-family: 'DIN OT'; + font-size: 22px; + line-height: 30px; + text-align: center; + margin-bottom: 10.5px; + } + + &__copy { + height: 41px; + width: 318px; + color: $scorpion; + font-family: 'DIN OT'; + font-size: 14px; + line-height: 18px; + text-align: center; + } + + &__buttons { + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 15px; + width: 100%; + + button { + height: 44px; + width: 113px; + border: 1px solid $scorpion; + border-radius: 2px; + color: $tundora; + font-family: 'DIN OT'; + font-size: 14px; + line-height: 20px; + text-align: center; + margin-left: 4px; + margin-right: 4px; + } + } +}