Final fixes

packages/fetch-extension/src/components-v2/form/address-input.tsx

@@ -17,7 +17,11 @@ import {
 import { observer } from "mobx-react-lite";
 import { useIntl } from "react-intl";
 import { validateAgentAddress } from "@utils/validate-agent";
-import { CHAIN_ID_DORADO, CHAIN_ID_FETCHHUB } from "../../config.ui.var";
+import {
+  CHAIN_ID_DORADO,
+  CHAIN_ID_ERIDANUS,
+  CHAIN_ID_FETCHHUB,
+} from "../../config.ui.var";
 import { getBeneficiaryAddress } from "../../name-service/fns-apis";
 import { Card } from "../card";
 import { Dropdown } from "@components-v2/dropdown";
@@ -135,7 +139,7 @@ export const AddressInput: FunctionComponent<AddressInputProps> = observer(
         "isICNSEnabled" in recipientConfig &&
         recipientConfig.isICNSEnabled &&
         value.length > 0 &&
-        ![CHAIN_ID_DORADO, CHAIN_ID_FETCHHUB].includes(
+        ![CHAIN_ID_DORADO, CHAIN_ID_FETCHHUB, CHAIN_ID_ERIDANUS].includes(
           recipientConfig.chainId
         ) &&
         value[value.length - 1] === "." &&
@@ -149,7 +153,7 @@ export const AddressInput: FunctionComponent<AddressInputProps> = observer(
 
     const updateFNSValue = async (value: string) => {
       if (
-        [CHAIN_ID_DORADO, CHAIN_ID_FETCHHUB].includes(
+        [CHAIN_ID_DORADO, CHAIN_ID_FETCHHUB, CHAIN_ID_ERIDANUS].includes(
           recipientConfig.chainId
         ) &&
         value.length > 5 &&

packages/fetch-extension/src/components-v2/form/fee-buttons-v2/fee-buttons.tsx

@@ -285,7 +285,9 @@ export const FeeButtonsInner: FunctionComponent<
                 color: "white",
               }}
             >
-              {feeConfig.feeType === "low"
+              {feeButtonState.isGasInputOpen
+                ? gasConfig.gasRaw
+                : feeConfig.feeType === "low"
                 ? lowFee.hideIBCMetadata(true).trim(true).toMetricPrefix(isEvm)
                 : feeConfig.feeType === "average"
                 ? averageFee

packages/fetch-extension/src/components-v2/line-graph/index.tsx

@@ -28,11 +28,7 @@ const tabs = [
   },
   {
     id: "1Y",
-    duration: 360,
-  },
-  {
-    id: "All",
-    duration: 3600,
+    duration: 365,
   },
 ];
 

packages/fetch-extension/src/components-v2/line-graph/line-graph.tsx

@@ -1,5 +1,5 @@
-import { formatTimestamp } from "@utils/parse-timestamp-to-date";
 import axios from "axios";
+import moment from "moment";
 import React, { useEffect, useMemo, useState } from "react";
 import { Line } from "react-chartjs-2";
 import { chartOptions } from "./chart-options";
@@ -33,17 +33,29 @@ export const LineGraph: React.FC<LineGraphProps> = ({
   );
 
   const cachedPrices = useMemo(() => {
-    const cachedData = sessionStorage.getItem(cacheKey);
+    const cachedData = localStorage.getItem(cacheKey);
     return cachedData ? JSON.parse(cachedData) : null;
   }, [cacheKey]);
 
+  const isCachedPricesValid = (updatedAt: any) => {
+    const currTime = Date.parse(new Date().toString());
+    const prevUpdatedAt = Date.parse(updatedAt.toString());
+
+    return currTime - prevUpdatedAt < 10 * 60 * 1000;
+  };
+
   useEffect(() => {
     const fetchPrices = async () => {
       setLoading(true);
+      setError("");
       try {
         let newPrices: any[] = [];
-        if (cachedPrices) {
-          newPrices = cachedPrices;
+        if (
+          cachedPrices &&
+          !!cachedPrices.updatedAt &&
+          isCachedPricesValid(cachedPrices.updatedAt)
+        ) {
+          newPrices = cachedPrices.newPrices;
         } else {
           const apiUrl = `https://api.coingecko.com/api/v3/coins/${tokenName}/market_chart`;
           const params = { vs_currency: "usd", days: duration };
@@ -54,7 +66,12 @@ export const LineGraph: React.FC<LineGraphProps> = ({
             price: price[1],
           }));
 
-          sessionStorage.setItem(cacheKey, JSON.stringify(newPrices));
+          const lastUpdatedPrice = {
+            newPrices,
+            updatedAt: new Date(),
+          };
+
+          localStorage.setItem(cacheKey, JSON.stringify(lastUpdatedPrice));
         }
         if (newPrices.length > 0) {
           const firstValue = newPrices[0].price || 0;
@@ -66,19 +83,27 @@ export const LineGraph: React.FC<LineGraphProps> = ({
           else if (duration === 7) time = "1 WEEK";
           else if (duration === 30) time = "1 MONTH";
           else if (duration === 90) time = "3 MONTH";
-          else if (duration === 360) time = "1 YEAR";
+          else if (duration === 365) time = "1 YEAR";
           else if (duration === 100000) time = "ALL";
 
           const type = diff >= 0 ? "positive" : "negative";
 
           setTokenState({ diff: Math.abs(percentageDiff), time, type });
         }
         setPrices(newPrices);
+        setLoading(false);
       } catch (error) {
-        console.error("Error fetching data:", error.message);
+        if (error.response.status === 429) {
+          setTimeout(() => {
+            fetchPrices();
+          }, 10 * 1000);
+          console.log("Too many request error, trying to fetch again");
+          if (cachedPrices) setPrices(cachedPrices.newPrices);
+          return;
+        }
+
+        console.log("Error fetching data:", { error });
         setError("Unable to fetch data. Please try again.");
-      } finally {
-        setLoading(false);
       }
     };
 
@@ -87,9 +112,13 @@ export const LineGraph: React.FC<LineGraphProps> = ({
 
   const chartData = {
     labels: prices.map((priceData: any) => {
-      const time = formatTimestamp(
-        new Date(priceData.timestamp).toLocaleString()
-      );
+      let format = "MMM DD, YYYY";
+      if (duration === 1) format = "MMM DD, HH:mm";
+      else if (duration === 7) format = "MMM DD, HH:mm";
+      else if (duration === 30) format = "MMM DD";
+      else if (duration === 90) format = "MMM DD YYYY";
+      else if (duration === 365) format = "MMM DD, YYYY";
+      const time = moment(priceData.timestamp).format(format);
       return time;
     }),
     datasets: [

packages/fetch-extension/src/components-v2/stake-validator-card/index.tsx

@@ -3,6 +3,8 @@ import style from "./style.module.scss";
 import { titleCase } from "@utils/format";
 import { Address } from "@components/address";
 import { useNavigate } from "react-router";
+import { Link } from "react-router-dom";
+import { VALIDATOR_URL } from "../../config.ui.var";
 
 interface ItemData {
   title: string;
@@ -18,6 +20,7 @@ export const StakeValidatorCard = ({
   commission,
   status,
   apr,
+  chainID,
 }: {
   trailingIcon?: any;
   thumbnailUrl?: any;
@@ -28,6 +31,7 @@ export const StakeValidatorCard = ({
   commission?: string;
   status?: string;
   apr?: string;
+  chainID: string;
 }) => {
   const navigate = useNavigate();
 
@@ -134,17 +138,25 @@ export const StakeValidatorCard = ({
         ))}
       </div>
 
-      <div
-        style={{
-          color: "#BFAFFD",
-          fontFamily: "Lexend",
-          fontSize: "12px",
-          fontWeight: 400,
-          cursor: "pointer",
+      <Link
+        onClick={(e) => {
+          e.stopPropagation();
         }}
+        to={`${VALIDATOR_URL[chainID]}/${validatorAddress}`}
+        target="_blank"
       >
-        View in explorer
-      </div>
+        <div
+          style={{
+            color: "#BFAFFD",
+            fontFamily: "Lexend",
+            fontSize: "12px",
+            fontWeight: 400,
+            cursor: "pointer",
+          }}
+        >
+          View in explorer
+        </div>
+      </Link>
     </div>
   );
 };