Liquidity.Party/web
2
0
Fork 0
Code Issues 18 Pull Requests Packages Projects Releases Wiki Activity

adding actual amounts and fees to confirmation pages for swap, stake and unstake

Browse Source
This commit is contained in:
surbhi
2025-11-05 14:31:56 -04:00
parent 9707c4892b
commit 0a518d31f9
5 changed files with 332 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/swap-form.tsx
View File

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
import { ArrowDownUp, ChevronDown, Settings, CheckCircle, XCircle, Loader2 } from 'lucide-react';
import { useAccount } from 'wagmi';
import { useTokenDetails, useGetPoolsByToken, type TokenDetails } from '@/hooks/usePartyPlanner';
import { useSwapAmounts, useSwap, selectBestSwapRoute } from '@/hooks/usePartyPool';
import { useSwapAmounts, useSwap, selectBestSwapRoute, type ActualSwapAmounts } from '@/hooks/usePartyPool';
import { formatUnits, parseUnits } from 'viem';
import { SwapReviewModal } from './swap-review-modal';
@@ -28,6 +28,7 @@ export function SwapForm() {
const [isReviewModalOpen, setIsReviewModalOpen] = useState(false);
const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>('idle');
const [transactionError, setTransactionError] = useState<string | null>(null);
const [actualSwapAmounts, setActualSwapAmounts] = useState<ActualSwapAmounts | null>(null);
const fromDropdownRef = useRef<HTMLDivElement>(null);
const toDropdownRef = useRef<HTMLDivElement>(null);
@@ -114,8 +115,8 @@ export function SwapForm() {
// Use the user's input directly as maxAmountIn
const maxAmountIn = parseUnits(fromAmount, selectedFromToken.decimals);
// Execute the swap
await executeSwap(
// Execute the swap and capture actual amounts from the transaction
const result = await executeSwap(
bestRoute.poolAddress,
selectedFromToken.address,
bestRoute.inputTokenIndex,
@@ -124,6 +125,11 @@ export function SwapForm() {
currentSlippage
);
// Store the actual swap amounts if available
if (result?.actualSwapAmounts) {
setActualSwapAmounts(result.actualSwapAmounts);
}
setTransactionStatus('success');
} catch (err) {
console.error('Swap failed:', err);
@@ -466,9 +472,43 @@ export function SwapForm() {
<div className="flex flex-col items-center space-y-4">
<CheckCircle className="h-16 w-16 text-green-500" />
<h3 className="text-xl font-semibold text-center">Swap Confirmed!</h3>
<p className="text-sm text-muted-foreground text-center">
Successfully swapped {fromAmount} {selectedFromToken?.symbol} to {toAmount} {selectedToToken?.symbol}
</p>
{/* Display actual amounts or estimates */}
<div className="w-full space-y-3">
{actualSwapAmounts && selectedFromToken && selectedToToken ? (
// Show actual amounts from transaction
<>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">Swapped:</span>
<span className="font-medium">{formatUnits(actualSwapAmounts.amountIn, selectedFromToken.decimals)} {selectedFromToken.symbol}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">Received:</span>
<span className="font-medium">{formatUnits(actualSwapAmounts.amountOut, selectedToToken.decimals)} {selectedToToken.symbol}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">LP Fee:</span>
<span className="font-medium">{formatUnits(actualSwapAmounts.lpFee, selectedFromToken.decimals)} {selectedFromToken.symbol}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">Protocol Fee:</span>
<span className="font-medium">{formatUnits(actualSwapAmounts.protocolFee, selectedFromToken.decimals)} {selectedFromToken.symbol}</span>
</div>
</>
) : (
// Fallback to estimates
<>
<p className="text-sm text-muted-foreground text-center">
Successfully swapped {fromAmount} {selectedFromToken?.symbol} to {toAmount} {selectedToToken?.symbol}
<br />
<span className="text-xs italic opacity-70">
*Disclaimer: This is an estimate from the protocol. The actual amounts might be slightly different due to slippage.
</span>
</p>
</>
)}
</div>
<Button
onClick={handleCloseModal}
className="w-full mt-4"