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