From 508274268d07704410b8c6376aa3292d1535b9aa Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Wed, 31 Jan 2024 12:54:16 +0200
Subject: [PATCH] fix(trading): show user inactive lose streak in remaining
 epochs (#5667)

---
 .../streaks/activity-streaks.spec.tsx         | 11 +++++
 .../streaks/activity-streaks.tsx              | 44 ++++++++++++++++---
 libs/i18n/src/locales/en/trading.json         |  1 +
 .../src/use-network-params.ts                 |  2 +
 4 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/apps/trading/components/rewards-container/streaks/activity-streaks.spec.tsx b/apps/trading/components/rewards-container/streaks/activity-streaks.spec.tsx
index 1e6330649..7d4aeee39 100644
--- a/apps/trading/components/rewards-container/streaks/activity-streaks.spec.tsx
+++ b/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: {
diff --git a/apps/trading/components/rewards-container/streaks/activity-streaks.tsx b/apps/trading/components/rewards-container/streaks/activity-streaks.tsx
index 5744762a5..1526e4321 100644
--- a/apps/trading/components/rewards-container/streaks/activity-streaks.tsx
+++ b/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
diff --git a/libs/i18n/src/locales/en/trading.json b/libs/i18n/src/locales/en/trading.json
index 4543c0f62..887212695 100644
--- a/libs/i18n/src/locales/en/trading.json
+++ b/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)",
diff --git a/libs/network-parameters/src/use-network-params.ts b/libs/network-parameters/src/use-network-params.ts
index d90b0d833..de6dfb18b 100644
--- a/libs/network-parameters/src/use-network-params.ts
+++ b/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',