chore(trading): referrals stats tweaks (#5160)

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

@@ -71,7 +71,7 @@ export const useReferral = (args: UseReferralArgs) => {
     variables: {
       code: referralSet?.id as string,
       aggregationEpochs:
-        args.aggregationEpochs != null
+        args.aggregationEpochs !== null
           ? args.aggregationEpochs
           : DEFAULT_AGGREGATION_DAYS,
     },

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

@@ -3,6 +3,8 @@ import {
   VegaIcon,
   VegaIconNames,
   truncateMiddle,
+  ExternalLink,
+  Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 
 import { useVegaWallet } from '@vegaprotocol/wallet';
@@ -28,6 +30,7 @@ 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';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
@@ -201,7 +204,7 @@ export const Statistics = ({
         'Total commission (last %s epochs)',
         (details?.windowLength || DEFAULT_AGGREGATION_DAYS).toString()
       )}
-      description={t('(qUSD)')}
+      description={<QUSDTooltip />}
     >
       {getNumberFormat(0).format(Number(totalCommissionValue))}
     </StatTile>
@@ -233,7 +236,12 @@ export const Statistics = ({
     <StatTile title={t('Discount')}>{discountFactorValue * 100}%</StatTile>
   );
   const runningVolumeTile = (
-    <StatTile title={t('Combined volume')}>
+    <StatTile
+      title={t(
+        'Combined volume (last %s epochs)',
+        details?.windowLength.toString()
+      )}
+    >
       {compactNumFormat.format(runningVolumeValue)}
     </StatTile>
   );
@@ -241,24 +249,14 @@ export const Statistics = ({
     <StatTile title={t('Epochs in set')}>{epochsValue}</StatTile>
   );
   const nextTierVolumeTile = (
-    <StatTile
+    <StatTile title={t('Volume to next tier')}>
-      title={t(
-        'Volume to next tier %s',
-        nextBenefitTierValue?.tier ? `(${nextBenefitTierValue.tier})` : ''
-      )}
-    >
       {nextBenefitTierVolumeValue <= 0
         ? '0'
         : compactNumFormat.format(nextBenefitTierVolumeValue)}
     </StatTile>
   );
   const nextTierEpochsTile = (
-    <StatTile
+    <StatTile title={t('Epochs to next tier')}>
-      title={t(
-        'Epochs to next tier %s',
-        nextBenefitTierValue?.tier ? `(${nextBenefitTierValue.tier})` : ''
-      )}
-    >
       {nextBenefitTierEpochsValue <= 0 ? '0' : nextBenefitTierEpochsValue}
     </StatTile>
   );
@@ -339,11 +337,16 @@ export const Statistics = ({
                 },
                 {
                   name: 'commission',
-                  displayName: t(
+                  displayName: (
-                    'Commission earned (last %s epochs)',
+                    <>
-                    (
+                      {t('Commission earned in')} <QUSDTooltip />{' '}
-                      details?.windowLength || DEFAULT_AGGREGATION_DAYS
+                      {t(
-                    ).toString()
+                        '(last %s epochs)',
+                        (
+                          details?.windowLength || DEFAULT_AGGREGATION_DAYS
+                        ).toString()
+                      )}
+                    </>
                   ),
                 },
               ]}
@@ -373,3 +376,25 @@ export const Statistics = ({
     </>
   );
 };
+
+export const QUSDTooltip = () => (
+  <Tooltip
+    description={
+      <>
+        <p className="mb-1">
+          {t(
+            'qUSD provides a rough USD equivalent of balances across all assets using the value of "Quantum" for that asset'
+          )}
+        </p>
+        {DocsLinks && (
+          <ExternalLink href={DocsLinks.QUANTUM}>
+            {t('Find out more')}
+          </ExternalLink>
+        )}
+      </>
+    }
+    underline={true}
+  >
+    <span>{t('qUSD')}</span>
+  </Tooltip>
+);

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

@@ -1,10 +1,10 @@
 import { Tooltip, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
-import { forwardRef, type HTMLAttributes } from 'react';
+import { forwardRef, type ReactNode, type HTMLAttributes } from 'react';
 import { BORDER_COLOR, GRADIENT } from './constants';
 
 type TableColumnDefinition = {
-  displayName?: string;
+  displayName?: ReactNode;
   name: string;
   tooltip?: string;
   className?: string;
@@ -46,7 +46,7 @@ export const Table = forwardRef<
                 INNER_BORDER_STYLE
               )}
             >
-              <span className="flex flex-row gap-2 items-center">
+              <span className="flex flex-row items-center gap-2">
                 <span>{displayName}</span>
                 {tooltip ? (
                   <Tooltip description={tooltip}>
@@ -102,17 +102,14 @@ export const Table = forwardRef<
                   key={`${i}-${name}`}
                 >
                   {/** display column name in mobile view */}
-                  {!noCollapse &&
+                  {!noCollapse && !noHeader && displayName && (
-                    !noHeader &&
+                    <span
-                    displayName &&
+                      aria-hidden
-                    displayName.length > 0 && (
+                      className="px-0 font-mono text-xs md:hidden text-vega-clight-100 dark:text-vega-cdark-100"
-                      <span
+                    >
-                        aria-hidden
+                      {displayName}
-                        className="md:hidden  font-mono text-xs px-0 text-vega-clight-100 dark:text-vega-cdark-100"
+                    </span>
-                      >
+                  )}
-                        {displayName}
-                      </span>
-                    )}
                   <span>{d[name]}</span>
                 </td>
               ))}

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

@@ -29,7 +29,7 @@ export const Tile = ({
 
 type StatTileProps = {
   title: string;
-  description?: string;
+  description?: ReactNode;
   children?: ReactNode;
 };
 export const StatTile = ({ title, description, children }: StatTileProps) => {
@@ -67,11 +67,11 @@ export const CodeTile = ({
       title={t('Your referral code')}
       description={createdAt ? t('(Created at: %s)', createdAt) : undefined}
     >
-      <div className="flex gap-2 items-center justify-between">
+      <div className="flex items-center justify-between gap-2">
         <Tooltip
           description={
             <div className="break-all">
-              <span className="text-xl bg-rainbow bg-clip-text text-transparent">
+              <span className="text-xl text-transparent bg-rainbow bg-clip-text">
                 {code}
               </span>
             </div>

libs/environment/src/hooks/use-links.ts

@@ -84,6 +84,7 @@ export const DocsLinks = VEGA_DOCS_URL
       ETH_DATA_SOURCES: `${VEGA_DOCS_URL}/concepts/trading-on-vega/data-sources#ethereum-data-sources`,
       ICEBERG_ORDERS: `${VEGA_DOCS_URL}/concepts/trading-on-vega/orders#iceberg-order`,
       POST_REDUCE_ONLY: `${VEGA_DOCS_URL}/concepts/trading-on-vega/orders#conditional-order-parameters`,
+      QUANTUM: `${VEGA_DOCS_URL}/concepts/assets/asset-framework#quantum`,
     }
   : undefined;