feat(frontend): implement SwapDetailsOneSec component (#12627)

DenysKarmazynDFINITY · web-flow · commit 946f4197febc · 2026-04-28T11:28:38.000Z
# Motivation We need to implement a component for displaying an information about the OneSec provider. <img width="540" height="65" alt="Screenshot 2026-04-28 at 11 34 28" src="https://github.com/user-attachments/assets/03bcb784-426f-4704-a321-e18e1b68e091" />
diff --git a/src/frontend/src/lib/components/swap/SwapDetailsOneSec.svelte b/src/frontend/src/lib/components/swap/SwapDetailsOneSec.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { nonNullish } from '@dfinity/utils';
+	import { getContext } from 'svelte';
+	import ModalValue from '$lib/components/ui/ModalValue.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+	import { SWAP_CONTEXT_KEY, type SwapContext } from '$lib/stores/swap.store';
+	import type { SwapMappedResult, SwapProvider } from '$lib/types/swap';
+	import { formatToken } from '$lib/utils/format.utils';
+
+	interface Props {
+		provider: Extract<SwapMappedResult, { provider: SwapProvider.ONE_SEC }>;
+	}
+
+	const { provider }: Props = $props();
+
+	const { destinationToken } = getContext<SwapContext>(SWAP_CONTEXT_KEY);
+
+	const formattedTransferFee = $derived(
+		nonNullish($destinationToken?.decimals)
+			? formatToken({
+					value: provider.swapDetails.transferFeeInUnits,
+					unitName: $destinationToken.decimals
+				})
+			: undefined
+	);
+
+	const formattedProtocolFee = $derived(`${provider.swapDetails.protocolFeeInPercent.toFixed(2)}%`);
+</script>
+
+{#if nonNullish(formattedTransferFee) && nonNullish($destinationToken?.symbol)}
+	<ModalValue>
+		{#snippet label()}
+			{$i18n.swap.text.onesec_transfer_fee}
+		{/snippet}
+
+		{#snippet mainValue()}
+			{formattedTransferFee}
+			{$destinationToken.symbol}
+		{/snippet}
+	</ModalValue>
+{/if}
+
+<ModalValue>
+	{#snippet label()}
+		{$i18n.swap.text.onesec_protocol_fee}
+	{/snippet}
+
+	{#snippet mainValue()}
+		{formattedProtocolFee}
+	{/snippet}
+</ModalValue>
diff --git a/src/frontend/src/lib/i18n/ar.json b/src/frontend/src/lib/i18n/ar.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/cs.json b/src/frontend/src/lib/i18n/cs.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "Přesouváte tokeny ze sítě <b>$sourceNetwork</b> do sítě <b>$destinationNetwork</b>",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/de.json b/src/frontend/src/lib/i18n/de.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "Du tauschst deine Token vom Netzwerk <b>$sourceNetwork</b> ins <b>$destinationNetwork</b> Netzwerk",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "You move tokens from <b>$sourceNetwork</b> to <b>$destinationNetwork</b> network",
 			"near_intents_estimated_time": "NEAR Intents (~$minutes min)",
 			"near_intents_tos": "By clicking the \"Swap now\" button, you agree to the <a href=\"$link\" target=\"_blank\" rel=\"external noopener noreferrer\" class=\"underline\">Terms of Service</a> of 1Click Swap API. If you do not agree with those terms, do not use this swap provider.",
+			"onesec_transfer_fee": "Transfer fee",
+			"onesec_protocol_fee": "Protocol fee",
 			"value_difference_error_confirmation": "The value difference is very high, and you would lose a significant value in this swap. Please confirm that you want to proceed."
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/es.json b/src/frontend/src/lib/i18n/es.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "Mover tokens de la red <b>$sourceNetwork</b> a la red <b>$destinationNetwork</b>",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/fr.json b/src/frontend/src/lib/i18n/fr.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "Vous déplacez des tokens du réseau <b>$sourceNetwork</b> vers le réseau <b>$destinationNetwork</b>",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/hi.json b/src/frontend/src/lib/i18n/hi.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "आप टोकन <b>$sourceNetwork</b> से <b>$destinationNetwork</b> नेटवर्क पर ले जाते हैं",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/it.json b/src/frontend/src/lib/i18n/it.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/ja.json b/src/frontend/src/lib/i18n/ja.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "<b>$sourceNetwork</b>ネットワークから<b>$destinationNetwork</b>ネットワークにトークンを移動します。",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/ko-KR.json b/src/frontend/src/lib/i18n/ko-KR.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "<b>$sourceNetwork</b>에서 <b>$destinationNetwork</b> 네트워크로 토큰을 이동합니다",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/pl.json b/src/frontend/src/lib/i18n/pl.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "Przenosisz tokeny z sieci <b>$sourceNetwork</b> do sieci <b>$destinationNetwork</b>",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/pt.json b/src/frontend/src/lib/i18n/pt.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/ru.json b/src/frontend/src/lib/i18n/ru.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "Информация о кросс-чейн сетях",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/vi.json b/src/frontend/src/lib/i18n/vi.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "Bạn di chuyển token từ mạng <b>$sourceNetwork</b> sang mạng <b>$destinationNetwork</b>",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/i18n/zh-CN.json b/src/frontend/src/lib/i18n/zh-CN.json
@@ -1157,6 +1157,8 @@
 			"cross_chain_networks_info": "跨链网络信息",
 			"near_intents_estimated_time": "",
 			"near_intents_tos": "",
+			"onesec_transfer_fee": "",
+			"onesec_protocol_fee": "",
 			"value_difference_error_confirmation": ""
 		},
 		"error": {
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
@@ -878,6 +878,8 @@ interface I18nSwap {
 		cross_chain_networks_info: string;
 		near_intents_estimated_time: string;
 		near_intents_tos: string;
+		onesec_transfer_fee: string;
+		onesec_protocol_fee: string;
 		value_difference_error_confirmation: string;
 	};
 	error: {
diff --git a/src/frontend/src/tests/lib/components/swap/SwapDetailsOneSec.spec.ts b/src/frontend/src/tests/lib/components/swap/SwapDetailsOneSec.spec.ts
@@ -0,0 +1,88 @@
+import SwapDetailsOneSec from '$lib/components/swap/SwapDetailsOneSec.svelte';
+import { initSwapContext, SWAP_CONTEXT_KEY, type SwapContext } from '$lib/stores/swap.store';
+import { SwapProvider } from '$lib/types/swap';
+import { mockValidErc20Token } from '$tests/mocks/erc20-tokens.mock';
+import en from '$tests/mocks/i18n.mock';
+import { render } from '@testing-library/svelte';
+import { readable } from 'svelte/store';
+
+describe('SwapDetailsOneSec', () => {
+	const destToken = { ...mockValidErc20Token, decimals: 6, symbol: 'USDC' };
+
+	const makeContext = (token: typeof destToken = destToken) => {
+		const ctx = new Map();
+		ctx.set(SWAP_CONTEXT_KEY, initSwapContext({ destinationToken: token }));
+		return ctx;
+	};
+
+	// Use a minimal context with an explicit undefined destinationToken to avoid
+	// the initSwapContext fallback to swappableTokens, which has a default value in tests.
+	const makeEmptyContext = () => {
+		const ctx = new Map();
+		ctx.set(SWAP_CONTEXT_KEY, {
+			destinationToken: readable(undefined)
+		} as unknown as SwapContext);
+		return ctx;
+	};
+
+	const baseProvider = {
+		provider: SwapProvider.ONE_SEC as const,
+		receiveAmount: 990_000n,
+		swapDetails: {
+			transferFeeInUnits: 1_000n,
+			protocolFeeInPercent: 0.1
+		}
+	};
+
+	it('always renders the protocol fee label', () => {
+		const { getByText } = render(SwapDetailsOneSec, {
+			props: { provider: baseProvider },
+			context: makeContext()
+		});
+
+		expect(getByText(en.swap.text.onesec_protocol_fee)).toBeInTheDocument();
+	});
+
+	it('formats the protocol fee as a percentage with two decimal places', () => {
+		const { getByText } = render(SwapDetailsOneSec, {
+			props: { provider: baseProvider },
+			context: makeContext()
+		});
+
+		expect(getByText('0.10%')).toBeInTheDocument();
+	});
+
+	it('formats a whole-number protocol fee with two decimal places', () => {
+		const provider = {
+			...baseProvider,
+			swapDetails: { ...baseProvider.swapDetails, protocolFeeInPercent: 1 }
+		};
+
+		const { getByText } = render(SwapDetailsOneSec, {
+			props: { provider },
+			context: makeContext()
+		});
+
+		expect(getByText('1.00%')).toBeInTheDocument();
+	});
+
+	it('renders the transfer fee row with formatted amount and token symbol', () => {
+		// 1_000 units at 6 decimals = 0.001
+		const { getByText } = render(SwapDetailsOneSec, {
+			props: { provider: baseProvider },
+			context: makeContext()
+		});
+
+		expect(getByText(en.swap.text.onesec_transfer_fee)).toBeInTheDocument();
+		expect(getByText('0.001 USDC')).toBeInTheDocument();
+	});
+
+	it('does not render the transfer fee row when destination token is undefined', () => {
+		const { queryByText } = render(SwapDetailsOneSec, {
+			props: { provider: baseProvider },
+			context: makeEmptyContext()
+		});
+
+		expect(queryByText(en.swap.text.onesec_transfer_fee)).not.toBeInTheDocument();
+	});
+});
