chore(trading): 4774 put connect dialog inside onboarding dialog (#4845)

apps/governance/src/routes/proposals/proposal/proposal-container.spec.tsx

@@ -6,6 +6,11 @@ import { MockedProvider } from '@apollo/client/testing';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { ProposalDocument } from './__generated__/Proposal';
 
+jest.mock('@vegaprotocol/data-provider', () => ({
+  ...jest.requireActual('@vegaprotocol/data-provider'),
+  useDataProvider: jest.fn(() => ({ data: [], loading: false })),
+}));
+
 jest.mock('../components/proposal', () => ({
   Proposal: () => <div data-testid="proposal" />,
 }));

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(
+  const setWalletDialogOpen = useOnboardingStore(
-    (store) => store.openVegaWalletDialog
+    (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>
     );
@@ -71,7 +71,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 />}
+      onClose={() => 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={
+      title={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>
-      }
       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;
+  onClose?: () => void;
 }
 
 export const VegaConnectDialog = ({
   connectors,
   riskMessage,
+  contentOnly,
+  onClose,
 }: 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}
+      onClose={onClose}
+    />
+  );
+  if (contentOnly) {
+    return content;
+  }
   return (
     <Dialog
       open={vegaWalletDialogOpen}
       size="small"
       onChange={onVegaWalletDialogChange}
     >
-      {data && (
+      {content}
-        <ConnectDialogContainer
-          connectors={connectors}
-          appChainId={data.statistics.chainId}
-          riskMessage={riskMessage}
-        />
-      )}
     </Dialog>
   );
 };
@@ -101,15 +110,20 @@ const ConnectDialogContainer = ({
   connectors,
   appChainId,
   riskMessage,
+  onClose,
 }: {
   connectors: Connectors;
   appChainId: string;
   riskMessage?: ReactNode;
+  onClose?: () => void;
 }) => {
   const { vegaUrl, vegaWalletServiceUrl } = useVegaWallet();
-  const closeDialog = useVegaWalletDialogStore(
+  const closeVegaWalletDialog = useVegaWalletDialogStore(
     (store) => store.closeVegaWalletDialog
   );
+  const closeDialog = useCallback(() => {
+    onClose ? onClose() : closeVegaWalletDialog();
+  }, [closeVegaWalletDialog, onClose]);
   const [selectedConnector, setSelectedConnector] = useState<VegaConnector>();
   const [walletUrl, setWalletUrl] = useState(vegaWalletServiceUrl);
 
@@ -255,7 +269,7 @@ const ConnectorList = ({
               </>
             }
             description={t(
-              `Connect Vega Wallet extension
+              `Connect with Vega Wallet extension
               for %s to access all features including key
               management and detailed transaction views from your
               browser.`,
@@ -287,8 +301,18 @@ const ConnectorList = ({
         {connectors['snap'] !== undefined ? (
           <div>
             {snapStatus === SnapStatus.INSTALLED ? (
-              <ConnectionOption
+              <ConnectionOptionWithDescription
                 type="snap"
+                title={
+                  <>
+                    <span>{t('Metamask Snap')}</span>
+                    {'  '}
+                    <span className="text-xs"> {t('quick start')}</span>
+                  </>
+                }
+                description={t(
+                  `Connect directly via Metamask with the Vega Snap for single key support without advanced features.`
+                )}
                 text={
                   <>
                     <div className="flex items-center justify-center w-full h-full text-base gap-1">
@@ -316,7 +340,7 @@ const ConnectorList = ({
                     </>
                   }
                   description={t(
-                    `Connect directly via Metamask with the Vega Snap for single key support without advanced features.`
+                    `Install Metamask with the Vega Snap for single key support without advanced features.`
                   )}
                   text={
                     <>