From 5e123f513dbd700e5f4516536778b3fb198d2e7c Mon Sep 17 00:00:00 2001
From: Heye Voecking <heye.voecking@gmail.com>
Date: Sun, 17 Nov 2024 19:09:53 +0100
Subject: [PATCH 1/2] feat: use DualCurrency input field (#35)

---
 .../components/CreateSubscriptionForm.tsx     | 53 +++++++++++++++----
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/app/create/components/CreateSubscriptionForm.tsx b/app/create/components/CreateSubscriptionForm.tsx
index 10ed8aa..8b3485a 100644
--- a/app/create/components/CreateSubscriptionForm.tsx
+++ b/app/create/components/CreateSubscriptionForm.tsx
@@ -2,7 +2,7 @@
 
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Timeframe, timeframes } from "types/Timeframe";
 import { Loading } from "app/components/Loading";
 import { CreateSubscriptionRequest } from "types/CreateSubscriptionRequest";
@@ -13,6 +13,7 @@ import {
   LUD18PayerData,
   LightningAddress,
   RequestInvoiceArgs,
+  fiat,
 } from "@getalby/lightning-tools";
 
 type CreateSubscriptionFormData = Omit<
@@ -71,6 +72,29 @@ export function CreateSubscriptionForm() {
     push(`/confirm?${searchParams.toString()}`);
   });
   const watchedAmount = watch("amount");
+
+  const userLocale =
+    typeof window !== "undefined"
+      ? navigator.language || navigator.languages?.[0] || "en-US"
+      : "en-US";
+
+  const [convertedAmount, setConvertedAmount] = useState<string>("");
+
+  useEffect(() => {
+    const updateConversion = async () => {
+      if (!watchedAmount) return;
+
+      const value = await fiat.getFormattedFiatValue({
+        satoshi: watchedAmount,
+        currency: "usd",
+        locale: userLocale,
+      });
+      setConvertedAmount(`currently ≈${value}`);
+    };
+
+    updateConversion();
+  }, [watchedAmount]);
+
   const watchedTimeframe = watch("timeframe");
   const setSelectedTimeframe = React.useCallback(
     (timeframe: Timeframe) => setValue("timeframe", timeframe),
@@ -136,15 +160,24 @@ export function CreateSubscriptionForm() {
           <label className="zp-label">
             Amount in sats<span className="text-red-500">*</span>
           </label>
-          <input
-            {...register("amount", {
-              validate: (value) =>
-                !isValidPositiveValue(parseInt(value))
-                  ? "Please enter a positive value"
-                  : undefined,
-            })}
-            className="zp-input"
-          />
+          <div className="relative">
+            <div className="flex gap-2">
+              <input
+                {...register("amount", {
+                  validate: (value) => {
+                    return !isValidPositiveValue(parseInt(value))
+                      ? "Please enter a positive value"
+                      : undefined;
+                  },
+                })}
+                className="zp-input flex-1"
+                placeholder={`Enter amount in sats`}
+              />
+            </div>
+            {convertedAmount && (
+              <p className="text-gray-500 text-sm mt-1">{convertedAmount}</p>
+            )}
+          </div>
           {errors.amount && (
             <p className="zp-form-error">{errors.amount.message}</p>
           )}

From c84b482bec4eaaffe46b41601e3f20b0ae513a5d Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Fri, 3 Jan 2025 11:23:50 +0700
Subject: [PATCH 2/2] chore: minor ui improvements

---
 .../components/CreateSubscriptionForm.tsx     | 43 +++++++++----------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/app/create/components/CreateSubscriptionForm.tsx b/app/create/components/CreateSubscriptionForm.tsx
index 4005d88..6c8a42c 100644
--- a/app/create/components/CreateSubscriptionForm.tsx
+++ b/app/create/components/CreateSubscriptionForm.tsx
@@ -73,23 +73,20 @@ export function CreateSubscriptionForm() {
   });
   const watchedAmount = watch("amount");
 
-  const userLocale =
-    typeof window !== "undefined"
-      ? navigator.language || navigator.languages?.[0] || "en-US"
-      : "en-US";
-
   const [convertedAmount, setConvertedAmount] = useState<string>("");
 
   useEffect(() => {
     const updateConversion = async () => {
-      if (!watchedAmount) return;
+      if (watchedAmount === undefined) {
+        return;
+      }
 
       const value = await fiat.getFormattedFiatValue({
         satoshi: watchedAmount,
         currency: "usd",
-        locale: userLocale,
+        locale: "en-US",
       });
-      setConvertedAmount(`currently ≈${value}`);
+      setConvertedAmount(`~${value}`);
     };
 
     updateConversion();
@@ -160,23 +157,23 @@ export function CreateSubscriptionForm() {
           <label className="zp-label">
             Amount in sats<span className="text-red-500">*</span>
           </label>
-          <div className="relative">
-            <div className="flex gap-2">
-              <input
-                {...register("amount", {
-                  validate: (value) => {
-                    return !isValidPositiveValue(parseInt(value))
-                      ? "Please enter a positive value"
-                      : undefined;
-                  },
-                })}
-                className="zp-input flex-1"
-                placeholder={`Enter amount in sats`}
-              />
-            </div>
+          <div className="relative flex items-center justify-center">
             {convertedAmount && (
-              <p className="text-gray-500 text-sm mt-1">{convertedAmount}</p>
+              <p className="absolute right-2 text-gray-500 text-sm mt-1 font-mono">
+                {convertedAmount}
+              </p>
             )}
+            <input
+              {...register("amount", {
+                validate: (value) => {
+                  return !isValidPositiveValue(parseInt(value))
+                    ? "Please enter a positive value"
+                    : undefined;
+                },
+              })}
+              className="zp-input flex-1"
+              placeholder={`Enter amount in sats`}
+            />
           </div>
           {errors.amount && (
             <p className="zp-form-error">{errors.amount.message}</p>