feat: sync networks displayed in the calculator

src/screens/staking/components/calculate_rewards/components/calculator/index.tsx

@@ -17,12 +17,17 @@ import useTranslation from "next-translate/useTranslation";
 import Image from "next/legacy/image";
 import React from "react";
 
-import { getNetworkInfo } from "@src/utils/network_info";
+import { handleNetworkClick } from "@src/utils/network_functions";
+import {
+  allNetworkKeys,
+  getNetworkInfo,
+  skippedRewardsNetworks,
+} from "@src/utils/network_info";
 
-import { calculatorKeys } from "./config";
+import { useCalculateRewardsHook } from "../../hooks";
 import { styles } from "./styles";
 
-const Calculator = (props: any) => {
+const Calculator = () => {
   const { t } = useTranslation("staking");
   const theme = useTheme();
   const onlyLargeScreen = useMediaQuery(theme.breakpoints.up("laptop"));
@@ -35,11 +40,12 @@ const Calculator = (props: any) => {
     tokens,
     monthlyPeriods,
     setMonthlyPeriods,
-  } = props;
+  } = useCalculateRewardsHook();
 
-  const networkData = calculatorKeys.map((x: string | number) =>
-    getNetworkInfo(x),
-  );
+  const networkData = allNetworkKeys
+    .map((x: string | number) => getNetworkInfo(x))
+    .filter((x) => !skippedRewardsNetworks.has(x.key))
+    .filter((x) => x.delegate);
 
   React.useEffect(() => {
     if (selectedToken === "") {
@@ -60,13 +66,9 @@ const Calculator = (props: any) => {
     };
   }, []);
 
-  const handleSliderChange = (_event: Event, newValue: number | number[]) => {
-    setMonthlyPeriods(newValue);
-  };
-
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setMonthlyPeriods(
-      event.target.value === "" ? "" : Number(event.target.value),
+      event.target.value === "" ? 0 : Number(event.target.value),
     );
   };
 
@@ -274,7 +276,9 @@ const Calculator = (props: any) => {
                 defaultValue={0}
                 max={12}
                 min={0}
-                onChange={handleSliderChange}
+                onChange={(_, newValue) =>
+                  setMonthlyPeriods(newValue as number)
+                }
                 size="small"
                 step={1}
                 sx={styles.slider}
@@ -398,10 +402,10 @@ const Calculator = (props: any) => {
           <Box sx={styles.buttonDiv}>
             <Button
               disabled={!selectedToken.delegate}
-              href={selectedToken.delegate || ""}
-              rel="noreferrer"
+              onClick={() => {
+                handleNetworkClick(selectedToken);
+              }}
               sx={styles.button}
-              target="_blank"
             >
               {t("stake with us!")}
             </Button>

src/screens/staking/components/calculate_rewards/hooks.tsx

@@ -185,7 +185,8 @@ export const useCalculateRewardsHook = () => {
       selectedToken.key !== "terra_classic" &&
       selectedToken.key !== "gravity_bridge" &&
       selectedToken.key !== "jackal" &&
-      selectedToken.key !== "terra"
+      selectedToken.key !== "terra" &&
+      selectedToken.key !== "mars"
     ) {
       networkFunction = defaultFunctions();
       networkFunction.gecko = `${process.env.NEXT_PUBLIC_COINGECKO_API}/coins/${selectedToken.key}`;

src/screens/staking/components/calculate_rewards/index.tsx

@@ -3,22 +3,12 @@ import useTranslation from "next-translate/useTranslation";
 import dynamic from "next/dynamic";
 
 import { Calculator } from "./components";
-import { useCalculateRewardsHook } from "./hooks";
 
 const Trans = dynamic(() => import("next-translate/Trans"), { ssr: false });
 
 const CalculateRewards = () => {
   const { t } = useTranslation("staking");
   const theme = useTheme();
-  const {
-    selectedToken,
-    setSelectedToken,
-    totalEarnings,
-    handleChange,
-    tokens,
-    monthlyPeriods,
-    setMonthlyPeriods,
-  } = useCalculateRewardsHook();
 
   return (
     <Box display="flex" justifyContent="center">
@@ -92,15 +82,7 @@ const CalculateRewards = () => {
         >
           {t("calculate rewards desc")}
         </Typography>
-        <Calculator
-          handleChange={handleChange}
-          monthlyPeriods={monthlyPeriods}
-          selectedToken={selectedToken}
-          setMonthlyPeriods={setMonthlyPeriods}
-          setSelectedToken={setSelectedToken}
-          tokens={tokens}
-          totalEarnings={totalEarnings}
-        />
+        <Calculator />
       </Box>
     </Box>
   );

src/utils/network_info.ts

@@ -820,6 +820,9 @@ const cosmosNetworkKeys = [
   "sui",
 ].sort();
 
+// These networks are not supported by the rewards calculator yet
+export const skippedRewardsNetworks = new Set(["mars", "nomic"]);
+
 const getNetworkKeysArray = () => {
   const arr = [];
   cosmosNetworkKeys.map((key) => arr.push(key));