diff --git a/src/components/common/LaunchPenaltyWarning.tsx b/src/components/common/LaunchPenaltyWarning.tsx new file mode 100644 index 00000000..d4b5097b --- /dev/null +++ b/src/components/common/LaunchPenaltyWarning.tsx @@ -0,0 +1,44 @@ +import { AlertTriangle } from 'lucide-react'; +import { bpsToPercent } from '@/utils/numberFormat.utils'; + +export interface LaunchPenaltyWarningProps { + /** Whether the sell falls within the key's 7-day launch window. */ + visible: boolean; + /** Penalty rate in basis points that will be deducted. */ + penaltyBps: number; +} + +/** + * Prominent warning shown on the sell confirmation modal when the key is + * still within its 7-day launch window (#825). Deliberately styled bolder + * than `StaleDataWarning` — it precedes a signed transaction that will + * actually cost the holder the stated percentage of their proceeds. + */ +const LaunchPenaltyWarning: React.FC = ({ + visible, + penaltyBps, +}) => { + if (!visible) return null; + + return ( +
+
+ ); +}; + +export default LaunchPenaltyWarning; diff --git a/src/components/common/SellFeeBreakdown.tsx b/src/components/common/SellFeeBreakdown.tsx new file mode 100644 index 00000000..ad1d84cc --- /dev/null +++ b/src/components/common/SellFeeBreakdown.tsx @@ -0,0 +1,73 @@ +/** + * Sell fee breakdown display component. + * Shows estimated gross proceeds and, when the key is still within its + * 7-day launch window, the launch penalty deducted and the resulting net + * proceeds (#825). + */ + +import { formatDisplayKeyPrice } from '@/utils/keyPriceDisplay.utils'; +import { bpsToPercent } from '@/utils/numberFormat.utils'; +import type { LaunchPenaltyBreakdown } from '@/utils/launchPenalty.utils'; + +export interface SellFeeBreakdownProps { + /** Estimated gross proceeds in stroops, before any launch penalty. */ + grossProceedsStroops: number | null; + /** Launch penalty breakdown computed for this sell. */ + launchPenalty: LaunchPenaltyBreakdown; +} + +/** + * Displays the sell proceeds estimate. When `launchPenalty.applies` is + * true, also renders the penalty amount deducted and the net proceeds + * remaining after the penalty. + */ +const SellFeeBreakdown: React.FC = ({ + grossProceedsStroops, + launchPenalty, +}) => { + return ( +
+ {grossProceedsStroops != null ? ( + <> +
+ Estimated proceeds (approximate) + + {formatDisplayKeyPrice(grossProceedsStroops)} + +
+ + {launchPenalty.applies && ( + <> +
+ + Launch penalty ({bpsToPercent(launchPenalty.penaltyBps)}) + + + -{formatDisplayKeyPrice(launchPenalty.penaltyStroops)} + +
+
+ + Net proceeds + + + {formatDisplayKeyPrice(launchPenalty.netProceedsStroops)} + +
+ + )} + + ) : ( + <>Estimated proceeds unavailable + )} +
+ ); +}; + +export default SellFeeBreakdown; diff --git a/src/components/common/TradeDialog.tsx b/src/components/common/TradeDialog.tsx index 4dc5bdbf..8c235b0a 100644 --- a/src/components/common/TradeDialog.tsx +++ b/src/components/common/TradeDialog.tsx @@ -18,9 +18,12 @@ import { import PercentageBadge from '@/components/common/PercentageBadge'; import NetworkFeeHint from '@/components/common/NetworkFeeHint'; import BuyFeeBreakdown from '@/components/common/BuyFeeBreakdown'; +import SellFeeBreakdown from '@/components/common/SellFeeBreakdown'; +import LaunchPenaltyWarning from '@/components/common/LaunchPenaltyWarning'; import { TRADE_FEE_ESTIMATE, FEE_BOUNDS } from '@/constants/fees'; import { formatTransactionFeeDisplay } from '@/utils/transactionFee.utils'; import { clampBuyQuantity } from '@/utils/buyQuantity'; +import { calculateLaunchPenalty } from '@/utils/launchPenalty.utils'; import { fetchPricePreview, type FeeBreakdown, @@ -41,6 +44,12 @@ export interface TradeDialogProps { protocolFeeBps?: number; /** Creator fee in basis points for fee preview (defaults to FEE_BOUNDS.DEFAULT_FEE_BPS) */ creatorFeeBps?: number; + /** Ledger sequence the key was created at, from the key detail API. */ + createdAtLedger?: number | null; + /** Current network ledger sequence, used to evaluate the 7-day launch window. */ + currentLedger?: number | null; + /** Early-sell penalty in basis points, from the key detail API. */ + launchPenaltyBps?: number | null; onOpenChange: (open: boolean) => void; onConfirm: ( amount: number, @@ -58,6 +67,9 @@ const TradeDialog: React.FC = ({ currentSupply, protocolFeeBps = FEE_BOUNDS.DEFAULT_FEE_BPS, creatorFeeBps = FEE_BOUNDS.DEFAULT_FEE_BPS, + createdAtLedger, + currentLedger, + launchPenaltyBps, onOpenChange, onConfirm, isSubmitting = false, @@ -141,6 +153,17 @@ const TradeDialog: React.FC = ({ return estimateSellProceeds(keyPriceStroops, currentSupply, parsedAmount); }, [side, keyPriceStroops, currentSupply, parsedAmount]); + const launchPenalty = useMemo( + () => + calculateLaunchPenalty( + estimatedProceedsStroops, + createdAtLedger, + currentLedger, + launchPenaltyBps + ), + [estimatedProceedsStroops, createdAtLedger, currentLedger, launchPenaltyBps] + ); + const estimatedTotalStroops = useMemo(() => { if ( side !== 'buy' || @@ -290,6 +313,13 @@ const TradeDialog: React.FC = ({

)} + {side === 'sell' && ( + + )} +
Amount
= ({
)} {side === 'sell' && ( -
- {estimatedProceedsStroops != null ? ( - <> - Estimated proceeds (approximate):{' '} - - {formatDisplayKeyPrice(estimatedProceedsStroops)} - - - ) : ( - <>Estimated proceeds unavailable - )} -
+ )} diff --git a/src/components/common/__tests__/LaunchPenaltyWarning.test.tsx b/src/components/common/__tests__/LaunchPenaltyWarning.test.tsx new file mode 100644 index 00000000..b12c4111 --- /dev/null +++ b/src/components/common/__tests__/LaunchPenaltyWarning.test.tsx @@ -0,0 +1,40 @@ +import { render, screen } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; +import LaunchPenaltyWarning from '@/components/common/LaunchPenaltyWarning'; + +describe('LaunchPenaltyWarning', () => { + it('renders nothing when not visible', () => { + const { container } = render( + + ); + + expect(container.firstChild).toBeNull(); + }); + + it('renders the warning with the penalty percentage when visible', () => { + render(); + + const warning = screen.getByTestId('launch-penalty-warning'); + expect(warning).toBeInTheDocument(); + expect(warning).toHaveTextContent('Early sell penalty applies'); + expect(warning).toHaveTextContent('will be deducted from your proceeds'); + expect(screen.getByTestId('launch-penalty-rate')).toHaveTextContent('5%'); + }); + + it('formats fractional penalty percentages', () => { + render(); + + expect(screen.getByTestId('launch-penalty-rate')).toHaveTextContent( + '3.33%' + ); + }); + + it('has an alert role so assistive tech announces it', () => { + render(); + + expect(screen.getByTestId('launch-penalty-warning')).toHaveAttribute( + 'role', + 'alert' + ); + }); +}); diff --git a/src/components/common/__tests__/SellFeeBreakdown.test.tsx b/src/components/common/__tests__/SellFeeBreakdown.test.tsx new file mode 100644 index 00000000..2e431c89 --- /dev/null +++ b/src/components/common/__tests__/SellFeeBreakdown.test.tsx @@ -0,0 +1,88 @@ +import { render, screen } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; +import SellFeeBreakdown from '@/components/common/SellFeeBreakdown'; +import type { LaunchPenaltyBreakdown } from '@/utils/launchPenalty.utils'; + +const noPenalty: LaunchPenaltyBreakdown = { + applies: false, + penaltyBps: 0, + penaltyStroops: 0, + netProceedsStroops: 1_000_000, +}; + +describe('SellFeeBreakdown', () => { + it('shows only the gross proceeds estimate when no penalty applies', () => { + render( + + ); + + expect(screen.getByText(/Estimated proceeds/i)).toBeInTheDocument(); + expect(screen.getByText(/0\.10? XLM/)).toBeInTheDocument(); + expect( + screen.queryByTestId('sell-fee-breakdown-penalty') + ).not.toBeInTheDocument(); + expect( + screen.queryByTestId('sell-fee-breakdown-net') + ).not.toBeInTheDocument(); + }); + + it('shows "Estimated proceeds unavailable" when gross proceeds are null', () => { + render( + + ); + + expect( + screen.getByText('Estimated proceeds unavailable') + ).toBeInTheDocument(); + }); + + it('shows the penalty line item and net proceeds when the penalty applies', () => { + const penalty: LaunchPenaltyBreakdown = { + applies: true, + penaltyBps: 500, + penaltyStroops: 50_000, + netProceedsStroops: 950_000, + }; + + render( + + ); + + const penaltyRow = screen.getByTestId('sell-fee-breakdown-penalty'); + expect(penaltyRow).toHaveTextContent('Launch penalty (5%)'); + expect(penaltyRow).toHaveTextContent('0.005 XLM'); + + const netRow = screen.getByTestId('sell-fee-breakdown-net'); + expect(netRow).toHaveTextContent('Net proceeds'); + expect(netRow).toHaveTextContent('0.095 XLM'); + }); + + it('formats the net proceeds correctly for a large penalty', () => { + const penalty: LaunchPenaltyBreakdown = { + applies: true, + penaltyBps: 2000, // 20% + penaltyStroops: 200_000, + netProceedsStroops: 800_000, + }; + + render( + + ); + + expect(screen.getByTestId('sell-fee-breakdown-penalty')).toHaveTextContent( + 'Launch penalty (20%)' + ); + expect(screen.getByTestId('sell-fee-breakdown-net')).toHaveTextContent( + '0.08 XLM' + ); + }); +}); diff --git a/src/components/common/__tests__/TradeDialog.launchPenalty.test.tsx b/src/components/common/__tests__/TradeDialog.launchPenalty.test.tsx new file mode 100644 index 00000000..7bd08ccc --- /dev/null +++ b/src/components/common/__tests__/TradeDialog.launchPenalty.test.tsx @@ -0,0 +1,151 @@ +/** + * Unit tests for the launch penalty warning on the sell confirmation + * modal (#825). Holders selling within 7 days of a key's creation incur + * an early-sell penalty; the modal must surface a warning plus an updated + * fee breakdown before the user signs, and let them proceed anyway. + */ +import { describe, expect, it, vi } from 'vitest'; +import { render, screen, fireEvent } from '@testing-library/react'; +import TradeDialog from '@/components/common/TradeDialog'; +import { LAUNCH_WINDOW_LEDGERS } from '@/utils/launchPenalty.utils'; + +describe('TradeDialog – launch penalty warning (#825)', () => { + function renderSellDialog( + overrides: Partial> = {} + ) { + return render( + + ); + } + + it('shows the warning when selling within the 7-day launch window', () => { + renderSellDialog({ + createdAtLedger: 1000, + currentLedger: 1000 + 100, + launchPenaltyBps: 500, // 5% + }); + + const warning = screen.getByTestId('launch-penalty-warning'); + expect(warning).toBeInTheDocument(); + expect(warning).toHaveTextContent('Early sell penalty applies'); + expect(screen.getByTestId('launch-penalty-rate')).toHaveTextContent('5%'); + }); + + it('hides the warning once the key is past the launch window', () => { + renderSellDialog({ + createdAtLedger: 1000, + currentLedger: 1000 + LAUNCH_WINDOW_LEDGERS + 1, + launchPenaltyBps: 500, + }); + + expect( + screen.queryByTestId('launch-penalty-warning') + ).not.toBeInTheDocument(); + }); + + it('hides the warning when no launch penalty is configured', () => { + renderSellDialog({ + createdAtLedger: 1000, + currentLedger: 1000 + 10, + launchPenaltyBps: 0, + }); + + expect( + screen.queryByTestId('launch-penalty-warning') + ).not.toBeInTheDocument(); + }); + + it('hides the warning when ledger data is unavailable', () => { + renderSellDialog(); + + expect( + screen.queryByTestId('launch-penalty-warning') + ).not.toBeInTheDocument(); + }); + + it('never shows the warning on the buy side', () => { + renderSellDialog({ + side: 'buy', + createdAtLedger: 1000, + currentLedger: 1050, + launchPenaltyBps: 500, + }); + + expect( + screen.queryByTestId('launch-penalty-warning') + ).not.toBeInTheDocument(); + }); + + it('displays the penalty amount and net proceeds in the fee breakdown', () => { + renderSellDialog({ + createdAtLedger: 1000, + currentLedger: 1050, + launchPenaltyBps: 500, // 5% + }); + + const input = screen.getByTestId('trade-dialog-amount'); + // keyPriceStroops=500_000 * quantity=4 = 2_000_000 stroops gross (0.2 XLM) + fireEvent.change(input, { target: { value: '4' } }); + + expect(screen.getByTestId('sell-fee-breakdown-penalty')).toHaveTextContent( + 'Launch penalty (5%)' + ); + // 5% of 0.2 XLM = 0.01 XLM + expect(screen.getByTestId('sell-fee-breakdown-penalty')).toHaveTextContent( + '0.01 XLM' + ); + expect(screen.getByTestId('sell-fee-breakdown-net')).toHaveTextContent( + 'Net proceeds' + ); + // 0.2 XLM - 0.01 XLM = 0.19 XLM + expect(screen.getByTestId('sell-fee-breakdown-net')).toHaveTextContent( + '0.19 XLM' + ); + }); + + it('does not show a penalty line item when past the launch window', () => { + renderSellDialog({ + createdAtLedger: 1000, + currentLedger: 1000 + LAUNCH_WINDOW_LEDGERS + 1, + launchPenaltyBps: 500, + }); + + const input = screen.getByTestId('trade-dialog-amount'); + fireEvent.change(input, { target: { value: '4' } }); + + expect( + screen.queryByTestId('sell-fee-breakdown-penalty') + ).not.toBeInTheDocument(); + expect( + screen.queryByTestId('sell-fee-breakdown-net') + ).not.toBeInTheDocument(); + }); + + it('still lets the user confirm the sale after the warning is shown', () => { + const onConfirm = vi.fn(); + renderSellDialog({ + createdAtLedger: 1000, + currentLedger: 1050, + launchPenaltyBps: 500, + onConfirm, + }); + + expect(screen.getByTestId('launch-penalty-warning')).toBeInTheDocument(); + + const input = screen.getByTestId('trade-dialog-amount'); + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.click(screen.getByTestId('trade-dialog-confirm')); + + expect(onConfirm).toHaveBeenCalledWith(2, null); + }); +}); diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 9712237d..e1996977 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -1865,6 +1865,9 @@ function LandingPage() { keyPriceStroops={resolveCreatorKeyPriceStroops(featuredCreator)} protocolFeeBps={250} creatorFeeBps={250} + createdAtLedger={featuredCreator?.createdAtLedger} + currentLedger={featuredCreator?.currentLedger} + launchPenaltyBps={featuredCreator?.launchPenaltyBps} isSubmitting={tradeSubmitting} onOpenChange={setTradeDialogOpen} onConfirm={handleConfirmTrade} diff --git a/src/services/course.service.ts b/src/services/course.service.ts index 3da0cdda..7a845bc2 100644 --- a/src/services/course.service.ts +++ b/src/services/course.service.ts @@ -51,6 +51,10 @@ export interface Course { * Applied to sells within the first 7 days after key creation. */ launchPenaltyBps?: number; + /** Ledger sequence at which this key was created; anchors the 7-day launch window. */ + createdAtLedger?: number; + /** Network ledger sequence as of this response, used to evaluate the launch window. */ + currentLedger?: number; } export type CourseSortOption = diff --git a/src/utils/__tests__/launchPenalty.utils.test.ts b/src/utils/__tests__/launchPenalty.utils.test.ts new file mode 100644 index 00000000..94b04aac --- /dev/null +++ b/src/utils/__tests__/launchPenalty.utils.test.ts @@ -0,0 +1,127 @@ +import { describe, it, expect } from 'vitest'; +import { + isWithinLaunchWindow, + calculateLaunchPenalty, + LAUNCH_WINDOW_LEDGERS, +} from '../launchPenalty.utils'; + +describe('isWithinLaunchWindow', () => { + it('returns true when the sell happens right at creation', () => { + expect(isWithinLaunchWindow(1000, 1000)).toBe(true); + }); + + it('returns true when the sell happens partway through the 7-day window', () => { + expect(isWithinLaunchWindow(1000, 1000 + LAUNCH_WINDOW_LEDGERS - 1)).toBe( + true + ); + }); + + it('returns false once the sell happens at exactly 7 days out', () => { + expect(isWithinLaunchWindow(1000, 1000 + LAUNCH_WINDOW_LEDGERS)).toBe( + false + ); + }); + + it('returns false well past the launch window', () => { + expect( + isWithinLaunchWindow(1000, 1000 + LAUNCH_WINDOW_LEDGERS * 10) + ).toBe(false); + }); + + it('returns false when currentLedger precedes createdAtLedger', () => { + expect(isWithinLaunchWindow(1000, 999)).toBe(false); + }); + + it.each([ + [null, 1000], + [1000, null], + [undefined, 1000], + [1000, undefined], + [NaN, 1000], + [1000, NaN], + ])( + 'returns false when createdAtLedger=%s or currentLedger=%s is missing/invalid', + (createdAtLedger, currentLedger) => { + expect(isWithinLaunchWindow(createdAtLedger, currentLedger)).toBe( + false + ); + } + ); +}); + +describe('calculateLaunchPenalty', () => { + it('applies the penalty within the launch window', () => { + const result = calculateLaunchPenalty(1_000_000, 1000, 1500, 500); // 5% + + expect(result).toEqual({ + applies: true, + penaltyBps: 500, + penaltyStroops: 50_000, + netProceedsStroops: 950_000, + }); + }); + + it('does not apply the penalty past the launch window', () => { + const result = calculateLaunchPenalty( + 1_000_000, + 1000, + 1000 + LAUNCH_WINDOW_LEDGERS, + 500 + ); + + expect(result).toEqual({ + applies: false, + penaltyBps: 0, + penaltyStroops: 0, + netProceedsStroops: 1_000_000, + }); + }); + + it('does not apply when the creator has no launch penalty configured', () => { + const result = calculateLaunchPenalty(1_000_000, 1000, 1200, 0); + + expect(result.applies).toBe(false); + expect(result.netProceedsStroops).toBe(1_000_000); + }); + + it('does not apply when launchPenaltyBps is missing', () => { + const result = calculateLaunchPenalty(1_000_000, 1000, 1200, undefined); + + expect(result.applies).toBe(false); + expect(result.netProceedsStroops).toBe(1_000_000); + }); + + it('does not apply when ledger data is missing', () => { + const result = calculateLaunchPenalty(1_000_000, null, null, 500); + + expect(result.applies).toBe(false); + expect(result.netProceedsStroops).toBe(1_000_000); + }); + + it('falls back to 0 net proceeds when gross proceeds are unavailable', () => { + const result = calculateLaunchPenalty(null, 1000, 1200, 500); + + expect(result).toEqual({ + applies: false, + penaltyBps: 0, + penaltyStroops: 0, + netProceedsStroops: 0, + }); + }); + + it('rounds the penalty amount to the nearest stroop', () => { + const result = calculateLaunchPenalty(1_000_000, 1000, 1200, 333); // 3.33% + + expect(result.penaltyStroops).toBe(Math.round((1_000_000 * 333) / 10_000)); + expect(result.netProceedsStroops).toBe( + 1_000_000 - result.penaltyStroops + ); + }); + + it('applies the maximum configured penalty (20%)', () => { + const result = calculateLaunchPenalty(1_000_000, 1000, 1000, 2000); + + expect(result.penaltyStroops).toBe(200_000); + expect(result.netProceedsStroops).toBe(800_000); + }); +}); diff --git a/src/utils/launchPenalty.utils.ts b/src/utils/launchPenalty.utils.ts new file mode 100644 index 00000000..696df8d7 --- /dev/null +++ b/src/utils/launchPenalty.utils.ts @@ -0,0 +1,105 @@ +/** + * Launch penalty utilities for the sell confirmation flow (#825). + * + * Holders who sell within 7 days of a key's creation incur an early-sell + * penalty (configured per-creator via `LaunchPenaltyPanel` / the + * `set_launch_penalty` contract call, see `launchPenaltyBps` on `Course`). + * These helpers determine whether that launch window is still open and + * compute the resulting penalty against a sell's gross proceeds. + */ + +/** Stellar's approximate ledger close time, in milliseconds. */ +const STELLAR_LEDGER_TIME_MS = 5000; + +/** Length of the early-sell launch window, in milliseconds (7 days). */ +export const LAUNCH_WINDOW_MS = 7 * 24 * 60 * 60 * 1000; + +/** Length of the early-sell launch window, expressed in ledgers. */ +export const LAUNCH_WINDOW_LEDGERS = Math.round( + LAUNCH_WINDOW_MS / STELLAR_LEDGER_TIME_MS +); + +/** + * Determines whether a sell at `currentLedger` falls within the 7-day + * launch window that started at `createdAtLedger`. + * + * Returns `false` (no penalty) whenever either ledger is missing/invalid, + * or when `currentLedger` is at or before `createdAtLedger` (clock skew / + * stale data) so a malformed pair never accidentally blocks a sell. + */ +export function isWithinLaunchWindow( + createdAtLedger: number | null | undefined, + currentLedger: number | null | undefined +): boolean { + if ( + createdAtLedger == null || + currentLedger == null || + !Number.isFinite(createdAtLedger) || + !Number.isFinite(currentLedger) + ) { + return false; + } + + const ledgersSinceCreation = currentLedger - createdAtLedger; + return ( + ledgersSinceCreation >= 0 && ledgersSinceCreation < LAUNCH_WINDOW_LEDGERS + ); +} + +export interface LaunchPenaltyBreakdown { + /** Whether the launch penalty applies to this sell. */ + applies: boolean; + /** Penalty rate in basis points actually applied (0 when it doesn't apply). */ + penaltyBps: number; + /** Penalty amount deducted from gross proceeds, in stroops. */ + penaltyStroops: number; + /** Proceeds remaining after the penalty is deducted, in stroops. */ + netProceedsStroops: number; +} + +/** + * Computes the launch-penalty breakdown for a sell. + * + * When the key is past its 7-day launch window, or has no penalty + * configured, `applies` is `false` and `netProceedsStroops` simply mirrors + * `grossProceedsStroops` (falling back to `0` when the gross amount isn't + * available). + */ +export function calculateLaunchPenalty( + grossProceedsStroops: number | null | undefined, + createdAtLedger: number | null | undefined, + currentLedger: number | null | undefined, + launchPenaltyBps: number | null | undefined +): LaunchPenaltyBreakdown { + const gross = + grossProceedsStroops != null && Number.isFinite(grossProceedsStroops) + ? grossProceedsStroops + : 0; + + const withinWindow = isWithinLaunchWindow(createdAtLedger, currentLedger); + const bps = + launchPenaltyBps != null && Number.isFinite(launchPenaltyBps) + ? launchPenaltyBps + : 0; + + const applies = withinWindow && bps > 0 && gross > 0; + + if (!applies) { + return { + applies: false, + penaltyBps: 0, + penaltyStroops: 0, + netProceedsStroops: gross, + }; + } + + const penaltyStroops = Math.round((gross * bps) / 10_000); + const netProceedsStroops = gross - penaltyStroops; + + return { + applies: true, + penaltyBps: bps, + penaltyStroops, + netProceedsStroops, + }; +}