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

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>
+    </>
+  );
+}