fix(trading): missing volume discount program issue, inverted tiers (#5378)

apps/trading/client-pages/referrals/hooks/use-referral-program.ts

@@ -75,22 +75,20 @@ export const useReferralProgram = () => {
 
   const benefitTiers = sortBy(data.currentReferralProgram.benefitTiers, (t) =>
     Number(t.referralRewardFactor)
-  )
+  ).map((t, i) => {
-    .reverse()
+    return {
-    .map((t, i) => {
+      tier: i + 1, // sorted in asc order, hence first is the lowest tier
-      return {
+      rewardFactor: Number(t.referralRewardFactor),
-        tier: i + 1,
+      commission: Number(t.referralRewardFactor) * 100 + '%',
-        rewardFactor: Number(t.referralRewardFactor),
+      discountFactor: Number(t.referralDiscountFactor),
-        commission: Number(t.referralRewardFactor) * 100 + '%',
+      discount: Number(t.referralDiscountFactor) * 100 + '%',
-        discountFactor: Number(t.referralDiscountFactor),
+      minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
-        discount: Number(t.referralDiscountFactor) * 100 + '%',
+      volume: getNumberFormat(0).format(
-        minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
+        Number(t.minimumRunningNotionalTakerVolume)
-        volume: getNumberFormat(0).format(
+      ),
-          Number(t.minimumRunningNotionalTakerVolume)
+      epochs: Number(t.minimumEpochs),
-        ),
+    };
-        epochs: Number(t.minimumEpochs),
+  });
-      };
-    });
 
   const stakingTiers = sortBy(
     data.currentReferralProgram.stakingTiers,

apps/trading/client-pages/referrals/referral-statistics.tsx

@@ -29,8 +29,8 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
 import { t } from '@vegaprotocol/i18n';
-import maxBy from 'lodash/maxBy';
 import { DocsLinks } from '@vegaprotocol/environment';
+import minBy from 'lodash/minBy';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
@@ -124,7 +124,7 @@ export const Statistics = ({
   );
   const nextBenefitTierValue = currentBenefitTierValue
     ? benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1)
-    : maxBy(benefitTiers, (bt) => bt.tier); // max tier number is lowest tier
+    : minBy(benefitTiers, (bt) => bt.tier); //  min tier number is lowest tier
   const epochsValue =
     !isNaN(currentEpoch) && refereeInfo?.atEpoch
       ? currentEpoch - refereeInfo?.atEpoch

apps/trading/client-pages/referrals/tiers.tsx

@@ -199,13 +199,13 @@ const TiersTable = ({
         ...d,
         className: classNames({
           'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight':
-            d.tier === 1,
+            d.tier >= 3,
           'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight':
             d.tier === 2,
           'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight':
-            d.tier === 3,
+            d.tier === 1,
           'from-vega-orange-400 dark:from-vega-orange-600 to-20%  bg-highlight':
-            d.tier > 3,
+            d.tier == 0,
         }),
       }))}
     />

apps/trading/components/fees-container/fees-container.tsx

@@ -36,7 +36,7 @@ export const FeesContainer = () => {
   const { data: markets, loading: marketsLoading } = useMarketList();
 
   const { data: programData, loading: programLoading } =
-    useDiscountProgramsQuery();
+    useDiscountProgramsQuery({ errorPolicy: 'ignore' });
 
   const volumeDiscountWindowLength =
     programData?.currentVolumeDiscountProgram?.windowLength || 1;
@@ -459,25 +459,19 @@ const VolumeTiers = ({
           </tr>
         </THead>
         <tbody>
-          {Array.from(tiers)
+          {Array.from(tiers).map((tier, i) => {
-            .reverse()
+            const isUserTier = tiers.length - 1 - tierIndex === i;
-            .map((tier, i) => {
-              const isUserTier = tiers.length - 1 - tierIndex === i;
 
-              return (
+            return (
-                <Tr key={i}>
+              <Tr key={i}>
-                  <Td>{i + 1}</Td>
+                <Td>{i + 1}</Td>
-                  <Td>
+                <Td>{formatPercentage(Number(tier.volumeDiscountFactor))}%</Td>
-                    {formatPercentage(Number(tier.volumeDiscountFactor))}%
+                <Td>{formatNumber(tier.minimumRunningNotionalTakerVolume)}</Td>
-                  </Td>
+                <Td>{isUserTier ? formatNumber(lastEpochVolume) : ''}</Td>
-                  <Td>
+                <Td>{isUserTier ? <YourTier /> : null}</Td>
-                    {formatNumber(tier.minimumRunningNotionalTakerVolume)}
+              </Tr>
-                  </Td>
+            );
-                  <Td>{isUserTier ? formatNumber(lastEpochVolume) : ''}</Td>
+          })}
-                  <Td>{isUserTier ? <YourTier /> : null}</Td>
-                </Tr>
-              );
-            })}
         </tbody>
       </Table>
     </div>
@@ -518,37 +512,33 @@ const ReferralTiers = ({
           </tr>
         </THead>
         <tbody>
-          {Array.from(tiers)
+          {Array.from(tiers).map((t, i) => {
-            .reverse()
+            const isUserTier = tiers.length - 1 - tierIndex === i;
-            .map((t, i) => {
-              const isUserTier = tiers.length - 1 - tierIndex === i;
 
-              const requiredVolume = Number(
+            const requiredVolume = Number(t.minimumRunningNotionalTakerVolume);
-                t.minimumRunningNotionalTakerVolume
+            let unlocksIn = null;
+
+            if (
+              referralVolumeInWindow >= requiredVolume &&
+              epochsInSet < t.minimumEpochs
+            ) {
+              unlocksIn = (
+                <span className="text-muted">
+                  Unlocks in {t.minimumEpochs - epochsInSet} epochs
+                </span>
               );
-              let unlocksIn = null;
+            }
 
-              if (
+            return (
-                referralVolumeInWindow >= requiredVolume &&
+              <Tr key={i}>
-                epochsInSet < t.minimumEpochs
+                <Td>{i + 1}</Td>
-              ) {
+                <Td>{formatPercentage(Number(t.referralDiscountFactor))}%</Td>
-                unlocksIn = (
+                <Td>{formatNumber(t.minimumRunningNotionalTakerVolume)}</Td>
-                  <span className="text-muted">
+                <Td>{t.minimumEpochs}</Td>
-                    Unlocks in {t.minimumEpochs - epochsInSet} epochs
+                <Td>{isUserTier ? <YourTier /> : unlocksIn}</Td>
-                  </span>
+              </Tr>
-                );
+            );
-              }
+          })}
-
-              return (
-                <Tr key={i}>
-                  <Td>{i + 1}</Td>
-                  <Td>{formatPercentage(Number(t.referralDiscountFactor))}%</Td>
-                  <Td>{formatNumber(t.minimumRunningNotionalTakerVolume)}</Td>
-                  <Td>{t.minimumEpochs}</Td>
-                  <Td>{isUserTier ? <YourTier /> : unlocksIn}</Td>
-                </Tr>
-              );
-            })}
         </tbody>
       </Table>
     </div>