aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/dropdowns/token-menu-dropdown.js18
-rw-r--r--ui/app/components/modals/hide-token-confirmation-modal.js66
-rw-r--r--ui/app/components/modals/modal.js15
-rw-r--r--ui/app/components/token-cell.js1
-rw-r--r--ui/app/css/itcss/components/modal.scss73
5 files changed, 170 insertions, 3 deletions
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;
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-18 01:21:59 +0800