Extract runtime context object

src/AddressTransactions.tsx

@@ -12,7 +12,7 @@ import ResultHeader from "./search/ResultHeader";
 import PendingResults from "./search/PendingResults";
 import TransactionItem from "./search/TransactionItem";
 import { SearchController } from "./search/search";
-import { ProviderContext } from "./useProvider";
+import { RuntimeContext } from "./useRuntime";
 import { useENSCache } from "./useReverseCache";
 import { useFeeToggler } from "./search/useFeeToggler";
 
@@ -26,7 +26,7 @@ type PageParams = {
 };
 
 const AddressTransactions: React.FC = () => {
-  const provider = useContext(ProviderContext);
+  const { provider } = useContext(RuntimeContext);
   const params = useParams<BlockParams>();
   const location = useLocation<PageParams>();
   const history = useHistory();

src/App.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Home from "./Home";
 import Search from "./Search";
 import Title from "./Title";
-import { useProvider, ProviderContext } from "./useProvider";
+import { RuntimeContext, useRuntime } from "./useRuntime";
 
 const Block = React.lazy(() => import("./Block"));
 const BlockTransactions = React.lazy(() => import("./BlockTransactions"));
@@ -11,11 +11,11 @@ const AddressTransactions = React.lazy(() => import("./AddressTransactions"));
 const Transaction = React.lazy(() => import("./Transaction"));
 
 const App = () => {
-  const provider = useProvider();
+  const runtime = useRuntime();
 
   return (
     <Suspense fallback={<>LOADING</>}>
-      <ProviderContext.Provider value={provider}>
+      <RuntimeContext.Provider value={runtime}>
         <Router>
           <Switch>
             <Route path="/" exact>
@@ -41,7 +41,7 @@ const App = () => {
             </Route>
           </Switch>
         </Router>
-      </ProviderContext.Provider>
+      </RuntimeContext.Provider>
     </Suspense>
   );
 };

src/Block.tsx

@@ -16,7 +16,7 @@ import BlockLink from "./components/BlockLink";
 import AddressOrENSName from "./components/AddressOrENSName";
 import TransactionValue from "./components/TransactionValue";
 import HexValue from "./components/HexValue";
-import { ProviderContext } from "./useProvider";
+import { RuntimeContext } from "./useRuntime";
 import { useLatestBlockNumber } from "./useLatestBlock";
 
 type BlockParams = {
@@ -34,7 +34,7 @@ interface ExtendedBlock extends ethers.providers.Block {
 }
 
 const Block: React.FC = () => {
-  const provider = useContext(ProviderContext);
+  const { provider } = useContext(RuntimeContext);
   const params = useParams<BlockParams>();
 
   const [block, setBlock] = useState<ExtendedBlock>();

src/BlockTransactions.tsx

@@ -13,7 +13,7 @@ import BlockLink from "./components/BlockLink";
 import { ProcessedTransaction } from "./types";
 import { PAGE_SIZE } from "./params";
 import { useFeeToggler } from "./search/useFeeToggler";
-import { ProviderContext } from "./useProvider";
+import { RuntimeContext } from "./useRuntime";
 import { useENSCache } from "./useReverseCache";
 
 type BlockParams = {
@@ -25,7 +25,7 @@ type PageParams = {
 };
 
 const BlockTransactions: React.FC = () => {
-  const provider = useContext(ProviderContext);
+  const { provider } = useContext(RuntimeContext);
   const params = useParams<BlockParams>();
   const location = useLocation<PageParams>();
   const qs = queryString.parse(location.search);

src/Home.tsx

@@ -3,11 +3,11 @@ import { NavLink, useHistory } from "react-router-dom";
 import { ethers } from "ethers";
 import Logo from "./Logo";
 import Timestamp from "./components/Timestamp";
-import { ProviderContext } from "./useProvider";
+import { RuntimeContext } from "./useRuntime";
 import { useLatestBlock } from "./useLatestBlock";
 
 const Home: React.FC = () => {
-  const provider = useContext(ProviderContext);
+  const { provider } = useContext(RuntimeContext);
   const [search, setSearch] = useState<string>();
   const [canSubmit, setCanSubmit] = useState<boolean>(false);
   const history = useHistory();

src/Transaction.tsx

@@ -27,7 +27,7 @@ import FormattedBalance from "./components/FormattedBalance";
 import TokenTransferItem from "./TokenTransferItem";
 import erc20 from "./erc20.json";
 import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
-import { ProviderContext } from "./useProvider";
+import { RuntimeContext } from "./useRuntime";
 
 const TRANSFER_TOPIC =
   "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
@@ -37,7 +37,7 @@ type TransactionParams = {
 };
 
 const Transaction: React.FC = () => {
-  const provider = useContext(ProviderContext);
+  const { provider } = useContext(RuntimeContext);
   const params = useParams<TransactionParams>();
   const { txhash } = params;
 

src/useConfig.ts

@@ -4,7 +4,7 @@ export type OtterscanConfig = {
   erigonURL: string;
 };
 
-export const useErigon = (): [boolean?, OtterscanConfig?] => {
+export const useConfig = (): [boolean?, OtterscanConfig?] => {
   const [configOK, setConfigOK] = useState<boolean>();
   const [config, setConfig] = useState<OtterscanConfig>();
 

src/useProvider.ts

@@ -1,12 +1,12 @@
-import React from "react";
 import { ethers } from "ethers";
-import { useErigon } from "./useErigon";
+import { OtterscanConfig } from "./useConfig";
 
 export const DEFAULT_ERIGON_URL = "http://127.0.0.1:8545";
 
-export const useProvider = (): ethers.providers.JsonRpcProvider | undefined => {
+export const useProvider = (
-  const [configOK, config] = useErigon();
+  config?: OtterscanConfig
-  if (!configOK) {
+): ethers.providers.JsonRpcProvider | undefined => {
+  if (!config) {
     return undefined;
   }
 
@@ -20,7 +20,3 @@ export const useProvider = (): ethers.providers.JsonRpcProvider | undefined => {
 
   return new ethers.providers.JsonRpcProvider(erigonURL, "mainnet");
 };
-
-export const ProviderContext = React.createContext<
-  ethers.providers.JsonRpcProvider | undefined
->(undefined);

src/useRuntime.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { ethers } from "ethers";
+import { OtterscanConfig, useConfig } from "./useConfig";
+import { useProvider } from "./useProvider";
+
+export type OtterscanRuntime = {
+  config?: OtterscanConfig;
+  provider?: ethers.providers.JsonRpcProvider;
+};
+
+export const useRuntime = (): OtterscanRuntime => {
+  const [configOK, config] = useConfig();
+  const provider = useProvider(config);
+
+  if (!configOK) {
+    return {};
+  }
+
+  return { config, provider };
+};
+
+export const RuntimeContext = React.createContext<OtterscanRuntime>(null!);