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]); }, [stakeAmount, selectedToken, mode]);
// Fetch swap mint amounts (for stake 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' ? selectedPool?.address : undefined,
mode === 'stake' ? inputTokenIndex : undefined, mode === 'stake' ? inputTokenIndex : undefined,
mode === 'stake' ? maxAmountIn : 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) // 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 ? selectedPool?.address : undefined,
mode === 'unstake' && !redeemAll ? maxAmountIn : undefined, mode === 'unstake' && !redeemAll ? maxAmountIn : undefined,
mode === 'unstake' && !redeemAll ? inputTokenIndex : undefined, mode === 'unstake' && !redeemAll ? inputTokenIndex : undefined,
@@ -726,36 +726,55 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
</div> </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 */} {/* Slippage warnings - consolidated for both stake and unstake modes */}
{mode === 'stake' && slippageExceedsLimit && swapMintAmounts?.calculatedSlippage !== undefined && ( {mode === 'stake' && !swapMintError && slippageExceedsLimit && swapMintAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning <SlippageWarning
slippage={swapMintAmounts.calculatedSlippage} slippage={swapMintAmounts.calculatedSlippage}
action="stake" action="stake"
isError={true} isError={true}
/> />
)} )}
{mode === 'stake' && !slippageExceedsLimit && slippageIsHigh && swapMintAmounts?.calculatedSlippage !== undefined && ( {mode === 'stake' && !swapMintError && !slippageExceedsLimit && slippageIsHigh && swapMintAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning <SlippageWarning
slippage={swapMintAmounts.calculatedSlippage} slippage={swapMintAmounts.calculatedSlippage}
action="stake" action="stake"
isError={false} isError={false}
/> />
)} )}
{mode === 'unstake' && !redeemAll && unstakeSlippageExceedsLimit && burnSwapAmounts?.calculatedSlippage !== undefined && ( {mode === 'unstake' && !redeemAll && !burnSwapError && unstakeSlippageExceedsLimit && burnSwapAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning <SlippageWarning
slippage={burnSwapAmounts.calculatedSlippage} slippage={burnSwapAmounts.calculatedSlippage}
action="unstake" action="unstake"
isError={true} isError={true}
/> />
)} )}
{mode === 'unstake' && !redeemAll && !unstakeSlippageExceedsLimit && slippageIsHigh && burnSwapAmounts?.calculatedSlippage !== undefined && ( {mode === 'unstake' && !redeemAll && !burnSwapError && !unstakeSlippageExceedsLimit && slippageIsHigh && burnSwapAmounts?.calculatedSlippage !== undefined && (
<SlippageWarning <SlippageWarning
slippage={burnSwapAmounts.calculatedSlippage} slippage={burnSwapAmounts.calculatedSlippage}
action="unstake" action="unstake"
isError={false} isError={false}
/> />
)} )}
@@ -807,10 +826,10 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
!selectedPool || !selectedPool ||
isAmountExceedingBalance || isAmountExceedingBalance ||
(mode === 'stake' (mode === 'stake'
? (!selectedToken || isSwapMinting || slippageExceedsLimit) ? (!selectedToken || isSwapMinting || slippageExceedsLimit || !!swapMintError)
: (redeemAll : (redeemAll
? isBurning ? isBurning
: (!selectedToken || inputTokenIndex === undefined || isBurnSwapping || unstakeSlippageExceedsLimit))) : (!selectedToken || inputTokenIndex === undefined || isBurnSwapping || unstakeSlippageExceedsLimit || !!burnSwapError)))
} }
> >
{!isConnected {!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 swapResult = swapAmounts[0]; // Get the first (and should be only) result
const formattedAmount = formatUnits(swapResult.amountOut, selectedToToken.decimals); const formattedAmount = formatUnits(swapResult.amountOut, selectedToToken.decimals);
setToAmount(formattedAmount); setToAmount(formattedAmount);
} else {
setToAmount('');
} }
}, [swapAmounts, selectedToToken, hasInsufficientBalance]); }, [swapAmounts, selectedToToken, hasInsufficientBalance]);

8
src/hooks/usePartyPlanner.ts
View File

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