378 lines
14 KiB
TypeScript
378 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef, useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ArrowDownUp, ChevronDown } from 'lucide-react';
|
|
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();
|
|
const { isConnected, address } = useAccount();
|
|
const [fromAmount, setFromAmount] = useState('');
|
|
const [toAmount, setToAmount] = useState('');
|
|
const [selectedFromToken, setSelectedFromToken] = useState<TokenDetails | null>(null);
|
|
const [selectedToToken, setSelectedToToken] = useState<TokenDetails | null>(null);
|
|
const [isFromDropdownOpen, setIsFromDropdownOpen] = useState(false);
|
|
const [isToDropdownOpen, setIsToDropdownOpen] = useState(false);
|
|
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);
|
|
|
|
// Use the custom hook to get all token details with a single batched RPC call
|
|
const { tokenDetails, loading } = useTokenDetails(address);
|
|
|
|
// Get available tokens for the selected "from" token
|
|
const { availableTokens } = useGetPoolsByToken(selectedFromToken?.address);
|
|
|
|
// Only calculate swap amounts when both tokens are selected
|
|
// Use useMemo to prevent creating a new array reference on every render
|
|
const filteredAvailableTokens = useMemo(() => {
|
|
if (selectedFromToken && selectedToToken && availableTokens) {
|
|
return availableTokens.filter(token =>
|
|
token.address.toLowerCase() === selectedToToken.address.toLowerCase()
|
|
);
|
|
}
|
|
return null;
|
|
}, [selectedFromToken, selectedToToken, availableTokens]);
|
|
|
|
// Get the current slippage value (either custom or preset)
|
|
const currentSlippage = isCustomSlippage ? parseFloat(customSlippage) || 0.5 : slippage;
|
|
|
|
// Calculate swap amounts for the selected token pair only
|
|
const { swapAmounts } = useSwapAmounts(
|
|
filteredAvailableTokens,
|
|
fromAmount,
|
|
selectedFromToken?.decimals || 18,
|
|
currentSlippage
|
|
);
|
|
|
|
// Initialize swap hook
|
|
const { executeSwap, estimateGas, isSwapping, gasEstimate, isEstimatingGas } = useSwap();
|
|
|
|
// Update "You Receive" amount when swap calculation completes
|
|
useEffect(() => {
|
|
if (swapAmounts && swapAmounts.length > 0 && selectedToToken) {
|
|
const swapResult = swapAmounts[0]; // Get the first (and should be only) result
|
|
const formattedAmount = formatUnits(swapResult.amountOut, selectedToToken.decimals);
|
|
setToAmount(formattedAmount);
|
|
}
|
|
}, [swapAmounts, selectedToToken]);
|
|
|
|
// Close dropdowns when clicking outside
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (fromDropdownRef.current && !fromDropdownRef.current.contains(event.target as Node)) {
|
|
setIsFromDropdownOpen(false);
|
|
}
|
|
if (toDropdownRef.current && !toDropdownRef.current.contains(event.target as Node)) {
|
|
setIsToDropdownOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
}, []);
|
|
|
|
const handleSwap = async () => {
|
|
if (!swapAmounts || swapAmounts.length === 0) {
|
|
console.error('No swap amounts available');
|
|
return;
|
|
}
|
|
|
|
if (!selectedFromToken || !selectedToToken) {
|
|
console.error('Tokens not selected');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Use the shared helper to select the best swap route
|
|
const bestRoute = selectBestSwapRoute(swapAmounts);
|
|
|
|
if (!bestRoute) {
|
|
console.error('No valid swap route found');
|
|
return;
|
|
}
|
|
|
|
// Convert fromAmount to Wei
|
|
const maxAmountIn = parseUnits(fromAmount, selectedFromToken.decimals);
|
|
|
|
// Execute the swap
|
|
await executeSwap(
|
|
bestRoute.poolAddress,
|
|
selectedFromToken.address,
|
|
bestRoute.inputTokenIndex,
|
|
bestRoute.outputTokenIndex,
|
|
maxAmountIn,
|
|
currentSlippage
|
|
);
|
|
} catch (err) {
|
|
console.error('Swap failed:', err);
|
|
}
|
|
};
|
|
|
|
const switchTokens = () => {
|
|
// Switch tokens logic
|
|
setFromAmount(toAmount);
|
|
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>
|
|
<CardTitle>{t('swap.title')}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* From Token */}
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<label className="text-muted-foreground">{t('swap.youPay')}</label>
|
|
<span className="text-muted-foreground">
|
|
{t('swap.balance')}: {selectedFromToken ? formatUnits(selectedFromToken.balance, selectedFromToken.decimals) : '0.00'}
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
type="number"
|
|
placeholder="0.0"
|
|
value={fromAmount}
|
|
onChange={(e) => setFromAmount(e.target.value)}
|
|
className="text-2xl h-16"
|
|
/>
|
|
<div className="relative min-w-[160px]" ref={fromDropdownRef}>
|
|
<Button
|
|
variant="secondary"
|
|
className="w-full h-16 justify-between"
|
|
onClick={() => setIsFromDropdownOpen(!isFromDropdownOpen)}
|
|
>
|
|
{selectedFromToken ? (
|
|
<span className="font-medium">{selectedFromToken.symbol}</span>
|
|
) : (
|
|
t('swap.selectToken')
|
|
)}
|
|
<ChevronDown className="h-4 w-4 ml-2" />
|
|
</Button>
|
|
{isFromDropdownOpen && (
|
|
<div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
|
|
{tokenDetails && tokenDetails.length > 0 ? (
|
|
tokenDetails.map((token) => (
|
|
<button
|
|
key={token.address}
|
|
className="w-full px-4 py-3 text-left hover:bg-accent focus:bg-accent focus:outline-none"
|
|
onClick={() => {
|
|
setSelectedFromToken(token);
|
|
setIsFromDropdownOpen(false);
|
|
}}
|
|
>
|
|
<span className="font-medium">{token.symbol}</span>
|
|
</button>
|
|
))
|
|
) : (
|
|
<div className="px-4 py-3 text-sm text-muted-foreground">
|
|
{loading ? 'Loading tokens...' : 'No tokens available'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Switch Button */}
|
|
<div className="flex justify-center">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={switchTokens}
|
|
className="rounded-full"
|
|
>
|
|
<ArrowDownUp className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* To Token */}
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<label className="text-muted-foreground">{t('swap.youReceive')}</label>
|
|
<span className="text-muted-foreground">
|
|
{t('swap.balance')}: {selectedToToken ? formatUnits(selectedToToken.balance, selectedToToken.decimals) : '0.00'}
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
type="number"
|
|
placeholder="0.0"
|
|
value={toAmount}
|
|
onChange={(e) => setToAmount(e.target.value)}
|
|
className="text-2xl h-16"
|
|
disabled={!selectedFromToken}
|
|
/>
|
|
<div className="relative min-w-[160px]" ref={toDropdownRef}>
|
|
<Button
|
|
variant="secondary"
|
|
className="w-full h-16 justify-between"
|
|
onClick={() => setIsToDropdownOpen(!isToDropdownOpen)}
|
|
disabled={!selectedFromToken}
|
|
>
|
|
{selectedToToken ? (
|
|
<span className="font-medium">{selectedToToken.symbol}</span>
|
|
) : (
|
|
t('swap.selectToken')
|
|
)}
|
|
<ChevronDown className="h-4 w-4 ml-2" />
|
|
</Button>
|
|
{isToDropdownOpen && (
|
|
<div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
|
|
{availableTokens && availableTokens.length > 0 && tokenDetails ? (
|
|
// Filter tokenDetails to only show tokens in availableTokens
|
|
tokenDetails
|
|
.filter((token) =>
|
|
availableTokens.some((availToken) =>
|
|
availToken.address.toLowerCase() === token.address.toLowerCase()
|
|
)
|
|
)
|
|
.map((token) => (
|
|
<button
|
|
key={token.address}
|
|
className="w-full px-4 py-3 text-left hover:bg-accent focus:bg-accent focus:outline-none"
|
|
onClick={() => {
|
|
setSelectedToToken(token);
|
|
setIsToDropdownOpen(false);
|
|
}}
|
|
>
|
|
<span className="font-medium">{token.symbol}</span>
|
|
</button>
|
|
))
|
|
) : selectedFromToken ? (
|
|
<div className="px-4 py-3 text-sm text-muted-foreground">
|
|
{loading ? 'Loading available tokens...' : 'No tokens available for swap'}
|
|
</div>
|
|
) : (
|
|
<div className="px-4 py-3 text-sm text-muted-foreground">
|
|
Select a token in "You Pay" first
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Slippage Tolerance */}
|
|
<div className="space-y-3 pt-2">
|
|
<div className="flex justify-between items-center">
|
|
<label className="text-sm font-medium">Slippage Tolerance</label>
|
|
<span className="text-sm text-muted-foreground">
|
|
{isCustomSlippage ? customSlippage || '0' : slippage}%
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-2 flex-wrap">
|
|
{[0.1, 0.2, 0.3, 1, 2, 3].map((percent) => (
|
|
<Button
|
|
key={percent}
|
|
variant={!isCustomSlippage && slippage === percent ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => {
|
|
setSlippage(percent);
|
|
setIsCustomSlippage(false);
|
|
}}
|
|
className="flex-1 min-w-[60px]"
|
|
>
|
|
{percent}%
|
|
</Button>
|
|
))}
|
|
<div className="flex-1 min-w-[80px] relative">
|
|
<Input
|
|
type="number"
|
|
placeholder="Custom"
|
|
value={customSlippage}
|
|
onChange={(e) => {
|
|
setCustomSlippage(e.target.value);
|
|
setIsCustomSlippage(true);
|
|
}}
|
|
onFocus={() => setIsCustomSlippage(true)}
|
|
className={`h-9 pr-6 ${isCustomSlippage ? 'border-primary' : ''}`}
|
|
step="0.01"
|
|
/>
|
|
{isCustomSlippage && (
|
|
<span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
|
|
%
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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={() => setIsReviewModalOpen(true)}
|
|
disabled={!isConnected || !fromAmount || !toAmount}
|
|
>
|
|
{!isConnected
|
|
? t('swap.connectWalletToSwap')
|
|
: '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>
|
|
);
|
|
}
|