diff --git a/src/components/layout/Misc.tsx b/src/components/layout/Misc.tsx index 366ae52..7f7e510 100644 --- a/src/components/layout/Misc.tsx +++ b/src/components/layout/Misc.tsx @@ -328,11 +328,11 @@ export function ModalCloseButton() { ); } -export const SIMPLE_OVERLAY = "fixed inset-0 z-50 bg-black/20 backdrop-blur-md"; +export const SIMPLE_OVERLAY = "fixed inset-0 z-50 bg-black/50 backdrop-blur-lg"; export const SIMPLE_DIALOG_POSITIONER = "fixed inset-0 z-50 flex items-center justify-center"; export const SIMPLE_DIALOG_CONTENT = - "max-w-[500px] w-[90vw] max-h-[100dvh] overflow-y-scroll disable-scrollbars mx-4 p-4 bg-neutral-800/80 backdrop-blur-md shadow-xl rounded-xl border border-white/10"; + "max-w-[500px] w-[90vw] max-h-[100dvh] overflow-y-scroll disable-scrollbars mx-4 p-4 bg-neutral-800/90 rounded-xl border border-white/10"; export const SimpleDialog: ParentComponent<{ title: string; diff --git a/src/components/layout/Radio.tsx b/src/components/layout/Radio.tsx index 50ff0e3..82203f9 100644 --- a/src/components/layout/Radio.tsx +++ b/src/components/layout/Radio.tsx @@ -1,5 +1,7 @@ import { RadioGroup } from "@kobalte/core"; -import { For, Show } from "solid-js"; +import { createSignal, For, Show } from "solid-js"; + +import { timeout } from "~/utils"; type Choices = { value: string; @@ -10,18 +12,31 @@ type Choices = { // TODO: how could would it be if we could just pass the estimated fees in here? export function StyledRadioGroup(props: { - value: string; + initialValue: string; choices: Choices; onValueChange: (value: string) => void; small?: boolean; accent?: "red" | "white"; vertical?: boolean; + delayOnChange?: boolean; }) { + const [value, setValue] = createSignal(props.initialValue); + + async function onChange(value: string) { + setValue(value); + + // This is so if the modal is going to be closed after value change, it will show the choice briefly first + if (props.delayOnChange) { + await timeout(200); + props.onValueChange(value); + } else { + props.onValueChange(value); + } + } return ( - // TODO: rewrite this with CVA, props are bad for tailwind ( -
+
- - + + - +
{choice.label}
diff --git a/src/i18n/en/translations.ts b/src/i18n/en/translations.ts index 6ae3ddd..bdc3651 100644 --- a/src/i18n/en/translations.ts +++ b/src/i18n/en/translations.ts @@ -89,7 +89,8 @@ export default { onchain: "On-chain", lightning: "Lightning", unified: "Unified" - } + }, + remember_choice: "Remember my choice next time" }, send: { sending: "Sending...", diff --git a/src/routes/Receive.tsx b/src/routes/Receive.tsx index 72bddf3..685907d 100644 --- a/src/routes/Receive.tsx +++ b/src/routes/Receive.tsx @@ -24,6 +24,7 @@ import { BackLink, Button, Card, + Checkbox, DefaultMain, ExternalLink, Fee, @@ -110,7 +111,7 @@ function FeeWarning(props: { fee: bigint; flavor: ReceiveFlavor }) { } export default function Receive() { - const [state, _actions] = useMegaStore(); + const [state, actions] = useMegaStore(); const navigate = useNavigate(); const i18n = useI18n(); @@ -132,8 +133,10 @@ export default function Receive() { const [paymentTx, setPaymentTx] = createSignal(); const [paymentInvoice, setPaymentInvoice] = createSignal(); - // The flavor of the receive - const [flavor, setFlavor] = createSignal("unified"); + // The flavor of the receive (defaults to unified) + const [flavor, setFlavor] = createSignal( + state.preferredInvoiceType + ); // loading state for the continue button const [loading, setLoading] = createSignal(false); @@ -156,6 +159,8 @@ export default function Receive() { } ]; + const [rememberChoice, setRememberChoice] = createSignal(false); + const receiveString = createMemo(() => { if (unified() && receiveState() === "show") { if (flavor() === "unified") { @@ -326,6 +331,9 @@ export default function Receive() { function selectFlavor(flavor: string) { setFlavor(flavor as ReceiveFlavor); + if (rememberChoice()) { + actions.setPreferredInvoiceType(flavor as ReceiveFlavor); + } setMethodChooserOpen(false); } @@ -434,11 +442,19 @@ export default function Receive() { } > + diff --git a/src/routes/Redshift.tsx b/src/routes/Redshift.tsx index 45cc699..c3b57ed 100644 --- a/src/routes/Redshift.tsx +++ b/src/routes/Redshift.tsx @@ -473,7 +473,7 @@ export default function Redshift() { setShiftType( newValue as ShiftOption diff --git a/src/routes/Send.tsx b/src/routes/Send.tsx index f6ca799..9bc96a5 100644 --- a/src/routes/Send.tsx +++ b/src/routes/Send.tsx @@ -102,7 +102,7 @@ export function MethodChooser(props: { @@ -110,7 +110,7 @@ export function MethodChooser(props: { @@ -118,7 +118,7 @@ export function MethodChooser(props: { diff --git a/src/state/megaStore.tsx b/src/state/megaStore.tsx index 8df24da..e73dfd6 100644 --- a/src/state/megaStore.tsx +++ b/src/state/megaStore.tsx @@ -55,6 +55,7 @@ export type MegaStore = [ settings?: MutinyWalletSettingStrings; safe_mode?: boolean; npub?: string; + preferredInvoiceType: "unified" | "lightning" | "onchain"; }, { setup(password?: string): Promise; @@ -67,6 +68,9 @@ export type MegaStore = [ fetchPrice(fiat: Currency): Promise; saveFiat(fiat: Currency): void; saveNpub(npub: string): void; + setPreferredInvoiceType( + type: "unified" | "lightning" | "onchain" + ): void; } ]; @@ -98,7 +102,8 @@ export const Provider: ParentComponent = (props) => { load_stage: "fresh" as LoadStage, settings: undefined as MutinyWalletSettingStrings | undefined, safe_mode: searchParams.safe_mode === "true", - npub: localStorage.getItem("npub") || undefined + npub: localStorage.getItem("npub") || undefined, + preferredInvoiceType: "unified" as "unified" | "lightning" | "onchain" }); const actions = { @@ -306,6 +311,9 @@ export const Provider: ParentComponent = (props) => { saveNpub(npub: string) { localStorage.setItem("npub", npub); setState({ npub }); + }, + setPreferredInvoiceType(type: "unified" | "lightning" | "onchain") { + setState({ preferredInvoiceType: type }); } };