Hide token confirmation modal ui

feature/default_network_editable
Dan 7 years ago committed by Chi Kei Chan
parent 47ebcbb2ed
commit d206f183f5
  1. 18
      ui/app/components/dropdowns/token-menu-dropdown.js
  2. 66
      ui/app/components/modals/hide-token-confirmation-modal.js
  3. 15
      ui/app/components/modals/modal.js
  4. 1
      ui/app/components/token-cell.js
  5. 73
      ui/app/css/itcss/components/modal.scss

@ -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 () {
]),
])
}

@ -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',
]),
]),
]),
])
}

@ -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, {}, []),

@ -120,6 +120,7 @@ TokenCell.prototype.render = function () {
tokenMenuOpen && h(TokenMenuDropdown, {
onClose: () => this.setState({ tokenMenuOpen: false }),
token: { symbol, address },
}),
/*

@ -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;
}
}
}

Loading…
Cancel
Save