From b163d30a0e9fc99ed48c648269372d5ac7a6905a Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Fri, 24 Jul 2026 06:34:56 -0400
Subject: [PATCH] =?UTF-8?q?feat(wallet):=20send=20success=20screen=20?=
 =?UTF-8?q?=E2=80=94=20burst=20animation=20+=20copyable=20payment=20hash?=
 =?UTF-8?q?=20/=20txid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A settled payment now takes over the modal: animated check with radiating
rings (emerald + one Archipelago-orange), the amount large, method label,
then copyable payment hash (lightning) / transaction ID (on-chain) and a
settling note, with Send-another / Done. Replaces the old alert-line at the
bottom of the form. Reduced-motion honored.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 neode-ui/src/components/SendBitcoinModal.vue | 170 ++++++++++++++++---
 1 file changed, 146 insertions(+), 24 deletions(-)

diff --git a/neode-ui/src/components/SendBitcoinModal.vue b/neode-ui/src/components/SendBitcoinModal.vue
index 76d594c7..c1474628 100644
--- a/neode-ui/src/components/SendBitcoinModal.vue
+++ b/neode-ui/src/components/SendBitcoinModal.vue
@@ -1,7 +1,58 @@
 <template>
   <BaseModal :show="show" :title="t('web5.sendBitcoinTitle')" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
+        <!-- ============ SUCCESS PANE — the payment's moment, not a footnote ============ -->
+        <template v-if="successInfo">
+          <div class="text-center py-4">
+            <div class="send-success-burst mx-auto mb-6">
+              <span class="burst-ring"></span>
+              <span class="burst-ring burst-ring-2"></span>
+              <span class="burst-ring burst-ring-3"></span>
+              <div class="burst-core">
+                <svg class="w-14 h-14 text-green-400 burst-check" 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="successInfo.amount > 0" class="text-5xl font-black text-green-400 mb-1">
+              {{ successInfo.amount.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-1">SENT</div>
+            <p class="text-sm text-white/50 mb-6">{{ successInfo.methodLabel }}</p>
+
+            <div v-if="successInfo.hash || successInfo.txid || successInfo.note" class="p-4 bg-white/5 rounded-xl text-left space-y-4 mb-6">
+              <div v-if="successInfo.hash">
+                <p class="text-xs text-white/50 mb-1">Payment hash</p>
+                <div class="flex items-center gap-2">
+                  <p class="flex-1 text-xs font-mono text-white/80 break-all">{{ successInfo.hash }}</p>
+                  <button
+                    class="shrink-0 px-2.5 py-1.5 rounded-lg text-xs glass-button"
+                    @click="copyDetail(successInfo.hash)"
+                  >{{ copiedDetail === successInfo.hash ? 'Copied!' : 'Copy' }}</button>
+                </div>
+              </div>
+              <div v-if="successInfo.txid">
+                <p class="text-xs text-white/50 mb-1">Transaction ID</p>
+                <div class="flex items-center gap-2">
+                  <p class="flex-1 text-xs font-mono text-white/80 break-all">{{ successInfo.txid }}</p>
+                  <button
+                    class="shrink-0 px-2.5 py-1.5 rounded-lg text-xs glass-button"
+                    @click="copyDetail(successInfo.txid)"
+                  >{{ copiedDetail === successInfo.txid ? 'Copied!' : 'Copy' }}</button>
+                </div>
+              </div>
+              <p v-if="successInfo.note" class="text-xs text-white/60">{{ successInfo.note }}</p>
+            </div>
+
+            <div class="flex gap-3">
+              <button @click="sendAnother" class="flex-1 glass-button px-4 py-3 rounded-xl text-sm font-medium">Send another</button>
+              <button @click="close" class="flex-1 glass-button glass-button-warning px-4 py-3 rounded-xl text-sm font-semibold">Done</button>
+            </div>
+          </div>
+        </template>
+
         <!-- ============ CONFIRM PANE (second step, mirrors the scan flow) ============ -->
-        <template v-if="confirming">
+        <template v-else-if="confirming">
           <div class="mb-3 p-3 bg-white/5 rounded-lg">
             <div class="flex items-center justify-between mb-2">
               <span class="text-xs text-white/50">Method</span>
@@ -125,16 +176,6 @@
           <button @click="copyText(ecashToken)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">{{ t('common.copy') }}</button>
         </div>
 
-        <div v-if="resultTxid" class="mb-3 alert-success">
-          <p class="text-xs">{{ t('sendBitcoin.sentTx', { txid: resultTxid }) }}</p>
-        </div>
-        <div v-if="resultHash" class="mb-3 alert-success">
-          <p class="text-xs">{{ t('sendBitcoin.paidHash', { hash: resultHash }) }}</p>
-        </div>
-        <div v-if="resultArk" class="mb-3 alert-success">
-          <p class="text-xs">{{ resultArk }}</p>
-        </div>
-
         <div v-if="error" class="mb-3 alert-error">{{ error }}</div>
 
         <div class="flex gap-3">
@@ -171,9 +212,23 @@ const amount = ref<number>(0)
 const dest = ref('')
 const processing = ref(false)
 const error = ref('')
-const resultTxid = ref('')
-const resultHash = ref('')
-const resultArk = ref('')
+// Set on a completed send — flips the modal to the success pane.
+const successInfo = ref<{
+  amount: number
+  methodLabel: string
+  hash?: string
+  txid?: string
+  note?: string
+} | null>(null)
+const copiedDetail = ref('')
+
+function copyDetail(text: string) {
+  navigator.clipboard.writeText(text).catch(() => {})
+  copiedDetail.value = text
+  setTimeout(() => {
+    if (copiedDetail.value === text) copiedDetail.value = ''
+  }, 1500)
+}
 const ecashToken = ref('')
 
 // "Send all funds" — sweeps the whole on-chain balance (explicit on-chain tab only)
@@ -318,14 +373,22 @@ function review() {
 
 function close() {
   error.value = ''
-  resultTxid.value = ''
-  resultHash.value = ''
-  resultArk.value = ''
   ecashToken.value = ''
   confirming.value = false
+  successInfo.value = null
   emit('close')
 }
 
+/** Reset the form for a fresh payment straight from the success screen. */
+function sendAnother() {
+  successInfo.value = null
+  confirming.value = false
+  dest.value = ''
+  amount.value = 0
+  sendAll.value = false
+  error.value = ''
+}
+
 function copyText(text: string) {
   navigator.clipboard.writeText(text).catch(() => {})
 }
@@ -348,11 +411,9 @@ async function send() {
   processing.value = true
   error.value = ''
   ecashToken.value = ''
-  resultTxid.value = ''
-  resultHash.value = ''
-  resultArk.value = ''
 
   const method = effectiveMethod.value
+  const paidAmount = confirmAmount.value
   try {
     if (method === 'ark') {
       if (!dest.value.trim()) { error.value = 'Enter an Ark address, invoice or lightning address'; return }
@@ -362,7 +423,7 @@ async function send() {
         // Ark sends can wait on round participation.
         timeout: 130000,
       })
-      resultArk.value = `Sent ${amount.value.toLocaleString()} sats via Ark`
+      successInfo.value = { amount: paidAmount, methodLabel: 'Sent via Ark', note: 'The transfer settles with the next Ark round.' }
     } else if (method === 'ecash') {
       const res = await rpcClient.call<{ token: string }>({
         method: 'wallet.ecash-send',
@@ -382,7 +443,7 @@ async function send() {
         method: 'lnd.payinvoice',
         params: { payment_request: dest.value.trim() },
       })
-      resultHash.value = res.payment_hash
+      successInfo.value = { amount: paidAmount, methodLabel: 'Paid over Lightning', hash: res.payment_hash }
     } else {
       if (!dest.value.trim()) { error.value = t('web5.enterBitcoinAddress'); return }
       const res = await rpcClient.call<{ txid: string }>({
@@ -391,10 +452,15 @@ async function send() {
           ? { addr: dest.value.trim(), send_all: true }
           : { addr: dest.value.trim(), amount: amount.value },
       })
-      resultTxid.value = res.txid
+      successInfo.value = {
+        amount: paidAmount,
+        methodLabel: isSweep.value ? 'Swept on-chain' : 'Sent on-chain',
+        txid: res.txid,
+        note: 'On-chain payments confirm over the next blocks.',
+      }
     }
     emit('sent')
-    // Back to the form pane so the success/token panes are visible.
+    // Success pane (or the token pane for ecash mints) takes over the modal.
     confirming.value = false
   } catch (err: unknown) {
     error.value = err instanceof Error ? err.message : t('web5.sendFailed')
@@ -403,3 +469,59 @@ async function send() {
   }
 }
 </script>
+
+<style scoped>
+/* Success burst — pop-in check inside radiating rings, wallet palette
+   (emerald for the settled payment, one Archipelago-orange ring). */
+.send-success-burst {
+  position: relative;
+  width: 7rem;
+  height: 7rem;
+}
+.burst-core {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: rgba(16, 185, 129, 0.12);
+  box-shadow: 0 0 48px rgba(16, 185, 129, 0.3);
+  animation: burst-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4) both;
+}
+.burst-check {
+  stroke-dasharray: 32;
+  stroke-dashoffset: 32;
+  animation: burst-draw 0.45s ease-out 0.25s forwards;
+}
+.burst-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  border: 2px solid rgba(16, 185, 129, 0.45);
+  animation: burst-ripple 1.8s ease-out infinite;
+}
+.burst-ring-2 {
+  animation-delay: 0.45s;
+}
+.burst-ring-3 {
+  animation-delay: 0.9s;
+  border-color: rgba(249, 115, 22, 0.35);
+}
+@keyframes burst-pop {
+  from { transform: scale(0.3); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+@keyframes burst-draw {
+  to { stroke-dashoffset: 0; }
+}
+@keyframes burst-ripple {
+  0% { transform: scale(0.7); opacity: 0.9; }
+  100% { transform: scale(2); opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .burst-core, .burst-check, .burst-ring { animation: none; }
+  .burst-check { stroke-dashoffset: 0; }
+  .burst-ring { display: none; }
+}
+</style>