improve network env stuff (#621)

* improve network env setup

.env.local.example

-REACT_APP_NETWORK_ID="1"
+REACT_APP_CHAIN_ID="1"
 REACT_APP_NETWORK_URL=""
 REACT_APP_PORTIS_ID=""
 REACT_APP_FORTMATIC_KEY=""
+REACT_APP_IS_PRODUCTION_DEPLOY="false"
\ No newline at end of file

netlify.toml

@@ -5,10 +5,16 @@
   status = 451
   force = true
   conditions = {Country=["BY","CU","IR","IQ","CI","LR","KP","SD","SY","ZW"]}
-  headers = {Link = "<https://uniswap.exchange>"}
+  headers = {Link="<https://uniswap.exchange>"}
 
 # support SPA setup
 [[redirects]]
   from = "/*"
   to = "/index.html"
   status = 200
+
+[build.environment]
+  REACT_APP_IS_PRODUCTION_DEPLOY = "false"
+
+[context.production.environment]
+  REACT_APP_IS_PRODUCTION_DEPLOY = "true"

src/connectors/index.js

@@ -7,35 +7,43 @@ import { NetworkConnector } from './Network'
 import { FortmaticConnector } from './Fortmatic'
 
 const POLLING_INTERVAL = 10000
+const NETWORK_URL =
+  process.env.REACT_APP_IS_PRODUCTION_DEPLOY === 'true'
+    ? process.env.REACT_APP_NETWORK_URL_PROD
+    : process.env.REACT_APP_NETWORK_URL
 
 export const network = new NetworkConnector({
-  urls: { 1: process.env.REACT_APP_NETWORK_URL },
+  urls: { [Number(process.env.REACT_APP_CHAIN_ID)]: NETWORK_URL },
   pollingInterval: POLLING_INTERVAL * 3
 })
 
 export const injected = new InjectedConnector({
-  supportedChainIds: [1]
+  supportedChainIds: [Number(process.env.REACT_APP_CHAIN_ID)]
 })
 
+// mainnet only
 export const walletconnect = new WalletConnectConnector({
-  rpc: { 1: process.env.REACT_APP_NETWORK_URL },
+  rpc: { 1: NETWORK_URL },
   bridge: 'https://bridge.walletconnect.org',
   qrcode: false,
   pollingInterval: POLLING_INTERVAL
 })
 
+// mainnet only
 export const fortmatic = new FortmaticConnector({
   apiKey: process.env.REACT_APP_FORTMATIC_KEY,
   chainId: 1
 })
 
+// mainnet only
 export const portis = new PortisConnector({
   dAppId: process.env.REACT_APP_PORTIS_ID,
   networks: [1]
 })
 
+// mainnet only
 export const walletlink = new WalletLinkConnector({
-  url: process.env.REACT_APP_NETWORK_URL,
+  url: NETWORK_URL,
   appName: 'Uniswap',
   appLogoUrl:
     'https://mpng.pngfly.com/20181202/bex/kisspng-emoji-domain-unicorn-pin-badges-sticker-unicorn-tumblr-emoji-unicorn-iphoneemoji-5c046729264a77.5671679315437924251569.jpg'

src/constants/index.js

@@ -12,7 +12,7 @@ export const SUPPORTED_THEMES = {
   LIGHT: 'LIGHT'
 }
 
-export const SUPPORTED_WALLETS = {
+const MAINNET_WALLETS = {
   INJECTED: {
     connector: injected,
     name: 'Injected',
@@ -29,7 +29,15 @@ export const SUPPORTED_WALLETS = {
     description: 'Easy-to-use browser extension.',
     href: null,
     color: '#E8831D'
-  },
+  }
+}
+
+export const SUPPORTED_WALLETS =
+  process.env.REACT_APP_CHAIN_ID !== '1'
+    ? MAINNET_WALLETS
+    : {
+        ...MAINNET_WALLETS,
+        ...{
           WALLET_CONNECT: {
             connector: walletconnect,
             name: 'WalletConnect',
@@ -82,7 +90,8 @@ export const SUPPORTED_WALLETS = {
             color: '#4A6C9B',
             mobile: true
           }
-}
+        }
+      }
 
 // list of tokens that lock fund on adding liquidity - used to disable button
 export const brokenTokens = [