Merge branch 'feature/remove-testnet-locks' into develop

src/App.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import WarningHeader from "./WarningHeader";
 import Home from "./Home";
 import Search from "./Search";
 import Title from "./Title";
@@ -26,6 +27,7 @@ const App = () => {
       ) : (
         <RuntimeContext.Provider value={runtime}>
           <div className="h-screen flex flex-col">
+            <WarningHeader />
             <Router>
               <Switch>
                 <Route path="/" exact>

src/Block.tsx

@@ -67,8 +67,12 @@ const Block: React.FC = () => {
 
       const _block = provider.formatter.block(_rawBlock);
       const extBlock: ExtendedBlock = {
-        blockReward: provider.formatter.bigNumber(_rawIssuance.blockReward),
-        unclesReward: provider.formatter.bigNumber(_rawIssuance.uncleReward),
+        blockReward: provider.formatter.bigNumber(
+          _rawIssuance.blockReward ?? 0
+        ),
+        unclesReward: provider.formatter.bigNumber(
+          _rawIssuance.uncleReward ?? 0
+        ),
         feeReward: fees,
         size: provider.formatter.number(_rawBlock.size),
         sha3Uncles: _rawBlock.sha3Uncles,

src/Footer.tsx

@@ -5,7 +5,13 @@ const Footer: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
 
   return (
-    <div className="w-full px-2 py-1 border-t border-t-gray-100 text-xs bg-link-blue text-gray-200 text-center">
+    <div
+      className={`w-full px-2 py-1 border-t border-t-gray-100 text-xs ${
+        provider?.network.chainId === 1
+          ? "bg-link-blue text-gray-200"
+          : "bg-orange-400 text-white"
+      } text-center`}
+    >
       {provider ? (
         <>Using Erigon node at {provider.connection.url}</>
       ) : (

src/Title.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useContext } from "react";
 import { Link, useHistory } from "react-router-dom";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 import PriceBox from "./PriceBox";
+import { RuntimeContext } from "./useRuntime";
 
 const Title: React.FC = () => {
+  const { provider } = useContext(RuntimeContext);
   const [search, setSearch] = useState<string>();
   const [canSubmit, setCanSubmit] = useState<boolean>(false);
   const history = useHistory();
@@ -43,7 +45,7 @@ const Title: React.FC = () => {
         </div>
       </Link>
       <div className="flex items-baseline space-x-3">
-        <PriceBox />
+        {provider?.network.chainId === 1 && <PriceBox />}
         <form
           className="flex"
           onSubmit={handleSubmit}

src/WarningHeader.tsx

@@ -0,0 +1,28 @@
+import React, { useContext } from "react";
+import { RuntimeContext } from "./useRuntime";
+
+const WarningHeader: React.FC = () => {
+  const { provider } = useContext(RuntimeContext);
+  const chainId = provider?.network.chainId;
+  if (chainId === 1) {
+    return <></>;
+  }
+
+  let chainMsg = `ChainID: ${chainId}`;
+  if (chainId === 3) {
+    chainMsg = "Ropsten Testnet";
+  } else if (chainId === 4) {
+    chainMsg = "Rinkeby Testnet";
+  } else if (chainId === 5) {
+    chainMsg = "Görli Testnet";
+  } else if (chainId === 42) {
+    chainMsg = "Kovan Testnet";
+  }
+  return (
+    <div className="w-full bg-orange-400 text-white text-center font-bold px-2 py-1">
+      You are on {chainMsg}
+    </div>
+  );
+};
+
+export default React.memo(WarningHeader);

src/useProvider.ts

@@ -33,10 +33,7 @@ export const useProvider = (
     setConnStatus(ConnectionStatus.CONNECTING);
 
     const tryToConnect = async () => {
-      const provider = new ethers.providers.JsonRpcProvider(
-        erigonURL,
-        "mainnet"
-      );
+      const provider = new ethers.providers.JsonRpcProvider(erigonURL);
 
       // Check if it is at least a regular ETH node
       let blockNumber: number = 0;