From 8f103df254fd4756fdf2f0dbb02c4dee47093b1a Mon Sep 17 00:00:00 2001
From: Madalina Raicu <madalina@raygroup.uk>
Date: Wed, 20 Dec 2023 13:14:11 +0000
Subject: [PATCH] fix(trading): update font glitch and copy

---
 .../rewards-container/active-rewards.tsx      | 14 ++++++--------
 .../streaks/activity-streaks.tsx              | 19 +------------------
 libs/i18n/src/locales/en/trading.json         |  4 ++--
 libs/tailwindcss-config/src/theme.js          |  6 ++++++
 4 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/apps/trading/components/rewards-container/active-rewards.tsx b/apps/trading/components/rewards-container/active-rewards.tsx
index 11c13667c..ff605a9d8 100644
--- a/apps/trading/components/rewards-container/active-rewards.tsx
+++ b/apps/trading/components/rewards-container/active-rewards.tsx
@@ -52,7 +52,7 @@ const isActiveReward = (node: TransferNode, currentEpoch: number) => {
     return false;
   }
 
-  if (node.transfer.reference !== 'reward') {
+  if (!node.transfer.reference?.includes('reward')) {
     return false;
   }
 
@@ -234,7 +234,7 @@ export const ActiveRewardCard = ({
             </div>
 
             <div className="flex flex-col gap-2 items-center text-center">
-              <span className="flex flex-col gap-1 text-2xl shrink-1 text-center font-alpha calt">
+              <span className="flex flex-col gap-1 text-2xl shrink-1 text-center font-glitch">
                 <span>
                   {addDecimalsFormatNumber(
                     transferNode.transfer.amount,
@@ -364,28 +364,26 @@ export const ActiveRewardCard = ({
 
             <span className="flex flex-col gap-1">
               <span className="flex items-center gap-1 text-muted">
-                {t('Stake required')}{' '}
+                {t('Staked VEGA')}{' '}
               </span>
               <span className="flex items-center gap-1">
                 {addDecimalsFormatNumber(
                   kind.dispatchStrategy?.stakingRequirement || 0,
                   transfer.asset?.decimals || 0
-                )}{' '}
-                {transfer.asset?.symbol}
+                )}
               </span>
             </span>
 
             <span className="flex flex-col gap-1">
               <span className="flex items-center gap-1 text-muted">
-                {t('Notional TWAP')}{' '}
+                {t('Average position')}{' '}
               </span>
               <span className="flex items-center gap-1">
                 {addDecimalsFormatNumber(
                   kind.dispatchStrategy
                     ?.notionalTimeWeightedAveragePositionRequirement || 0,
                   transfer.asset?.decimals || 0
-                )}{' '}
-                {transfer.asset?.symbol}
+                )}
               </span>
             </span>
           </div>
diff --git a/apps/trading/components/rewards-container/streaks/activity-streaks.tsx b/apps/trading/components/rewards-container/streaks/activity-streaks.tsx
index 13929b910..24a2d6246 100644
--- a/apps/trading/components/rewards-container/streaks/activity-streaks.tsx
+++ b/apps/trading/components/rewards-container/streaks/activity-streaks.tsx
@@ -70,12 +70,6 @@ export const ActivityStreak = ({
       .dividedBy(total)
       .toNumber();
   };
-
-  const epochsStreak =
-    tiers[userTierIndex]?.minimum_activity_streak - streak.activeFor >= 0
-      ? tiers[userTierIndex].minimum_activity_streak - streak.activeFor
-      : 0;
-
   const progressBarHeight = 'h-10';
 
   return (
@@ -196,23 +190,12 @@ export const ActivityStreak = ({
         <div className="flex items-center gap-1">
           <VegaIcon name={VegaIconNames.STREAK} />
 
-          <span className="flex flex-col text-xs">
+          <span className="flex flex-col">
             <span>
               {t('{{epochs}} epochs streak', {
                 epochs: formatNumber(streak?.activeFor),
               })}
             </span>
-            <span>
-              <span className="text-vega-pink-500">
-                {t('{{epochs}} epochs streak', {
-                  epochs: formatNumber(epochsStreak),
-                })}
-              </span>
-              &nbsp;{' '}
-              {t('to Tier {{userTier}}', {
-                userTier: userTierIndex + 1,
-              })}
-            </span>
           </span>
         </div>
       </div>
diff --git a/libs/i18n/src/locales/en/trading.json b/libs/i18n/src/locales/en/trading.json
index 73d3bf8a0..55f75f77d 100644
--- a/libs/i18n/src/locales/en/trading.json
+++ b/libs/i18n/src/locales/en/trading.json
@@ -354,8 +354,8 @@
   "{{epochs}} epochs": "{{epochs}} epochs",
   "Get rewards for providing liquidity. Get rewards for providing liquidity.": "Get rewards for providing liquidity. Get rewards for providing liquidity.",
   "Entity scope": "Entity scope",
-  "Stake required": "Stake required",
-  "Notional TWAP": "Notional TWAP",
+  "Staked VEGA": "Staked VEGA",
+  "Average position": "Average position",
   "Individual": "Individual",
   "Rewards funded using the pro-rata strategy should be distributed pro-rata by each entity's reward metric scaled by any active multipliers that party has": " Rewards funded using the pro-rata strategy should be distributed pro-rata by each entity's reward metric scaled by any active multipliers that party has",
   "Number of epochs after distribution to delay vesting of rewards by.": "Number of epochs after distribution to delay vesting of rewards by.",
diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js
index 28b041988..34c4e36a0 100644
--- a/libs/tailwindcss-config/src/theme.js
+++ b/libs/tailwindcss-config/src/theme.js
@@ -199,6 +199,12 @@ module.exports = {
       'AlphaLyrae, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
       { fontFeatureSettings: '"calt" 0, "liga" 0' },
     ],
+    glitch: [
+      'AlphaLyrae, monospace',
+      {
+        fontFeatureSettings: '"ss02" 1',
+      },
+    ],
   },
   keyframes: {
     rotate: {