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

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

@@ -75,11 +75,9 @@ export const useReferralProgram = () => {
 
   const benefitTiers = sortBy(data.currentReferralProgram.benefitTiers, (t) =>
     Number(t.referralRewardFactor)
-  )
-    .reverse()
-    .map((t, i) => {
+  ).map((t, i) => {
     return {
-        tier: i + 1,
+      tier: i + 1, // sorted in asc order, hence first is the lowest tier
       rewardFactor: Number(t.referralRewardFactor),
       commission: Number(t.referralRewardFactor) * 100 + '%',
       discountFactor: Number(t.referralDiscountFactor),

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,20 +459,14 @@ const VolumeTiers = ({
           </tr>
         </THead>
         <tbody>
-          {Array.from(tiers)
-            .reverse()
-            .map((tier, i) => {
+          {Array.from(tiers).map((tier, i) => {
             const isUserTier = tiers.length - 1 - tierIndex === i;
 
             return (
               <Tr key={i}>
                 <Td>{i + 1}</Td>
-                  <Td>
-                    {formatPercentage(Number(tier.volumeDiscountFactor))}%
-                  </Td>
-                  <Td>
-                    {formatNumber(tier.minimumRunningNotionalTakerVolume)}
-                  </Td>
+                <Td>{formatPercentage(Number(tier.volumeDiscountFactor))}%</Td>
+                <Td>{formatNumber(tier.minimumRunningNotionalTakerVolume)}</Td>
                 <Td>{isUserTier ? formatNumber(lastEpochVolume) : ''}</Td>
                 <Td>{isUserTier ? <YourTier /> : null}</Td>
               </Tr>
@@ -518,14 +512,10 @@ const ReferralTiers = ({
           </tr>
         </THead>
         <tbody>
-          {Array.from(tiers)
-            .reverse()
-            .map((t, i) => {
+          {Array.from(tiers).map((t, i) => {
             const isUserTier = tiers.length - 1 - tierIndex === i;
 
-              const requiredVolume = Number(
-                t.minimumRunningNotionalTakerVolume
-              );
+            const requiredVolume = Number(t.minimumRunningNotionalTakerVolume);
             let unlocksIn = null;
 
             if (