mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Remove unused code - network dropdown components in app
This commit is contained in:
parent
c60ea60ec9
commit
d01a663342
204
ui/app/app.js
204
ui/app/app.js
@ -239,14 +239,11 @@ App.prototype.renderAppBar = function () {
|
|||||||
onClick: (event) => {
|
onClick: (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
console.log("NI CLICK:", this.props.networkDropdownOpen)
|
|
||||||
if (this.props.networkDropdownOpen === false) {
|
if (this.props.networkDropdownOpen === false) {
|
||||||
this.props.showNetworkDropdown()
|
this.props.showNetworkDropdown()
|
||||||
} else {
|
} else {
|
||||||
this.props.hideNetworkDropdown()
|
this.props.hideNetworkDropdown()
|
||||||
}
|
}
|
||||||
// this.props.toggleNetworkOpen()
|
|
||||||
// this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
|
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|
||||||
@ -257,148 +254,6 @@ App.prototype.renderAppBar = function () {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
App.prototype.renderNetworkDropdown = function () {
|
|
||||||
const props = this.props
|
|
||||||
const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
|
|
||||||
const rpcList = props.frequentRpcList
|
|
||||||
const state = this.state || {}
|
|
||||||
console.log("this.state:", state)
|
|
||||||
const isOpen = state.isNetworkMenuOpen
|
|
||||||
|
|
||||||
return h(Dropdown, {
|
|
||||||
useCssTransition: true,
|
|
||||||
isOpen,
|
|
||||||
onClickOutside: (event) => {
|
|
||||||
const { classList } = event.target
|
|
||||||
const isNotToggleElement = [
|
|
||||||
classList.contains('menu-icon'),
|
|
||||||
classList.contains('network-name'),
|
|
||||||
classList.contains('network-indicator'),
|
|
||||||
].filter(bool => bool).length === 0
|
|
||||||
// classes from three constituent nodes of the toggle element
|
|
||||||
|
|
||||||
if (isNotToggleElement) {
|
|
||||||
this.setState({ isNetworkMenuOpen: false })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
zIndex: 11,
|
|
||||||
style: {
|
|
||||||
position: 'absolute',
|
|
||||||
right: '2px',
|
|
||||||
top: '38px',
|
|
||||||
},
|
|
||||||
innerStyle: {
|
|
||||||
padding: '2px 16px 2px 0px',
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: 'main',
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => props.dispatch(actions.setProviderType('mainnet')),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('.menu-icon.diamond'),
|
|
||||||
'Main Ethereum Network',
|
|
||||||
providerType === 'mainnet' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: 'ropsten',
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => props.dispatch(actions.setProviderType('ropsten')),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('.menu-icon.red-dot'),
|
|
||||||
'Ropsten Test Network',
|
|
||||||
providerType === 'ropsten' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: 'kovan',
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => props.dispatch(actions.setProviderType('kovan')),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('.menu-icon.hollow-diamond'),
|
|
||||||
'Kovan Test Network',
|
|
||||||
providerType === 'kovan' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: 'rinkeby',
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('.menu-icon.golden-square'),
|
|
||||||
'Rinkeby Test Network',
|
|
||||||
providerType === 'rinkeby' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: 'default',
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => props.dispatch(actions.setDefaultRpcTarget()),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
|
||||||
'Localhost 8545',
|
|
||||||
activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
this.renderCustomOption(props.provider),
|
|
||||||
this.renderCommonRpc(rpcList, props.provider),
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => this.props.dispatch(actions.showConfigPage()),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
|
||||||
'Custom RPC',
|
|
||||||
activeNetwork === 'custom' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
App.prototype.renderBackButton = function (style, justArrow = false) {
|
App.prototype.renderBackButton = function (style, justArrow = false) {
|
||||||
var props = this.props
|
var props = this.props
|
||||||
return (
|
return (
|
||||||
@ -557,40 +412,6 @@ App.prototype.toggleMetamaskActive = function () {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
App.prototype.renderCustomOption = function (provider) {
|
|
||||||
const { rpcTarget, type } = provider
|
|
||||||
const props = this.props
|
|
||||||
|
|
||||||
if (type !== 'rpc') return null
|
|
||||||
|
|
||||||
// Concatenate long URLs
|
|
||||||
let label = rpcTarget
|
|
||||||
if (rpcTarget.length > 31) {
|
|
||||||
label = label.substr(0, 34) + '...'
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (rpcTarget) {
|
|
||||||
|
|
||||||
case 'http://localhost:8545':
|
|
||||||
return null
|
|
||||||
|
|
||||||
default:
|
|
||||||
return h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: rpcTarget,
|
|
||||||
onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)),
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
|
||||||
label,
|
|
||||||
h('.check', '✓'),
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
App.prototype.getNetworkName = function () {
|
App.prototype.getNetworkName = function () {
|
||||||
const { provider } = this.props
|
const { provider } = this.props
|
||||||
const providerName = provider.type
|
const providerName = provider.type
|
||||||
@ -611,28 +432,3 @@ App.prototype.getNetworkName = function () {
|
|||||||
|
|
||||||
return name
|
return name
|
||||||
}
|
}
|
||||||
|
|
||||||
App.prototype.renderCommonRpc = function (rpcList, provider) {
|
|
||||||
const props = this.props
|
|
||||||
const rpcTarget = provider.rpcTarget
|
|
||||||
|
|
||||||
return rpcList.map((rpc) => {
|
|
||||||
if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
|
|
||||||
return null
|
|
||||||
} else {
|
|
||||||
return h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: `common${rpc}`,
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
|
|
||||||
onClick: () => props.dispatch(actions.setRpcTarget(rpc)),
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
|
||||||
rpc,
|
|
||||||
rpcTarget === rpc ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
@ -42,21 +42,16 @@ function NetworkDropdown () {
|
|||||||
Component.call(this)
|
Component.call(this)
|
||||||
}
|
}
|
||||||
|
|
||||||
// renderNetworkDropdown
|
module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
|
||||||
// renderCustomOption
|
|
||||||
// renderCommonRpc
|
|
||||||
// TODO: specify default props and proptypes
|
// TODO: specify default props and proptypes
|
||||||
NetworkDropdown.prototype.render = function () {
|
NetworkDropdown.prototype.render = function () {
|
||||||
console.log("RENDER")
|
|
||||||
const props = this.props
|
const props = this.props
|
||||||
const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
|
const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
|
||||||
const rpcList = props.frequentRpcList
|
const rpcList = props.frequentRpcList
|
||||||
const state = this.state || {}
|
const state = this.state || {}
|
||||||
console.log("this.state", state)
|
|
||||||
const isOpen = this.props.networkDropdownOpen
|
const isOpen = this.props.networkDropdownOpen
|
||||||
|
|
||||||
console.log("isOpen", isOpen)
|
|
||||||
|
|
||||||
return h(Dropdown, {
|
return h(Dropdown, {
|
||||||
useCssTransition: true,
|
useCssTransition: true,
|
||||||
isOpen,
|
isOpen,
|
||||||
@ -271,6 +266,3 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const comp = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
|
|
||||||
module.exports = comp
|
|
||||||
|
Loading…
Reference in New Issue
Block a user