be able to switch between eth and tan

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')