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();
+ });
  });
 });