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