Proposal activity store

packages/fetch-extension/src/components-v2/buttons/use-max-button/index.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { ButtonV2 } from "../button";
 import { IAmountConfig } from "@keplr-wallet/hooks";
-import { useStore } from "../../../stores";
+import { useLanguage } from "../../../languages";
+import { SUPPORTED_LOCALE_FIAT_CURRENCIES } from "../../../config.ui";
 
 export const UseMaxButton = ({
   amountConfig,
@@ -12,7 +13,10 @@ export const UseMaxButton = ({
   isToggleClicked: boolean;
   setIsToggleClicked: any;
 }) => {
-  const { priceStore } = useStore();
+  const language = useLanguage();
+  const fiatCurrency = language.fiatCurrency;
+  const disableToggleCurrency =
+    !SUPPORTED_LOCALE_FIAT_CURRENCIES.includes(fiatCurrency);
 
   const ChangeButtonElement = () => {
     return (
@@ -35,7 +39,7 @@ export const UseMaxButton = ({
         />
         <div>{`Change to ${
           !isToggleClicked
-            ? priceStore.defaultVsCurrency.toUpperCase()
+            ? fiatCurrency.toUpperCase()
             : amountConfig.sendCurrency.coinDenom
         }`}</div>
       </div>
@@ -62,7 +66,9 @@ export const UseMaxButton = ({
           border: "1px solid rgba(255,255,255,0.4)",
           fontSize: "14px",
         }}
-        disabled={!amountConfig.sendCurrency["coinGeckoId"]}
+        disabled={
+          !amountConfig.sendCurrency["coinGeckoId"] || disableToggleCurrency
+        }
         text={<ChangeButtonElement />}
         onClick={() => {
           setIsToggleClicked(!isToggleClicked);

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

@@ -22,6 +22,7 @@ import { useLanguage } from "../../languages";
 import { useStore } from "../../stores";
 import { Card } from "../card";
 import { Dropdown } from "../dropdown";
+import { SUPPORTED_LOCALE_FIAT_CURRENCIES } from "../../config.ui";
 
 export interface CoinInputProps {
   amountConfig: IAmountConfig;
@@ -36,14 +37,16 @@ export interface CoinInputProps {
 export const CoinInput: FunctionComponent<CoinInputProps> = observer(
   ({ amountConfig, disableAllBalance }) => {
     const intl = useIntl();
-    const [inputInUsd, setInputInUsd] = useState<string | undefined>("");
+    const [inputInFiatCurrency, setInputInFiatCurrency] = useState<
+      string | undefined
+    >("");
     const [isToggleClicked, setIsToggleClicked] = useState<boolean>(false);
 
     const { priceStore } = useStore();
 
     const language = useLanguage();
     const fiatCurrency = language.fiatCurrency;
-    const convertToUsd = (currency: any) => {
+    const convertToFiatCurrency = (currency: any) => {
       const value = priceStore.calculatePrice(currency, fiatCurrency);
       const inUsd = value && value.shrink(true).maxDecimals(6).toString();
       return inUsd;
@@ -59,8 +62,8 @@ export const CoinInput: FunctionComponent<CoinInputProps> = observer(
         amountConfig.sendCurrency,
         new Int(amountInNumber)
       );
-      const inputValueInUsd = convertToUsd(inputValue);
-      setInputInUsd(inputValueInUsd);
+      const inputValueInUsd = convertToFiatCurrency(inputValue);
+      setInputInFiatCurrency(inputValueInUsd);
     }, [amountConfig.amount]);
 
     const [randomId] = useState(() => {
@@ -121,7 +124,6 @@ export const CoinInput: FunctionComponent<CoinInputProps> = observer(
     const isClicked = () => {
       setIsToggleClicked(!isToggleClicked);
     };
-    console.log(inputInUsd, isToggleClicked);
 
     return (
       <React.Fragment>
@@ -140,9 +142,10 @@ export const CoinInput: FunctionComponent<CoinInputProps> = observer(
                 )}
                 id={`input-${randomId}`}
                 type="number"
+                step="any"
                 value={
                   isToggleClicked === true
-                    ? parseDollarAmount(inputInUsd)
+                    ? parseDollarAmount(inputInFiatCurrency).toString()
                     : parseExponential(
                         amountConfig.amount,
                         amountConfig.sendCurrency.coinDecimals
@@ -166,7 +169,7 @@ export const CoinInput: FunctionComponent<CoinInputProps> = observer(
                       return;
                     }
                     isToggleClicked === true
-                      ? parseDollarAmount(inputInUsd)
+                      ? parseDollarAmount(inputInFiatCurrency)
                       : amountConfig.setAmount(e.target.value);
                   }
                 }}
@@ -176,14 +179,14 @@ export const CoinInput: FunctionComponent<CoinInputProps> = observer(
 
               <span>
                 {isToggleClicked === true
-                  ? "USD"
+                  ? fiatCurrency.toUpperCase()
                   : amountConfig.sendCurrency.coinDenom.split(" ")[0]}
               </span>
             </div>
             <div className={styleCoinInput["amount-usd"]}>
               {isToggleClicked === true
                 ? `${amountConfig.amount} ${amountConfig.sendCurrency.coinDenom}`
-                : inputInUsd}
+                : inputInFiatCurrency}
             </div>
             {errorText != null ? (
               <div className={styleCoinInput["errorText"]}>{errorText}</div>
@@ -194,10 +197,16 @@ export const CoinInput: FunctionComponent<CoinInputProps> = observer(
               style={{ margin: "0px" }}
               className={styleCoinInput["widgetButton"]}
               onClick={isClicked}
-              disabled
+              disabled={
+                !SUPPORTED_LOCALE_FIAT_CURRENCIES.includes(fiatCurrency)
+              }
             >
               <img src={require("@assets/svg/wireframe/chevron.svg")} alt="" />
-              Change to USD
+              {`Change to ${
+                !isToggleClicked
+                  ? fiatCurrency.toUpperCase()
+                  : amountConfig.sendCurrency.coinDenom
+              }`}
             </button>
             {!disableAllBalance ? (
               <button
@@ -228,7 +237,9 @@ export const TokenSelectorDropdown: React.FC<TokenDropdownProps> = ({
   overrideSelectableCurrencies,
 }) => {
   const [isOpenTokenSelector, setIsOpenTokenSelector] = useState(false);
-  const [inputInUsd, setInputInUsd] = useState<string | undefined>("");
+  const [inputInFiatCurrency, setInputInFiatCurrency] = useState<
+    string | undefined
+  >("");
 
   const { queriesStore, priceStore } = useStore();
   const queryBalances = queriesStore
@@ -257,14 +268,14 @@ export const TokenSelectorDropdown: React.FC<TokenDropdownProps> = ({
 
   const language = useLanguage();
   const fiatCurrency = language.fiatCurrency;
-  const convertToUsd = (currency: any) => {
+  const convertToFiatCurrency = (currency: any) => {
     const value = priceStore.calculatePrice(currency, fiatCurrency);
     const inUsd = value && value.shrink(true).maxDecimals(6).toString();
     return inUsd;
   };
   useEffect(() => {
-    const valueInUsd = convertToUsd(balance);
-    setInputInUsd(valueInUsd);
+    const valueInUsd = convertToFiatCurrency(balance);
+    setInputInFiatCurrency(valueInUsd);
   }, [amountConfig.sendCurrency]);
 
   const balancesMap = new Map(
@@ -296,7 +307,8 @@ export const TokenSelectorDropdown: React.FC<TokenDropdownProps> = ({
           >
             {" "}
             {`Available: ${balance.shrink(true).maxDecimals(6).toString()} `}
-            {inputInUsd && `(${inputInUsd} USD)`}
+            {inputInFiatCurrency &&
+              `(${inputInFiatCurrency} ${fiatCurrency.toUpperCase()})`}
           </div>
         }
       />

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

@@ -13,14 +13,19 @@ import { CoinPretty, Dec, DecUtils, Int } from "@keplr-wallet/unit";
 import { InputField } from "@components-v2/input-field";
 import { parseDollarAmount } from "@utils/format";
 import { useIntl } from "react-intl";
+import { useLanguage } from "../../languages";
 
 export const StakeInput: FunctionComponent<{
   label: string;
   isToggleClicked?: boolean;
   amountConfig: IAmountConfig;
 }> = observer(({ label, amountConfig, isToggleClicked }) => {
   const { priceStore } = useStore();
-  const [inputInUsd, setInputInUsd] = useState<string | undefined>("");
+  const [inputInFiatCurrency, setInputInFiatCurrency] = useState<
+    string | undefined
+  >("");
+  const language = useLanguage();
+  const fiatCurrency = language.fiatCurrency;
 
   const intl = useIntl();
   const error = amountConfig.error;
@@ -61,8 +66,8 @@ export const StakeInput: FunctionComponent<{
     return isDecimal !== null;
   };
 
-  const convertToUsd = (currency: any) => {
-    const value = priceStore.calculatePrice(currency);
+  const convertToFiatCurrency = (currency: any) => {
+    const value = priceStore.calculatePrice(currency, fiatCurrency);
     return value && value.shrink(true).maxDecimals(6).toString();
   };
 
@@ -76,8 +81,8 @@ export const StakeInput: FunctionComponent<{
       amountConfig.sendCurrency,
       new Int(amountInNumber)
     );
-    const inputValueInUsd = convertToUsd(inputValue);
-    setInputInUsd(inputValueInUsd);
+    const inputValueInUsd = convertToFiatCurrency(inputValue);
+    setInputInFiatCurrency(inputValueInUsd);
   }, [amountConfig.amount]);
 
   return (
@@ -86,7 +91,7 @@ export const StakeInput: FunctionComponent<{
         label={label}
         value={
           isToggleClicked
-            ? parseDollarAmount(inputInUsd).toString()
+            ? parseDollarAmount(inputInFiatCurrency).toString()
             : amountConfig.amount
         }
         placeholder={`0`}
@@ -99,7 +104,7 @@ export const StakeInput: FunctionComponent<{
             }}
           >
             {isToggleClicked
-              ? priceStore.defaultVsCurrency.toUpperCase()
+              ? fiatCurrency.toUpperCase()
               : amountConfig.sendCurrency.coinDenom}
           </div>
         }
@@ -117,7 +122,7 @@ export const StakeInput: FunctionComponent<{
               }
             }
             isToggleClicked
-              ? parseDollarAmount(inputInUsd)
+              ? parseDollarAmount(inputInFiatCurrency)
               : amountConfig.setAmount(value);
           }
         }}

packages/fetch-extension/src/components-v2/line-graph/chart-options.ts

@@ -24,7 +24,9 @@ export const chartOptions: ChartOptions = {
       label: (tooltipItem: any, data: any) => {
         const label = data.datasets[tooltipItem.datasetIndex].label || "";
         const value = tooltipItem.yLabel || "";
-        return ` ${label} ${value} USD`;
+        return ` ${label} ${value} ${data.datasets[
+          tooltipItem.datasetIndex
+        ].vsCurrency.toUpperCase()}`;
       },
     },
   },

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

@@ -2,6 +2,7 @@ import { TabsPanel } from "@components-v2/tabs/tabsPanel-1";
 import React, { useState } from "react";
 import { LineGraph } from "./line-graph";
 import style from "./style.module.scss";
+import { useLanguage } from "../../languages";
 
 interface LineGraphViewProps {
   tokenName: string | undefined;
@@ -39,6 +40,9 @@ export const LineGraphView: React.FC<LineGraphViewProps> = ({
 }) => {
   const [activeTab, setActiveTab] = useState<any>(tabs[0]);
   const [loading, setLoading] = useState<boolean>(true);
+  const language = useLanguage();
+
+  const fiatCurrency = language.fiatCurrency;
 
   return (
     <div className={style["graph-container"]}>
@@ -51,6 +55,7 @@ export const LineGraphView: React.FC<LineGraphViewProps> = ({
         setTokenState={setTokenState}
         loading={loading}
         setLoading={setLoading}
+        vsCurrency={fiatCurrency}
       />
       {tokenState?.diff && (
         <div style={{ marginBottom: "-18px" }}>

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

@@ -11,6 +11,7 @@ interface LineGraphProps {
   setTokenState: any;
   loading: boolean;
   setLoading: any;
+  vsCurrency: string;
 }
 
 interface PriceData {
@@ -24,12 +25,13 @@ export const LineGraph: React.FC<LineGraphProps> = ({
   setTokenState,
   loading,
   setLoading,
+  vsCurrency,
 }) => {
   const [prices, setPrices] = useState<PriceData[]>([]);
   const [error, setError] = useState<string | null>(null);
   const cacheKey = useMemo(
-    () => `${tokenName}_${duration}`,
-    [tokenName, duration]
+    () => `${tokenName}_${duration}_${vsCurrency}`,
+    [tokenName, duration, vsCurrency]
   );
 
   const cachedPrices = useMemo(() => {
@@ -58,7 +60,7 @@ export const LineGraph: React.FC<LineGraphProps> = ({
           newPrices = cachedPrices.newPrices;
         } else {
           const apiUrl = `https://api.coingecko.com/api/v3/coins/${tokenName}/market_chart`;
-          const params = { vs_currency: "usd", days: duration };
+          const params = { vs_currency: vsCurrency, days: duration };
 
           const response = await axios.get(apiUrl, { params });
           newPrices = response.data.prices.map((price: number[]) => ({
@@ -108,7 +110,7 @@ export const LineGraph: React.FC<LineGraphProps> = ({
     };
 
     fetchPrices();
-  }, [duration, tokenName, cacheKey, cachedPrices, setTokenState]);
+  }, [duration, tokenName, vsCurrency, cacheKey, cachedPrices, setTokenState]);
 
   const chartData = {
     labels: prices.map((priceData: any) => {
@@ -129,6 +131,7 @@ export const LineGraph: React.FC<LineGraphProps> = ({
           priceData.price.toFixed(3).toString()
         ),
         fill: false,
+        vsCurrency,
         borderColor: (context: any) => {
           const chart = context.chart;
           const { ctx, chartArea } = chart;

packages/fetch-extension/src/components-v2/tabs/tabsPanel-2/index.tsx

@@ -10,6 +10,7 @@ interface Tab {
 
 export interface TabsProps {
   tabs: Tab[];
+  activeTabId?: string;
   showTabsOnBottom?: boolean;
   setActiveTab?: any;
   onTabChange?: any;
@@ -20,14 +21,23 @@ export interface TabsProps {
 
 export const TabsPanel: React.FC<TabsProps> = ({
   tabs,
+  activeTabId,
   showTabsOnBottom,
   setActiveTab,
   onTabChange,
   styleProps,
   tabHeight,
   tabStyle,
 }) => {
-  const [selectedTab, setSelectedTab] = useState<string | null>(tabs[0].id);
+  const [selectedTab, setSelectedTab] = useState<string | null>(
+    activeTabId || tabs[0].id
+  );
+
+  useEffect(() => {
+    if (activeTabId) {
+      setSelectedTab(activeTabId);
+    }
+  }, [activeTabId]);
 
   useEffect(() => {
     if (setActiveTab) {