From 71da2b53fe60482d19441fb7d8074fc450dbb9d4 Mon Sep 17 00:00:00 2001
From: payacom <59262811+payacom@users.noreply.github.com>
Date: Wed, 16 Sep 2026 14:22:51 +0330
Subject: [PATCH] Add coin-flies-to-wallet animation to the gift reveal modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Web mirror of the RN change — same timing constants, same idea: the amount
flies from its pop-in position toward a wallet badge that pulses on
arrival, and the "credited" hint fades in at that moment instead of
showing immediately. Wallet crediting itself was already correctly
deferred server-side until POST /gifts/:id/open.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/chat/GiftRevealModal.tsx | 60 +++++++++++++++++++++----
 src/locales/en/common.json              |  3 +-
 src/locales/fa/common.json              |  3 +-
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/components/chat/GiftRevealModal.tsx b/src/components/chat/GiftRevealModal.tsx
index a3c6815..16ba423 100644
--- a/src/components/chat/GiftRevealModal.tsx
+++ b/src/components/chat/GiftRevealModal.tsx
@@ -7,6 +7,11 @@ import RoundedButton from "@/components/elements/RoundedButton";
 import { useTranslation } from "react-i18next";
 
 const PARTICLES = ["🎉", "🎊", "✨", "🎈", "🎁"];
+// طبقِ خواسته‌ی کاربر: بعدِ باز شدنِ کادو، مبلغ به‌صورتِ انیمیشنی «پرواز» می‌کنه و توی
+// آیکونِ کیف‌پول فرود میاد — همون زمان‌بندی نسخه‌ی اندروید (GiftRevealModal.tsx: Reanimated)
+const COIN_FLY_DELAY_S = 0.75;
+const COIN_FLY_DURATION_S = 0.55;
+const WALLET_ARRIVAL_S = COIN_FLY_DELAY_S + COIN_FLY_DURATION_S;
 
 type Particle = {
   id: number;
@@ -89,14 +94,46 @@ export default function GiftRevealModal({
           🎁
         </motion.div>
 
-        <motion.p
-          initial={{ scale: 0.6, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          transition={{ delay: 0.2, type: "spring", stiffness: 220, damping: 14 }}
-          className="text-2xl font-extrabold text-white drop-shadow"
+        <div className="relative flex items-center justify-center">
+          <motion.p
+            initial={{ scale: 0.6, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ delay: 0.2, type: "spring", stiffness: 220, damping: 14 }}
+            className="text-2xl font-extrabold text-white drop-shadow"
+          >
+            {amount.toLocaleString()} {t("settings.toman")}
+          </motion.p>
+          <motion.span
+            initial={{ opacity: 1, y: 6, scale: 1 }}
+            animate={{ y: 96, scale: 0.45, opacity: 0 }}
+            transition={{
+              delay: COIN_FLY_DELAY_S,
+              duration: COIN_FLY_DURATION_S,
+              ease: "easeIn",
+            }}
+            className="pointer-events-none absolute top-1 text-2xl"
+          >
+            🪙
+          </motion.span>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, scale: 0.6 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.25, type: "spring", stiffness: 240, damping: 18 }}
+          className="flex items-center gap-1.5 rounded-full bg-white/10 px-3.5 py-1.5"
         >
-          {amount.toLocaleString()} {t("settings.toman")}
-        </motion.p>
+          <motion.span
+            animate={{ scale: [1, 1, 1.25, 1] }}
+            transition={{ delay: WALLET_ARRIVAL_S, duration: 0.35, times: [0, 0.4, 0.7, 1] }}
+            className="text-lg"
+          >
+            👛
+          </motion.span>
+          <span className="text-xs font-medium text-white">
+            {t("chats.gift.walletLabel")}
+          </span>
+        </motion.div>
 
         {message ? (
           <motion.p
@@ -109,7 +146,14 @@ export default function GiftRevealModal({
           </motion.p>
         ) : null}
 
-        <p className="text-xs text-white/70">{t("chats.gift.creditedHint")}</p>
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: WALLET_ARRIVAL_S, duration: 0.3 }}
+          className="text-xs text-white/70"
+        >
+          {t("chats.gift.creditedHint")}
+        </motion.p>
 
         <RoundedButton
           type="button"
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
index 76179a2..fda9d63 100644
--- a/src/locales/en/common.json
+++ b/src/locales/en/common.json
@@ -1923,7 +1923,8 @@
       "tapToOpen": "Tap to open",
       "sentSuccess": "Your gift was sent",
       "sending": "Sending…",
-      "creditedHint": "This amount was added to your wallet"
+      "creditedHint": "This amount was added to your wallet",
+      "walletLabel": "Wallet"
     },
     "timedBanner": "Timed message — auto-delete after {{duration}}",
     "viewOnceBanner": "{{label}} — recipient can view only once",
diff --git a/src/locales/fa/common.json b/src/locales/fa/common.json
index 8cb749c..7bb0860 100644
--- a/src/locales/fa/common.json
+++ b/src/locales/fa/common.json
@@ -1923,7 +1923,8 @@
       "tapToOpen": "برای باز کردن لمس کنید",
       "sentSuccess": "هدیه شما ارسال شد",
       "sending": "در حال ارسال…",
-      "creditedHint": "این مبلغ به کیف پول شما اضافه شد"
+      "creditedHint": "این مبلغ به کیف پول شما اضافه شد",
+      "walletLabel": "کیف پول"
     },
     "timedBanner": "پیام زماندار — حذف خودکار بعد از {{duration}}",
     "viewOnceBanner": "{{label}} — گیرنده فقط یک‌بار می‌تواند ببیند",