chore: 4774 put connect dialog inside onboarding dialog

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

@@ -27,8 +27,8 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
   const dismiss = useOnboardingStore((store) => store.dismiss);
   const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen);
   const marketId = useGlobalStore((store) => store.marketId);
-  const openVegaWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
+  const setWalletDialogOpen = useOnboardingStore(
+    (store) => store.setWalletDialogOpen
   );
   const setViews = useSidebar((store) => store.setViews);
 
@@ -40,7 +40,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
 
   if (step <= OnboardingStep.ONBOARDING_CONNECT_STEP) {
     return (
-      <TradingButton {...buttonProps} onClick={() => openVegaWalletDialog()}>
+      <TradingButton {...buttonProps} onClick={() => setWalletDialogOpen(true)}>
         {t('Connect')}
       </TradingButton>
     );
@@ -70,7 +70,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
   }
 
   return (
-    <TradingButton {...buttonProps} onClick={() => openVegaWalletDialog()}>
+    <TradingButton {...buttonProps} onClick={() => setWalletDialogOpen(true)}>
       {t('Get started')}
     </TradingButton>
   );

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

@@ -12,16 +12,20 @@ import { useGlobalStore } from '../../stores';
 const ONBOARDING_STORAGE_KEY = 'vega_onboarding';
 export const useOnboardingStore = create<{
   dialogOpen: boolean;
+  walletDialogOpen: boolean;
   dismissed: boolean;
   dismiss: () => void;
   setDialogOpen: (isOpen: boolean) => void;
+  setWalletDialogOpen: (isOpen: boolean) => void;
 }>()(
   persist(
     (set) => ({
       dialogOpen: true,
+      walletDialogOpen: false,
       dismissed: false,
       dismiss: () => set({ dismissed: true }),
       setDialogOpen: (isOpen) => set({ dialogOpen: isOpen }),
+      setWalletDialogOpen: (isOpen) => set({ walletDialogOpen: isOpen }),
     }),
     {
       name: ONBOARDING_STORAGE_KEY,

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

@@ -3,30 +3,54 @@ import { t } from '@vegaprotocol/i18n';
 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';
 
 export const WelcomeDialog = () => {
   const { VEGA_ENV } = useEnvironment();
   const dismissed = useOnboardingStore((store) => store.dismissed);
   const dialogOpen = useOnboardingStore((store) => store.dialogOpen);
   const dismiss = useOnboardingStore((store) => store.dismiss);
+  const walletDialogOpen = useOnboardingStore(
+    (store) => store.walletDialogOpen
+  );
+  const setWalletDialogOpen = useOnboardingStore(
+    (store) => store.setWalletDialogOpen
+  );
+
+  const content = walletDialogOpen ? (
+    <VegaConnectDialog
+      connectors={Connectors}
+      riskMessage={<RiskMessage />}
+      closeDialogParam={() => setWalletDialogOpen(false)}
+      contentOnly
+    />
+  ) : (
+    <WelcomeDialogContent />
+  );
+
+  const onClose = walletDialogOpen ? () => setWalletDialogOpen(false) : dismiss;
+
+  const title = walletDialogOpen ? null : (
+    <span className="font-alpha calt" data-testid="welcome-title">
+      {t('Console')}{' '}
+      <span className="text-vega-clight-100 dark:text-vega-cdark-100">
+        {VEGA_ENV}
+      </span>
+    </span>
+  );
 
   return (
     <Dialog
       open={dismissed ? false : dialogOpen}
-      title={
-        <span className="font-alpha calt" data-testid="welcome-title">
-          {t('Console')}{' '}
-          <span className="text-vega-clight-100 dark:text-vega-cdark-100">
-            {VEGA_ENV}
-          </span>
-        </span>
-      }
+      title={title}
       size="medium"
-      onChange={() => dismiss()}
+      onChange={onClose}
       intent={Intent.None}
       dataTestId="welcome-dialog"
     >
-      <WelcomeDialogContent />
+      {content}
     </Dialog>
   );
 };

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -50,11 +50,15 @@ export type WalletType = 'injected' | 'jsonRpc' | 'view' | 'snap';
 export interface VegaConnectDialogProps {
   connectors: Connectors;
   riskMessage?: ReactNode;
+  contentOnly?: boolean;
+  closeDialogParam?: () => void;
 }
 
 export const VegaConnectDialog = ({
   connectors,
   riskMessage,
+  contentOnly,
+  closeDialogParam,
 }: VegaConnectDialogProps) => {
   const { disconnect, acknowledgeNeeded } = useVegaWallet();
   const vegaWalletDialogOpen = useVegaWalletDialogStore(
@@ -80,19 +84,24 @@ export const VegaConnectDialog = ({
   // This value will already be in the cache, if it failed the app wont render
   const { data } = useChainIdQuery();
 
+  const content = data && (
+    <ConnectDialogContainer
+      connectors={connectors}
+      appChainId={data.statistics.chainId}
+      riskMessage={riskMessage}
+      closeDialogParam={closeDialogParam}
+    />
+  );
+  if (contentOnly) {
+    return content;
+  }
   return (
     <Dialog
       open={vegaWalletDialogOpen}
       size="small"
       onChange={onVegaWalletDialogChange}
     >
-      {data && (
-        <ConnectDialogContainer
-          connectors={connectors}
-          appChainId={data.statistics.chainId}
-          riskMessage={riskMessage}
-        />
-      )}
+      {content}
     </Dialog>
   );
 };
@@ -101,15 +110,20 @@ const ConnectDialogContainer = ({
   connectors,
   appChainId,
   riskMessage,
+  closeDialogParam,
 }: {
   connectors: Connectors;
   appChainId: string;
   riskMessage?: ReactNode;
+  closeDialogParam?: () => void;
 }) => {
   const { vegaUrl, vegaWalletServiceUrl } = useVegaWallet();
-  const closeDialog = useVegaWalletDialogStore(
+  const closeVegaWalletDialog = useVegaWalletDialogStore(
     (store) => store.closeVegaWalletDialog
   );
+  const closeDialog = useCallback(() => {
+    closeDialogParam ? closeDialogParam() : closeVegaWalletDialog();
+  }, [closeVegaWalletDialog, closeDialogParam]);
   const [selectedConnector, setSelectedConnector] = useState<VegaConnector>();
   const [walletUrl, setWalletUrl] = useState(vegaWalletServiceUrl);