diff --git a/app/scripts/controllers/network/createPocketClient.js b/app/scripts/controllers/network/createPocketClient.js index 17a470e73..bc0de2479 100644 --- a/app/scripts/controllers/network/createPocketClient.js +++ b/app/scripts/controllers/network/createPocketClient.js @@ -9,6 +9,34 @@ const providerFromMiddleware = require('eth-json-rpc-middleware/providerFromMidd const createPocketMiddleware = require('json-rpc-pocket') const BlockTracker = require('eth-block-tracker') const devid = 'DEVVGQ8VfHgBBet8CyowHcN' +const { + ROPSTEN, + ROPSTEN_CODE, + ROPSTEN_CHAINID, + RINKEBY_CODE, + RINKEBY_CHAINID, + RINKEBY, + KOVAN, + KOVAN_CODE, + KOVAN_CHAINID, + MAINNET, + MAINNET_CODE, + MAINNET_CHAINID, + ETH_TICK, + POA_SOKOL, + POA_CODE, + POA_CHAINID, + POA_TICK, + POA, + DAI, + DAI_CODE, + DAI_CHAINID, + GOERLI_TESTNET, + GOERLI_TESTNET_CODE, + GOERLI_TESTNET_CHAINID, + POA_SOKOL_CODE, + POA_SOKOL_CHAINID, +} = require('./enums') module.exports = createPocketClient @@ -38,45 +66,45 @@ function getNetworkIds ({ network }) { let netId let ticker switch (network) { - case 'mainnet': - netId = '1' - chainId = '0x01' - ticker = "ETH" + case MAINNET: + netId = MAINNET_CODE.toString() + chainId = MAINNET_CHAINID + ticker = ETH_TICK break - case 'ropsten': - netId = '3' - chainId = '0x03' - ticker = "ETH" + case ROPSTEN: + netId = ROPSTEN_CODE.toString() + chainId = ROPSTEN_CHAINID + ticker = ETH_TICK break - case 'rinkeby': - netId = '4' - chainId = '0x04' - ticker = "ETH" + case RINKEBY: + netId = RINKEBY_CODE.toString() + chainId = RINKEBY_CHAINID + ticker = ETH_TICK break - case 'kovan': - netId = '42' - chainId = '0x2a' - ticker = "ETH" + case KOVAN: + netId = KOVAN_CODE.toString() + chainId = KOVAN_CHAINID + ticker = ETH_TICK break - case 'goerli': - netId = '5' - chainId = '0x05' - ticker = "ETH" + case GOERLI_TESTNET: + netId = GOERLI_TESTNET_CODE.toString() + chainId = GOERLI_TESTNET_CHAINID + ticker = ETH_TICK break - case 'poa': - netId = '99' - chainId = '0x63' - ticker = 'POA' + case POA: + netId = POA_CODE.toString() + chainId = POA_CHAINID + ticker = POA_TICK break - case 'dai': - netId = '100' - chainId = '0x64' - ticker = 'POA' + case DAI: + netId = DAI_CODE.toString() + chainId = DAI_CHAINID + ticker = POA_TICK break - case 'sokol': - netId= '77' - chainId = '0x4D' - ticker = 'POA' + case POA_SOKOL: + netId= POA_SOKOL_CODE.toString() + chainId = POA_SOKOL_CHAINID + ticker = POA_TICK break default: throw new Error(`createPocketClient - unknown network "${network}"`) diff --git a/app/scripts/controllers/network/enums.js b/app/scripts/controllers/network/enums.js index 30482dd11..3a8f16743 100644 --- a/app/scripts/controllers/network/enums.js +++ b/app/scripts/controllers/network/enums.js @@ -11,6 +11,18 @@ const RSK = 'rsk' const RSK_TESTNET = 'rsk_testnet' const LOCALHOST = 'localhost' +const ETH_TICK = "ETH" +const POA_TICK = "POA" + +const MAINNET_CHAINID = "0X01" +const ROPSTEN_CHAINID = "0x03" +const RINKEBY_CHAINID = "0x04" +const KOVAN_CHAINID = "0x2a" +const GOERLI_TESTNET_CHAINID = "0X5" +const POA_CHAINID = "0x63" +const DAI_CHAINID = "0x64" +const POA_SOKOL_CHAINID = "0x4D" + const POA_CODE = 99 const DAI_CODE = 100 const POA_SOKOL_CODE = 77 diff --git a/app/scripts/controllers/network/network.js b/app/scripts/controllers/network/network.js index faada7869..3613202f5 100644 --- a/app/scripts/controllers/network/network.js +++ b/app/scripts/controllers/network/network.js @@ -37,6 +37,7 @@ const { RSK_TESTNET_CODE, } = require('./enums') const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET] +const POCKET_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET, POA, DAI, GOERLI_TESTNET, POA_SOKOL] const env = process.env.METAMASK_ENV const METAMASK_DEBUG = process.env.METAMASK_DEBUG @@ -159,7 +160,6 @@ module.exports = class NetworkController extends EventEmitter { } setDProvider(key){ - console.log("UPDATING STATE TO " + key) this.dProviderStore.updateState({ dProvider: key, }) @@ -179,38 +179,28 @@ module.exports = class NetworkController extends EventEmitter { const { type, rpcTarget } = opts // infura type-based endpoints const isInfura = INFURA_PROVIDER_TYPES.includes(type) - if (isInfura) { - console.log(this.dProviderStore.getState()) - if (this.dProviderStore.getState().dProvider) { - this._configurePocketProvider(opts) - } else { + // pocket type-based endpointes + const isPocket = POCKET_PROVIDER_TYPES.includes(type) + + if (!isPocket && this.dProviderStore.getState().dProvider){ + this.dProviderStore.updateState({ + dProvider: false + }) + } + + if (isPocket && this.dProviderStore.getState().dProvider){ + this._configurePocketProvider(opts) + } else if (isInfura) { this._configureInfuraProvider(opts) - } // other type-based rpc endpoints } else if (type === POA) { - if (this.dProviderStore.getState().dProvider) { - this._configurePocketProvider(opts) - } else { this._configureStandardProvider({ rpcUrl: ethNetProps.RPCEndpoints(POA_CODE)[0] }) - } } else if (type === DAI) { - if (this.dProviderStore.getState().dProvider) { - this._configurePocketProvider(opts) - } else { this._configureStandardProvider({ rpcUrl: ethNetProps.RPCEndpoints(DAI_CODE)[0] }) - } } else if (type === POA_SOKOL) { - if (this.dProviderStore.getState().dProvider) { - this._configurePocketProvider(opts) - } else { this._configureStandardProvider({ rpcUrl: ethNetProps.RPCEndpoints(POA_SOKOL_CODE)[0] }) - } } else if (type === GOERLI_TESTNET) { - if (this.dProviderStore.getState().dProvider) { - this._configurePocketProvider(opts) - } else { this._configureStandardProvider({ rpcUrl: ethNetProps.RPCEndpoints(GOERLI_TESTNET_CODE)[0] }) - } } else if (type === CLASSIC) { this._configureStandardProvider({ rpcUrl: ethNetProps.RPCEndpoints(CLASSIC_CODE)[0] }) } else if (type === RSK) { diff --git a/old-ui/app/config.js b/old-ui/app/config.js index 3d18a8f28..50e373279 100644 --- a/old-ui/app/config.js +++ b/old-ui/app/config.js @@ -1,7 +1,7 @@ -const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect +import PropTypes from 'prop-types' const actions = require('../../ui/app/actions') const LoadingIndicator = require('./components/loading') const Web3 = require('web3') @@ -13,223 +13,194 @@ const exportAsFile = require('./util').exportAsFile const Modal = require('../../ui/app/components/modals/index').Modal const ethNetProps = require('eth-net-props') const { networks } = require('../../app/scripts/controllers/network/util') +const { + ROPSTEN, + RINKEBY, + KOVAN, + MAINNET, + POA, + DAI, + POA_SOKOL, + GOERLI_TESTNET, +} = require('../../app/scripts/controllers/network/enums') +const POCKET_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET, POA, DAI, GOERLI_TESTNET, POA_SOKOL] -module.exports = connect(mapStateToProps)(ConfigScreen) +class ConfigScreen extends Component { -function mapStateToProps (state) { - return { - metamask: state.metamask, - warning: state.appState.warning, - } -} - -inherits(ConfigScreen, Component) -function ConfigScreen (props) { - if (props.metamask.dProviderStore.dProvider){ + constructor (props) { + super(props) this.state = { loading: false, - provider: "Decentralized" - } - } else{ - this.state = { - loading: false, - provider: "Centralized" + dProvider: props.metamask.dProviderStore.dProvider } } - Component.call(this) -} -ConfigScreen.prototype.render = function () { - const state = this.props - const metamaskState = state.metamask - const warning = state.warning + static propTypes = { + dispatch: PropTypes.func, + } - return ( - h('.flex-column.flex-grow', { - style: { - maxHeight: '585px', - overflowY: 'auto', - }, - }, [ + render () { + const state = this.props + const metamaskState = state.metamask + const warning = state.warning - h(LoadingIndicator, { - isLoading: this.state.loading, - }), + if( state.metamask.dProviderStore.dProvider != this.state.dProvider){ + this.setState({ + dProvider: this.props.metamask.dProviderStore.dProvider + }) + } - h(Modal, {}, []), - - // subtitle and nav - h('.section-title.flex-row.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: () => { - state.dispatch(actions.goHome()) - }, - style: { - position: 'absolute', - left: '30px', - }, - }), - h('h2', 'Settings'), - ]), - - h('div', { + return ( + h('.flex-column.flex-grow', { style: { - margin: '0 30px', + maxHeight: '585px', + overflowY: 'auto', }, }, [ - h('.error', { - style: { - display: warning ? 'block' : 'none', - }, - }, warning), - ]), - // conf view - h('.flex-column.flex-justify-center.flex-grow.select-none', [ - h('.flex-space-around', { + h(LoadingIndicator, { + isLoading: this.state.loading, + }), + + h(Modal, {}, []), + + // subtitle and nav + h('.section-title.flex-row.flex-center', [ + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { + onClick: () => { + state.dispatch(actions.goHome()) + }, + style: { + position: 'absolute', + left: '30px', + }, + }), + h('h2', 'Settings'), + ]), + + h('div', { style: { - padding: '30px', - overflow: 'auto', + margin: '0 30px', }, }, [ + h('.error', { + style: { + display: warning ? 'block' : 'none', + }, + }, warning), + ]), - currentProviderDisplay(metamaskState, state), + // conf view + h('.flex-column.flex-justify-center.flex-grow.select-none', [ + h('.flex-space-around', { + style: { + padding: '30px', + overflow: 'auto', + }, + }, [ - h('div', { style: {display: 'flex'} }, [ - h('input#new_rpc', { - placeholder: 'New RPC URL', - style: { - width: 'inherit', - flex: '1 0 auto', - height: '32px', - margin: '20px 20px 0 0', - borderRadius: '3px', - border: '1px solid #e2e2e2', - padding: '10px', - }, - onKeyPress: (event) => { - if (event.key === 'Enter') { - const element = event.target + this.currentProviderDisplay(metamaskState, state), + + h('div', { style: {display: 'flex'} }, [ + h('input#new_rpc', { + placeholder: 'New RPC URL', + style: { + width: 'inherit', + flex: '1 0 auto', + height: '32px', + margin: '20px 20px 0 0', + borderRadius: '3px', + border: '1px solid #e2e2e2', + padding: '10px', + }, + onKeyPress: (event) => { + if (event.key === 'Enter') { + const element = event.target + const newRpc = element.value + this.rpcValidation(newRpc, state) + } + }, + }), + h('button', { + style: { + alignSelf: 'center', + marginTop: '20px', + }, + onClick: (event) => { + event.preventDefault() + const element = document.querySelector('input#new_rpc') const newRpc = element.value this.rpcValidation(newRpc, state) - } - }, - }), - h('button', { + }, + }, 'Save'), + ]), + + h('hr.horizontal-line'), + + this.currentConversionInformation(metamaskState, state), + + h('hr.horizontal-line', { style: { - alignSelf: 'center', marginTop: '20px', }, - onClick: (event) => { - event.preventDefault() - const element = document.querySelector('input#new_rpc') - const newRpc = element.value - this.rpcValidation(newRpc, state) - }, - }, 'Save'), - ]), + }), - h('hr.horizontal-line'), - - currentConversionInformation(metamaskState, state), - - h('hr.horizontal-line', { - style: { - marginTop: '20px', - }, - }), - - h('div', { - style: { - marginTop: '20px', - }, - }, [ - h('p', { + h('div', { style: { - fontFamily: 'Nunito Regular', - fontSize: '14px', - lineHeight: '18px', + marginTop: '20px', }, - }, `State logs contain your public account addresses and sent transactions.`), - h('br'), - h('button', { + }, [ + h('p', { + style: { + fontFamily: 'Nunito Regular', + fontSize: '14px', + lineHeight: '18px', + }, + }, `State logs contain your public account addresses and sent transactions.`), + h('br'), + h('button', { + style: { + alignSelf: 'center', + }, + onClick (event) { + window.logStateString((err, result) => { + if (err) { + state.dispatch(actions.displayWarning('Error in retrieving state logs.')) + } else { + exportAsFile('Nifty Wallet State Logs.json', result) + } + }) + }, + }, 'Download State Logs'), + ]), + + h('hr.horizontal-line', { style: { - alignSelf: 'center', + marginTop: '20px', }, - onClick (event) { - window.logStateString((err, result) => { - if (err) { - state.dispatch(actions.displayWarning('Error in retrieving state logs.')) - } else { - exportAsFile('Nifty Wallet State Logs.json', result) - } - }) - }, - }, 'Download State Logs'), - ]), + }), - h('hr.horizontal-line', { - style: { - marginTop: '20px', - }, - }), - - h('div', { - style: { - marginTop: '20px', - }, - }, [ - h('button', { + h('div', { style: { - alignSelf: 'center', + marginTop: '20px', }, - onClick (event) { - event.preventDefault() - state.dispatch(actions.revealSeedConfirmation()) + }, [ + h('button', { + style: { + alignSelf: 'center', + }, + onClick (event) { + event.preventDefault() + state.dispatch(actions.revealSeedConfirmation()) + }, + }, 'Reveal Seed Words'), + ]), + + h('hr.horizontal-line', { + style: { + marginTop: '20px', }, - }, 'Reveal Seed Words'), - ]), - - h('hr.horizontal-line', { - style: { - marginTop: '20px', - }, - }), - - // POCKET NETWORK UI CHANGES START - h('p', { - style: { - fontFamily: 'Nunito Regular', - fontSize: '14px', - lineHeight: '18px', - }, - }, [ - 'Choose Pocket Nework for a decentralized blockchain provider for applicable networks', - ]), - - h('button', { - style: { - alignSelf: 'center', - marginTop: '20px', - }, - onClick: (event) => { - event.preventDefault() - this.toggleProvider() - }, - }, this.state.provider), - - h('hr.horizontal-line', { - style: { - marginTop: '20px', - }, - }), - // POCKET NETWORK UI CHANGES END - - h('div', { - style: { - marginTop: '20px', - }, - }, [ + }), h('p', { style: { @@ -238,129 +209,174 @@ ConfigScreen.prototype.render = function () { lineHeight: '18px', }, }, [ - 'Resetting is for developer use only. ', + 'Switch to Decentralized Provider (Pocket)', ]), - h('br'), - h('button', { - style: { - alignSelf: 'center', - }, - onClick (event) { + h('input', { + type:'checkbox', + name:'pocket-checkbox', + checked: this.state.dProvider, + onChange: (event) => { event.preventDefault() - state.dispatch(actions.resetAccount()) + this.toggleProvider() }, - }, 'Reset Account'), + }), h('hr.horizontal-line', { style: { marginTop: '20px', }, }), - h('button', { + + h('div', { style: { - alignSelf: 'center', + marginTop: '20px', }, - onClick (event) { - event.preventDefault() - state.dispatch(actions.confirmChangePassword()) - }, - }, 'Change password'), + }, [ + + h('p', { + style: { + fontFamily: 'Nunito Regular', + fontSize: '14px', + lineHeight: '18px', + }, + }, [ + 'Resetting is for developer use only. ', + ]), + h('br'), + + h('button', { + style: { + alignSelf: 'center', + }, + onClick (event) { + event.preventDefault() + state.dispatch(actions.resetAccount()) + }, + }, 'Reset Account'), + + h('hr.horizontal-line', { + style: { + marginTop: '20px', + }, + }), + + h('button', { + style: { + alignSelf: 'center', + }, + onClick (event) { + event.preventDefault() + state.dispatch(actions.confirmChangePassword()) + }, + }, 'Change password'), + ]), ]), ]), - ]), - ]) - ) -} - -ConfigScreen.prototype.toggleProvider = function (){ - console.log(this) - console.log(this.props.metamask.provider.type) - if (this.state.provider == "Centralized"){ - this.setState({ - provider: "Decentralized" - }) - this.props.dispatch(actions.setDProvider(true)) - this.props.dispatch(actions.setProviderType(this.props.metamask.provider.type)) - } else { - this.setState({ - provider: "Centralized" - }) - this.props.dispatch(actions.setDProvider(false)) - this.props.dispatch(actions.setProviderType(this.props.metamask.provider.type)) + ]) + ) } -} -ConfigScreen.prototype.componentWillUnmount = function () { - this.props.dispatch(actions.displayWarning('')) -} - -ConfigScreen.prototype.rpcValidation = function (newRpc, state) { - if (validUrl.isWebUri(newRpc)) { - this.setState({ - loading: true, - }) - const web3 = new Web3(new Web3.providers.HttpProvider(newRpc)) - web3.eth.getBlockNumber((err, res) => { - if (err) { - state.dispatch(actions.displayWarning('Invalid RPC endpoint')) + toggleProvider(){ + const isPocket = POCKET_PROVIDER_TYPES.includes(this.props.metamask.provider.type) + if (isPocket){ + if (!this.state.dProvider){ + this.props.dispatch(actions.setDProvider(true)) + this.setState({ + dProvider: true + }) } else { - state.dispatch(actions.setRpcTarget(newRpc)) + this.props.dispatch(actions.setDProvider(false)) + this.setState({ + dProvider: false + }) } - this.setState({ - loading: false, - }) - }) - } else { - if (!newRpc.startsWith('http')) { - state.dispatch(actions.displayWarning('URIs require the appropriate HTTP/HTTPS prefix.')) + this.props.dispatch(actions.setProviderType(this.props.metamask.provider.type)) } else { - state.dispatch(actions.displayWarning('Invalid RPC URI')) + alert("Pocket does not support this network, using centralized provider") } } -} -function currentConversionInformation (metamaskState, state) { - const currentCurrency = metamaskState.currentCurrency - const conversionDate = metamaskState.conversionDate - return h('div', [ - h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, 'Current Conversion'), - h('span', {style: { fontWeight: 'bold', paddingRight: '10px', fontSize: '13px'}}, `Updated ${Date(conversionDate)}`), - h('select#currentCurrency', { - onChange (event) { - event.preventDefault() - const element = document.getElementById('currentCurrency') - const newCurrency = element.value - state.dispatch(actions.setCurrentCurrency(newCurrency)) - }, - defaultValue: currentCurrency, - }, infuraCurrencies.map((currency) => { - return h('option', {key: currency.quote.code, value: currency.quote.code}, `${currency.quote.code.toUpperCase()} - ${currency.quote.name}`) - }) - ), - ]) -} - -function currentProviderDisplay (metamaskState, state) { - const provider = metamaskState.provider - let title, value - - if (networks[provider.type]) { - title = 'Current Network' - value = ethNetProps.props.getNetworkDisplayName(networks[provider.type].networkID) - } else { - title = 'Current RPC' - value = metamaskState.provider.rpcTarget + componentWillUnmount () { + this.props.dispatch(actions.displayWarning('')) } - return h('div', [ - h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, title), - h('span', value), - provider.type === 'rpc' && h('button', { - onClick (event) { - event.preventDefault() - state.dispatch(actions.showDeleteRPC()) - }, - }, 'Delete'), - ]) + rpcValidation (newRpc, state) { + if (validUrl.isWebUri(newRpc)) { + this.setState({ + loading: true, + }) + const web3 = new Web3(new Web3.providers.HttpProvider(newRpc)) + web3.eth.getBlockNumber((err, res) => { + if (err) { + state.dispatch(actions.displayWarning('Invalid RPC endpoint')) + } else { + state.dispatch(actions.setRpcTarget(newRpc)) + } + this.setState({ + loading: false, + }) + }) + } else { + if (!newRpc.startsWith('http')) { + state.dispatch(actions.displayWarning('URIs require the appropriate HTTP/HTTPS prefix.')) + } else { + state.dispatch(actions.displayWarning('Invalid RPC URI')) + } + } + } + + currentConversionInformation (metamaskState, state) { + const currentCurrency = metamaskState.currentCurrency + const conversionDate = metamaskState.conversionDate + return h('div', [ + h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, 'Current Conversion'), + h('span', {style: { fontWeight: 'bold', paddingRight: '10px', fontSize: '13px'}}, `Updated ${Date(conversionDate)}`), + h('select#currentCurrency', { + onChange (event) { + event.preventDefault() + const element = document.getElementById('currentCurrency') + const newCurrency = element.value + state.dispatch(actions.setCurrentCurrency(newCurrency)) + }, + defaultValue: currentCurrency, + }, infuraCurrencies.map((currency) => { + return h('option', {key: currency.quote.code, value: currency.quote.code}, `${currency.quote.code.toUpperCase()} - ${currency.quote.name}`) + }) + ), + ]) + } + + currentProviderDisplay (metamaskState, state) { + const provider = metamaskState.provider + let title, value + + if (networks[provider.type]) { + title = 'Current Network' + value = ethNetProps.props.getNetworkDisplayName(networks[provider.type].networkID) + } else { + title = 'Current RPC' + value = metamaskState.provider.rpcTarget + } + + return h('div', [ + h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, title), + h('span', value), + provider.type === 'rpc' && h('button', { + onClick (event) { + event.preventDefault() + state.dispatch(actions.showDeleteRPC()) + }, + }, 'Delete'), + ]) + } } + +function mapStateToProps (state) { + return { + metamask: state.metamask, + warning: state.appState.warning, + } +} + +module.exports = connect(mapStateToProps)(ConfigScreen)