m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

split AccountDetails into a separate component (#6943)

Browse Source
This commit is contained in:
Christopher Cooper 2019-08-02 05:36:31 -07:00 committed by Whymarrh Whitby
parent 3eff478775
commit b7eae4ba80
9 changed files with 210 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
test/e2e/from-import-ui.spec.js
View File

@ -159,7 +159,7 @@ describe('Using MetaMask with an existing account', function () {
describe('Show account information', () => {
it('shows the correct account address', async () => {
await driver.findElement(By.css('.wallet-view__details-button')).click()
await driver.findElement(By.css('.account-details__details-button')).click()
await driver.findElement(By.css('.qr-wrapper')).isDisplayed()
await delay(regularDelayMs)
@ -171,7 +171,7 @@ describe('Using MetaMask with an existing account', function () {
})
it('shows a QR code for the account', async () => {
await driver.findElement(By.css('.wallet-view__details-button')).click()
await driver.findElement(By.css('.account-details__details-button')).click()
await driver.findElement(By.css('.qr-wrapper')).isDisplayed()
const detailModal = await driver.findElement(By.css('span .modal'))
await delay(regularDelayMs)
@ -232,7 +232,7 @@ describe('Using MetaMask with an existing account', function () {
})
it('should show the correct account name', async () => {
const [accountName] = await findElements(driver, By.css('.account-name'))
const [accountName] = await findElements(driver, By.css('.account-details__account-name'))
assert.equal(await accountName.getText(), '2nd account')
await delay(regularDelayMs)
})
@ -318,13 +318,13 @@ describe('Using MetaMask with an existing account', function () {
})
it('should show the correct account name', async () => {
const [accountName] = await findElements(driver, By.css('.account-name'))
const [accountName] = await findElements(driver, By.css('.account-details__account-name'))
assert.equal(await accountName.getText(), 'Account 4')
await delay(regularDelayMs)
})
it('should show the imported label', async () => {
const [importedLabel] = await findElements(driver, By.css('.wallet-view__keyring-label'))
const [importedLabel] = await findElements(driver, By.css('.account-details__keyring-label'))
assert.equal(await importedLabel.getText(), 'IMPORTED')
await delay(regularDelayMs)
})
@ -350,7 +350,7 @@ describe('Using MetaMask with an existing account', function () {
})
it('should open the remove account modal', async () => {
const [accountName] = await findElements(driver, By.css('.account-name'))
const [accountName] = await findElements(driver, By.css('.account-details__account-name'))
assert.equal(await accountName.getText(), 'Account 5')
await delay(regularDelayMs)
@ -373,7 +373,7 @@ describe('Using MetaMask with an existing account', function () {
await delay(regularDelayMs)
const [accountName] = await findElements(driver, By.css('.account-name'))
const [accountName] = await findElements(driver, By.css('.account-details__account-name'))
assert.equal(await accountName.getText(), 'Account 1')
await delay(regularDelayMs)

4
test/e2e/metamask-ui.spec.js
View File

@ -221,7 +221,7 @@ describe('MetaMask', function () {
describe('Show account information', () => {
it('shows the QR code for the account', async () => {
await driver.findElement(By.css('.wallet-view__details-button')).click()
await driver.findElement(By.css('.account-details__details-button')).click()
await driver.findElement(By.css('.qr-wrapper')).isDisplayed()
await delay(regularDelayMs)
@ -273,7 +273,7 @@ describe('MetaMask', function () {
})
it('should display correct account name', async () => {
const accountName = await findElement(driver, By.css('.account-name'))
const accountName = await findElement(driver, By.css('.account-details__account-name'))
assert.equal(await accountName.getText(), '2nd account')
await delay(regularDelayMs)
})

99
ui/app/components/app/account-details/account-details.component.js Normal file
View File

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

14
ui/app/components/app/account-details/account-details.container.js Normal file
View File

@ -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)

1
ui/app/components/app/account-details/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './account-details.container'

79
ui/app/components/app/account-details/index.scss Normal file
View File

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

2
ui/app/components/app/index.scss
View File

@ -1,3 +1,5 @@
@import 'account-details/index';
@import 'account-menu/index';
@import 'add-token-button/index';

78
ui/app/components/app/wallet-view.js
View File

@ -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,68 +153,12 @@ 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(AccountDetails, {
label,
checksummedAddress,
name: identities[selectedAddress].name,
}),
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' } }),
]),
]),
this.renderWalletBalance(),
h(TokenList),

80
ui/app/css/itcss/components/newui-sections.scss
View File

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