diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index f080b96..e671087 100644 --- a/src/AddressTransactions.tsx +++ b/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(); const location = useLocation(); const history = useHistory(); diff --git a/src/App.tsx b/src/App.tsx index 122081c..2bf5e2a 100644 --- a/src/App.tsx +++ b/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 ( LOADING}> - + @@ -41,7 +41,7 @@ const App = () => { - + ); }; diff --git a/src/Block.tsx b/src/Block.tsx index 6f9ab22..963f2f9 100644 --- a/src/Block.tsx +++ b/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(); const [block, setBlock] = useState(); diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx index 5e6d4ad..8f8f474 100644 --- a/src/BlockTransactions.tsx +++ b/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(); const location = useLocation(); const qs = queryString.parse(location.search); diff --git a/src/Home.tsx b/src/Home.tsx index 9cc40fc..8626dce 100644 --- a/src/Home.tsx +++ b/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(); const [canSubmit, setCanSubmit] = useState(false); const history = useHistory(); diff --git a/src/Transaction.tsx b/src/Transaction.tsx index 724fb31..4f8c312 100644 --- a/src/Transaction.tsx +++ b/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(); const { txhash } = params; diff --git a/src/useErigon.ts b/src/useConfig.ts similarity index 89% rename from src/useErigon.ts rename to src/useConfig.ts index bd64364..df8deb2 100644 --- a/src/useErigon.ts +++ b/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(); const [config, setConfig] = useState(); diff --git a/src/useProvider.ts b/src/useProvider.ts index 895c16d..08208cf 100644 --- a/src/useProvider.ts +++ b/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 => { - const [configOK, config] = useErigon(); - if (!configOK) { +export const useProvider = ( + config?: OtterscanConfig +): 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); diff --git a/src/useRuntime.ts b/src/useRuntime.ts new file mode 100644 index 0000000..2ebb766 --- /dev/null +++ b/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(null!);