feat(release): stage GitWorkshop and next node updates

2026-09-09 18:15:21 -04:00
parent 973356df16
commit f5c0ba85cd
97 changed files with 5716 additions and 1327 deletions
@@ -0,0 +1,43 @@
+<template>
+  <BaseModal
+    :show="store.credentialPrompt.show"
+    :title="store.credentialPrompt.title"
+    max-width="max-w-lg"
+    z-index="z-[4100]"
+    @close="store.cancelCredentialLaunch()"
+  >
+    <div v-if="store.credentialPrompt.loading" class="flex min-h-40 flex-col items-center justify-center text-center">
+      <div class="h-8 w-8 animate-spin rounded-full border-2 border-white/15 border-t-orange-300" aria-hidden="true"></div>
+      <p class="mt-4 text-sm text-white/55">{{ store.credentialPrompt.description }}</p>
+    </div>
+    <template v-else>
+      <p v-if="store.credentialPrompt.description" class="-mt-1 mb-4 text-sm text-white/55">
+        {{ store.credentialPrompt.description }}
+      </p>
+      <div class="space-y-3">
+        <div v-for="credential in store.credentialPrompt.credentials" :key="credential.label" class="rounded-lg border border-white/10 bg-white/[0.04] p-3">
+          <div class="mb-1 flex items-center justify-between gap-3">
+            <span class="text-xs uppercase tracking-wide text-white/60">{{ credential.label }}</span>
+            <button type="button" class="text-xs text-orange-300 hover:text-orange-200" @click="store.copyCredential(credential.label, credential.value)">
+              {{ store.credentialPrompt.copied === credential.label ? 'Copied' : 'Copy' }}
+            </button>
+          </div>
+          <p class="break-all font-mono text-sm text-white">{{ credential.value }}</p>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex flex-col gap-3 sm:flex-row">
+        <button type="button" class="w-full rounded-lg px-4 py-3 sm:flex-1 glass-button" @click="store.cancelCredentialLaunch()">Cancel</button>
+        <button v-if="!store.credentialPrompt.loading" type="button" class="w-full rounded-lg px-4 py-3 font-semibold sm:flex-1 glass-button" @click="store.continueCredentialLaunch()">Continue to app</button>
+      </div>
+    </template>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import BaseModal from '@/components/BaseModal.vue'
+import { useAppLauncherStore } from '@/stores/appLauncher'
+
+const store = useAppLauncherStore()
+</script>
@@ -118,7 +118,22 @@

            <!-- Payment Confirmation Dialog -->
            <Transition name="content-fade">
-              <div v-if="pendingPayment" class="absolute inset-0 z-20 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+              <div v-if="completedPayment" class="absolute inset-0 z-20 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+                <div class="bg-black/80 border border-white/15 rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl max-h-[90%] overflow-y-auto">
+                  <PaymentSuccessPane
+                    :amount="completedPayment.amount"
+                    :verb="completedPayment.verb"
+                    :method-label="completedPayment.methodLabel"
+                    :rows="completedPayment.rows"
+                    :note="completedPayment.note"
+                    @done="completedPayment = null"
+                  />
+                </div>
+              </div>
+            </Transition>
+
+            <Transition name="content-fade">
+              <div v-if="pendingPayment && !completedPayment" class="absolute inset-0 z-20 flex items-center justify-center bg-black/70 backdrop-blur-sm">
                <div class="bg-black/80 border border-white/15 rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl">
                  <div class="flex items-center gap-3 mb-4">
                    <div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
@@ -162,30 +177,31 @@
                </div>
              </div>
            </Transition>
+
+            <NostrSignConsent
+              :show="store.showConsent"
+              :app-name="store.consentRequest?.appName ?? ''"
+              :method="store.consentRequest?.method ?? ''"
+              :identity-label="store.consentRequest?.identityLabel"
+              :event-kind="store.consentRequest?.eventKind"
+              :content="store.consentRequest?.content"
+              :phase="store.consentPhase"
+              :error="store.consentError"
+              @approve="store.approveConsent"
+              @deny="store.denyConsent"
+            />
+            <NostrIdentityPicker
+              :show="showIdentityPicker"
+              :app-name="store.title || 'App'"
+              @select="onIdentitySelected"
+              @cancel="cancelIdentitySelection"
+            />
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>

-  <!-- Nostr signing consent modal -->
-  <NostrSignConsent
-    :show="store.showConsent"
-    :app-name="store.consentRequest?.appName ?? ''"
-    :method="store.consentRequest?.method ?? ''"
-    :event-kind="store.consentRequest?.eventKind"
-    :content="store.consentRequest?.content"
-    @approve="store.approveConsent"
-    @deny="store.denyConsent"
-  />
-
-  <!-- Nostr identity picker (first-launch for identity-aware apps) -->
-  <NostrIdentityPicker
-    :show="showIdentityPicker"
-    :app-name="store.title || 'App'"
-    @select="onIdentitySelected"
-    @cancel="showIdentityPicker = false"
-  />
 </template>

 <script setup lang="ts">
@@ -194,6 +210,7 @@ import { useAppLauncherStore } from '@/stores/appLauncher'
 import NostrSignConsent from '@/components/NostrSignConsent.vue'
 import NostrIdentityPicker from '@/components/NostrIdentityPicker.vue'
 import AppLoadingScreen from '@/components/AppLoadingScreen.vue'
+import PaymentSuccessPane, { type SuccessRow } from '@/components/PaymentSuccessPane.vue'
 import { DEFAULT_APP_ICON } from '@/views/apps/appsConfig'
 import { rpcClient } from '@/api/rpc-client'
 import { useLightningRequired } from '@/composables/useLightningRequired'
@@ -292,6 +309,11 @@ function onIdentitySelected(identity: SelectedIdentity) {
  sendSelectedIdentity(identity)
 }

+function cancelIdentitySelection() {
+  showIdentityPicker.value = false
+  iframeRef.value?.contentWindow?.postMessage({ type: 'archipelago:identity-cancelled' }, '*')
+}
+
 /** Send a specific identity to the iframe */
 async function sendSelectedIdentity(identity: SelectedIdentity) {
  try {
@@ -330,6 +352,13 @@ function clearTimers() {
 const pendingPayment = ref<PaymentRequest | null>(null)
 const paymentProcessing = ref(false)
 const paymentError = ref('')
+const completedPayment = ref<{
+  amount: number
+  verb: string
+  methodLabel: string
+  rows: SuccessRow[]
+  note?: string
+} | null>(null)
 const paymentOrigin = ref('')

 function refreshIframe() {
@@ -471,7 +500,8 @@ function onMessage(e: MessageEvent) {
  }
  // Iframe app requests identity on demand
  if (e.data?.type === 'archipelago:identity:request' && store.isOpen) {
-    sendIdentityIfSupported()
+    if (e.data?.force === true) showIdentityPicker.value = true
+    else sendIdentityIfSupported()
  }
  // Wallet connect — app requests a payment
  if (e.data?.type === 'archipelago:payment-request' && store.isOpen) {
@@ -495,6 +525,7 @@ function handlePaymentRequest(e: MessageEvent) {
    address: data.address,
  }
  paymentOrigin.value = e.origin
+  completedPayment.value = null
  paymentError.value = ''
  paymentProcessing.value = false
 }
@@ -561,6 +592,34 @@ async function approvePayment() {
    }

    sendPaymentResponse(paymentOrigin.value, pay.request_id, true, undefined, receipt)
+    const rows: SuccessRow[] = []
+    if (typeof receipt.payment_hash === 'string' && receipt.payment_hash) {
+      rows.push({ label: 'Payment hash', value: receipt.payment_hash })
+    }
+    if (typeof receipt.txid === 'string' && receipt.txid) {
+      rows.push({ label: 'Transaction ID', value: receipt.txid })
+    }
+    if (typeof receipt.token === 'string' && receipt.token) {
+      rows.push({
+        label: 'Token sent to app',
+        value: receipt.token,
+        hint: 'The app received this token. Keep a copy until it confirms the payment.',
+        truncate: true,
+      })
+    }
+    if (typeof receipt.payment_request === 'string' && receipt.payment_request) {
+      rows.push({ label: 'Invoice sent to app', value: receipt.payment_request, truncate: true })
+    }
+    const createdInvoice = method === 'lightning' && !pay.invoice
+    completedPayment.value = {
+      amount: Number(receipt.amount_sats) || pay.amount_sats,
+      verb: createdInvoice ? 'READY' : 'SENT',
+      methodLabel: createdInvoice
+        ? 'Lightning invoice created'
+        : method === 'lightning' ? 'Paid over Lightning' : method === 'ecash' ? 'Sent as Cashu' : 'Sent on-chain',
+      rows,
+      note: createdInvoice ? 'The invoice was returned to the requesting app.' : `Payment approved for ${store.title || 'the app'}.`,
+    }
    pendingPayment.value = null
  } catch (err: unknown) {
    const msg = err instanceof Error ? err.message : 'Payment failed'
@@ -612,6 +671,7 @@ watch(
      if (pendingPayment.value) {
        rejectPayment()
      }
+      completedPayment.value = null
    }
  }
 )
@@ -0,0 +1,50 @@
+<template>
+  <div class="py-3 text-center">
+    <NostrIdentityOrb class="mx-auto" size="large" state="success" aria-label="Nostr identity updated" />
+    <p class="mt-3 text-[10px] uppercase tracking-[0.24em] text-green-300/70">Identity saved</p>
+    <h2 id="profile-editor-title" class="mt-1 text-2xl font-bold tracking-wide text-white">IDENTITY UPDATED</h2>
+    <p class="mt-2 text-sm text-white/55">{{ identityName }} is updated on this node.</p>
+
+    <div class="mt-6 space-y-3 rounded-xl bg-white/5 p-4 text-left">
+      <div>
+        <p class="mb-1 text-xs text-white/45">Relay publication</p>
+        <p class="text-sm text-white/80">{{ relaySummary }}</p>
+      </div>
+      <div v-if="eventId">
+        <p class="mb-1 text-xs text-white/45">Nostr event ID</p>
+        <div class="flex items-center gap-2">
+          <p class="min-w-0 flex-1 break-all font-mono text-xs text-white/75">{{ eventId }}</p>
+          <CopyButton class="shrink-0" :value="eventId" />
+        </div>
+      </div>
+      <p v-if="relayNote" class="text-xs leading-relaxed text-amber-200/70">{{ relayNote }}</p>
+    </div>
+
+    <div class="mt-6 flex gap-3">
+      <button type="button" class="glass-button flex-1 rounded-xl px-4 py-3 text-sm font-medium" @click="$emit('again')">Keep editing</button>
+      <button type="button" class="glass-button glass-button-warning flex-1 rounded-xl px-4 py-3 text-sm font-semibold" @click="$emit('done')">Done</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import CopyButton from '@/components/CopyButton.vue'
+import NostrIdentityOrb from '@/components/NostrIdentityOrb.vue'
+
+const props = withDefaults(defineProps<{
+  identityName: string
+  eventId?: string
+  accepted?: number
+  attempted?: number
+  relayNote?: string
+}>(), { eventId: '', accepted: 0, attempted: 0, relayNote: '' })
+
+defineEmits<{ again: []; done: [] }>()
+
+const relaySummary = computed(() => {
+  if (!props.attempted) return 'Saved locally; no relay publication was attempted.'
+  if (props.accepted === props.attempted) return `Published to all ${props.attempted} configured relays.`
+  return `Published to ${props.accepted}/${props.attempted} configured relays.`
+})
+</script>
@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="nostr-orb"
+    :class="[`nostr-orb-${size}`, `nostr-orb-${state}`]"
+    role="img"
+    :aria-label="ariaLabel"
+  >
+    <div class="nostr-orb-ring" aria-hidden="true">
+      <span
+        v-for="(_, i) in 48"
+        :key="i"
+        class="nostr-orb-segment"
+        :style="{ '--seg-i': i, '--seg-deg': `${(i / 48) * 360}deg` }"
+      />
+    </div>
+    <div class="nostr-orb-border" aria-hidden="true">
+      <div class="nostr-orb-inner">
+        <svg viewBox="0 0 122.88 88.39" xmlns="http://www.w3.org/2000/svg" class="nostr-orb-mark">
+          <path fill="#FAFAFA" fill-rule="evenodd" clip-rule="evenodd" d="M87.51,21.16c5.26,1.45,10.79,1.84,16.58,1.18c1.42-0.16,2.81-0.35,4.16-0.53c6.46-0.84,11.86-1.32,13.78,3.52 c3.39,8.55-4.28,27.07-8.32,34.56c-8.32,15.43-24.9,32.69-44.08,27.57c-2.99-0.8-5.68-2.1-8.08-3.86 c6.3-3.51,11.28-8.9,15.13-15.24l-0.01,0.02c4.77,0.26,9.73,2.78,14.27,5.44c0.33-5.99-5.46-9.97-10.62-12.45 c4.14-9.29,6.33-19.72,7.01-29.03C87.53,29.46,87.64,25.53,87.51,21.16L87.51,21.16z M2.61,6.51c1.56-1.48,3.92-1.87,6.6-1.7 c5.03,0.31,10.23,1.86,15.11,3.18c10.61,2.86,20.99,1.93,31.1-2.74c1.36-0.63,2.69-1.28,3.98-1.9C65.56,0.37,70.8-1.9,74.31,2.3 c6.21,7.42,4.68,28.44,3.13,37.25c-3.2,18.15-14.03,40.87-34.88,42.1c-11.06,0.65-20.49-5.57-28.61-17.32 c-5.17-8-8.9-16.22-11.18-24.67C1.13,33.5-2.46,11.34,2.61,6.51L2.61,6.51z M12.94,34.3c-1.91-0.5-3.01-1.12-3.38-1.85 c-1.47-2.92,10.66-10.29,19.22-3.52C40.95,38.4,17.26,35.58,12.94,34.3L12.94,34.3z M32.63,62.79c-3.23-2.31-4.96-5.16-5.9-9.02 c10.67,5.4,20.66,5.01,29.96-2.42c-0.37,3.29-1.44,6.24-3.28,8.83C47.98,67.83,40.04,68.08,32.63,62.79L32.63,62.79z M67.07,30.06 c1.79-0.84,2.76-1.65,2.99-2.44c0.92-3.14-12.35-8.19-19.54,0.03C40.27,39.18,63.06,32.1,67.07,30.06L67.07,30.06z M90.82,42.07 c5.04-4.04,11.94-3.22,16.74,0.73c1.22,1.01,4.57,3.95,2.64,5.56c-0.53,0.44-1.41,0.69-2.63,0.75c-2.98,0.34-7.32-0.28-10.78-1.71 C94.07,46.3,92.01,44.83,90.82,42.07L90.82,42.07z"/>
+        </svg>
+      </div>
+    </div>
+    <div v-if="state === 'success'" class="nostr-orb-check" aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="m5 12 4 4L19 6"/>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  size?: 'small' | 'medium' | 'large'
+  state?: 'idle' | 'loading' | 'success'
+  ariaLabel?: string
+}>(), {
+  size: 'large',
+  state: 'idle',
+  ariaLabel: 'Nostr identity',
+})
+</script>
+
+<style scoped>
+.nostr-orb {
+  --orb-size: 148px;
+  --disc-size: 104px;
+  --mark-width: 42px;
+  --ring-radius: 60px;
+  --bar-height: 14px;
+  position: relative;
+  width: var(--orb-size);
+  height: var(--orb-size);
+  flex: 0 0 auto;
+}
+.nostr-orb-medium { --orb-size: 112px; --disc-size: 78px; --mark-width: 32px; --ring-radius: 45px; --bar-height: 11px; }
+.nostr-orb-small { --orb-size: 80px; --disc-size: 56px; --mark-width: 23px; --ring-radius: 32px; --bar-height: 8px; }
+.nostr-orb-ring { position: absolute; inset: 0; pointer-events: none; }
+.nostr-orb-segment {
+  position: absolute;
+  left: 50%; top: 50%; width: 2.5px; height: var(--bar-height);
+  margin-left: -1.25px; margin-top: calc(var(--bar-height) / -2);
+  border-radius: 2px;
+  background: linear-gradient(to bottom, rgba(250,250,250,.45), rgba(250,250,250,.06));
+  transform: rotate(var(--seg-deg)) translateY(calc(var(--ring-radius) * -1));
+  animation: nostr-orb-pulse 4s ease-in-out infinite;
+  animation-delay: calc(var(--seg-i) * 20ms);
+}
+.nostr-orb-loading .nostr-orb-segment { animation-duration: 1.35s; }
+.nostr-orb-success .nostr-orb-segment { background: linear-gradient(to bottom, rgba(74,222,128,.75), rgba(74,222,128,.08)); animation-duration: 2.4s; }
+.nostr-orb-border {
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+  width: var(--disc-size); height: var(--disc-size); border-radius: 9999px; padding: 3px;
+  background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(0,0,0,.8));
+  box-shadow: 0 8px 24px rgba(0,0,0,.5); filter: drop-shadow(0 0 24px rgba(255,255,255,.08));
+}
+.nostr-orb-inner { width: 100%; height: 100%; border-radius: inherit; background: #000; display: flex; align-items: center; justify-content: center; }
+.nostr-orb-mark { width: var(--mark-width); height: auto; filter: drop-shadow(0 0 12px rgba(250,250,250,.12)); animation: nostr-orb-breathe 4s ease-in-out infinite; }
+.nostr-orb-loading .nostr-orb-mark { animation-duration: 1.5s; }
+.nostr-orb-check {
+  position: absolute; right: 8%; bottom: 8%; width: 27%; height: 27%; border-radius: 9999px;
+  display: flex; align-items: center; justify-content: center; color: #dcfce7;
+  background: #16a34a; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 4px 18px rgba(22,163,74,.45);
+}
+.nostr-orb-check svg { width: 65%; height: 65%; }
+@keyframes nostr-orb-pulse {
+  0%, 100% { opacity: .15; transform: rotate(var(--seg-deg)) translateY(calc(var(--ring-radius) * -1)) scaleY(.45); }
+  45%, 60% { opacity: 1; transform: rotate(var(--seg-deg)) translateY(calc(var(--ring-radius) * -1)) scaleY(1.15); }
+}
+@keyframes nostr-orb-breathe {
+  0%, 100% { opacity: .72; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(250,250,250,.22)); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .nostr-orb-segment, .nostr-orb-mark { animation: none; }
+}
+</style>
@@ -1,13 +1,10 @@
 <template>
-  <Teleport to="body">
-    <Transition name="identity-picker">
-      <div
-        v-if="show"
-        class="fixed inset-0 z-[3100] flex items-center justify-center p-4"
-        @click="$emit('cancel')"
-      >
-        <!-- Backdrop — frosted blur -->
-        <div class="absolute inset-0 bg-black/40 backdrop-blur-2xl"></div>
+  <Transition name="identity-picker">
+    <div
+      v-if="show"
+      class="absolute inset-0 z-50 flex items-center justify-center bg-black/70 p-3 backdrop-blur-md sm:p-6"
+      @click.self="$emit('cancel')"
+    >

        <!-- Main panel -->
        <div
@@ -16,37 +13,22 @@
          role="dialog"
          aria-modal="true"
          :aria-label="`Select identity for ${appName}`"
-          class="relative z-10 w-full max-w-lg"
+          class="identity-picker-card glass-card relative z-10 w-full max-w-md overflow-y-auto p-5 sm:p-6"
        >
-          <!-- Header: screensaver-style glass disc + radial viz ring -->
-          <div class="relative mb-6 flex flex-col items-center">
-            <div class="nostr-hero">
-              <!-- Radial viz segments — exact screensaver pattern, 48 bars, #FAFAFA -->
-              <div class="nostr-viz-ring">
-                <div
-                  v-for="(_, i) in 48"
-                  :key="i"
-                  class="nostr-viz-segment"
-                  :style="{ '--seg-i': i, '--seg-deg': `${(i / 48) * 360}deg` }"
-                />
-              </div>
-
-              <!-- Glass disc — exact logo-gradient-border from screensaver -->
-              <div class="nostr-glass-border">
-                <div class="nostr-glass-inner">
-                  <svg viewBox="0 0 122.88 88.39" width="42" height="30" xmlns="http://www.w3.org/2000/svg" class="nostr-cinema-svg">
-                    <path fill="#FAFAFA" fill-rule="evenodd" clip-rule="evenodd" d="M87.51,21.16c5.26,1.45,10.79,1.84,16.58,1.18c1.42-0.16,2.81-0.35,4.16-0.53c6.46-0.84,11.86-1.32,13.78,3.52 c3.39,8.55-4.28,27.07-8.32,34.56c-8.32,15.43-24.9,32.69-44.08,27.57c-2.99-0.8-5.68-2.1-8.08-3.86 c6.3-3.51,11.28-8.9,15.13-15.24l-0.01,0.02c4.77,0.26,9.73,2.78,14.27,5.44c0.33-5.99-5.46-9.97-10.62-12.45 c4.14-9.29,6.33-19.72,7.01-29.03C87.53,29.46,87.64,25.53,87.51,21.16L87.51,21.16z M2.61,6.51c1.56-1.48,3.92-1.87,6.6-1.7 c5.03,0.31,10.23,1.86,15.11,3.18c10.61,2.86,20.99,1.93,31.1-2.74c1.36-0.63,2.69-1.28,3.98-1.9C65.56,0.37,70.8-1.9,74.31,2.3 c6.21,7.42,4.68,28.44,3.13,37.25c-3.2,18.15-14.03,40.87-34.88,42.1c-11.06,0.65-20.49-5.57-28.61-17.32 c-5.17-8-8.9-16.22-11.18-24.67C1.13,33.5-2.46,11.34,2.61,6.51L2.61,6.51z M12.94,34.3c-1.91-0.5-3.01-1.12-3.38-1.85 c-1.47-2.92,10.66-10.29,19.22-3.52C40.95,38.4,17.26,35.58,12.94,34.3L12.94,34.3z M32.63,62.79c-3.23-2.31-4.96-5.16-5.9-9.02 c10.67,5.4,20.66,5.01,29.96-2.42c-0.37,3.29-1.44,6.24-3.28,8.83C47.98,67.83,40.04,68.08,32.63,62.79L32.63,62.79z M67.07,30.06 c1.79-0.84,2.76-1.65,2.99-2.44c0.92-3.14-12.35-8.19-19.54,0.03C40.27,39.18,63.06,32.1,67.07,30.06L67.07,30.06z M90.82,42.07 c5.04-4.04,11.94-3.22,16.74,0.73c1.22,1.01,4.57,3.95,2.64,5.56c-0.53,0.44-1.41,0.69-2.63,0.75c-2.98,0.34-7.32-0.28-10.78-1.71 C94.07,46.3,92.01,44.83,90.82,42.07L90.82,42.07z"/>
-                  </svg>
-                </div>
-              </div>
+          <div class="mb-5 flex items-center gap-3">
+            <NostrIdentityOrb size="small" />
+            <div class="min-w-0 flex-1">
+              <p class="text-[10px] uppercase tracking-[0.2em] text-white/35">Nostr identity</p>
+              <h2 class="mt-1 text-xl font-semibold text-white">Choose an identity</h2>
+              <p class="mt-1 truncate text-xs text-white/45">{{ appName }}</p>
            </div>
-
-            <h2 class="mt-5 text-lg font-semibold text-white">Select Identity</h2>
-            <p class="mt-1 text-white/25 tracking-widest uppercase" style="font-size: 10px;">Nostr authentication protocol</p>
+            <button type="button" class="rounded-lg p-2 text-white/55 transition-colors hover:bg-white/10 hover:text-white" aria-label="Close" @click="$emit('cancel')">
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12" /></svg>
+            </button>
          </div>

          <!-- Identity list -->
-          <div class="glass-card p-4 space-y-2 max-h-[50vh] overflow-y-auto" role="radiogroup" aria-label="Available identities">
+          <div class="space-y-2" role="radiogroup" aria-label="Available identities">
            <div v-if="loading" class="flex items-center justify-center py-8">
              <svg class="animate-spin h-6 w-6 text-white/40" viewBox="0 0 24 24" fill="none">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
@@ -55,6 +37,14 @@
              <span class="ml-3 text-white/60 text-sm">Loading identities...</span>
            </div>

+            <div v-else-if="loadError" class="text-center py-8">
+              <p class="text-red-300/80 text-sm">Couldn&rsquo;t load identities.</p>
+              <p class="text-white/35 text-xs mt-1">{{ loadError }}</p>
+              <button type="button" class="glass-button mt-4 rounded-lg px-4 py-2 text-xs text-white/70" @click="loadIdentities">
+                Try again
+              </button>
+            </div>
+
            <div v-else-if="identities.length === 0" class="text-center py-8">
              <p class="text-white/50 text-sm">No identities found.</p>
              <p class="text-white/30 text-xs mt-1">Create one in Settings &rarr; Credentials</p>
@@ -117,19 +107,19 @@
            </button>
          </div>

-          <p class="mt-3 text-center text-[10px] text-white/20 tracking-widest">
+          <p class="mt-3 text-center text-[10px] tracking-widest text-white/20">
            NIP-07 &middot; SECP256K1 &middot; Signed locally
          </p>
        </div>
-      </div>
-    </Transition>
-  </Teleport>
+    </div>
+  </Transition>
 </template>

 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue'
 import { useModalKeyboard } from '@/composables/useModalKeyboard'
 import { rpcClient } from '@/api/rpc-client'
+import NostrIdentityOrb from '@/components/NostrIdentityOrb.vue'

 interface Identity {
  id: string
@@ -156,6 +146,7 @@ const modalRef = ref<HTMLElement | null>(null)
 const identities = ref<Identity[]>([])
 const selectedId = ref<string | null>(null)
 const loading = ref(false)
+const loadError = ref<string | null>(null)

 useModalKeyboard(modalRef, computed(() => props.show), () => emit('cancel'))

@@ -174,14 +165,18 @@ onMounted(() => {

 async function loadIdentities() {
  loading.value = true
+  loadError.value = null
  try {
    const res = await rpcClient.call<{ identities: Identity[] }>({ method: 'identity.list' })
    identities.value = res.identities || []
    const defaultId = identities.value.find(i => i.is_default && i.nostr_pubkey)
      || identities.value.find(i => i.nostr_pubkey)
    if (defaultId) selectedId.value = defaultId.id
-  } catch {
+  } catch (error) {
    identities.value = []
+    loadError.value = error instanceof Error
+      ? error.message
+      : 'Check the node connection and try again.'
  } finally {
    loading.value = false
  }
@@ -207,116 +202,20 @@ function avatarClasses(purpose: string): string {
 </script>

 <style scoped>
-/* ── Hero container ── */
-.nostr-hero {
-  position: relative;
-  width: 148px;
-  height: 148px;
-}
-
-/* ── Radial viz ring — exact screensaver pattern, #FAFAFA ── */
-.nostr-viz-ring {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.nostr-viz-segment {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 2.5px;
-  height: 14px;
-  margin-left: -1.25px;
-  margin-top: -7px;
-  background: linear-gradient(to bottom, rgba(250, 250, 250, 0.4), rgba(250, 250, 250, 0.06));
-  border-radius: 1.5px;
-  transform-origin: center center;
-  transform: rotate(var(--seg-deg)) translateY(-60px);
-  animation: seg-pulse 14s ease-in-out infinite;
-  animation-delay: calc(var(--seg-i) * 0.02s);
-}
-
-/* Exact screensaver keyframes — 5 normal pulses then 1 strong expression, 14s total */
-@keyframes seg-pulse {
-  0%     { opacity: 0.15; transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(0.4); }
-  7.1%   { opacity: 0.7;  transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(1); }
-  14.3%  { opacity: 0.15; transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(0.4); }
-  21.4%  { opacity: 0.7;  transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(1); }
-  28.6%  { opacity: 0.15; transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(0.4); }
-  35.7%  { opacity: 0.7;  transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(1); }
-  42.9%  { opacity: 0.15; transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(0.4); }
-  50%    { opacity: 0.7;  transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(1); }
-  57.1%  { opacity: 0.15; transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(0.4); }
-  64.3%  { opacity: 0.7;  transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(1); }
-  71.4%  { opacity: 0.15; transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(0.4); }
-  78.6%  { opacity: 1;    transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(1.5); }
-  85.7%  { opacity: 1;    transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(1.5); }
-  92.9%  { opacity: 0.15; transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(0.4); }
-  100%   { opacity: 0.15; transform: rotate(var(--seg-deg)) translateY(-60px) scaleY(0.4); }
-}
-
-/* ── Glass disc — exact screensaver logo-gradient-border ── */
-.nostr-glass-border {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 104px;
-  height: 104px;
-  border-radius: 9999px;
-  padding: 3px;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
-  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.08));
-}
-
-.nostr-glass-inner {
-  width: 100%;
-  height: 100%;
-  border-radius: 9999px;
-  background: #000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ── Cinema icon — breathing glow ── */
-.nostr-cinema-svg {
-  position: relative;
-  z-index: 1;
-  filter: drop-shadow(0 0 12px rgba(250, 250, 250, 0.12));
-  animation: cinema-breathe 4s ease-in-out infinite;
-}
-
-@keyframes cinema-breathe {
-  0%, 100% {
-    opacity: 0.7;
-    transform: scale(1);
-    filter: drop-shadow(0 0 8px rgba(250, 250, 250, 0.08));
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.08);
-    filter: drop-shadow(0 0 20px rgba(250, 250, 250, 0.22));
-  }
-}
-
+.identity-picker-card { max-height: min(90%, 680px); }
 /* ── Modal transitions ── */
 .identity-picker-enter-active,
 .identity-picker-leave-active {
  transition: opacity 0.4s ease;
 }
-.identity-picker-enter-active > .relative {
+.identity-picker-enter-active .identity-picker-card {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
 }
-.identity-picker-leave-active > .relative {
+.identity-picker-leave-active .identity-picker-card {
  transition: transform 0.25s ease, opacity 0.2s ease;
 }
 .identity-picker-enter-from { opacity: 0; }
-.identity-picker-enter-from > .relative { transform: translateY(24px) scale(0.94); opacity: 0; }
+.identity-picker-enter-from .identity-picker-card { transform: translateY(10px) scale(0.98); opacity: 0; }
 .identity-picker-leave-to { opacity: 0; }
-.identity-picker-leave-to > .relative { transform: translateY(10px) scale(0.98); opacity: 0; }
+.identity-picker-leave-to .identity-picker-card { transform: translateY(10px) scale(0.98); opacity: 0; }
 </style>
@@ -1,152 +1,93 @@
 <template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div
-        v-if="show"
-        class="fixed inset-0 z-[3000] flex items-center justify-center p-4"
-        @click="deny"
-      >
-        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
-        <div
-          ref="modalRef"
-          @click.stop
-          class="glass-card p-6 max-w-md w-full relative z-10"
-        >
-          <div class="flex items-start justify-between gap-4 mb-4">
-            <h3 class="text-xl font-semibold text-white">Nostr Signing Request</h3>
-            <button
-              @click="deny"
-              class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors"
-              aria-label="Close"
-            >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
+  <Transition name="consent">
+    <div v-if="show" class="absolute inset-0 z-40 flex items-center justify-center bg-black/70 p-3 backdrop-blur-md sm:p-6" @click.self="phase === 'review' && deny()">
+      <div ref="modalRef" class="nostr-consent-card glass-card w-full max-w-md overflow-y-auto p-5 sm:p-6" role="dialog" aria-modal="true" :aria-labelledby="`${dialogId}-title`" :aria-busy="phase === 'signing'">
+        <template v-if="phase === 'signing' || phase === 'success'">
+          <div class="flex min-h-[300px] flex-col items-center justify-center text-center">
+            <NostrIdentityOrb size="medium" :state="phase === 'success' ? 'success' : 'loading'" :aria-label="phase === 'success' ? 'Nostr request approved' : 'Signing with Nostr identity'" />
+            <h3 :id="`${dialogId}-title`" class="mt-4 text-xl font-semibold text-white">{{ phase === 'success' ? successTitle : progressTitle }}</h3>
+            <p class="mt-2 text-sm text-white/55">{{ phase === 'success' ? 'The app received the approved result.' : 'Your key stays on this node.' }}</p>
+            <p class="mt-4 text-[10px] uppercase tracking-[0.22em] text-white/25">NIP-07 · signed locally</p>
+          </div>
+        </template>
+
+        <template v-else>
+          <div class="mb-5 flex items-center gap-3">
+            <NostrIdentityOrb size="small" :state="phase === 'error' ? 'idle' : 'loading'" />
+            <div class="min-w-0 flex-1">
+              <p class="text-[10px] uppercase tracking-[0.2em] text-white/35">Nostr identity</p>
+              <h3 :id="`${dialogId}-title`" class="mt-1 text-xl font-semibold text-white">{{ phase === 'error' ? 'Request failed' : requestTitle }}</h3>
+              <p class="mt-1 truncate text-xs text-white/45">{{ appName }}</p>
+            </div>
+            <button type="button" class="rounded-lg p-2 text-white/55 transition-colors hover:bg-white/10 hover:text-white" aria-label="Close" @click="deny">
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12" /></svg>
            </button>
          </div>

-          <div class="space-y-3 mb-6">
-            <div class="bg-black/20 rounded-xl border border-white/10 p-3">
-              <p class="text-white/50 text-xs uppercase tracking-wider mb-1">App</p>
-              <p class="text-white text-sm font-medium">{{ appName }}</p>
-            </div>
-
-            <div class="bg-black/20 rounded-xl border border-white/10 p-3">
-              <p class="text-white/50 text-xs uppercase tracking-wider mb-1">Method</p>
-              <p class="text-white text-sm font-medium">{{ method }}</p>
-            </div>
-
-            <div v-if="contentPreview" class="bg-black/20 rounded-xl border border-white/10 p-3">
-              <p class="text-white/50 text-xs uppercase tracking-wider mb-1">Content</p>
-              <p class="text-white/80 text-sm font-mono break-all">{{ contentPreview }}</p>
-            </div>
-
-            <div v-if="eventKind !== undefined" class="bg-black/20 rounded-xl border border-white/10 p-3">
-              <p class="text-white/50 text-xs uppercase tracking-wider mb-1">Event Kind</p>
-              <p class="text-white text-sm font-medium">{{ eventKind }} <span class="text-white/50">({{ eventKindLabel }})</span></p>
-            </div>
+          <div v-if="phase === 'error'" class="alert-error mb-5 text-sm">{{ error || 'The node could not complete this request.' }}</div>
+          <div v-else class="mb-5 space-y-2">
+            <div class="rounded-xl border border-white/10 bg-black/20 p-3"><p class="mb-1 text-xs uppercase tracking-wider text-white/45">Request</p><p class="text-sm font-medium text-white">{{ methodLabel }}</p></div>
+            <div v-if="identityLabel" class="rounded-xl border border-white/10 bg-black/20 p-3"><p class="mb-1 text-xs uppercase tracking-wider text-white/45">Identity</p><p class="text-sm font-medium text-white">{{ identityLabel }}</p></div>
+            <div v-if="contentPreview" class="rounded-xl border border-white/10 bg-black/20 p-3"><p class="mb-1 text-xs uppercase tracking-wider text-white/45">Content</p><p class="break-all font-mono text-sm text-white/75">{{ contentPreview }}</p></div>
+            <div v-if="eventKind !== undefined" class="rounded-xl border border-white/10 bg-black/20 p-3"><p class="mb-1 text-xs uppercase tracking-wider text-white/45">Event kind</p><p class="text-sm font-medium text-white">{{ eventKind }} <span class="text-white/45">({{ eventKindLabel }})</span></p></div>
          </div>

-          <label class="flex items-center gap-2 mb-4 cursor-pointer">
-            <input
-              v-model="rememberChoice"
-              type="checkbox"
-              class="w-4 h-4 rounded border-white/30 bg-white/10 text-orange-400 focus:ring-orange-400/50"
-            />
-            <span class="text-white/70 text-sm">Remember for this app</span>
+          <label v-if="phase === 'review'" class="mb-5 flex cursor-pointer items-start gap-2">
+            <input v-model="rememberChoice" type="checkbox" class="mt-0.5 h-4 w-4 rounded border-white/30 bg-white/10 text-orange-400 focus:ring-orange-400/50" />
+            <span class="text-sm leading-snug text-white/65">Remember for this app, identity, and request type</span>
          </label>
-
          <div class="flex gap-3">
-            <button @click="deny" class="glass-button flex-1 py-2.5 rounded-lg text-sm font-medium">
-              Deny
-            </button>
-            <button @click="approve" class="glass-button flex-1 py-2.5 rounded-lg text-sm font-medium text-orange-400 border-orange-400/30">
-              Approve
-            </button>
+            <button type="button" class="glass-button flex-1 rounded-lg py-2.5 text-sm font-medium" @click="deny">{{ phase === 'error' ? 'Close' : 'Deny' }}</button>
+            <button v-if="phase === 'review'" type="button" class="glass-button flex-1 rounded-lg border-orange-400/30 py-2.5 text-sm font-medium text-orange-300" @click="approve">Approve</button>
          </div>
-        </div>
+        </template>
      </div>
-    </Transition>
-  </Teleport>
+    </div>
+  </Transition>
 </template>

 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useModalKeyboard } from '@/composables/useModalKeyboard'
+import NostrIdentityOrb from '@/components/NostrIdentityOrb.vue'

 const EVENT_KIND_LABELS: Record<number, string> = {
-  0: 'Metadata',
-  1: 'Short Text Note',
-  2: 'Recommend Relay',
-  3: 'Contacts',
-  4: 'Encrypted DM',
-  5: 'Event Deletion',
-  6: 'Repost',
-  7: 'Reaction',
-  9734: 'Zap Request',
-  9735: 'Zap Receipt',
-  10002: 'Relay List',
-  30023: 'Long-form Content',
+  0: 'Metadata', 1: 'Short text note', 2: 'Recommend relay', 3: 'Contacts', 4: 'Encrypted DM',
+  5: 'Event deletion', 6: 'Repost', 7: 'Reaction', 1618: 'Git pull request', 1619: 'Git pull request update',
+  1621: 'Git issue', 9734: 'Zap request', 9735: 'Zap receipt', 10002: 'Relay list',
+  30023: 'Long-form content', 30617: 'Git repository announcement',
 }
-
-const props = defineProps<{
-  show: boolean
-  appName: string
-  method: string
-  eventKind?: number
-  content?: string
-}>()
-
-const emit = defineEmits<{
-  approve: [remember: boolean]
-  deny: []
-}>()
-
+const METHOD_LABELS: Record<string, string> = {
+  getPublicKey: 'Share public identity', signEvent: 'Sign Nostr event',
+  'nip04.encrypt': 'Encrypt a private message', 'nip04.decrypt': 'Decrypt a private message',
+  'nip44.encrypt': 'Encrypt protected content', 'nip44.decrypt': 'Decrypt protected content',
+}
+const props = withDefaults(defineProps<{
+  show: boolean; appName: string; method: string; identityLabel?: string; eventKind?: number; content?: string
+  phase?: 'review' | 'signing' | 'success' | 'error'; error?: string
+}>(), { phase: 'review', error: '' })
+const emit = defineEmits<{ approve: [remember: boolean]; deny: [] }>()
 const modalRef = ref<HTMLElement | null>(null)
 const rememberChoice = ref(false)
-
-useModalKeyboard(modalRef, computed(() => props.show), () => emit('deny'))
-
-const contentPreview = computed(() => {
-  if (!props.content) return ''
-  return props.content.length > 200 ? props.content.slice(0, 200) + '...' : props.content
+const dialogId = `nostr-consent-${Math.random().toString(36).slice(2)}`
+watch(() => props.show, show => { if (show) rememberChoice.value = false })
+useModalKeyboard(modalRef, computed(() => props.show), () => {
+  if (props.phase === 'review' || props.phase === 'error') emit('deny')
 })
-
-const eventKindLabel = computed(() => {
-  if (props.eventKind === undefined) return ''
-  return EVENT_KIND_LABELS[props.eventKind] ?? 'Unknown'
-})
-
-function approve() {
-  emit('approve', rememberChoice.value)
-}
-
-function deny() {
-  emit('deny')
-}
+const methodLabel = computed(() => METHOD_LABELS[props.method] ?? props.method)
+const requestTitle = computed(() => props.method === 'getPublicKey' ? 'Share this identity?' : 'Approve this request?')
+const progressTitle = computed(() => props.method === 'getPublicKey' ? 'Sharing identity…' : 'Signing locally…')
+const successTitle = computed(() => props.method === 'getPublicKey' ? 'Identity shared' : 'Request signed')
+const contentPreview = computed(() => !props.content ? '' : props.content.length > 200 ? `${props.content.slice(0, 200)}…` : props.content)
+const eventKindLabel = computed(() => props.eventKind === undefined ? '' : EVENT_KIND_LABELS[props.eventKind] ?? 'Unknown')
+function approve() { emit('approve', rememberChoice.value) }
+function deny() { emit('deny') }
 </script>

 <style scoped>
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-active .glass-card,
-.modal-leave-active .glass-card {
-  transition: transform 0.3s ease;
-}
-
-.modal-enter-from .glass-card {
-  transform: scale(0.95);
-}
-
-.modal-leave-to .glass-card {
-  transform: scale(0.95);
-}
+.nostr-consent-card { max-height: min(90%, 680px); }
+.consent-enter-active, .consent-leave-active { transition: opacity .22s ease; }
+.consent-enter-active .nostr-consent-card, .consent-leave-active .nostr-consent-card { transition: transform .24s ease, opacity .2s ease; }
+.consent-enter-from, .consent-leave-to { opacity: 0; }
+.consent-enter-from .nostr-consent-card, .consent-leave-to .nostr-consent-card { opacity: 0; transform: translateY(10px) scale(.98); }
 </style>
@@ -1,5 +1,5 @@
 <template>
-  <BaseModal :show="show" :title="t('web5.receiveBitcoinTitle')" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
+  <BaseModal :show="show && !receiveSuccess" :title="t('web5.receiveBitcoinTitle')" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
        <!-- Method tabs -->
        <div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
          <button
@@ -21,22 +21,7 @@
            <label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.memoOptional') }}</label>
            <input v-model="invoiceMemo" type="text" :placeholder="t('receiveBitcoin.memoPlaceholder')" class="w-full input-glass" />
          </div>
-          <!-- Paid: the invoice did its job — straight to the green check
-               (no broadcast step: Lightning settlement is final) -->
-          <div v-if="invoicePaid" class="mb-3 p-6 bg-white/5 rounded-lg text-center">
-            <div class="flex justify-center mb-4">
-              <div class="w-16 h-16 rounded-full flex items-center justify-center bg-green-500/15">
-                <svg class="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                </svg>
-              </div>
-            </div>
-            <p class="text-lg font-semibold text-white mb-1">{{ t('receiveBitcoin.paymentConfirmed') }}</p>
-            <p v-if="invoicePaid.amountSats > 0" class="text-2xl font-semibold text-white/95 mb-2">
-              {{ invoicePaid.amountSats.toLocaleString() }} sats
-            </p>
-          </div>
-          <div v-else-if="invoiceResult" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
+          <div v-if="invoiceResult" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
            <canvas ref="lightningQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
            <p class="text-white/50 text-xs mb-2">{{ t('receiveBitcoin.invoiceShareLabel') }}</p>
            <CopyButton :value="invoiceResult" :label="t('common.copy')" />
@@ -45,50 +30,19 @@

        <!-- On-chain -->
        <div v-if="receiveMethod === 'onchain'">
-          <!-- Payment detected: the QR did its job — show the outcome -->
-          <div v-if="paymentSeen" class="mb-3 p-6 bg-white/5 rounded-lg text-center">
-            <div class="flex justify-center mb-4">
-              <div
-                class="w-16 h-16 rounded-full flex items-center justify-center"
-                :class="paymentSeen.confirmations > 0 ? 'bg-green-500/15' : 'bg-orange-500/15 animate-pulse'"
-              >
-                <!-- Check once confirmed, clock while in the mempool -->
-                <svg v-if="paymentSeen.confirmations > 0" class="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                </svg>
-                <svg v-else class="w-8 h-8 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              </div>
-            </div>
-            <p class="text-lg font-semibold text-white mb-1">
-              {{ paymentSeen.confirmations > 0 ? t('receiveBitcoin.paymentConfirmed') : t('receiveBitcoin.paymentBroadcast') }}
-            </p>
-            <p v-if="paymentSeen.amountSats > 0" class="text-2xl font-semibold text-white/95 mb-2">
-              {{ paymentSeen.amountSats.toLocaleString() }} sats
-            </p>
-            <p v-if="paymentSeen.confirmations === 0" class="text-sm text-white/50 mb-3 max-w-md mx-auto">
-              {{ t('receiveBitcoin.paymentBroadcastHint') }}
-            </p>
-            <p class="text-xs text-white/50 mb-1">{{ t('receiveBitcoin.transactionId') }}</p>
-            <p class="text-xs font-mono text-white/80" :title="paymentSeen.txid">{{ midTxid(paymentSeen.txid) }}</p>
-            <CopyButton :value="paymentSeen.txid" :label="t('common.copy')" class="mt-2" />
+          <div v-if="note" class="mb-3 p-3 rounded-lg bg-orange-500/10 border border-orange-500/20 text-sm text-white/80 leading-relaxed">
+            {{ note }}
+          </div>
+          <div v-if="onchainAddress" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
+            <canvas ref="onchainQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
+            <p class="text-white/50 text-xs mb-2">{{ t('receiveBitcoin.yourBitcoinAddress') }}</p>
+            <p class="text-sm font-mono text-white/90 break-all">{{ onchainAddress }}</p>
+            <CopyButton :value="onchainAddress" :label="t('common.copy')" class="mt-2" />
+          </div>
+          <div v-else class="mb-3 text-center">
+            <p class="text-white/50 text-sm mb-2">{{ t('web5.generateFreshAddress') }}</p>
+            <p v-if="processing" class="text-xs text-white/40">Checking Lightning wallet readiness...</p>
          </div>
-          <template v-else>
-            <div v-if="note" class="mb-3 p-3 rounded-lg bg-orange-500/10 border border-orange-500/20 text-sm text-white/80 leading-relaxed">
-              {{ note }}
-            </div>
-            <div v-if="onchainAddress" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
-              <canvas ref="onchainQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
-              <p class="text-white/50 text-xs mb-2">{{ t('receiveBitcoin.yourBitcoinAddress') }}</p>
-              <p class="text-sm font-mono text-white/90 break-all">{{ onchainAddress }}</p>
-              <CopyButton :value="onchainAddress" :label="t('common.copy')" class="mt-2" />
-            </div>
-            <div v-else class="mb-3 text-center">
-              <p class="text-white/50 text-sm mb-2">{{ t('web5.generateFreshAddress') }}</p>
-              <p v-if="processing" class="text-xs text-white/40">Checking Lightning wallet readiness...</p>
-            </div>
-          </template>
        </div>

        <!-- Ark -->
@@ -116,9 +70,6 @@
            <p class="text-base font-mono text-white/95 break-all mb-2">{{ lnAddress }}</p>
            <CopyButton :value="lnAddress" :label="t('common.copy')" />
            <p class="text-white/40 text-xs mt-3 leading-relaxed">{{ t('receiveBitcoin.lnAddressHint') }}</p>
-            <p v-if="lnClaimedSats > 0" class="text-green-400 text-sm mt-2">
-              {{ t('receiveBitcoin.lnAddressReceived', { amount: lnClaimedSats.toLocaleString() }) }}
-            </p>
            <p v-if="lnPendingClaims > 0" class="text-orange-400 text-sm mt-2">
              {{ t('receiveBitcoin.lnAddressPendingRetry', { count: lnPendingClaims }) }}
            </p>
@@ -134,16 +85,11 @@
            <label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.pasteEcashToken') }}</label>
            <textarea v-model="ecashToken" rows="3" placeholder="cashuB… (Cashu) or Fedimint notes" class="w-full input-glass font-mono"></textarea>
          </div>
-          <div v-if="ecashResult" class="mb-3 text-xs text-green-400">{{ ecashResult }}</div>
        </div>

        <div v-if="error" class="mb-3 alert-error">{{ error }}</div>

-        <!-- Once the payment is seen there is nothing left to do here -->
-        <div v-if="paymentSeen" class="flex">
-          <button @click="close" class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium">{{ t('common.done') }}</button>
-        </div>
-        <div v-else class="flex gap-3">
+        <div class="flex gap-3">
          <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
          <button @click="$emit('scan')" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium flex items-center justify-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -156,6 +102,28 @@
          </button>
        </div>
  </BaseModal>
+
+  <!-- Completion is deliberately its own modal, matching the Lightning
+       payment moment. It is not an inline status inside the receive form. -->
+  <BaseModal
+    :show="show && !!receiveSuccess"
+    title="Payment received"
+    max-width="max-w-2xl"
+    content-class="max-h-[90vh] overflow-y-auto"
+    @close="close"
+  >
+    <PaymentSuccessPane
+      v-if="receiveSuccess"
+      :amount="receiveSuccess.amount"
+      :verb="receiveSuccess.verb"
+      :method-label="receiveSuccess.methodLabel"
+      :rows="receiveSuccess.rows"
+      :note="receiveSuccess.note"
+      again-label="Receive another"
+      @again="receiveAnother"
+      @done="close"
+    />
+  </BaseModal>
 </template>

 <script setup lang="ts">
@@ -164,6 +132,7 @@ import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
 import BaseModal from '@/components/BaseModal.vue'
 import CopyButton from '@/components/CopyButton.vue'
+import PaymentSuccessPane, { type SuccessRow } from '@/components/PaymentSuccessPane.vue'
 import { explainReceiveAddressFailure } from '@/utils/bitcoinReceive'
 import { useLightningRequired } from '@/composables/useLightningRequired'

@@ -182,6 +151,8 @@ const emit = defineEmits<{ close: []; received: []; scan: [] }>()
 watch(() => props.show, (open) => {
  if (!open) {
    stopWatchingPayment()
+    stopWatchingInvoice()
+    stopLnClaimPoll()
    return
  }
  paymentSeen.value = null
@@ -198,13 +169,14 @@ watch(() => props.show, (open) => {
  onchainAddress.value = ''
  arkAddress.value = ''
  ecashToken.value = ''
-  ecashResult.value = ''
+  receiveSuccess.value = null
  stopLnClaimPoll()
  lnAddress.value = ''
  lnAddressLoading.value = false
  lnAddressError.value = false
-  lnClaimedSats.value = 0
  lnPendingClaims.value = 0
+  lastLnReceiptId.value = 0
+  lnWatchStartedAt.value = 0
  error.value = ''
  processing.value = false
  if (props.autoGenerate && receiveMethod.value === 'onchain') {
@@ -219,7 +191,13 @@ const invoiceResult = ref('')
 const onchainAddress = ref('')
 const arkAddress = ref('')
 const ecashToken = ref('')
-const ecashResult = ref('')
+const receiveSuccess = ref<{
+  amount: number
+  verb: string
+  methodLabel: string
+  rows: SuccessRow[]
+  note?: string
+} | null>(null)
 const onchainQrCanvas = ref<HTMLCanvasElement | null>(null)
 const lightningQrCanvas = ref<HTMLCanvasElement | null>(null)
 const arkQrCanvas = ref<HTMLCanvasElement | null>(null)
@@ -236,11 +214,15 @@ const error = ref('')
 const lnAddress = ref('')
 const lnAddressLoading = ref(false)
 const lnAddressError = ref(false)
-const lnClaimedSats = ref(0)
 // A payment the backend fetched (and so already consumed at Minibits) but
 // couldn't redeem yet — it's queued for automatic retry, not lost, but the
 // operator should see it rather than have it be a silent, unbounded wait.
 const lnPendingClaims = ref(0)
+const lastLnReceiptId = ref(0)
+// A durable receipt is shared across browser contexts. Only surface one whose
+// redemption happened after this receive watch began; reopening the modal must
+// not replay the previous payment as though it were new.
+const lnWatchStartedAt = ref(0)
 let lnClaimTimer: ReturnType<typeof setInterval> | null = null
 let lnClaimInFlight = false

@@ -277,7 +259,10 @@ function stopLnClaimPoll() {

 function startLnClaimPoll() {
  stopLnClaimPoll()
-  lnClaimTimer = setInterval(() => void pollLnClaims(), 8000)
+  // Do not make a newly opened receive screen wait a full interval before it
+  // can discover a payment (or a receipt claimed by another active client).
+  void pollLnClaims()
+  lnClaimTimer = setInterval(() => void pollLnClaims(), 3000)
 }

 async function pollLnClaims() {
@@ -288,7 +273,13 @@ async function pollLnClaims() {
  }
  lnClaimInFlight = true
  try {
-    const res = await rpcClient.call<{ received_sats?: number; failed_count?: number }>({
+    const res = await rpcClient.call<{
+      received_sats?: number
+      failed_count?: number
+      receipt_id?: number
+      receipt_sats?: number
+      receipt_at?: number
+    }>({
      method: 'wallet.ecash-lnaddress-claim',
      // Relay collection alone has a ten-second window and redemption may
      // then contact the mint. Keep the browser request alive long enough for
@@ -298,8 +289,28 @@ async function pollLnClaims() {
    // The user may have closed the modal while the relay fetch was in flight.
    // Do not resurrect its status or emit a stale received event afterward.
    if (!props.show || !lnAddress.value) return
-    if (res?.received_sats && res.received_sats > 0) {
-      lnClaimedSats.value += res.received_sats
+    const receiptId = res?.receipt_id || 0
+    const isNewReceipt = receiptId > 0 && receiptId !== lastLnReceiptId.value
+    const receiptAt = res?.receipt_at || 0
+    const receiptAgeSeconds = Math.floor(Date.now() / 1000) - receiptAt
+    const happenedDuringThisWatch = receiptAt >= Math.max(0, lnWatchStartedAt.value - 1)
+    const recentSharedReceipt = isNewReceipt
+      && happenedDuringThisWatch
+      && receiptAgeSeconds >= 0
+      && receiptAgeSeconds <= 180
+    const receivedSats = res?.received_sats && res.received_sats > 0
+      ? res.received_sats
+      : recentSharedReceipt ? (res?.receipt_sats || 0) : 0
+    if (receiptId > 0) lastLnReceiptId.value = receiptId
+    if (receivedSats > 0) {
+      receiveSuccess.value = {
+        amount: receivedSats,
+        verb: 'RECEIVED',
+        methodLabel: 'Lightning address to Cashu',
+        rows: [{ label: 'Lightning address', value: lnAddress.value }],
+        note: 'The payment was claimed into this node\'s Cashu balance.',
+      }
+      stopLnClaimPoll()
      emit('received')
    }
    lnPendingClaims.value = res?.failed_count || 0
@@ -314,7 +325,10 @@ onUnmounted(stopLnClaimPoll)

 // Fetch the address the first time the operator opens the ecash tab.
 watch(receiveMethod, (m) => {
-  if (m === 'ecash' && props.show) void loadLnAddress()
+  if (m === 'ecash' && props.show) {
+    lnWatchStartedAt.value = Math.floor(Date.now() / 1000)
+    void loadLnAddress()
+  }
 })

 // ── On-chain payment detection ────────────────────────────────────────────
@@ -326,10 +340,6 @@ watch(receiveMethod, (m) => {
 const paymentSeen = ref<null | { txid: string; amountSats: number; confirmations: number }>(null)
 let watchTimer: ReturnType<typeof setInterval> | null = null

-function midTxid(txid: string): string {
-  return txid.length > 24 ? `${txid.slice(0, 10)}…${txid.slice(-10)}` : txid
-}
-
 function stopWatchingPayment() {
  if (watchTimer) {
    clearInterval(watchTimer)
@@ -367,6 +377,15 @@ async function checkForPayment() {
      amountSats: hit.amount,
      confirmations: hit.num_confirmations,
    }
+    receiveSuccess.value = {
+      amount: hit.amount,
+      verb: 'RECEIVED',
+      methodLabel: hit.num_confirmations > 0 ? 'Confirmed on-chain' : 'Received on-chain',
+      rows: [{ label: t('receiveBitcoin.transactionId'), value: hit.tx_hash }],
+      note: hit.num_confirmations > 0
+        ? 'The transaction has its first confirmation.'
+        : t('receiveBitcoin.paymentBroadcastHint'),
+    }
    if (firstSighting) emit('received')
    if (hit.num_confirmations > 0) stopWatchingPayment()
  } catch {
@@ -407,6 +426,12 @@ async function checkInvoice() {
    })
    if (!res.settled) return
    invoicePaid.value = { amountSats: res.amt_paid_sat || invoiceAmount.value }
+    receiveSuccess.value = {
+      amount: res.amt_paid_sat || invoiceAmount.value,
+      verb: 'RECEIVED',
+      methodLabel: 'Received over Lightning',
+      rows: invoiceRHash.value ? [{ label: 'Payment hash', value: invoiceRHash.value }] : [],
+    }
    stopWatchingInvoice()
    emit('received')
  } catch {
@@ -430,20 +455,46 @@ async function renderQr(data: string, canvas: HTMLCanvasElement | null, prefix =

 function close() {
  stopWatchingPayment()
+  stopWatchingInvoice()
  stopLnClaimPoll()
  paymentSeen.value = null
  invoiceResult.value = ''
  onchainAddress.value = ''
  arkAddress.value = ''
  ecashToken.value = ''
-  ecashResult.value = ''
+  receiveSuccess.value = null
  lnAddress.value = ''
-  lnClaimedSats.value = 0
  lnPendingClaims.value = 0
+  lastLnReceiptId.value = 0
+  lnWatchStartedAt.value = 0
  error.value = ''
  emit('close')
 }

+/** Return to a clean form after a receipt without carrying a spent token or address forward. */
+function receiveAnother() {
+  receiveSuccess.value = null
+  error.value = ''
+  processing.value = false
+  if (receiveMethod.value === 'lightning') {
+    stopWatchingInvoice()
+    invoicePaid.value = null
+    invoiceRHash.value = ''
+    invoiceResult.value = ''
+    invoiceAmount.value = 0
+    invoiceMemo.value = ''
+  } else if (receiveMethod.value === 'onchain') {
+    stopWatchingPayment()
+    paymentSeen.value = null
+    onchainAddress.value = ''
+  } else if (receiveMethod.value === 'ecash') {
+    ecashToken.value = ''
+    if (lnAddress.value) startLnClaimPoll()
+  } else {
+    arkAddress.value = ''
+  }
+}
+
 async function receive() {
  processing.value = true
  error.value = ''
@@ -481,14 +532,27 @@ async function receive() {
      if (!ecashToken.value.trim()) { error.value = t('receiveBitcoin.pasteAnEcashToken'); return }
      // The backend auto-detects the token type: a Cashu token (cashuA/B…) is
      // redeemed at its mint, anything else is reissued as Fedimint notes.
-      const res = await rpcClient.call<{ received_sats?: number; kind?: string }>({
+      const token = ecashToken.value.trim()
+      const res = await rpcClient.call<{ received_sats?: number; kind?: string; mint_url?: string }>({
        method: 'wallet.ecash-receive',
-        params: { token: ecashToken.value.trim() },
+        params: { token },
      })
      const kind = res.kind === 'fedimint' ? 'Fedimint' : 'Cashu'
-      ecashResult.value = res.received_sats != null
-        ? `Received ${res.received_sats.toLocaleString()} sats (${kind})!`
-        : t('receiveBitcoin.tokenReceivedSuccess')
+      const rows: SuccessRow[] = []
+      if (res.mint_url) rows.push({ label: 'Mint', value: res.mint_url })
+      rows.push({
+        label: kind === 'Fedimint' ? 'Notes redeemed' : 'Token redeemed',
+        value: token,
+        hint: 'Keep this if you ever need to show what was redeemed.',
+        truncate: true,
+      })
+      receiveSuccess.value = {
+        amount: res.received_sats || 0,
+        verb: 'RECEIVED',
+        methodLabel: kind,
+        rows,
+      }
+      ecashToken.value = ''
      emit('received')
    }
  } catch (err: unknown) {
@@ -188,17 +188,6 @@
          </div>
        </div>

-        <div v-if="ecashToken" class="mb-3 p-2 bg-white/5 rounded-lg">
-          <p class="text-white/50 text-xs mb-1">{{ t('sendBitcoin.tokenShareLabel') }}</p>
-          <!-- QR so the recipient can scan the token straight off this screen
-               (animated multi-frame not needed: qrcode handles these sizes). -->
-          <div class="flex justify-center my-2">
-            <canvas ref="tokenQrCanvas" class="rounded-lg bg-white p-2"></canvas>
-          </div>
-          <p class="text-xs font-mono text-white/80 break-all">{{ ecashToken }}</p>
-          <CopyButton :value="ecashToken" :label="t('common.copy')" size="sm" class="mt-2" />
-        </div>
-
        <div v-if="error" class="mb-3 alert-error">{{ error }}</div>

        <div class="flex gap-3">
@@ -218,12 +207,11 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
 import { useLightningRequired } from '@/composables/useLightningRequired'
 import BaseModal from '@/components/BaseModal.vue'
-import CopyButton from '@/components/CopyButton.vue'
 import PaymentSuccessPane, { type SuccessRow } from '@/components/PaymentSuccessPane.vue'

 const { t } = useI18n()
@@ -285,9 +273,9 @@ const successInfo = ref<{
  methodLabel: string
  hash?: string
  txid?: string
+  rows?: SuccessRow[]
  note?: string
 } | null>(null)
-const ecashToken = ref('')

 // The identifiers worth keeping from a completed send, in the shape the
 // shared success pane takes. Which ones exist depends on the rail: Lightning
@@ -298,6 +286,7 @@ const successRows = computed<SuccessRow[]>(() => {
  const rows: SuccessRow[] = []
  if (info.hash) rows.push({ label: 'Payment hash', value: info.hash })
  if (info.txid) rows.push({ label: 'Transaction ID', value: info.txid })
+  if (info.rows) rows.push(...info.rows)
  return rows
 })

@@ -346,7 +335,6 @@ watch(() => props.show, (shown) => {
  dest.value = ''
  error.value = ''
  successInfo.value = null
-  ecashToken.value = ''
  sendAll.value = false
  onchainBalance.value = null
  feePreset.value = 'standard'
@@ -569,7 +557,6 @@ async function review() {

 function close() {
  error.value = ''
-  ecashToken.value = ''
  confirming.value = false
  successInfo.value = null
  emit('close')
@@ -585,24 +572,12 @@ function sendAnother() {
  error.value = ''
 }

-const tokenQrCanvas = ref<HTMLCanvasElement | null>(null)
-watch(ecashToken, async (token) => {
-  if (!token) return
-  await nextTick()
-  if (!tokenQrCanvas.value) return
-  try {
-    const QRCode = await import('qrcode')
-    await QRCode.toCanvas(tokenQrCanvas.value, token, { width: 220, margin: 1 })
-  } catch { /* QR is a convenience — the copyable text is authoritative */ }
-})
-
 async function send() {
  if (processing.value) return
  // Zero typed amount is fine when the invoice fixes the amount or we sweep.
  if (!amount.value && !isSweep.value && invoiceAmountSats.value === null) return
  processing.value = true
  error.value = ''
-  ecashToken.value = ''

  const method = effectiveMethod.value
  const paidAmount = confirmAmount.value
@@ -621,14 +596,32 @@ async function send() {
        method: 'wallet.ecash-send',
        params: { amount_sats: amount.value },
      })
-      ecashToken.value = res.token
+      successInfo.value = {
+        amount: paidAmount,
+        methodLabel: 'Sent as Cashu',
+        rows: [{
+          label: 'Token to share',
+          value: res.token,
+          hint: 'The recipient needs this token to claim the sats. Keep it until they confirm receipt.',
+          truncate: true,
+        }],
+      }
    } else if (method === 'fedimint') {
      const res = await rpcClient.call<{ token: string }>({
        method: 'wallet.fedimint-send',
        params: { amount_sats: amount.value },
        timeout: 60000,
      })
-      ecashToken.value = res.token
+      successInfo.value = {
+        amount: paidAmount,
+        methodLabel: 'Sent as Fedimint ecash',
+        rows: [{
+          label: 'Notes to share',
+          value: res.token,
+          hint: 'The recipient needs these notes to claim the sats. Keep them until they confirm receipt.',
+          truncate: true,
+        }],
+      }
    } else if (method === 'lightning') {
      if (!dest.value.trim()) { error.value = t('web5.pasteInvoice'); return }
      // Waits out slow multi-hop routing and only reports failure when LND
@@ -681,7 +674,7 @@ async function send() {
      }
    }
    emit('sent')
-    // Success pane (or the token pane for ecash mints) takes over the modal.
+    // The shared success pane takes over the modal for every payment rail.
    confirming.value = false
  } catch (err: unknown) {
    // Running node with nothing to pay with -> funding modal, not a raw string.
@@ -234,35 +234,16 @@
            </div>

            <!-- ============ SUCCESS PANE ============ -->
-            <div v-else key="success" class="text-center py-2">
-              <div class="scan-success-badge mx-auto mb-5">
-                <ScreensaverRing size="badge" />
-                <div class="scan-success-core">
-                  <svg class="w-14 h-14 text-green-400" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                  </svg>
-                </div>
-              </div>
-
-              <div v-if="successAmount > 0" class="text-5xl font-black text-green-400 mb-1">
-                {{ successAmount.toLocaleString() }}<span class="text-2xl font-bold text-green-400/70"> sats</span>
-              </div>
-              <div class="text-2xl font-bold tracking-widest text-white mb-2">{{ successVerb }}</div>
-              <p class="text-sm text-white/50 mb-1">{{ successDetail }}</p>
-              <p v-if="successRef" class="text-[11px] text-white/30 font-mono break-all px-4 mb-4">{{ successRef }}</p>
-
-              <div v-if="balance !== null" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 text-xs text-white/60 mb-5">
-                <span :class="railColor">{{ railLabel }}</span>
-                <span>balance now {{ balance.toLocaleString() }} sats</span>
-              </div>
-
-              <button
-                @click="close"
-                class="w-full py-3 rounded-xl font-semibold text-base bg-white/10 hover:bg-white/20 text-white transition-colors"
-              >
-                Done
-              </button>
-            </div>
+            <PaymentSuccessPane
+              v-else
+              key="success"
+              :amount="successAmount"
+              :verb="successVerb"
+              :method-label="railLabel"
+              :rows="successRows"
+              :note="successNote"
+              @done="close"
+            />
          </Transition>
        </div>
      </div>
@@ -277,7 +258,7 @@ import { rpcClient } from '@/api/rpc-client'
 import { useAnimatedQRDecoder } from '@/composables/useAnimatedQRDecoder'
 import { useModalKeyboard } from '@/composables/useModalKeyboard'
 import { useBodyScrollLock } from '@/composables/useBodyScrollLock'
-import ScreensaverRing from '@/components/ScreensaverRing.vue'
+import PaymentSuccessPane, { type SuccessRow } from '@/components/PaymentSuccessPane.vue'

 type Rail = 'onchain' | 'lightning' | 'cashu' | 'fedimint'
 type Action = 'pay-invoice' | 'send-onchain' | 'redeem-token' | 'fedimint-join'
@@ -706,6 +687,26 @@ const successAmount = ref(0)
 const successVerb = ref('SENT')
 const successDetail = ref('')
 const successRef = ref('')
+const successRows = computed<SuccessRow[]>(() => {
+  if (action.value === 'redeem-token' && dest.value) {
+    return [{
+      label: rail.value === 'fedimint' ? 'Notes redeemed' : 'Token redeemed',
+      value: dest.value,
+      hint: 'Keep this if you ever need to show what was redeemed.',
+      truncate: true,
+    }]
+  }
+  if (!successRef.value) return []
+  return [{
+    label: action.value === 'pay-invoice' ? 'Payment hash' : 'Transaction ID',
+    value: successRef.value,
+  }]
+})
+const successNote = computed(() => {
+  const parts = [successDetail.value]
+  if (balance.value !== null) parts.push(`${railLabel.value} balance now ${balance.value.toLocaleString()} sats.`)
+  return parts.filter(Boolean).join(' ')
+})

 async function confirmSend() {
  if (processing.value) return
@@ -798,6 +799,10 @@ function resetAll() {
  balance.value = null
  processing.value = false
  error.value = ''
+  successAmount.value = 0
+  successVerb.value = 'SENT'
+  successDetail.value = ''
+  successRef.value = ''
 }

 function close() {
@@ -868,34 +873,4 @@ onUnmounted(stopScanning)
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
 }

-/* Paid tick (FED-06) — same composition as SendBitcoinModal: the branded
-   ScreensaverRing badge with the emerald checkmark core centred over it. */
-.scan-success-badge {
-  position: relative;
-  width: 160px;
-  height: 160px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-@media (min-width: 768px) {
-  .scan-success-badge {
-    width: 192px;
-    height: 192px;
-  }
-}
-.scan-success-core {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 6rem;
-  height: 6rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  background: rgba(16, 185, 129, 0.12);
-  box-shadow: 0 0 40px rgba(16, 185, 129, 0.25);
-}
 </style>
@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import IdentitySuccessPane from '../IdentitySuccessPane.vue'
+
+describe('IdentitySuccessPane', () => {
+  it('shows the saved identity, relay coverage, event id, and identity animation', () => {
+    const wrapper = mount(IdentitySuccessPane, {
+      props: {
+        identityName: 'Alice', eventId: 'abc123', accepted: 2, attempted: 3,
+        relayNote: 'One relay rejected the event.',
+      },
+    })
+    expect(wrapper.text()).toContain('IDENTITY UPDATED')
+    expect(wrapper.text()).toContain('Alice is updated on this node.')
+    expect(wrapper.text()).toContain('Published to 2/3 configured relays.')
+    expect(wrapper.text()).toContain('abc123')
+    expect(wrapper.text()).toContain('One relay rejected')
+    expect(wrapper.find('.nostr-orb-success').exists()).toBe(true)
+  })
+
+  it('reports a local-only save without claiming relay publication', () => {
+    const wrapper = mount(IdentitySuccessPane, {
+      props: { identityName: 'Alice', accepted: 0, attempted: 0 },
+    })
+    expect(wrapper.text()).toContain('Saved locally; no relay publication was attempted.')
+  })
+})
@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import NostrSignConsent from '../NostrSignConsent.vue'
+
+const baseProps = {
+  show: true,
+  appName: 'GitWorkshop',
+  method: 'signEvent',
+  identityLabel: 'Personal',
+  eventKind: 1621,
+}
+
+describe('NostrSignConsent', () => {
+  it('renders as a contained absolute overlay, not a body teleport', () => {
+    const wrapper = mount(NostrSignConsent, { props: baseProps })
+    expect(wrapper.findComponent({ name: 'Teleport' }).exists()).toBe(false)
+    expect(wrapper.find('.absolute.inset-0').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Approve this request?')
+    expect(wrapper.text()).toContain('Git issue')
+  })
+
+  it('uses the shared identity animation while the node signs', () => {
+    const wrapper = mount(NostrSignConsent, { props: { ...baseProps, phase: 'signing' } })
+    expect(wrapper.text()).toContain('Signing locally…')
+    expect(wrapper.find('.nostr-orb-loading').exists()).toBe(true)
+    expect(wrapper.findAll('.nostr-orb-segment')).toHaveLength(48)
+    expect(wrapper.text()).not.toContain('Approve')
+  })
+
+  it('shows a short in-app completion state', () => {
+    const wrapper = mount(NostrSignConsent, { props: { ...baseProps, phase: 'success' } })
+    expect(wrapper.text()).toContain('Request signed')
+    expect(wrapper.find('.nostr-orb-success').exists()).toBe(true)
+  })
+})
@@ -69,8 +69,8 @@ describe('paid tick renders the branded ring (FED-06)', () => {
    const rings = wrapper.findAllComponents(ScreensaverRing)
    expect(rings).toHaveLength(1)
    expect(rings[0]?.props('size')).toBe('badge')
-    expect(document.querySelector('.scan-success-core')).not.toBeNull()
-    expect(document.querySelector('svg path[d="M5 13l4 4L19 7"]')).not.toBeNull()
+    expect(document.querySelector('.burst-core')).not.toBeNull()
+    expect(document.querySelector('.burst-check')).not.toBeNull()
    // The plain fixed-size circle the ring replaced is gone.
    expect(document.querySelectorAll('.success-ring')).toHaveLength(0)

@@ -0,0 +1,88 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import SendBitcoinModal from '../SendBitcoinModal.vue'
+import ReceiveBitcoinModal from '../ReceiveBitcoinModal.vue'
+import i18n from '@/i18n'
+import { rpcClient } from '@/api/rpc-client'
+
+vi.mock('@/api/rpc-client', () => ({
+  rpcClient: {
+    call: vi.fn(),
+    payLightningInvoice: vi.fn(),
+  },
+}))
+
+vi.mock('qrcode', () => ({
+  toCanvas: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock('@/composables/useLightningRequired', () => ({
+  useLightningRequired: () => ({
+    requireLightningReady: vi.fn().mockResolvedValue(true),
+    handleLightningFailure: vi.fn().mockReturnValue(false),
+  }),
+}))
+
+afterEach(() => {
+  vi.clearAllMocks()
+  document.body.innerHTML = ''
+})
+
+describe('payment completion receipts', () => {
+  it('replaces the Cashu send form and keeps the token copyable', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValue({ token: 'cashuB-test-token' } as never)
+    const wrapper = mount(SendBitcoinModal, {
+      props: { show: true },
+      attachTo: document.body,
+      global: { plugins: [i18n] },
+    })
+    const vm = wrapper.vm as unknown as {
+      sendMethod: string
+      amountEntry: number
+      send: () => Promise<void>
+    }
+    vm.sendMethod = 'ecash'
+    vm.amountEntry = 2100
+
+    await vm.send()
+    await flushPromises()
+
+    expect(document.body.textContent).toContain('2,100')
+    expect(document.body.textContent).toContain('SENT')
+    expect(document.body.textContent).toContain('cashuB-test-token')
+    expect(document.body.textContent).toContain('Token to share')
+    expect(document.body.querySelector('textarea')).toBeNull()
+    expect(document.body.querySelector('input[type="number"]')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('replaces the ecash receive form and preserves the redeemed token and mint', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValue({
+      received_sats: 42,
+      kind: 'cashu',
+      mint_url: 'https://mint.example',
+    } as never)
+    const wrapper = mount(ReceiveBitcoinModal, {
+      props: { show: true },
+      attachTo: document.body,
+      global: { plugins: [i18n] },
+    })
+    const vm = wrapper.vm as unknown as {
+      receiveMethod: string
+      ecashToken: string
+      receive: () => Promise<void>
+    }
+    vm.receiveMethod = 'ecash'
+    vm.ecashToken = 'cashuB-redeemed-token'
+
+    await vm.receive()
+    await flushPromises()
+
+    expect(document.body.textContent).toContain('42')
+    expect(document.body.textContent).toContain('RECEIVED')
+    expect(document.body.textContent).toContain('https://mint.example')
+    expect(document.body.textContent).toContain('cashuB-redeemed-token')
+    expect(document.body.querySelector('textarea')).toBeNull()
+    wrapper.unmount()
+  })
+})
@@ -1,5 +1,5 @@
 import { flushPromises, mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import ReceiveBitcoinModal from '../ReceiveBitcoinModal.vue'
 import { rpcClient } from '@/api/rpc-client'

@@ -27,6 +27,12 @@ vi.mock('@/composables/useLightningRequired', () => ({
  }),
 }))

+beforeEach(() => {
+  vi.useRealTimers()
+  vi.clearAllMocks()
+  document.body.innerHTML = ''
+})
+
 // Guards an operator report (2026-09-08): clicking the Ecash tab appeared to
 // close the whole Receive modal. Not reproduced here — the tab switch alone
 // (success or failure of wallet.ecash-lnaddress) never emits `close` or
@@ -108,4 +114,71 @@ describe('ReceiveBitcoinModal — ecash tab click', () => {
    wrapper.unmount()
    vi.useRealTimers()
  })
+
+  it('shows a recent receipt claimed by another active browser context', async () => {
+    vi.mocked(rpcClient.call).mockImplementation(async ({ method }: { method: string }) => {
+      if (method === 'wallet.ecash-lnaddress') {
+        return { address: 'someone@minibits.cash' } as never
+      }
+      if (method === 'wallet.ecash-lnaddress-claim') {
+        return {
+          received_sats: 0,
+          failed_count: 0,
+          receipt_id: 7,
+          receipt_sats: 1000,
+          receipt_at: Math.floor(Date.now() / 1000),
+        } as never
+      }
+      return {} as never
+    })
+
+    const wrapper = mount(ReceiveBitcoinModal, {
+      props: { show: true },
+      attachTo: document.body,
+    })
+    const ecashTab = Array.from(document.body.querySelectorAll('button')).find((b) =>
+      b.textContent?.toLowerCase().includes('ecash'),
+    )
+    ecashTab!.dispatchEvent(new Event('click', { bubbles: true }))
+    await flushPromises()
+
+    expect(document.body.textContent).toContain('1,000')
+    expect(document.body.textContent).toContain('RECEIVED')
+    expect(document.body.querySelector('textarea')).toBeNull()
+    expect(document.body.querySelectorAll('[role="dialog"]')).toHaveLength(1)
+    expect(document.body.querySelector('[role="dialog"] h3')?.textContent).toBe('Payment received')
+    wrapper.unmount()
+  })
+
+  it('does not replay an older durable receipt when the receive screen is reopened', async () => {
+    vi.mocked(rpcClient.call).mockImplementation(async ({ method }: { method: string }) => {
+      if (method === 'wallet.ecash-lnaddress') {
+        return { address: 'someone@minibits.cash' } as never
+      }
+      if (method === 'wallet.ecash-lnaddress-claim') {
+        return {
+          received_sats: 0,
+          failed_count: 0,
+          receipt_id: 7,
+          receipt_sats: 1000,
+          receipt_at: Math.floor(Date.now() / 1000) - 30,
+        } as never
+      }
+      return {} as never
+    })
+
+    const wrapper = mount(ReceiveBitcoinModal, {
+      props: { show: true },
+      attachTo: document.body,
+    })
+    const ecashTab = Array.from(document.body.querySelectorAll('button')).find((b) =>
+      b.textContent?.toLowerCase().includes('ecash'),
+    )
+    ecashTab!.dispatchEvent(new Event('click', { bubbles: true }))
+    await flushPromises()
+
+    expect(document.body.querySelector('[role="dialog"] h3')?.textContent).not.toBe('Payment received')
+    expect(document.body.querySelector('textarea')).not.toBeNull()
+    wrapper.unmount()
+  })
 })