Support fiat input in dual currency field

src/app/components/BudgetControl/index.tsx

@@ -9,24 +9,22 @@ type Props = {
   onRememberChange: ChangeEventHandler<HTMLInputElement>;
   budget: string;
   onBudgetChange: ChangeEventHandler<HTMLInputElement>;
-  fiatAmount: string;
   disabled?: boolean;
+  showFiat?: boolean;
 };
 
 function BudgetControl({
   remember,
   onRememberChange,
   budget,
   onBudgetChange,
-  fiatAmount,
   disabled = false,
+  showFiat = false,
 }: Props) {
   const { t } = useTranslation("components", {
     keyPrefix: "budget_control",
   });
 
-  const { t: tCommon } = useTranslation("common");
-
   return (
     <div className="mb-4">
       <div className={`flex items-center`}>
@@ -60,12 +58,11 @@ function BudgetControl({
 
         <div>
           <DualCurrencyField
+            showFiat={showFiat}
             autoFocus
-            fiatValue={fiatAmount}
             id="budget"
             min={0}
             label={t("budget.label")}
-            placeholder={tCommon("sats", { count: 0 })}
             value={budget}
             onChange={onBudgetChange}
           />

src/app/components/SitePreferences/index.test.tsx

@@ -16,6 +16,9 @@ jest.mock("~/app/context/SettingsContext", () => ({
     getFormattedFiat: mockGetFiatValue,
     getFormattedNumber: jest.fn(),
     getFormattedSats: jest.fn(),
+    getCurrencyRate: jest.fn(() => 1),
+    getCurrencySymbol: jest.fn(() => "₿"),
+    getFormattedInCurrency: mockGetFiatValue,
   }),
 }));
 

src/app/components/SitePreferences/index.tsx

@@ -26,17 +26,12 @@ export type Props = {
 };
 
 function SitePreferences({ launcherType, allowance, onEdit, onDelete }: Props) {
-  const {
-    isLoading: isLoadingSettings,
-    settings,
-    getFormattedFiat,
-  } = useSettings();
+  const { isLoading: isLoadingSettings, settings } = useSettings();
   const showFiat = !isLoadingSettings && settings.showFiat;
   const { account } = useAccount();
   const [modalIsOpen, setIsOpen] = useState(false);
   const [budget, setBudget] = useState("");
   const [lnurlAuth, setLnurlAuth] = useState(false);
-  const [fiatAmount, setFiatAmount] = useState("");
 
   const [originalPermissions, setOriginalPermissions] = useState<
     Permission[] | null
@@ -83,17 +78,6 @@ function SitePreferences({ launcherType, allowance, onEdit, onDelete }: Props) {
     fetchPermissions();
   }, [account?.id, allowance.id]);
 
-  useEffect(() => {
-    if (budget !== "" && showFiat) {
-      const getFiat = async () => {
-        const res = await getFormattedFiat(budget);
-        setFiatAmount(res);
-      };
-
-      getFiat();
-    }
-  }, [budget, showFiat, getFormattedFiat]);
-
   function openModal() {
     setBudget(allowance.totalBudget.toString());
     setLnurlAuth(allowance.lnurlAuth);
@@ -238,10 +222,9 @@ function SitePreferences({ launcherType, allowance, onEdit, onDelete }: Props) {
               label={t("new_budget.label")}
               min={0}
               autoFocus
-              placeholder={tCommon("sats", { count: 0 })}
               value={budget}
               hint={t("hint")}
-              fiatValue={fiatAmount}
+              showFiat={showFiat}
               onChange={(e) => setBudget(e.target.value)}
             />
           </div>

src/app/components/form/DualCurrencyField/index.test.tsx

@@ -1,13 +1,27 @@
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
+import { settingsFixture as mockSettings } from "~/../tests/fixtures/settings";
 
 import type { Props } from "./index";
 import DualCurrencyField from "./index";
 
 const props: Props = {
-  fiatValue: "$10.00",
+  showFiat: true,
   label: "Amount",
 };
+jest.mock("~/app/context/SettingsContext", () => ({
+  useSettings: () => ({
+    settings: mockSettings,
+    isLoading: false,
+    updateSetting: jest.fn(),
+    getFormattedFiat: jest.fn(() => "$10.00"),
+    getFormattedNumber: jest.fn(),
+    getFormattedSats: jest.fn(),
+    getCurrencyRate: jest.fn(() => 1),
+    getCurrencySymbol: jest.fn(() => "₿"),
+    getFormattedInCurrency: jest.fn(() => "$10.00"),
+  }),
+}));
 
 describe("DualCurrencyField", () => {
   test("render", async () => {

src/app/components/form/DualCurrencyField/index.tsx

@@ -1,22 +1,35 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useAccount } from "~/app/context/AccountContext";
+import { useSettings } from "~/app/context/SettingsContext";
 import { classNames } from "~/app/utils";
-
 import { RangeLabel } from "./rangeLabel";
 
+export type DualCurrencyFieldChangeEvent =
+  React.ChangeEvent<HTMLInputElement> & {
+    target: HTMLInputElement & {
+      valueInFiat: number;
+      formattedValueInFiat: string;
+      valueInSats: number;
+      formattedValueInSats: string;
+    };
+  };
+
 export type Props = {
   suffix?: string;
   endAdornment?: React.ReactNode;
-  fiatValue: string;
   label: string;
   hint?: string;
   amountExceeded?: boolean;
   rangeExceeded?: boolean;
+  baseToAltRate?: number;
+  showFiat?: boolean;
+  onChange?: (e: DualCurrencyFieldChangeEvent) => void;
 };
 
 export default function DualCurrencyField({
   label,
-  fiatValue,
+  showFiat = true,
   id,
   placeholder,
   required = false,
@@ -38,10 +51,153 @@ export default function DualCurrencyField({
   rangeExceeded,
 }: React.InputHTMLAttributes<HTMLInputElement> & Props) {
   const { t: tCommon } = useTranslation("common");
+  const {
+    getFormattedInCurrency,
+    getCurrencyRate,
+    getCurrencySymbol,
+    settings,
+  } = useSettings();
+  const { account } = useAccount();
+
   const inputEl = useRef<HTMLInputElement>(null);
   const outerStyles =
     "rounded-md border border-gray-300 dark:border-gray-800 bg-white dark:bg-black transition duration-300";
 
+  const initialized = useRef(false);
+  const [useFiatAsMain, _setUseFiatAsMain] = useState(false);
+  const [altFormattedValue, setAltFormattedValue] = useState("");
+  const [minValue, setMinValue] = useState(min);
+  const [maxValue, setMaxValue] = useState(max);
+  const [inputValue, setInputValue] = useState(value);
+  const [inputPrefix, setInputPrefix] = useState("");
+  const [inputPlaceHolder, setInputPlaceHolder] = useState(placeholder || "");
+
+  const convertValues = useCallback(
+    async (inputValue: number, inputInFiat: boolean) => {
+      const userCurrency = settings?.currency || "BTC";
+      let valueInSats = 0;
+      let valueInFiat = 0;
+      const rate = await getCurrencyRate();
+
+      if (inputInFiat) {
+        valueInFiat = Number(inputValue);
+        valueInSats = Math.round(valueInFiat / rate);
+      } else {
+        valueInSats = Number(inputValue);
+        valueInFiat = Math.round(valueInSats * rate * 100) / 100.0;
+      }
+
+      const formattedSats = getFormattedInCurrency(valueInSats, "BTC");
+      const formattedFiat = getFormattedInCurrency(valueInFiat, userCurrency);
+
+      return {
+        valueInSats,
+        formattedSats,
+        valueInFiat,
+        formattedFiat,
+      };
+    },
+    [getCurrencyRate, getFormattedInCurrency, settings]
+  );
+
+  const setUseFiatAsMain = useCallback(
+    async (useFiatAsMain: boolean) => {
+      if (!showFiat) useFiatAsMain = false;
+      const userCurrency = settings?.currency || "BTC";
+      const rate = await getCurrencyRate();
+
+      if (min) {
+        setMinValue(
+          useFiatAsMain
+            ? (Math.round(Number(min) * rate * 100) / 100.0).toString()
+            : min
+        );
+      }
+
+      if (max) {
+        setMaxValue(
+          useFiatAsMain
+            ? (Math.round(Number(max) * rate * 100) / 100.0).toString()
+            : max
+        );
+      }
+
+      const newValue = useFiatAsMain
+        ? Math.round(Number(inputValue) * rate * 100) / 100.0
+        : Math.round(Number(inputValue) / rate);
+
+      _setUseFiatAsMain(useFiatAsMain);
+      setInputValue(newValue);
+      setInputPrefix(getCurrencySymbol(useFiatAsMain ? userCurrency : "BTC"));
+      if (!placeholder) {
+        setInputPlaceHolder(
+          tCommon("amount_placeholder", {
+            currency: useFiatAsMain ? userCurrency : "sats",
+          })
+        );
+      }
+    },
+    [
+      settings,
+      showFiat,
+      getCurrencyRate,
+      inputValue,
+      min,
+      max,
+      tCommon,
+      getCurrencySymbol,
+      placeholder,
+    ]
+  );
+
+  const swapCurrencies = () => {
+    setUseFiatAsMain(!useFiatAsMain);
+  };
+
+  const onChangeWrapper = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      setInputValue(e.target.value);
+
+      if (onChange) {
+        const value = Number(e.target.value);
+        const { valueInSats, formattedSats, valueInFiat, formattedFiat } =
+          await convertValues(value, useFiatAsMain);
+        const wrappedEvent: DualCurrencyFieldChangeEvent =
+          e as DualCurrencyFieldChangeEvent;
+        wrappedEvent.target.value = valueInSats.toString();
+        wrappedEvent.target.valueInFiat = valueInFiat;
+        wrappedEvent.target.formattedValueInFiat = formattedFiat;
+        wrappedEvent.target.valueInSats = valueInSats;
+        wrappedEvent.target.formattedValueInSats = formattedSats;
+        onChange(wrappedEvent);
+      }
+    },
+    [onChange, useFiatAsMain, convertValues]
+  );
+
+  // default to fiat when account currency is set to anything other than BTC
+  useEffect(() => {
+    if (!initialized.current) {
+      if (account?.currency && account?.currency !== "BTC") {
+        setUseFiatAsMain(true);
+      }
+      initialized.current = true;
+    }
+  }, [account?.currency, setUseFiatAsMain]);
+
+  // update alt value
+  useEffect(() => {
+    (async () => {
+      if (showFiat) {
+        const { formattedSats, formattedFiat } = await convertValues(
+          Number(inputValue || 0),
+          useFiatAsMain
+        );
+        setAltFormattedValue(useFiatAsMain ? formattedSats : formattedFiat);
+      }
+    })();
+  }, [useFiatAsMain, inputValue, convertValues, showFiat]);
+
   const inputNode = (
     <input
       ref={inputEl}
@@ -53,19 +209,20 @@ export default function DualCurrencyField({
         "block w-full placeholder-gray-500 dark:placeholder-gray-600 dark:text-white ",
         "px-0 border-0 focus:ring-0 bg-transparent"
       )}
-      placeholder={placeholder}
+      placeholder={inputPlaceHolder}
       required={required}
       pattern={pattern}
       title={title}
-      onChange={onChange}
+      onChange={onChangeWrapper}
       onFocus={onFocus}
       onBlur={onBlur}
-      value={value}
+      value={inputValue ? inputValue : ""}
       autoFocus={autoFocus}
       autoComplete={autoComplete}
       disabled={disabled}
-      min={min}
-      max={max}
+      min={minValue}
+      max={maxValue}
+      step={useFiatAsMain ? "0.01" : "1"}
     />
   );
 
@@ -90,14 +247,15 @@ export default function DualCurrencyField({
         >
           {label}
         </label>
-        {(min || max) && (
+        {(minValue || maxValue) && (
           <span
             className={classNames(
               "text-xs text-gray-700 dark:text-neutral-400",
               !!rangeExceeded && "text-red-500 dark:text-red-500"
             )}
           >
-            <RangeLabel min={min} max={max} /> {tCommon("sats_other")}
+            <RangeLabel min={minValue} max={maxValue} />{" "}
+            {useFiatAsMain ? "" : tCommon("sats_other")}
           </span>
         )}
       </div>
@@ -112,17 +270,26 @@ export default function DualCurrencyField({
           outerStyles
         )}
       >
+        {!!inputPrefix && (
+          <p className="helper text-gray-500 z-1 pr-2" onClick={swapCurrencies}>
+            {inputPrefix}
+          </p>
+        )}
+
         {inputNode}
 
-        {!!fiatValue && (
-          <p className="helper text-gray-500 z-1 pointer-events-none">
-            ~{fiatValue}
+        {!!altFormattedValue && (
+          <p
+            className="helper whitespace-nowrap text-gray-500 z-1"
+            onClick={swapCurrencies}
+          >
+            ~{altFormattedValue}
           </p>
         )}
 
         {suffix && (
           <span
-            className="flex items-center px-3 font-medium bg-white dark:bg-surface-00dp dark:text-white"
+            className="flex  items-center px-3 font-medium bg-white dark:bg-surface-00dp dark:text-white"
             onClick={() => {
               inputEl.current?.focus();
             }}