fix: eth rpc configuration

fixes #51

README.md

@@ -1,8 +1,8 @@
 # Jade Explorer
 
-A block explorer for EVM-based blockchains. 
+A block explorer for EVM-based blockchains.
 
-Jade Explorer is a minimal block explorer that uses Jade Service Runner for managing background services (Multi-Geth), OpenRPC for underlying functionality, and Pristine. It does not use a database, and be configured to point at any remote RPC node for any EVM-based network. The goal of Jade Explorer is to provide a resource for network information and block exploration. 
+Jade Explorer is a minimal block explorer that uses Jade Service Runner for managing background services (Multi-Geth), OpenRPC for underlying functionality, and Pristine. It does not use a database, and be configured to point at any remote RPC node for any EVM-based network. The goal of Jade Explorer is to provide a resource for network information and block exploration.
 
 Explorer Features:
 - Display chain id
@@ -32,13 +32,17 @@ git clone https://github.com/etclabscore/jade-explorer.git && cd jade-explorer &
 ## Usage
 
 
+
+### Service Runner
+If you dont have a [service-runner](https://github.com/etclabscore/jade-service-runner) running you can use the one in the package.json via: (or see the configuration section below to provide your own ethereum rpc URL):
+
 ```bash
 npm run service-runner
 ```
 
 Jade Service Runner will run at http://localhost:8002/.
 
-Start the explorer.
+## Start the explorer.
 
 ```bash
 npm start
@@ -65,6 +69,22 @@ By default, multi-geth service will run ETC mainnet. Jade Service runner conveni
                     └── keystore
 ```
 
+### Configure default urls via environment variables
+
+Override eth url
+
+```
+REACT_APP_ETH_RPC_URL=https://services.jade.builders/multi-geth/mainnet/1.9.2 npm start
+```
+
+**OR**
+
+Override service runner url
+
+```
+REACT_APP_SERVICE_RUNNER_URL=https://services.jade.builders/ npm start
+```
+
 ## Resources
 
 - [Ethereum JSON RPC Specification](https://github.com/etclabscore/ethereum-json-rpc-specification)

src/App.tsx

@@ -2,7 +2,7 @@ import { AppBar, CssBaseline, Theme, Toolbar, Typography, IconButton, Grid } fro
 import { makeStyles, ThemeProvider } from "@material-ui/styles";
 import Link from "@material-ui/core/Link";
 import { Link as RouterLink } from "react-router-dom";
-import * as React from "react";
+import React, { Dispatch } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import useDarkMode from "use-dark-mode";
 import "./App.css";
@@ -32,12 +32,14 @@ function App(props: any) {
   const theme = darkMode.value ? darkTheme : lightTheme;
 
   const [, , setServiceRunnerUrl] = useServiceRunnerStore();
-  const [erpc]: [EthereumJSONRPC] = useMultiGethStore();
+  const [erpc, setMultiGethUrlOverride]: [EthereumJSONRPC, Dispatch<string>] = useMultiGethStore();
 
   const classes = useStyles(theme);
   const handleConfigurationChange = (type: string, url: string) => {
     if (type === "service-runner") {
       setServiceRunnerUrl(url);
+    } else if (type === "ethereum-rpc") {
+      setMultiGethUrlOverride(url);
     }
   };
 
@@ -55,7 +57,7 @@ function App(props: any) {
   }, 100, true);
 
   return (
-    <Router>
+    <Router >
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <AppBar color="default" elevation={0}>

src/hooks/useMultiGeth.ts

@@ -1,6 +1,6 @@
 import ERPC from "@etclabscore/ethereum-json-rpc";
 import JadeServiceRunner from "@etclabscore/jade-service-runner-client";
-import * as React from "react";
+import React, { useState, Dispatch } from "react";
 
 const serviceName = "multi-geth";
 
@@ -9,8 +9,9 @@ function useMultiGeth(
   serviceRunnerUrl: string,
   version: string,
   env: string,
-): [ERPC] {
+): [ERPC, Dispatch<string>] {
   const [erpc, setErpc] = React.useState();
+  const [urlOverride, setUrlOverride] = useState(process.env.REACT_APP_ETH_RPC_URL);
   React.useEffect(() => {
     if (!serviceRunner) {
       return;
@@ -23,7 +24,7 @@ function useMultiGeth(
       await serviceRunner.startService(serviceName, version, env);
       let parsedUrl;
       try {
-        parsedUrl = new URL(`${serviceRunnerUrl}/${serviceName}/${env}/${version}`);
+        parsedUrl = new URL(urlOverride || `${serviceRunnerUrl}/${serviceName}/${env}/${version}`);
       } catch (e) {
         return;
       }
@@ -48,8 +49,8 @@ function useMultiGeth(
       }
     };
     runAsync();
-  }, [serviceRunner, serviceRunnerUrl, version, env]);
-  return [erpc];
+  }, [serviceRunner, serviceRunnerUrl, version, env, urlOverride]);
+  return [erpc, setUrlOverride];
 }
 
 export default useMultiGeth;

src/hooks/useServiceRunner.ts

@@ -1,7 +1,7 @@
 import JadeServiceRunner from "@etclabscore/jade-service-runner-client";
-import * as React from "react";
+import React, { Dispatch } from "react";
 
-function useServiceRunner(defaultUrl: string): [JadeServiceRunner | undefined, string, any] {
+function useServiceRunner(defaultUrl: string): [JadeServiceRunner | undefined, string, Dispatch<string>] {
   const [url, setUrl] = React.useState(defaultUrl);
   const [serviceRunner, setServiceRunner] = React.useState<JadeServiceRunner | undefined>();
   React.useEffect(() => {