Merge pull request #1 from stakefrites/restructure

Restructure

src/components/App.js

@@ -5,10 +5,11 @@ import _ from "lodash";
 import AlertMessage from "./modules/AlertMessage";
 import NetworkSelect from "./NetworkSelect";
 import Wallet from "./Stake/Wallet";
-import SomeTracker from "./SomeTracker/SomeTracker";
+import SomeTracker from "./SomeTracker/SomeTrackerHome";
 import Coins from "./modules/Coins";
 import ValidatorLink from "./Stake/ValidatorLink";
-import About from "./About";
+import About from "./modules/About";
+import NewApp from "./NewApp";
 import { Bech32 } from "@cosmjs/encoding";
 
 import { MsgGrant, MsgRevoke } from "cosmjs-types/cosmos/authz/v1beta1/tx.js";
@@ -438,6 +439,7 @@ class App extends React.Component {
   render() {
     return (
       <Container>
+        <NewApp></NewApp>
         <header className="d-flex flex-wrap justify-content-between py-3 mb-4 border-bottom">
           <div className="logo d-flex align-items-center mb-3 mb-md-0 text-dark text-decoration-none">
             <img src={StakeFriteLogoLong} height="75" alt="Stake Frites" />
@@ -467,6 +469,7 @@ class App extends React.Component {
             (!this.state.keplr ? (
               <>
                 <AlertMessage variant="warning" dismissible={false}>
+                  <NewApp></NewApp>
                   Please install the{" "}
                   <a
                     href="https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap?hl=en"

src/components/NetworkFinder copy.js

@@ -0,0 +1,136 @@
+import _ from "lodash";
+import axios from "axios";
+import React, { useEffect, useReducer } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import Network from "../utils/Network.mjs";
+import { overrideNetworks } from "../utils/Helpers.mjs";
+import NewApp from "./NewApp";
+
+import { Spinner } from "react-bootstrap";
+
+import networksData from "../networks.json";
+
+function NetworkFinder() {
+  const params = useParams();
+  const navigate = useNavigate();
+
+  const [state, setState] = useReducer(
+    (state, newState) => ({ ...state, ...newState }),
+    { loading: true, networks: [], operators: [], validators: [] }
+  );
+
+  const getNetworks = async () => {
+    const registryNetworks = await axios
+      .get("https://registry.cosmos.directory")
+      .then((res) => res.data)
+      .then((data) => data.reduce((a, v) => ({ ...a, [v.directory]: v }), {}));
+
+    const networks = networksData
+      .filter((el) => el.enabled !== false)
+      .map((data) => {
+        const registryData = registryNetworks[data.name] || {};
+        return { ...registryData, ...data };
+      });
+    return _.compact(networks).reduce((a, v) => ({ ...a, [v.name]: v }), {});
+  };
+
+  const changeNetwork = (network, validators) => {
+    const operators = Object.keys(validators).length
+      ? network.getOperators(validators)
+      : [];
+    setState({
+      network: network,
+      validators: validators,
+      operators: operators,
+    });
+
+    navigate("/" + network.name);
+  };
+
+  useEffect(() => {
+    if (!Object.keys(state.networks).length) {
+      setState({ loading: true });
+      getNetworks().then((networks) => {
+        setState({ networks: networks });
+      });
+    }
+  }, [state.networks]);
+
+  useEffect(() => {
+    if (Object.keys(state.networks).length && !state.network) {
+      const networkName = params.network || Object.keys(state.networks)[0];
+      const data = state.networks[networkName];
+      if (params.network && !data) {
+        navigate("/" + Object.keys(state.networks)[0]);
+      }
+      if (!data) {
+        setState({ loading: false });
+        return;
+      }
+      if (!params.network) {
+        navigate("/" + networkName);
+      }
+      Network(data).then((network) => {
+        setState({ network: network });
+      });
+    }
+  }, [state.networks, state.network, params.network, navigate]);
+
+  useEffect(() => {
+    if (state.error) return;
+
+    if (state.network && !Object.keys(state.validators).length) {
+      if (!state.network.connected) {
+        return setState({
+          loading: false,
+        });
+      }
+
+      state.network.getValidators().then(
+        (validators) => {
+          setState({
+            validators,
+            operators: state.network.getOperators(validators),
+            loading: false,
+          });
+        },
+        (error) =>
+          setState({
+            loading: false,
+            error: "Unable to connect right now, try again",
+          })
+      );
+    }
+  }, [state.network]);
+
+  if (state.loading) {
+    return (
+      <div className="pt-5 text-center">
+        <Spinner animation="border" role="status">
+          <span className="visually-hidden">Loading...</span>
+        </Spinner>
+      </div>
+    );
+  }
+
+  if (state.error) {
+    return <p>Loading failed</p>;
+  }
+
+  if (!state.network) {
+    return <p>Page not found</p>;
+  }
+
+  return (
+    <NewApp
+      networks={state.networks}
+      network={state.network}
+      validators={state.validators}
+      changeNetwork={(network, validators) =>
+        changeNetwork(network, validators)
+      }
+    />
+  );
+}
+
+export default NetworkFinder;