Merge branch 'feat/frontend/track-cfs-sign-event' into fix/frontend/signer-unavailable-toast

Author: sbpublic

src/frontend/src/lib/canisters/backend.errors.ts

@@ -7,7 +7,11 @@ import type {
 	RateLimitError,
 	SignOnramperWidgetUrlError
 } from '$declarations/backend/backend.did';
-import { CanisterInternalError } from '$lib/canisters/errors';
+import {
+	CanisterInternalError,
+	OnramperRateLimitedError,
+	OnramperSecretNotConfiguredError
+} from '$lib/canisters/errors';
 import { NANO_SECONDS_IN_SECOND } from '$lib/constants/app.constants';
 import { assertNever } from '@dfinity/utils';
 import { mapIcrc2ApproveError, type ApproveError } from '@icp-sdk/canisters/ledger/icp';
@@ -158,13 +162,18 @@ export const mapSignOnramperWidgetUrlError = (
 	err: SignOnramperWidgetUrlError
 ): CanisterInternalError => {
 	if ('SecretNotConfigured' in err) {
-		return new CanisterInternalError(
+		return new OnramperSecretNotConfiguredError(
 			'OnRamper signing secret is not configured on the backend canister.'
 		);
 	}
 
 	if ('RateLimited' in err) {
-		return mapRateLimitError(err.RateLimited);
+		const { max_calls: maxCalls, window_ns: windowNs } = err.RateLimited;
+		const windowSeconds = windowNs / NANO_SECONDS_IN_SECOND;
+
+		return new OnramperRateLimitedError(
+			`Rate limit exceeded. Maximum of ${maxCalls} calls allowed every ${windowSeconds} seconds.`
+		);
 	}
 
 	return assertNeverOr(err, new CanisterInternalError('Unknown SignOnramperWidgetUrlError'));

src/frontend/src/lib/canisters/errors.ts

@@ -1 +1,7 @@
 export class CanisterInternalError extends Error {}
+
+// Distinguishable Onramper widget URL signing failures, so the UI/telemetry can
+// tell apart a misconfigured backend secret from a transient rate limit.
+export class OnramperSecretNotConfiguredError extends CanisterInternalError {}
+
+export class OnramperRateLimitedError extends CanisterInternalError {}

src/frontend/src/lib/components/buy/Buy.svelte

@@ -1,33 +1,14 @@
 <script lang="ts">
-	import { nonNullish } from '@dfinity/utils';
 	import BuyButton from '$lib/components/buy/BuyButton.svelte';
 	import BuyModal from '$lib/components/buy/BuyModal.svelte';
-	import {
-		HOME_PAGE_ROUTE,
-		TOKEN_VIEW_ROUTE,
-		TRACK_BUY_TOKEN
-	} from '$lib/constants/analytics.constants';
 	import { modalBuy } from '$lib/derived/modal.derived';
-	import { pageToken } from '$lib/derived/page-token.derived';
-	import { trackEvent } from '$lib/services/analytics.services';
 	import { modalStore } from '$lib/stores/modal.store';
 
 	const modalId = Symbol();
 </script>
 
 <BuyButton
 	onclick={() => {
-		trackEvent({
-			name: TRACK_BUY_TOKEN,
-			metadata: nonNullish($pageToken)
-				? {
-						source: TOKEN_VIEW_ROUTE,
-						token: $pageToken.symbol,
-						network: $pageToken.network.name
-					}
-				: { source: HOME_PAGE_ROUTE }
-		});
-
 		modalStore.openBuy(modalId);
 	}}
 />

src/frontend/src/lib/components/buy/BuyModalContent.svelte

@@ -11,7 +11,7 @@
 		</div>
 	</div>
 {:else}
-	<BuyUnavailableNotice />
+	<BuyUnavailableNotice reason="disabled" />
 {/if}
 
 <style lang="scss">

src/frontend/src/lib/components/buy/BuyUnavailableNotice.svelte

@@ -4,6 +4,18 @@
 	import { i18n } from '$lib/stores/i18n.store';
 	import { modalStore } from '$lib/stores/modal.store';
 	import { replaceOisyPlaceholders } from '$lib/utils/i18n.utils';
+
+	interface Props {
+		reason?: 'disabled' | 'signing-failed';
+	}
+
+	let { reason = 'disabled' }: Props = $props();
+
+	let description = $derived(
+		reason === 'signing-failed'
+			? $i18n.buy.text.unavailable_description_signing_failed
+			: $i18n.buy.text.unavailable_description_disabled
+	);
 </script>
 
 <div class="flex flex-col items-center px-4 py-6 text-center">
@@ -15,7 +27,7 @@
 				><IconShieldCheck size="16" /></span
 			>{replaceOisyPlaceholders($i18n.core.text.oisy_protects_you)}</strong
 		>
-		{$i18n.buy.text.unavailable_description}
+		{description}
 	</p>
 
 	<p class="mb-6 text-sm text-tertiary">{$i18n.buy.text.unavailable_fallback_hint}</p>

src/frontend/src/lib/components/onramper/OnramperWidget.svelte

@@ -12,6 +12,10 @@
 	import { erc20Tokens } from '$eth/derived/erc20.derived';
 	import { harvestAutopilots } from '$eth/derived/harvest-autopilots.derived';
 	import { icpAccountIdentifierText } from '$icp/derived/ic.derived';
+	import {
+		OnramperRateLimitedError,
+		OnramperSecretNotConfiguredError
+	} from '$lib/canisters/errors';
 	import BuyUnavailableNotice from '$lib/components/buy/BuyUnavailableNotice.svelte';
 	import { BUY_MODAL_ONRAMPER_IFRAME } from '$lib/constants/test-ids.constants';
 	import { btcAddressMainnet, ethAddress, solAddressMainnet } from '$lib/derived/address.derived';
@@ -21,9 +25,15 @@
 	import { networkBitcoin, networkEthereum, networkSolana } from '$lib/derived/network.derived';
 	import { networks } from '$lib/derived/networks.derived';
 	import { enabledTokens } from '$lib/derived/tokens.derived';
+	import {
+		PLAUSIBLE_EVENT_ONRAMPER_ERROR_TYPES,
+		PLAUSIBLE_EVENT_RESULT_STATUSES
+	} from '$lib/enums/plausible';
+	import { trackOnramperOpen } from '$lib/services/analytics.services';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { token } from '$lib/stores/token.store';
 	import { consoleError } from '$lib/utils/console.utils';
+	import { getTokenIdentifier } from '$lib/utils/identifier.utils';
 	import { buildOnramperLink, mapOnramperNetworkWallets } from '$lib/utils/onramper.utils';
 
 	let vault = $derived(
@@ -73,6 +83,24 @@
 	let src = $state<string | undefined>(undefined);
 	let signingFailed = $state(false);
 
+	let tokenPayload = $derived(
+		nonNullish($token)
+			? {
+					network: $token.network.id.description ?? '',
+					symbol: $token.symbol,
+					name: $token.name,
+					address: getTokenIdentifier($token)
+				}
+			: undefined
+	);
+
+	const classifyOnramperError = (error: unknown): PLAUSIBLE_EVENT_ONRAMPER_ERROR_TYPES =>
+		error instanceof OnramperSecretNotConfiguredError
+			? PLAUSIBLE_EVENT_ONRAMPER_ERROR_TYPES.SECRET_NOT_CONFIGURED
+			: error instanceof OnramperRateLimitedError
+				? PLAUSIBLE_EVENT_ONRAMPER_ERROR_TYPES.RATE_LIMITED
+				: PLAUSIBLE_EVENT_ONRAMPER_ERROR_TYPES.SIGNING_FAILED;
+
 	// Resolve the signed widget URL through the backend canister whenever the inputs change. Build
 	// the link asynchronously (the canister returns the HMAC over the sensitive parameters) and
 	// guard against late resolutions overwriting newer state via a cancellation token.
@@ -104,12 +132,24 @@
 			.then((url) => {
 				if (!cancelled) {
 					src = url;
+
+					trackOnramperOpen({
+						token: tokenPayload,
+						status: PLAUSIBLE_EVENT_RESULT_STATUSES.SUCCESS
+					});
 				}
 			})
 			.catch((error: unknown) => {
 				if (!cancelled) {
 					consoleError('Could not sign OnRamper widget URL', error);
 					signingFailed = true;
+
+					trackOnramperOpen({
+						token: tokenPayload,
+						status: PLAUSIBLE_EVENT_RESULT_STATUSES.ERROR,
+						errorType: classifyOnramperError(error),
+						errorMessage: error instanceof Error ? error.message : undefined
+					});
 				}
 			});
 
@@ -155,7 +195,7 @@
 <!-- "In order to do customer verification before purchase, we require the following permissions to be given to the app. So this is definitely merely for the KYC  and also for fraud detection algorithms i suppose" -->
 
 {#if signingFailed}
-	<BuyUnavailableNotice />
+	<BuyUnavailableNotice reason="signing-failed" />
 {:else}
 	<div
 		class="absolute top-0 right-0 bottom-0 left-0 bg-surface text-brand-primary transition-all duration-500 ease-in-out"

src/frontend/src/lib/constants/analytics.constants.ts

@@ -168,9 +168,6 @@ export const AI_ASSISTANT_MESSAGE_FAILED_TO_BE_PARSED = 'ai_assistant_message_fa
 export const AI_ASSISTANT_TOOL_EXECUTION_TRIGGERED = 'ai_assistant_tool_execution_triggered';
 export const AI_ASSISTANT_TEXTUAL_RESPONSE_RECEIVED = 'ai_assistant_textual_response_received';
 
-// Buy
-export const TRACK_BUY_TOKEN = 'buy_token';
-
 // NFTs
 export const TRACK_OPEN_ASSETS_TAB = 'open_assets_tab';
 export const TRACK_NFT_SETTINGS_CHANGE = 'nft_settings_change';

src/frontend/src/lib/enums/plausible.ts

@@ -20,7 +20,18 @@ export enum PLAUSIBLE_EVENTS {
 	TRANSACTION_FILTER = 'transaction_filter',
 	TOKEN_MANAGE = 'token_manage',
 	EXPORT_DATA = 'export_data',
-	CFS_SIGN = 'cfs_sign'
+	CFS_SIGN = 'cfs_sign',
+	ONRAMPER_OPEN = 'onramper_open'
+}
+
+export enum PLAUSIBLE_EVENT_ERROR_SEVERITIES {
+	MAJOR = 'major'
+}
+
+export enum PLAUSIBLE_EVENT_ONRAMPER_ERROR_TYPES {
+	SECRET_NOT_CONFIGURED = 'secret_not_configured',
+	RATE_LIMITED = 'rate_limited',
+	SIGNING_FAILED = 'signing_failed'
 }
 
 export enum PLAUSIBLE_EVENT_CONTEXTS {

src/frontend/src/lib/i18n/ar.json

@@ -1231,7 +1231,8 @@
 			"buy": "شراء",
 			"buy_dev": "شراء (بيئة تطوير)",
 			"unavailable_title": "شراء الرموز غير متاح مؤقتًا",
-			"unavailable_description": "شراء الرموز معطل حاليًا بينما نواصل تحسين أمان هذه العملية من خلال إضافة توقيع عناوين URL. ستتم إعادة تفعيله بمجرد اكتمال العمل.",
+			"unavailable_description_disabled": "",
+			"unavailable_description_signing_failed": "",
 			"unavailable_fallback_hint": "في غضون ذلك، لا يزال بإمكانك استلام الرموز عن طريق مشاركة عنوان محفظتك."
 		},
 		"actions": {

src/frontend/src/lib/i18n/cs.json

@@ -1231,7 +1231,8 @@
 			"buy": "Koupit",
 			"buy_dev": "Koupit (vývojové prostředí)",
 			"unavailable_title": "Nákup tokenů je dočasně nedostupný",
-			"unavailable_description": "Nákup tokenů je momentálně vypnutý, zatímco dále vylepšujeme zabezpečení tohoto procesu zavedením podepisování URL. Bude znovu zapnut, jakmile bude práce dokončena.",
+			"unavailable_description_disabled": "",
+			"unavailable_description_signing_failed": "",
 			"unavailable_fallback_hint": "Mezitím můžete stále přijímat tokeny sdílením adresy své peněženky."
 		},
 		"actions": {