Re work modal scrolling

This commit is contained in:
Jon Staab
2026-01-30 14:14:12 -08:00
parent 4169db33e6
commit 38c0a9d403
75 changed files with 2340 additions and 2030 deletions
+51 -47
View File
@@ -8,6 +8,8 @@
import Button from "@lib/components/Button.svelte"
import FieldInline from "@lib/components/FieldInline.svelte"
import Scanner from "@lib/components/Scanner.svelte"
import Modal from "@lib/components/Modal.svelte"
import ModalBody from "@lib/components/ModalBody.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import {payInvoice} from "@app/core/commands"
@@ -48,52 +50,54 @@
let sats = $state(0)
</script>
<div class="column gap-4">
<ModalHeader>
{#snippet title()}
<div>Pay with Lightning</div>
{/snippet}
{#snippet info()}
Use your Nostr wallet to send Bitcoin payments over lightning.
{/snippet}
</ModalHeader>
{#if invoice}
<div class="card2 bg-alt flex flex-col gap-2">
{#if $session?.wallet?.type === "webln" && invoice.satoshi === 0}
<p class="text-sm opacity-75">
Uh oh! It looks like your current wallet doesn't support invoices without an amount. See
if you can get a lightning invoice with a pre-set amount.
</p>
{:else}
<FieldInline>
{#snippet label()}
Amount (satoshis)
{/snippet}
{#snippet input()}
<div class="flex flex-grow justify-end">
<label class="input input-bordered flex items-center gap-2">
<Icon icon={Bolt} />
<input
bind:value={sats}
type="number"
class="w-14"
disabled={invoice!.satoshi > 0} />
</label>
</div>
{/snippet}
</FieldInline>
<p class="text-sm opacity-75">
You're about to pay a bitcoin lightning invoice with the following description:
<strong>{invoice.description || "[no description]"}</strong>"
</p>
{/if}
</div>
{:else}
<Scanner onscan={onScan} />
<p class="text-center text-sm opacity-75">
To make a payment, scan a lightning invoice with your camera.
</p>
{/if}
<Modal>
<ModalBody>
<ModalHeader>
{#snippet title()}
<div>Pay with Lightning</div>
{/snippet}
{#snippet info()}
Use your Nostr wallet to send Bitcoin payments over lightning.
{/snippet}
</ModalHeader>
{#if invoice}
<div class="card2 bg-alt flex flex-col gap-2">
{#if $session?.wallet?.type === "webln" && invoice.satoshi === 0}
<p class="text-sm opacity-75">
Uh oh! It looks like your current wallet doesn't support invoices without an amount. See
if you can get a lightning invoice with a pre-set amount.
</p>
{:else}
<FieldInline>
{#snippet label()}
Amount (satoshis)
{/snippet}
{#snippet input()}
<div class="flex flex-grow justify-end">
<label class="input input-bordered flex items-center gap-2">
<Icon icon={Bolt} />
<input
bind:value={sats}
type="number"
class="w-14"
disabled={invoice!.satoshi > 0} />
</label>
</div>
{/snippet}
</FieldInline>
<p class="text-sm opacity-75">
You're about to pay a bitcoin lightning invoice with the following description:
<strong>{invoice.description || "[no description]"}</strong>"
</p>
{/if}
</div>
{:else}
<Scanner onscan={onScan} />
<p class="text-center text-sm opacity-75">
To make a payment, scan a lightning invoice with your camera.
</p>
{/if}
</ModalBody>
<ModalFooter>
<Button class="btn btn-link" onclick={back}>
<Icon icon={AltArrowLeft} />
@@ -108,4 +112,4 @@
Confirm Payment
</Button>
</ModalFooter>
</div>
</Modal>