From f3d35329a6c3f6b7627af78eff3c0c9a9fc59bd6 Mon Sep 17 00:00:00 2001 From: Chen Wei Date: Fri, 28 Jun 2019 21:21:42 +0800 Subject: be able to switch between eth and tan --- app/scripts/controllers/network/enums.js | 12 ++ app/scripts/controllers/network/network.js | 31 ++++- .../components/app/dropdowns/network-dropdown.js | 152 +++++++++++---------- 3 files changed, 118 insertions(+), 77 deletions(-) diff --git a/app/scripts/controllers/network/enums.js b/app/scripts/controllers/network/enums.js index 2f7025392..0ebea4509 100644 --- a/app/scripts/controllers/network/enums.js +++ b/app/scripts/controllers/network/enums.js @@ -5,18 +5,25 @@ const MAINNET = 'mainnet' const LOCALHOST = 'localhost' const GOERLI = 'goerli' +const TANGERINE_TESTNET = 'tangerine_testnet' + const MAINNET_CODE = 1 const ROPSTEN_CODE = 3 const RINKEYBY_CODE = 4 const KOVAN_CODE = 42 const GOERLI_CODE = 5 +const TANGERINE_TESTNET_CODE = 374 + const ROPSTEN_DISPLAY_NAME = 'Ropsten' const RINKEBY_DISPLAY_NAME = 'Rinkeby' const KOVAN_DISPLAY_NAME = 'Kovan' const MAINNET_DISPLAY_NAME = 'Main Ethereum Network' const GOERLI_DISPLAY_NAME = 'Goerli' +const TANGERINE_TESTNET_DISPLAYNAME = 'Tangerine Testnet Displayname' +const TANGERINE_TESTNET_RPC = 'https://testnet-rpc.tangerine-network.io' + module.exports = { ROPSTEN, RINKEBY, @@ -34,4 +41,9 @@ module.exports = { KOVAN_DISPLAY_NAME, MAINNET_DISPLAY_NAME, GOERLI_DISPLAY_NAME, + // Tangerine Network + TANGERINE_TESTNET, + TANGERINE_TESTNET_CODE, + TANGERINE_TESTNET_DISPLAYNAME, + TANGERINE_TESTNET_RPC, } diff --git a/app/scripts/controllers/network/network.js b/app/scripts/controllers/network/network.js index 2c68e4378..b0c742e1f 100644 --- a/app/scripts/controllers/network/network.js +++ b/app/scripts/controllers/network/network.js @@ -21,8 +21,11 @@ const { MAINNET, LOCALHOST, GOERLI, + TANGERINE_TESTNET, + TANGERINE_TESTNET_RPC, } = require('./enums') const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET, GOERLI] +const TANGERINE_PROVIDER_TYPES = [TANGERINE_TESTNET] const env = process.env.METAMASK_ENV const METAMASK_DEBUG = process.env.METAMASK_DEBUG @@ -31,9 +34,9 @@ let defaultProviderConfigType if (process.env.IN_TEST === 'true') { defaultProviderConfigType = LOCALHOST } else if (METAMASK_DEBUG || env === 'test') { - defaultProviderConfigType = RINKEBY + defaultProviderConfigType = TANGERINE_TESTNET } else { - defaultProviderConfigType = MAINNET + defaultProviderConfigType = TANGERINE_TESTNET } const defaultProviderConfig = { @@ -142,9 +145,17 @@ module.exports = class NetworkController extends EventEmitter { } async setProviderType (type, rpcTarget = '', ticker = 'ETH', nickname = '') { + console.log('1') assert.notEqual(type, 'rpc', `NetworkController - cannot call "setProviderType" with type 'rpc'. use "setRpcTarget"`) - assert(INFURA_PROVIDER_TYPES.includes(type) || type === LOCALHOST, `NetworkController - Unknown rpc type "${type}"`) + console.log('2') + + if (INFURA_PROVIDER_TYPES.includes(type)) { + assert(INFURA_PROVIDER_TYPES.includes(type) || type === LOCALHOST, `NetworkController - Unknown rpc type "${type}"`) + } else { + assert(TANGERINE_PROVIDER_TYPES.includes(type) || type === LOCALHOST, `NetworkController - Unknown rpc type "${type}"`) + } const providerConfig = { type, rpcTarget, ticker, nickname } + console.log('providerConfig', providerConfig) this.providerConfig = providerConfig } @@ -174,8 +185,13 @@ module.exports = class NetworkController extends EventEmitter { _configureProvider (opts) { const { type, rpcTarget, chainId, ticker, nickname } = opts // infura type-based endpoints + const isInfura = INFURA_PROVIDER_TYPES.includes(type) - if (isInfura) { + const isTangerine = TANGERINE_PROVIDER_TYPES.includes(type) + console.log('_configureProvider', opts, isTangerine) + if (isTangerine) { + this._configureTangerineProvider(opts) + } else if (isInfura) { this._configureInfuraProvider(opts) // other type-based rpc endpoints } else if (type === LOCALHOST) { @@ -199,6 +215,13 @@ module.exports = class NetworkController extends EventEmitter { this.networkConfig.putState(settings) } + _configureTangerineProvider ({ type }) { + log.info('NetworkController - configureTangerineProvider', type) + const networkClient = createJsonRpcClient({ rpcUrl: TANGERINE_TESTNET_RPC }) + this._setNetworkClient(networkClient) + } + + _configureLocalhostProvider () { log.info('NetworkController - configureLocalhostProvider') const networkClient = createLocalhostClient() diff --git a/ui/app/components/app/dropdowns/network-dropdown.js b/ui/app/components/app/dropdowns/network-dropdown.js index 378ad3ba6..e0976c7d2 100644 --- a/ui/app/components/app/dropdowns/network-dropdown.js +++ b/ui/app/components/app/dropdowns/network-dropdown.js @@ -117,47 +117,47 @@ NetworkDropdown.prototype.render = function () { ), ]), - h( - DropdownMenuItem, - { - key: 'main', - closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => this.handleClick('mainnet'), - style: { ...dropdownMenuItemStyle, borderColor: '#038789' }, - }, - [ - providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), - h(NetworkDropdownIcon, { - backgroundColor: '#29B6AF', // $java - isSelected: providerType === 'mainnet', - }), - h('span.network-name-item', { - style: { - color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', - }, - }, this.context.t('mainnet')), - ] - ), + // h( + // DropdownMenuItem, + // { + // key: 'main', + // closeMenu: () => this.props.hideNetworkDropdown(), + // onClick: () => this.handleClick('mainnet'), + // style: { ...dropdownMenuItemStyle, borderColor: '#038789' }, + // }, + // [ + // providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), + // h(NetworkDropdownIcon, { + // backgroundColor: '#29B6AF', // $java + // isSelected: providerType === 'mainnet', + // }), + // h('span.network-name-item', { + // style: { + // color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', + // }, + // }, this.context.t('mainnet')), + // ] + // ), h( DropdownMenuItem, { - key: 'ropsten', + key: 'tangerine_testnet', closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => this.handleClick('ropsten'), + onClick: () => this.handleClick('tangerine_testnet'), style: dropdownMenuItemStyle, }, [ - providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), + providerType === 'tangerine_testnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { backgroundColor: '#ff4a8d', // $wild-strawberry - isSelected: providerType === 'ropsten', + isSelected: providerType === 'tangerine_testnet', }), h('span.network-name-item', { style: { - color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', + color: providerType === 'tangerine_testnet' ? '#ffffff' : '#9b9b9b', }, - }, this.context.t('ropsten')), + }, this.context.t('tangerine_testnet')), ] ), @@ -166,7 +166,10 @@ NetworkDropdown.prototype.render = function () { { key: 'kovan', closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => this.handleClick('kovan'), + onClick: () => { + console.log('handle click kovan!') + this.handleClick('kovan') + }, style: dropdownMenuItemStyle, }, [ @@ -183,49 +186,49 @@ NetworkDropdown.prototype.render = function () { ] ), - h( - DropdownMenuItem, - { - key: 'rinkeby', - closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => this.handleClick('rinkeby'), - style: dropdownMenuItemStyle, - }, - [ - providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), - h(NetworkDropdownIcon, { - backgroundColor: '#f6c343', // $saffron - isSelected: providerType === 'rinkeby', - }), - h('span.network-name-item', { - style: { - color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', - }, - }, this.context.t('rinkeby')), - ] - ), - - h( - DropdownMenuItem, - { - key: 'goerli', - closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => this.handleClick('goerli'), - style: dropdownMenuItemStyle, - }, - [ - providerType === 'goerli' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), - h(NetworkDropdownIcon, { - backgroundColor: '#3099f2', // $dodger-blue - isSelected: providerType === 'goerli', - }), - h('span.network-name-item', { - style: { - color: providerType === 'goerli' ? '#ffffff' : '#9b9b9b', - }, - }, this.context.t('goerli')), - ] - ), + // h( + // DropdownMenuItem, + // { + // key: 'rinkeby', + // closeMenu: () => this.props.hideNetworkDropdown(), + // onClick: () => this.handleClick('rinkeby'), + // style: dropdownMenuItemStyle, + // }, + // [ + // providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), + // h(NetworkDropdownIcon, { + // backgroundColor: '#f6c343', // $saffron + // isSelected: providerType === 'rinkeby', + // }), + // h('span.network-name-item', { + // style: { + // color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', + // }, + // }, this.context.t('rinkeby')), + // ] + // ), + + // h( + // DropdownMenuItem, + // { + // key: 'goerli', + // closeMenu: () => this.props.hideNetworkDropdown(), + // onClick: () => this.handleClick('goerli'), + // style: dropdownMenuItemStyle, + // }, + // [ + // providerType === 'goerli' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), + // h(NetworkDropdownIcon, { + // backgroundColor: '#3099f2', // $dodger-blue + // isSelected: providerType === 'goerli', + // }), + // h('span.network-name-item', { + // style: { + // color: providerType === 'goerli' ? '#ffffff' : '#9b9b9b', + // }, + // }, this.context.t('goerli')), + // ] + // ), h( DropdownMenuItem, @@ -294,6 +297,7 @@ NetworkDropdown.prototype.handleClick = function (newProviderType) { toNetwork: newProviderType, }, }) + console.log('NetworkDropdown handleClick', newProviderType) setProviderType(newProviderType) } @@ -302,8 +306,10 @@ NetworkDropdown.prototype.getNetworkName = function () { const providerName = provider.type let name - - if (providerName === 'mainnet') { + if (providerName === 'tangerine_testnet') { + console.log('tangerine netowkr get name!!') + name = this.context.t('tangerine_testnet') + } else if (providerName === 'mainnet') { name = this.context.t('mainnet') } else if (providerName === 'ropsten') { name = this.context.t('ropsten') -- cgit v1.2.3