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

114
src/components/stake-form.tsx
View File

@@ -7,8 +7,8 @@ import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { ChevronDown, CheckCircle, XCircle, Loader2, ArrowDownUp } from 'lucide-react';
import { useAccount } from 'wagmi';
import { useGetAllPools, useTokenDetails, useSwapMintAmounts, useBurnSwapAmounts, useLPTokenBalance, type PoolDetails, type TokenDetails } from '@/hooks/usePartyPlanner';
import { useSwapMint, useBurnSwap } from '@/hooks/usePartyPool';
import { useGetAllPools, useTokenDetails, useSwapMintAmounts, useBurnSwapAmounts, useLPTokenBalance, type PoolDetails, type TokenDetails, type BurnSwapAmounts } from '@/hooks/usePartyPlanner';
import { useSwapMint, useBurnSwap, type ActualSwapMintAmounts, type ActualBurnSwapAmounts } from '@/hooks/usePartyPool';
import { formatUnits, parseUnits } from 'viem';
import IPartyPoolABI from '@/contracts/IPartyPoolABI';
@@ -30,6 +30,8 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
const [isTokenDropdownOpen, setIsTokenDropdownOpen] = useState(false);
const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>('idle');
const [transactionError, setTransactionError] = useState<string | null>(null);
const [actualSwapMintAmounts, setActualSwapMintAmounts] = useState<ActualSwapMintAmounts | null>(null);
const [actualBurnSwapAmounts, setActualBurnSwapAmounts] = useState<ActualBurnSwapAmounts | null>(null);
const poolDropdownRef = useRef<HTMLDivElement>(null);
const tokenDropdownRef = useRef<HTMLDivElement>(null);
@@ -152,21 +154,31 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
try {
if (mode === 'stake') {
// Execute the swap mint transaction
await executeSwapMint(
// Execute the swap mint transaction and capture actual amounts
const result = await executeSwapMint(
selectedPool.address,
selectedToken.address,
inputTokenIndex,
maxAmountIn
);
// Store actual swap mint amounts if available
if (result?.actualSwapMintAmounts) {
setActualSwapMintAmounts(result.actualSwapMintAmounts);
}
} else {
// Execute the burn swap transaction
await executeBurnSwap(
// Execute the burn swap transaction and capture actual amounts
const result = await executeBurnSwap(
selectedPool.address,
maxAmountIn,
inputTokenIndex,
false // unwrap = false by default
);
// Store actual burn swap amounts if available
if (result?.actualBurnSwapAmounts) {
setActualBurnSwapAmounts(result.actualBurnSwapAmounts);
}
}
setTransactionStatus('success');
@@ -490,7 +502,13 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">{t('stake.amountOut')}:</span>
<span className="font-medium">
{burnSwapLoading ? 'Calculating...' : `${formatUnits(burnSwapAmounts, selectedToken.decimals)} ${selectedToken.symbol}`}
{burnSwapLoading ? 'Calculating...' : `${Number(formatUnits(burnSwapAmounts.amountOut, selectedToken.decimals)).toLocaleString('en-US', { maximumFractionDigits: 6 })} ${selectedToken.symbol}`}
</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">{t('stake.fee')}:</span>
<span className="font-medium">
{burnSwapLoading ? 'Calculating...' : `${Number(formatUnits(burnSwapAmounts.outFee, selectedToken.decimals)).toLocaleString('en-US', { maximumFractionDigits: 6 })} ${selectedToken.symbol}`}
</span>
</div>
</div>
@@ -538,12 +556,82 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
<h3 className="text-xl font-semibold text-center">
{mode === 'stake' ? 'Stake Confirmed!' : 'Unstake Confirmed!'}
</h3>
<p className="text-sm text-muted-foreground text-center">
{mode === 'stake'
? `Successfully staked ${stakeAmount} ${selectedToken?.symbol} to ${selectedPool?.symbol}`
: `Successfully unstaked ${stakeAmount} ${selectedPool?.symbol} LP for ${selectedToken?.symbol}`
}
</p>
{/* Display actual amounts or estimates */}
{mode === 'stake' ? (
// Stake mode success message
<div className="w-full space-y-3">
{actualSwapMintAmounts && selectedToken && selectedPool ? (
// Show actual amounts from transaction
<>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">Token Used:</span>
<span className="font-medium">{formatUnits(actualSwapMintAmounts.amountInUsed, selectedToken.decimals)} {selectedToken.symbol}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">LP Received:</span>
<span className="font-medium">{formatUnits(actualSwapMintAmounts.lpMinted, 18)} {selectedPool.symbol}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">LP Fee:</span>
<span className="font-medium">{formatUnits(actualSwapMintAmounts.lpFee, selectedToken.decimals)} {selectedToken.symbol}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">Protocol Fee:</span>
<span className="font-medium">{formatUnits(actualSwapMintAmounts.protocolFee, selectedToken.decimals)} {selectedToken.symbol}</span>
</div>
</>
) : (
// Fallback to estimates
<>
<p className="text-sm text-muted-foreground text-center">
Successfully staked {stakeAmount} {selectedToken?.symbol} to {selectedPool?.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>
) : (
// Unstake mode success message
<div className="w-full space-y-3">
{actualBurnSwapAmounts && selectedToken && selectedPool ? (
// Show actual amounts from transaction
<>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">LP Burned:</span>
<span className="font-medium">{formatUnits(actualBurnSwapAmounts.amountIn, 18)} {selectedPool.symbol}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">Token Received:</span>
<span className="font-medium">{formatUnits(actualBurnSwapAmounts.amountOut, selectedToken.decimals)} {selectedToken.symbol}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">LP Fee:</span>
<span className="font-medium">{formatUnits(actualBurnSwapAmounts.lpFee, selectedToken.decimals)} {selectedToken.symbol}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">Protocol Fee:</span>
<span className="font-medium">{formatUnits(actualBurnSwapAmounts.protocolFee, selectedToken.decimals)} {selectedToken.symbol}</span>
</div>
</>
) : (
// Fallback to estimates
<>
<p className="text-sm text-muted-foreground text-center">
Successfully unstaked {stakeAmount} {selectedPool?.symbol} LP for {selectedToken?.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"

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"

7
src/contracts/IPartyPoolABI.ts
View File

@@ -195,7 +195,12 @@ const IPartyPoolABI = [
],
"outputs": [
{
"name": "amountOutUint",
"name": "amountOut",
"type": "uint256",
"internalType": "uint256"
},
{
"name": "outFee",
"type": "uint256",
"internalType": "uint256"
}

41
src/hooks/usePartyPlanner.ts
View File

@@ -448,6 +448,11 @@ export interface SwapMintAmounts {
lpMinted: bigint;
}
export interface BurnSwapAmounts {
amountOut: bigint;
outFee: bigint;
}
export function useSwapMintAmounts(
poolAddress: `0x${string}` | undefined,
inputTokenIndex: number | undefined,
@@ -531,7 +536,7 @@ export function useBurnSwapAmounts(
) {
const publicClient = usePublicClient();
const [mounted, setMounted] = useState(false);
const [burnSwapAmounts, setBurnSwapAmounts] = useState<bigint | null>(null);
const [burnSwapAmounts, setBurnSwapAmounts] = useState<BurnSwapAmounts | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -567,15 +572,43 @@ export function useBurnSwapAmounts(
return;
}
// Call burnSwapAmounts function
// Log inputs
console.log('🔍 burnSwapAmounts INPUTS:', {
chainId: chainId.toString(),
rpcUrl: publicClient.transport?.url || 'Unknown',
poolAddress,
lpAmount: lpAmount.toString(),
inputTokenIndex,
viewerAddress,
});
// Call burnSwapAmounts function - returns [amountOut, outFee]
const result = await publicClient.readContract({
address: viewerAddress as `0x${string}`,
abi: IPartyPoolViewerABI,
functionName: 'burnSwapAmounts',
args: [poolAddress, lpAmount, BigInt(inputTokenIndex)],
}) as bigint;
}) as readonly [bigint, bigint];
setBurnSwapAmounts(result);
// Log raw result
console.log('📊 burnSwapAmounts RAW RESULT:', {
resultArray: result,
amountOut: result[0].toString(),
outFee: result[1].toString(),
});
const parsedAmounts = {
amountOut: result[0],
outFee: result[1],
};
// Log parsed result
console.log('✅ burnSwapAmounts PARSED:', {
amountOut: parsedAmounts.amountOut.toString(),
outFee: parsedAmounts.outFee.toString(),
});
setBurnSwapAmounts(parsedAmounts);
} catch (err) {
console.error('Error calling burnSwapAmounts:', err);
setError(err instanceof Error ? err.message : 'Failed to fetch burn swap amounts');

145
src/hooks/usePartyPool.ts
View File

@@ -2,6 +2,7 @@
import { useState, useEffect, useCallback } from 'react';
import { usePublicClient, useWalletClient } from 'wagmi';
import { decodeEventLog } from 'viem';
import IPartyPoolABI from '@/contracts/IPartyPoolABI';
import chainInfo from '../../../lmsr-amm/liqp-deployments.json';
import type { AvailableToken } from './usePartyPlanner';
@@ -189,6 +190,27 @@ export interface GasEstimate {
estimatedCostUsd: string;
}
export interface ActualSwapAmounts {
amountIn: bigint;
amountOut: bigint;
lpFee: bigint;
protocolFee: bigint;
}
export interface ActualSwapMintAmounts {
amountInUsed: bigint;
lpMinted: bigint;
lpFee: bigint;
protocolFee: bigint;
}
export interface ActualBurnSwapAmounts {
amountIn: bigint;
amountOut: bigint;
lpFee: bigint;
protocolFee: bigint;
}
export function useSwap() {
const { data: walletClient } = useWalletClient();
const publicClient = usePublicClient();
@@ -338,7 +360,46 @@ export function useSwap() {
const receipt = await publicClient.waitForTransactionReceipt({ hash });
console.log('✅ Swap transaction confirmed:', receipt);
return receipt;
// Parse the Swap event from the receipt logs
let actualSwapAmounts: ActualSwapAmounts | null = null;
for (const log of receipt.logs) {
try {
const decodedLog = decodeEventLog({
abi: IPartyPoolABI,
data: log.data,
topics: log.topics,
});
if (decodedLog.eventName === 'Swap') {
const { amountIn, amountOut, lpFee, protocolFee } = decodedLog.args as {
amountIn: bigint;
amountOut: bigint;
lpFee: bigint;
protocolFee: bigint;
};
actualSwapAmounts = {
amountIn,
amountOut,
lpFee,
protocolFee,
};
console.log('📊 Actual swap amounts from event:', {
amountIn: amountIn.toString(),
amountOut: amountOut.toString(),
lpFee: lpFee.toString(),
protocolFee: protocolFee.toString(),
});
break;
}
} catch (err) {
// Skip logs that don't match our ABI
continue;
}
}
return { receipt, actualSwapAmounts };
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Swap failed';
setSwapError(errorMessage);
@@ -446,7 +507,46 @@ export function useSwapMint() {
const receipt = await publicClient.waitForTransactionReceipt({ hash });
console.log('✅ SwapMint transaction confirmed:', receipt);
return receipt;
// Parse the SwapMint event from the receipt logs
let actualSwapMintAmounts: ActualSwapMintAmounts | null = null;
for (const log of receipt.logs) {
try {
const decodedLog = decodeEventLog({
abi: IPartyPoolABI,
data: log.data,
topics: log.topics,
});
if (decodedLog.eventName === 'SwapMint') {
const { amountIn, amountOut, lpFee, protocolFee } = decodedLog.args as {
amountIn: bigint;
amountOut: bigint;
lpFee: bigint;
protocolFee: bigint;
};
actualSwapMintAmounts = {
amountInUsed: amountIn,
lpMinted: amountOut,
lpFee,
protocolFee,
};
console.log('📊 Actual swap mint amounts from event:', {
amountInUsed: amountIn.toString(),
lpMinted: amountOut.toString(),
lpFee: lpFee.toString(),
protocolFee: protocolFee.toString(),
});
break;
}
} catch (err) {
// Skip logs that don't match our ABI
continue;
}
}
return { receipt, actualSwapMintAmounts };
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'SwapMint failed';
setSwapMintError(errorMessage);
@@ -553,7 +653,46 @@ export function useBurnSwap() {
const receipt = await publicClient.waitForTransactionReceipt({ hash });
console.log('✅ BurnSwap transaction confirmed:', receipt);
return receipt;
// Parse the BurnSwap event from the receipt logs
let actualBurnSwapAmounts: ActualBurnSwapAmounts | null = null;
for (const log of receipt.logs) {
try {
const decodedLog = decodeEventLog({
abi: IPartyPoolABI,
data: log.data,
topics: log.topics,
});
if (decodedLog.eventName === 'BurnSwap') {
const { amountIn, amountOut, lpFee, protocolFee } = decodedLog.args as {
amountIn: bigint;
amountOut: bigint;
lpFee: bigint;
protocolFee: bigint;
};
actualBurnSwapAmounts = {
amountIn,
amountOut,
lpFee,
protocolFee,
};
console.log('📊 Actual burn swap amounts from event:', {
amountIn: amountIn.toString(),
amountOut: amountOut.toString(),
lpFee: lpFee.toString(),
protocolFee: protocolFee.toString(),
});
break;
}
} catch (err) {
// Skip logs that don't match our ABI
continue;
}
}
return { receipt, actualBurnSwapAmounts };
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'BurnSwap failed';
setBurnSwapError(errorMessage);