adding actual amounts and fees to confirmation pages for swap, stake and unstake

src/components/stake-form.tsx

@@ -7,8 +7,8 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { ChevronDown, CheckCircle, XCircle, Loader2, ArrowDownUp } from 'lucide-react';
 import { useAccount } from 'wagmi';
-import { useGetAllPools, useTokenDetails, useSwapMintAmounts, useBurnSwapAmounts, useLPTokenBalance, type PoolDetails, type TokenDetails } from '@/hooks/usePartyPlanner';
-import { useSwapMint, useBurnSwap } from '@/hooks/usePartyPool';
+import { useGetAllPools, useTokenDetails, useSwapMintAmounts, useBurnSwapAmounts, useLPTokenBalance, type PoolDetails, type TokenDetails, type BurnSwapAmounts } from '@/hooks/usePartyPlanner';
+import { useSwapMint, useBurnSwap, type ActualSwapMintAmounts, type ActualBurnSwapAmounts } from '@/hooks/usePartyPool';
 import { formatUnits, parseUnits } from 'viem';
 import IPartyPoolABI from '@/contracts/IPartyPoolABI';
 
@@ -30,6 +30,8 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
   const [isTokenDropdownOpen, setIsTokenDropdownOpen] = useState(false);
   const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>('idle');
   const [transactionError, setTransactionError] = useState<string | null>(null);
+  const [actualSwapMintAmounts, setActualSwapMintAmounts] = useState<ActualSwapMintAmounts | null>(null);
+  const [actualBurnSwapAmounts, setActualBurnSwapAmounts] = useState<ActualBurnSwapAmounts | null>(null);
   const poolDropdownRef = useRef<HTMLDivElement>(null);
   const tokenDropdownRef = useRef<HTMLDivElement>(null);
 
@@ -152,21 +154,31 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
 
     try {
       if (mode === 'stake') {
-        // Execute the swap mint transaction
-        await executeSwapMint(
+        // Execute the swap mint transaction and capture actual amounts
+        const result = await executeSwapMint(
           selectedPool.address,
           selectedToken.address,
           inputTokenIndex,
           maxAmountIn
         );
+
+        // Store actual swap mint amounts if available
+        if (result?.actualSwapMintAmounts) {
+          setActualSwapMintAmounts(result.actualSwapMintAmounts);
+        }
       } else {
-        // Execute the burn swap transaction
-        await executeBurnSwap(
+        // Execute the burn swap transaction and capture actual amounts
+        const result = await executeBurnSwap(
           selectedPool.address,
           maxAmountIn,
           inputTokenIndex,
           false // unwrap = false by default
         );
+
+        // Store actual burn swap amounts if available
+        if (result?.actualBurnSwapAmounts) {
+          setActualBurnSwapAmounts(result.actualBurnSwapAmounts);
+        }
       }
 
       setTransactionStatus('success');
@@ -490,7 +502,13 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
             <div className="flex justify-between text-sm">
               <span className="text-muted-foreground">{t('stake.amountOut')}:</span>
               <span className="font-medium">
-                {burnSwapLoading ? 'Calculating...' : `${formatUnits(burnSwapAmounts, selectedToken.decimals)} ${selectedToken.symbol}`}
+                {burnSwapLoading ? 'Calculating...' : `${Number(formatUnits(burnSwapAmounts.amountOut, selectedToken.decimals)).toLocaleString('en-US', { maximumFractionDigits: 6 })} ${selectedToken.symbol}`}
+              </span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">{t('stake.fee')}:</span>
+              <span className="font-medium">
+                {burnSwapLoading ? 'Calculating...' : `${Number(formatUnits(burnSwapAmounts.outFee, selectedToken.decimals)).toLocaleString('en-US', { maximumFractionDigits: 6 })} ${selectedToken.symbol}`}
               </span>
             </div>
           </div>
@@ -538,12 +556,82 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
                 <h3 className="text-xl font-semibold text-center">
                   {mode === 'stake' ? 'Stake Confirmed!' : 'Unstake Confirmed!'}
                 </h3>
-                <p className="text-sm text-muted-foreground text-center">
-                  {mode === 'stake'
-                    ? `Successfully staked ${stakeAmount} ${selectedToken?.symbol} to ${selectedPool?.symbol}`
-                    : `Successfully unstaked ${stakeAmount} ${selectedPool?.symbol} LP for ${selectedToken?.symbol}`
-                  }
-                </p>
+
+                {/* Display actual amounts or estimates */}
+                {mode === 'stake' ? (
+                  // Stake mode success message
+                  <div className="w-full space-y-3">
+                    {actualSwapMintAmounts && selectedToken && selectedPool ? (
+                      // Show actual amounts from transaction
+                      <>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-muted-foreground">Token Used:</span>
+                          <span className="font-medium">{formatUnits(actualSwapMintAmounts.amountInUsed, selectedToken.decimals)} {selectedToken.symbol}</span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-muted-foreground">LP Received:</span>
+                          <span className="font-medium">{formatUnits(actualSwapMintAmounts.lpMinted, 18)} {selectedPool.symbol}</span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-muted-foreground">LP Fee:</span>
+                          <span className="font-medium">{formatUnits(actualSwapMintAmounts.lpFee, selectedToken.decimals)} {selectedToken.symbol}</span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-muted-foreground">Protocol Fee:</span>
+                          <span className="font-medium">{formatUnits(actualSwapMintAmounts.protocolFee, selectedToken.decimals)} {selectedToken.symbol}</span>
+                        </div>
+                      </>
+                    ) : (
+                      // Fallback to estimates
+                      <>
+                        <p className="text-sm text-muted-foreground text-center">
+                          Successfully staked {stakeAmount} {selectedToken?.symbol} to {selectedPool?.symbol}
+                          <br />
+                          <span className="text-xs italic opacity-70">
+                            *Disclaimer: This is an estimate from the protocol. The actual amounts might be slightly different due to slippage.
+                          </span>
+                        </p>
+                      </>
+                    )}
+                  </div>
+                ) : (
+                  // Unstake mode success message
+                  <div className="w-full space-y-3">
+                    {actualBurnSwapAmounts && selectedToken && selectedPool ? (
+                      // Show actual amounts from transaction
+                      <>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-muted-foreground">LP Burned:</span>
+                          <span className="font-medium">{formatUnits(actualBurnSwapAmounts.amountIn, 18)} {selectedPool.symbol}</span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-muted-foreground">Token Received:</span>
+                          <span className="font-medium">{formatUnits(actualBurnSwapAmounts.amountOut, selectedToken.decimals)} {selectedToken.symbol}</span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-muted-foreground">LP Fee:</span>
+                          <span className="font-medium">{formatUnits(actualBurnSwapAmounts.lpFee, selectedToken.decimals)} {selectedToken.symbol}</span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-muted-foreground">Protocol Fee:</span>
+                          <span className="font-medium">{formatUnits(actualBurnSwapAmounts.protocolFee, selectedToken.decimals)} {selectedToken.symbol}</span>
+                        </div>
+                      </>
+                    ) : (
+                      // Fallback to estimates
+                      <>
+                        <p className="text-sm text-muted-foreground text-center">
+                          Successfully unstaked {stakeAmount} {selectedPool?.symbol} LP for {selectedToken?.symbol}
+                          <br />
+                          <span className="text-xs italic opacity-70">
+                            *Disclaimer: This is an estimate from the protocol. The actual amounts might be slightly different due to slippage.
+                          </span>
+                        </p>
+                      </>
+                    )}
+                  </div>
+                )}
+
                 <Button
                   onClick={handleCloseModal}
                   className="w-full mt-4"