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_FORTMATIC_KEY=""
\ No newline at end of file
+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,61 +29,70 @@ export const SUPPORTED_WALLETS = {
     description: 'Easy-to-use browser extension.',
     href: null,
     color: '#E8831D'
-  },
-  WALLET_CONNECT: {
-    connector: walletconnect,
-    name: 'WalletConnect',
-    iconName: 'walletConnectIcon.svg',
-    description: 'Connect to Trust Wallet, Rainbow Wallet and more...',
-    href: null,
-    color: '#4196FC'
-  },
-  WALLET_LINK: {
-    connector: walletlink,
-    name: 'Coinbase Wallet',
-    iconName: 'coinbaseWalletIcon.svg',
-    description: 'Use Coinbase Wallet app on mobile device',
-    href: null,
-    color: '#315CF5'
-  },
-  COINBASE_LINK: {
-    name: 'Open in Coinbase Wallet',
-    iconName: 'coinbaseWalletIcon.svg',
-    description: 'Open in Coinbase Wallet app.',
-    href: 'https://go.cb-w.com/mtUDhEZPy1',
-    color: '#315CF5',
-    mobile: true,
-    mobileOnly: true
-  },
-  TRUST_WALLET_LINK: {
-    name: 'Open in Trust Wallet',
-    iconName: 'trustWallet.png',
-    description: 'iOS and Android app.',
-    href: 'https://link.trustwallet.com/open_url?coin_id=60&url=https://uniswap.exchange/swap',
-    color: '#1C74CC',
-    mobile: true,
-    mobileOnly: true
-  },
-  FORTMATIC: {
-    connector: fortmatic,
-    name: 'Fortmatic',
-    iconName: 'fortmaticIcon.png',
-    description: 'Login using Fortmatic hosted wallet',
-    href: null,
-    color: '#6748FF',
-    mobile: true
-  },
-  Portis: {
-    connector: portis,
-    name: 'Portis',
-    iconName: 'portisIcon.png',
-    description: 'Login using Portis hosted wallet',
-    href: null,
-    color: '#4A6C9B',
-    mobile: true
   }
 }
 
+export const SUPPORTED_WALLETS =
+  process.env.REACT_APP_CHAIN_ID !== '1'
+    ? MAINNET_WALLETS
+    : {
+        ...MAINNET_WALLETS,
+        ...{
+          WALLET_CONNECT: {
+            connector: walletconnect,
+            name: 'WalletConnect',
+            iconName: 'walletConnectIcon.svg',
+            description: 'Connect to Trust Wallet, Rainbow Wallet and more...',
+            href: null,
+            color: '#4196FC'
+          },
+          WALLET_LINK: {
+            connector: walletlink,
+            name: 'Coinbase Wallet',
+            iconName: 'coinbaseWalletIcon.svg',
+            description: 'Use Coinbase Wallet app on mobile device',
+            href: null,
+            color: '#315CF5'
+          },
+          COINBASE_LINK: {
+            name: 'Open in Coinbase Wallet',
+            iconName: 'coinbaseWalletIcon.svg',
+            description: 'Open in Coinbase Wallet app.',
+            href: 'https://go.cb-w.com/mtUDhEZPy1',
+            color: '#315CF5',
+            mobile: true,
+            mobileOnly: true
+          },
+          TRUST_WALLET_LINK: {
+            name: 'Open in Trust Wallet',
+            iconName: 'trustWallet.png',
+            description: 'iOS and Android app.',
+            href: 'https://link.trustwallet.com/open_url?coin_id=60&url=https://uniswap.exchange/swap',
+            color: '#1C74CC',
+            mobile: true,
+            mobileOnly: true
+          },
+          FORTMATIC: {
+            connector: fortmatic,
+            name: 'Fortmatic',
+            iconName: 'fortmaticIcon.png',
+            description: 'Login using Fortmatic hosted wallet',
+            href: null,
+            color: '#6748FF',
+            mobile: true
+          },
+          Portis: {
+            connector: portis,
+            name: 'Portis',
+            iconName: 'portisIcon.png',
+            description: 'Login using Portis hosted wallet',
+            href: null,
+            color: '#4A6C9B',
+            mobile: true
+          }
+        }
+      }
+
 // list of tokens that lock fund on adding liquidity - used to disable button
 export const brokenTokens = [
   '0xB8c77482e45F1F44dE1745F52C74426C631bDD52',