From 48fffff02a17c303dbf807de140d56af26cae88f Mon Sep 17 00:00:00 2001
From: protom <office@protom.eu>
Date: Wed, 19 Aug 2026 21:06:17 +0200
Subject: [PATCH] feat: send/receive dialogs, qr scanner, history and unlock
 components

---
 src/components/HistoryList.vue                |  77 +++
 src/components/QrCode.vue                     |  29 ++
 src/components/QrScanner.vue                  |  73 +++
 src/components/UnlockForm.vue                 |  99 ++++
 src/components/receive/ReceiveDialog.vue      | 131 +++++
 .../receive/ReceiveLightningDialog.vue        | 457 ++++++++++++++++++
 src/components/receive/ReceiveTokenDialog.vue | 360 ++++++++++++++
 src/components/send/PayInvoiceDialog.vue      | 424 ++++++++++++++++
 src/components/send/SendDialog.vue            | 129 +++++
 src/components/send/SendTokenDialog.vue       | 330 +++++++++++++
 10 files changed, 2109 insertions(+)
 create mode 100644 src/components/HistoryList.vue
 create mode 100644 src/components/QrCode.vue
 create mode 100644 src/components/QrScanner.vue
 create mode 100644 src/components/UnlockForm.vue
 create mode 100644 src/components/receive/ReceiveDialog.vue
 create mode 100644 src/components/receive/ReceiveLightningDialog.vue
 create mode 100644 src/components/receive/ReceiveTokenDialog.vue
 create mode 100644 src/components/send/PayInvoiceDialog.vue
 create mode 100644 src/components/send/SendDialog.vue
 create mode 100644 src/components/send/SendTokenDialog.vue

diff --git a/src/components/HistoryList.vue b/src/components/HistoryList.vue
new file mode 100644
index 0000000..45852d5
--- /dev/null
+++ b/src/components/HistoryList.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+// Unified activity history: renders the activity store's events newest
+// first, one row per wallet action. Self-contained - designed to sit inside
+// a q-expansion-item on the home page.
+import { computed } from 'vue';
+import { useActivityStore } from '@/stores/activity';
+import type { ActivityKind } from '@/lnurlcash/storage';
+
+const activity = useActivityStore();
+
+// the store already prepends new events, so the array is newest-first
+const events = computed(() => activity.events);
+
+const KIND_ICONS: Record<ActivityKind, string> = {
+  mint: 'arrow_downward',
+  receive: 'south_west',
+  melt: 'north_east',
+  split: 'shuffle',
+  combine: 'shuffle',
+  spent: 'check',
+  deleted: 'delete',
+  transfer: 'swap_horiz',
+};
+
+const KIND_COLORS: Record<ActivityKind, string> = {
+  mint: 'positive',
+  receive: 'positive',
+  melt: 'primary',
+  split: 'info',
+  combine: 'info',
+  spent: 'grey-5',
+  deleted: 'negative',
+  transfer: 'primary',
+};
+
+const iconFor = (kind: ActivityKind): string => KIND_ICONS[kind];
+const colorFor = (kind: ActivityKind): string => KIND_COLORS[kind];
+
+const relativeTime = (timestamp: number): string => {
+  const elapsed = Date.now() - timestamp;
+  const minutes = Math.floor(elapsed / 60_000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes} min ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours} h ago`;
+  const days = Math.floor(hours / 24);
+  if (days === 1) return 'yesterday';
+  if (days < 7) return `${days} days ago`;
+  return new Date(timestamp).toLocaleDateString();
+};
+</script>
+
+<template>
+  <q-list v-if="events.length" class="history-list">
+    <q-item v-for="event in events" :key="event.id" class="q-px-sm">
+      <q-item-section avatar top>
+        <q-icon :name="iconFor(event.kind)" :color="colorFor(event.kind)" size="20px" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label class="text-grey-3">{{ event.message }}</q-item-label>
+        <q-item-label caption class="text-grey-6">
+          {{ relativeTime(event.createdAt) }}
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+  <div v-else class="column items-center q-pa-lg text-grey-6">
+    <q-icon name="history" size="32px" class="q-mb-sm" />
+    <div>No activity yet</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.history-list {
+  background: transparent;
+}
+</style>
diff --git a/src/components/QrCode.vue b/src/components/QrCode.vue
new file mode 100644
index 0000000..c5a8d1c
--- /dev/null
+++ b/src/components/QrCode.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+// QR display for invoices and bearer notes. White frame matches the
+// lnurl-wallet design language (scanners need the quiet zone).
+import QrcodeVue from 'qrcode.vue';
+
+withDefaults(
+  defineProps<{
+    value: string;
+    size?: number;
+  }>(),
+  { size: 220 },
+);
+</script>
+
+<template>
+  <div class="qr-frame">
+    <qrcode-vue :value="value" :size="size" level="M" render-as="svg" />
+  </div>
+</template>
+
+<style scoped>
+.qr-frame {
+  display: inline-block;
+  padding: 6px;
+  background: #ffffff;
+  border-radius: 8px;
+  line-height: 0;
+}
+</style>
diff --git a/src/components/QrScanner.vue b/src/components/QrScanner.vue
new file mode 100644
index 0000000..4f35253
--- /dev/null
+++ b/src/components/QrScanner.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// Camera QR scanner (in-browser, works in PWA and Capacitor WebView via
+// getUserMedia). Emits `decode` with the scanned text; parent decides what
+// the payload means (invoice, note, address...).
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import QrScanner from '@agicash/qr-scanner';
+
+const emit = defineEmits<{ decode: [text: string]; error: [message: string] }>();
+
+const videoEl = ref<HTMLVideoElement | null>(null);
+const starting = ref(true);
+let scanner: QrScanner | null = null;
+
+onMounted(async () => {
+  try {
+    if (!(await QrScanner.hasCamera())) {
+      emit('error', 'No camera available on this device.');
+      starting.value = false;
+      return;
+    }
+    if (!videoEl.value) return;
+    scanner = new QrScanner(
+      videoEl.value,
+      (result) => emit('decode', result.data),
+      { highlightScanRegion: true },
+    );
+    await scanner.start();
+    starting.value = false;
+  } catch (err) {
+    starting.value = false;
+    emit(
+      'error',
+      err instanceof Error ? err.message : 'Camera access failed.',
+    );
+  }
+});
+
+onBeforeUnmount(() => {
+  scanner?.destroy();
+  scanner = null;
+});
+</script>
+
+<template>
+  <div class="scanner-box">
+    <video ref="videoEl" muted playsinline />
+    <div v-if="starting" class="scanner-overlay">Starting camera…</div>
+  </div>
+</template>
+
+<style scoped>
+.scanner-box {
+  position: relative;
+  width: 100%;
+  max-width: 320px;
+  margin: 0 auto;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #001616;
+}
+video {
+  width: 100%;
+  display: block;
+}
+.scanner-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #55ffcc;
+}
+</style>
diff --git a/src/components/UnlockForm.vue b/src/components/UnlockForm.vue
new file mode 100644
index 0000000..9b6a355
--- /dev/null
+++ b/src/components/UnlockForm.vue
@@ -0,0 +1,99 @@
+<template>
+  <q-card class="sattle-card unlock-card q-pa-lg">
+    <div class="column items-center q-mb-md">
+      <q-icon name="lock" color="primary" size="40px" />
+      <div class="text-h6 q-mt-sm">Wallet locked</div>
+      <div class="text-caption text-grey-5">Enter your password to unlock.</div>
+    </div>
+
+    <q-input
+      v-model="password"
+      :type="showPassword ? 'text' : 'password'"
+      dark
+      outlined
+      color="primary"
+      label="Password"
+      autocomplete="current-password"
+      :error="error !== ''"
+      :error-message="error"
+      autofocus
+      @keyup.enter="unlock"
+    >
+      <template #append>
+        <q-icon
+          :name="showPassword ? 'visibility_off' : 'visibility'"
+          class="cursor-pointer"
+          @click="showPassword = !showPassword"
+        />
+      </template>
+    </q-input>
+
+    <q-btn
+      unelevated
+      color="primary"
+      text-color="dark"
+      label="Unlock"
+      class="full-width q-mt-md"
+      :loading="busy"
+      :disable="password === ''"
+      @click="unlock"
+    />
+
+    <div class="text-center q-mt-md">
+      <q-btn
+        flat
+        dense
+        no-caps
+        size="sm"
+        color="grey-5"
+        label="Restore a different wallet"
+        @click="router.push('/welcome')"
+      />
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useWalletStore } from '@/stores/wallet';
+
+const emit = defineEmits<{ unlocked: [] }>();
+
+const wallet = useWalletStore();
+const router = useRouter();
+
+const password = ref('');
+const showPassword = ref(false);
+const busy = ref(false);
+const error = ref('');
+
+const unlock = async () => {
+  if (busy.value || password.value === '') return;
+  busy.value = true;
+  error.value = '';
+  try {
+    await wallet.unlock(password.value);
+    password.value = '';
+    emit('unlocked');
+  } catch (err) {
+    // a wrong password fails WebCrypto's auth-tag check with a generic
+    // DOMException - anything but the store's own "no wallet" signal means
+    // the password simply didn't fit
+    error.value =
+      err instanceof Error && err.message === 'No wallet on this device.'
+        ? err.message
+        : 'Wrong password.';
+  } finally {
+    busy.value = false;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.unlock-card {
+  width: 100%;
+  max-width: 360px;
+}
+</style>
diff --git a/src/components/receive/ReceiveDialog.vue b/src/components/receive/ReceiveDialog.vue
new file mode 100644
index 0000000..1d718ad
--- /dev/null
+++ b/src/components/receive/ReceiveDialog.vue
@@ -0,0 +1,131 @@
+<template>
+  <q-dialog
+    :model-value="modelValue"
+    position="bottom"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <q-card class="sattle-card receive-chooser q-pb-md">
+      <q-card-section class="row items-center q-pb-sm">
+        <div class="col text-h6">Receive</div>
+        <q-btn v-close-popup flat round dense icon="close" color="primary" />
+      </q-card-section>
+
+      <q-card-section class="q-pt-sm">
+        <div class="q-gutter-y-md">
+          <div
+            class="action-row"
+            role="button"
+            tabindex="0"
+            @click="open('lightning')"
+            @keydown.enter.prevent="open('lightning')"
+            @keydown.space.prevent="open('lightning')"
+          >
+            <div class="row items-center no-wrap">
+              <div class="icon-circle">
+                <q-icon name="flash_on" color="dark" size="24px" />
+              </div>
+              <div class="col q-ml-md">
+                <div class="text-body1 text-weight-medium">Lightning</div>
+                <div class="text-caption text-grey-5">
+                  Create an invoice to receive from any Lightning wallet
+                </div>
+              </div>
+              <q-icon name="chevron_right" color="grey-5" size="24px" />
+            </div>
+          </div>
+
+          <div
+            class="action-row"
+            role="button"
+            tabindex="0"
+            @click="open('token')"
+            @keydown.enter.prevent="open('token')"
+            @keydown.space.prevent="open('token')"
+          >
+            <div class="row items-center no-wrap">
+              <div class="icon-circle">
+                <q-icon name="receipt_long" color="dark" size="24px" />
+              </div>
+              <div class="col q-ml-md">
+                <div class="text-body1 text-weight-medium">Bearer note</div>
+                <div class="text-caption text-grey-5">
+                  Paste or scan a note someone sent you
+                </div>
+              </div>
+              <q-icon name="chevron_right" color="grey-5" size="24px" />
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+
+  <receive-lightning-dialog v-model="showLightning" @received="onReceived" />
+  <receive-token-dialog v-model="showToken" @received="onReceived" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import ReceiveLightningDialog from './ReceiveLightningDialog.vue';
+import ReceiveTokenDialog from './ReceiveTokenDialog.vue';
+
+defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  received: [];
+}>();
+
+const showLightning = ref(false);
+const showToken = ref(false);
+
+const open = (which: 'lightning' | 'token') => {
+  emit('update:modelValue', false);
+  if (which === 'lightning') {
+    showLightning.value = true;
+  } else {
+    showToken.value = true;
+  }
+};
+
+const onReceived = () => {
+  emit('received');
+};
+</script>
+
+<style lang="scss" scoped>
+.receive-chooser {
+  width: 100%;
+  max-width: 480px;
+  border-radius: 16px 16px 0 0;
+}
+
+.action-row {
+  background: rgba(85, 255, 204, 0.05);
+  border: 1px solid rgba(85, 255, 204, 0.15);
+  border-radius: 12px;
+  padding: 14px 16px;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.action-row:hover,
+.action-row:focus-visible {
+  background: rgba(85, 255, 204, 0.1);
+  border-color: rgba(85, 255, 204, 0.35);
+  outline: none;
+}
+
+.icon-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: #55ffcc;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/components/receive/ReceiveLightningDialog.vue b/src/components/receive/ReceiveLightningDialog.vue
new file mode 100644
index 0000000..0ce85d9
--- /dev/null
+++ b/src/components/receive/ReceiveLightningDialog.vue
@@ -0,0 +1,457 @@
+<template>
+  <q-dialog
+    :model-value="modelValue"
+    position="bottom"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <q-card class="sattle-card receive-dialog q-pb-md">
+      <q-card-section class="row items-center q-pb-sm">
+        <q-btn
+          v-if="step === 'invoice'"
+          flat
+          round
+          dense
+          icon="arrow_back"
+          color="primary"
+          aria-label="Back"
+          @click="step = 'form'"
+        />
+        <div class="col text-h6 q-ml-sm">Receive Lightning</div>
+        <q-btn v-close-popup flat round dense icon="close" color="primary" />
+      </q-card-section>
+
+      <!-- step 1: amount + mint -->
+      <q-card-section v-if="step === 'form'" class="q-pt-sm">
+        <q-input
+          v-model.number="amountSats"
+          type="number"
+          min="1"
+          step="1"
+          dark
+          outlined
+          color="primary"
+          label="Amount"
+          suffix="sats"
+          class="q-mb-md"
+        />
+
+        <q-select
+          v-model="mintChoice"
+          :options="mintOptions"
+          option-label="label"
+          option-value="value"
+          emit-value
+          map-options
+          dark
+          outlined
+          color="primary"
+          label="Mint"
+          class="q-mb-md"
+        />
+
+        <q-input
+          v-if="mintChoice === CUSTOM_MINT"
+          v-model="customMint"
+          dark
+          outlined
+          color="primary"
+          label="Mint address"
+          placeholder="mint@example.com or lnurl1…"
+          autocomplete="off"
+          autocapitalize="off"
+          spellcheck="false"
+          class="q-mb-md"
+        />
+
+        <div v-if="formError" class="text-negative q-mb-md">{{ formError }}</div>
+
+        <q-btn
+          unelevated
+          color="primary"
+          text-color="dark"
+          label="Create invoice"
+          class="full-width"
+          :loading="preparing"
+          :disable="!formValid"
+          @click="createInvoice"
+        />
+      </q-card-section>
+
+      <!-- step 2: invoice + waiting -->
+      <q-card-section v-else-if="step === 'invoice' && prepared" class="q-pt-sm">
+        <div class="column items-center q-mb-md">
+          <qr-code :value="prepared.invoice" :size="220" />
+          <q-btn
+            flat
+            dense
+            no-caps
+            icon="content_copy"
+            color="primary"
+            label="Copy invoice"
+            class="q-mt-sm"
+            @click="copyInvoice"
+          />
+        </div>
+
+        <div class="text-center q-mb-md">
+          <div class="text-body1">
+            You receive <strong>{{ netSats.toLocaleString() }} sats</strong>
+          </div>
+          <div class="text-caption text-grey-5">
+            Invoice amount: {{ grossSats.toLocaleString() }} sats
+            <span v-if="feeSats > 0">(includes a {{ feeSats.toLocaleString() }} sat mint fee)</span>
+          </div>
+        </div>
+
+        <div v-if="claimError" class="q-mb-md">
+          <q-banner class="sattle-card text-negative" rounded>
+            <template #avatar>
+              <q-icon name="error" color="negative" />
+            </template>
+            {{ claimError }}
+          </q-banner>
+          <q-btn
+            unelevated
+            color="primary"
+            text-color="dark"
+            label="Try again"
+            class="full-width q-mt-sm"
+            @click="retryClaim"
+          />
+        </div>
+
+        <div v-else-if="waiting" class="column items-center q-gutter-sm q-mb-sm">
+          <q-spinner color="primary" size="32px" />
+          <div class="text-body2 text-grey-5">Waiting for payment…</div>
+          <q-btn flat no-caps dense color="grey-5" label="Stop waiting" @click="stopWaiting" />
+        </div>
+
+        <div v-else class="column items-center q-gutter-sm">
+          <div class="text-caption text-grey-5 text-center">
+            Not watching right now — if the invoice gets paid, the sats are still
+            claimed into your wallet automatically.
+          </div>
+          <q-btn
+            outline
+            no-caps
+            color="primary"
+            label="Keep waiting for payment"
+            @click="resumeWaiting"
+          />
+        </div>
+      </q-card-section>
+
+      <!-- step 3: success -->
+      <q-card-section v-else class="q-pt-sm">
+        <div class="column items-center text-center q-gutter-sm q-mb-md">
+          <q-icon name="check_circle" color="positive" size="56px" />
+          <div class="text-h5 text-weight-bold">
+            Received {{ receivedSats.toLocaleString() }} sats
+          </div>
+          <div class="text-body2 text-grey-5">from {{ receivedServer }}</div>
+        </div>
+
+        <q-banner v-if="rotationWarning" class="sattle-card text-warning q-mb-md" rounded>
+          <template #avatar>
+            <q-icon name="warning" color="warning" />
+          </template>
+          The note is in your wallet, but it could not be fully secured yet — the
+          sender may still hold a copy. You can secure it later.
+        </q-banner>
+
+        <q-btn
+          v-close-popup
+          unelevated
+          color="primary"
+          text-color="dark"
+          label="Done"
+          class="full-width"
+        />
+      </q-card-section>
+    </q-card>
+
+    <!-- first-contact mint trust prompt -->
+    <q-dialog v-model="showTrust" persistent>
+      <q-card class="sattle-card trust-card q-pa-lg">
+        <div class="text-h6 q-mb-sm">New mint</div>
+        <div class="text-body2 q-mb-md">
+          This payment came from a mint you have not used before:
+          <strong>{{ trustServer }}</strong>
+          <template v-if="trustNodeAlias"> ({{ trustNodeAlias }})</template>
+        </div>
+        <div class="text-caption text-grey-5 q-mb-md">
+          Trusting saves the mint so it is offered next time. You can manage trusted
+          mints in Settings.
+        </div>
+        <div class="row q-gutter-sm justify-end">
+          <q-btn flat no-caps color="grey-5" label="Just this once" @click="skipTrust" />
+          <q-btn
+            unelevated
+            no-caps
+            color="primary"
+            text-color="dark"
+            label="Trust this mint"
+            @click="trustMint"
+          />
+        </div>
+      </q-card>
+    </q-dialog>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { Notify, copyToClipboard } from 'quasar';
+
+import QrCode from '../QrCode.vue';
+import { prepareMint, claimMintedNote } from '@/lnurlcash/ops';
+import type { ClaimedNote, PreparedMint } from '@/lnurlcash/ops';
+import type { NewBearer } from '@/lnurlcash/types';
+import { msatToSats, satsToMsat, floorMsatToSat, MSAT_PER_SAT } from '@/lnurlcash/units';
+import { mintAddressCacheInfo } from '@/lnurlcash/trustedMints';
+import { useWalletStore } from '@/stores/wallet';
+import { useMintsStore } from '@/stores/mints';
+import { useActivityStore } from '@/stores/activity';
+
+const props = defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  received: [];
+}>();
+
+const wallet = useWalletStore();
+const mints = useMintsStore();
+const activity = useActivityStore();
+
+const CUSTOM_MINT = '__custom__';
+
+// whole-sat display for received amounts (msat remainder rounded down, per
+// units.ts's floorMsatToSat)
+const displaySats = (msat: number): number => floorMsatToSat(msat) / MSAT_PER_SAT;
+
+const errorMessage = (err: unknown): string =>
+  err instanceof Error ? err.message : 'Something went wrong.';
+
+type Step = 'form' | 'invoice' | 'success';
+const step = ref<Step>('form');
+
+// ---- form ----
+const amountSats = ref<number | null>(null);
+const mintChoice = ref('');
+const customMint = ref('');
+const preparing = ref(false);
+const formError = ref('');
+
+type MintOption = { label: string; value: string };
+
+const mintOptions = computed<MintOption[]>(() => {
+  const options: MintOption[] = [];
+  const seen = new Set<string>();
+  for (const mint of mints.mints) {
+    const address = mint.username ? `${mint.username}@${mint.server}` : `@${mint.server}`;
+    if (seen.has(address)) continue;
+    seen.add(address);
+    const label = mint.nodeAlias ? `${address} (${mint.nodeAlias})` : address;
+    options.push({ label, value: address });
+  }
+  for (const publicMint of mints.PUBLIC_MINTS) {
+    if (seen.has(publicMint)) continue;
+    seen.add(publicMint);
+    options.push({ label: publicMint, value: publicMint });
+  }
+  options.push({ label: 'Another mint…', value: CUSTOM_MINT });
+  return options;
+});
+
+const defaultChoice = (): string => {
+  const options = mintOptions.value;
+  if (mints.defaultMint) {
+    const match = options.find((o) => o.value.endsWith(`@${mints.defaultMint}`));
+    if (match) return match.value;
+  }
+  const first = options[0];
+  return first && first.value !== CUSTOM_MINT ? first.value : CUSTOM_MINT;
+};
+
+const formValid = computed(() => {
+  if (!Number.isInteger(amountSats.value) || (amountSats.value ?? 0) < 1) return false;
+  return mintChoice.value === CUSTOM_MINT ? customMint.value.trim() !== '' : mintChoice.value !== '';
+});
+
+const createInvoice = async () => {
+  const sats = amountSats.value;
+  if (!sats || preparing.value) return;
+  preparing.value = true;
+  formError.value = '';
+  try {
+    const mintInput = mintChoice.value === CUSTOM_MINT ? customMint.value.trim() : mintChoice.value;
+    const preparedMint = await prepareMint(mintInput, satsToMsat(sats));
+    if (!preparedMint.verifyUrl) {
+      // without a verify URL the payment can never be auto-claimed - showing
+      // a payable invoice here would strand the sats at the mint
+      formError.value =
+        'This mint does not support automatic claiming, so sattle cannot receive from it. Choose a different mint.';
+      return;
+    }
+    prepared.value = preparedMint;
+    claimRun = null;
+    claimError.value = '';
+    step.value = 'invoice';
+    beginClaim();
+  } catch (err) {
+    formError.value = errorMessage(err);
+    Notify.create({ type: 'negative', message: formError.value });
+  } finally {
+    preparing.value = false;
+  }
+};
+
+// ---- invoice ----
+const prepared = ref<PreparedMint | null>(null);
+const waiting = ref(false);
+const claimError = ref('');
+// single in-flight claim; "stop waiting" only detaches the UI from it - the
+// claim itself always runs to completion so a settled payment is never
+// abandoned unclaimed
+let claimRun: Promise<void> | null = null;
+
+const grossSats = computed(() => (prepared.value ? msatToSats(prepared.value.grossMsat) : 0));
+const netSats = computed(() =>
+  prepared.value ? msatToSats(prepared.value.expectedNoteValueMsat) : 0,
+);
+const feeSats = computed(() => grossSats.value - netSats.value);
+
+const copyInvoice = async () => {
+  if (!prepared.value) return;
+  try {
+    await copyToClipboard(prepared.value.invoice);
+    Notify.create({ type: 'positive', message: 'Invoice copied.' });
+  } catch (err) {
+    Notify.create({ type: 'negative', message: errorMessage(err) });
+  }
+};
+
+const beginClaim = () => {
+  if (!prepared.value || claimRun) return;
+  waiting.value = true;
+  claimError.value = '';
+  const current = prepared.value;
+  claimRun = (async () => {
+    try {
+      const claimed = await claimMintedNote(current);
+      await onClaimed(claimed, current);
+    } catch (err) {
+      claimError.value = `${errorMessage(err)} The invoice stays valid — you can try again.`;
+      Notify.create({ type: 'negative', message: errorMessage(err) });
+    } finally {
+      waiting.value = false;
+    }
+  })();
+};
+
+// after a failed claim the run is over - allow a fresh attempt
+const retryClaim = () => {
+  claimRun = null;
+  beginClaim();
+};
+
+const stopWaiting = () => {
+  waiting.value = false;
+};
+
+const resumeWaiting = () => {
+  if (claimRun) waiting.value = true;
+};
+
+// ---- success ----
+const receivedSats = ref(0);
+const receivedServer = ref('');
+const rotationWarning = ref('');
+
+const onClaimed = async (claimed: ClaimedNote, from: PreparedMint) => {
+  const server = from.server;
+  const wasTrusted = mints.isTrusted(server);
+  const notes: NewBearer[] = claimed.possibleCopy
+    ? [claimed.note, claimed.possibleCopy]
+    : [claimed.note];
+  await wallet.addBearers(notes);
+  receivedSats.value = displaySats(claimed.note.amount);
+  receivedServer.value = server;
+  rotationWarning.value = claimed.rotationError ?? '';
+  activity.log('mint', `Received ${receivedSats.value.toLocaleString()} sats from ${server} over Lightning.`);
+  const nodeInfo = mintAddressCacheInfo(from.nodeInfo, from.username);
+  if (nodeInfo) mints.cacheNodeInfo(server, nodeInfo);
+  Notify.create({
+    type: 'positive',
+    message: `Received ${receivedSats.value.toLocaleString()} sats.`,
+  });
+  emit('received');
+  if (props.modelValue) step.value = 'success';
+  if (!wasTrusted && claimed.note.mintPubkey) {
+    trustServer.value = server;
+    trustPubkey.value = claimed.note.mintPubkey;
+    trustNodeAlias.value = from.nodeInfo?.nodeAlias ?? '';
+    showTrust.value = true;
+  }
+};
+
+// ---- trust prompt ----
+const showTrust = ref(false);
+const trustServer = ref('');
+const trustPubkey = ref('');
+const trustNodeAlias = ref('');
+
+const trustMint = () => {
+  try {
+    mints.trust(trustServer.value, trustPubkey.value, {
+      ...(trustNodeAlias.value ? { nodeAlias: trustNodeAlias.value } : {}),
+    });
+    Notify.create({ type: 'positive', message: 'Mint trusted.' });
+  } catch (err) {
+    Notify.create({ type: 'negative', message: errorMessage(err) });
+  } finally {
+    showTrust.value = false;
+  }
+};
+
+const skipTrust = () => {
+  showTrust.value = false;
+  Notify.create({
+    type: 'warning',
+    message: 'Note added, but this mint is not in your trusted list yet — you can review it in Settings.',
+  });
+};
+
+// fresh form every time the dialog opens; a claim already in flight keeps
+// running in the background regardless
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!open) return;
+    step.value = 'form';
+    amountSats.value = null;
+    customMint.value = '';
+    mintChoice.value = defaultChoice();
+    preparing.value = false;
+    formError.value = '';
+    prepared.value = null;
+    waiting.value = false;
+    rotationWarning.value = '';
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.receive-dialog {
+  width: 100%;
+  max-width: 480px;
+  border-radius: 16px 16px 0 0;
+}
+
+.trust-card {
+  width: 100%;
+  max-width: 400px;
+}
+</style>
diff --git a/src/components/receive/ReceiveTokenDialog.vue b/src/components/receive/ReceiveTokenDialog.vue
new file mode 100644
index 0000000..2f7b662
--- /dev/null
+++ b/src/components/receive/ReceiveTokenDialog.vue
@@ -0,0 +1,360 @@
+<template>
+  <q-dialog
+    :model-value="modelValue"
+    position="bottom"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <q-card class="sattle-card receive-dialog q-pb-md">
+      <q-card-section class="row items-center q-pb-sm">
+        <div class="col text-h6">Receive bearer note</div>
+        <q-btn v-close-popup flat round dense icon="close" color="primary" />
+      </q-card-section>
+
+      <!-- input -->
+      <q-card-section v-if="step === 'input'" class="q-pt-sm">
+        <qr-scanner
+          v-if="scanning"
+          class="q-mb-md"
+          @decode="onScan"
+          @error="onScanError"
+        />
+
+        <q-input
+          v-model="input"
+          type="textarea"
+          rows="3"
+          dark
+          outlined
+          color="primary"
+          label="Bearer note"
+          placeholder="lnurlw://… or lnurl1…"
+          autocomplete="off"
+          autocapitalize="off"
+          spellcheck="false"
+          :error="input.trim() !== '' && !inputValid"
+          error-message="Not a valid bearer note."
+          class="q-mb-sm"
+        />
+
+        <q-banner v-if="errorKind !== ''" class="sattle-card text-negative q-mb-sm" rounded>
+          <template #avatar>
+            <q-icon :name="errorIcon" color="negative" />
+          </template>
+          {{ errorText }}
+        </q-banner>
+
+        <div class="row q-gutter-sm q-mt-sm">
+          <q-btn
+            outline
+            no-caps
+            color="primary"
+            :icon="scanning ? 'keyboard' : 'qr_code_scanner'"
+            :label="scanning ? 'Paste instead' : 'Scan'"
+            @click="scanning = !scanning"
+          />
+          <q-btn
+            unelevated
+            no-caps
+            color="primary"
+            text-color="dark"
+            label="Receive"
+            class="col"
+            :loading="busy"
+            :disable="input.trim() === '' || !inputValid"
+            @click="receive"
+          />
+        </div>
+      </q-card-section>
+
+      <!-- success -->
+      <q-card-section v-else class="q-pt-sm">
+        <div class="column items-center text-center q-gutter-sm q-mb-md">
+          <q-icon name="check_circle" color="positive" size="56px" />
+          <div class="text-h5 text-weight-bold">
+            Received {{ receivedSats.toLocaleString() }} sats
+          </div>
+          <div class="text-body2 text-grey-5">from {{ receivedServer }}</div>
+        </div>
+
+        <q-banner v-if="unverifiedNote" class="sattle-card text-info q-mb-md" rounded>
+          <template #avatar>
+            <q-icon name="info" color="info" />
+          </template>
+          The mint could not be reached, so the note is stored unconfirmed at the
+          sender's declared amount. Refresh it later to confirm.
+        </q-banner>
+
+        <q-banner v-if="rotationWarning" class="sattle-card text-warning q-mb-md" rounded>
+          <template #avatar>
+            <q-icon name="warning" color="warning" />
+          </template>
+          The note is in your wallet, but it could not be fully secured yet — the
+          sender may still hold a copy. You can secure it later.
+        </q-banner>
+
+        <q-btn
+          v-close-popup
+          unelevated
+          color="primary"
+          text-color="dark"
+          label="Done"
+          class="full-width"
+        />
+      </q-card-section>
+    </q-card>
+
+    <!-- first-contact mint trust prompt -->
+    <q-dialog v-model="showTrust" persistent>
+      <q-card class="sattle-card trust-card q-pa-lg">
+        <div class="text-h6 q-mb-sm">New mint</div>
+        <div class="text-body2 q-mb-md">
+          This note came from a mint you have not used before:
+          <strong>{{ trustServer }}</strong>
+        </div>
+        <div class="text-caption text-grey-5 q-mb-md">
+          Trusting saves the mint so it is offered next time. You can manage trusted
+          mints in Settings.
+        </div>
+        <div class="row q-gutter-sm justify-end">
+          <q-btn flat no-caps color="grey-5" label="Just this once" @click="skipTrust" />
+          <q-btn
+            unelevated
+            no-caps
+            color="primary"
+            text-color="dark"
+            label="Trust this mint"
+            @click="trustMint"
+          />
+        </div>
+      </q-card>
+    </q-dialog>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { Notify } from 'quasar';
+import {
+  NoteSpentError,
+  NoteUnknownError,
+  PendingNoteError,
+  isValidNoteInput,
+} from 'lnurlcash-kit';
+
+import QrScanner from '../QrScanner.vue';
+import { receiveBearer } from '@/lnurlcash/ops';
+import type { NewBearer } from '@/lnurlcash/types';
+import { floorMsatToSat, MSAT_PER_SAT } from '@/lnurlcash/units';
+import { useWalletStore } from '@/stores/wallet';
+import { useMintsStore } from '@/stores/mints';
+import { useActivityStore } from '@/stores/activity';
+
+const props = defineProps<{ modelValue: boolean; initialInput?: string }>();
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  received: [];
+}>();
+
+const wallet = useWalletStore();
+const mints = useMintsStore();
+const activity = useActivityStore();
+
+// whole-sat display for received amounts (msat remainder rounded down, per
+// units.ts's floorMsatToSat)
+const displaySats = (msat: number): number => floorMsatToSat(msat) / MSAT_PER_SAT;
+
+const errMsg = (err: unknown): string =>
+  err instanceof Error ? err.message : 'Something went wrong.';
+
+// distinct, jargon-free error states for the definitive service answers
+type ReceiveErrorKind =
+  | 'spent'
+  | 'unknown'
+  | 'pending'
+  | 'duplicate'
+  | 'invalid'
+  | 'generic'
+  | '';
+
+const ERROR_TEXT: Record<Exclude<ReceiveErrorKind, ''>, string> = {
+  spent: 'This note has already been spent.',
+  unknown: "The mint doesn't know this note.",
+  pending: 'This note is locked mid-payment — try again shortly.',
+  duplicate: 'This note is already in your wallet.',
+  invalid: 'Not a valid bearer note.',
+  generic: '',
+};
+
+const ERROR_ICON: Record<Exclude<ReceiveErrorKind, ''>, string> = {
+  spent: 'money_off',
+  unknown: 'help_outline',
+  pending: 'hourglass_top',
+  duplicate: 'content_copy',
+  invalid: 'error_outline',
+  generic: 'error_outline',
+};
+
+const errorText = computed(() =>
+  errorKind.value === 'generic'
+    ? errorMessageText.value
+    : errorKind.value === ''
+      ? ''
+      : ERROR_TEXT[errorKind.value],
+);
+const errorIcon = computed(() =>
+  errorKind.value === '' ? 'error_outline' : ERROR_ICON[errorKind.value],
+);
+
+type Step = 'input' | 'success';
+const step = ref<Step>('input');
+
+const input = ref('');
+const scanning = ref(false);
+const busy = ref(false);
+const errorKind = ref<ReceiveErrorKind>('');
+const errorMessageText = ref('');
+
+const inputValid = computed(() => isValidNoteInput(input.value.trim()));
+
+const clearError = () => {
+  errorKind.value = '';
+  errorMessageText.value = '';
+};
+
+const classifyError = (err: unknown): void => {
+  let kind: Exclude<ReceiveErrorKind, ''>;
+  if (err instanceof NoteSpentError) {
+    kind = 'spent';
+  } else if (err instanceof NoteUnknownError) {
+    kind = 'unknown';
+  } else if (err instanceof PendingNoteError) {
+    kind = 'pending';
+  } else if (err instanceof Error && err.message.includes('already in your wallet')) {
+    kind = 'duplicate';
+  } else if (err instanceof Error && err.message.includes('Not an LNURLcash bearer note')) {
+    kind = 'invalid';
+  } else {
+    kind = 'generic';
+    errorMessageText.value = errMsg(err);
+  }
+  errorKind.value = kind;
+  Notify.create({
+    type: 'negative',
+    message: kind === 'generic' ? errorMessageText.value : ERROR_TEXT[kind],
+  });
+};
+
+// re-entrancy guard: a scanner double-fire or Enter+click landing together
+// must not run two receives for the same note - both would pass the
+// duplicate check before either addBearers landed
+const receive = async () => {
+  const value = input.value.trim();
+  if (busy.value || value === '') return;
+  busy.value = true;
+  clearError();
+  try {
+    const claimed = await receiveBearer(value, wallet.bearers);
+    const note = claimed.note;
+    const server = new URL(note.url).host;
+    const wasTrusted = mints.isTrusted(server);
+    const notes: NewBearer[] = claimed.possibleCopy
+      ? [note, claimed.possibleCopy]
+      : [note];
+    await wallet.addBearers(notes);
+    receivedSats.value = displaySats(note.amount);
+    receivedServer.value = server;
+    unverifiedNote.value = !note.verified;
+    rotationWarning.value = claimed.rotationError ?? '';
+    activity.log(
+      'receive',
+      `Received ${receivedSats.value.toLocaleString()} sats from ${server}.`,
+    );
+    Notify.create({
+      type: 'positive',
+      message: `Received ${receivedSats.value.toLocaleString()} sats.`,
+    });
+    emit('received');
+    scanning.value = false;
+    step.value = 'success';
+    if (!wasTrusted && note.mintPubkey) {
+      trustServer.value = server;
+      trustPubkey.value = note.mintPubkey;
+      showTrust.value = true;
+    }
+  } catch (err) {
+    classifyError(err);
+  } finally {
+    busy.value = false;
+  }
+};
+
+const onScan = (text: string) => {
+  input.value = text;
+  scanning.value = false;
+  void receive();
+};
+
+const onScanError = (message: string) => {
+  scanning.value = false;
+  Notify.create({ type: 'negative', message });
+};
+
+// ---- success ----
+const receivedSats = ref(0);
+const receivedServer = ref('');
+const unverifiedNote = ref(false);
+const rotationWarning = ref('');
+
+// ---- trust prompt ----
+const showTrust = ref(false);
+const trustServer = ref('');
+const trustPubkey = ref('');
+
+const trustMint = () => {
+  try {
+    mints.trust(trustServer.value, trustPubkey.value);
+    Notify.create({ type: 'positive', message: 'Mint trusted.' });
+  } catch (err) {
+    Notify.create({ type: 'negative', message: errMsg(err) });
+  } finally {
+    showTrust.value = false;
+  }
+};
+
+const skipTrust = () => {
+  showTrust.value = false;
+  Notify.create({
+    type: 'warning',
+    message: 'Note added, but this mint is not in your trusted list yet — you can review it in Settings.',
+  });
+};
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!open) return;
+    step.value = 'input';
+    input.value = props.initialInput ?? '';
+    scanning.value = false;
+    busy.value = false;
+    clearError();
+    unverifiedNote.value = false;
+    rotationWarning.value = '';
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.receive-dialog {
+  width: 100%;
+  max-width: 480px;
+  border-radius: 16px 16px 0 0;
+}
+
+.trust-card {
+  width: 100%;
+  max-width: 400px;
+}
+</style>
diff --git a/src/components/send/PayInvoiceDialog.vue b/src/components/send/PayInvoiceDialog.vue
new file mode 100644
index 0000000..74977e1
--- /dev/null
+++ b/src/components/send/PayInvoiceDialog.vue
@@ -0,0 +1,424 @@
+<script setup lang="ts">
+// Pay over Lightning: paste or scan a bolt11 invoice or a Lightning
+// Address, confirm the amount, and the ops engine carves an exact-amount
+// note out of the wallet and pays with it. The four possible outcomes are
+// surfaced as distinct result screens - including the silent-failure case
+// where the funds come back.
+//
+// Fund-safety order when applying the carve: fresh notes are added to the
+// wallet BEFORE consumed inputs are marked spent.
+import { computed, ref, watch } from 'vue';
+import { useQuasar } from 'quasar';
+import { decodeBolt11AmountMsat, isBolt11Invoice, resolveLnurlInput } from 'lnurlcash-kit';
+
+import QrScanner from '@/components/QrScanner.vue';
+import { payWithBearers, UncertainOutcomeError } from '@/lnurlcash/ops';
+import type { CarveResult, PayOutcome } from '@/lnurlcash/ops';
+import type { NewBearer } from '@/lnurlcash/types';
+import { msatToSats, satsToMsat } from '@/lnurlcash/units';
+import { useWalletStore } from '@/stores/wallet';
+import { useActivityStore } from '@/stores/activity';
+
+const props = defineProps<{ modelValue: boolean; initialInput?: string }>();
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  sent: [];
+}>();
+
+const $q = useQuasar();
+const wallet = useWalletStore();
+const activity = useActivityStore();
+
+const toast = (type: 'positive' | 'negative' | 'warning' | 'info', message: string): void => {
+  // guarded: the Notify plugin registration lives in quasar.config, outside
+  // this component's control - a missing registration must not break a flow
+  if (typeof $q.notify === 'function') {
+    $q.notify({ type, message, position: 'top', timeout: 3000 });
+  }
+};
+
+const show = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+});
+
+type Step = 'input' | 'confirm' | 'working' | 'result';
+type TargetKind = 'invoice' | 'address';
+
+type PendingPayment = {
+  kind: TargetKind;
+  input: string;
+  amountMsat: number;
+};
+
+type Result = {
+  outcome: PayOutcome;
+  amountMsat: number;
+};
+
+const step = ref<Step>('input');
+const input = ref('');
+const addressAmountSats = ref('');
+const showScanner = ref(false);
+const inlineError = ref<string | null>(null);
+const stage = ref('');
+const pendingPayment = ref<PendingPayment | null>(null);
+const result = ref<Result | null>(null);
+
+const formatSats = (sats: number): string =>
+  sats.toLocaleString(undefined, { maximumFractionDigits: 3 });
+
+const classify = (value: string): TargetKind | null => {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (isBolt11Invoice(trimmed)) return 'invoice';
+  // resolveLnurlInput also accepts Lightning Addresses, bech32 LNURLs and
+  // lightning= deep links - anything it resolves can be paid
+  if (resolveLnurlInput(trimmed) !== null) return 'address';
+  return null;
+};
+
+const targetKind = computed<TargetKind | null>(() => classify(input.value));
+
+const truncatedInput = computed(() => {
+  const p = pendingPayment.value;
+  if (!p) return '';
+  if (p.kind === 'address') return p.input;
+  return p.input.length > 30 ? `${p.input.slice(0, 18)}…${p.input.slice(-8)}` : p.input;
+});
+
+const resultAmountSats = computed(() =>
+  result.value ? formatSats(msatToSats(result.value.amountMsat)) : '',
+);
+
+const reset = () => {
+  step.value = 'input';
+  input.value = props.initialInput ?? '';
+  addressAmountSats.value = '';
+  showScanner.value = false;
+  inlineError.value = null;
+  stage.value = '';
+  pendingPayment.value = null;
+  result.value = null;
+};
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) reset();
+  },
+);
+
+const onScan = (text: string) => {
+  input.value = text.replace(/^lightning:/i, '').trim();
+  showScanner.value = false;
+};
+
+const onScanError = (message: string) => {
+  showScanner.value = false;
+  toast('negative', message);
+};
+
+const paste = async () => {
+  try {
+    const text = await navigator.clipboard.readText();
+    if (text) input.value = text.trim();
+  } catch {
+    toast('negative', "Couldn't read the clipboard - paste manually.");
+  }
+};
+
+// input -> confirm: classify and validate everything that can be checked
+// before any network call (amount present, within balance)
+const proceed = () => {
+  inlineError.value = null;
+  const value = input.value.trim();
+  if (!value) {
+    inlineError.value = 'Paste an invoice or a Lightning Address first.';
+    return;
+  }
+  const kind = classify(value);
+  if (kind === null) {
+    inlineError.value = "That doesn't look like a Lightning invoice or address.";
+    return;
+  }
+  let amountMsat: number;
+  if (kind === 'invoice') {
+    const decoded = decodeBolt11AmountMsat(value);
+    if (decoded === null || decoded <= 0) {
+      inlineError.value = "This invoice doesn't have an amount, which this wallet can't pay yet.";
+      return;
+    }
+    amountMsat = decoded;
+  } else {
+    const sats = Number(addressAmountSats.value);
+    if (!Number.isInteger(sats) || sats <= 0) {
+      inlineError.value = 'Enter how many sats to send to this address.';
+      return;
+    }
+    amountMsat = satsToMsat(sats);
+  }
+  if (amountMsat > wallet.balanceMsat) {
+    inlineError.value = `That's more than your spendable balance (${formatSats(wallet.balanceSats)} sats).`;
+    return;
+  }
+  pendingPayment.value = { kind, input: value, amountMsat };
+  step.value = 'confirm';
+};
+
+const friendlyError = (err: unknown): string => {
+  const message = err instanceof Error ? err.message : 'Something went wrong.';
+  if (message.startsWith('No mint holds enough')) {
+    return 'Not enough spendable balance to cover that payment.';
+  }
+  return message;
+};
+
+// Applies a carve to the wallet in the only safe order: add the fresh
+// note(s) first, mark the consumed inputs spent after. Returns the wallet
+// id of the carved note (for the exact-match path the note already exists
+// in the wallet, so it is found by url instead of re-added).
+const applyCarve = async (carve: CarveResult): Promise<string> => {
+  const existing = wallet.bearers.find((b) => b.url === carve.note.url);
+  const toAdd: NewBearer[] = [];
+  if (!existing) toAdd.push(carve.note);
+  if (carve.change) toAdd.push(carve.change);
+  const added = toAdd.length > 0 ? await wallet.addBearers(toAdd) : [];
+  for (const consumed of carve.consumed) {
+    await wallet.markSpent(consumed.id);
+  }
+  return existing ? existing.id : added[0].id;
+};
+
+const pay = async () => {
+  const p = pendingPayment.value;
+  if (!p) return;
+  step.value = 'working';
+  stage.value = 'Preparing the exact amount and sending the payment…';
+  try {
+    const payResult = await payWithBearers(
+      wallet.bearers,
+      p.input,
+      p.kind === 'address' ? { amountMsat: p.amountMsat } : {},
+    );
+    stage.value = 'Confirming the result…';
+    const noteId = await applyCarve(payResult.carve);
+    if (payResult.rescuedNote) {
+      await wallet.addBearers([payResult.rescuedNote]);
+    }
+    const sats = formatSats(msatToSats(payResult.amountMsat));
+    if (payResult.outcome === 'settled') {
+      await wallet.markSpent(noteId);
+      activity.log('melt', `Paid ${sats} sats over Lightning.`);
+      toast('positive', `Paid ${sats} sats.`);
+      emit('sent');
+    } else if (payResult.outcome === 'failed-funds-returned') {
+      // the payment never happened and the note is spendable again - it
+      // stays in the wallet, deliberately NOT marked spent
+      activity.log('transfer', `A ${sats} sat payment failed - funds are back in your wallet.`);
+      toast('warning', 'Payment failed - funds are back in your wallet.');
+    } else if (payResult.outcome === 'unknown-still-pending') {
+      await wallet.markSpent(noteId);
+      activity.log('melt', `Payment of ${sats} sats is still in flight - the note is locked.`);
+      emit('sent');
+    } else {
+      // note-already-spent: the mint says the note is gone; nothing was
+      // paid. Lock it locally so it can't be tried again.
+      await wallet.markSpent(noteId);
+      activity.log('spent', `A ${sats} sat note was already spent at the mint.`);
+    }
+    result.value = { outcome: payResult.outcome, amountMsat: payResult.amountMsat };
+    step.value = 'result';
+  } catch (err) {
+    if (err instanceof UncertainOutcomeError) {
+      await wallet.addBearers(err.possibleOutputs);
+      activity.log(
+        'transfer',
+        'A payment preparation could not be confirmed - possible notes stored unverified.',
+      );
+      inlineError.value =
+        "Couldn't confirm with the mint. Your original notes are untouched, and the possible new notes are stored unverified - refresh your wallet later to reconcile.";
+      toast('warning', 'Payment preparation uncertain - see the notice in the dialog.');
+    } else {
+      inlineError.value = friendlyError(err);
+      toast('negative', inlineError.value);
+    }
+    step.value = 'input';
+  }
+};
+
+const closeResult = () => {
+  show.value = false;
+};
+</script>
+
+<template>
+  <q-dialog
+    v-model="show"
+    position="bottom"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+    :persistent="step === 'working'"
+  >
+    <q-card class="sattle-card drawer-card full-width">
+      <q-card-section class="row items-center q-pb-sm">
+        <q-btn
+          v-close-popup
+          flat
+          round
+          dense
+          icon="close"
+          color="primary"
+          aria-label="Close"
+          :disable="step === 'working'"
+        />
+        <div class="col text-center">
+          <span class="text-h6 text-primary">Pay with Lightning</span>
+        </div>
+        <div style="width: 40px" />
+      </q-card-section>
+
+      <!-- step 1: universal input -->
+      <q-card-section v-if="step === 'input'" class="q-pa-md q-pt-sm">
+        <q-input
+          v-model="input"
+          type="textarea"
+          autogrow
+          outlined
+          color="primary"
+          label="Invoice or Lightning Address"
+          placeholder="lnbc1… or you@host.com"
+        />
+        <div class="row q-gutter-sm q-mt-sm">
+          <q-btn flat dense color="primary" icon="content_paste" label="Paste" @click="paste" />
+          <q-btn
+            flat
+            dense
+            color="primary"
+            icon="qr_code_scanner"
+            :label="showScanner ? 'Close scanner' : 'Scan'"
+            @click="showScanner = !showScanner"
+          />
+        </div>
+        <QrScanner v-if="showScanner" class="q-mt-md" @decode="onScan" @error="onScanError" />
+        <q-input
+          v-if="targetKind === 'address'"
+          v-model="addressAmountSats"
+          class="q-mt-md"
+          type="number"
+          min="1"
+          step="1"
+          outlined
+          color="primary"
+          label="Amount (sats)"
+        />
+        <q-banner v-if="inlineError" dense class="bg-negative text-white q-mt-md rounded-borders">
+          {{ inlineError }}
+        </q-banner>
+        <div class="row justify-end q-gutter-sm q-mt-lg">
+          <q-btn v-close-popup flat label="Cancel" color="grey-5" />
+          <q-btn
+            unelevated
+            color="primary"
+            text-color="dark"
+            label="Continue"
+            :disable="!input.trim()"
+            @click="proceed"
+          />
+        </div>
+      </q-card-section>
+
+      <!-- step 2: confirm -->
+      <q-card-section v-else-if="step === 'confirm'" class="q-pa-md q-pt-sm">
+        <q-list dense>
+          <q-item>
+            <q-item-section>
+              <q-item-label caption class="text-grey-5">Amount</q-item-label>
+              <q-item-label class="text-h6 text-primary">
+                {{ pendingPayment ? formatSats(msatToSats(pendingPayment.amountMsat)) : '' }} sats
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label caption class="text-grey-5">To</q-item-label>
+              <q-item-label class="text-grey-3" style="word-break: break-all">
+                {{ truncatedInput }}
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+        <div class="text-caption text-grey-5 q-mt-md">
+          If the mint charges a fee, it comes out of your change - you pay exactly the amount
+          shown.
+        </div>
+        <div class="row justify-end q-gutter-sm q-mt-lg">
+          <q-btn flat label="Back" color="grey-5" @click="step = 'input'" />
+          <q-btn
+            unelevated
+            color="primary"
+            text-color="dark"
+            label="Pay now"
+            @click="pay"
+          />
+        </div>
+      </q-card-section>
+
+      <!-- step 3: in flight -->
+      <q-card-section v-else-if="step === 'working'" class="q-pa-md q-pt-sm column items-center">
+        <q-spinner-dots size="48px" color="primary" class="q-my-md" />
+        <div class="text-body1 text-primary">{{ stage }}</div>
+        <div class="text-caption text-grey-5 q-mt-sm text-center">
+          Confirming a payment can take up to a couple of minutes - please keep this open.
+        </div>
+        <q-linear-progress indeterminate color="primary" class="q-mt-lg full-width" />
+      </q-card-section>
+
+      <!-- step 4: outcome -->
+      <q-card-section v-else class="q-pa-md q-pt-sm column items-center">
+        <template v-if="result?.outcome === 'settled'">
+          <q-icon name="check_circle" color="positive" size="64px" class="q-my-md" />
+          <div class="text-h6 text-primary">Paid {{ resultAmountSats }} sats</div>
+          <div class="text-caption text-grey-5 q-mt-sm">The payment went through.</div>
+        </template>
+        <template v-else-if="result?.outcome === 'failed-funds-returned'">
+          <q-icon name="warning" color="warning" size="64px" class="q-my-md" />
+          <div class="text-h6 text-warning">Payment failed</div>
+          <div class="text-caption text-grey-5 q-mt-sm text-center">
+            Nothing was paid - the funds are back in your wallet.
+          </div>
+        </template>
+        <template v-else-if="result?.outcome === 'unknown-still-pending'">
+          <q-icon name="schedule" color="info" size="64px" class="q-my-md" />
+          <div class="text-h6 text-info">Payment still in flight</div>
+          <div class="text-caption text-grey-5 q-mt-sm text-center">
+            The note is locked - check later to see whether the payment completed.
+          </div>
+        </template>
+        <template v-else>
+          <q-icon name="error_outline" color="negative" size="64px" class="q-my-md" />
+          <div class="text-h6 text-negative">Note already spent</div>
+          <div class="text-caption text-grey-5 q-mt-sm text-center">
+            The note for this payment was already spent - nothing was paid.
+          </div>
+        </template>
+        <q-btn
+          unelevated
+          color="primary"
+          text-color="dark"
+          label="Done"
+          class="q-mt-lg full-width"
+          @click="closeResult"
+        />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.drawer-card {
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  padding-bottom: 16px;
+}
+</style>
diff --git a/src/components/send/SendDialog.vue b/src/components/send/SendDialog.vue
new file mode 100644
index 0000000..e4d75f4
--- /dev/null
+++ b/src/components/send/SendDialog.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+// Send chooser: a bottom sheet offering the two ways to send - hand over a
+// bearer note, or pay over Lightning. The actual flows live in the child
+// dialogs; this component just routes to them and re-emits `sent`.
+import { computed, ref } from 'vue';
+import SendTokenDialog from './SendTokenDialog.vue';
+import PayInvoiceDialog from './PayInvoiceDialog.vue';
+
+const props = defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  sent: [];
+}>();
+
+const show = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+});
+
+const showToken = ref(false);
+const showInvoice = ref(false);
+
+const openToken = () => {
+  show.value = false;
+  showToken.value = true;
+};
+
+const openInvoice = () => {
+  show.value = false;
+  showInvoice.value = true;
+};
+
+const onSent = () => emit('sent');
+</script>
+
+<template>
+  <q-dialog v-model="show" position="bottom" transition-show="slide-up" transition-hide="slide-down">
+    <q-card class="sattle-card drawer-card full-width">
+      <q-card-section class="row items-center q-pb-sm">
+        <q-btn v-close-popup flat round dense icon="close" color="primary" aria-label="Close" />
+        <div class="col text-center">
+          <span class="text-h6 text-primary">Send</span>
+        </div>
+        <!-- spacer keeps the title centered against the close button -->
+        <div style="width: 40px" />
+      </q-card-section>
+
+      <q-card-section class="q-pa-md q-pt-sm">
+        <div class="q-gutter-y-md">
+          <div
+            class="action-row"
+            role="button"
+            tabindex="0"
+            @click="openToken"
+            @keydown.enter.prevent="openToken"
+            @keydown.space.prevent="openToken"
+          >
+            <div class="row items-center no-wrap">
+              <div class="icon-circle">
+                <q-icon name="sticky_note_2" size="24px" />
+              </div>
+              <div class="col q-ml-md">
+                <div class="text-body1 text-weight-medium text-primary">Bearer note</div>
+                <div class="text-caption text-grey-5">Hand someone a note</div>
+              </div>
+              <q-icon name="chevron_right" color="grey-6" />
+            </div>
+          </div>
+
+          <div
+            class="action-row"
+            role="button"
+            tabindex="0"
+            @click="openInvoice"
+            @keydown.enter.prevent="openInvoice"
+            @keydown.space.prevent="openInvoice"
+          >
+            <div class="row items-center no-wrap">
+              <div class="icon-circle">
+                <q-icon name="flash_on" size="24px" />
+              </div>
+              <div class="col q-ml-md">
+                <div class="text-body1 text-weight-medium text-primary">Lightning</div>
+                <div class="text-caption text-grey-5">Pay an invoice or address</div>
+              </div>
+              <q-icon name="chevron_right" color="grey-6" />
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+
+  <SendTokenDialog v-model="showToken" @sent="onSent" />
+  <PayInvoiceDialog v-model="showInvoice" @sent="onSent" />
+</template>
+
+<style lang="scss" scoped>
+.drawer-card {
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  padding-bottom: 16px;
+}
+
+.action-row {
+  background: rgba(85, 255, 204, 0.06);
+  border: 1px solid rgba(85, 255, 204, 0.15);
+  border-radius: 12px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+
+  &:active {
+    background: rgba(85, 255, 204, 0.12);
+  }
+}
+
+.icon-circle {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: rgba(85, 255, 204, 0.12);
+  color: #55ffcc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/components/send/SendTokenDialog.vue b/src/components/send/SendTokenDialog.vue
new file mode 100644
index 0000000..c652201
--- /dev/null
+++ b/src/components/send/SendTokenDialog.vue
@@ -0,0 +1,330 @@
+<script setup lang="ts">
+// Send a bearer note: pick an amount, carve a fresh note worth exactly that
+// much out of the wallet (the ops engine does the mint calls), then hand it
+// over as a QR / link. The QR hides behind a tap-to-reveal cover - anyone
+// who sees it can take the sats.
+//
+// Fund-safety order when applying the carve: the replacement notes are
+// added to the wallet BEFORE the consumed ones are marked spent, so a crash
+// mid-way strands a duplicate, never a secret.
+import { computed, ref, watch } from 'vue';
+import { useQuasar } from 'quasar';
+import { toBech32Lnurl } from 'lnurlcash-kit';
+
+import QrCode from '@/components/QrCode.vue';
+import { ensureExactAmount, UncertainOutcomeError } from '@/lnurlcash/ops';
+import type { CarveResult } from '@/lnurlcash/ops';
+import type { Bearer, NewBearer } from '@/lnurlcash/types';
+import { msatToSats, satsToMsat } from '@/lnurlcash/units';
+import { useWalletStore } from '@/stores/wallet';
+import { useActivityStore } from '@/stores/activity';
+
+const props = defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  sent: [];
+}>();
+
+const $q = useQuasar();
+const wallet = useWalletStore();
+const activity = useActivityStore();
+
+const toast = (type: 'positive' | 'negative' | 'warning' | 'info', message: string): void => {
+  // guarded: the Notify plugin registration lives in quasar.config, outside
+  // this component's control - a missing registration must not break a flow
+  if (typeof $q.notify === 'function') {
+    $q.notify({ type, message, position: 'top', timeout: 3000 });
+  }
+};
+
+const show = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+});
+
+type Step = 'amount' | 'ready';
+const step = ref<Step>('amount');
+const amountSats = ref('');
+const preparing = ref(false);
+const removing = ref(false);
+const errorMessage = ref<string | null>(null);
+const prepared = ref<Bearer | null>(null);
+const revealed = ref(false);
+
+const formatSats = (sats: number): string =>
+  sats.toLocaleString(undefined, { maximumFractionDigits: 3 });
+
+const parsedAmount = computed<number | null>(() => {
+  const n = Number(amountSats.value);
+  return Number.isInteger(n) && n > 0 ? n : null;
+});
+
+const amountError = computed<string | null>(() => {
+  if (parsedAmount.value === null) return null;
+  if (satsToMsat(parsedAmount.value) > wallet.balanceMsat) {
+    return `That's more than your spendable balance (${formatSats(wallet.balanceSats)} sats).`;
+  }
+  return null;
+});
+
+const canPrepare = computed(
+  () => parsedAmount.value !== null && amountError.value === null && !preparing.value,
+);
+
+const noteDisplayValue = computed(() =>
+  prepared.value ? toBech32Lnurl(prepared.value.url) : '',
+);
+
+const canShare =
+  typeof navigator !== 'undefined' && typeof navigator.share === 'function';
+
+const reset = () => {
+  step.value = 'amount';
+  amountSats.value = '';
+  preparing.value = false;
+  removing.value = false;
+  errorMessage.value = null;
+  prepared.value = null;
+  revealed.value = false;
+};
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) reset();
+  },
+);
+
+// Applies a carve to the wallet in the only safe order: add the fresh
+// note(s) first, mark the consumed inputs spent after. Returns the wallet
+// id of the carved note (for the exact-match path the note already exists
+// in the wallet, so it is found by url instead of re-added).
+const applyCarve = async (carve: CarveResult): Promise<Bearer> => {
+  const existing = wallet.bearers.find((b) => b.url === carve.note.url);
+  const toAdd: NewBearer[] = [];
+  if (!existing) toAdd.push(carve.note);
+  if (carve.change) toAdd.push(carve.change);
+  const added = toAdd.length > 0 ? await wallet.addBearers(toAdd) : [];
+  for (const consumed of carve.consumed) {
+    await wallet.markSpent(consumed.id);
+  }
+  return existing ?? added[0];
+};
+
+const prepare = async () => {
+  const sats = parsedAmount.value;
+  if (sats === null || amountError.value !== null) return;
+  preparing.value = true;
+  errorMessage.value = null;
+  try {
+    const carve = await ensureExactAmount(wallet.bearers, satsToMsat(sats));
+    const note = await applyCarve(carve);
+    if (carve.change) {
+      activity.log('split', `Prepared a ${formatSats(sats)} sat note to hand over.`);
+    } else if (carve.consumed.length > 1) {
+      activity.log('combine', `Combined notes into a ${formatSats(sats)} sat note.`);
+    }
+    prepared.value = note;
+    revealed.value = false;
+    step.value = 'ready';
+  } catch (err) {
+    if (err instanceof UncertainOutcomeError) {
+      // the mutation may have landed - the possible outputs carry fresh
+      // secrets and must be tracked alongside the (kept) originals
+      await wallet.addBearers(err.possibleOutputs);
+      activity.log(
+        'transfer',
+        'A note preparation could not be confirmed - possible notes stored unverified.',
+      );
+      errorMessage.value =
+        "Couldn't confirm with the mint. Your original notes are untouched, and the possible new notes are stored unverified - refresh your wallet later to reconcile.";
+      toast('warning', 'Preparation uncertain - see the notice in the dialog.');
+      return;
+    }
+    const message = err instanceof Error ? err.message : 'Something went wrong.';
+    errorMessage.value = message.startsWith('No mint holds enough')
+      ? 'Not enough spendable balance to cover that amount.'
+      : message;
+    toast('negative', errorMessage.value);
+  } finally {
+    preparing.value = false;
+  }
+};
+
+const copyNote = async () => {
+  try {
+    await navigator.clipboard.writeText(noteDisplayValue.value);
+    toast('positive', 'Note copied to clipboard.');
+  } catch {
+    toast('negative', "Couldn't copy - reveal the note and copy it manually.");
+  }
+};
+
+const shareNote = async () => {
+  try {
+    await navigator.share({ title: 'sattle bearer note', text: noteDisplayValue.value });
+  } catch (err) {
+    // the user dismissing the share sheet is not an error
+    if (err instanceof DOMException && err.name === 'AbortError') return;
+    await copyNote();
+  }
+};
+
+const finishRemove = async () => {
+  const note = prepared.value;
+  if (!note) return;
+  removing.value = true;
+  try {
+    await wallet.markSpent(note.id);
+    activity.log('spent', `Handed over a ${formatSats(msatToSats(note.amount))} sat note.`);
+    toast('positive', 'Removed from your balance.');
+    emit('sent');
+    show.value = false;
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Something went wrong.';
+    toast('negative', message);
+  } finally {
+    removing.value = false;
+  }
+};
+
+const finishKeep = () => {
+  toast('info', 'Note kept in your wallet.');
+  show.value = false;
+};
+</script>
+
+<template>
+  <q-dialog
+    v-model="show"
+    position="bottom"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+    :persistent="preparing"
+  >
+    <q-card class="sattle-card drawer-card full-width">
+      <q-card-section class="row items-center q-pb-sm">
+        <q-btn
+          v-close-popup
+          flat
+          round
+          dense
+          icon="close"
+          color="primary"
+          aria-label="Close"
+          :disable="preparing"
+        />
+        <div class="col text-center">
+          <span class="text-h6 text-primary">Send a note</span>
+        </div>
+        <div style="width: 40px" />
+      </q-card-section>
+
+      <!-- step 1: amount -->
+      <q-card-section v-if="step === 'amount'" class="q-pa-md q-pt-sm">
+        <div class="text-caption text-grey-5 q-mb-md">
+          Spendable balance: {{ formatSats(wallet.balanceSats) }} sats
+        </div>
+        <q-input
+          v-model="amountSats"
+          type="number"
+          min="1"
+          step="1"
+          label="Amount (sats)"
+          outlined
+          color="primary"
+          :error="amountError !== null"
+          :error-message="amountError ?? undefined"
+          :disable="preparing"
+        />
+        <q-banner v-if="errorMessage" dense class="bg-negative text-white q-mt-md rounded-borders">
+          {{ errorMessage }}
+        </q-banner>
+        <div class="row justify-end q-gutter-sm q-mt-lg">
+          <q-btn v-close-popup flat label="Cancel" color="grey-5" :disable="preparing" />
+          <q-btn
+            unelevated
+            color="primary"
+            text-color="dark"
+            label="Prepare note"
+            :loading="preparing"
+            :disable="!canPrepare"
+            @click="prepare"
+          />
+        </div>
+      </q-card-section>
+
+      <!-- step 2: hand over -->
+      <q-card-section v-else class="q-pa-md q-pt-sm column items-center">
+        <div class="text-h6 text-primary q-mb-sm">
+          {{ prepared ? formatSats(msatToSats(prepared.amount)) : '' }} sats
+        </div>
+
+        <div
+          class="qr-box"
+          role="button"
+          tabindex="0"
+          @click="revealed = true"
+          @keydown.enter.prevent="revealed = true"
+        >
+          <QrCode v-if="revealed" :value="noteDisplayValue" :size="220" />
+          <div v-else class="qr-cover column items-center justify-center">
+            <q-icon name="visibility" size="32px" color="primary" />
+            <div class="text-body2 text-primary q-mt-sm">Tap to reveal</div>
+            <div class="text-caption text-grey-5 q-mt-xs text-center q-px-md">
+              Anyone who sees this code can take the sats
+            </div>
+          </div>
+        </div>
+
+        <div class="row q-gutter-sm q-mt-md">
+          <q-btn outline color="primary" icon="content_copy" label="Copy" @click="copyNote" />
+          <q-btn
+            v-if="canShare"
+            outline
+            color="primary"
+            icon="share"
+            label="Share"
+            @click="shareNote"
+          />
+        </div>
+
+        <div class="text-caption text-grey-5 text-center q-mt-md">
+          Whoever opens this link gets the sats. Your copy stays in the wallet until you remove it.
+        </div>
+
+        <div class="column q-gutter-sm q-mt-lg full-width">
+          <q-btn
+            unelevated
+            color="primary"
+            text-color="dark"
+            label="Done — remove from my balance"
+            :loading="removing"
+            @click="finishRemove"
+          />
+          <q-btn flat color="grey-5" label="Keep in wallet" :disable="removing" @click="finishKeep" />
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.drawer-card {
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  padding-bottom: 16px;
+}
+
+.qr-box {
+  cursor: pointer;
+}
+
+.qr-cover {
+  width: 232px; /* 220 QR + 6px frame padding, matching QrCode's frame */
+  height: 232px;
+  border-radius: 8px;
+  border: 1px dashed rgba(85, 255, 204, 0.4);
+  background: rgba(0, 34, 34, 0.6);
+}
+</style>