token menu
This commit is contained in:
parent
09e3d99c17
commit
a0da1a5ae9
|
@ -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
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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,
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue