fix(trading): show user inactive lose streak in remaining epochs (#5667)

apps/trading/components/rewards-container/streaks/activity-streaks.spec.tsx

@@ -1,6 +1,17 @@
 import { render, screen } from '@testing-library/react';
 import { ActivityStreak } from './activity-streaks';
 
+jest.mock('@vegaprotocol/network-parameters', () => ({
+  ...jest.requireActual('@vegaprotocol/network-parameters'),
+  useNetworkParams: jest.fn(() => ({
+    params: {
+      rewards_activityStreak_inactivityLimit: '3',
+    },
+    loading: false,
+    error: null,
+  })),
+}));
+
 describe('ActivityStreak', () => {
   it('renders null when streak is not active', () => {
     const tiers: {

apps/trading/components/rewards-container/streaks/activity-streaks.tsx

@@ -3,6 +3,10 @@ import { useT } from '../../../lib/use-t';
 import classNames from 'classnames';
 import BigNumber from 'bignumber.js';
 import type { PartyActivityStreak } from '@vegaprotocol/types';
+import {
+  NetworkParams,
+  useNetworkParams,
+} from '@vegaprotocol/network-parameters';
 
 export const safeProgress = (
   i: number,
@@ -69,7 +73,12 @@ export const ActivityStreak = ({
 }) => {
   const t = useT();
   const userTierIndex = useGetUserTier(tiers, streak?.activeFor);
-
+  const { params } = useNetworkParams([
+    NetworkParams.rewards_activityStreak_inactivityLimit,
+  ]);
+  const remaining = new BigNumber(params.rewards_activityStreak_inactivityLimit)
+    .minus(streak?.inactiveFor || 0)
+    .toNumber();
   if (!tiers || tiers.length === 0) return null;
 
   const progressBarHeight = 'h-10';
@@ -203,12 +212,35 @@ export const ActivityStreak = ({
           <VegaIcon name={VegaIconNames.STREAK} />
 
           <span className="flex flex-col">
-            {streak?.isActive && (
+            {streak && (
               <span data-testid="epoch-streak">
-                {t('userActive', '{{active}} trader: {{count}} epochs so far', {
-                  active: streak?.isActive ? 'Active' : 'Inactive',
-                  count: streak?.activeFor || 0,
-                })}{' '}
+                {streak.isActive
+                  ? t(
+                      'userActive',
+                      '{{active}} trader: {{count}} epochs so far',
+                      {
+                        active: 'Active',
+                        count: streak.activeFor || 0,
+                      }
+                    )
+                  : remaining > 0
+                  ? t(
+                      'userInactive',
+                      '{{active}} trader: {{count}} epochs so far, you will lose your streak in {{remaining}} epochs!',
+                      {
+                        active: 'Inactive',
+                        count: streak.inactiveFor || 0,
+                        remaining,
+                      }
+                    )
+                  : t(
+                      'userActive',
+                      '{{active}} trader: {{count}} epochs so far',
+                      {
+                        active: 'Inactive',
+                        count: streak.inactiveFor || 0,
+                      }
+                    )}{' '}
                 {userTierIndex > 0 &&
                   new BigNumber(
                     tiers[0].minimum_activity_streak

libs/i18n/src/locales/en/trading.json

@@ -364,6 +364,7 @@
   "totalCommission_one": "Total commission (<0>last {{count}} epoch</0>)",
   "totalCommission_other": "Total commission (<0>last {{count}} epochs</0>)",
   "userActive": "{{active}} trader: {{count}} epochs so far",
+  "userInactive": "{{active}} trader: {{count}} epochs so far, you will lose your streak in {{remaining}} epochs!",
   "volumeLastEpochs": "Volume (last {{count}} epochs)",
   "volumeLastEpochs_one": "Volume (last {{count}} epoch)",
   "volumeLastEpochs_other": "Volume (last {{count}} epochs)",

libs/network-parameters/src/use-network-params.ts

@@ -9,6 +9,8 @@ export const NetworkParams = {
   blockchains_ethereumConfig: 'blockchains_ethereumConfig',
   reward_asset: 'reward_asset',
   rewards_activityStreak_benefitTiers: 'rewards_activityStreak_benefitTiers',
+  rewards_activityStreak_inactivityLimit:
+    'rewards_activityStreak_inactivityLimit',
   rewards_vesting_benefitTiers: 'rewards_vesting_benefitTiers',
   rewards_marketCreationQuantumMultiple:
     'rewards_marketCreationQuantumMultiple',