token menu

This commit is contained in:
Victor Baranov 2018-09-20 17:36:44 +03:00
parent 09e3d99c17
commit a0da1a5ae9
9 changed files with 135 additions and 56 deletions

View File

@ -96,7 +96,7 @@ workflows:
jobs:
prep-deps-npm:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -104,14 +104,14 @@ jobs:
- run:
name: Install npm 6 + deps via npm
command: |
sudo npm install -g npm@6.1.0 && npm install --no-save
sudo npm install -g npm@6.4.1 && npm install --no-save
- save_cache:
key: dependency-cache-{{ .Revision }}
paths:
- node_modules
prep-deps-firefox:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -126,7 +126,7 @@ jobs:
prep-build:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -145,7 +145,7 @@ jobs:
prep-docs:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -160,7 +160,7 @@ jobs:
prep-scss:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -179,7 +179,7 @@ jobs:
test-lint:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -190,7 +190,7 @@ jobs:
test-deps:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -201,7 +201,7 @@ jobs:
test-e2e-chrome:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -217,7 +217,7 @@ jobs:
test-e2e-firefox:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -238,7 +238,7 @@ jobs:
test-e2e-beta-chrome:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -254,7 +254,7 @@ jobs:
test-e2e-beta-firefox:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -275,7 +275,7 @@ jobs:
job-screens:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -292,7 +292,7 @@ jobs:
job-publish-prerelease:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -319,7 +319,7 @@ jobs:
job-publish-release:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -332,7 +332,7 @@ jobs:
job-publish-postrelease:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -355,7 +355,7 @@ jobs:
test-unit:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -368,7 +368,7 @@ jobs:
environment:
browsers: '["Firefox"]'
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -392,7 +392,7 @@ jobs:
environment:
browsers: '["Chrome"]'
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -411,7 +411,7 @@ jobs:
environment:
browsers: '["Firefox"]'
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -435,7 +435,7 @@ jobs:
environment:
browsers: '["Chrome"]'
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- checkout
- restore_cache:
@ -452,7 +452,7 @@ jobs:
all-tests-pass:
docker:
- image: circleci/node:8.11.4-browsers
- image: circleci/node:8.12.0-browsers
steps:
- run:
name: All Tests Passed

2
.nvmrc
View File

@ -1 +1 @@
v8.11.4
v8.12.0

View File

@ -177,17 +177,14 @@ class AccountDropdowns extends Component {
}
renderAccountOptions () {
const { actions, network } = this.props
const { actions } = this.props
const { optionsMenuActive } = this.state
const isSokol = parseInt(network) === 77
const isPOA = parseInt(network) === 99
const explorerStr = (isSokol || isPOA) ? 'POA explorer' : 'Etherscan'
return h(
Dropdown,
{
style: {
position: 'relative',
marginLeft: '-234px',
minWidth: '180px',
marginTop: '30px',
@ -213,7 +210,7 @@ class AccountDropdowns extends Component {
global.platform.openWindow({ url })
},
},
`View account on ${explorerStr}`,
`View on block explorer`,
),
h(
DropdownMenuItem,
@ -237,7 +234,7 @@ class AccountDropdowns extends Component {
copyToClipboard(checkSumAddress)
},
},
'Copy Address to clipboard',
'Copy address to clipboard',
),
h(
DropdownMenuItem,
@ -283,15 +280,8 @@ class AccountDropdowns extends Component {
this.renderAccountSelector(),
),
enableAccountOptions && h(
'div.account-dropdown',
'div.address-dropdown.account-dropdown',
{
style: {
backgroundImage: 'url(../images/more.svg)',
width: '30px',
height: '24px',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
},
onClick: (event) => {
event.stopPropagation()
this.setState({

View File

@ -20,7 +20,6 @@ function DeleteImportedAccount () {
}
DeleteImportedAccount.prototype.render = function () {
console.log('this.props:', this.props)
return h('.flex-column.flex-grow', {
style: {
overflowX: 'auto',

View File

@ -3,23 +3,32 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits
const Identicon = require('./identicon')
const ethNetProps = require('eth-net-props')
const Dropdown = require('./dropdown').Dropdown
const DropdownMenuItem = require('./dropdown').DropdownMenuItem
const ethUtil = require('ethereumjs-util')
const copyToClipboard = require('copy-to-clipboard')
module.exports = TokenCell
inherits(TokenCell, Component)
function TokenCell () {
Component.call(this)
this.state = {
optionsMenuActive: false,
}
this.optionsMenuToggleClassName = 'token-dropdown'
}
TokenCell.prototype.render = function () {
const props = this.props
const { address, symbol, string, network, userAddress } = props
const { address, symbol, string, network, userAddress, isLastTokenCell, menuToTop } = this.props
const { optionsMenuActive } = this.state
return (
h('li.token-cell', {
style: {
cursor: network === '1' ? 'pointer' : 'default',
borderBottom: props.isLastTokenCell ? 'none' : '1px solid #e2e2e2',
borderBottom: isLastTokenCell ? 'none' : '1px solid #e2e2e2',
padding: '20px 0',
margin: '0 30px',
},
@ -41,13 +50,18 @@ TokenCell.prototype.render = function () {
h('span', { style: { flex: '1 0 auto' } }),
h('span.trash', {
style: { cursor: 'pointer' },
onClick: (event) => {
event.stopPropagation()
this.props.removeToken({ address, symbol, string, network, userAddress })
h('div.address-dropdown.token-dropdown',
{
style: { cursor: 'pointer' },
onClick: (event) => {
event.stopPropagation()
this.setState({
optionsMenuActive: !optionsMenuActive,
})
},
},
}, ''),
this.renderTokenOptions(menuToTop)
),
/*
h('button', {
@ -59,6 +73,67 @@ TokenCell.prototype.render = function () {
)
}
TokenCell.prototype.renderTokenOptions = function (menuToTop) {
const { address, symbol, string, network, userAddress } = this.props
const { optionsMenuActive } = this.state
return h(
Dropdown,
{
style: {
position: 'relative',
marginLeft: '-263px',
minWidth: '180px',
marginTop: menuToTop ? '-200px' : '30px',
width: '280px',
},
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 { network } = this.props
const url = ethNetProps.explorerLinks.getExplorerTokenLinkFor(address, userAddress, network)
global.platform.openWindow({ url })
},
},
`View token on block explorer`,
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
const checkSumAddress = address && ethUtil.toChecksumAddress(address)
copyToClipboard(checkSumAddress)
},
},
'Copy address to clipboard',
),
h(
DropdownMenuItem,
{
closeMenu: () => {},
onClick: () => {
this.props.removeToken({ address, symbol, string, network, userAddress })
},
},
'Remove',
),
]
)
}
TokenCell.prototype.send = function (address, event) {
event.preventDefault()
event.stopPropagation()

View File

@ -52,10 +52,17 @@ TokenList.prototype.render = function () {
const tokenViews = tokensFromCurrentNetwork.map((tokenData, ind) => {
tokenData.userAddress = userAddress
const isLastTokenCell = ind === (tokens.length - 1)
const isPenultimateTokenCell = ind === (tokensFromCurrentNetwork.length - 2)
const isLastTokenCell = ind === (tokensFromCurrentNetwork.length - 1)
const multipleTokens = tokensFromCurrentNetwork.length > 1
const more2Tokens = tokensFromCurrentNetwork.length > 2
const last2Tokens = more2Tokens && (isLastTokenCell || isPenultimateTokenCell)
const last1Token = !more2Tokens && isLastTokenCell
const menuToTop = multipleTokens && (last1Token || last2Tokens)
return h(TokenCell, {
...tokenData,
isLastTokenCell,
menuToTop,
removeToken: this.props.removeToken,
})
})

View File

@ -29,6 +29,14 @@ html {
overflow: -moz-scrollbars-none;
}
.address-dropdown {
background-image: url(../images/more.svg);
width: 30px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
}
.account-detail-section::-webkit-scrollbar {
width: 0;
}

8
package-lock.json generated
View File

@ -8453,7 +8453,7 @@
}
},
"eth-contract-metadata": {
"version": "github:MetaMask/eth-contract-metadata#966a891dd9c79b873fd8968a0155b067ca630502",
"version": "github:MetaMask/eth-contract-metadata#bd23fa120512dcbb6fad31559297f96f17c3a8e0",
"from": "github:MetaMask/eth-contract-metadata#master"
},
"eth-ens-namehash": {
@ -8754,9 +8754,9 @@
}
},
"eth-net-props": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/eth-net-props/-/eth-net-props-1.0.2.tgz",
"integrity": "sha512-lstMFwDb3GU3mUmWi1aGT+JlcK2qf54E+edE5x6uLrJEPr9ZYrFCuTaXyXZU8R1CEHTSaDtwRB7iTyTBVsIzoQ==",
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/eth-net-props/-/eth-net-props-1.0.3.tgz",
"integrity": "sha512-iHY/o2/JwEk+HOTFmn5ju1LXsMf+qNsJZ30SdD3WZ9PJH9jc7lqI6fh80xQHWqV7Q2pkZqD5YvO3G6fdrKzQ0Q==",
"requires": {
"chai": "^4.1.2"
}

View File

@ -109,7 +109,7 @@
"eth-json-rpc-filters": "^1.2.6",
"eth-json-rpc-infura": "^3.0.0",
"eth-method-registry": "^1.0.0",
"eth-net-props": "^1.0.2",
"eth-net-props": "^1.0.3",
"eth-phishing-detect": "^1.1.4",
"eth-query": "^2.1.2",
"eth-sig-util": "^1.4.2",
@ -318,7 +318,7 @@
"watchify": "^3.11.0"
},
"engines": {
"node": "8.11.4",
"npm": "^6.1.0"
"node": "8.12.0",
"npm": "^6.4.1"
}
}