diff --git a/src/components/AmountEditable.tsx b/src/components/AmountEditable.tsx index c51b66e..b56a5b7 100644 --- a/src/components/AmountEditable.tsx +++ b/src/components/AmountEditable.tsx @@ -1,7 +1,7 @@ -import { For, ParentComponent, Show, createMemo, createResource, createSignal } from "solid-js"; +import { For, ParentComponent, Show, createResource, createSignal, onMount } from "solid-js"; import { Button } from "~/components/layout"; import { useMegaStore } from "~/state/megaStore"; -import { satsToUsd } from "~/utils/conversions"; +import { satsToUsd, usdToSats } from "~/utils/conversions"; import { Dialog } from "@kobalte/core"; import close from "~/assets/icons/close.svg"; import pencil from "~/assets/icons/pencil.svg"; @@ -12,12 +12,43 @@ import { Network } from "~/logic/mutinyWalletSetup"; const CHARACTERS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "DEL"]; -const FIXED_AMOUNTS = [ +const FIXED_AMOUNTS_SATS = [ { label: "10k", amount: "10000" }, { label: "100k", amount: "100000" }, { label: "1m", amount: "1000000" } ]; +const FIXED_AMOUNTS_USD = [ + { label: "$1", amount: "1" }, + { label: "$10", amount: "10" }, + { label: "$100", amount: "100" } +]; + +function fiatInputSanitizer(input: string): string { + // Make sure only numbers and a single decimal point are allowed + const numeric = input.replace(/[^0-9.]/g, "").replace(/(\..*)\./g, "$1"); + + // Remove leading zeros if not a decimal, add 0 if starts with a decimal + const cleaned = numeric.replace(/^0([^.]|$)/g, "$1").replace(/^\./g, "0."); + + // If there are three characters after the decimal, shift the decimal + const shifted = cleaned.match(/(\.[0-9]{3}).*/g) ? (parseFloat(cleaned) * 10).toFixed(2) : cleaned; + + // Truncate any numbers two past the decimal + const twoDecimals = shifted.replace(/(\.[0-9]{2}).*/g, "$1"); + + return twoDecimals; +} + +function satsInputSanitizer(input: string): string { + // Make sure only numbers are allowed + const numeric = input.replace(/[^0-9]/g, ""); + // If it starts with a 0, remove the 0 + const noLeadingZero = numeric.replace(/^0([^.]|$)/g, "$1"); + + return noLeadingZero; +} + function SingleDigitButton(props: { character: string; onClick: (c: string) => void; @@ -27,7 +58,6 @@ function SingleDigitButton(props: { // Skip the "." if it's fiat }> -
+ {/* */} + (inputRef = el)} - autofocus - inputmode="none" + ref={(el) => (satsInputRef = el)} + disabled={mode() === "fiat"} type="text" - class="opacity-0 absolute -z-10" - value={displayAmount()} - onInput={(e) => handleHiddenInput(e)} + value={localSats()} + onInput={handleSatsInput} + inputMode="none" + /> + (fiatInputRef = el)} + disabled={mode() === "sats"} + type="text" + value={localFiat()} + onInput={handleFiatInput} + inputMode="none" />
+
-
-

- {prettyPrint()} SATS -

-

- ≈ {amountInUsd()} USD -

+
+ +
{warningText()}
- + {(amount) => (