updates to the menus

src/components/global/MobileMenu.jsx

@@ -23,6 +23,7 @@ const MobileMenu = () => {
   const navigate = useNavigate();
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef(null);
+  const [selected, setSelected] = React.useState("/overview");
 
   const handleToggle = () => {
     setOpen((prevOpen) => !prevOpen);
@@ -57,6 +58,7 @@ const MobileMenu = () => {
 
   const navigateTo = (route) => {
     navigate(route);
+    setSelected(route);
     handleClose();
   };
 
@@ -117,55 +119,71 @@ const MobileMenu = () => {
                   >
                     <MenuItem
                       onClick={() => navigateTo("/overview")}
-                      sx={{ color: "#17054B" }}
+                      sx={{
+                        color: selected === "/overview" ? "#9A1DB1" : "#17054B",
+                      }}
                     >
                       <DashboardCustomizeOutlinedIcon sx={{ mr: 1 }} />
                       Overview
                     </MenuItem>
 
                     <MenuItem
                       onClick={() => navigateTo("/generators")}
-                      sx={{ color: "#17054B" }}
+                      sx={{
+                        color:
+                          selected === "/generators" ? "#9A1DB1" : "#17054B",
+                      }}
                     >
                       <ViewDayOutlinedIcon sx={{ mr: 1 }} />
                       Generators
                     </MenuItem>
 
                     <MenuItem
                       onClick={() => navigateTo("/nodes")}
-                      sx={{ color: "#17054B" }}
+                      sx={{
+                        color: selected === "/nodes" ? "#9A1DB1" : "#17054B",
+                      }}
                     >
                       <AccountTreeOutlinedIcon sx={{ mr: 1 }} />
                       Nodes
                     </MenuItem>
 
                     <MenuItem
                       onClick={() => navigateTo("/activity")}
-                      sx={{ color: "#17054B" }}
+                      sx={{
+                        color: selected === "/activity" ? "#9A1DB1" : "#17054B",
+                      }}
                     >
                       <SettingsOutlinedIcon sx={{ mr: 1 }} />
                       Network Activity
                     </MenuItem>
 
                     <MenuItem
                       onClick={() => navigateTo("/stats")}
-                      sx={{ color: "#17054B" }}
+                      sx={{
+                        color: selected === "/stats" ? "#9A1DB1" : "#17054B",
+                      }}
                     >
                       <QueryStatsOutlinedIcon sx={{ mr: 1 }} />
                       Stats
                     </MenuItem>
 
                     <MenuItem
                       onClick={() => navigateTo("/blocks")}
-                      sx={{ color: "#17054B" }}
+                      sx={{
+                        color: selected === "/blocks" ? "#9A1DB1" : "#17054B",
+                      }}
                     >
                       <ViewInArOutlinedIcon sx={{ mr: 1 }} />
                       Blocks
                     </MenuItem>
 
                     <MenuItem
                       onClick={() => navigateTo("/rewards-calc")}
-                      sx={{ color: "#17054B" }}
+                      sx={{
+                        color:
+                          selected === "/rewards-calc" ? "#9A1DB1" : "#17054B",
+                      }}
                     >
                       <CalculateOutlinedIcon sx={{ mr: 1 }} />
                       Reward Calc

src/components/global/Sidebar.jsx

@@ -19,12 +19,13 @@ import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 
 const Item = ({ title, to, icon, selected, setSelected }) => {
   const theme = useTheme();
-  const colors = theme.palette.primary.main;
+  const isActive = selected === title;
+
   return (
     <MenuItem
-      active={selected === title}
+      active={isActive}
       style={{
-        color: "#17054b",
+        color: isActive ? "#9A1DB1" : "#17054b",
       }}
       onClick={() => setSelected(title)}
       icon={icon}

src/pages/overview/overviewTop.jsx

@@ -51,8 +51,7 @@ const OverviewTop = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        // Fetch coin price and market cap
-        const priceResponse = await axios.get(
+        const marketResponse = await axios.get(
           "https://api.coingecko.com/api/v3/simple/price",
           {
             params: {
@@ -62,9 +61,14 @@ const OverviewTop = () => {
             },
           }
         );
-        const priceData = priceResponse.data;
-        setCoinPrice(priceData["lto-network"].usd);
-        setMarketCap(priceData["lto-network"].usd_market_cap);
+        const priceResponse = await axios.get(
+          "https://api.binance.com/api/v3/ticker/price?symbol=LTOUSDT"
+        );
+        const marketData = marketResponse.data;
+        // setCoinPrice(priceData["lto-network"].usd);
+        setMarketCap(marketData["lto-network"].usd_market_cap);
+        const price = priceResponse.data.price;
+        setCoinPrice(parseFloat(price).toFixed(3));
 
         // Fetch peer data
         const peersResponse = await axios.get(`${EXT_URL2}/nodes/json`);
@@ -131,7 +135,7 @@ const OverviewTop = () => {
                 ${coinPrice ? coinPrice : "---"}
               </Typography>
               <Typography sx={{ mb: 1.5, mt: 2 }} color="primary.sec">
-                (Coingecko)
+                (Binance)
               </Typography>
             </CardContent>
             {/* <CardActions>

src/utils/getAPY.js

@@ -23,9 +23,9 @@ export async function getApy() {
 
     const reward = totalReward / 100000000;
 
-    //console.log("total mining rewards: ", reward);
+    console.log("total gen. rewards: ", reward);
     const APY = (reward / totalBalance) * 100 * 52;
-    //console.log("APY: ", (reward / totalBalance) * 100 * 52);
+    console.log("APY: ", (reward / totalBalance) * 100 * 52);
     return APY;
   } catch (error) {
     console.error("Error fetching data:", error);