diff --git a/src/assets/icons/currency-swap.svg b/src/assets/icons/currency-swap.svg new file mode 100644 index 0000000..358f5c5 --- /dev/null +++ b/src/assets/icons/currency-swap.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/AmountCard.tsx b/src/components/AmountCard.tsx index 5325923..059a2dc 100644 --- a/src/components/AmountCard.tsx +++ b/src/components/AmountCard.tsx @@ -53,7 +53,7 @@ function USDShower(props: { amountSats: string; fee?: string }) {
- ≈ {amountInUsd()}  + ~{amountInUsd()}  USD
diff --git a/src/components/AmountEditable.tsx b/src/components/AmountEditable.tsx index d6d7699..8e72ba4 100644 --- a/src/components/AmountEditable.tsx +++ b/src/components/AmountEditable.tsx @@ -4,7 +4,8 @@ import { Show, createResource, createSignal, - onMount + onMount, + onCleanup } from "solid-js"; import { Button } from "~/components/layout"; import { useMegaStore } from "~/state/megaStore"; @@ -12,6 +13,7 @@ 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"; +import currencySwap from "~/assets/icons/currency-swap.svg"; import { InlineAmount } from "./AmountCard"; import { DIALOG_CONTENT, DIALOG_POSITIONER } from "~/styles/dialogs"; import { InfoBox } from "./InfoBox"; @@ -76,8 +78,32 @@ function satsInputSanitizer(input: string): string { function SingleDigitButton(props: { character: string; onClick: (c: string) => void; + onClear: () => void; fiat: boolean; }) { + let holdTimer: number; + const holdThreshold = 500; + + function onHold() { + holdTimer = setTimeout(() => { + props.onClear(); + }, holdThreshold); + } + + function endHold() { + clearTimeout(holdTimer); + } + + function onClick() { + props.onClick(props.character); + + clearTimeout(holdTimer); + } + + onCleanup(() => { + clearTimeout(holdTimer); + }); + return ( // Skip the "." if it's fiat } > @@ -99,14 +128,14 @@ function BigScalingText(props: { text: string; fiat: boolean }) { return (

9, - "scale-95": chars() > 8, - "scale-100": chars() > 7, - "scale-105": chars() > 6, - "scale-110": chars() > 5, - "scale-125": chars() > 4, + "scale-90": chars() >= 11, + "scale-95": chars() === 10, + "scale-100": chars() === 9, + "scale-105": chars() === 7, + "scale-110": chars() === 6, + "scale-125": chars() === 5, "scale-150": chars() <= 4 }} > @@ -118,17 +147,38 @@ function BigScalingText(props: { text: string; fiat: boolean }) { function SmallSubtleAmount(props: { text: string; fiat: boolean }) { return ( -

- ≈ {props.text}  - {props.fiat ? "USD" : "SATS"} +

+ ~{props.text}  + {props.fiat ? "USD" : "SATS"} + Swap currencies

); } function toDisplayHandleNaN(input: string, _fiat: boolean): string { const parsed = Number(input); + + //handle decimals so the user can always see the accurate amount if (isNaN(parsed)) { return "0"; + } else if (parsed === Math.trunc(parsed) && input.endsWith(".")) { + return parsed.toLocaleString() + "."; + } else if (parsed === Math.trunc(parsed) && input.endsWith(".0")) { + return parsed.toFixed(1); + } else if (parsed === Math.trunc(parsed) && input.endsWith(".00")) { + return parsed.toFixed(2); + } else if ( + parsed !== Math.trunc(parsed) && + input.endsWith("0") && + input.includes(".", input.length - 3) + ) { + return parsed.toFixed(2); } else { return parsed.toLocaleString(); } @@ -212,7 +262,11 @@ export const AmountEditable: ParentComponent<{ let sane; if (character === "DEL") { - sane = inputSanitizer(localValue().slice(0, -1)); + if (localValue().length <= 1) { + sane = "0"; + } else { + sane = inputSanitizer(localValue().slice(0, -1)); + } } else { if (localValue() === "0") { sane = inputSanitizer(character); @@ -235,6 +289,21 @@ export const AmountEditable: ParentComponent<{ focus(); } + function handleClear() { + const isFiatMode = mode() === "fiat"; + + if (isFiatMode) { + setLocalFiat("0"); + setLocalSats(usdToSats(state.price, parseFloat("0") || 0, false)); + } else { + setLocalSats("0"); + setLocalFiat(satsToUsd(state.price, Number("0") || 0, false)); + } + + // After a button press make sure we re-focus the input + focus(); + } + function setFixedAmount(amount: string) { if (mode() === "fiat") { setLocalFiat(amount); @@ -265,6 +334,7 @@ export const AmountEditable: ParentComponent<{ function handleSubmit(e: SubmitEvent | MouseEvent) { e.preventDefault(); props.setAmountSats(BigInt(localSats())); + setLocalFiat(satsToUsd(state.price, Number(localSats()) || 0, false)); setIsOpen(false); } @@ -377,26 +447,28 @@ export const AmountEditable: ParentComponent<{
-
- - +
+
+ + +
@@ -444,12 +516,13 @@ export const AmountEditable: ParentComponent<{ fiat={mode() === "fiat"} character={character} onClick={handleCharacterInput} + onClear={handleClear} /> )}