adding toast and displaying fees in the swap-form and modal

src/components/swap-review-modal.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { ArrowDown, X } from 'lucide-react';
 import type { TokenDetails } from '@/hooks/usePartyPlanner';
 import type { GasEstimate } from '@/hooks/usePartyPool';
+import { useToast } from '@/components/ui/toast';
 
 interface SwapReviewModalProps {
   open: boolean;
@@ -14,6 +15,7 @@ interface SwapReviewModalProps {
   toAmount: string;
   slippage: number;
   gasEstimate: GasEstimate | null;
+  fee: bigint | null;
   onConfirm: () => void;
   isSwapping: boolean;
 }
@@ -27,11 +29,22 @@ export function SwapReviewModal({
   toAmount,
   slippage,
   gasEstimate,
+  fee,
   onConfirm,
   isSwapping,
 }: SwapReviewModalProps) {
   if (!open) return null;
 
+  // Calculate exchange rate
+  const exchangeRate = fromAmount && toAmount && parseFloat(fromAmount) > 0
+    ? (parseFloat(toAmount) / parseFloat(fromAmount)).toFixed(6)
+    : '0';
+
+  // Format fee
+  const feeFormatted = fee && toToken
+    ? (Number(fee) / Math.pow(10, toToken.decimals)).toFixed(6)
+    : '0';
+
   return (
     <>
       {/* Backdrop */}
@@ -80,11 +93,27 @@ export function SwapReviewModal({
 
             {/* Details */}
             <div className="space-y-2 pt-2">
+              {/* Exchange Rate */}
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Rate</span>
+                <span className="font-medium">
+                  1 {fromToken?.symbol} = {exchangeRate} {toToken?.symbol}
+                </span>
+              </div>
+
+              {/* Fee */}
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Fee</span>
+                <span className="font-medium">{feeFormatted} {toToken?.symbol}</span>
+              </div>
+
+              {/* Slippage */}
               <div className="flex justify-between text-sm">
                 <span className="text-muted-foreground">Slippage Tolerance</span>
                 <span className="font-medium">{slippage}%</span>
               </div>
 
+              {/* Network Fee */}
               {gasEstimate && (
                 <div className="flex justify-between text-sm">
                   <span className="text-muted-foreground">Network Fee</span>
@@ -93,13 +122,13 @@ export function SwapReviewModal({
               )}
             </div>
 
-            {/* Confirm Button */}
+            {/* Approve and Swap Button */}
             <Button
               className="w-full h-12 text-lg"
               onClick={onConfirm}
               disabled={isSwapping}
             >
-              {isSwapping ? 'Swapping...' : 'Confirm Swap'}
+              {isSwapping ? 'Swapping...' : 'Approve and Swap'}
             </Button>
           </div>
         </div>