review modal, new smart contract pointer and network gas fees estimation

src/components/swap-form.tsx

@@ -10,6 +10,7 @@ import { useAccount } from 'wagmi';
 import { useTokenDetails, useGetPoolsByToken, type TokenDetails } from '@/hooks/usePartyPlanner';
 import { useSwapAmounts, useSwap, selectBestSwapRoute } from '@/hooks/usePartyPool';
 import { formatUnits, parseUnits } from 'viem';
+import { SwapReviewModal } from './swap-review-modal';
 
 export function SwapForm() {
   const { t } = useTranslation();
@@ -23,6 +24,7 @@ export function SwapForm() {
   const [slippage, setSlippage] = useState<number>(0.5); // Default 0.5%
   const [customSlippage, setCustomSlippage] = useState<string>('');
   const [isCustomSlippage, setIsCustomSlippage] = useState(false);
+  const [isReviewModalOpen, setIsReviewModalOpen] = useState(false);
   const fromDropdownRef = useRef<HTMLDivElement>(null);
   const toDropdownRef = useRef<HTMLDivElement>(null);
 
@@ -55,7 +57,7 @@ export function SwapForm() {
   );
 
   // Initialize swap hook
-  const { executeSwap, isSwapping } = useSwap();
+  const { executeSwap, estimateGas, isSwapping, gasEstimate, isEstimatingGas } = useSwap();
 
   // Update "You Receive" amount when swap calculation completes
   useEffect(() => {
@@ -124,6 +126,20 @@ export function SwapForm() {
     setToAmount(fromAmount);
   };
 
+  // Estimate gas when swap parameters change
+  useEffect(() => {
+    const estimateSwapGas = async () => {
+      if (!swapAmounts || swapAmounts.length === 0 || !selectedFromToken || !selectedToToken || !fromAmount || !isConnected) {
+        return;
+      }
+
+      await estimateGas();
+    };
+
+    estimateSwapGas();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [swapAmounts, selectedFromToken, selectedToToken, fromAmount, currentSlippage, isConnected]);
+
   return (
     <Card className="w-full max-w-md mx-auto">
       <CardHeader>
@@ -310,19 +326,52 @@ export function SwapForm() {
           </div>
         </div>
 
-        {/* Swap Button */}
+        {/* Gas Estimate */}
+        {isConnected && fromAmount && toAmount && gasEstimate && !isEstimatingGas && (
+          <div className="px-4 py-2 bg-muted/30 rounded-lg">
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Estimated Gas Cost:</span>
+              <span className="font-medium">${gasEstimate.estimatedCostUsd}</span>
+            </div>
+          </div>
+        )}
+        {isConnected && fromAmount && toAmount && isEstimatingGas && (
+          <div className="px-4 py-2 bg-muted/30 rounded-lg">
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Estimated Gas Cost:</span>
+              <span className="text-muted-foreground">Calculating...</span>
+            </div>
+          </div>
+        )}
+
+        {/* Review Button */}
         <Button
           className="w-full h-14 text-lg"
-          onClick={handleSwap}
-          disabled={!isConnected || !fromAmount || !toAmount || isSwapping}
+          onClick={() => setIsReviewModalOpen(true)}
+          disabled={!isConnected || !fromAmount || !toAmount}
         >
           {!isConnected
             ? t('swap.connectWalletToSwap')
-            : isSwapping
-            ? 'Swapping...'
-            : t('swap.swapButton')}
+            : 'Review'}
         </Button>
       </CardContent>
+
+      {/* Review Modal */}
+      <SwapReviewModal
+        open={isReviewModalOpen}
+        onOpenChange={setIsReviewModalOpen}
+        fromToken={selectedFromToken}
+        toToken={selectedToToken}
+        fromAmount={fromAmount}
+        toAmount={toAmount}
+        slippage={currentSlippage}
+        gasEstimate={gasEstimate}
+        onConfirm={async () => {
+          await handleSwap();
+          setIsReviewModalOpen(false);
+        }}
+        isSwapping={isSwapping}
+      />
     </Card>
   );
 }

src/components/swap-review-modal.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { ArrowDown, X } from 'lucide-react';
+import type { TokenDetails } from '@/hooks/usePartyPlanner';
+import type { GasEstimate } from '@/hooks/usePartyPool';
+
+interface SwapReviewModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  fromToken: TokenDetails | null;
+  toToken: TokenDetails | null;
+  fromAmount: string;
+  toAmount: string;
+  slippage: number;
+  gasEstimate: GasEstimate | null;
+  onConfirm: () => void;
+  isSwapping: boolean;
+}
+
+export function SwapReviewModal({
+  open,
+  onOpenChange,
+  fromToken,
+  toToken,
+  fromAmount,
+  toAmount,
+  slippage,
+  gasEstimate,
+  onConfirm,
+  isSwapping,
+}: SwapReviewModalProps) {
+  if (!open) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-50 bg-black/80 animate-in fade-in-0"
+        onClick={() => onOpenChange(false)}
+      />
+
+      {/* Modal */}
+      <div className="fixed left-[50%] top-[50%] z-50 w-full max-w-md translate-x-[-50%] translate-y-[-50%] animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-[48%]">
+        <div className="bg-background border rounded-lg shadow-lg p-6">
+          {/* Header */}
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-lg font-semibold">Review Swap</h2>
+            <button
+              onClick={() => onOpenChange(false)}
+              className="rounded-sm opacity-70 hover:opacity-100 transition-opacity"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+
+          <div className="space-y-4">
+            {/* From Token */}
+            <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
+              <div>
+                <div className="text-sm text-muted-foreground">You pay</div>
+                <div className="text-2xl font-semibold">{fromAmount}</div>
+              </div>
+              <div className="text-xl font-medium">{fromToken?.symbol}</div>
+            </div>
+
+            {/* Arrow */}
+            <div className="flex justify-center">
+              <ArrowDown className="h-5 w-5 text-muted-foreground" />
+            </div>
+
+            {/* To Token */}
+            <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
+              <div>
+                <div className="text-sm text-muted-foreground">You receive</div>
+                <div className="text-2xl font-semibold">{toAmount}</div>
+              </div>
+              <div className="text-xl font-medium">{toToken?.symbol}</div>
+            </div>
+
+            {/* Details */}
+            <div className="space-y-2 pt-2">
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Slippage Tolerance</span>
+                <span className="font-medium">{slippage}%</span>
+              </div>
+
+              {gasEstimate && (
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Network Fee</span>
+                  <span className="font-medium">${gasEstimate.estimatedCostUsd}</span>
+                </div>
+              )}
+            </div>
+
+            {/* Confirm Button */}
+            <Button
+              className="w-full h-12 text-lg"
+              onClick={onConfirm}
+              disabled={isSwapping}
+            >
+              {isSwapping ? 'Swapping...' : 'Confirm Swap'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}