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

adding reactivity and error message handling

Browse Source
This commit is contained in:
surbhi
2025-12-03 17:43:17 -04:00
parent d07ff55c13
commit d4e41821a6
3 changed files with 49 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -173,7 +173,7 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
}, [stakeAmount, selectedToken, mode]);
// Fetch swap mint amounts (for stake mode)
const { swapMintAmounts, loading: swapMintLoading } = useSwapMintAmounts(
const { swapMintAmounts, loading: swapMintLoading, error: swapMintError } = useSwapMintAmounts(
mode === 'stake' ? selectedPool?.address : undefined,
mode === 'stake' ? inputTokenIndex : undefined,
mode === 'stake' ? maxAmountIn : undefined,
@@ -181,7 +181,7 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
);
// Fetch burn swap amounts (for unstake mode, only when not redeeming all)
const { burnSwapAmounts, loading: burnSwapLoading } = useBurnSwapAmounts(
const { burnSwapAmounts, loading: burnSwapLoading, error: burnSwapError } = useBurnSwapAmounts(
mode === 'unstake' && !redeemAll ? selectedPool?.address : undefined,
mode === 'unstake' && !redeemAll ? maxAmountIn : undefined,
mode === 'unstake' && !redeemAll ? inputTokenIndex : undefined,
@@ -726,36 +726,55 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
</div>
)}
{/* Error messages for output zero */}
{mode === 'stake' && swapMintError && stakeAmount && (
<div className="px-4 py-3 bg-destructive/10 border border-destructive/20 rounded-lg">
<p className="text-sm text-destructive font-medium">⚠️ Cannot Process Stake</p>
<p className="text-xs text-destructive/80 mt-1">
{swapMintError}
</p>
</div>
)}
{mode === 'unstake' && !redeemAll && burnSwapError && stakeAmount && (
<div className="px-4 py-3 bg-destructive/10 border border-destructive/20 rounded-lg">
<p className="text-sm text-destructive font-medium">⚠️ Cannot Process Unstake</p>
<p className="text-xs text-destructive/80 mt-1">
{burnSwapError}
</p>
</div>
)}
{/* Slippage warnings - consolidated for both stake and unstake modes */}
{mode === 'stake' && slippageExceedsLimit && swapMintAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning
slippage={swapMintAmounts.calculatedSlippage}
action="stake"
isError={true}
{mode === 'stake' && !swapMintError && slippageExceedsLimit && swapMintAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning
slippage={swapMintAmounts.calculatedSlippage}
action="stake"
isError={true}
/>
)}
{mode === 'stake' && !slippageExceedsLimit && slippageIsHigh && swapMintAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning
slippage={swapMintAmounts.calculatedSlippage}
action="stake"
isError={false}
{mode === 'stake' && !swapMintError && !slippageExceedsLimit && slippageIsHigh && swapMintAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning
slippage={swapMintAmounts.calculatedSlippage}
action="stake"
isError={false}
/>
)}
{mode === 'unstake' && !redeemAll && unstakeSlippageExceedsLimit && burnSwapAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning
slippage={burnSwapAmounts.calculatedSlippage}
action="unstake"
isError={true}
{mode === 'unstake' && !redeemAll && !burnSwapError && unstakeSlippageExceedsLimit && burnSwapAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning
slippage={burnSwapAmounts.calculatedSlippage}
action="unstake"
isError={true}
/>
)}
{mode === 'unstake' && !redeemAll && !unstakeSlippageExceedsLimit && slippageIsHigh && burnSwapAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning
slippage={burnSwapAmounts.calculatedSlippage}
action="unstake"
isError={false}
{mode === 'unstake' && !redeemAll && !burnSwapError && !unstakeSlippageExceedsLimit && slippageIsHigh && burnSwapAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning
slippage={burnSwapAmounts.calculatedSlippage}
action="unstake"
isError={false}
/>
)}
@@ -807,10 +826,10 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
!selectedPool ||
isAmountExceedingBalance ||
(mode === 'stake'
? (!selectedToken || isSwapMinting || slippageExceedsLimit)
? (!selectedToken || isSwapMinting || slippageExceedsLimit || !!swapMintError)
: (redeemAll
? isBurning
: (!selectedToken || inputTokenIndex === undefined || isBurnSwapping || unstakeSlippageExceedsLimit)))
: (!selectedToken || inputTokenIndex === undefined || isBurnSwapping || unstakeSlippageExceedsLimit || !!burnSwapError)))
}
>
{!isConnected

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

@@ -94,6 +94,8 @@ export function SwapForm() {
const swapResult = swapAmounts[0]; // Get the first (and should be only) result
const formattedAmount = formatUnits(swapResult.amountOut, selectedToToken.decimals);
setToAmount(formattedAmount);
} else {
setToAmount('');
}
}, [swapAmounts, selectedToToken, hasInsufficientBalance]);

8
src/hooks/usePartyPlanner.ts
View File

@@ -656,7 +656,6 @@ export function useSwapMintAmounts(
const basePrice = Number(poolPriceInt128) / (2 ** 64);
poolPrice = 1 / (basePrice * Math.pow(10, 18 - inputTokenDecimals));
// Calculate slippage
const decimalsMultiplier = Math.pow(10, inputTokenDecimals);
const lpMinted = Number(result[1]) / Math.pow(10, 18);
@@ -665,7 +664,6 @@ export function useSwapMintAmounts(
const swapPrice = lpMinted / (amountIn - fee);
calculatedSlippage = ((poolPrice - swapPrice) / poolPrice) * 100;
} catch (priceErr) {
console.error('Error fetching poolPrice or calculating slippage:', priceErr);
}
@@ -678,7 +676,8 @@ export function useSwapMintAmounts(
});
} catch (err) {
console.error('Error calling swapMintAmounts:', err);
setError(err instanceof Error ? err.message : 'Failed to fetch swap mint amounts');
const errorMessage = err instanceof Error ? err.message : 'Failed to fetch swap mint amounts';
setError(errorMessage);
setSwapMintAmounts(null);
} finally {
setLoading(false);
@@ -787,7 +786,8 @@ export function useBurnSwapAmounts(
setBurnSwapAmounts(parsedAmounts);
} catch (err) {
console.error('Error calling burnSwapAmounts:', err);
setError(err instanceof Error ? err.message : 'Failed to fetch burn swap amounts');
const errorMessage = err instanceof Error ? err.message : 'Failed to fetch burn swap amounts';
setError(errorMessage);
setBurnSwapAmounts(null);
} finally {
setLoading(false);