TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove unused account-dropdowns components (#6363)

Browse Source
feature/default_network_editable
Whymarrh Whitby 6 years ago committed by GitHub
parent 259aa36941
commit 4055dc3475
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 0 additions and 811 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 338
      ui/app/components/app/account-dropdowns.js
  2. 473
      ui/app/components/app/dropdowns/components/account-dropdowns.js

338
ui/app/components/app/account-dropdowns.js
Unescape View File

@ -1,338 +0,0 @@
const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const actions = require('../../store/actions')
const genAccountLink = require('etherscan-link').createAccountLink
const connect = require('react-redux').connect
const Dropdown = require('./dropdown').Dropdown
const DropdownMenuItem = require('./dropdown').DropdownMenuItem
const copyToClipboard = require('copy-to-clipboard')
const { checksumAddress } = require('../../helpers/utils/util')
import Identicon from '../ui/identicon'
class AccountDropdowns extends Component {
constructor (props) {
super(props)
this.state = {
accountSelectorActive: false,
optionsMenuActive: false,
}
this.accountSelectorToggleClassName = 'accounts-selector'
this.optionsMenuToggleClassName = 'fa-ellipsis-h'
}
renderAccounts () {
const { identities, selected, keyrings } = this.props
return Object.keys(identities).map((key, index) => {
const identity = identities[key]
const isSelected = identity.address === selected
const simpleAddress = identity.address.substring(2).toLowerCase()
const keyring = keyrings.find((kr) => {
return kr.accounts.includes(simpleAddress) ||
kr.accounts.includes(identity.address)
})
return h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
this.props.actions.showAccountDetail(identity.address)
},
style: {
marginTop: index === 0 ? '5px' : '',
fontSize: '24px',
},
},
[
h(
Identicon,
{
address: identity.address,
diameter: 32,
style: {
marginLeft: '10px',
},
},
),
this.indicateIfLoose(keyring),
h('span', {
style: {
marginLeft: '20px',
fontSize: '24px',
maxWidth: '145px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}, identity.name || ''),
h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
]
)
})
}
indicateIfLoose (keyring) {
try { // Sometimes keyrings aren't loaded yet:
const type = keyring.type
const isLoose = type !== 'HD Key Tree'
return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
} catch (e) { return }
}
renderAccountSelector () {
const { actions } = this.props
const { accountSelectorActive } = this.state
return h(
Dropdown,
{
useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
style: {
marginLeft: '-238px',
marginTop: '38px',
minWidth: '180px',
overflowY: 'auto',
maxHeight: '300px',
width: '300px',
},
innerStyle: {
padding: '8px 25px',
},
isOpen: accountSelectorActive,
onClickOutside: (event) => {
const { classList } = event.target
const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
if (accountSelectorActive && isNotToggleElement) {
this.setState({ accountSelectorActive: false })
}
},
},
[
...this.renderAccounts(),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => actions.addNewAccount(),
},
[
h(
Identicon,
{
style: {
marginLeft: '10px',
},
diameter: 32,
},
),
h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.context.t('createAccount')),
],
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => actions.showImportPage(),
},
[
h(
Identicon,
{
style: {
marginLeft: '10px',
},
diameter: 32,
},
),
h('span', {
style: {
marginLeft: '20px',
fontSize: '24px',
marginBottom: '5px',
},
}, this.context.t('importAccount')),
]
),
]
)
}
renderAccountOptions () {
const { actions } = this.props
const { optionsMenuActive } = this.state
return h(
Dropdown,
{
style: {
marginLeft: '-215px',
minWidth: '180px',
},
isOpen: optionsMenuActive,
onClickOutside: (event) => {
const { classList } = event.target
const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
if (optionsMenuActive && isNotToggleElement) {
this.setState({ optionsMenuActive: false })
}
},
},
[
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
const { selected, network } = this.props
const url = genAccountLink(selected, network)
global.platform.openWindow({ url })
},
},
this.context.t('etherscanView'),
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
const { selected, identities } = this.props
var identity = identities[selected]
actions.showQrView(selected, identity ? identity.name : '')
},
},
this.context.t('showQRCode'),
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
const { selected } = this.props
copyToClipboard(checksumAddress(selected))
},
},
this.context.t('copyAddress'),
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
actions.requestAccountExport()
},
},
this.context.t('exportPrivateKey'),
),
]
)
}
render () {
const { metricsEvent } = this.context
const { style, enableAccountsSelector, enableAccountOptions } = this.props
const { optionsMenuActive, accountSelectorActive } = this.state
return h(
'span',
{
style: style,
},
[
enableAccountsSelector && h(
// 'i.fa.fa-angle-down',
'div.cursor-pointer.color-orange.accounts-selector',
{
style: {
// fontSize: '1.8em',
background: 'url(images/switch_acc.svg) white center center no-repeat',
height: '25px',
width: '25px',
transform: 'scale(0.75)',
marginRight: '3px',
},
onClick: (event) => {
event.stopPropagation()
this.setState({
accountSelectorActive: !accountSelectorActive,
optionsMenuActive: false,
})
},
},
this.renderAccountSelector(),
),
enableAccountOptions && h(
'i.fa.fa-ellipsis-h',
{
style: {
marginRight: '0.5em',
fontSize: '1.8em',
},
onClick: (event) => {
metricsEvent({
eventOpts: {
category: 'Accounts',
action: 'userClick',
name: 'accountsOpenedMenu',
},
pageOpts: {
section: 'header',
component: 'accountDropdownIcon',
},
})
event.stopPropagation()
this.setState({
accountSelectorActive: false,
optionsMenuActive: !optionsMenuActive,
})
},
},
this.renderAccountOptions()
),
]
)
}
}
AccountDropdowns.defaultProps = {
enableAccountsSelector: false,
enableAccountOptions: false,
}
AccountDropdowns.propTypes = {
identities: PropTypes.objectOf(PropTypes.object),
selected: PropTypes.string,
keyrings: PropTypes.array,
actions: PropTypes.objectOf(PropTypes.func),
network: PropTypes.string,
style: PropTypes.object,
enableAccountOptions: PropTypes.bool,
enableAccountsSelector: PropTypes.bool,
t: PropTypes.func,
}
const mapDispatchToProps = (dispatch) => {
return {
actions: {
showConfigPage: () => dispatch(actions.showConfigPage()),
requestAccountExport: () => dispatch(actions.requestExportAccount()),
showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
addNewAccount: () => dispatch(actions.addNewAccount()),
showImportPage: () => dispatch(actions.showImportPage()),
showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
},
}
}
AccountDropdowns.contextTypes = {
t: PropTypes.func,
metricsEvent: PropTypes.func,
}
module.exports = {
AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns),
}

473
ui/app/components/app/dropdowns/components/account-dropdowns.js
Unescape View File

@ -1,473 +0,0 @@
const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const actions = require('../../../../store/actions')
const genAccountLink = require('../../../../../lib/account-link.js')
const connect = require('react-redux').connect
const Dropdown = require('./dropdown').Dropdown
const DropdownMenuItem = require('./dropdown').DropdownMenuItem
import Identicon from '../../../ui/identicon'
const { checksumAddress } = require('../../../../helpers/utils/util')
const copyToClipboard = require('copy-to-clipboard')
const { formatBalance } = require('../../../../helpers/utils/util')
class AccountDropdowns extends Component {
constructor (props) {
super(props)
this.state = {
accountSelectorActive: false,
optionsMenuActive: false,
}
// Used for orangeaccount selector icon
// this.accountSelectorToggleClassName = 'accounts-selector'
this.accountSelectorToggleClassName = 'fa-angle-down'
this.optionsMenuToggleClassName = 'fa-ellipsis-h'
}
renderAccounts () {
const { identities, accounts, selected, menuItemStyles, actions, keyrings, ticker } = this.props
return Object.keys(identities).map((key, index) => {
const identity = identities[key]
const isSelected = identity.address === selected
const balanceValue = accounts[key].balance
const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, true, ticker) : '...'
const simpleAddress = identity.address.substring(2).toLowerCase()
const keyring = keyrings.find((kr) => {
return kr.accounts.includes(simpleAddress) ||
kr.accounts.includes(identity.address)
})
return h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
this.props.actions.showAccountDetail(identity.address)
},
style: Object.assign(
{
marginTop: index === 0 ? '5px' : '',
fontSize: '24px',
width: '260px',
},
menuItemStyles,
),
},
[
h('div.flex-row.flex-center', {}, [
h('span', {
style: {
flex: '1 1 0',
minWidth: '20px',
minHeight: '30px',
},
}, [
h('span', {
style: {
flex: '1 1 auto',
fontSize: '14px',
},
}, isSelected ? h('i.fa.fa-check') : null),
]),
h(
Identicon,
{
address: identity.address,
diameter: 24,
style: {
flex: '1 1 auto',
marginLeft: '10px',
},
},
),
h('span.flex-column', {
style: {
flex: '10 10 auto',
width: '175px',
alignItems: 'flex-start',
justifyContent: 'center',
marginLeft: '10px',
position: 'relative',
},
}, [
this.indicateIfLoose(keyring),
h('span.account-dropdown-name', {
style: {
fontSize: '18px',
maxWidth: '145px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}, identity.name || ''),
h('span.account-dropdown-balance', {
style: {
fontSize: '14px',
fontFamily: 'Avenir',
fontWeight: 500,
},
}, formattedBalance),
]),
h('span', {
style: {
flex: '3 3 auto',
},
}, [
h('span.account-dropdown-edit-button.allcaps', {
style: {
fontSize: '16px',
},
onClick: () => {
actions.showEditAccountModal(identity)
},
}, [
this.context.t('edit'),
]),
]),
]),
]
)
})
}
indicateIfLoose (keyring) {
try { // Sometimes keyrings aren't loaded yet:
const type = keyring.type
const isLoose = type !== 'HD Key Tree'
return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
} catch (e) { return }
}
renderAccountSelector () {
const { actions, useCssTransition, innerStyle, sidebarOpen } = this.props
const { accountSelectorActive, menuItemStyles } = this.state
return h(
Dropdown,
{
useCssTransition,
style: {
marginLeft: '-185px',
marginTop: '50px',
minWidth: '180px',
overflowY: 'auto',
maxHeight: '300px',
width: '300px',
},
innerStyle,
isOpen: accountSelectorActive,
onClickOutside: (event) => {
const { classList } = event.target
const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
if (accountSelectorActive && isNotToggleElement) {
this.setState({ accountSelectorActive: false })
}
},
},
[
...this.renderAccounts(),
h(
DropdownMenuItem,
{
closeMenu: () => {},
style: Object.assign(
{},
menuItemStyles,
),
onClick: () => actions.showNewAccountPageCreateForm(),
},
[
h(
'i.fa.fa-plus.fa-lg',
{
style: {
marginLeft: '8px',
},
}
),
h('span', {
style: {
marginLeft: '14px',
fontFamily: 'DIN OT',
fontSize: '16px',
lineHeight: '23px',
},
}, this.context.t('createAccount')),
],
),
h(
DropdownMenuItem,
{
closeMenu: () => {
if (sidebarOpen) {
actions.hideSidebar()
}
},
onClick: () => actions.showNewAccountPageImportForm(),
style: Object.assign(
{},
menuItemStyles,
),
},
[
h(
'i.fa.fa-download.fa-lg',
{
style: {
marginLeft: '8px',
},
}
),
h('span', {
style: {
marginLeft: '20px',
marginBottom: '5px',
fontFamily: 'DIN OT',
fontSize: '16px',
lineHeight: '23px',
},
}, this.context.t('importAccount')),
]
),
]
)
}
renderAccountOptions () {
const { actions, dropdownWrapperStyle, useCssTransition } = this.props
const { optionsMenuActive, menuItemStyles } = this.state
const dropdownMenuItemStyle = {
fontFamily: 'DIN OT',
fontSize: 16,
lineHeight: '24px',
padding: '8px',
}
return h(
Dropdown,
{
useCssTransition,
style: Object.assign(
{
marginLeft: '-10px',
position: 'absolute',
width: '29vh', // affects both mobile and laptop views
},
dropdownWrapperStyle,
),
isOpen: optionsMenuActive,
onClickOutside: (event) => {
const { classList } = event.target
const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
if (optionsMenuActive && isNotToggleElement) {
this.setState({ optionsMenuActive: false })
}
},
},
[
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
this.props.actions.showAccountDetailModal()
},
style: Object.assign(
dropdownMenuItemStyle,
menuItemStyles,
),
},
this.context.t('accountDetails'),
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
const { selected, network } = this.props
const url = genAccountLink(selected, network)
global.platform.openWindow({ url })
},
style: Object.assign(
dropdownMenuItemStyle,
menuItemStyles,
),
},
this.context.t('etherscanView'),
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
const { selected } = this.props
copyToClipboard(checksumAddress(selected))
},
style: Object.assign(
dropdownMenuItemStyle,
menuItemStyles,
),
},
this.context.t('copyAddress'),
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => this.props.actions.showExportPrivateKeyModal(),
style: Object.assign(
dropdownMenuItemStyle,
menuItemStyles,
),
},
this.context.t('exportPrivateKey'),
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
actions.hideSidebar()
actions.showAddTokenPage()
},
style: Object.assign(
dropdownMenuItemStyle,
menuItemStyles,
),
},
this.context.t('addToken'),
),
]
)
}
render () {
const { style, enableAccountsSelector, enableAccountOptions } = this.props
const { optionsMenuActive, accountSelectorActive } = this.state
return h(
'span',
{
style: style,
},
[
enableAccountsSelector && h(
'i.fa.fa-angle-down',
{
style: {
cursor: 'pointer',
},
onClick: (event) => {
event.stopPropagation()
this.setState({
accountSelectorActive: !accountSelectorActive,
optionsMenuActive: false,
})
},
},
this.renderAccountSelector(),
),
enableAccountOptions && h(
'i.fa.fa-ellipsis-h',
{
style: {
fontSize: '135%',
cursor: 'pointer',
},
onClick: (event) => {
event.stopPropagation()
this.setState({
accountSelectorActive: false,
optionsMenuActive: !optionsMenuActive,
})
},
},
this.renderAccountOptions()
),
]
)
}
}
AccountDropdowns.defaultProps = {
enableAccountsSelector: false,
enableAccountOptions: false,
}
AccountDropdowns.propTypes = {
identities: PropTypes.objectOf(PropTypes.object),
selected: PropTypes.string,
keyrings: PropTypes.array,
accounts: PropTypes.object,
menuItemStyles: PropTypes.object,
actions: PropTypes.object,
// actions.showAccountDetail: ,
useCssTransition: PropTypes.bool,
innerStyle: PropTypes.object,
sidebarOpen: PropTypes.bool,
dropdownWrapperStyle: PropTypes.string,
// actions.showAccountDetailModal: ,
network: PropTypes.number,
// actions.showExportPrivateKeyModal: ,
style: PropTypes.object,
ticker: PropTypes.string,
enableAccountsSelector: PropTypes.bool,
enableAccountOption: PropTypes.bool,
enableAccountOptions: PropTypes.bool,
t: PropTypes.func,
}
const mapDispatchToProps = (dispatch) => {
return {
actions: {
hideSidebar: () => dispatch(actions.hideSidebar()),
showConfigPage: () => dispatch(actions.showConfigPage()),
showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
showAccountDetailModal: () => {
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
},
showEditAccountModal: (identity) => {
dispatch(actions.showModal({
name: 'EDIT_ACCOUNT_NAME',
identity,
}))
},
showNewAccountPageCreateForm: () => dispatch(actions.showNewAccountPage({ form: 'CREATE' })),
showExportPrivateKeyModal: () => {
dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
},
showAddTokenPage: () => {
dispatch(actions.showAddTokenPage())
},
addNewAccount: () => dispatch(actions.addNewAccount()),
showNewAccountPageImportForm: () => dispatch(actions.showNewAccountPage({ form: 'IMPORT' })),
showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
},
}
}
function mapStateToProps (state) {
return {
ticker: state.metamask.ticker,
keyrings: state.metamask.keyrings,
sidebarOpen: state.appState.sidebar.isOpen,
}
}
AccountDropdowns.contextTypes = {
t: PropTypes.func,
}
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns)
Write Preview
Loading…
Cancel
Save