aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/app/account-details/account-details.component.js99
-rw-r--r--ui/app/components/app/account-details/account-details.container.js14
-rw-r--r--ui/app/components/app/account-details/index.js1
-rw-r--r--ui/app/components/app/account-details/index.scss79
-rw-r--r--ui/app/components/app/index.scss2
-rw-r--r--ui/app/components/app/wallet-view.js80
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss80
7 files changed, 201 insertions, 154 deletions
diff --git a/ui/app/components/app/account-details/account-details.component.js b/ui/app/components/app/account-details/account-details.component.js
new file mode 100644
index 000000000..ecf2f9428
--- /dev/null
+++ b/ui/app/components/app/account-details/account-details.component.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Identicon from '../../ui/identicon'
+import Tooltip from '../../ui/tooltip-v2'
+import copyToClipboard from 'copy-to-clipboard'
+
+export default class AccountDetails extends Component {
+ static contextTypes = {
+ t: PropTypes.func.isRequired,
+ metricsEvent: PropTypes.func,
+ }
+
+ static defaultProps = {
+ hideSidebar: () => {},
+ showAccountDetailModal: () => {},
+ }
+
+ static propTypes = {
+ hideSidebar: PropTypes.func,
+ showAccountDetailModal: PropTypes.func,
+ label: PropTypes.string.isRequired,
+ checksummedAddress: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ }
+
+ state = {
+ hasCopied: false,
+ copyToClipboardPressed: false,
+ }
+
+ copyAddress () {
+ copyToClipboard(this.props.checksummedAddress)
+ this.context.metricsEvent({
+ eventOpts: {
+ category: 'Navigation',
+ action: 'Home',
+ name: 'Copied Address',
+ },
+ })
+ this.setState({ hasCopied: true })
+ setTimeout(() => this.setState({ hasCopied: false }), 3000)
+ }
+
+ render () {
+ const { t } = this.context
+
+ const {
+ hideSidebar,
+ showAccountDetailModal,
+ label,
+ checksummedAddress,
+ name,
+ } = this.props
+
+ const {
+ hasCopied,
+ copyToClipboardPressed,
+ } = this.state
+
+ return (
+ <div>
+ <div className="flex-column account-details">
+ <div className="account-details__sidebar-close" onClick={hideSidebar} />
+ <div className="account-details__keyring-label allcaps">
+ {label}
+ </div>
+ <div className="flex-column flex-center account-details__name-container" onClick={showAccountDetailModal}>
+ <Identicon diameter={54} address={checksummedAddress} />
+ <span className="account-details__account-name">
+ {name}
+ </span>
+ <button className="btn-secondary account-details__details-button">
+ {t('details')}
+ </button>
+ </div>
+ </div>
+ <Tooltip
+ position={'bottom'}
+ title={hasCopied ? t('copiedExclamation') : t('copyToClipboard')}
+ wrapperClassName="account-details__tooltip"
+ >
+ <button
+ className={classnames({
+ 'account-details__address': true,
+ 'account-details__address__pressed': copyToClipboardPressed,
+ })}
+ onClick={() => this.copyAddress()}
+ onMouseDown={() => this.setState({ copyToClipboardPressed: true })}
+ onMouseUp={() => this.setState({ copyToClipboardPressed: false })}
+ >
+ {checksummedAddress.slice(0, 6)}...{checksummedAddress.slice(-4)}
+ <i className="fa fa-clipboard" style={{ marginLeft: '8px' }} />
+ </button>
+ </Tooltip>
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/app/account-details/account-details.container.js b/ui/app/components/app/account-details/account-details.container.js
new file mode 100644
index 000000000..581ff1e2f
--- /dev/null
+++ b/ui/app/components/app/account-details/account-details.container.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux'
+import { hideSidebar, showModal } from '../../../store/actions'
+import AccountDetails from './account-details.component'
+
+function mapDispatchToProps (dispatch) {
+ return {
+ hideSidebar: () => dispatch(hideSidebar()),
+ showAccountDetailModal: () => {
+ dispatch(showModal({ name: 'ACCOUNT_DETAILS' }))
+ },
+ }
+}
+
+export default connect(null, mapDispatchToProps)(AccountDetails)
diff --git a/ui/app/components/app/account-details/index.js b/ui/app/components/app/account-details/index.js
new file mode 100644
index 000000000..dca244fee
--- /dev/null
+++ b/ui/app/components/app/account-details/index.js
@@ -0,0 +1 @@
+export { default } from './account-details.container'
diff --git a/ui/app/components/app/account-details/index.scss b/ui/app/components/app/account-details/index.scss
new file mode 100644
index 000000000..b0a921df3
--- /dev/null
+++ b/ui/app/components/app/account-details/index.scss
@@ -0,0 +1,79 @@
+.account-details {
+ flex: 0 0 auto;
+
+ &__keyring-label {
+ height: 50px;
+ color: $dusty-gray;
+ font-family: Roboto;
+ font-size: 10px;
+ text-align: right;
+ padding: 17px 20px 0;
+ box-sizing: border-box;
+ }
+
+ &__name-container {
+ flex: 0 0 auto;
+ cursor: pointer;
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ &__account-name {
+ font-size: 24px;
+ color: $black;
+ margin-top: 8px;
+ margin-bottom: .9rem;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ width: 100%;
+ padding: 0 8px;
+ text-align: center;
+ }
+
+ &__details-button {
+ font-size: 10px;
+ border-radius: 17px;
+ background-color: transparent;
+ margin: 0 auto;
+ padding: 4px 12px;
+ flex: 0 0 auto;
+ }
+
+ &__tooltip {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 24px;
+ }
+
+ &__address {
+ border-radius: 3px;
+ background-color: $alto;
+ color: $scorpion;
+ font-size: 14px;
+ line-height: 12px;
+ padding: 4px 12px;
+ cursor: pointer;
+ flex: 0 0 auto;
+
+ &__pressed {
+ background-color: $manatee,
+ }
+ }
+
+ &__sidebar-close {
+
+ @media screen and (max-width: 575px) {
+ &::after {
+ content: '\00D7';
+ font-size: 40px;
+ color: $tundora;
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ cursor: pointer;
+ }
+ }
+ }
+}
diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss
index 1f70ba974..09a97ac28 100644
--- a/ui/app/components/app/index.scss
+++ b/ui/app/components/app/index.scss
@@ -1,3 +1,5 @@
+@import 'account-details/index';
+
@import 'account-menu/index';
@import 'add-token-button/index';
diff --git a/ui/app/components/app/wallet-view.js b/ui/app/components/app/wallet-view.js
index b8bae5421..55aeec333 100644
--- a/ui/app/components/app/wallet-view.js
+++ b/ui/app/components/app/wallet-view.js
@@ -5,12 +5,8 @@ const h = require('react-hyperscript')
const { withRouter } = require('react-router-dom')
const { compose } = require('recompose')
const inherits = require('util').inherits
-const classnames = require('classnames')
const { checksumAddress } = require('../../helpers/utils/util')
-import Identicon from '../ui/identicon'
// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
-const Tooltip = require('../ui/tooltip-v2.js').default
-const copyToClipboard = require('copy-to-clipboard')
const actions = require('../../store/actions')
import BalanceComponent from '../ui/balance'
const TokenList = require('./token-list')
@@ -18,6 +14,7 @@ const selectors = require('../../selectors/selectors')
const { ADD_TOKEN_ROUTE } = require('../../helpers/constants/routes')
import AddTokenButton from './add-token-button'
+import AccountDetails from './account-details'
module.exports = compose(
withRouter,
@@ -52,9 +49,6 @@ function mapDispatchToProps (dispatch) {
showSendPage: () => dispatch(actions.showSendPage()),
hideSidebar: () => dispatch(actions.hideSidebar()),
unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
- showAccountDetailModal: () => {
- dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
- },
showAddTokenPage: () => dispatch(actions.showAddTokenPage()),
}
}
@@ -62,10 +56,6 @@ function mapDispatchToProps (dispatch) {
inherits(WalletView, Component)
function WalletView () {
Component.call(this)
- this.state = {
- hasCopied: false,
- copyToClipboardPressed: false,
- }
}
WalletView.prototype.renderWalletBalance = function () {
@@ -130,8 +120,6 @@ WalletView.prototype.render = function () {
responsiveDisplayClassname,
selectedAddress,
keyrings,
- showAccountDetailModal,
- hideSidebar,
identities,
network,
} = this.props
@@ -165,67 +153,11 @@ WalletView.prototype.render = function () {
className: responsiveDisplayClassname,
}, [
- // TODO: Separate component: wallet account details
- h('div.flex-column.wallet-view-account-details', {
- style: {},
- }, [
- h('div.wallet-view__sidebar-close', {
- onClick: hideSidebar,
- }),
-
- h('div.wallet-view__keyring-label.allcaps', label),
-
- h('div.flex-column.flex-center.wallet-view__name-container', {
- style: { margin: '0 auto' },
- onClick: showAccountDetailModal,
- }, [
- h(Identicon, {
- diameter: 54,
- address: checksummedAddress,
- }),
-
- h('span.account-name', {
- style: {},
- }, [
- identities[selectedAddress].name,
- ]),
-
- h('button.btn-secondary.wallet-view__details-button', this.context.t('details')),
- ]),
- ]),
-
- h(Tooltip, {
- position: 'bottom',
- title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'),
- wrapperClassName: 'wallet-view__tooltip',
- }, [
- h('button.wallet-view__address', {
- className: classnames({
- 'wallet-view__address__pressed': this.state.copyToClipboardPressed,
- }),
- onClick: () => {
- copyToClipboard(checksummedAddress)
- this.context.metricsEvent({
- eventOpts: {
- category: 'Navigation',
- action: 'Home',
- name: 'Copied Address',
- },
- })
- this.setState({ hasCopied: true })
- setTimeout(() => this.setState({ hasCopied: false }), 3000)
- },
- onMouseDown: () => {
- this.setState({ copyToClipboardPressed: true })
- },
- onMouseUp: () => {
- this.setState({ copyToClipboardPressed: false })
- },
- }, [
- `${checksummedAddress.slice(0, 6)}...${checksummedAddress.slice(-4)}`,
- h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
- ]),
- ]),
+ h(AccountDetails, {
+ label,
+ checksummedAddress,
+ name: identities[selectedAddress].name,
+ }),
this.renderWalletBalance(),
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 9a0b81aed..ff5f6f6cf 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -65,72 +65,6 @@ $wallet-view-bg: $alabaster;
@media #{$sub-mid-size-breakpoint-range} {
min-width: 160px;
}
-
- .wallet-view-account-details {
- flex: 0 0 auto;
- }
-
- &__name-container {
- flex: 0 0 auto;
- cursor: pointer;
- width: 100%;
- }
-
- &__keyring-label {
- height: 50px;
- color: $dusty-gray;
- font-family: Roboto;
- font-size: 10px;
- text-align: right;
- padding: 17px 20px 0;
- box-sizing: border-box;
- }
-
- &__details-button {
- font-size: 10px;
- border-radius: 17px;
- background-color: transparent;
- margin: 0 auto;
- padding: 4px 12px;
- flex: 0 0 auto;
- }
-
- &__tooltip {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 24px;
- }
-
- &__address {
- border-radius: 3px;
- background-color: $alto;
- color: $scorpion;
- font-size: 14px;
- line-height: 12px;
- padding: 4px 12px;
- cursor: pointer;
- flex: 0 0 auto;
-
- &__pressed {
- background-color: $manatee,
- }
- }
-
- &__sidebar-close {
-
- @media screen and (max-width: 575px) {
- &::after {
- content: '\00D7';
- font-size: 40px;
- color: $tundora;
- position: absolute;
- top: 12px;
- left: 12px;
- cursor: pointer;
- }
- }
- }
}
@media screen and (min-width: 576px) {
@@ -228,20 +162,6 @@ $wallet-view-bg: $alabaster;
}
}
-// wallet view
-.account-name {
- font-size: 24px;
- color: $black;
- margin-top: 8px;
- margin-bottom: .9rem;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- width: 100%;
- padding: 0 8px;
- text-align: center;
-}
-
// account options dropdown
.account-options-menu {
align-items: center;
generated by cgit (git 2.34.1) at 2024-10-23 21:39:13 +0800