fix: missing tooltip, page refresh after code applied

apps/trading/client-pages/referrals/apply-code-form.tsx

@@ -32,7 +32,11 @@ const validateCode = (value: string, t: ReturnType<typeof useT>) => {
   return true;
 };
 
-export const ApplyCodeFormContainer = () => {
+export const ApplyCodeFormContainer = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void;
+}) => {
   const { pubKey } = useVegaWallet();
   const isInReferralSet = useIsInReferralSet(pubKey);
 
@@ -41,10 +45,10 @@ export const ApplyCodeFormContainer = () => {
     return <Navigate to={Routes.REFERRALS} />;
   }
 
-  return <ApplyCodeForm />;
+  return <ApplyCodeForm onSuccess={onSuccess} />;
 };
 
-export const ApplyCodeForm = () => {
+export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
   const t = useT();
   const program = useReferralProgram();
   const navigate = useNavigate();
@@ -166,10 +170,11 @@ export const ApplyCodeForm = () => {
   useEffect(() => {
     if (status === 'successful') {
       setTimeout(() => {
+        if (onSuccess) onSuccess();
         navigate(Routes.REFERRALS);
       }, RELOAD_DELAY);
     }
-  }, [navigate, status]);
+  }, [navigate, onSuccess, status]);
 
   // show "code applied" message when successfully applied
   if (status === 'successful') {

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

@@ -25,7 +25,7 @@ import compact from 'lodash/compact';
 import { useReferralProgram } from './hooks/use-referral-program';
 import { useStakeAvailable } from './hooks/use-stake-available';
 import sortBy from 'lodash/sortBy';
-import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
 import { DocsLinks } from '@vegaprotocol/environment';
@@ -38,17 +38,22 @@ export const ReferralStatistics = () => {
 
   const program = useReferralProgram();
 
-  const { data: referee } = useReferral({
+  const { data: referee, refetch: refereeRefetch } = useReferral({
     pubKey,
     role: 'referee',
     aggregationEpochs: program.details?.windowLength,
   });
-  const { data: referrer } = useReferral({
+  const { data: referrer, refetch: referrerRefetch } = useReferral({
     pubKey,
     role: 'referrer',
     aggregationEpochs: program.details?.windowLength,
   });
 
+  const refetch = useCallback(() => {
+    refereeRefetch();
+    referrerRefetch();
+  }, [refereeRefetch, referrerRefetch]);
+
   if (referee?.code) {
     return (
       <>
@@ -67,7 +72,7 @@ export const ReferralStatistics = () => {
     );
   }
 
-  return <ApplyCodeFormContainer />;
+  return <ApplyCodeFormContainer onSuccess={refetch} />;
 };
 
 export const useStats = ({
@@ -476,6 +481,7 @@ export const RefereesTable = ({
                         count:
                           details?.windowLength || DEFAULT_AGGREGATION_DAYS,
                       }}
+                      components={[<QUSDTooltip key="qusd" />]}
                       ns={ns}
                     />
                   ),