Merge pull request #2 from stakefrites/restructure

Restructure
stakefrites · Mar 15, 2022 · 53bdffb · 53bdffb
2 parents 807b55e + 51763dd
commit 53bdffb
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 50 deletions.
diff --git a/src/components/NetworkFinder.js b/src/components/NetworkFinder.js
@@ -119,7 +119,7 @@ function NetworkFinder() {
       setIsNetworkLoading(true);
       getNetworks().then((networks) => {
         setNetworks(networks);
-        setIsNetworkLoading(false);
+        // setIsNetworkLoading(false);
       });
     }
   }, [networks]);
@@ -134,7 +134,7 @@ function NetworkFinder() {
       const networkName = Object.keys(networks)[0];
       const data = networks[networkName];
       if (!data) {
-        setIsNetworkLoading(false);
+        //setIsNetworkLoading(false);
         return;
       }
       Network(data)
@@ -144,7 +144,6 @@ function NetworkFinder() {
           getPrices(network);
         })
         .then(() => {
-          console.log(networks);
           return mapAsync(Object.values(networks), async (network) => {
             const newData = await Network(network);
             return newData;
@@ -153,13 +152,15 @@ function NetworkFinder() {
         .then((data) => {
           console.log("new improved Data", data);
           setNetworks(data);
+          setIsNetworkLoading(false);
         });
     }
   }, [networks, network]);
 
-  if (isNetworkLoading && !network && !pricesLoaded) {
+  if (isNetworkLoading) {
     return (
       <div className="pt-5 text-center">
+        <p> Initializing blockchain data...</p>
         <Spinner animation="border" role="status">
           <span className="visually-hidden">
             Initializing blockchain data...

diff --git a/src/components/NewApp.js b/src/components/NewApp.js
@@ -13,6 +13,17 @@ import About from "./modules/About";
 
 import { Bech32 } from "@cosmjs/encoding";
 
+function useUpdateEffect(effect, dependencies = []) {
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      return effect();
+    }
+  }, dependencies);
+}
 const suggestChain = (network) => {
   const currency = {
     coinDenom: network.symbol,
@@ -41,29 +52,16 @@ const suggestChain = (network) => {
   });
 };
 
-function useUpdateEffect(effect, dependencies = []) {
-  const isInitialMount = useRef(true);
-
-  useEffect(() => {
-    if (isInitialMount.current) {
-      isInitialMount.current = false;
-    } else {
-      return effect();
-    }
-  }, dependencies);
-}
-
 const NewApp = (props) => {
   const isInitialMount = useRef(true);
   const { prices } = props;
 
-  console.log("newAPP reload", props);
   const [address, setAddress] = useState(false);
   const [showAbout, setShowAbout] = useState(false);
   const [error, setError] = useState();
   const [stargateClient, setStargateClient] = useState();
   const [keplr, setKeplr] = useState();
-  const [accounts, setAccounts] = useState();
+  const [accounts, setAccounts] = useState([]);
   const [newAddress, setNewAddress] = useState("");
   const [currentWallet, setCurrentWallet] = useState();
 
@@ -81,11 +79,13 @@ const NewApp = (props) => {
   }, [keplr]);
 
   useEffect(() => {
-    //getAccounts();=
+    getAccounts();
+    getAccounts();
     window.addEventListener("keplr_keystorechange", reconsiderAddress);
     if (!window.keplr) {
       setKeplr(false);
     } else {
+      connect();
       setKeplr(true);
     }
   }, []);
@@ -101,12 +101,13 @@ const NewApp = (props) => {
     } catch (e) {
       console.log("enable error signer");
       console.log(e.message, e);
-      await suggestChain(props.network);
+      await suggestChain(props.network, window);
     }
     if (window.getOfflineSigner) {
       console.log("offline signer");
       const offlineSigner = await window.getOfflineSignerAuto(chainId);
       const key = await window.keplr.getKey(chainId);
+      console.log(key, offlineSigner, Bech32.encode(props.network.prefix, key));
       const stargateClient = await props.network.signingClient(
         offlineSigner,
         key
@@ -124,14 +125,15 @@ const NewApp = (props) => {
   };
 
   const reconsiderAddress = async () => {
-    const chainId = this.props.network.chainId;
+    console.log("reconsidering address");
+    const chainId = props.network.chainId;
     const key = await window.keplr.getKey(chainId);
-    const stargateClient = await this.props.network.signingClient(
-      offlineSigner,
-      key
-    );
+    console.log("trackmos address", Bech32.encode("trackmos", key));
 
-    const address = await stargateClient.getAddress();
+    const address = key.bech32Address;
+    const newAccounts = _.uniq([...accounts].push(address));
+    //setAccounts(newAccounts);
+    localStorage.setItem("savedAccounts", newAccounts);
     setAddress(address);
   };
 
@@ -140,7 +142,8 @@ const NewApp = (props) => {
     console.log("current accounts", currentAccounts);
     if (currentAccounts) {
       const myAccounts = JSON.parse(currentAccounts);
-      setAccounts(myAccounts);
+      console.log("you have accounts", myAccounts);
+      setAccounts(_.uniq(myAccounts));
     }
   };
 
@@ -162,16 +165,18 @@ const NewApp = (props) => {
 
   return (
     <>
-      <Header />
       <Container>
+        <Header />
         <div className="mb-5">
           <AlertMessage message={error} variant="danger" dismissible={false} />
           {address ? (
             <>
               <SomeTrackerHome
                 address={address}
+                setAddress={setAddress}
                 error={error}
                 accounts={accounts}
+                setAccounts={setAccounts}
                 {...props}
               />
             </>
@@ -180,6 +185,27 @@ const NewApp = (props) => {
               {!keplr ? (
                 <>
                   <AlertMessage variant="warning" dismissible={false}>
+                    {Array.isArray(accounts) ? (
+                      <div>
+                        <p>You have {accounts.length} accounts saved</p>
+                        {accounts.map((account) => {
+                          return (
+                            <div>
+                              <Button
+                                onClick={() => {
+                                  setAddress(account);
+                                }}
+                                variant="outline-dark"
+                              >
+                                {account}
+                              </Button>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      ""
+                    )}
                     Please install the{" "}
                     <a
                       href="https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap?hl=en"

diff --git a/src/components/SomeTracker/Result.js b/src/components/SomeTracker/Result.js
@@ -6,13 +6,10 @@ import { CashStack } from "react-bootstrap-icons";
 import _ from "lodash";
 
 const Result = (props) => {
-  console.log("Result  --->", props);
   let totalValue = 0;
 
   if (props.balances !== undefined) {
     const realBalances = props.balances.map((balance) => {
-      console.log("mapping balances", balance, props.prices);
-
       const thisPrice = props.prices[balance.coinGeckoId].price;
       totalValue += balance.total * thisPrice;
       return {

diff --git a/src/components/SomeTracker/SomeTrackerHome.js b/src/components/SomeTracker/SomeTrackerHome.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import Result from "./Result";
 import { Spinner, Button } from "react-bootstrap";
 import { ArrowClockwise } from "react-bootstrap-icons";
+import _ from "lodash";
 
 function useUpdateEffect(effect, dependencies = []) {
   const isInitialMount = useRef(true);
@@ -16,6 +17,7 @@ function useUpdateEffect(effect, dependencies = []) {
 }
 
 function SomeTrackerHome(props) {
+  console.log("new some tracker reaload", props);
   const [balances, setBalances] = useState();
   const [balancesLoaded, setBalancesLoaded] = useState(false);
   const [interval, setStateInterval] = useState();
@@ -27,8 +29,9 @@ function SomeTrackerHome(props) {
   }, []);
 
   useEffect(() => {
-    console.log("effect hook for balances");
-  }, [balances]);
+    console.log("effect hook for balances", props.address);
+    refresh();
+  }, [props.address]);
 
   function refresh(hardRefresh) {
     getBalances();
@@ -37,6 +40,7 @@ function SomeTrackerHome(props) {
   function hardRefresh() {
     console.log("HR address", props.address);
     localStorage.removeItem("balances");
+    setBalances([]);
     setBalancesLoaded(false);
     refresh(true);
   }
@@ -68,16 +72,17 @@ function SomeTrackerHome(props) {
     let cacheData = {};
     try {
       cacheData = JSON.parse(cache);
-      console.log("parsed cache", cacheData);
-      const { balances } = cacheData;
+      console.log("parsed cache", JSON.parse(cacheData));
+      const { balances } = JSON.parse(cacheData);
       console.log("parsed balances", balances);
       cacheData.balances = balances;
 
       cache = cacheData;
     } catch {
+      console.log("catched", cache, cacheData);
       cacheData.balances = cache;
     }
-    if (!cacheData.balances) {
+    if (!Array.isArray(cacheData.balances)) {
       console.log("not balances");
       return;
     }
@@ -102,16 +107,17 @@ function SomeTrackerHome(props) {
     const totalReducer = (acc, item) => {
       return acc + parseInt(item.value);
     };
+    const cache = getBalancesCache(true);
+    console.log(cache);
     setBalancesLoaded(false);
-    console.log(!getBalancesCache, "balances cache");
+    console.log(
+      "getting balances, if true, go to network",
+      getBalancesCache(true) == undefined,
+      getBalancesCache(true) && hardRefresh
+    );
 
     if (!getBalancesCache(true) || hardRefresh) {
-      console.log("Getting balances from Network", getBalancesCache());
       const networks = Object.entries(props.networks);
-      console.log(
-        "new app, getting balabnec with query",
-        props.network.queryClient
-      );
       try {
         const portfolio = props.network.queryClient
           .getPortfolio(props.address, props.networks)
@@ -121,6 +127,17 @@ function SomeTrackerHome(props) {
               props.address,
               JSON.stringify({ balances: data, time: +new Date() })
             );
+            const newAccounts = props.accounts
+              ? [props.address, ...props.accounts]
+              : [props.address];
+            console.log(
+              "ACCOUNTS PROPS & NEW ACCOUNTS",
+              props.accounts,
+              props.address,
+              newAccounts
+            );
+            localStorage.setItem("savedAccounts", JSON.stringify(newAccounts));
+            props.setAccounts(_.uniq(newAccounts));
             setBalances(data);
             setBalancesLoaded(true);
           });
@@ -130,17 +147,19 @@ function SomeTrackerHome(props) {
         return;
       }
     } else {
-      console.log("Getting balances from cache", getBalancesCache());
       const balances = getBalancesCache(true);
+      console.log("balances cachce", balances);
       const newBalances = JSON.parse(balances);
+
       const totalValue = newBalances.balances.reduce(totalReducer, totalacc);
       setBalances(newBalances.balances);
       setBalancesLoaded(true);
     }
   };
-  if (!balancesLoaded && !balances) {
+  if (!balancesLoaded) {
     return (
       <div className="pt-5 text-center">
+        <p>Loading all balances ....</p>
         <Spinner animation="border" role="status">
           <span className="visually-hidden">
             Initializing blockchain data...
@@ -161,6 +180,28 @@ function SomeTrackerHome(props) {
           Refresh Balances <ArrowClockwise color="black" size={16} />
         </Button>
       </p>
+      {Array.isArray(props.accounts) ? (
+        <div>
+          <p>You have {props.accounts.length} accounts saved</p>
+          {props.accounts.map((account) => {
+            const styles = account == props.address ? "dark" : "outline-dark";
+            return (
+              <div key={account}>
+                <Button
+                  variant={styles}
+                  onClick={() => {
+                    props.setAddress(account);
+                  }}
+                >
+                  {account}
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        ""
+      )}
       <Result balances={balances} {...props} />
     </>
   );

diff --git a/src/components/modules/Header.js b/src/components/modules/Header.js
@@ -1,10 +1,12 @@
 import StakeFriteLogoLong from "../../assets/Logo_Stake_house_VF_150.png";
+import StakeFriteLogo from "../../assets/[email protected]";
 
 function Header(props) {
   return (
     <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" />
+        <img src={StakeFriteLogo} height="75" alt="Stake Frites" />{" "}
+        <span>Trackmos</span>
       </div>
       <div className="invisible d-flex align-items-center mb-3 mb-md-0 text-dark text-decoration-none"></div>
     </header>

diff --git a/src/index.html b/src/index.html
@@ -5,17 +5,14 @@
     <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Stake_Frite Tracker"
-    />
+    <meta name="description" content="Stake_Frite Tracker" />
     <link rel="apple-touch-icon" href="./assets/icon.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="./manifest.json" />
-    <title>Stake_Frite | Some-Tracker</title>
+    <title>Trackmos - Your favorite Cosmos tracker</title>
     <script type="module" src="index.js"></script>
   </head>
   <body>