Initial commit

4 files changed, 156 insertions, 0 deletions

diff --git a/app/components/bitcoin-price.module.css b/app/components/bitcoin-price.module.css
new file mode 100644
index 0000000..fd52c7e
--- /dev/null
+++ b/app/components/bitcoin-price.module.css
@@ -0,0 +1,2 @@
+.price {
+}
diff --git a/app/components/bitcoin-price.tsx b/app/components/bitcoin-price.tsx
new file mode 100644
index 0000000..af837d9
--- /dev/null
+++ b/app/components/bitcoin-price.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { BitcoinPrice as btcPrice } from "../utils/bitcoin-price";
+
+export const BitcoinPrice = () => {
+  const [isLoading, setLoading] = useState(false);
+  const bitcoinPrice = btcPrice();
+
+  const formatCurrency = (val: string) => {
+    const n = parseFloat(val);
+    const formatter = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    });
+
+    return formatter.format(n);
+  };
+
+  useEffect(() => setLoading(!bitcoinPrice), [bitcoinPrice]);
+
+  if (isLoading || !bitcoinPrice) return <p>Loading...</p>;
+
+  return <div>Bitcoin price: {formatCurrency(bitcoinPrice)}</div>;
+};
diff --git a/app/components/calculator.module.css b/app/components/calculator.module.css
new file mode 100644
index 0000000..265760d
--- /dev/null
+++ b/app/components/calculator.module.css
@@ -0,0 +1,15 @@
+.form {
+}
+
+.input {
+  border-bottom: solid 1px #eee;
+  box-sizing: border-box;
+  font-size: 3em;
+  margin: 8px 0;
+  padding: 12px 20px;
+  width: 100%;
+}
+
+.input:focus {
+  outline: none;
+}
diff --git a/app/components/calculator.tsx b/app/components/calculator.tsx
new file mode 100644
index 0000000..006a755
--- /dev/null
+++ b/app/components/calculator.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import styles from "./calculator.module.css";
+import { BitcoinPrice } from "../utils/bitcoin-price";
+
+export const Calculator = () => {
+  const [sats, setSats] = useState("");
+  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,
+      maximumSignificantDigits: 6,
+    });
+  };
+
+  const parseNumber = (val: string) => {
+    return parseFloat(val.replace(/[^0-9|.]/g, ""));
+  };
+
+  const btcPrice = parseNumber(BitcoinPrice());
+
+  const handleUpdate = (type: string, v: string) => {
+    const val = parseNumber(v);
+
+    let newbtc: number;
+    switch (type) {
+      case "sats":
+        setSats(v);
+
+        if (isNaN(val) || v.endsWith(".")) {
+          return;
+        }
+        setSats(formatDecimal(val));
+
+        newbtc = val / 100000000;
+        setBtc(formatDecimal(newbtc));
+        setUsd(formatCurrency(formatDecimal(newbtc * btcPrice)));
+        break;
+      case "btc":
+        setBtc(v);
+
+        if (isNaN(val) || v.endsWith(".")) {
+          return;
+        }
+        setBtc(formatDecimal(val));
+
+        setSats(formatDecimal(val * 100000000));
+        setUsd(formatCurrency(formatDecimal(val * btcPrice)));
+        break;
+      case "usd":
+        setUsd(formatCurrency(v));
+        if (isNaN(val)) {
+          return;
+        }
+
+        newbtc = val / btcPrice;
+        setBtc(formatDecimal(newbtc));
+        setSats(formatDecimal(newbtc * 100000000));
+        break;
+    }
+  };
+
+  useEffect(() => {
+    // Initialize the calculator with some numbers
+    handleUpdate("sats", "1000");
+  }, [btcPrice]);
+
+  return (
+    <form className="flex flex-col">
+      <label htmlFor="sats">Sats</label>
+      <input
+        className={styles.input}
+        onChange={(e) => handleUpdate("sats", e.target.value)}
+        value={sats}
+        type="text"
+        id="sats"
+        name="sats"
+      />
+
+      <label htmlFor="btc">BTC</label>
+      <input
+        className={styles.input}
+        onChange={(e) => handleUpdate("btc", e.target.value)}
+        value={btc}
+        type="text"
+        id="btc"
+        name="btc"
+      />
+
+      <label htmlFor="usd">USD</label>
+      <input
+        className={styles.input}
+        onChange={(e) => handleUpdate("usd", e.target.value)}
+        value={usd}
+        type="text"
+        id="usd"
+        name="usd"
+      />
+    </form>
+  );
+};