From 55dbb1005ef72195d55cbe51f46b6bc3689ba6d3 Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Thu, 9 Jul 2026 22:26:28 +0200
Subject: [PATCH] fix(ui): scope the wallet buy-button busy dim to the tapped
 button

Tapping one pack's Buy dimmed every buy button at once (the shared busy
flag drove disabled + the :disabled opacity on all of them), so it looked
like both packs reacted to one tap. Track the in-flight product id
(busyId): the concurrency guard stays global, but the pressed/dimmed look
is now scoped to the tapped button. Payments were never affected.
---
 ui/src/screens/Wallet.svelte | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui/src/screens/Wallet.svelte b/ui/src/screens/Wallet.svelte
index 3627786..bded17e 100644
--- a/ui/src/screens/Wallet.svelte
+++ b/ui/src/screens/Wallet.svelte
@@ -21,7 +21,10 @@
   let wallet = $state<Wallet | null>(null);
   let catalog = $state<Catalog | null>(null);
   let loading = $state(true);
-  let busy = $state(false);
+  // The product whose purchase is in flight, or null. It both guards against a concurrent purchase
+  // (busy) and scopes the pressed/dimmed visual to the tapped button — not every buy button.
+  let busyId = $state<string | null>(null);
+  const busy = $derived(busyId !== null);
   // The value awaiting a web-spend warning confirmation (a spend that would draw vk/tg chips).
   let warnProduct = $state<CatalogProduct | null>(null);
 
@@ -99,13 +102,13 @@
   async function doBuy(p: CatalogProduct) {
     warnProduct = null;
     if (busy) return;
-    busy = true;
+    busyId = p.productId;
     try {
       wallet = await gateway.walletBuy(p.productId);
     } catch (e) {
       handleError(e);
     } finally {
-      busy = false;
+      busyId = null;
     }
   }
 
@@ -114,7 +117,7 @@
   // paying accepts the public offer (linked below the packs).
   async function onOrder(p: CatalogProduct) {
     if (busy) return;
-    busy = true;
+    busyId = p.productId;
     try {
       const order = await gateway.walletOrder(p.productId);
       if (context === 'vk') {
@@ -134,7 +137,7 @@
     } catch (e) {
       handleError(e);
     } finally {
-      busy = false;
+      busyId = null;
     }
   }
 </script>
@@ -172,7 +175,9 @@
       <div class="row product" data-testid="product" data-kind="value" data-pid={p.productId}>
         <span class="name">{p.title}</span>
         <span class="price">🪙 {p.chips}</span>
-        <button class="buy" data-testid="buy" disabled={busy} onclick={() => onBuy(p)}>{t('wallet.buy')}</button>
+        <button class="buy" class:working={busyId === p.productId} data-testid="buy" disabled={busy} onclick={() => onBuy(p)}
+          >{t('wallet.buy')}</button
+        >
       </div>
     {/each}
 
@@ -186,6 +191,7 @@
           <button
             class="buy"
             class:blocked={purchaseBlocked}
+            class:working={busyId === p.productId}
             data-testid="buy-pack"
             disabled={busy}
             onclick={() => {
@@ -271,10 +277,12 @@
     cursor: pointer;
   }
   .buy:disabled {
-    opacity: 0.5;
     cursor: default;
   }
-  .buy.blocked {
+  /* The dimmed look is scoped: the tapped button while its purchase is in flight (working), or a
+     blocked pack on VK iOS — never every buy button at once when one purchase is busy. */
+  .buy.blocked,
+  .buy.working {
     opacity: 0.5;
   }
   .ios-note {