From a7f2cb0f6bace8795bf4e1b830db89b03a393dd9 Mon Sep 17 00:00:00 2001
From: Gojv-byte <vikkigaboj@gmail.com>
Date: Sat, 26 Sep 2026 22:18:07 +0100
Subject: [PATCH] Add slippage impact override protection

---
 src/components/common/BuySellKeyFlow.tsx      | 39 +++++++++--
 .../common/PriceImpactOverrideCheckbox.tsx    | 27 ++++++++
 src/components/common/PriceImpactWarning.tsx  |  8 +--
 .../common/TradeConfirmationModal.tsx         |  6 +-
 src/components/common/TradeDialog.tsx         | 36 +++++++++--
 .../common/__tests__/BuySellKeyFlow.test.tsx  | 16 +++++
 .../TradeDialog.slippageControls.test.tsx     | 64 ++++++++++++++++++-
 .../TradeDialog.slippageTolerance.test.tsx    |  6 +-
 .../useSlippageTolerancePreference.test.tsx   | 41 ++++++++++++
 src/hooks/useSlippageTolerancePreference.ts   | 35 ++++++++++
 ...DetailPage.buyKeyFlow.integration.test.tsx |  5 ++
 ...gPage.buyFlowEndToEnd.integration.test.tsx | 49 ++++++++++++--
 12 files changed, 304 insertions(+), 28 deletions(-)
 create mode 100644 src/components/common/PriceImpactOverrideCheckbox.tsx
 create mode 100644 src/hooks/__tests__/useSlippageTolerancePreference.test.tsx
 create mode 100644 src/hooks/useSlippageTolerancePreference.ts

diff --git a/src/components/common/BuySellKeyFlow.tsx b/src/components/common/BuySellKeyFlow.tsx
index 2c9132a6..5ebf4566 100644
--- a/src/components/common/BuySellKeyFlow.tsx
+++ b/src/components/common/BuySellKeyFlow.tsx
@@ -7,16 +7,16 @@ import {
 } from '@/utils/keyPriceDisplay.utils';
 import SlippageToleranceSelector from '@/components/common/SlippageToleranceSelector';
 import PriceImpactWarning from '@/components/common/PriceImpactWarning';
+import PriceImpactOverrideCheckbox from '@/components/common/PriceImpactOverrideCheckbox';
 import TradeConfirmationModal from '@/components/common/TradeConfirmationModal';
 import LaunchPenaltyWarning from '@/components/common/LaunchPenaltyWarning';
 import {
-	DEFAULT_SLIPPAGE_TOLERANCE_PERCENT,
 	computeSlippageBounds,
 	type SlippageBounds,
 } from '@/utils/slippageTolerance.utils';
 import {
 	calculateTradePriceImpact,
-	PRICE_IMPACT_THRESHOLD_PERCENT,
+	isHighPriceImpact,
 } from '@/utils/priceImpact.utils';
 import { calculateLaunchPenalty } from '@/utils/launchPenalty.utils';
 import {
@@ -30,6 +30,7 @@ import type { KeyConfig } from '@/services/course.service';
 import SpreadIndicator from '@/components/common/SpreadIndicator';
 import { cn } from '@/lib/utils';
 import { ArrowRight } from 'lucide-react';
+import { useSlippageTolerancePreference } from '@/hooks/useSlippageTolerancePreference';
 
 export interface BuySellTradeParams {
 	creatorId?: string;
@@ -100,7 +101,10 @@ export const BuySellKeyFlow: React.FC<BuySellKeyFlowProps> = ({
 	const [amountText, setAmountText] = useState('1');
 	const [touched, setTouched] = useState(false);
 	const [slippageTolerancePercent, setSlippageTolerancePercent] =
-		useState<number>(DEFAULT_SLIPPAGE_TOLERANCE_PERCENT);
+		useSlippageTolerancePreference();
+	const [acknowledgedImpactKey, setAcknowledgedImpactKey] = useState<
+		string | null
+	>(null);
 	const [confirmationOpen, setConfirmationOpen] = useState(false);
 	const [internalSubmitting, setInternalSubmitting] = useState(false);
 
@@ -215,6 +219,12 @@ export const BuySellKeyFlow: React.FC<BuySellKeyFlowProps> = ({
 			currentSupply: currentSupply ?? 0,
 		});
 	}, [isValid, parsedAmount, side, currentSupply]);
+	const impactWarningActive =
+		isValid &&
+		isHighPriceImpact(priceImpactPercent, slippageTolerancePercent);
+	const impactAcknowledgementKey = `${side}:${parsedAmount}:${currentSupply ?? 0}:${slippageTolerancePercent}`;
+	const impactAcknowledged =
+		acknowledgedImpactKey === impactAcknowledgementKey;
 
 	// Early sell launch penalty
 	const launchPenalty = useMemo(() => {
@@ -234,12 +244,13 @@ export const BuySellKeyFlow: React.FC<BuySellKeyFlowProps> = ({
 	// Open confirmation modal
 	const handleReviewOrder = () => {
 		setTouched(true);
-		if (!isValid) return;
+		if (!isValid || (impactWarningActive && !impactAcknowledged)) return;
 		setConfirmationOpen(true);
 	};
 
 	// Final submission
 	const handleConfirmSubmission = async () => {
+		if (impactWarningActive && !impactAcknowledged) return;
 		setInternalSubmitting(true);
 		const tradeParams: BuySellTradeParams = {
 			creatorId,
@@ -461,17 +472,31 @@ export const BuySellKeyFlow: React.FC<BuySellKeyFlowProps> = ({
 				/>
 			</div>
 
-			{/* Price Impact Warning when impact exceeds 5% */}
+			{/* Price impact warning when impact exceeds the selected tolerance */}
 			<PriceImpactWarning
 				impactPercent={priceImpactPercent}
-				threshold={PRICE_IMPACT_THRESHOLD_PERCENT}
+				threshold={slippageTolerancePercent}
 			/>
+			{impactWarningActive && (
+				<PriceImpactOverrideCheckbox
+					checked={impactAcknowledged}
+					onChange={checked =>
+						setAcknowledgedImpactKey(
+							checked ? impactAcknowledgementKey : null
+						)
+					}
+				/>
+			)}
 
 			{/* Review / Proceed to Confirmation Button */}
 			<Button
 				type="button"
 				onClick={handleReviewOrder}
-				disabled={!isValid || isSubmitting}
+				disabled={
+					!isValid ||
+					isSubmitting ||
+					(impactWarningActive && !impactAcknowledged)
+				}
 				data-testid="trade-review-button"
 				className={cn(
 					'w-full rounded-xl py-3 font-bold text-sm shadow-md transition-all',
diff --git a/src/components/common/PriceImpactOverrideCheckbox.tsx b/src/components/common/PriceImpactOverrideCheckbox.tsx
new file mode 100644
index 00000000..d85d6a88
--- /dev/null
+++ b/src/components/common/PriceImpactOverrideCheckbox.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+export interface PriceImpactOverrideCheckboxProps {
+	checked: boolean;
+	onChange: (checked: boolean) => void;
+}
+
+/** Requires explicit acknowledgement before a high-impact trade can proceed. */
+const PriceImpactOverrideCheckbox: React.FC<
+	PriceImpactOverrideCheckboxProps
+> = ({ checked, onChange }) => (
+	<label className="flex cursor-pointer items-start gap-2 text-xs text-white/80">
+		<input
+			type="checkbox"
+			checked={checked}
+			onChange={event => onChange(event.target.checked)}
+			className="mt-0.5 accent-amber-400"
+			data-testid="price-impact-override-checkbox"
+		/>
+		<span>
+			I understand this trade&apos;s estimated price impact exceeds my
+			slippage tolerance and want to proceed.
+		</span>
+	</label>
+);
+
+export default PriceImpactOverrideCheckbox;
diff --git a/src/components/common/PriceImpactWarning.tsx b/src/components/common/PriceImpactWarning.tsx
index c9d3b2b1..ffb09967 100644
--- a/src/components/common/PriceImpactWarning.tsx
+++ b/src/components/common/PriceImpactWarning.tsx
@@ -51,7 +51,7 @@ export const PriceImpactWarning: React.FC<PriceImpactWarningProps> = ({
 			/>
 			<div className="space-y-0.5">
 				<p className="font-semibold">
-					High Price Impact Warning:{' '}
+					Estimated Price Impact:{' '}
 					<span
 						className="font-mono font-bold"
 						data-testid="price-impact-value"
@@ -62,9 +62,9 @@ export const PriceImpactWarning: React.FC<PriceImpactWarningProps> = ({
 					</span>
 				</p>
 				<p className="text-white/70">
-					This trade has a price impact exceeding {threshold}%. Your order
-					will execute at a significantly different price from the current
-					spot price.
+					This trade has a price impact exceeding {threshold}%. Your
+					estimated execution price differs from the current spot price by
+					the amount shown above.
 				</p>
 			</div>
 		</div>
diff --git a/src/components/common/TradeConfirmationModal.tsx b/src/components/common/TradeConfirmationModal.tsx
index d58bfcd7..1a5c4cd4 100644
--- a/src/components/common/TradeConfirmationModal.tsx
+++ b/src/components/common/TradeConfirmationModal.tsx
@@ -215,10 +215,14 @@ export const TradeConfirmationModal: React.FC<TradeConfirmationModalProps> = ({
 
 					{/* Price Impact Warning if exceeds 5% */}
 					{priceImpactPercent != null &&
-						isHighPriceImpact(priceImpactPercent) && (
+						isHighPriceImpact(
+							priceImpactPercent,
+							slippageTolerancePercent
+						) && (
 							<div data-testid="confirmation-modal-impact-warning">
 								<PriceImpactWarning
 									impactPercent={priceImpactPercent}
+									threshold={slippageTolerancePercent}
 								/>
 							</div>
 						)}
diff --git a/src/components/common/TradeDialog.tsx b/src/components/common/TradeDialog.tsx
index 0f2c9c0a..36ba3b1a 100644
--- a/src/components/common/TradeDialog.tsx
+++ b/src/components/common/TradeDialog.tsx
@@ -42,18 +42,19 @@ import {
 	type FeeBreakdown,
 } from '@/utils/pricePreview.utils';
 import PriceImpactWarning from '@/components/common/PriceImpactWarning';
+import PriceImpactOverrideCheckbox from '@/components/common/PriceImpactOverrideCheckbox';
 import TradeConfirmationModal from '@/components/common/TradeConfirmationModal';
 import {
 	calculateTradePriceImpact,
-	PRICE_IMPACT_THRESHOLD_PERCENT,
+	isHighPriceImpact,
 } from '@/utils/priceImpact.utils';
 import {
-	DEFAULT_SLIPPAGE_TOLERANCE_PERCENT,
 	computeSlippageBounds,
 	type SlippageBounds,
 } from '@/utils/slippageTolerance.utils';
 import type { KeyConfig } from '@/services/course.service';
 import SpreadIndicator from '@/components/common/SpreadIndicator';
+import { useSlippageTolerancePreference } from '@/hooks/useSlippageTolerancePreference';
 
 export type TradeSide = 'buy' | 'sell';
 
@@ -121,9 +122,11 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 	const [pricePreview, setPricePreview] = useState<FeeBreakdown | null>(null);
 	const [previewLoading, setPreviewLoading] = useState(false);
 	const [previewError, setPreviewError] = useState<string | null>(null);
-	const [slippageTolerancePercent, setSlippageTolerancePercent] = useState(
-		DEFAULT_SLIPPAGE_TOLERANCE_PERCENT
-	);
+	const [slippageTolerancePercent, setSlippageTolerancePercent] =
+		useSlippageTolerancePreference();
+	const [acknowledgedImpactKey, setAcknowledgedImpactKey] = useState<
+		string | null
+	>(null);
 	const [confirmationOpen, setConfirmationOpen] = useState(false);
 	const amountInputRef = useRef<HTMLInputElement | null>(null);
 	const pricePreviewFailureLogged = useRef(false);
@@ -146,7 +149,7 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 			setPricePreview(null);
 			setPreviewLoading(false);
 			setPreviewError(null);
-			setSlippageTolerancePercent(DEFAULT_SLIPPAGE_TOLERANCE_PERCENT);
+			setAcknowledgedImpactKey(null);
 			pricePreviewFailureLogged.current = false;
 		}
 	}, [open]);
@@ -339,6 +342,12 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 			currentSupply: currentSupply ?? 0,
 		});
 	}, [amountValid, parsedAmount, side, currentSupply]);
+	const impactWarningActive =
+		amountValid &&
+		isHighPriceImpact(priceImpactPercent, slippageTolerancePercent);
+	const impactAcknowledgementKey = `${side}:${parsedAmount}:${currentSupply ?? 0}:${slippageTolerancePercent}`;
+	const impactAcknowledged =
+		acknowledgedImpactKey === impactAcknowledgementKey;
 
 	const handleMaxClick = () => {
 		setTouched(true);
@@ -615,9 +624,19 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 						)}
 						<PriceImpactWarning
 							impactPercent={priceImpactPercent}
-							threshold={PRICE_IMPACT_THRESHOLD_PERCENT}
+							threshold={slippageTolerancePercent}
 							className="mt-2"
 						/>
+						{impactWarningActive && (
+							<PriceImpactOverrideCheckbox
+								checked={impactAcknowledged}
+								onChange={checked =>
+									setAcknowledgedImpactKey(
+										checked ? impactAcknowledgementKey : null
+									)
+								}
+							/>
+						)}
 					</div>
 				)}
 			</div>
@@ -639,6 +658,7 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 			<Button
 				type="button"
 				onClick={() => {
+					if (impactWarningActive && !impactAcknowledged) return;
 					if (requireConfirmation) {
 						setConfirmationOpen(true);
 					} else {
@@ -648,6 +668,7 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 				disabled={
 					!amountValid ||
 					isSubmitting ||
+					(impactWarningActive && !impactAcknowledged) ||
 					(side === 'buy' && (previewLoading || previewError != null))
 				}
 				aria-busy={isSubmitting || undefined}
@@ -678,6 +699,7 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 			minPriceStroops={slippageBounds?.minPriceStroops ?? null}
 			priceImpactPercent={priceImpactPercent}
 			onConfirm={async () => {
+				if (impactWarningActive && !impactAcknowledged) return;
 				await onConfirm(parsedAmount, pricePreview, slippageBounds);
 				setConfirmationOpen(false);
 			}}
diff --git a/src/components/common/__tests__/BuySellKeyFlow.test.tsx b/src/components/common/__tests__/BuySellKeyFlow.test.tsx
index fe61fa71..7a8cadf3 100644
--- a/src/components/common/__tests__/BuySellKeyFlow.test.tsx
+++ b/src/components/common/__tests__/BuySellKeyFlow.test.tsx
@@ -18,6 +18,7 @@ const mockShowToast = vi.mocked(showToast);
 describe('BuySellKeyFlow (#919)', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
+		window.localStorage.clear();
 	});
 
 	it('renders buy/sell input panel with amount field and max button', () => {
@@ -104,6 +105,10 @@ describe('BuySellKeyFlow (#919)', () => {
 
 		expect(screen.getByTestId('price-impact-warning')).toBeInTheDocument();
 		expect(screen.getByTestId('price-impact-value')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('price-impact-override-checkbox')
+		).toBeInTheDocument();
+		expect(screen.getByTestId('trade-review-button')).toBeDisabled();
 	});
 
 	it('does not show price impact warning when impact is within 5%', () => {
@@ -141,6 +146,9 @@ describe('BuySellKeyFlow (#919)', () => {
 
 		// Select 2% slippage tolerance
 		fireEvent.click(screen.getByTestId('slippage-preset-2'));
+		if (screen.queryByTestId('price-impact-override-checkbox')) {
+			fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		}
 
 		// Click review order button
 		fireEvent.click(screen.getByTestId('trade-review-button'));
@@ -178,6 +186,9 @@ describe('BuySellKeyFlow (#919)', () => {
 		fireEvent.change(amountInput, { target: { value: '3' } });
 
 		fireEvent.click(screen.getByTestId('slippage-preset-1'));
+		if (screen.queryByTestId('price-impact-override-checkbox')) {
+			fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		}
 		fireEvent.click(screen.getByTestId('trade-review-button'));
 
 		expect(
@@ -203,6 +214,7 @@ describe('BuySellKeyFlow (#919)', () => {
 				creatorName="Alex Rivers"
 				availableHoldings={10}
 				keyPriceStroops={1_000_000}
+				currentSupply={100}
 				protocolFeeBps={0}
 				creatorFeeBps={0}
 				onSubmitTrade={onSubmitTrade}
@@ -215,6 +227,9 @@ describe('BuySellKeyFlow (#919)', () => {
 
 		// Select 0.5% slippage
 		fireEvent.click(screen.getByTestId('slippage-preset-0.5'));
+		if (screen.queryByTestId('price-impact-override-checkbox')) {
+			fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		}
 
 		// Open confirmation modal
 		fireEvent.click(screen.getByTestId('trade-review-button'));
@@ -263,6 +278,7 @@ describe('BuySellKeyFlow (#919)', () => {
 				creatorName="Alex Rivers"
 				availableHoldings={10}
 				keyPriceStroops={1_000_000}
+				currentSupply={100}
 				initialSide="sell"
 				onSubmitTrade={onSubmitTrade}
 				onError={onError}
diff --git a/src/components/common/__tests__/TradeDialog.slippageControls.test.tsx b/src/components/common/__tests__/TradeDialog.slippageControls.test.tsx
index b2d0f5e0..e961d60a 100644
--- a/src/components/common/__tests__/TradeDialog.slippageControls.test.tsx
+++ b/src/components/common/__tests__/TradeDialog.slippageControls.test.tsx
@@ -1,8 +1,12 @@
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import TradeDialog from '../TradeDialog';
 
 describe('TradeDialog slippage protection controls (#919)', () => {
+	beforeEach(() => {
+		window.localStorage.clear();
+	});
+
 	it('sets amount to available holdings when MAX is clicked on sell side', () => {
 		render(
 			<TradeDialog
@@ -85,6 +89,61 @@ describe('TradeDialog slippage protection controls (#919)', () => {
 		fireEvent.change(amountInput, { target: { value: '10' } });
 
 		expect(screen.getByTestId('price-impact-warning')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('price-impact-override-checkbox')
+		).toBeInTheDocument();
+		expect(screen.getByTestId('trade-dialog-confirm')).toBeDisabled();
+	});
+
+	it('requires acknowledgement for high impact and submits after it is checked', () => {
+		const onConfirm = vi.fn();
+		render(
+			<TradeDialog
+				open={true}
+				side="buy"
+				creatorName="Alex Rivers"
+				availableHoldings={10}
+				keyPriceStroops={1_000_000}
+				currentSupply={0}
+				onOpenChange={vi.fn()}
+				onConfirm={onConfirm}
+			/>
+		);
+
+		fireEvent.change(screen.getByTestId('trade-dialog-amount'), {
+			target: { value: '10' },
+		});
+		const confirmButton = screen.getByTestId('trade-dialog-confirm');
+		expect(confirmButton).toBeDisabled();
+		fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		expect(confirmButton).toBeEnabled();
+		fireEvent.click(confirmButton);
+		expect(onConfirm).toHaveBeenCalledOnce();
+	});
+
+	it('requires a new acknowledgement when the quoted trade amount changes', () => {
+		render(
+			<TradeDialog
+				open={true}
+				side="buy"
+				creatorName="Alex Rivers"
+				availableHoldings={10}
+				keyPriceStroops={1_000_000}
+				currentSupply={0}
+				onOpenChange={vi.fn()}
+				onConfirm={vi.fn()}
+			/>
+		);
+		fireEvent.change(screen.getByTestId('trade-dialog-amount'), {
+			target: { value: '10' },
+		});
+		fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		expect(screen.getByTestId('trade-dialog-confirm')).toBeEnabled();
+
+		fireEvent.change(screen.getByTestId('trade-dialog-amount'), {
+			target: { value: '9' },
+		});
+		expect(screen.getByTestId('trade-dialog-confirm')).toBeDisabled();
 	});
 
 	it('opens confirmation modal showing correct price bounds when requireConfirmation is true', async () => {
@@ -107,6 +166,9 @@ describe('TradeDialog slippage protection controls (#919)', () => {
 
 		const amountInput = screen.getByTestId('trade-dialog-amount');
 		fireEvent.change(amountInput, { target: { value: '3' } });
+		if (screen.queryByTestId('price-impact-override-checkbox')) {
+			fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		}
 
 		// Click confirm in dialog
 		fireEvent.click(screen.getByTestId('trade-dialog-confirm'));
diff --git a/src/components/common/__tests__/TradeDialog.slippageTolerance.test.tsx b/src/components/common/__tests__/TradeDialog.slippageTolerance.test.tsx
index 79d4dbef..d45ebc2e 100644
--- a/src/components/common/__tests__/TradeDialog.slippageTolerance.test.tsx
+++ b/src/components/common/__tests__/TradeDialog.slippageTolerance.test.tsx
@@ -1,8 +1,12 @@
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import TradeDialog from '@/components/common/TradeDialog';
 
 describe('TradeDialog slippage tolerance (#872)', () => {
+	beforeEach(() => {
+		window.localStorage.clear();
+	});
+
 	function renderBuyDialog(
 		overrides: Partial<React.ComponentProps<typeof TradeDialog>> = {}
 	) {
diff --git a/src/hooks/__tests__/useSlippageTolerancePreference.test.tsx b/src/hooks/__tests__/useSlippageTolerancePreference.test.tsx
new file mode 100644
index 00000000..3e012b7c
--- /dev/null
+++ b/src/hooks/__tests__/useSlippageTolerancePreference.test.tsx
@@ -0,0 +1,41 @@
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import {
+	SLIPPAGE_TOLERANCE_PREFERENCE_KEY,
+	useSlippageTolerancePreference,
+} from '../useSlippageTolerancePreference';
+
+describe('useSlippageTolerancePreference', () => {
+	beforeEach(() => {
+		window.localStorage.clear();
+	});
+
+	it('defaults to 1% and persists an updated preference', () => {
+		const { result, unmount } = renderHook(() =>
+			useSlippageTolerancePreference()
+		);
+		expect(result.current[0]).toBe(1);
+
+		act(() => result.current[1](2.5));
+		expect(result.current[0]).toBe(2.5);
+		expect(
+			JSON.parse(
+				window.localStorage.getItem(SLIPPAGE_TOLERANCE_PREFERENCE_KEY) ??
+					'null'
+			)
+		).toBe(2.5);
+		unmount();
+
+		const restored = renderHook(() => useSlippageTolerancePreference());
+		expect(restored.result.current[0]).toBe(2.5);
+	});
+
+	it('falls back to 1% for invalid persisted preferences', () => {
+		window.localStorage.setItem(
+			SLIPPAGE_TOLERANCE_PREFERENCE_KEY,
+			JSON.stringify(75)
+		);
+		const { result } = renderHook(() => useSlippageTolerancePreference());
+		expect(result.current[0]).toBe(1);
+	});
+});
diff --git a/src/hooks/useSlippageTolerancePreference.ts b/src/hooks/useSlippageTolerancePreference.ts
new file mode 100644
index 00000000..942ce37f
--- /dev/null
+++ b/src/hooks/useSlippageTolerancePreference.ts
@@ -0,0 +1,35 @@
+import { useCallback, useState } from 'react';
+import { getPreference, setPreference } from '@/utils/preferences.utils';
+import {
+	DEFAULT_SLIPPAGE_TOLERANCE_PERCENT,
+	validateSlippageTolerancePercent,
+} from '@/utils/slippageTolerance.utils';
+
+export const SLIPPAGE_TOLERANCE_PREFERENCE_KEY =
+	'accesslayer.preferences.slippage-tolerance-percent';
+
+function readSlippageTolerancePreference(): number {
+	const value = getPreference<unknown>(
+		SLIPPAGE_TOLERANCE_PREFERENCE_KEY,
+		DEFAULT_SLIPPAGE_TOLERANCE_PERCENT
+	);
+	return typeof value === 'number' &&
+		validateSlippageTolerancePercent(value) === null
+		? value
+		: DEFAULT_SLIPPAGE_TOLERANCE_PERCENT;
+}
+
+/** Reads and persists the user's device-wide slippage tolerance preference. */
+export function useSlippageTolerancePreference() {
+	const [slippageTolerancePercent, setSlippageTolerancePercent] = useState(
+		readSlippageTolerancePreference
+	);
+
+	const updateSlippageTolerancePercent = useCallback((value: number) => {
+		if (validateSlippageTolerancePercent(value) !== null) return;
+		setSlippageTolerancePercent(value);
+		setPreference(SLIPPAGE_TOLERANCE_PREFERENCE_KEY, value);
+	}, []);
+
+	return [slippageTolerancePercent, updateSlippageTolerancePercent] as const;
+}
diff --git a/src/pages/__tests__/CreatorDetailPage.buyKeyFlow.integration.test.tsx b/src/pages/__tests__/CreatorDetailPage.buyKeyFlow.integration.test.tsx
index aa5bd5d0..9f127880 100644
--- a/src/pages/__tests__/CreatorDetailPage.buyKeyFlow.integration.test.tsx
+++ b/src/pages/__tests__/CreatorDetailPage.buyKeyFlow.integration.test.tsx
@@ -68,6 +68,7 @@ describe('CreatorDetailPage Buy Key Flow with slippage protection (#919)', () =>
 
 	beforeEach(() => {
 		vi.clearAllMocks();
+		window.localStorage.clear();
 		vi.mocked(useCreatorDetail).mockReturnValue({
 			data: mockCreator,
 			isLoading: false,
@@ -124,9 +125,13 @@ describe('CreatorDetailPage Buy Key Flow with slippage protection (#919)', () =>
 
 		const amountInput = await screen.findByTestId('trade-dialog-amount');
 		fireEvent.change(amountInput, { target: { value: '2' } });
+		await screen.findByTestId('buy-fee-breakdown');
 
 		// Select 1% slippage
 		fireEvent.click(screen.getByTestId('slippage-preset-1'));
+		if (screen.queryByTestId('price-impact-override-checkbox')) {
+			fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		}
 
 		// Confirm in dialog (with requireConfirmation=true, this opens confirmation modal)
 		fireEvent.click(screen.getByTestId('trade-dialog-confirm'));
diff --git a/src/pages/__tests__/LandingPage.buyFlowEndToEnd.integration.test.tsx b/src/pages/__tests__/LandingPage.buyFlowEndToEnd.integration.test.tsx
index da29a314..67e8590a 100644
--- a/src/pages/__tests__/LandingPage.buyFlowEndToEnd.integration.test.tsx
+++ b/src/pages/__tests__/LandingPage.buyFlowEndToEnd.integration.test.tsx
@@ -15,7 +15,13 @@
  */
 import type { ComponentProps, ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+	cleanup,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 vi.mock('wagmi', () => ({
@@ -173,7 +179,9 @@ const installStorageStub = (property: 'localStorage' | 'sessionStorage') => {
 const renderLandingPage = () =>
 	render(
 		<QueryClientProvider
-			client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}
+			client={
+				new QueryClient({ defaultOptions: { queries: { retry: false } } })
+			}
 		>
 			<MemoryRouter>
 				<LandingPage />
@@ -212,6 +220,12 @@ describe('LandingPage buy flow end-to-end (#642)', () => {
 		// Enter quantity 1
 		const amountInput = await screen.findByTestId('trade-dialog-amount');
 		fireEvent.change(amountInput, { target: { value: '1' } });
+		if (screen.queryByTestId('price-impact-override-checkbox')) {
+			fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		}
+		await waitFor(() =>
+			expect(screen.getByTestId('trade-dialog-confirm')).toBeEnabled()
+		);
 
 		// Submit and wait through the simulated on-chain confirmation
 		fireEvent.click(screen.getByTestId('trade-dialog-confirm'));
@@ -227,7 +241,8 @@ describe('LandingPage buy flow end-to-end (#642)', () => {
 
 		// Holdings cache reflects the additional key (3 -> 4)
 		await waitFor(
-			() => expect(screen.getByText('4 keys · 0.05 XLM')).toBeInTheDocument(),
+			() =>
+				expect(screen.getByText('4 keys · 0.05 XLM')).toBeInTheDocument(),
 			{ timeout: 5000 }
 		);
 		expect(screen.queryByText('3 keys · 0.05 XLM')).toBeNull();
@@ -248,6 +263,12 @@ describe('LandingPage buy flow end-to-end (#642)', () => {
 		fireEvent.change(await screen.findByTestId('trade-dialog-amount'), {
 			target: { value: '1' },
 		});
+		if (screen.queryByTestId('price-impact-override-checkbox')) {
+			fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		}
+		await waitFor(() =>
+			expect(screen.getByTestId('trade-dialog-confirm')).toBeEnabled()
+		);
 		fireEvent.click(screen.getByTestId('trade-dialog-confirm'));
 
 		expect(mockShowToast.loading).toHaveBeenCalledWith(
@@ -269,7 +290,10 @@ describe('LandingPage buy flow end-to-end (#642)', () => {
 		fireEvent.change(amountInput, { target: { value: '1' } });
 
 		const confirmButton = screen.getByTestId('trade-dialog-confirm');
-		expect(confirmButton).not.toBeDisabled();
+		if (screen.queryByTestId('price-impact-override-checkbox')) {
+			fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		}
+		await waitFor(() => expect(confirmButton).toBeEnabled());
 	});
 
 	it('displays a pending indicator during the buy and clears it after confirmation (#672)', async () => {
@@ -285,6 +309,10 @@ describe('LandingPage buy flow end-to-end (#642)', () => {
 		const amountInput = await screen.findByTestId('trade-dialog-amount');
 		fireEvent.change(amountInput, { target: { value: '1' } });
 		const confirmButton = screen.getByTestId('trade-dialog-confirm');
+		if (screen.queryByTestId('price-impact-override-checkbox')) {
+			fireEvent.click(screen.getByTestId('price-impact-override-checkbox'));
+		}
+		await waitFor(() => expect(confirmButton).toBeEnabled());
 
 		// Submit. AC #1: a pending indicator is visible on the dialog the
 		// instant the click handler sets `tradeSubmitting = true`. The
@@ -300,7 +328,10 @@ describe('LandingPage buy flow end-to-end (#642)', () => {
 		// `.toBeVisible()` honors `visibility: hidden` (and `aria-hidden`),
 		// so it correctly reflects what the user perceives.
 		expect(screen.getByText('Submitting…')).toBeVisible();
-		expect(screen.getByText('Confirm buy')).toHaveAttribute('aria-hidden', 'true');
+		expect(screen.getByText('Confirm buy')).toHaveAttribute(
+			'aria-hidden',
+			'true'
+		);
 		// The loading toast announces the in-flight submission right away.
 		expect(mockShowToast.loading).toHaveBeenCalledWith(
 			'Submitting buy for 1 key...'
@@ -353,7 +384,8 @@ describe('LandingPage buy flow end-to-end (#642)', () => {
 
 		// Holdings cache reflects the additional key.
 		await waitFor(
-			() => expect(screen.getByText('4 keys · 0.05 XLM')).toBeInTheDocument(),
+			() =>
+				expect(screen.getByText('4 keys · 0.05 XLM')).toBeInTheDocument(),
 			{ timeout: 5000 }
 		);
 		expect(screen.queryByText('3 keys · 0.05 XLM')).toBeNull();
@@ -372,6 +404,9 @@ describe('LandingPage buy flow end-to-end (#642)', () => {
 		expect(reopenedConfirm).not.toBeDisabled();
 		expect(reopenedConfirm).not.toHaveAttribute('aria-busy');
 		expect(screen.getByText('Confirm buy')).toBeVisible();
-		expect(screen.getByText('Submitting…')).toHaveAttribute('aria-hidden', 'true');
+		expect(screen.getByText('Submitting…')).toHaveAttribute(
+			'aria-hidden',
+			'true'
+		);
 	}, 15000);
 });