add better testnet support (#446)

* add rinkeby support

* add client-side routing link

README.md

@@ -32,7 +32,9 @@ Rename `.env.local.example` to `.env.local` and fill in the appropriate variable
 yarn start
 ```
 
-To run on a testnet, simply update the `.env.local` file appropriately.
+To run on a testnet, make a copy of `.env.local.example` named `.env.local`, change `REACT_APP_NETWORK_ID` to `"{yourNetworkId}"`, and change `REACT_APP_NETWORK_URL` to e.g. `"https://{yourNetwork}.infura.io/v3/{yourKey}"`.
+
+If deploying with Github Pages, be aware that there's some [tricky client-side routing behavior with `create-react-app`](https://create-react-app.dev/docs/deployment#notes-on-client-side-routing).
 
 ## Contributions
 

src/NetworkOnlyConnector.js

@@ -4,12 +4,20 @@ import { Connectors } from 'web3-react'
 const { Connector } = Connectors
 
 function getFallbackProvider(providerURL) {
-  const etherscan = new ethers.providers.EtherscanProvider()
-  const infura = new ethers.providers.JsonRpcProvider(providerURL)
+  if (Number(process.env.REACT_APP_NETWORK_ID) === 1) {
+    const etherscan = new ethers.providers.EtherscanProvider()
+    const infura = new ethers.providers.JsonRpcProvider(providerURL)
 
-  const providers = [infura, etherscan]
+    const providers = [infura, etherscan]
 
-  return new ethers.providers.FallbackProvider(providers)
+    return new ethers.providers.FallbackProvider(providers)
+  } else {
+    const infura = new ethers.providers.JsonRpcProvider(providerURL)
+
+    const providers = [infura]
+
+    return new ethers.providers.FallbackProvider(providers)
+  }
 }
 
 export default class NetworkOnlyConnector extends Connector {

src/components/TokenLogo/index.js

@@ -15,6 +15,9 @@ const Image = styled.img`
 `
 
 const Emoji = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: ${({ size }) => size};
   height: ${({ size }) => size};
 `

src/contexts/Application.js

@@ -82,7 +82,7 @@ export function Updater() {
 
   // update usd price
   useEffect(() => {
-    if (library) {
+    if (library && networkId === 1) {
       let stale = false
 
       getUSDPrice(library)

src/contexts/Tokens.js

@@ -395,6 +395,14 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0xaE76c84C9262Cdb9abc0C2c8888e62Db8E22A0bF'
     }
+  },
+  4: {
+    '0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa': {
+      [NAME]: 'Dai',
+      [SYMBOL]: 'DAI',
+      [DECIMALS]: 18,
+      [EXCHANGE_ADDRESS]: '0xaF51BaAA766b65E8B3Ee0C2c33186325ED01eBD5'
+    }
   }
 }