fix(trading): referrals page final commission value and onboarding dialog (#5474)

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

@@ -91,8 +91,10 @@ export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
   const validateFundsAvailable = useCallback(() => {
     if (requiredFunds && !isEligible) {
       const err = t(
-        'Require minimum of {{requiredFunds}} to join a referral set to protect the network from spam.',
+        'To protect the network from spam, you must have at least {{requiredFunds}} qUSD of any asset on the network to proceed.',
-        { replace: { requiredFunds } }
+        {
+          requiredFunds,
+        }
       );
       return err;
     }

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

@@ -121,7 +121,7 @@ export const useStats = ({
     : 1;
   const finalCommissionValue = isNaN(multiplier)
     ? baseCommissionValue
-    : multiplier * baseCommissionValue;
+    : new BigNumber(multiplier).times(baseCommissionValue).toNumber();
 
   const discountFactorValue = refereeStats?.discountFactor
     ? Number(refereeStats.discountFactor)
@@ -242,19 +242,23 @@ export const Statistics = ({
       {multiplier || t('None')}
     </StatTile>
   );
+  const baseCommissionFormatted = BigNumber(baseCommissionValue)
+    .times(100)
+    .toString();
+  const finalCommissionFormatted = new BigNumber(finalCommissionValue)
+    .times(100)
+    .toString();
   const finalCommissionTile = (
     <StatTile
       title={t('Final commission rate')}
       description={
         !isNaN(multiplier)
-          ? `(${baseCommissionValue * 100}% ⨉ ${multiplier} = ${
+          ? `(${baseCommissionFormatted}% ⨉ ${multiplier} = ${finalCommissionFormatted}%)`
-              finalCommissionValue * 100
-            }%)`
           : undefined
       }
       overrideWithNoProgram={!details}
     >
-      {finalCommissionValue * 100}%
+      {finalCommissionFormatted}%
     </StatTile>
   );
   const numberOfTradersValue = data.referees.length;

apps/trading/components/welcome-dialog/use-get-onboarding-step.ts

@@ -10,6 +10,7 @@ import { positionsDataProvider } from '@vegaprotocol/positions';
 import { useGlobalStore } from '../../stores';
 
 const ONBOARDING_STORAGE_KEY = 'vega_onboarding';
+
 export const useOnboardingStore = create<{
   dialogOpen: boolean;
   walletDialogOpen: boolean;
@@ -20,7 +21,7 @@ export const useOnboardingStore = create<{
 }>()(
   persist(
     (set) => ({
-      dialogOpen: true,
+      dialogOpen: false,
       walletDialogOpen: false,
       dismissed: false,
       dismiss: () => set({ dismissed: true }),

apps/trading/components/welcome-dialog/welcome-dialog.tsx

@@ -1,18 +1,23 @@
+import { useEffect } from 'react';
+import { useMatch } from 'react-router-dom';
 import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '@vegaprotocol/environment';
-import { WelcomeDialogContent } from './welcome-dialog-content';
-import { useOnboardingStore } from './use-get-onboarding-step';
 import { VegaConnectDialog } from '@vegaprotocol/wallet';
 import { Connectors } from '../../lib/vega-connectors';
-import { RiskMessage } from './risk-message';
 import { useT } from '../../lib/use-t';
+import { Links } from '../../lib/links';
+import { RiskMessage } from './risk-message';
+import { WelcomeDialogContent } from './welcome-dialog-content';
+import { useOnboardingStore } from './use-get-onboarding-step';
 
 export const WelcomeDialog = () => {
+  const isReferrals = useMatch(Links.REFERRALS());
   const t = useT();
   const { VEGA_ENV } = useEnvironment();
   const dismissed = useOnboardingStore((store) => store.dismissed);
   const dialogOpen = useOnboardingStore((store) => store.dialogOpen);
   const dismiss = useOnboardingStore((store) => store.dismiss);
+  const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen);
   const walletDialogOpen = useOnboardingStore(
     (store) => store.walletDialogOpen
   );
@@ -20,6 +25,12 @@ export const WelcomeDialog = () => {
     (store) => store.setWalletDialogOpen
   );
 
+  useEffect(() => {
+    if (dismissed) return;
+    if (isReferrals) return;
+    setDialogOpen(true);
+  }, [dismissed, isReferrals, setDialogOpen]);
+
   const content = walletDialogOpen ? (
     <VegaConnectDialog
       connectors={Connectors}
@@ -31,7 +42,12 @@ export const WelcomeDialog = () => {
     <WelcomeDialogContent />
   );
 
-  const onClose = walletDialogOpen ? () => setWalletDialogOpen(false) : dismiss;
+  const onClose = walletDialogOpen
+    ? () => setWalletDialogOpen(false)
+    : () => {
+        setDialogOpen(false);
+        dismiss();
+      };
 
   const title = walletDialogOpen ? null : (
     <span className="font-alpha calt" data-testid="welcome-title">

libs/i18n/src/locales/en/trading.json

@@ -279,6 +279,7 @@
   "This timestamp is user curated metadata and does not drive any on-chain functionality.": "This timestamp is user curated metadata and does not drive any on-chain functionality.",
   "Tier": "Tier",
   "to": "to",
+  "To protect the network from spam, you must have at least {{requiredFunds}} qUSD of any asset on the network to proceed.": "To protect the network from spam, you must have at least {{requiredFunds}} qUSD of any asset on the network to proceed.",
   "Toast location": "Toast location",
   "Total discount": "Total discount",
   "Total distributed": "Total distributed",