fix: usd input

2 files changed, 25 insertions, 24 deletions

diff --git a/app/components/calculator.module.css b/app/components/calculator.module.css
index 265760d..5e0e996 100644
--- a/app/components/calculator.module.css
+++ b/app/components/calculator.module.css
@@ -1,6 +1,3 @@
-.form {
-}
-
 .input {
   border-bottom: solid 1px #eee;
   box-sizing: border-box;
@@ -13,3 +10,9 @@
 .input:focus {
   outline: none;
 }
+
+.usd {
+  font-size: 3em;
+  margin: 8px 0;
+  padding-left: 12px;
+}
diff --git a/app/components/calculator.tsx b/app/components/calculator.tsx
index 006a755..532781d 100644
--- a/app/components/calculator.tsx
+++ b/app/components/calculator.tsx
@@ -9,15 +9,6 @@ export const Calculator = () => {
   const [btc, setBtc] = useState("");
   const [usd, setUsd] = useState("");
 
-  const formatCurrency = (val: string) => {
-    const formatter = new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      maximumFractionDigits: 2,
-    });
-    return formatter.format(parseNumber(val));
-  };
-
   const formatDecimal = (val: any) => {
     return val.toLocaleString("fullwide", {
       useGrouping: true,
@@ -46,7 +37,7 @@ export const Calculator = () => {
 
         newbtc = val / 100000000;
         setBtc(formatDecimal(newbtc));
-        setUsd(formatCurrency(formatDecimal(newbtc * btcPrice)));
+        setUsd(formatDecimal(newbtc * btcPrice));
         break;
       case "btc":
         setBtc(v);
@@ -57,14 +48,17 @@ export const Calculator = () => {
         setBtc(formatDecimal(val));
 
         setSats(formatDecimal(val * 100000000));
-        setUsd(formatCurrency(formatDecimal(val * btcPrice)));
+        setUsd(formatDecimal(val * btcPrice));
         break;
       case "usd":
-        setUsd(formatCurrency(v));
-        if (isNaN(val)) {
+        setUsd(v);
+
+        if (isNaN(val) || v.endsWith(".")) {
           return;
         }
 
+        setUsd(formatDecimal(val));
+
         newbtc = val / btcPrice;
         setBtc(formatDecimal(newbtc));
         setSats(formatDecimal(newbtc * 100000000));
@@ -100,14 +94,18 @@ export const Calculator = () => {
       />
 
       <label htmlFor="usd">USD</label>
-      <input
-        className={styles.input}
-        onChange={(e) => handleUpdate("usd", e.target.value)}
-        value={usd}
-        type="text"
-        id="usd"
-        name="usd"
-      />
+      <div className="flex">
+        <span className={styles.usd}>$</span>
+        <input
+          className={styles.input}
+          style={{ padding: "0" }}
+          onChange={(e) => handleUpdate("usd", e.target.value)}
+          value={usd}
+          type="text"
+          id="usd"
+          name="usd"
+        />
+      </div>
     </form>
   );
 };