Fix pool LP lending withdraw and success screen UX

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite_react_shadcn_ts",
   "private": true,
-  "version": "0.1.774",
+  "version": "0.1.776",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/SupplyBorrowCongrats.tsx

@@ -6,6 +6,8 @@ interface SupplyBorrowCongratsProps {
   transactionType: "deposit" | "borrow" | "withdraw" | "repay";
   asset: string;
   assetIcon: string;
+  /** Stacked underlying icons for Tinyman LP pair markets. */
+  assetPairIcons?: { asset1Icon: string; asset2Icon: string };
   amount: string;
   onViewTransaction: () => void;
   onGoToPortfolio: () => void;
@@ -19,6 +21,7 @@ const SupplyBorrowCongrats: React.FC<SupplyBorrowCongratsProps> = ({
   transactionType,
   asset,
   assetIcon,
+  assetPairIcons,
   amount,
   onViewTransaction,
   onGoToPortfolio,
@@ -42,6 +45,7 @@ const SupplyBorrowCongrats: React.FC<SupplyBorrowCongratsProps> = ({
   };
 
   const { action, preposition } = getTransactionMessage();
+  const assetLabel = assetPairIcons ? `${asset} LP` : asset;
 
   return (
     <div className="flex flex-col items-center justify-center gap-4 animate-fade-in">
@@ -50,11 +54,29 @@ const SupplyBorrowCongrats: React.FC<SupplyBorrowCongratsProps> = ({
         <Sparkles className="absolute -top-3 -left-3 text-whale-gold w-7 h-7 animate-bounce" />
         <Sparkles className="absolute -top-3 -right-3 text-highlight-aqua w-7 h-7 animate-bounce animation-delay-300" />
         <CheckCircle2 className="w-16 h-16 text-green-500 drop-shadow-xl bg-white dark:bg-slate-800 rounded-full p-1 border-4 border-whale-gold z-10" />
-        <img
-          src={assetIcon}
-          alt={`${asset} icon`}
-          className="mt-[-30px] w-32 h-32 rounded-xl shadow-md border-4 border-whale-gold mx-auto bg-bubble-white dark:bg-slate-800 object-cover"
-        />
+        {assetPairIcons ? (
+          <div
+            className="mt-[-30px] mx-auto flex -space-x-4 justify-center"
+            aria-hidden
+          >
+            <img
+              src={assetPairIcons.asset1Icon}
+              alt=""
+              className="h-24 w-24 rounded-xl border-4 border-whale-gold bg-bubble-white object-contain shadow-md dark:bg-slate-800"
+            />
+            <img
+              src={assetPairIcons.asset2Icon}
+              alt=""
+              className="h-24 w-24 rounded-xl border-4 border-whale-gold bg-bubble-white object-contain shadow-md dark:bg-slate-800"
+            />
+          </div>
+        ) : (
+          <img
+            src={assetIcon}
+            alt={`${asset} icon`}
+            className="mt-[-30px] w-32 h-32 rounded-xl shadow-md border-4 border-whale-gold mx-auto bg-bubble-white dark:bg-slate-800 object-cover"
+          />
+        )}
       </div>
 
       <h2 className="text-xl font-bold text-center mb-1">
@@ -64,7 +86,7 @@ const SupplyBorrowCongrats: React.FC<SupplyBorrowCongratsProps> = ({
       <div className="text-center text-base text-slate-700 dark:text-slate-200 mb-2 font-medium">
         You successfully {action}{" "}
         <span className="text-whale-gold">
-          {amount} {asset}
+          {amount} {assetLabel}
         </span>{" "}
         {preposition} the protocol.
       </div>

src/components/SupplyBorrowModal.tsx

@@ -3284,6 +3284,7 @@ const SupplyBorrowModal = ({
               transactionType={mode}
               asset={asset}
               assetIcon={assetData.icon}
+              assetPairIcons={assetPairIcons}
               amount={amount}
               onViewTransaction={handleViewTransaction}
               onGoToPortfolio={handleGoToPortfolio}

src/components/WithdrawModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef } from "react";
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import {
   Dialog,
   DialogContent,
@@ -217,6 +217,8 @@ interface WithdrawModalProps {
   showTooltip?: boolean;
   tooltipText?: string;
   onRefreshBalance?: () => void;
+  /** Called after a successful withdraw is shown (deferred so success UI renders first). */
+  onTransactionSuccess?: () => void;
   /** Lending pool (for pool-scoped LT / est. health, same as deposit modal). */
   poolId?: string;
   network?: string;
@@ -280,6 +282,7 @@ const WithdrawModal = ({
   showTooltip = false,
   tooltipText = "",
   onRefreshBalance,
+  onTransactionSuccess,
   poolId,
   network: networkProp,
   poolCollateralMarkets,
@@ -325,6 +328,10 @@ const WithdrawModal = ({
   const [fiatValue, setFiatValue] = useState(0);
   const [showSuccess, setShowSuccess] = useState(false);
   const [successTxId, setSuccessTxId] = useState<string | null>(null);
+  const [successSnapshot, setSuccessSnapshot] = useState<{
+    amount: string;
+    asset: string;
+  } | null>(null);
   const [pendingWithdrawReview, setPendingWithdrawReview] =
     useState<WithdrawPhasedSignPayload | null>(null);
   const [isSigningWithdrawPhase, setIsSigningWithdrawPhase] = useState(false);
@@ -846,6 +853,7 @@ const WithdrawModal = ({
     if (isOpen) {
       setShowSuccess(false);
       setSuccessTxId(null);
+      setSuccessSnapshot(null);
       setPendingWithdrawReview(null);
       setIsSigningWithdrawPhase(false);
       setAmount("");
@@ -903,6 +911,7 @@ const WithdrawModal = ({
   const handleMakeAnother = () => {
     setShowSuccess(false);
     setSuccessTxId(null);
+    setSuccessSnapshot(null);
     setPendingWithdrawReview(null);
     setAmount("");
     setFiatValue(0);
@@ -1015,6 +1024,75 @@ const WithdrawModal = ({
     return base;
   };
 
+  const completeWithdrawSuccess = useCallback(
+    (opts: {
+      txId: string | null;
+      amountHuman: string;
+      assetLabel: string;
+    }) => {
+      setSuccessSnapshot({
+        amount: opts.amountHuman,
+        asset: opts.assetLabel,
+      });
+      setSuccessTxId(opts.txId);
+      setPendingWithdrawReview(null);
+      setFolksWithdrawTwoStepAwaitRedeem(null);
+      setShowSuccess(true);
+      if (onTransactionSuccess) {
+        window.setTimeout(() => onTransactionSuccess(), 1500);
+      }
+    },
+    [onTransactionSuccess]
+  );
+
+  const finishWithdrawFlow = useCallback(
+    (
+      opts: {
+        txId: string | null;
+        amountHuman: string;
+        assetLabel: string;
+      },
+      rainbowkitDismiss: boolean
+    ) => {
+      setPendingWithdrawReview(null);
+      setFolksWithdrawTwoStepAwaitRedeem(null);
+      if (rainbowkitDismiss) {
+        setShowSuccess(false);
+        setSuccessSnapshot(null);
+        toast({
+          title: "Withdraw confirmed",
+          description:
+            "Your transaction was submitted. The portfolio will update shortly.",
+        });
+        if (onTransactionSuccess) {
+          window.setTimeout(() => onTransactionSuccess(), 1500);
+        }
+        onClose();
+        return;
+      }
+      completeWithdrawSuccess(opts);
+    },
+    [completeWithdrawSuccess, onClose, onTransactionSuccess, toast]
+  );
+
+  const resolveSuccessAssetLabel = useCallback(
+    (pending?: WithdrawPhasedSignPayload | null) => {
+      if (pending?.assetDisplaySymbol?.trim()) {
+        return pending.assetDisplaySymbol.trim();
+      }
+      if (withdrawAmountIsUnderlying || withdrawFolksAdapters.length > 0) {
+        return effectiveAmountLabelSymbol;
+      }
+      return tokenSymbol;
+    },
+    [
+      effectiveAmountLabelSymbol,
+      tokenSymbol,
+      withdrawAmountIsUnderlying,
+      withdrawFolksAdapters.length,
+    ]
+  );
+
   const handleSubmit = async () => {
     setInternalLoading(true);
     try {
@@ -1174,8 +1252,8 @@ const WithdrawModal = ({
           ? String(meta.txId).trim()
           : null;
       const atomic = meta?.fAssetToRedeemAtomic?.trim();
-      setSuccessTxId(tx);
-      setPendingWithdrawReview(null);
+      const rainbowkitDismiss =
+        isRainbowkitXchainWallet(activeWallet) && !withdrawTwoStepChainFailed;
 
       if (
         atomic &&
@@ -1199,15 +1277,21 @@ const WithdrawModal = ({
             duration: 10000,
           });
           const meta2 = await signAndFinalize(step2Built);
-          setPendingWithdrawReview(null);
-          setFolksWithdrawTwoStepAwaitRedeem(null);
           const tx2 =
             meta2?.txId != null && String(meta2.txId).trim() !== ""
               ? String(meta2.txId).trim()
               : null;
-          setSuccessTxId(tx2);
           if (!meta2?.skipSuccessModal) {
-            setShowSuccess(true);
+            finishWithdrawFlow(
+              {
+                txId: tx2,
+                amountHuman: step2Built.amountHuman,
+                assetLabel: resolveSuccessAssetLabel(step2Built),
+              },
+              rainbowkitDismiss
+            );
+          } else {
+            setPendingWithdrawReview(null);
           }
         } catch (chainErr) {
           withdrawTwoStepChainFailed = true;
@@ -1231,23 +1315,18 @@ const WithdrawModal = ({
       } else {
         const skipCongrats = meta?.skipSuccessModal === true;
         if (!skipCongrats) {
-          setFolksWithdrawTwoStepAwaitRedeem(null);
-          setShowSuccess(true);
+          finishWithdrawFlow(
+            {
+              txId: tx,
+              amountHuman: pendingStep1.amountHuman,
+              assetLabel: resolveSuccessAssetLabel(pendingStep1),
+            },
+            rainbowkitDismiss
+          );
+        } else {
+          setPendingWithdrawReview(null);
         }
       }
-
-      if (
-        isRainbowkitXchainWallet(activeWallet) &&
-        !withdrawTwoStepChainFailed
-      ) {
-        setShowSuccess(false);
-        toast({
-          title: "Withdraw confirmed",
-          description:
-            "Your transaction was submitted. The portfolio will update shortly.",
-        });
-        onClose();
-      }
     } catch (error) {
       if (isRainbowkitXchainWallet(activeWallet)) {
         setRainbowkitSignDialogSuppressed(false);
@@ -1292,12 +1371,17 @@ const WithdrawModal = ({
             <SupplyBorrowCongrats
               transactionType="withdraw"
               asset={
-                withdrawAmountIsUnderlying || withdrawFolksAdapters.length > 0
+                successSnapshot?.asset ??
+                (withdrawAmountIsUnderlying || withdrawFolksAdapters.length > 0
                   ? effectiveAmountLabelSymbol
-                  : tokenSymbol
+                  : tokenSymbol)
               }
               assetIcon={tokenIcon}
-              amount={amount !== "" ? amount.toString() : ""}
+              assetPairIcons={tokenPairIcons}
+              amount={
+                successSnapshot?.amount ??
+                (amount !== "" ? amount.toString() : "")
+              }
               onViewTransaction={handleViewTransaction}
               onGoToPortfolio={handleGoToPortfolio}
               onMakeAnother={handleMakeAnother}