mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Indicate the current selected account on the popup account view (#4445)
This commit is contained in:
parent
83c7de2169
commit
5a2771dd47
@ -1,5 +1,7 @@
|
||||
@import './export-text-container/index';
|
||||
|
||||
@import './selected-account/index';
|
||||
|
||||
@import './info-box/index';
|
||||
|
||||
@import './pages/index';
|
||||
|
2
ui/app/components/selected-account/index.js
Normal file
2
ui/app/components/selected-account/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import SelectedAccount from './selected-account.container'
|
||||
module.exports = SelectedAccount
|
38
ui/app/components/selected-account/index.scss
Normal file
38
ui/app/components/selected-account/index.scss
Normal file
@ -0,0 +1,38 @@
|
||||
.selected-account {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
&__name {
|
||||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__address {
|
||||
font-size: .75rem;
|
||||
color: $silver-chalice;
|
||||
}
|
||||
|
||||
&__clickable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 15px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #e8e6e8;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #d9d7da;
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,60 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import copyToClipboard from 'copy-to-clipboard'
|
||||
|
||||
const Tooltip = require('../tooltip-v2.js')
|
||||
|
||||
const addressStripper = (address = '') => {
|
||||
if (address.length < 4) {
|
||||
return address
|
||||
}
|
||||
|
||||
return `${address.slice(0, 4)}...${address.slice(-4)}`
|
||||
}
|
||||
|
||||
class SelectedAccount extends Component {
|
||||
state = {
|
||||
copied: false,
|
||||
}
|
||||
|
||||
static contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
selectedAddress: PropTypes.string,
|
||||
selectedIdentity: PropTypes.object,
|
||||
}
|
||||
|
||||
render () {
|
||||
const { t } = this.context
|
||||
const { selectedAddress, selectedIdentity } = this.props
|
||||
|
||||
return (
|
||||
<div className="selected-account">
|
||||
<Tooltip
|
||||
position="bottom"
|
||||
title={this.state.copied ? t('copiedExclamation') : t('copyToClipboard')}
|
||||
>
|
||||
<div
|
||||
className="selected-account__clickable"
|
||||
onClick={() => {
|
||||
this.setState({ copied: true })
|
||||
setTimeout(() => this.setState({ copied: false }), 3000)
|
||||
copyToClipboard(selectedAddress)
|
||||
}}
|
||||
>
|
||||
<div className="selected-account__name">
|
||||
{ selectedIdentity.name }
|
||||
</div>
|
||||
<div className="selected-account__address">
|
||||
{ addressStripper(selectedAddress) }
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default SelectedAccount
|
@ -0,0 +1,13 @@
|
||||
import { connect } from 'react-redux'
|
||||
import SelectedAccount from './selected-account.component'
|
||||
|
||||
const selectors = require('../../selectors')
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
selectedAddress: selectors.getSelectedAddress(state),
|
||||
selectedIdentity: selectors.getSelectedIdentity(state),
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(SelectedAccount)
|
@ -12,7 +12,7 @@ const { checksumAddress: toChecksumAddress } = require('../util')
|
||||
|
||||
const BalanceComponent = require('./balance-component')
|
||||
const TxList = require('./tx-list')
|
||||
const Identicon = require('./identicon')
|
||||
const SelectedAccount = require('./selected-account')
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
@ -103,7 +103,7 @@ TxView.prototype.renderButtons = function () {
|
||||
}
|
||||
|
||||
TxView.prototype.render = function () {
|
||||
const { selectedAddress, identity, network, isMascara } = this.props
|
||||
const { isMascara } = this.props
|
||||
|
||||
return h('div.tx-view.flex-column', {
|
||||
style: {},
|
||||
@ -111,10 +111,12 @@ TxView.prototype.render = function () {
|
||||
|
||||
h('div.flex-row.phone-visible', {
|
||||
style: {
|
||||
justifyContent: 'space-between',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flex: '0 0 auto',
|
||||
margin: '10px',
|
||||
marginBottom: '16px',
|
||||
padding: '5px',
|
||||
borderBottom: '1px solid #e5e5e5',
|
||||
},
|
||||
}, [
|
||||
|
||||
@ -127,23 +129,7 @@ TxView.prototype.render = function () {
|
||||
onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
|
||||
}),
|
||||
|
||||
h('.identicon-wrapper.select-none', {
|
||||
style: {
|
||||
marginLeft: '0.9em',
|
||||
},
|
||||
}, [
|
||||
h(Identicon, {
|
||||
diameter: 24,
|
||||
address: selectedAddress,
|
||||
network,
|
||||
}),
|
||||
]),
|
||||
|
||||
h('span.account-name', {
|
||||
style: {},
|
||||
}, [
|
||||
identity.name,
|
||||
]),
|
||||
h(SelectedAccount),
|
||||
|
||||
!isMascara && h('div.open-in-browser', {
|
||||
onClick: () => global.platform.openExtensionInBrowser(),
|
||||
|
@ -116,6 +116,10 @@
|
||||
&__name {
|
||||
color: $white;
|
||||
font-size: 18px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
&__balance {
|
||||
|
@ -6,6 +6,7 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $break-large) {
|
||||
|
Loading…
Reference in New Issue
Block a user