+ 
-
-
{ this.context.t('appName') }
-
- { this.context.t('beta') }
-
-
-
+
{
const identity = identities[key]
const isSelected = identity.address === selected
const balanceValue = accounts[key].balance
- const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
const simpleAddress = identity.address.substring(2).toLowerCase()
+ let formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+ if (ticker !== 'ETH') {
+ formattedBalance = formattedBalance.replace(/ETH/, ticker)
+ }
const keyring = keyrings.find((kr) => {
return kr.accounts.includes(simpleAddress) ||
@@ -253,6 +256,11 @@ class AccountDropdowns extends Component {
padding: '8px',
}
+ let link
+ if (this.props.settings && this.props.settings.blockExplorerAddr) {
+ link = this.props.settings.blockExplorerAddr
+ }
+
return h(
Dropdown,
{
@@ -295,7 +303,7 @@ class AccountDropdowns extends Component {
closeMenu: () => {},
onClick: () => {
const { selected, network } = this.props
- const url = genAccountLink(selected, network)
+ const url = genAccountLink(selected, network, link)
global.platform.openWindow({ url })
},
style: Object.assign(
@@ -421,6 +429,8 @@ AccountDropdowns.propTypes = {
network: PropTypes.number,
// actions.showExportPrivateKeyModal: ,
style: PropTypes.object,
+ settings: PropTypes.object,
+ ticker: PropTypes.string,
enableAccountsSelector: PropTypes.bool,
enableAccountOption: PropTypes.bool,
enableAccountOptions: PropTypes.bool,
@@ -458,8 +468,10 @@ const mapDispatchToProps = (dispatch) => {
function mapStateToProps (state) {
return {
+ ticker: state.metamask.ticker,
keyrings: state.metamask.keyrings,
sidebarOpen: state.appState.sidebarOpen,
+ settings: state.metamask.settings,
}
}
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index e5363ff56a25..df77d1220c5a 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -24,8 +24,9 @@ const notToggleElementClassnames = [
function mapStateToProps (state) {
return {
provider: state.metamask.provider,
- frequentRpcList: state.metamask.frequentRpcList || [],
+ frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
networkDropdownOpen: state.appState.networkDropdownOpen,
+ network: state.metamask.network,
}
}
@@ -40,8 +41,8 @@ function mapDispatchToProps (dispatch) {
setDefaultRpcTarget: type => {
dispatch(actions.setDefaultRpcTarget(type))
},
- setRpcTarget: (target) => {
- dispatch(actions.setRpcTarget(target))
+ setRpcTarget: (target, network) => {
+ dispatch(actions.setRpcTarget(target, network))
},
showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
@@ -68,7 +69,7 @@ module.exports = compose(
NetworkDropdown.prototype.render = function () {
const props = this.props
const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
- const rpcList = props.frequentRpcList
+ const rpcListDetail = props.frequentRpcListDetail
const isOpen = this.props.networkDropdownOpen
const dropdownMenuItemStyle = {
fontSize: '16px',
@@ -199,6 +200,28 @@ NetworkDropdown.prototype.render = function () {
]
),
+ h(
+ DropdownMenuItem,
+ {
+ key: 'classic',
+ closeMenu: () => this.props.hideNetworkDropdown(),
+ onClick: () => props.setProviderType('classic'),
+ style: dropdownMenuItemStyle,
+ },
+ [
+ providerType === 'classic' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+ h(NetworkDropdownIcon, {
+ backgroundColor: '#228B22', // forest green
+ isSelected: providerType === 'classic',
+ }),
+ h('span.network-name-item', {
+ style: {
+ color: providerType === 'classic' ? '#ffffff' : '#9b9b9b',
+ },
+ }, this.context.t('classic')),
+ ]
+ ),
+
h(
DropdownMenuItem,
{
@@ -222,7 +245,7 @@ NetworkDropdown.prototype.render = function () {
),
this.renderCustomOption(props.provider),
- this.renderCommonRpc(rpcList, props.provider),
+ this.renderCommonRpc(rpcListDetail, props.provider),
h(
DropdownMenuItem,
@@ -263,6 +286,8 @@ NetworkDropdown.prototype.getNetworkName = function () {
name = this.context.t('kovan')
} else if (providerName === 'rinkeby') {
name = this.context.t('rinkeby')
+ } else if (providerName === 'classic') {
+ name = this.context.t('classic')
} else {
name = this.context.t('unknownNetwork')
}
@@ -270,20 +295,24 @@ NetworkDropdown.prototype.getNetworkName = function () {
return name
}
-NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
+NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) {
const props = this.props
- const rpcTarget = provider.rpcTarget
+ const { rpcTarget, type } = provider
+ const network = props.network
- return rpcList.map((rpc) => {
- if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
+ return rpcListDetail.map((entry) => {
+ const rpc = entry.rpcUrl
+ const selected = type === 'rpc' && rpcTarget === rpc
+ if ((rpc === 'http://localhost:8545') || selected) {
return null
} else {
+ const chainId = entry.chainId || network
return h(
DropdownMenuItem,
{
key: `common${rpc}`,
closeMenu: () => this.props.hideNetworkDropdown(),
- onClick: () => props.setRpcTarget(rpc),
+ onClick: () => props.setRpcTarget(rpc, chainId),
style: {
fontSize: '16px',
lineHeight: '20px',
@@ -291,11 +320,11 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
},
},
[
- rpcTarget === rpc ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+ selected ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
h('span.network-name-item', {
style: {
- color: rpcTarget === rpc ? '#ffffff' : '#9b9b9b',
+ color: selected ? '#ffffff' : '#9b9b9b',
},
}, rpc),
]
@@ -307,6 +336,7 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
NetworkDropdown.prototype.renderCustomOption = function (provider) {
const { rpcTarget, type } = provider
const props = this.props
+ const network = props.network
if (type !== 'rpc') return null
@@ -320,7 +350,7 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
DropdownMenuItem,
{
key: rpcTarget,
- onClick: () => props.setRpcTarget(rpcTarget),
+ onClick: () => props.setRpcTarget(rpcTarget, network),
closeMenu: () => this.props.hideNetworkDropdown(),
style: {
fontSize: '16px',
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index 5a794c7c186e..4ffab823d2ec 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -4,7 +4,7 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../../actions')
-const genAccountLink = require('etherscan-link').createAccountLink
+const genAccountLink = require('../../../lib/account-link.js')
const copyToClipboard = require('copy-to-clipboard')
const { Menu, Item, CloseArea } = require('./components/menu')
@@ -17,6 +17,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenMenuDropdown)
function mapStateToProps (state) {
return {
network: state.metamask.network,
+ settings: state.metamask.settings,
}
}
@@ -67,7 +68,11 @@ TokenMenuDropdown.prototype.render = function () {
h(Item, {
onClick: (e) => {
e.stopPropagation()
- const url = genAccountLink(this.props.token.address, this.props.network)
+ let url
+ if (this.props.settings && this.props.settings.blockExplorerAddr) {
+ url = this.props.settings.blockExplorerAddr
+ }
+ url = genAccountLink(this.props.token.address, this.props.network, url)
global.platform.openWindow({ url })
this.props.onClose()
},
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index c3d084bdcb22..dcf865535c1a 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -1,5 +1,6 @@
const { Component } = require('react')
const h = require('react-hyperscript')
+const connect = require('react-redux').connect
const { inherits } = require('util')
const {
formatBalance,
@@ -8,7 +9,12 @@ const {
const Tooltip = require('./tooltip.js')
const FiatValue = require('./fiat-value.js')
-module.exports = EthBalanceComponent
+module.exports = connect(mapStateToProps)(EthBalanceComponent)
+function mapStateToProps (state) {
+ return {
+ ticker: state.metamask.ticker,
+ }
+}
inherits(EthBalanceComponent, Component)
function EthBalanceComponent () {
@@ -17,9 +23,12 @@ function EthBalanceComponent () {
EthBalanceComponent.prototype.render = function () {
const props = this.props
- const { value, style, width, needsParse = true } = props
+ const { ticker, value, style, width, needsParse = true } = props
- const formattedValue = value ? formatBalance(value, 6, needsParse) : '...'
+ let formattedValue = value ? formatBalance(value, 6, needsParse) : '...'
+ if (ticker !== 'ETH') {
+ formattedValue = formattedValue.replace(/ETH/, ticker)
+ }
return (
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 4240487451ed..bfbeb110942e 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -20,15 +20,22 @@ function IdenticonComponent () {
function mapStateToProps (state) {
return {
+ ticker: state.metamask.ticker,
useBlockie: state.metamask.useBlockie,
}
}
IdenticonComponent.prototype.render = function () {
var props = this.props
- const { className = '', address } = props
+ const { className = '', address, ticker } = props
var diameter = props.diameter || this.defaultDiameter
+ // default logo
+ var logo = './images/eth_logo.svg'
+ if (ticker && ticker !== 'ETH') {
+ logo = `./images/${ticker.toLowerCase()}_logo.svg`
+ }
+
return address
? (
h('div', {
@@ -48,7 +55,7 @@ IdenticonComponent.prototype.render = function () {
)
: (
h('img.balance-icon', {
- src: './images/eth_logo.svg',
+ src: logo,
style: {
height: diameter,
width: diameter,
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index b3e14ce23186..35d38e2a3ad5 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -19,3 +19,5 @@
@import './sender-to-recipient/index';
@import './tabs/index';
+
+@import './app-header/index';
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 5607cf0512bf..ad3a47009b35 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -14,6 +14,8 @@ function mapStateToProps (state) {
return {
network: state.metamask.network,
selectedIdentity: getSelectedIdentity(state),
+ keyrings: state.metamask.keyrings,
+ settings: state.metamask.settings,
}
}
@@ -50,9 +52,25 @@ AccountDetailsModal.prototype.render = function () {
network,
showExportPrivateKeyModal,
setAccountLabel,
+ keyrings,
} = this.props
const { name, address } = selectedIdentity
+ const keyring = keyrings.find((kr) => {
+ return kr.accounts.includes(address)
+ })
+
+ let exportPrivateKeyFeatureEnabled = true
+ // This feature is disabled for hardware wallets
+ if (keyring.type.search('Hardware') !== -1) {
+ exportPrivateKeyFeatureEnabled = false
+ }
+
+ let link
+ if (this.props.settings && this.props.settings.blockExplorerAddr) {
+ link = this.props.settings.blockExplorerAddr
+ }
+
return h(AccountModalContainer, {}, [
h(EditableLabel, {
className: 'account-modal__name',
@@ -69,13 +87,13 @@ AccountDetailsModal.prototype.render = function () {
h('div.account-modal-divider'),
h('button.btn-primary.account-modal__button', {
- onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
+ onClick: () => global.platform.openWindow({ url: genAccountLink(address, network, link) }),
}, this.context.t('etherscanView')),
// Holding on redesign for Export Private Key functionality
- h('button.btn-primary.account-modal__button', {
+ exportPrivateKeyFeatureEnabled ? h('button.btn-primary.account-modal__button', {
onClick: () => showExportPrivateKeyModal(),
- }, this.context.t('exportPrivateKey')),
+ }, this.context.t('exportPrivateKey')) : null,
])
}
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index c70510b5fcde..a4b8458faadf 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -10,6 +10,7 @@ function mapStateToProps (state) {
return {
network: state.metamask.network,
address: state.metamask.selectedAddress,
+ settings: state.metamask.settings,
}
}
@@ -24,7 +25,7 @@ function mapDispatchToProps (dispatch) {
showAccountDetailModal: () => {
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
},
- toFaucet: network => dispatch(actions.buyEth({ network })),
+ toFaucet: (network, address, link) => dispatch(actions.buyEth({ network, address, amount: 0, link })),
}
}
@@ -51,9 +52,15 @@ BuyOptions.prototype.renderModalContentOption = function (title, header, onClick
BuyOptions.prototype.render = function () {
const { network, toCoinbase, address, toFaucet } = this.props
- const isTestNetwork = ['3', '4', '42'].find(n => n === network)
+ let isTestNetwork = ['3', '4', '42'].find(n => n === network)
const networkName = getNetworkDisplayName(network)
+ let link
+ if (this.props.settings.isTestNet) {
+ isTestNetwork = true
+ link = this.props.settings.buyUrl
+ }
+
return h('div', {}, [
h('div.buy-modal-content.transfers-subview', {
}, [
@@ -69,7 +76,7 @@ BuyOptions.prototype.render = function () {
h('div.buy-modal-content-options.flex-column.flex-center', {}, [
isTestNetwork
- ? this.renderModalContentOption(networkName, this.context.t('testFaucet'), () => toFaucet(network))
+ ? this.renderModalContentOption(networkName, this.context.t('testFaucet'), () => toFaucet(network, address, link))
: this.renderModalContentOption('Coinbase', this.context.t('depositFiat'), () => toCoinbase(address)),
// h('div.buy-modal-content-option', {}, [
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 2daa7fa1d75a..d24a326a5a27 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -19,6 +19,7 @@ function mapStateToProps (state) {
return {
network: state.metamask.network,
address: state.metamask.selectedAddress,
+ settings: state.metamask.settings,
}
}
@@ -36,7 +37,7 @@ function mapDispatchToProps (dispatch) {
showAccountDetailModal: () => {
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
},
- toFaucet: network => dispatch(actions.buyEth({ network })),
+ toFaucet: (network, address, link) => dispatch(actions.buyEth({ network, address, amount: 0, link })),
}
}
@@ -119,9 +120,25 @@ DepositEtherModal.prototype.renderRow = function ({
DepositEtherModal.prototype.render = function () {
const { network, toCoinbase, address, toFaucet } = this.props
- const { buyingWithShapeshift } = this.state
+ let { buyingWithShapeshift } = this.state
+ let isTestNetwork = ['3', '4', '42'].find(n => n === network)
+ let noCoinbase = false
+ let noShapeShift = false
+
+ if (this.props.settings.exchanges) {
+ if (this.props.settings.exchanges.indexOf('Coinbase') === -1) {
+ noCoinbase = true
+ }
+ if (this.props.settings.exchanges.indexOf('ShapeShift') === -1) {
+ noShapeShift = true
+ }
+ }
+ let link
+ if (this.props.settings.isTestNet) {
+ isTestNetwork = true
+ link = this.props.settings.buyUrl
+ }
- const isTestNetwork = ['3', '4', '42'].find(n => n === network)
const networkName = getNetworkDisplayName(network)
return h('div.page-container.page-container--full-width.page-container--full-height', {}, [
@@ -164,7 +181,7 @@ DepositEtherModal.prototype.render = function () {
title: FAUCET_ROW_TITLE,
text: this.facuetRowText(networkName),
buttonLabel: this.context.t('getEther'),
- onButtonClick: () => toFaucet(network),
+ onButtonClick: () => toFaucet(network, address, link),
hide: !isTestNetwork || buyingWithShapeshift,
}),
@@ -179,7 +196,7 @@ DepositEtherModal.prototype.render = function () {
text: COINBASE_ROW_TEXT,
buttonLabel: this.context.t('continueToCoinbase'),
onButtonClick: () => toCoinbase(address),
- hide: isTestNetwork || buyingWithShapeshift,
+ hide: noCoinbase || isTestNetwork || buyingWithShapeshift,
}),
this.renderRow({
@@ -192,7 +209,7 @@ DepositEtherModal.prototype.render = function () {
text: SHAPESHIFT_ROW_TEXT,
buttonLabel: this.context.t('shapeshiftBuy'),
onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
- hide: isTestNetwork,
+ hide: noShapeShift || isTestNetwork,
hideButton: buyingWithShapeshift,
hideTitle: buyingWithShapeshift,
onBackClick: () => this.setState({ buyingWithShapeshift: false }),
diff --git a/ui/app/components/network-display/index.scss b/ui/app/components/network-display/index.scss
index 2085cff67cc3..89d46a7b18f5 100644
--- a/ui/app/components/network-display/index.scss
+++ b/ui/app/components/network-display/index.scss
@@ -23,6 +23,10 @@
&--rinkeby {
background-color: lighten($tulip-tree, 35%);
}
+
+ &--classic {
+ background-color: lighten($java, 45%);
+ }
}
&__name {
@@ -50,5 +54,9 @@
&--rinkeby {
background-color: $tulip-tree;
}
+
+ &--classic {
+ background-color: $java;
+ }
}
}
diff --git a/ui/app/components/network-display/network-display.component.js b/ui/app/components/network-display/network-display.component.js
index 38626af20667..64913bdae263 100644
--- a/ui/app/components/network-display/network-display.component.js
+++ b/ui/app/components/network-display/network-display.component.js
@@ -6,6 +6,7 @@ import {
ROPSTEN_CODE,
RINKEYBY_CODE,
KOVAN_CODE,
+ CLASSIC_CODE,
} from '../../../../app/scripts/controllers/network/enums'
const networkToClassHash = {
@@ -13,6 +14,7 @@ const networkToClassHash = {
[ROPSTEN_CODE]: 'ropsten',
[RINKEYBY_CODE]: 'rinkeby',
[KOVAN_CODE]: 'kovan',
+ [CLASSIC_CODE]: 'classic',
}
export default class NetworkDisplay extends Component {
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 83297c4f2251..832f5f1c8abc 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -63,6 +63,9 @@ Network.prototype.render = function () {
} else if (providerName === 'rinkeby') {
hoverText = context.t('rinkeby')
iconName = 'rinkeby-test-network'
+ } else if (providerName === 'classic') {
+ hoverText = context.t('classic')
+ iconName = 'ethereum-classic-network'
} else {
hoverText = context.t('unknownNetwork')
iconName = 'unknown-private-network'
@@ -76,6 +79,7 @@ Network.prototype.render = function () {
'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
'kovan-test-network': providerName === 'kovan',
'rinkeby-test-network': providerName === 'rinkeby',
+ 'ethereum-classic-network': providerName === 'classic',
}),
title: hoverText,
onClick: (event) => {
@@ -122,6 +126,15 @@ Network.prototype.render = function () {
h('.network-name', context.t('rinkeby')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
+ case 'ethereum-classic-network':
+ return h('.network-indicator', [
+ h(NetworkDropdownIcon, {
+ backgroundColor: '#228B22', // green
+ nonSelectBackgroundColor: '#46893D',
+ }),
+ h('.network-name', context.t('classic')),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ ])
default:
return h('.network-indicator', [
h('i.fa.fa-question-circle.fa-lg', {
diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js
index c722d1f551e0..488a189eac8c 100644
--- a/ui/app/components/pages/create-account/connect-hardware/account-list.js
+++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js
@@ -2,16 +2,75 @@ const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const genAccountLink = require('../../../../../lib/account-link.js')
+const Select = require('react-select').default
class AccountList extends Component {
constructor (props, context) {
super(props)
}
+ getHdPaths () {
+ return [
+ {
+ label: `Ledger Live`,
+ value: `m/44'/60'/0'/0/0`,
+ },
+ {
+ label: `Legacy (MEW / MyCrypto)`,
+ value: `m/44'/60'/0'`,
+ },
+ ]
+ }
+
+ goToNextPage = () => {
+ // If we have < 5 accounts, it's restricted by BIP-44
+ if (this.props.accounts.length === 5) {
+ this.props.getPage(this.props.device, 1, this.props.selectedPath)
+ } else {
+ this.props.onAccountRestriction()
+ }
+ }
+
+ goToPreviousPage = () => {
+ this.props.getPage(this.props.device, -1, this.props.selectedPath)
+ }
+
+ renderHdPathSelector () {
+ const { onPathChange, selectedPath } = this.props
+
+ const options = this.getHdPaths()
+ return h('div', [
+ h('h3.hw-connect__hdPath__title', {}, this.context.t('selectHdPath')),
+ h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')),
+ h('div.hw-connect__hdPath', [
+ h(Select, {
+ className: 'hw-connect__hdPath__select',
+ name: 'hd-path-select',
+ clearable: false,
+ value: selectedPath,
+ options,
+ onChange: (opt) => {
+ onPathChange(opt.value)
+ },
+ }),
+ ]),
+ ])
+ }
+
+ capitalizeDevice (device) {
+ return device.slice(0, 1).toUpperCase() + device.slice(1)
+ }
+
renderHeader () {
+ const { device } = this.props
return (
h('div.hw-connect', [
- h('h3.hw-connect__title', {}, this.context.t('selectAnAccount')),
+
+ h('h3.hw-connect__unlock-title', {}, `${this.context.t('unlock')} ${this.capitalizeDevice(device)}`),
+
+ device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null,
+
+ h('h3.hw-connect__hdPath__title', {}, this.context.t('selectAnAccount')),
h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')),
])
)
@@ -61,7 +120,7 @@ class AccountList extends Component {
h(
'button.hw-list-pagination__button',
{
- onClick: () => this.props.getPage(-1),
+ onClick: this.goToPreviousPage,
},
`< ${this.context.t('prev')}`
),
@@ -69,7 +128,7 @@ class AccountList extends Component {
h(
'button.hw-list-pagination__button',
{
- onClick: () => this.props.getPage(1),
+ onClick: this.goToNextPage,
},
`${this.context.t('next')} >`
),
@@ -95,7 +154,7 @@ class AccountList extends Component {
h(
`button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`,
{
- onClick: this.props.onUnlockAccount.bind(this),
+ onClick: this.props.onUnlockAccount.bind(this, this.props.device),
...buttonProps,
},
[this.context.t('unlock')]
@@ -106,7 +165,7 @@ class AccountList extends Component {
renderForgetDevice () {
return h('div.hw-forget-device-container', {}, [
h('a', {
- onClick: this.props.onForgetDevice.bind(this),
+ onClick: this.props.onForgetDevice.bind(this, this.props.device),
}, this.context.t('forgetDevice')),
])
}
@@ -125,6 +184,9 @@ class AccountList extends Component {
AccountList.propTypes = {
+ onPathChange: PropTypes.func.isRequired,
+ selectedPath: PropTypes.string.isRequired,
+ device: PropTypes.string.isRequired,
accounts: PropTypes.array.isRequired,
onAccountChange: PropTypes.func.isRequired,
onForgetDevice: PropTypes.func.isRequired,
@@ -134,6 +196,7 @@ AccountList.propTypes = {
history: PropTypes.object,
onUnlockAccount: PropTypes.func,
onCancel: PropTypes.func,
+ onAccountRestriction: PropTypes.func,
}
AccountList.contextTypes = {
diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
index cb2b865958ef..b3dfa4ee2a78 100644
--- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
+++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
@@ -5,6 +5,52 @@ const h = require('react-hyperscript')
class ConnectScreen extends Component {
constructor (props, context) {
super(props)
+ this.state = {
+ selectedDevice: null,
+ }
+ }
+
+ connect = () => {
+ if (this.state.selectedDevice) {
+ this.props.connectToHardwareWallet(this.state.selectedDevice)
+ }
+ return null
+ }
+
+ renderConnectToTrezorButton () {
+ return h(
+ `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
+ { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
+ h('img.hw-connect__btn__img', {
+ src: 'images/trezor-logo.svg',
+ })
+ )
+ }
+
+ renderConnectToLedgerButton () {
+ return h(
+ `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
+ { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
+ h('img.hw-connect__btn__img', {
+ src: 'images/ledger-logo.svg',
+ })
+ )
+ }
+
+ renderButtons () {
+ return (
+ h('div', {}, [
+ h('div.hw-connect__btn-wrapper', {}, [
+ this.renderConnectToLedgerButton(),
+ this.renderConnectToTrezorButton(),
+ ]),
+ h(
+ `button.hw-connect__connect-btn${!this.state.selectedDevice ? '.disabled' : ''}`,
+ { onClick: this.connect },
+ this.context.t('connect')
+ ),
+ ])
+ )
}
renderUnsupportedBrowser () {
@@ -12,7 +58,7 @@ class ConnectScreen extends Component {
h('div.new-account-connect-form.unsupported-browser', {}, [
h('div.hw-connect', [
h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
- h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForTrezor')),
+ h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
]),
h(
'button.btn-primary.btn--large',
@@ -30,29 +76,31 @@ class ConnectScreen extends Component {
renderHeader () {
return (
h('div.hw-connect__header', {}, [
- h('h3.hw-connect__header__title', {}, this.context.t(`hardwareSupport`)),
- h('p.hw-connect__header__msg', {}, this.context.t(`hardwareSupportMsg`)),
+ h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)),
+ h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)),
])
)
}
+ getAffiliateLinks () {
+ const links = {
+ trezor: `Trezor`,
+ ledger: `Ledger`,
+ }
+
+ const text = this.context.t('orderOneHere')
+ const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger)
+
+ return h('div.hw-connect__get-hw__msg', { dangerouslySetInnerHTML: {__html: response }})
+ }
+
renderTrezorAffiliateLink () {
- return h('div.hw-connect__get-trezor', {}, [
- h('p.hw-connect__get-trezor__msg', {}, this.context.t(`dontHaveATrezorWallet`)),
- h('a.hw-connect__get-trezor__link', {
- href: 'https://shop.trezor.io/?a=metamask',
- target: '_blank',
- }, this.context.t('orderOneHere')),
+ return h('div.hw-connect__get-hw', {}, [
+ h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)),
+ this.getAffiliateLinks(),
])
}
- renderConnectToTrezorButton () {
- return h(
- 'button.btn-primary.btn--large',
- { onClick: this.props.connectToTrezor.bind(this) },
- this.props.btnText
- )
- }
scrollToTutorial = (e) => {
if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'})
@@ -102,7 +150,7 @@ class ConnectScreen extends Component {
return (
h('div.hw-connect__footer', {}, [
h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
- this.renderConnectToTrezorButton(),
+ this.renderButtons(),
h('p.hw-connect__footer__msg', {}, [
this.context.t(`havingTroubleConnecting`),
h('a.hw-connect__footer__link', {
@@ -118,8 +166,8 @@ class ConnectScreen extends Component {
return (
h('div.new-account-connect-form', {}, [
this.renderHeader(),
+ this.renderButtons(),
this.renderTrezorAffiliateLink(),
- this.renderConnectToTrezorButton(),
this.renderLearnMore(),
this.renderTutorialSteps(),
this.renderFooter(),
@@ -136,8 +184,7 @@ class ConnectScreen extends Component {
}
ConnectScreen.propTypes = {
- connectToTrezor: PropTypes.func.isRequired,
- btnText: PropTypes.string.isRequired,
+ connectToHardwareWallet: PropTypes.func.isRequired,
browserSupported: PropTypes.bool.isRequired,
}
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index 3f66e7098641..547df522355c 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -7,17 +7,19 @@ const ConnectScreen = require('./connect-screen')
const AccountList = require('./account-list')
const { DEFAULT_ROUTE } = require('../../../../routes')
const { formatBalance } = require('../../../../util')
+const { getPlatform } = require('../../../../../../app/scripts/lib/util')
+const { PLATFORM_FIREFOX } = require('../../../../../../app/scripts/lib/enums')
class ConnectHardwareForm extends Component {
constructor (props, context) {
super(props)
this.state = {
error: null,
- btnText: context.t('connectToTrezor'),
selectedAccount: null,
accounts: [],
browserSupported: true,
unlocked: false,
+ device: null,
}
}
@@ -38,25 +40,44 @@ class ConnectHardwareForm extends Component {
}
async checkIfUnlocked () {
- const unlocked = await this.props.checkHardwareStatus('trezor')
- if (unlocked) {
- this.setState({unlocked: true})
- this.getPage(0)
- }
+ ['trezor', 'ledger'].forEach(async device => {
+ const unlocked = await this.props.checkHardwareStatus(device, this.props.defaultHdPaths[device])
+ if (unlocked) {
+ this.setState({unlocked: true})
+ this.getPage(device, 0, this.props.defaultHdPaths[device])
+ }
+ })
}
- connectToTrezor = () => {
+ connectToHardwareWallet = (device) => {
+ // None of the hardware wallets are supported
+ // At least for now
+ if (getPlatform() === PLATFORM_FIREFOX) {
+ this.setState({ browserSupported: false, error: null})
+ return null
+ }
+
if (this.state.accounts.length) {
return null
}
- this.setState({ btnText: this.context.t('connecting')})
- this.getPage(0)
+
+ // Default values
+ this.getPage(device, 0, this.props.defaultHdPaths[device])
+ }
+
+ onPathChange = (path) => {
+ this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path})
+ this.getPage(this.state.device, 0, path)
}
onAccountChange = (account) => {
this.setState({selectedAccount: account.toString(), error: null})
}
+ onAccountRestriction = () => {
+ this.setState({error: this.context.t('ledgerAccountRestriction') })
+ }
+
showTemporaryAlert () {
this.props.showAlert(this.context.t('hardwareWalletConnected'))
// Autohide the alert after 5 seconds
@@ -65,9 +86,9 @@ class ConnectHardwareForm extends Component {
}, 5000)
}
- getPage = (page) => {
+ getPage = (device, page, hdPath) => {
this.props
- .connectHardware('trezor', page)
+ .connectHardware(device, page, hdPath)
.then(accounts => {
if (accounts.length) {
@@ -77,7 +98,7 @@ class ConnectHardwareForm extends Component {
this.showTemporaryAlert()
}
- const newState = { unlocked: true }
+ const newState = { unlocked: true, device, error: null }
// Default to the first account
if (this.state.selectedAccount === null) {
accounts.forEach((a, i) => {
@@ -104,18 +125,18 @@ class ConnectHardwareForm extends Component {
})
.catch(e => {
if (e === 'Window blocked') {
- this.setState({ browserSupported: false })
+ this.setState({ browserSupported: false, error: null})
+ } else if (e !== 'Window closed') {
+ this.setState({ error: e.toString() })
}
- this.setState({ btnText: this.context.t('connectToTrezor') })
})
}
- onForgetDevice = () => {
- this.props.forgetDevice('trezor')
+ onForgetDevice = (device) => {
+ this.props.forgetDevice(device)
.then(_ => {
this.setState({
error: null,
- btnText: this.context.t('connectToTrezor'),
selectedAccount: null,
accounts: [],
unlocked: false,
@@ -125,13 +146,13 @@ class ConnectHardwareForm extends Component {
})
}
- onUnlockAccount = () => {
+ onUnlockAccount = (device) => {
if (this.state.selectedAccount === null) {
this.setState({ error: this.context.t('accountSelectionRequired') })
}
- this.props.unlockTrezorAccount(this.state.selectedAccount)
+ this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device)
.then(_ => {
this.props.history.push(DEFAULT_ROUTE)
}).catch(e => {
@@ -145,20 +166,22 @@ class ConnectHardwareForm extends Component {
renderError () {
return this.state.error
- ? h('span.error', { style: { marginBottom: 40 } }, this.state.error)
+ ? h('span.error', { style: { margin: '20px 20px 10px', display: 'block', textAlign: 'center' } }, this.state.error)
: null
}
renderContent () {
if (!this.state.accounts.length) {
return h(ConnectScreen, {
- connectToTrezor: this.connectToTrezor,
- btnText: this.state.btnText,
+ connectToHardwareWallet: this.connectToHardwareWallet,
browserSupported: this.state.browserSupported,
})
}
return h(AccountList, {
+ onPathChange: this.onPathChange,
+ selectedPath: this.props.defaultHdPaths[this.state.device],
+ device: this.state.device,
accounts: this.state.accounts,
selectedAccount: this.state.selectedAccount,
onAccountChange: this.onAccountChange,
@@ -168,6 +191,7 @@ class ConnectHardwareForm extends Component {
onUnlockAccount: this.onUnlockAccount,
onForgetDevice: this.onForgetDevice,
onCancel: this.onCancel,
+ onAccountRestriction: this.onAccountRestriction,
})
}
@@ -188,13 +212,15 @@ ConnectHardwareForm.propTypes = {
forgetDevice: PropTypes.func,
showAlert: PropTypes.func,
hideAlert: PropTypes.func,
- unlockTrezorAccount: PropTypes.func,
+ unlockHardwareWalletAccount: PropTypes.func,
+ setHardwareWalletDefaultHdPath: PropTypes.func,
numberOfExistingAccounts: PropTypes.number,
history: PropTypes.object,
t: PropTypes.func,
network: PropTypes.string,
accounts: PropTypes.object,
address: PropTypes.string,
+ defaultHdPaths: PropTypes.object,
}
const mapStateToProps = state => {
@@ -202,28 +228,35 @@ const mapStateToProps = state => {
metamask: { network, selectedAddress, identities = {}, accounts = [] },
} = state
const numberOfExistingAccounts = Object.keys(identities).length
+ const {
+ appState: { defaultHdPaths },
+ } = state
return {
network,
accounts,
address: selectedAddress,
numberOfExistingAccounts,
+ defaultHdPaths,
}
}
const mapDispatchToProps = dispatch => {
return {
- connectHardware: (deviceName, page) => {
- return dispatch(actions.connectHardware(deviceName, page))
+ setHardwareWalletDefaultHdPath: ({device, path}) => {
+ return dispatch(actions.setHardwareWalletDefaultHdPath({device, path}))
+ },
+ connectHardware: (deviceName, page, hdPath) => {
+ return dispatch(actions.connectHardware(deviceName, page, hdPath))
},
- checkHardwareStatus: (deviceName) => {
- return dispatch(actions.checkHardwareStatus(deviceName))
+ checkHardwareStatus: (deviceName, hdPath) => {
+ return dispatch(actions.checkHardwareStatus(deviceName, hdPath))
},
forgetDevice: (deviceName) => {
return dispatch(actions.forgetDevice(deviceName))
},
- unlockTrezorAccount: index => {
- return dispatch(actions.unlockTrezorAccount(index))
+ unlockHardwareWalletAccount: (index, deviceName, hdPath) => {
+ return dispatch(actions.unlockHardwareWalletAccount(index, deviceName, hdPath))
},
showImportPage: () => dispatch(actions.showImportPage()),
showConnectPage: () => dispatch(actions.showConnectPage()),
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index 5e3fdc9af36f..0263924ef231 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -141,7 +141,7 @@ Home.propTypes = {
loadingMessage: PropTypes.string,
network: PropTypes.string,
provider: PropTypes.object,
- frequentRpcList: PropTypes.array,
+ frequentRpcListDetail: PropTypes.array,
currentView: PropTypes.object,
sidebarOpen: PropTypes.bool,
isMascara: PropTypes.bool,
@@ -220,7 +220,7 @@ function mapStateToProps (state) {
forgottenPassword: state.appState.forgottenPassword,
nextUnreadNotice,
lostAccounts,
- frequentRpcList: state.metamask.frequentRpcList || [],
+ frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
currentCurrency: state.metamask.currentCurrency,
isMouseUser: state.appState.isMouseUser,
isRevealingSeedWords: state.metamask.isRevealingSeedWords,
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
index ff42a13dee27..38d8729ac938 100644
--- a/ui/app/components/pages/settings/settings.js
+++ b/ui/app/components/pages/settings/settings.js
@@ -173,14 +173,23 @@ class Settings extends Component {
onChange: event => this.setState({ newRpc: event.target.value }),
onKeyPress: event => {
if (event.key === 'Enter') {
- this.validateRpc(this.state.newRpc)
+ this.validateRpc(this.state.newRpc, this.state.chainId)
+ }
+ },
+ }),
+ h('input.settings__input', {
+ placeholder: this.context.t('optionalChainId'),
+ onChange: event => this.setState({ chainId: event.target.value }),
+ onKeyPress: event => {
+ if (event.key === 'Enter') {
+ this.validateRpc(this.state.newRpc, this.state.chainId)
}
},
}),
h('div.settings__rpc-save-button', {
onClick: event => {
event.preventDefault()
- this.validateRpc(this.state.newRpc)
+ this.validateRpc(this.state.newRpc, this.state.chainId)
},
}, this.context.t('save')),
]),
@@ -189,11 +198,11 @@ class Settings extends Component {
)
}
- validateRpc (newRpc) {
+ validateRpc (newRpc, chainId) {
const { setRpcTarget, displayWarning } = this.props
if (validUrl.isWebUri(newRpc)) {
- setRpcTarget(newRpc)
+ setRpcTarget(newRpc, chainId)
} else {
const appendedRpc = `http://${newRpc}`
@@ -341,7 +350,7 @@ const mapStateToProps = state => {
const mapDispatchToProps = dispatch => {
return {
setCurrentCurrency: currency => dispatch(actions.setCurrentCurrency(currency)),
- setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)),
+ setRpcTarget: (newRpc, chainId) => dispatch(actions.setRpcTarget(newRpc, chainId)),
displayWarning: warning => dispatch(actions.displayWarning(warning)),
revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js
index 2b8eaa41f70f..b0e75cd754f1 100644
--- a/ui/app/components/send/currency-display/currency-display.js
+++ b/ui/app/components/send/currency-display/currency-display.js
@@ -1,5 +1,6 @@
const Component = require('react').Component
const h = require('react-hyperscript')
+const connect = require('react-redux').connect
const inherits = require('util').inherits
const { conversionUtil, multiplyCurrencies } = require('../../../conversion-util')
const { removeLeadingZeroes } = require('../send.utils')
@@ -12,7 +13,12 @@ CurrencyDisplay.contextTypes = {
t: PropTypes.func,
}
-module.exports = CurrencyDisplay
+module.exports = connect(mapStateToProps)(CurrencyDisplay)
+function mapStateToProps (state) {
+ return {
+ fromCurrency: state.metamask.fromCurrency,
+ }
+}
inherits(CurrencyDisplay, Component)
function CurrencyDisplay () {
@@ -78,7 +84,7 @@ CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversi
}
CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) {
- const { primaryCurrency, convertedCurrency, conversionRate } = this.props
+ const { fromCurrency, primaryCurrency, convertedCurrency, conversionRate } = this.props
if (conversionRate === 0 || conversionRate === null || conversionRate === undefined) {
if (nonFormattedValue !== 0) {
@@ -88,7 +94,7 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu
let convertedValue = conversionUtil(nonFormattedValue, {
fromNumericBase: 'dec',
- fromCurrency: primaryCurrency,
+ fromCurrency: fromCurrency || primaryCurrency,
toCurrency: convertedCurrency,
numberOfDecimals: 2,
conversionRate,
@@ -132,6 +138,7 @@ CurrencyDisplay.prototype.render = function () {
const {
className = 'currency-display',
primaryBalanceClassName = 'currency-display__input',
+ fromCurrency,
primaryCurrency,
readOnly = false,
inError = false,
@@ -174,7 +181,7 @@ CurrencyDisplay.prototype.render = function () {
step,
}),
- h('span.currency-display__currency-symbol', primaryCurrency),
+ h('span.currency-display__currency-symbol', fromCurrency || primaryCurrency),
]),
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 2c4ba40bf576..b9cb92afd8c0 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -16,19 +16,23 @@ function mapStateToProps (state) {
selectedAddress,
} = state.metamask
const { warning } = state.appState
+ const ticker = state.metamask.ticker
+ const provider = state.metamask.provider
return {
coinOptions,
tokenExchangeRates,
selectedAddress,
+ provider,
+ ticker,
warning,
}
}
function mapDispatchToProps (dispatch) {
return {
- shapeShiftSubview: () => dispatch(shapeShiftSubview()),
- pairUpdate: coin => dispatch(pairUpdate(coin)),
+ shapeShiftSubview: (type, ticker) => dispatch(shapeShiftSubview(type, ticker)),
+ pairUpdate: (coin, ticker) => dispatch(pairUpdate(coin, ticker)),
buyWithShapeShift: data => dispatch(buyWithShapeShift(data)),
}
}
@@ -56,22 +60,27 @@ function ShapeshiftForm () {
}
ShapeshiftForm.prototype.getCoinPair = function () {
- return `${this.state.depositCoin.toUpperCase()}_ETH`
+ const ticker = this.props.ticker
+ return `${this.state.depositCoin.toUpperCase()}_${ticker}`
}
ShapeshiftForm.prototype.componentWillMount = function () {
- this.props.shapeShiftSubview()
+ const ticker = this.props.ticker
+ const type = this.props.provider.type
+ this.props.shapeShiftSubview(type, ticker)
}
ShapeshiftForm.prototype.onCoinChange = function (coin) {
+ const ticker = this.props.ticker
this.setState({
depositCoin: coin,
errorMessage: '',
})
- this.props.pairUpdate(coin)
+ this.props.pairUpdate(coin, ticker)
}
ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
+ const ticker = this.props.ticker
this.setState({
isLoading: true,
showQrCode: true,
@@ -85,7 +94,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
refundAddress: returnAddress,
depositCoin,
} = this.state
- const pair = `${depositCoin}_eth`
+ const pair = `${depositCoin}_${ticker.toLowerCase()}`
const data = {
withdrawal,
pair,
@@ -175,7 +184,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
ShapeshiftForm.prototype.render = function () {
const { coinOptions, btnClass, warning } = this.props
const { errorMessage, showQrCode, depositAddress } = this.state
- const { tokenExchangeRates } = this.props
+ const { tokenExchangeRates, ticker } = this.props
const token = tokenExchangeRates[this.getCoinPair()]
return h('div.shapeshift-form-wrapper', [
@@ -209,7 +218,7 @@ ShapeshiftForm.prototype.render = function () {
this.context.t('receive'),
]),
- h('div.shapeshift-form__selector-input', ['ETH']),
+ h('div.shapeshift-form__selector-input', [ticker]),
]),
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 4334aacba56a..5071e6395c7b 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -4,7 +4,7 @@ const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const vreme = new (require('vreme'))()
-const explorerLink = require('etherscan-link').createExplorerLink
+const explorerLink = require('../../lib/explorer-link.js')
const actions = require('../actions')
const addressSummary = require('../util').addressSummary
@@ -25,6 +25,7 @@ function mapStateToProps (state) {
selectedAddress: state.metamask.selectedAddress,
conversionRate: state.metamask.conversionRate,
currentCurrency: state.metamask.currentCurrency,
+ ticker: state.metamask.ticker,
}
}
@@ -84,7 +85,7 @@ ShiftListItem.prototype.renderUtilComponents = function () {
title: this.context.t('qrCode'),
}, [
h('i.fa.fa-qrcode.pointer.pop-hover', {
- onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
+ onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType, props.ticker)),
style: {
margin: '5px',
marginLeft: '23px',
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 4100d76a59eb..af11f35cbbc1 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -19,6 +19,7 @@ function mapStateToProps (state) {
contractExchangeRates: state.metamask.contractExchangeRates,
conversionRate: state.metamask.conversionRate,
sidebarOpen: state.appState.sidebarOpen,
+ settings: state.metamask.settings,
}
}
@@ -143,7 +144,11 @@ TokenCell.prototype.send = function (address, event) {
}
TokenCell.prototype.view = function (address, userAddress, network, event) {
- const url = etherscanLinkFor(address, userAddress, network)
+ let url
+ if (this.props.settings && this.props.settings.blockExplorerToken) {
+ url = this.props.settings.blockExplorerToken
+ }
+ url = etherscanLinkFor(address, userAddress, network, url)
if (url) {
navigateTo(url)
}
@@ -153,7 +158,11 @@ function navigateTo (url) {
global.platform.openWindow({ url })
}
-function etherscanLinkFor (tokenAddress, address, network) {
+function etherscanLinkFor (tokenAddress, address, network, url) {
+ if (url) {
+ return url.replace('[[tokenAddress]]', tokenAddress).replace('[[address]]', address)
+ }
+
const prefix = prefixForNetwork(network)
return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}`
}
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 474d62638053..46eb9ef889f3 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -32,6 +32,7 @@ module.exports = compose(
function mapStateToProps (state) {
return {
tokens: state.metamask.tokens,
+ ticker: state.metamask.ticker,
currentCurrency: getCurrentCurrency(state),
contractExchangeRates: state.metamask.contractExchangeRates,
selectedAddressTxList: state.metamask.selectedAddressTxList,
@@ -110,6 +111,7 @@ TxListItem.prototype.getSendEtherTotal = function () {
const {
transactionAmount,
conversionRate,
+ ticker,
address,
currentCurrency,
} = this.props
@@ -121,7 +123,7 @@ TxListItem.prototype.getSendEtherTotal = function () {
const totalInFiat = conversionUtil(transactionAmount, {
fromNumericBase: 'hex',
toNumericBase: 'dec',
- fromCurrency: 'ETH',
+ fromCurrency: ticker,
toCurrency: currentCurrency,
fromDenomination: 'WEI',
numberOfDecimals: 2,
@@ -130,15 +132,15 @@ TxListItem.prototype.getSendEtherTotal = function () {
const totalInETH = conversionUtil(transactionAmount, {
fromNumericBase: 'hex',
toNumericBase: 'dec',
- fromCurrency: 'ETH',
- toCurrency: 'ETH',
+ fromCurrency: ticker,
+ toCurrency: ticker,
fromDenomination: 'WEI',
conversionRate,
numberOfDecimals: 6,
})
return {
- total: `${totalInETH} ETH`,
+ total: `${totalInETH} ${ticker}`,
fiatTotal: `${totalInFiat} ${currentCurrency.toUpperCase()}`,
}
}
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index d8c4a9d19793..51c302641a2a 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -26,6 +26,7 @@ TxList.contextTypes = {
function mapStateToProps (state) {
return {
+ settings: state.metamask.settings,
txsToRender: selectors.transactionsSelector(state),
conversionRate: selectors.conversionRateSelector(state),
selectedAddress: selectors.getSelectedAddress(state),
@@ -155,7 +156,11 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
}
TxList.prototype.view = function (txHash, network) {
- const url = etherscanLinkFor(txHash, network)
+ let url
+ if (this.props.settings && this.props.settings.blockExplorerTx) {
+ url = this.props.settings.blockExplorerTx
+ }
+ url = etherscanLinkFor(txHash, network, url)
if (url) {
navigateTo(url)
}
@@ -165,7 +170,10 @@ function navigateTo (url) {
global.platform.openWindow({ url })
}
-function etherscanLinkFor (txHash, network) {
+function etherscanLinkFor (txHash, network, url) {
const prefix = prefixForNetwork(network)
+ if (url) {
+ return url.replace('[[txHash]]', txHash)
+ }
return `https://${prefix}etherscan.io/tx/${txHash}`
}
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 20c2be0f1f26..8e092364c4a7 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -118,8 +118,18 @@ WalletView.prototype.render = function () {
return kr.accounts.includes(selectedAddress)
})
- const type = keyring.type
- const isLoose = type !== 'HD Key Tree'
+ let label = ''
+ let type
+ if (keyring) {
+ type = keyring.type
+ if (type !== 'HD Key Tree') {
+ if (type.toLowerCase().search('hardware') !== -1) {
+ label = this.context.t('hardware')
+ } else {
+ label = this.context.t('imported')
+ }
+ }
+ }
return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
style: {},
@@ -133,7 +143,7 @@ WalletView.prototype.render = function () {
onClick: hideSidebar,
}),
- h('div.wallet-view__keyring-label.allcaps', isLoose ? this.context.t('imported') : ''),
+ h('div.wallet-view__keyring-label.allcaps', label),
h('div.flex-column.flex-center.wallet-view__name-container', {
style: { margin: '0 auto' },
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 96ad5fe64339..821a6b6120ed 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -1,7 +1,5 @@
@import './buttons.scss';
-@import './header.scss';
-
@import './footer.scss';
@import './network.scss';
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index b12afb124764..e4c7a4e0d518 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -162,19 +162,99 @@
}
.hw-connect {
+ width: 100%;
+
&__header {
&__title {
margin-top: 5px;
margin-bottom: 15px;
font-size: 22px;
- text-align: center;
}
&__msg {
font-size: 14px;
color: #9b9b9b;
margin-top: 10px;
- margin-bottom: 0px;
+ margin-bottom: 20px;
+ }
+ }
+
+ &__btn-wrapper {
+ flex: 1;
+ flex-direction: row;
+ display: flex;
+ }
+
+ &__connect-btn {
+ background-color: #259De5;
+ color: #fff;
+ border: none;
+ width: 315px;
+ min-height: 54px;
+ font-weight: 300;
+ font-size: 14px;
+ margin-bottom: 20px;
+ margin-top: 20px;
+ border-radius: 5px;
+ display: flex;
+ flex: 1;
+ margin-left: 20px;
+ margin-right: 20px;
+ justify-content: center;
+ text-transform: uppercase;
+ }
+
+ &__connect-btn.disabled {
+ cursor: not-allowed;
+ opacity: .5;
+ }
+
+ &__btn {
+ background: #fbfbfb;
+ border: 1px solid #e5e5e5;
+ height: 100px;
+ width: 150px;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 5px;
+
+ &__img {
+ width: 95px;
+ }
+ }
+
+ &__btn.selected {
+ border: 2px solid #00a8ee;
+ width: 149px;
+ }
+
+ &__btn:first-child {
+ margin-right: 15px;
+ margin-left: 20px;
+ }
+
+ &__btn:last-child {
+ margin-right: 20px;
+ }
+
+ &__hdPath {
+ display: flex;
+ flex-direction: row;
+ margin-top: 15px;
+ margin-bottom: 30px;
+ font-size: 14px;
+
+ &__title {
+ display: flex;
+ margin-top: 10px;
+ margin-right: 15px;
+ }
+
+ &__select {
+ display: flex;
+ flex: 1;
}
}
@@ -201,6 +281,13 @@
font-size: 18px;
}
+ &__unlock-title {
+ padding-top: 10px;
+ font-weight: 400;
+ font-size: 22px;
+ margin-bottom: 15px;
+ }
+
&__msg {
font-size: 14px;
color: #9b9b9b;
@@ -213,8 +300,6 @@
}
&__footer {
- width: 100%;
-
&__title {
padding-top: 15px;
padding-bottom: 12px;
@@ -228,6 +313,9 @@
color: #9b9b9b;
margin-top: 12px;
margin-bottom: 27px;
+ width: 100%;
+ display: block;
+ margin-left: 20px;
}
&__link {
@@ -236,10 +324,10 @@
}
}
- &__get-trezor {
+ &__get-hw {
width: 100%;
- padding-bottom: 20px;
- padding-top: 20px;
+ padding-bottom: 10px;
+ padding-top: 10px;
&__msg {
font-size: 14px;
@@ -390,6 +478,8 @@
&.account-list {
height: auto;
+ padding-left: 20px;
+ padding-right: 20px;
}
&__buttons {
@@ -412,6 +502,7 @@
min-height: 54px;
font-weight: 300;
font-size: 14px;
+ margin-bottom: 20px
}
&__button.unlock {
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
index 0dd61ac5eb41..7a94c1cb648a 100644
--- a/ui/app/css/itcss/components/settings.scss
+++ b/ui/app/css/itcss/components/settings.scss
@@ -48,7 +48,6 @@
display: flex;
flex-direction: column;
padding: 0 5px;
- height: 71px;
@media screen and (max-width: 575px) {
height: initial;
@@ -78,10 +77,12 @@
}
.settings__input {
- padding-left: 10px;
+ padding-left: 15px;
font-size: 14px;
- height: 40px;
+ height: 56px;
border: 1px solid $alto;
+ margin-bottom: 3px;
+ border-radius: 2px;
}
.settings__input::-webkit-input-placeholder {
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 98d467163b84..c246e7904cc2 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -67,6 +67,10 @@ function reduceApp (state, action) {
isMouseUser: false,
gasIsLoading: false,
networkNonce: null,
+ defaultHdPaths: {
+ trezor: `m/44'/60'/0'/0`,
+ ledger: `m/44'/60'/0'/0/0`,
+ },
}, state.appState)
switch (action.type) {
@@ -525,6 +529,15 @@ function reduceApp (state, action) {
warning: '',
})
+ case actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH:
+ const { device, path } = action.value
+ const newDefaults = {...appState.defaultHdPaths}
+ newDefaults[device] = path
+
+ return extend(appState, {
+ defaultHdPaths: newDefaults,
+ })
+
case actions.SHOW_LOADING:
return extend(appState, {
isLoading: true,
diff --git a/ui/app/selectors/confirm-transaction.js b/ui/app/selectors/confirm-transaction.js
index aa1fc5404a62..6e760c429a82 100644
--- a/ui/app/selectors/confirm-transaction.js
+++ b/ui/app/selectors/confirm-transaction.js
@@ -159,7 +159,7 @@ export const approveTokenAmountAndToAddressSelector = createSelector(
if (tokenDecimals) {
tokenAmount = calcTokenAmount(value, tokenDecimals)
}
-
+
tokenAmount = roundExponential(tokenAmount)
}
diff --git a/ui/lib/account-link.js b/ui/lib/account-link.js
index 037d990fa223..ad6d38cfbd7d 100644
--- a/ui/lib/account-link.js
+++ b/ui/lib/account-link.js
@@ -1,4 +1,4 @@
-module.exports = function (address, network) {
+module.exports = function (address, network, url) {
const net = parseInt(network)
let link
switch (net) {
@@ -18,6 +18,10 @@ module.exports = function (address, network) {
link = `https://kovan.etherscan.io/address/${address}`
break
default:
+ if (url) {
+ return url.replace('[[address]]', address)
+ }
+
link = ''
break
}
diff --git a/ui/lib/explorer-link.js b/ui/lib/explorer-link.js
new file mode 100644
index 000000000000..ce38a02f3bfd
--- /dev/null
+++ b/ui/lib/explorer-link.js
@@ -0,0 +1,10 @@
+const prefixForNetwork = require('./etherscan-prefix-for-network')
+
+module.exports = function (hash, network, url) {
+ if (url) {
+ return url.replace('[[txHash]]', hash)
+ }
+
+ const prefix = prefixForNetwork(network)
+ return `https://${prefix}etherscan.io/tx/${hash}`
+}