From aaf9bfe57f2f53c895669a4a711a1cbef1dec0f5 Mon Sep 17 00:00:00 2001
From: lyn <lamson0215@gmail.com>
Date: Mon, 11 May 2026 23:15:33 +1000
Subject: [PATCH] fix: show referral discounts in fee details

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

diff --git a/src/components/trade/order/Fee.svelte b/src/components/trade/order/Fee.svelte
index eb5911b..50c9409 100644
--- a/src/components/trade/order/Fee.svelte
+++ b/src/components/trade/order/Fee.svelte
@@ -1,10 +1,9 @@
 <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'
 
 	export let size;
@@ -40,14 +39,96 @@
 		return totalSize * $marketInfos[market].fee * 1 / BPS_DIVIDER;
 	}
 
+	function toNumber(value) {
+		if (value == null) return 0;
+		return value.toString ? value.toString() * 1 : value * 1;
+	}
+
+	function getReferralDiscountBps(marketInfo) {
+		if (!marketInfo) return 0;
+
+		const referralDiscount = marketInfo.referralDiscountBps
+			?? marketInfo.referralFeeDiscountBps
+			?? marketInfo.referralDiscount
+			?? marketInfo.referralFeeDiscount
+			?? marketInfo.referralFee
+			?? marketInfo.referralRebate
+			?? 0;
+
+		return toNumber(referralDiscount);
+	}
+
+	function formatPercentFromBps(bps) {
+		return `${formatForDisplay(100 * bps / BPS_DIVIDER)}%`;
+	}
+
+	function getFeeDetails() {
+		const marketInfo = $marketInfos[market];
+		if (!marketInfo) return '';
+
+		const configuredBaseFee = BASE_FEES_BPS[market];
+		const baseFeeFromMarket = marketInfo.baseFee == null ? undefined : toNumber(marketInfo.baseFee);
+		const baseFee = configuredBaseFee ?? baseFeeFromMarket ?? toNumber(marketInfo.fee);
+		const currentFee = toNumber(marketInfo.fee);
+		const totalDiscount = Math.max(baseFee - currentFee, 0);
+		const referralDiscount = Math.min(getReferralDiscountBps(marketInfo), totalDiscount || Number.MAX_SAFE_INTEGER);
+		const capAndVolumeDiscount = Math.max(totalDiscount - referralDiscount, 0);
+
+		return `
+			<div class='fee-details'>
+				<div><strong>Fee breakdown</strong></div>
+				<div>Base fee: ${formatPercentFromBps(baseFee)}</div>
+				<div>CAP staking / 30-day volume discount: ${formatPercentFromBps(capAndVolumeDiscount)}</div>
+				<div>Referral discount: ${formatPercentFromBps(referralDiscount)}</div>
+				<div>Effective fee: ${formatPercentFromBps(currentFee)}</div>
+			</div>
+		`;
+	}
+
 	let feeAmount = 0;
 	$: feeAmount = getFeeAmount(totalSize, market, $marketInfos);
+	$: feeDetails = getFeeDetails(market, $marketInfos);
 
+	let tooltipOptions;
+	$: tooltipOptions = {
+		content: feeDetails,
+		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>
+	.flex-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex: 1 1 auto;
+		font-size: 95%;
+	}
+	.label {
+		cursor: default;
+		text-transform: capitalize;
+		color: var(--text400);
+	}
+	.value {
+		cursor: help;
+		text-transform: capitalize;
+	}
+	.value.secondary {
+		color: var(--secondary);
+	}
+	:global(.fee-details) {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+</style>
+
+<div class='flex-row'>
+	<div class='label'>Fee ({formatForDisplay(($marketInfos[market]?.fee || 0)/100)}%)</div>
+	<div class='value' class:secondary={isSecondaryColor} use:tooltip={tooltipOptions}>
+		{feeAmount ? `${formatForDisplay(feeAmount)} ${asset}` : '-'}
+	</div>
+</div>