diff options
Diffstat (limited to 'src/components')
39 files changed, 430 insertions, 300 deletions
diff --git a/src/components/About.svelte b/src/components/About.svelte index 01ff4c7c..5f87e99a 100644 --- a/src/components/About.svelte +++ b/src/components/About.svelte @@ -24,7 +24,7 @@ { name: "cole", socials: [] }, ]; - let locations; + let locations = $state(); onMount(async () => { try { ({ locations } = await fetch("/locations").then((r) => r.json())); diff --git a/src/components/Account.svelte b/src/components/Account.svelte index 38c8c418..c378b9a3 100644 --- a/src/components/Account.svelte +++ b/src/components/Account.svelte @@ -1,14 +1,19 @@ <script> + import { run } from 'svelte/legacy'; + import { goto } from "$app/navigation"; import Icon from "$comp/Icon.svelte"; import Balance from "$comp/Balance.svelte"; import { t } from "$lib/translations"; - export let user, rate, account, last; - let { name, seed, balance, id } = account; - $: type = seed ? "Savings" : "Cash"; + let { + user, + rate, + account, + last + } = $props(); + let { name, seed, balance, id } = $state(account); - $: refresh(account); let refresh = (a) => ({ seed, balance, id } = a); let setAccount = () => (document.cookie = `aid=${id}; path=/; max-age=86400`); @@ -16,38 +21,42 @@ setAccount(); goto("/payments"); }; + let type = $derived(seed ? "Savings" : "Cash"); + run(() => { + refresh(account); + }); </script> <div class="block space-y-2 border-primary py-4 cursor-pointer" class:border-b-8={!last} - on:click={go} + onclick={go} > <div class="flex"> <Balance {balance} {user} {rate} /> - <a href={`/payments`} class="contents" on:click={setAccount}> + <a href={`/payments`} class="contents" onclick={setAccount}> <button class="ml-auto flex gap-1 mb-auto pb-4 pl-4"> - <iconify-icon icon="ph:clock-bold" width="32" /> + <iconify-icon icon="ph:clock-bold" width="32"></iconify-icon> </button> </a> <a href={`/account/${id}`} class="contents"> <button class="flex gap-1 mb-auto pb-4 pl-4"> - <iconify-icon icon="ph:gear-bold" width="32" /> + <iconify-icon icon="ph:gear-bold" width="32"></iconify-icon> </button> </a> </div> <div class="flex justify-center w-full text-xl gap-2"> - <a href={`/invoice`} class="contents" on:click={setAccount}> + <a href={`/invoice`} class="contents" onclick={setAccount}> <button class="btn !w-auto flex-grow"> - <iconify-icon icon="ph:hand-coins-bold" width="32" flip="horizontal" /> + <iconify-icon icon="ph:hand-coins-bold" width="32" flip="horizontal"></iconify-icon> <div class="my-auto">{$t("user.dashboard.receive")}</div> </button> </a> - <a href={`/send`} class="contents grow" on:click={setAccount}> + <a href={`/send`} class="contents grow" onclick={setAccount}> <button type="button" class="btn !w-auto flex-grow"> - <iconify-icon icon="ph:paper-plane-right-bold" width="32" /> + <iconify-icon icon="ph:paper-plane-right-bold" width="32"></iconify-icon> <div class="my-auto">{$t("user.dashboard.send")}</div> </button> </a> diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 5a922792..fef2f0f4 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -1,4 +1,6 @@ <script> + import { run } from 'svelte/legacy'; + import { banner, theme, newPayment } from "$lib/store"; import { goto } from "$app/navigation"; import Avatar from "$comp/Avatar.svelte"; @@ -6,19 +8,21 @@ import { loading, t } from "$lib/translations"; import { page } from "$app/stores"; - export let user, subject; + let { user, subject = $bindable() } = $props(); - let w; - $: if (!subject) subject = user; + let w = $state(); + run(() => { + if (!subject) subject = user; + }); - $: bg = - $banner?.id && $banner.id === subject.id + let bg = + $derived($banner?.id && $banner.id === subject.id ? `url(${$banner.src})` : subject?.banner ? subject.banner.includes(":") ? `url(${subject.banner})` : `url(/api/public/${subject.banner}.webp)` - : undefined; + : undefined); const links = [ { @@ -40,10 +44,10 @@ }, ]; - $: opacity = (href) => + let opacity = $derived((href) => $page.url.pathname === href ? "opacity-100" - : "opacity-90 hover:opacity-none"; + : "opacity-90 hover:opacity-none"); </script> <svelte:window bind:innerWidth={w} /> @@ -58,7 +62,7 @@ {#each links as { href, icon, flip }} <a {href} data-sveltekit-preload-code="eager"> <button class="btn-menu {opacity(href)}"> - <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip} /> + <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip}></iconify-icon> </button> </a> {/each} diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte index a088c4ee..3007c3e7 100644 --- a/src/components/Avatar.svelte +++ b/src/components/Avatar.svelte @@ -1,20 +1,29 @@ -<script> +<script lang="ts"> + import { run } from 'svelte/legacy'; + import { avatar, banner } from "$lib/store"; import Icon from "$comp/Icon.svelte"; import { punk } from "$lib/utils"; - export let user; - export let size = 32; - export let disabled = false; + interface Props { + user: any; + size?: number; + disabled?: boolean; + } + + let { user, size = 32, disabled = false }: Props = $props(); - $: s = size.toString(); - $: link = user?.anon ? `/${user.pubkey}` : `/${user.username}`; + let s = $derived(size.toString()); + let link = $derived(user?.anon ? `/${user.pubkey}` : `/${user.username}`); let base = "/api/public"; - $: profile = user?.profile ? `${base}/${user.profile}.webp` : user?.picture; - $: fallback = `${base}/punks/` + punk(user.pubkey || user.id || "aa"); - $: tmp = $avatar?.id && $avatar.id === user.id && $avatar.src; - $: src = tmp || profile || fallback; + let profile = $derived(user?.profile ? `${base}/${user.profile}.webp` : user?.picture); + let fallback = $derived(`${base}/punks/` + punk(user.pubkey || user.id || "aa")); + let tmp = $derived($avatar?.id && $avatar.id === user.id && $avatar.src); + let src; + run(() => { + src = tmp || profile || fallback; + }); let handle = () => (src = fallback); </script> @@ -27,7 +36,7 @@ {src} class="w-full h-full object-cover object-center overflow-hidden" alt={user.username} - on:error={handle} + onerror={handle} /> </div> </a> diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte index 0cc27068..91463f7e 100644 --- a/src/components/Balance.svelte +++ b/src/components/Balance.svelte @@ -1,12 +1,14 @@ <script> + import { preventDefault } from 'svelte/legacy'; + import Icon from "$comp/Icon.svelte"; import Pin from "$comp/Pin.svelte"; import { f, s, sat, sats } from "$lib/utils"; import { pin } from "$lib/store"; import { t } from "$lib/translations"; - let show; - export let user, rate, balance; + let show = $state(); + let { user, rate, balance } = $props(); </script> {#if show && user.haspin && $pin?.length !== 6} @@ -16,7 +18,7 @@ <div> {#if user.haspin && !$pin} <button - on:click|preventDefault={() => (show = true)} + onclick={preventDefault(() => (show = true))} class="flex gap-2 text-xl" > <Icon icon="eye-off" style="w-8 my-auto" /> diff --git a/src/components/Code.svelte b/src/components/Code.svelte index 7ec046a6..00ef38a8 100644 --- a/src/components/Code.svelte +++ b/src/components/Code.svelte @@ -2,7 +2,7 @@ import { copyNoNewlines as copy } from "$lib/utils"; import Icon from "$comp/Icon.svelte"; import samples from "$lib/samples"; - export let sample; + let { sample } = $props(); </script> <div @@ -13,7 +13,7 @@ </div> <button class="ml-auto my-auto invert opacity-90" - on:click={() => copy(samples[sample])} + onclick={() => copy(samples[sample])} ><Icon icon="copy" style="w-10 max-w-none" /></button > </div> diff --git a/src/components/DarkToggle.svelte b/src/components/DarkToggle.svelte index 5ddc80a1..be1fe858 100644 --- a/src/components/DarkToggle.svelte +++ b/src/components/DarkToggle.svelte @@ -9,12 +9,12 @@ <button class="flex justify-center items-center hover:opacity-80 gap-2 font-bold" - on:click={dark} + onclick={dark} > <iconify-icon icon={$theme === "dark" ? "ph:sun-bold" : "ph:moon-stars-bold"} width="30" - /> +></iconify-icon> {$t(`nav.${$theme === "dark" ? "light" : "dark"}`)} </button> diff --git a/src/components/DeleteItem.svelte b/src/components/DeleteItem.svelte index 8f7f97ca..d45f09e6 100644 --- a/src/components/DeleteItem.svelte +++ b/src/components/DeleteItem.svelte @@ -1,9 +1,11 @@ <script> + import { preventDefault } from 'svelte/legacy'; + import Icon from "$comp/Icon.svelte"; import { fail, post } from "$lib/utils"; import { invalidate } from "$app/navigation"; - export let item; + let { item = $bindable() } = $props(); let cancel = () => (item = null); @@ -25,13 +27,13 @@ class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5" > <h1 class="text-center text-2xl font-semibold">Delete item</h1> - <form on:submit|preventDefault={submit}> + <form onsubmit={preventDefault(submit)}> <div class="w-full flex"> <button type="button" class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto" - on:click={cancel} - on:keydown={cancel} + onclick={cancel} + onkeydown={cancel} > <div class="my-auto">No</div> </button> diff --git a/src/components/Event.svelte b/src/components/Event.svelte index 640b9e68..78fdd230 100644 --- a/src/components/Event.svelte +++ b/src/components/Event.svelte @@ -1,7 +1,7 @@ <script> import Avatar from "$comp/Avatar.svelte"; import Icon from "$comp/Icon.svelte"; - export let event; + let { event } = $props(); let { id, user, seen, content } = event; @@ -22,7 +22,7 @@ : "now"; }; - let w; + let w = $state(); </script> <svelte:window bind:innerWidth={w} /> diff --git a/src/components/FaqCard.svelte b/src/components/FaqCard.svelte index ae1ad077..a2d13bc8 100644 --- a/src/components/FaqCard.svelte +++ b/src/components/FaqCard.svelte @@ -1,10 +1,15 @@ -<script> +<script lang="ts"> import { t } from "$lib/translations"; // this ID will be used to get the strings from the locale // question is at faq.[questionID].question - // answer is at faq.[questionID].answer - export let questionID; + + interface Props { + // answer is at faq.[questionID].answer + questionID: any; + } + + let { questionID }: Props = $props(); </script> <div class="mx-auto w-full md:w-2/3 lg:w-[700px] space-y-5"> diff --git a/src/components/Feed.svelte b/src/components/Feed.svelte index 5dc2b21a..593c2289 100644 --- a/src/components/Feed.svelte +++ b/src/components/Feed.svelte @@ -1,4 +1,6 @@ <script> + import { preventDefault } from 'svelte/legacy'; + import { t } from "$lib/translations"; import { onMount } from "svelte"; import Event from "$comp/Event.svelte"; @@ -7,10 +9,9 @@ import { fail } from "$lib/utils"; import { sign, send } from "$lib/nostr"; - export let events; - export let user = undefined; + let { events = $bindable(), user = undefined } = $props(); - let message; + let message = $state(); let submit = async () => { try { @@ -38,14 +39,14 @@ } }; - $: sorted = Object.values(events) + let sorted = $derived(Object.values(events) .filter((ev) => ev?.pubkey && ev?.kind === 1) - .sort((a, b) => b.seen - a.seen); + .sort((a, b) => b.seen - a.seen)); </script> {#if user} <form - on:submit|preventDefault={submit} + onsubmit={preventDefault(submit)} class="flex justify-center gap-4 max-w-2xl mx-auto" > <div class="grow"> @@ -68,14 +69,16 @@ <VirtualScroll data={sorted} key="id" - let:data + pageMode={true} estimateSize={200} > - <a href={`/${data.user.pubkey}/event/${data.id}`}> - <Event event={data} /> - </a> - </VirtualScroll> + {#snippet children({ data })} + <a href={`/${data.user.pubkey}/event/${data.id}`}> + <Event event={data} /> + </a> + {/snippet} + </VirtualScroll> {:else} <div class="flex w-full"> <div class="mx-auto text-secondary">{$t("user.noNotes")}</div> diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index 1fac31e9..3af5f6a3 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -24,7 +24,7 @@ <div class="space-y-5"> <div class="text-center w-full"> <a href="/"> - <iconify-icon icon="coinos:logo" width="224" /> + <iconify-icon icon="coinos:logo" width="224"></iconify-icon> </a> </div> <div class="flex gap-2 justify-center sm:hidden"> @@ -73,5 +73,5 @@ </ul> </div> - <iconify-icon icon="coinos:shield" class="flex justify-center" width="96" /> + <iconify-icon icon="coinos:shield" class="flex justify-center" width="96"></iconify-icon> </footer> diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte index a8fe63fd..2b8967ae 100644 --- a/src/components/HowItWorksCard.svelte +++ b/src/components/HowItWorksCard.svelte @@ -1,12 +1,11 @@ <script> import Icon from "./Icon.svelte"; import { t } from "$lib/translations"; - export let image; - export let stepID; + let { image, stepID } = $props(); </script> <div class="space-y-5"> - <iconify-icon icon={image} class="mx-auto" width="128" /> + <iconify-icon icon={image} class="mx-auto" width="128"></iconify-icon> <p class="text-2xl font-medium">{$t("howItWorks." + stepID + ".header")}</p> <p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto"> {$t("howItWorks." + stepID + ".description")} diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte index 0b47f726..6d55bf94 100644 --- a/src/components/Icon.svelte +++ b/src/components/Icon.svelte @@ -1,6 +1,5 @@ <script> - export let icon; - export let style = undefined; + let { icon, style = undefined } = $props(); </script> <img src="/icons/{icon}.svg" alt={icon} class={style} /> diff --git a/src/components/Image.svelte b/src/components/Image.svelte index 4f8b39bb..4bc90571 100644 --- a/src/components/Image.svelte +++ b/src/components/Image.svelte @@ -1,6 +1,5 @@ <script> - export let image; - export let style; + let { image, style } = $props(); </script> <img src="/images/{image}.webp" alt={image} class={style} /> diff --git a/src/components/InvoiceActions.svelte b/src/components/InvoiceActions.svelte index 7f1607e0..0b5dca55 100644 --- a/src/components/InvoiceActions.svelte +++ b/src/components/InvoiceActions.svelte @@ -1,33 +1,35 @@ <script> - export let user, + let { + user, invoice, copy, t, link, type, types, - showQr, + showQr = $bindable(), txt, - toggleAmount; + toggleAmount + } = $props(); </script> <div class="text-secondary space-y-2 text-xl pt-2"> - <button type="button" class="btn" on:click={() => copy(txt)}> - <iconify-icon icon="ph:copy-bold" width="32" /> + <button type="button" class="btn" onclick={() => copy(txt)}> + <iconify-icon icon="ph:copy-bold" width="32"></iconify-icon> <div class="my-auto"> {t("payments.copy")} </div> </button> {#if user?.id === invoice?.user?.id} - <button class="btn" on:click={toggleAmount}> - <iconify-icon icon="ph:pencil-simple-bold" width="32" /> + <button class="btn" onclick={toggleAmount}> + <iconify-icon icon="ph:pencil-simple-bold" width="32"></iconify-icon> <div class="my-auto">{t("payments.setAmount")}</div> </button> {:else} <a href={link} class="block"> <button class="btn"> - <iconify-icon icon="ph:wallet-bold" width="32" /> + <iconify-icon icon="ph:wallet-bold" width="32"></iconify-icon> <div class="my-auto">{t("payments.openLink")}</div> </button> </a> @@ -35,11 +37,11 @@ {#if txt.startsWith("ln")} <div class="w-full flex justify-center gap-2 flex-wrap"> - <button class="btn" on:click={() => (showQr = !showQr)}> + <button class="btn" onclick={() => (showQr = !showQr)}> {#if showQr} - <iconify-icon icon="ph:text-align-center-bold" width="32" /> + <iconify-icon icon="ph:text-align-center-bold" width="32"></iconify-icon> {:else} - <iconify-icon icon="ph:qr-code-bold" width="32" /> + <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon> {/if} <div class="my-auto"> {showQr ? t("payments.showText") : t("payments.showQr")} diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte index 7723eb56..da1ea5d9 100644 --- a/src/components/InvoiceData.svelte +++ b/src/components/InvoiceData.svelte @@ -1,16 +1,18 @@ <script> import { btc, f, sat, s, sats } from "$lib/utils"; - export let showQr, + let { + showQr, src, link, - qr, + qr = $bindable(), txt, invoice, amount, amountFiat, currency, tip, - rate; + rate + } = $props(); </script> {#if showQr} diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte index 354f0a49..cdd01aac 100644 --- a/src/components/InvoiceTypes.svelte +++ b/src/components/InvoiceTypes.svelte @@ -1,5 +1,12 @@ <script> - export let aid, user, type, types, t, setType; + let { + aid, + user, + type, + types, + t, + setType + } = $props(); </script> {#if aid === user?.id} @@ -8,7 +15,7 @@ class="btn flex-nowrap" class:bg-base-300={type === types.bitcoin} class:text-secondary={type === types.bitcoin} - on:click={() => setType(types.bitcoin)} + onclick={() => setType(types.bitcoin)} > <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" /> <div class="my-auto text-lg">Bitcoin</div> @@ -18,7 +25,7 @@ class="btn flex-nowrap" class:bg-base-300={type === types.liquid} class:text-secondary={type === types.liquid} - on:click={() => setType(types.liquid)} + onclick={() => setType(types.liquid)} > <img src="/images/liquid.svg" class="w-8" alt="Liquid" /> <div class="my-auto text-lg">Liquid</div> @@ -28,7 +35,7 @@ class="btn flex-nowrap" class:bg-base-300={type === types.lightning} class:text-secondary={type === types.lightning} - on:click={() => setType(types.lightning)} + onclick={() => setType(types.lightning)} > <div class="bg-base-100 rounded-full w-8 h-8 text-center flex"> <div class="m-auto">⚡️</div> diff --git a/src/components/ItemForm.svelte b/src/components/ItemForm.svelte index 7e0f58d8..d3ea88c0 100644 --- a/src/components/ItemForm.svelte +++ b/src/components/ItemForm.svelte @@ -1,15 +1,16 @@ <script> + import { preventDefault } from 'svelte/legacy'; + import { t } from "$lib/translations"; import { upload } from "$lib/upload"; import { fail } from "$lib/utils"; import { applyAction, deserialize } from "$app/forms"; import Spinner from "$comp/Spinner.svelte"; - export let item; - export let user; + let { item = $bindable(), user } = $props(); - let fileInput, formElement, file, submitting, progress; + let fileInput = $state(), formElement = $state(), file, submitting = $state(), progress; let select = () => fileInput.click(); - let src; + let src = $state(); let tooLarge = {}; let handleFile = async ({ target }, type) => { @@ -67,7 +68,7 @@ <form method="POST" class="space-y-5" - on:submit|preventDefault={handleSubmit} + onsubmit={preventDefault(handleSubmit)} bind:this={formElement} > <input type="hidden" name="id" bind:value={item.id} /> @@ -104,24 +105,24 @@ {src} alt={item.name} class="object-cover w-full h-full" - on:click={select} - on:keydown={select} + onclick={select} + onkeydown={select} /> {:else if item.image} <img src={`/api/public/${item.image}.webp`} alt={item.name} class="object-cover w-full h-full" - on:click={select} - on:keydown={select} + onclick={select} + onkeydown={select} /> {:else} <div class="bg-gradient-to-r from-primary to-gradient mb-4 cursor-pointer hover:opacity-80 w-full h-full" - on:click={select} - on:keydown={select} + onclick={select} + onkeydown={select} alt="Banner" - /> +></div> {/if} </div> </div> @@ -130,7 +131,7 @@ type="file" class="hidden" bind:this={fileInput} - on:change={(e) => handleFile(e, "item")} + onchange={(e) => handleFile(e, "item")} /> </div> diff --git a/src/components/Items.svelte b/src/components/Items.svelte index db5dedc1..a7b4fe1a 100644 --- a/src/components/Items.svelte +++ b/src/components/Items.svelte @@ -1,4 +1,6 @@ <script> + import { run, stopPropagation } from 'svelte/legacy'; + import { t } from "$lib/translations"; import { btc, f, sat, post } from "$lib/utils"; import { browser } from "$app/environment"; @@ -15,15 +17,22 @@ import DeleteItem from "$comp/DeleteItem.svelte"; import Icon from "$comp/Icon.svelte"; - export let subject, user, items, rate, currency, total; + let { + subject, + user, + items = $bindable(), + rate, + currency, + total + } = $props(); let flipDurationMs = 200; let dropTargetStyle = {}; let dragDisabled = - subject?.id !== user?.id || (browser && window.innerWidth < 768); + $state(subject?.id !== user?.id || (browser && window.innerWidth < 768)); - let deleting; + let deleting = $state(); let del = (item) => { deleting = item; }; @@ -62,10 +71,6 @@ dragDisabled = false; } - $: if (total > 0 && browser) { - let payButton = document.querySelector("#payButton"); - if (payButton) payButton.addEventListener("click", checkout); - } let checkout = async () => { let invoice = { @@ -92,9 +97,15 @@ let reset = () => (dragDisabled = user?.username !== subject?.username || window.innerWidth < 768); + run(() => { + if (total > 0 && browser) { + let payButton = document.querySelector("#payButton"); + if (payButton) payButton.addEventListener("click", checkout); + } + }); </script> -<svelte:window on:resize={reset} /> +<svelte:window onresize={reset} /> {#if deleting} <DeleteItem bind:item={deleting} /> @@ -106,21 +117,21 @@ <div class="grid sm:grid-cols-2 gap-4 pb-20" use:dndzone={{ items, flipDurationMs, dropTargetStyle, dragDisabled }} - on:consider={handleConsider} - on:finalize={handleFinalize} + onconsider={handleConsider} + onfinalize={handleFinalize} > {#each items as i (i.id)} <button type="button" class="w-full text-center cursor-pointer hover:opacity-80 mb-auto" - on:click={() => i.quantity++} + onclick={() => i.quantity++} > <div class="relative w-full h-64 overflow-hidden rounded-xl"> {#if i[SHADOW_ITEM_MARKER_PROPERTY_NAME]} <div in:fade={{ duration: 200, easing: cubicIn }} class="custom-shadow-item" - /> +></div> {:else if i.image} <img src={`/api/public/${i.image}.webp`} @@ -131,7 +142,7 @@ <div class="bg-gradient-to-r from-primary to-gradient mb-4 cursor-pointer hover:opacity-80 w-full h-full" alt="Banner" - /> +></div> {/if} {#if user?.username === subject.username} <div class="flex gap-2 justify-center absolute top-2 right-2"> @@ -144,16 +155,16 @@ </a> <button class="bg-black rounded-full w-12 h-12 bg-opacity-40 hover:bg-opacity-100" - on:click|stopPropagation={() => del(i)} + onclick={stopPropagation(() => del(i))} > <Icon icon="trash" style="w-8 mx-auto invert" /> </button> <div - on:click|stopPropagation={() => {}} + onclick={stopPropagation(() => {})} class="sm:hidden" - on:mousedown={startDrag} - on:touchstart={startDrag} - on:keydown={handleKeyDown} + onmousedown={startDrag} + ontouchstart={startDrag} + onkeydown={handleKeyDown} > <a href={`/items/${i.id}`}> <button @@ -183,7 +194,7 @@ {#if i.quantity} <button type="button" - on:click|stopPropagation={() => i.quantity > 0 && i.quantity--} + onclick={stopPropagation(() => i.quantity > 0 && i.quantity--)} > <Icon icon="minus" style="w-10 min-w-10" /> </button> @@ -194,7 +205,7 @@ {#if i.quantity} <button type="button" - on:click|stopPropagation={() => i.quantity++} + onclick={stopPropagation(() => i.quantity++)} > <Icon icon="plus" style="w-10 min-w-10" /> </button> @@ -213,7 +224,7 @@ {#if total > 0} <button class="rounded-2xl py-5 px-6 font-bold hover:bg-neutral-700 flex bg-black text-white mx-auto" - on:click={checkout} + onclick={checkout} > <div class="mx-auto flex"> <div class="my-auto text-2xl"> diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte index 7a4c5d18..c20c80a0 100644 --- a/src/components/LandingHeader.svelte +++ b/src/components/LandingHeader.svelte @@ -7,13 +7,15 @@ import DarkToggle from "$comp/DarkToggle.svelte"; import LocaleSelector from "$comp/LocaleSelector.svelte"; - export let howItWorks; - export let faq; - export let about; - export let user; + let { + howItWorks, + faq, + about, + user + } = $props(); - let showMobileMenu = false; - let header; + let showMobileMenu = $state(false); + let header = $state(); const mobileMenuButtonClick = (section) => { showMobileMenu = false; scroll(section); @@ -26,45 +28,45 @@ > <nav class="block lg:flex justify-between items-center"> <div class="flex justify-start lg:justify-center items-center lg:space-x-5"> - <a href="/" on:click={() => scroll(header)}> - <iconify-icon icon="coinos:logo" width="224" /> + <a href="/" onclick={() => scroll(header)}> + <iconify-icon icon="coinos:logo" width="224"></iconify-icon> </a> </div> <!-- desktop nav --> <div class="hidden space-x-5 lg:flex justify-center items-center font-bold"> {#if $page.url.pathname === "/"} - <button class="hover:opacity-80" on:click={() => scroll(howItWorks)} + <button class="hover:opacity-80" onclick={() => scroll(howItWorks)} >{$t("howItWorks.header")}</button > - <button class="hover:opacity-80" on:click={() => scroll(faq)} + <button class="hover:opacity-80" onclick={() => scroll(faq)} >{$t("faq.header")}</button > - <button class="hover:opacity-80" on:click={() => scroll(about)} + <button class="hover:opacity-80" onclick={() => scroll(about)} >{$t("about.header")}</button > {/if} {#if user} <button class="btn !w-auto !rounded-full" - on:click={() => goto(`/${user.username}`)} + onclick={() => goto(`/${user.username}`)} >Home </button> <button class="btn !w-auto !rounded-full" - on:click={() => goto("/logout")} + onclick={() => goto("/logout")} > {$t("nav.signOut")} </button> {:else} <button class="btn btn-accent !w-auto !rounded-full" - on:click={() => goto("/register")} + onclick={() => goto("/register")} >{$t("nav.register")} </button> <button class="btn !w-auto !rounded-full" - on:click={() => goto("/login")} + onclick={() => goto("/login")} > {$t("nav.signIn")} </button> @@ -73,12 +75,12 @@ <button class="block lg:hidden absolute top-[34.5px] right-10 z" - on:click={() => (showMobileMenu = !showMobileMenu)} + onclick={() => (showMobileMenu = !showMobileMenu)} > <iconify-icon icon={!showMobileMenu ? "ph:list-bold" : "ph:x-bold"} width="32" - /> +></iconify-icon> </button> <div @@ -89,31 +91,31 @@ <div class="space-y-5 mt-24 font-bold text-xl"> <LocaleSelector /> <DarkToggle /> - <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block" + <button onclick={() => mobileMenuButtonClick(howItWorks)} class="block" >{$t("howItWorks.header")}</button > - <button on:click={() => mobileMenuButtonClick(faq)} class="block" + <button onclick={() => mobileMenuButtonClick(faq)} class="block" >{$t("faq.header")}</button > - <button on:click={() => mobileMenuButtonClick(about)} class="block" + <button onclick={() => mobileMenuButtonClick(about)} class="block" >{$t("about.header")}</button > {#if !user} - <button class="btn btn-accent" on:click={() => goto("/register")} + <button class="btn btn-accent" onclick={() => goto("/register")} >{$t("nav.register")} </button> - <button class="btn" on:click={() => goto("/login")}> + <button class="btn" onclick={() => goto("/login")}> {$t("nav.signIn")} </button> {:else} <button class="border rounded-full px-6 py-2 font-bold block" - on:click={() => goto(`/${user.username}`)} + onclick={() => goto(`/${user.username}`)} >{$t("nav.account")} </button> <button class="bg-primary text-white border rounded-full px-6 py-2 font-bold block" - on:click={() => goto("/logout")} + onclick={() => goto("/logout")} > {$t("nav.signOut")} </button> diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte index 8d47283e..d3f71390 100644 --- a/src/components/LandingHero.svelte +++ b/src/components/LandingHero.svelte @@ -17,7 +17,7 @@ <iconify-icon icon="coinos:rays" class="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" - /> +></iconify-icon> </span> {$t("landing.header_after_icon")} </h1> diff --git a/src/components/LandingInfoCard.svelte b/src/components/LandingInfoCard.svelte index fadcb6c0..63951e86 100644 --- a/src/components/LandingInfoCard.svelte +++ b/src/components/LandingInfoCard.svelte @@ -1,10 +1,13 @@ <script> import Image from "./Image.svelte"; - export let image; - export let title; - export let description = undefined; - export let order = undefined; + let { + image, + title, + description = undefined, + order = undefined, + children + } = $props(); </script> <div class="block lg:flex justify-center lg:space-x-20 items-center"> @@ -25,7 +28,7 @@ {#if description} {description} {:else} - <slot /> + {@render children?.()} {/if} </p> </div> diff --git a/src/components/Lnurlp.svelte b/src/components/Lnurlp.svelte index 0268e363..74be0571 100644 --- a/src/components/Lnurlp.svelte +++ b/src/components/Lnurlp.svelte @@ -1,19 +1,29 @@ <script> + import { run } from 'svelte/legacy'; + import { t } from "$lib/translations"; import { enhance } from "$app/forms"; import Numpad from "$comp/Numpad.svelte"; import Spinner from "$comp/Spinner.svelte"; import { pin } from "$lib/store"; - export let data, form, send, comment; + let { + data, + form, + send = $bindable(), + comment = $bindable() + } = $props(); let { currency } = data.user; let { minSendable, maxSendable, commentAllowed, callback, metadata, rates } = data; - $: rate = rates[currency]; + let rate; + run(() => { + rate = rates[currency]; + }); - let amount = Math.round(minSendable / 1000), - loading; + let amount = $state(Math.round(minSendable / 1000)), + loading = $state(); let submit = () => (loading = true); </script> @@ -39,7 +49,7 @@ <Numpad bind:amount bind:rate {currency} bind:submit={send} /> - <form action="?/pay" method="POST" use:enhance on:submit={submit}> + <form action="?/pay" method="POST" use:enhance onsubmit={submit}> <input name="amount" value={amount} type="hidden" /> <input name="minSendable" value={minSendable} type="hidden" /> <input name="maxSendable" value={maxSendable} type="hidden" /> @@ -53,7 +63,7 @@ class="w-full p-4 border rounded-xl h-32 text-xl" bind:value={comment} autocapitalize="none" - /> +></textarea> {/if} <div class="flex w-full"> diff --git a/src/components/Lnurlw.svelte b/src/components/Lnurlw.svelte index d0fbf3b4..50aa1488 100644 --- a/src/components/Lnurlw.svelte +++ b/src/components/Lnurlw.svelte @@ -1,4 +1,6 @@ <script> + import { run } from 'svelte/legacy'; + import { sats, f, s } from "$lib/utils"; import { t } from "$lib/translations"; import { enhance } from "$app/forms"; @@ -6,7 +8,7 @@ import Spinner from "$comp/Spinner.svelte"; import { pin } from "$lib/store"; - export let data, form; + let { data, form } = $props(); let { currency, username } = data.user; let { @@ -17,13 +19,16 @@ callback, rates, } = data; - $: rate = rates[currency]; + let rate; + run(() => { + rate = rates[currency]; + }); - let amount = Math.round(minWithdrawable / 1000), - loading; + let amount = $state(Math.round(minWithdrawable / 1000)), + loading = $state(); let submit = () => (loading = true); - $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2)); + let amountFiat = $derived(parseFloat(((amount * rate) / sats).toFixed(2))); </script> <div class="container px-4 mt-20 max-w-xl mx-auto"> @@ -56,7 +61,7 @@ <Numpad bind:amount {currency} bind:rate /> {/if} - <form action="?/withdraw" method="POST" use:enhance on:submit={submit}> + <form action="?/withdraw" method="POST" use:enhance onsubmit={submit}> <input name="amount" value={amount} type="hidden" /> <input name="username" value={username} type="hidden" /> <input name="currency" value={currency} type="hidden" /> diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte index d837a534..cb057dbd 100644 --- a/src/components/LocaleSelector.svelte +++ b/src/components/LocaleSelector.svelte @@ -1,8 +1,13 @@ <script> + import { run } from 'svelte/legacy'; + import { t, locale, locales } from "$lib/translations"; - export let style; + let { style } = $props(); - $: l = $locale; + let l; + run(() => { + l = $locale; + }); const handleChange = ({ currentTarget }) => { const { value } = currentTarget; @@ -11,7 +16,7 @@ }; </script> -<select name="language" bind:value={l} on:change={handleChange}> +<select name="language" bind:value={l} onchange={handleChange}> {#each $locales as locale} <option value={locale}>{$t(`lang.${locale}`)}</option> {/each} diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index c01d8b75..b04b8e98 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -1,5 +1,5 @@ <script> - import { tick, onMount, onDestroy } from "svelte"; + import { tick, onMount, onDestroy, mount } from "svelte"; import { browser } from "$app/environment"; import Icon from "$comp/Icon.svelte"; import Popup from "$comp/Popup.svelte"; @@ -7,15 +7,15 @@ import "maplibre-gl/dist/maplibre-gl.css"; - export let locations; + let { locations } = $props(); let map; - let mapContainer, mapWrapper; + let mapContainer = $state(), mapWrapper = $state(); let markers = []; - let search; + let search = $state(); let clearSearch = (e) => (search = ""); let currentIndex = -1; - let timeout; + let timeout = $state(); let full = () => { if (!document.fullscreenElement) { @@ -49,11 +49,6 @@ } }; - $: list = search - ? markers.filter((m) => - m.tags.name.toLowerCase().includes(search.toLowerCase()), - ) - : inview; let scroll = () => { const el = document.querySelector(".selected"); @@ -65,7 +60,7 @@ }); }; - let selected; + let selected = $state(); function select(m) { selected = m; stopFlying(); @@ -109,7 +104,7 @@ }; let toggleList = () => (showList = !showList); - let showList; + let showList = $state(); let currentPopup; function startFlying() { @@ -155,7 +150,7 @@ map.off("moveend"); } - let inview = []; + let inview = $state([]); let updateLabelVisibility = debounce(() => { inview = []; @@ -201,10 +196,10 @@ let popupContainer = document.createElement("div"); - new Popup({ - target: popupContainer, - props: { tags }, - }); + mount(Popup, { + target: popupContainer, + props: { tags }, + }); let marker = new maplibre.Marker({ color: "#F7931A", scale: 0.65 }) .setLngLat([lon, lat]) @@ -252,6 +247,11 @@ }); onDestroy(() => map && map.remove()); + let list = $derived(search + ? markers.filter((m) => + m.tags.name.toLowerCase().includes(search.toLowerCase()), + ) + : inview); </script> <div class="w-screen h-dvh flex" id="map" bind:this={mapWrapper}> @@ -259,11 +259,11 @@ id="map-container" class="mx-auto h-full w-full z-0" bind:this={mapContainer} - /> +></div> <div class="absolute flex top-2 left-2 gap-2"> <button class="rounded-full border-2 border-black bg-base-100 w-10 h-10" - on:click={back} + onclick={back} > <Icon icon="arrow-left" style="w-4 m-auto" /> </button> @@ -277,7 +277,7 @@ <input bind:value={search} class="w-full" /> <div class="flex gap-1 absolute right-6 top-3"> {#if search} - <button on:click={clearSearch}> + <button onclick={clearSearch}> <Icon icon="close" style="w-8" /> </button> {:else} @@ -288,7 +288,7 @@ {#each list as marker, i} <button - on:click={() => select(marker)} + onclick={() => select(marker)} class:font-bold={selected === marker} class:selected={selected === marker} class="block whitespace-nowrap text-ellipsis text-left w-full overflow-hidden" @@ -301,13 +301,13 @@ <div class="absolute flex top-2 right-2 gap-2"> <button class="rounded-full border-2 border-black bg-white w-10 h-10" - on:click={toggleList} + onclick={toggleList} > <Icon icon="list" style="w-4 m-auto" /> </button> <button class="rounded-full border-2 border-black bg-white w-10 h-10" - on:click={toggle} + onclick={toggle} > {#if timeout} <Icon icon="pause" style="w-4 m-auto" /> diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte index 3ce6d9ce..de21bbbc 100644 --- a/src/components/Menu.svelte +++ b/src/components/Menu.svelte @@ -1,26 +1,35 @@ <script> + import { run } from 'svelte/legacy'; + import { theme } from "$lib/store"; import DarkToggle from "$comp/DarkToggle.svelte"; import OutClick from "svelte-outclick"; - export let t, user, w, opacity; + let { + t, + user, + w, + opacity + } = $props(); let dark = () => ($theme = $theme === "dark" ? "light" : "dark"); - let showMenu = false; + let showMenu = $state(false); - let menuButtons; - $: if (user) - menuButtons = [ - { key: "nav.settings", icon: "ph:gear-bold", href: `/settings` }, - { key: "nav.support", icon: "ph:lifebuoy-bold", href: `/support` }, - { key: "nav.map", icon: "ph:map-trifold-bold", href: `/map` }, - { - key: "nav.merch", - icon: "ph:storefront-bold", - href: `https://coinosmerch.com`, - }, - { key: "nav.dark", icon: "ph:moon-stars-bold", href: `/dark` }, - { key: "nav.signOut", icon: "ph:sign-out-bold", href: `/logout` }, - ]; + let menuButtons = $state(); + run(() => { + if (user) + menuButtons = [ + { key: "nav.settings", icon: "ph:gear-bold", href: `/settings` }, + { key: "nav.support", icon: "ph:lifebuoy-bold", href: `/support` }, + { key: "nav.map", icon: "ph:map-trifold-bold", href: `/map` }, + { + key: "nav.merch", + icon: "ph:storefront-bold", + href: `https://coinosmerch.com`, + }, + { key: "nav.dark", icon: "ph:moon-stars-bold", href: `/dark` }, + { key: "nav.signOut", icon: "ph:sign-out-bold", href: `/logout` }, + ]; + }); let hideMenu = () => (showMenu = false); let toggleMenu = () => (showMenu = !showMenu); @@ -28,8 +37,8 @@ <div> <OutClick on:outclick={hideMenu}> - <button class="btn-menu {opacity('/support')}" on:click={toggleMenu} - ><iconify-icon icon="ph:list-bold" width={w > 640 ? 32 : 24} /> + <button class="btn-menu {opacity('/support')}" onclick={toggleMenu} + ><iconify-icon icon="ph:list-bold" width={w > 640 ? 32 : 24}></iconify-icon> </button> <div @@ -47,12 +56,12 @@ {href} data-sveltekit-preload-code="eager" data-sveltekit-preload-data="false" - on:click={hideMenu} + onclick={hideMenu} > <button class="flex justify-center items-center font-semibold hover:opacity-80 gap-2" > - <iconify-icon {icon} width="32" /> + <iconify-icon {icon} width="32"></iconify-icon> {t(key)} </button> </a> @@ -61,7 +70,7 @@ {/each} </ul> <hr class="my-4" /> - <a href="/?stay=true"><iconify-icon icon="coinos:logo" width="160" /></a> + <a href="/?stay=true"><iconify-icon icon="coinos:logo" width="160"></iconify-icon></a> </div> </OutClick> </div> diff --git a/src/components/Mnemonic.svelte b/src/components/Mnemonic.svelte index 41e81d9a..93035230 100644 --- a/src/components/Mnemonic.svelte +++ b/src/components/Mnemonic.svelte @@ -1,5 +1,5 @@ <script> - export let mnemonic; + let { mnemonic } = $props(); </script> <div class="flex w-full border p-4 rounded-2xl h-full"> diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte index 07d1ef4c..03c7c48f 100644 --- a/src/components/Numpad.svelte +++ b/src/components/Numpad.svelte @@ -1,21 +1,33 @@ -<script> +<script lang="ts"> + import { run, preventDefault, stopPropagation } from "svelte/legacy"; + import Left from "$comp/Left.svelte"; import Icon from "$comp/Icon.svelte"; import { f, s, focus, warning, sat, sats } from "$lib/utils"; import { t } from "$lib/translations"; - export let amount, - currency, - element, - fiat = !amount, - rate, - submit = undefined; + interface Props { + amount: any; + currency: any; + element: any; + fiat?: any; + rate: any; + submit?: any; + amountFiat?: number; + } - export let amountFiat = 0; + let { + amount = $bindable(), + currency, + element = $bindable(), + fiat = $bindable(!amount), + rate = $bindable(), + submit = undefined, + amountFiat = $bindable(0), + }: Props = $props(); let arrow = "<"; - $: update(amount, amountFiat); let update = (a, f) => { if (fiat) { amount = Math.round(f / (rate / sats)); @@ -102,8 +114,6 @@ } }; - $: html = fiat ? amountFiat : s(amount); - let prev = ""; let input = (e) => { @@ -193,6 +203,13 @@ } fiat = !fiat; }; + run(() => { + update(amount, amountFiat); + }); + let html; + run(() => { + html = fiat ? amountFiat : s(amount); + }); </script> <div class="flex justify-center items-center"> @@ -208,17 +225,17 @@ use:focus contenteditable bind:innerHTML={html} - on:focus={select} - on:blur={blur} - on:input={input} - on:keydown={keydown} + onfocus={select} + onblur={blur} + oninput={input} + onkeydown={keydown} class="outline-none my-auto" bind:this={element} - /> + ></div> </div> <div class="flex items-center justify-center text-2xl cursor-pointer" - on:click|preventDefault|stopPropagation={swap} + onclick={stopPropagation(preventDefault(swap))} > {fiat ? "⚡️" + s(amount) : f(amountFiat, currency)} </div> @@ -230,7 +247,7 @@ <button type="button" class="btn" - on:click|preventDefault|stopPropagation={() => handleInput(value)} + onclick={stopPropagation(preventDefault(() => handleInput(value)))} > <Left /> </button> @@ -238,7 +255,7 @@ <button type="button" class="btn" - on:click|preventDefault|stopPropagation={() => handleInput(value)} + onclick={stopPropagation(preventDefault(() => handleInput(value)))} >{value}</button > {/if} diff --git a/src/components/Password.svelte b/src/components/Password.svelte index cb57eec5..ac2a9a44 100644 --- a/src/components/Password.svelte +++ b/src/components/Password.svelte @@ -1,13 +1,15 @@ <script> + import { preventDefault } from 'svelte/legacy'; + import Icon from "$comp/Icon.svelte"; import { focus, fail, post } from "$lib/utils"; import { password as pw, passwordPrompt } from "$lib/store"; - export let user; + let { user } = $props(); - let password; + let password = $state(); let { username } = user; - let revealPassword = false; + let revealPassword = $state(false); let cancel = () => ($passwordPrompt = false); @@ -31,7 +33,7 @@ <h1 class="text-center text-2xl font-semibold"> Please enter your password </h1> - <form on:submit|preventDefault={submit}> + <form onsubmit={preventDefault(submit)}> <div class="relative mb-5"> {#if revealPassword} <input @@ -54,21 +56,21 @@ {/if} <button type="button" - on:click={() => (revealPassword = !revealPassword)} + onclick={() => (revealPassword = !revealPassword)} class="absolute right-5 top-6" > <iconify-icon icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"} width="32" - /> +></iconify-icon> </button> </div> <div class="w-full flex"> <button type="button" class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto" - on:click={cancel} - on:keydown={cancel} + onclick={cancel} + onkeydown={cancel} > <div class="my-auto">Cancel</div> </button> diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte index fb17c612..da53577e 100644 --- a/src/components/Pin.svelte +++ b/src/components/Pin.svelte @@ -1,28 +1,36 @@ -<script> +<script lang="ts"> + import { run, createBubbler, preventDefault } from "svelte/legacy"; + + const bubble = createBubbler(); import { t } from "$lib/translations"; import { post, success, fail, focus, setCookie } from "$lib/utils"; import Pinpad from "$comp/Pinpad.svelte"; import { pin } from "$lib/store"; import { onMount } from "svelte"; - export let value = ""; - export let title = $t("user.settings.verifyPIN"); - export let cancel = () => (p = ""); - export let notify = true; + interface Props { + value?: string; + title?: any; + cancel?: any; + notify?: boolean; + } - let p = ""; + let { + value = $bindable(""), + title = $t("user.settings.verifyPIN"), + cancel = () => (p = ""), + notify = true, + }: Props = $props(); - $: update(value); - let update = (value) => (p = value); + let p = $state(""); - $: p.toString().length > 5 && (value = p.toString()); + let update = (value) => (p = value); - let loaded; + let loaded = $state(); onMount(() => setTimeout(() => (loaded = true), 500)); - let locktime = 30 * 60; + let locktime = $state(30 * 60); - $: loaded && checkPin(p); let checkPin = async (p) => { if (p?.length !== 6) return; let result; @@ -41,12 +49,21 @@ value = ""; } }; + run(() => { + p.toString().length > 5 && (value = p.toString()); + }); + run(() => { + update(value); + }); + run(() => { + loaded && checkPin(p); + }); </script> {#if loaded} <div class="fixed bg-base-100 bg-opacity-90 inset-0 h-full w-full z-50 cursor-default" - on:click|preventDefault + onclick={preventDefault(bubble("click"))} > <div class="mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 max-w-lg" @@ -58,10 +75,7 @@ <label for="locktime" class="font-bold" >{$t("user.settings.rememberFor")}</label > - <select - name="locktime" - bind:value={locktime} - > + <select name="locktime" bind:value={locktime}> <option value={30}>30 {$t("user.settings.seconds")}</option> <option value={5 * 60}>5 {$t("user.settings.minutes")}</option> <option value={10 * 60}>10 {$t("user.settings.minutes")}</option> @@ -72,7 +86,7 @@ </div> <div class="w-full flex"> - <button class="btn" on:click|preventDefault={cancel}> + <button class="btn" onclick={preventDefault(cancel)}> <div class="my-auto">Cancel</div> </button> </div> diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte index d61dd2a0..93f31d08 100644 --- a/src/components/Pinpad.svelte +++ b/src/components/Pinpad.svelte @@ -1,11 +1,12 @@ <script> + import { preventDefault, stopPropagation } from 'svelte/legacy'; + import Left from "$comp/Left.svelte"; import Icon from "$comp/Icon.svelte"; import { focus, post, warning } from "$lib/utils"; import { t } from "$lib/translations"; - export let v; - export let cancel; + let { v = $bindable(), cancel } = $props(); let arrow = "<"; let loading = false; @@ -33,7 +34,7 @@ } }; - let hide = true; + let hide = $state(true); </script> <label @@ -41,7 +42,7 @@ > {#if hide} <input - on:keydown={validate} + onkeydown={validate} use:focus bind:value={v} type="password" @@ -50,7 +51,7 @@ /> {:else} <input - on:keydown={validate} + onkeydown={validate} use:focus bind:value={v} class="clean text-center !text-5xl !w-96 block" @@ -61,9 +62,9 @@ <iconify-icon icon={hide ? "ph:eye-slash-bold" : "ph:eye-bold"} width="32" - on:click|stopPropagation|preventDefault={() => (hide = !hide)} + onclick={stopPropagation(preventDefault(() => (hide = !hide)))} class="cursor-pointer" - /> +></iconify-icon> </label> <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale"> @@ -72,7 +73,7 @@ <button type="button" class="btn" - on:click|stopPropagation|preventDefault={() => handleInput(value)} + onclick={stopPropagation(preventDefault(() => handleInput(value)))} > <Left /> </button> @@ -80,7 +81,7 @@ <button type="button" class="btn" - on:click|stopPropagation|preventDefault={() => handleInput(value)} + onclick={stopPropagation(preventDefault(() => handleInput(value)))} >{value}</button > {/if} diff --git a/src/components/Popup.svelte b/src/components/Popup.svelte index df96215f..661b2bed 100644 --- a/src/components/Popup.svelte +++ b/src/components/Popup.svelte @@ -1,7 +1,7 @@ <script> import { page } from "$app/stores"; import Avatar from "$comp/Avatar.svelte"; - export let tags; + let { tags } = $props(); let addr = (tags) => { let { diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index e98497c4..c8d33e23 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -1,14 +1,14 @@ <script> import screenfull from "screenfull"; - export let src; - let qr; + let { src } = $props(); + let qr = $state(); </script> <div class="w-80 mx-auto cursor-pointer" bind:this={qr} - on:click={() => screenfull.toggle(qr)} - on:keydown={() => screenfull.toggle(qr)} + onclick={() => screenfull.toggle(qr)} + onkeydown={() => screenfull.toggle(qr)} > <img {src} class="mx-auto" alt="QR Code" /> </div> diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte index 506762da..332c2eca 100644 --- a/src/components/SetAmount.svelte +++ b/src/components/SetAmount.svelte @@ -1,17 +1,21 @@ <script> + import { preventDefault, stopPropagation } from "svelte/legacy"; + import Numpad from "$comp/Numpad.svelte"; import Toggle from "$comp/Toggle.svelte"; - export let currency, - rate, - fiat, - submit, + let { + currency = $bindable(), + fiat = $bindable(), + rate = $bindable(), + submit = $bindable(), settingAmount, setAmount, - newAmount, + newAmount = $bindable(), toggleAmount, t, - amountPrompt; + amountPrompt = $bindable(), + } = $props(); </script> {#if settingAmount} @@ -21,19 +25,13 @@ <div class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5" > - <form on:submit|preventDefault={setAmount} class="space-y-5"> - <Numpad - bind:amount={newAmount} - bind:currency - bind:rate - bind:fiat - bind:submit - /> + <form onsubmit={preventDefault(setAmount)} class="space-y-5"> + <Numpad bind:amount={newAmount} bind:fiat {currency} {rate} {submit} /> <div class="w-full flex flex-wrap gap-2"> <button bind:this={submit} type="submit" - on:click|preventDefault|stopPropagation={setAmount} + onclick={stopPropagation(preventDefault(setAmount))} class="btn btn-accent" > <div class="my-auto">{t("payments.ok")}</div> @@ -41,8 +39,8 @@ <button type="button" class="btn" - on:click|preventDefault|stopPropagation={toggleAmount} - on:keydown|preventDefault|stopPropagation={toggleAmount} + onclick={stopPropagation(preventDefault(toggleAmount))} + onkeydown={stopPropagation(preventDefault(toggleAmount))} > <div class="my-auto">{t("payments.cancel")}</div> </button> diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte index b82b6bf9..137c28b4 100644 --- a/src/components/Slider.svelte +++ b/src/components/Slider.svelte @@ -1,8 +1,17 @@ -<script> - export let value, +<script lang="ts"> + interface Props { + value: any; + handle: any; + min?: number; + max?: number; + } + + let { + value = $bindable(), handle, min = 0, - max = 100; + max = 100 + }: Props = $props(); </script> <input @@ -13,7 +22,7 @@ bind:value class="px-0 py-0 my-5" style="--bgPercent: {((value - min) * 100) / (max - min)}%;" - on:input={handle} + oninput={handle} /> <style> diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte index 2f92837d..0bc319ab 100644 --- a/src/components/Toggle.svelte +++ b/src/components/Toggle.svelte @@ -1,6 +1,5 @@ <script> - export let id; - export let value; + let { id, value = $bindable() } = $props(); </script> <label for={id} class="inline-flex relative items-center mr-5 cursor-pointer"> @@ -13,5 +12,5 @@ /> <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-500" - /> +></div> </label> diff --git a/src/components/WalletPass.svelte b/src/components/WalletPass.svelte index 75c94f34..57cf69c3 100644 --- a/src/components/WalletPass.svelte +++ b/src/components/WalletPass.svelte @@ -1,9 +1,11 @@ <script> + import { preventDefault } from 'svelte/legacy'; + import { focus } from "$lib/utils"; import { t } from "$lib/translations"; import Icon from "$comp/Icon.svelte"; - export let cancel, password, submit; - let revealPassword; + let { cancel, password = $bindable(), submit } = $props(); + let revealPassword = $state(); </script> <div @@ -15,7 +17,7 @@ <h1 class="text-center text-2xl font-semibold"> {$t("payments.enterWalletPass")} </h1> - <form on:submit|preventDefault={submit}> + <form onsubmit={preventDefault(submit)}> <div class="relative mb-5"> {#if revealPassword} <input @@ -38,7 +40,7 @@ {/if} <button type="button" - on:click={() => (revealPassword = !revealPassword)} + onclick={() => (revealPassword = !revealPassword)} class="absolute right-5 top-1/2" > <Icon icon={revealPassword ? "eye" : "eye-off"} /> @@ -48,8 +50,8 @@ <button type="button" class="border rounded-2xl font-semibold mx-auto py-5 px-6 hover:opacity-80 mx-auto grow" - on:click={cancel} - on:keydown={cancel} + onclick={cancel} + onkeydown={cancel} > <div class="my-auto">Cancel</div> </button> |