diff --git a/src/components/dashboard/SubscriptionCardActive.tsx b/src/components/dashboard/SubscriptionCardActive.tsx index c2d1db0..dfd00d3 100644 --- a/src/components/dashboard/SubscriptionCardActive.tsx +++ b/src/components/dashboard/SubscriptionCardActive.tsx @@ -19,6 +19,7 @@ interface SubscriptionCardActiveProps { } | null; refreshTrafficMutation: UseMutationResult; trafficRefreshCooldown: number; + connectedDevices: number; } const RefreshIcon = ({ className = 'w-4 h-4' }: { className?: string }) => ( @@ -43,6 +44,7 @@ export default function SubscriptionCardActive({ trafficData, refreshTrafficMutation, trafficRefreshCooldown, + connectedDevices, }: SubscriptionCardActiveProps) { const { t } = useTranslation(); const navigate = useNavigate(); @@ -225,7 +227,7 @@ export default function SubscriptionCardActive({
{t('dashboard.devicesOfMax', { - used: subscription.device_limit, + used: connectedDevices, max: subscription.device_limit, })}
@@ -238,9 +240,8 @@ export default function SubscriptionCardActive({ key={i} className="h-[7px] w-[7px] rounded-full transition-all duration-300" style={{ - background: - i < subscription.device_limit ? zone.mainHex : 'rgba(255,255,255,0.08)', - boxShadow: i < subscription.device_limit ? `0 0 6px ${zone.mainHex}50` : 'none', + background: i < connectedDevices ? zone.mainHex : 'rgba(255,255,255,0.08)', + boxShadow: i < connectedDevices ? `0 0 6px ${zone.mainHex}50` : 'none', }} /> ))} diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index ce74be9..8806ba0 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -61,6 +61,13 @@ export default function Dashboard() { enabled: !subscription && !subLoading, }); + const { data: devicesData } = useQuery({ + queryKey: ['devices'], + queryFn: subscriptionApi.getDevices, + enabled: !!subscription, + staleTime: API.BALANCE_STALE_TIME_MS, + }); + const { data: referralInfo, isLoading: refLoading } = useQuery({ queryKey: ['referral-info'], queryFn: referralApi.getReferralInfo, @@ -241,6 +248,7 @@ export default function Dashboard() { trafficData={trafficData} refreshTrafficMutation={refreshTrafficMutation} trafficRefreshCooldown={trafficRefreshCooldown} + connectedDevices={devicesData?.total ?? 0} /> ) : null}