diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 9f3a14e..e8ffbeb 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback, memo } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo, memo } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { Navigate, useNavigate, useParams } from 'react-router';
@@ -18,6 +18,7 @@ import { useCloseOnSuccessNotification } from '../store/successNotification';
import PurchaseCTAButton from '../components/subscription/PurchaseCTAButton';
import { CopyIcon, CheckIcon } from '../components/icons';
import { useHaptic } from '../platform';
+import { resolveConnectionUrlForUi } from '../utils/connectionLink';
import {
getErrorMessage,
getInsufficientBalanceError,
@@ -221,9 +222,41 @@ export default function Subscription() {
staleTime: 0,
refetchOnMount: 'always',
});
+ const { data: connectionLink, isLoading: isConnectionLinkLoading } = useQuery({
+ queryKey: ['connection-link', subscriptionId],
+ queryFn: () => subscriptionApi.getConnectionLink(subscriptionId),
+ retry: false,
+ staleTime: 0,
+ });
// Extract subscription from response (null if no subscription)
const subscription = subscriptionResponse?.subscription ?? null;
+ const displayedConnectionUrl = useMemo(
+ () =>
+ resolveConnectionUrlForUi({
+ mode: connectionLink?.connect_mode,
+ happSchemeLink: connectionLink?.happ_scheme_link,
+ displayLink: connectionLink?.display_link,
+ subscriptionUrl: connectionLink?.subscription_url,
+ happCryptLink: connectionLink?.happ_cryptolink,
+ happCryptoLink: connectionLink?.happ_crypto_link,
+ happLink: connectionLink?.happ_link,
+ fallbackUrl: isConnectionLinkLoading ? null : (subscription?.subscription_url ?? null),
+ }),
+ [
+ connectionLink?.connect_mode,
+ connectionLink?.display_link,
+ connectionLink?.happ_cryptolink,
+ connectionLink?.happ_crypto_link,
+ connectionLink?.happ_link,
+ connectionLink?.happ_scheme_link,
+ connectionLink?.subscription_url,
+ isConnectionLinkLoading,
+ subscription?.subscription_url,
+ ],
+ );
+ const shouldHideConnectionLink =
+ subscription?.hide_subscription_link || connectionLink?.hide_link;
// Traffic zone (theme-aware) — called unconditionally at top level
const usedPercent = trafficData?.traffic_used_percent ?? subscription?.traffic_used_percent ?? 0;
@@ -453,8 +486,8 @@ export default function Subscription() {
}, [subscription, refreshTrafficMutation, subscriptionId]);
const copyUrl = () => {
- if (subscription?.subscription_url) {
- navigator.clipboard.writeText(subscription.subscription_url);
+ if (displayedConnectionUrl) {
+ navigator.clipboard.writeText(displayedConnectionUrl);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
@@ -890,16 +923,17 @@ export default function Subscription() {
)}
{/* ─── Subscription URL ─── */}
- {subscription.subscription_url && !subscription.hide_subscription_link && (
+ {displayedConnectionUrl && !shouldHideConnectionLink && (
- {subscription.subscription_url}
+ {displayedConnectionUrl}