Merge pull request #5393 from vegaprotocol/chore/sync-main

chore(trading, datagrid, liquidity, proposals, ui-toolkit): sync main

apps/trading/client-pages/market/market-header-stats.tsx

@@ -1,7 +1,6 @@
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { DocsLinks, useEnvironment } from '@vegaprotocol/environment';
 import { ButtonLink, ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
-import { MarketProposalNotification } from '@vegaprotocol/proposals';
 import type { Market } from '@vegaprotocol/markets';
 import {
   addDecimalsFormatNumber,
@@ -145,7 +144,6 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
           />
         </HeaderStat>
       )}
-      <MarketProposalNotification marketId={market.id} />
     </>
   );
 };

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

@@ -1,3 +1,4 @@
+import minBy from 'lodash/minBy';
 import { CodeTile, StatTile } from './tile';
 import {
   VegaIcon,
@@ -28,7 +29,6 @@ import sortBy from 'lodash/sortBy';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
-import maxBy from 'lodash/maxBy';
 import { DocsLinks } from '@vegaprotocol/environment';
 import { useT, ns } from '../../lib/use-t';
 import { Trans } from 'react-i18next';
@@ -128,7 +128,7 @@ export const useStats = ({
   );
   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

@@ -218,13 +218,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>
@@ -520,14 +514,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 (

libs/datagrid/src/lib/ag-grid/ag-grid-themed.tsx

@@ -36,10 +36,10 @@ export const AgGridThemed = ({
     <div className={wrapperClasses}>
       <AgGridReact
         defaultColDef={defaultColDef}
-        ref={gridRef}
         overlayLoadingTemplate={t('Loading...')}
         overlayNoRowsTemplate={t('No data')}
         suppressDragLeaveHidesColumns
+        ref={gridRef}
         {...defaultProps}
         {...props}
       />

libs/liquidity/src/lib/liquidity-table.tsx

@@ -107,9 +107,6 @@ export const LiquidityTable = ({
 
     const feesAccruedTooltip = ({ value, data }: ITooltipParams) => {
       if (!value) return '-';
-      const newValue = new BigNumber(value)
-        .times(Number(stakeToCcyVolume) || 1)
-        .toString();
       let lessThanFull = false,
         lessThanMinimum = false;
       if (data.sla) {
@@ -154,7 +151,7 @@ export const LiquidityTable = ({
           }
         );
       }
-      return addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0);
+      return addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0);
     };
 
     const stakeToCcyVolumeQuantumFormatter = ({

libs/proposals/src/components/market-proposal-notification.tsx

@@ -30,7 +30,7 @@ export const MarketProposalNotification = ({
       </div>
     );
     return (
-      <div className="border-default min-w-min whitespace-nowrap border-l pb-1 pl-1 pr-1">
+      <div className="border-default min-w-min border-l pb-1 pl-1 pr-1">
         <Notification
           intent={Intent.Warning}
           message={message}

libs/ui-toolkit/src/components/notification/notification.tsx

@@ -93,7 +93,7 @@ export const Notification = ({
       </div>
       <div
         className={classNames(
-          'flex flex-col items-start overflow-hidden gap-0 mt-1',
+          'flex flex-col items-start overflow-hidden gap-0',
           'text-vega-clight-50 dark:text-vega-cdark-50',
           'font-alpha',
           { 'text-sm': size === 'small', 'text-base': size === 'medium' }