From 45b2bcfde2fa8869e7d7c2d40fdbd61883f9aa52 Mon Sep 17 00:00:00 2001
From: haradahinata <harahina3589@gmail.com>
Date: Mon, 18 May 2026 05:43:09 +0900
Subject: [PATCH] feat: show referral fee discount breakdown

---
 src/components/trade/order/Fee.svelte | 104 ++++++++++++++++++++++++--
 1 file changed, 97 insertions(+), 7 deletions(-)

diff --git a/src/components/trade/order/Fee.svelte b/src/components/trade/order/Fee.svelte
index eb5911b..c139bfb 100644
--- a/src/components/trade/order/Fee.svelte
+++ b/src/components/trade/order/Fee.svelte
@@ -1,8 +1,8 @@
 <script>
 
-	import LabelValue from '@components/layout/LabelValue.svelte'
+	import tooltip from '@lib/tooltip'
 
-	import { BPS_DIVIDER } from '@lib/config'
+	import { BASE_FEES_BPS, BPS_DIVIDER } from '@lib/config'
 	import { marketInfos } from '@lib/stores'
 
 	import { formatForDisplay } from '@lib/formatters'
@@ -43,11 +43,101 @@
 	let feeAmount = 0;
 	$: feeAmount = getFeeAmount(totalSize, market, $marketInfos);
 
+	function toNumber(value) {
+		if (value == null) return 0;
+		const number = value.toString ? value.toString() * 1 : value * 1;
+		return Number.isFinite(number) ? number : 0;
+	}
+
+	function toOptionalNumber(value) {
+		if (value == null) return undefined;
+		const number = value.toString ? value.toString() * 1 : value * 1;
+		return Number.isFinite(number) ? number : undefined;
+	}
+
+	function formatBps(bps) {
+		return `${formatForDisplay(100 * bps / BPS_DIVIDER)}%`;
+	}
+
+	function getReferralDiscountBps(marketInfo) {
+		return toNumber(
+			marketInfo?.referralDiscountBps
+				?? marketInfo?.referralFeeDiscountBps
+				?? marketInfo?.referralDiscount
+				?? marketInfo?.referralFeeDiscount
+				?? 0
+		);
+	}
+
+	function getFeeBreakdown() {
+		const marketInfo = $marketInfos[market];
+		if (!marketInfo) return '';
+
+		const currentFee = toNumber(marketInfo.fee);
+		const baseFee = BASE_FEES_BPS[market] ?? toOptionalNumber(marketInfo.baseFee) ?? currentFee;
+		const totalDiscount = Math.max(baseFee - currentFee, 0);
+		const referralDiscount = Math.min(getReferralDiscountBps(marketInfo), totalDiscount);
+		const stakingAndVolumeDiscount = Math.max(totalDiscount - referralDiscount, 0);
+
+		return `
+			<div class="fee-breakdown">
+				<div><strong>Fee breakdown</strong></div>
+				<div>Base fee: ${formatBps(baseFee)}</div>
+				<div>CAP staking / volume discount: -${formatBps(stakingAndVolumeDiscount)}</div>
+				<div>Referral discount: -${formatBps(referralDiscount)}</div>
+				<div>Effective fee: ${formatBps(currentFee)}</div>
+			</div>
+		`;
+	}
+
+	let feeBreakdown = '';
+	$: feeBreakdown = getFeeBreakdown(market, $marketInfos);
+
+	$: tooltipOptions = {
+		content: feeBreakdown,
+		allowHTML: true,
+		interactive: true,
+		trigger: 'click mouseenter focus'
+	};
+
 
 </script>
 
-<LabelValue 
-	label={`Fee (${formatForDisplay(($marketInfos[market]?.fee || 0)/100)}%)`} 
-	value={`${feeAmount ? `${formatForDisplay(feeAmount)} ${asset}` : '-'}`}
-	isSecondaryColor={isSecondaryColor}
-/>
\ No newline at end of file
+<style>
+	.fee-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex: 1 1 auto;
+		font-size: 95%;
+	}
+	.label {
+		color: var(--text400);
+		text-transform: capitalize;
+	}
+	.value {
+		cursor: help;
+		text-transform: capitalize;
+	}
+	.value.secondary {
+		color: var(--secondary);
+	}
+	:global(.fee-breakdown) {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		text-align: left;
+	}
+</style>
+
+<div class='fee-row'>
+	<div class='label'>Fee ({formatForDisplay(($marketInfos[market]?.fee || 0)/100)}%)</div>
+	<div
+		class='value'
+		class:secondary={isSecondaryColor}
+		tabindex='0'
+		use:tooltip={tooltipOptions}
+	>
+		{feeAmount ? `${formatForDisplay(feeAmount)} ${asset}` : '-'}
+	</div>
+</div>