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/PaymentSummary/index.test.tsx

@@ -12,7 +12,7 @@ jest.mock("~/common/lib/api", () => {
   return {
     ...original,
     getSettings: jest.fn(() => Promise.resolve(mockSettings)),
-    getCurrencyRate: jest.fn(() => Promise.resolve({ rate: 11 })),
+    getCurrencyRate: jest.fn(() => 11),
   };
 });
 

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

@@ -6,16 +6,20 @@ import { settingsFixture as mockSettings } from "~/../tests/fixtures/settings";
 import type { Props } from "./index";
 import SitePreferences from "./index";
 
-const mockGetFiatValue = jest.fn(() => Promise.resolve("$1,22"));
+const mockGetFormattedFiat = jest.fn(() => "$1,22");
+const mockGetFormattedInCurrency = jest.fn((v, curr) => v + " " + curr);
 
 jest.mock("~/app/context/SettingsContext", () => ({
   useSettings: () => ({
     settings: mockSettings,
     isLoading: false,
     updateSetting: jest.fn(),
-    getFormattedFiat: mockGetFiatValue,
+    getFormattedFiat: mockGetFormattedFiat,
     getFormattedNumber: jest.fn(),
     getFormattedSats: jest.fn(),
+    getCurrencyRate: jest.fn(() => 1),
+    getCurrencySymbol: jest.fn(() => "₿"),
+    getFormattedInCurrency: mockGetFormattedInCurrency,
   }),
 }));
 
@@ -53,7 +57,7 @@ describe("SitePreferences", () => {
 
     await renderComponent();
 
-    expect(mockGetFiatValue).not.toHaveBeenCalled();
+    expect(mockGetFormattedFiat).not.toHaveBeenCalled();
 
     const settingsButton = await screen.getByRole("button");
 
@@ -66,25 +70,59 @@ describe("SitePreferences", () => {
       name: "Save",
     });
 
+    const checkDualInputValues = (values: Array<[number, string]>) => {
+      for (let i = 0; i < values.length; i++) {
+        expect(mockGetFormattedInCurrency).toHaveBeenNthCalledWith(
+          i + 1,
+          ...values[i]
+        );
+      }
+      expect(mockGetFormattedInCurrency).toHaveBeenCalledTimes(values.length);
+    };
+
+    const checkDualInputValue = (v: number, n: number) => {
+      for (let i = 1; i <= n * 2; i += 2) {
+        expect(mockGetFormattedInCurrency).toHaveBeenNthCalledWith(i, v, "BTC");
+        expect(mockGetFormattedInCurrency).toHaveBeenNthCalledWith(
+          i + 1,
+          v,
+          "USD"
+        );
+      }
+      expect(mockGetFormattedInCurrency).toHaveBeenCalledTimes(n * 2);
+    };
+
     // update fiat value when modal is open
-    expect(mockGetFiatValue).toHaveBeenCalledWith(
-      defaultProps.allowance.totalBudget.toString()
-    );
-    expect(mockGetFiatValue).toHaveBeenCalledTimes(1);
+    checkDualInputValue(defaultProps.allowance.totalBudget, 2);
 
     await act(async () => {
       await user.clear(screen.getByLabelText("One-click payments budget"));
+      mockGetFormattedInCurrency.mockClear();
       await user.type(
         screen.getByLabelText("One-click payments budget"),
         "250"
       );
     });
 
+    // update fiat value
     expect(screen.getByLabelText("One-click payments budget")).toHaveValue(250);
 
-    // update fiat value
-    expect(mockGetFiatValue).toHaveBeenCalledWith("250");
-    expect(mockGetFiatValue).toHaveBeenCalledTimes(4); // plus 3 times for each input value 2, 5, 0
+    checkDualInputValues([
+      [2, "BTC"],
+      [2, "USD"],
+      [2, "BTC"],
+      [2, "USD"],
+      [25, "BTC"],
+      [25, "USD"],
+      [25, "BTC"],
+      [25, "USD"],
+      [250, "BTC"],
+      [250, "USD"],
+      [250, "BTC"],
+      [250, "USD"],
+      [250, "BTC"],
+      [250, "USD"],
+    ]);
 
     await act(async () => {
       await user.click(saveButton);

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 { render, screen, waitFor } 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 () => {
@@ -20,6 +34,9 @@ describe("DualCurrencyField", () => {
     const input = screen.getByLabelText("Amount");
 
     expect(input).toBeInTheDocument();
-    expect(await screen.getByText("~$10.00")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText("~$10.00")).toBeInTheDocument();
+    });
   });
 });