feat: add get started steps - feedback changes tbc

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { isBrowserWalletInstalled, truncateByChars } from '@vegaprotocol/utils';
+import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
+import { truncateByChars } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
   VegaIcon,

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

@@ -1,11 +1,14 @@
 import classNames from 'classnames';
 import { t } from '@vegaprotocol/i18n';
 import { ExternalLink, Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import {
+  useVegaWallet,
+  useVegaWalletDialogStore,
+  isBrowserWalletInstalled,
+} from '@vegaprotocol/wallet';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import * as constants from '../constants';
-import { isBrowserWalletInstalled } from '@vegaprotocol/utils';
 
 interface Props {
   lead?: string;

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

@@ -7,7 +7,7 @@ import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import * as constants from '../constants';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 
-export const OnboardingDialog = () => {
+export const WelcomeDialogContent = () => {
   const { VEGA_ENV } = useEnvironment();
   const [, setOnboardingViewed] = useLocalStorage(
     constants.ONBOARDING_VIEWED_KEY

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

@@ -4,60 +4,49 @@ import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { useEnvironment } from '@vegaprotocol/environment';
-import { isBrowserWalletInstalled } from '@vegaprotocol/utils';
+import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
 import * as constants from '../constants';
-import { OnboardingDialog } from './onboarding-dialog';
+import { WelcomeDialogContent } from './welcome-dialog-content';
 import { getConfig } from '@vegaprotocol/wallet';
 import { Links, Routes } from '../../pages/client-router';
 import { useGlobalStore } from '../../stores';
 
 export const WelcomeDialog = () => {
   const { VEGA_ENV } = useEnvironment();
-  let dialogContent: React.ReactNode;
-  let title: string | React.ReactNode = '';
-  let size: 'small' | 'medium' = 'small';
-  let onClose: ((open: boolean) => void) | undefined = undefined;
   const [onBoardingViewed, setOnboardingViewed] = useLocalStorage(
     constants.ONBOARDING_VIEWED_KEY
   );
   const navigate = useNavigate();
   const isOnboardingDialogNeeded =
     onBoardingViewed !== 'true' && !isBrowserWalletInstalled() && !getConfig();
-
   const marketId = useGlobalStore((store) => store.marketId);
 
-  if (isOnboardingDialogNeeded) {
-    dialogContent = <OnboardingDialog />;
-    onClose = () => {
-      setOnboardingViewed('true');
-      const link = marketId
-        ? Links[Routes.MARKET](marketId)
-        : Links[Routes.HOME]();
-      navigate(link);
-    };
-    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>
+  const onClose = () => {
+    setOnboardingViewed('true');
+    const link = marketId
+      ? Links[Routes.MARKET](marketId)
+      : Links[Routes.HOME]();
+    navigate(link);
+  };
+  const 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>
-    );
-    size = 'medium';
-  } else {
-    dialogContent = null as React.ReactNode;
-  }
+    </span>
+  );
 
-  return (
+  return isOnboardingDialogNeeded ? (
     <Dialog
-      open={Boolean(dialogContent)}
+      open
       title={title}
-      size={size}
+      size="medium"
       onChange={onClose}
       intent={Intent.None}
       dataTestId="welcome-dialog"
     >
-      {dialogContent}
+      <WelcomeDialogContent />
     </Dialog>
-  );
+  ) : null;
 };

libs/utils/src/index.ts

@@ -15,4 +15,3 @@ export * from './lib/time';
 export * from './lib/validate';
 export * from './lib/resolve-network-name';
 export * from './lib/is-test-env';
-export * from './lib/is-browser-wallet-installed';

libs/wallet/src/index.ts

@@ -13,5 +13,6 @@ export * from './provider';
 export * from './connect-dialog';
 export * from './utils';
 export * from './storage';
+export * from './is-browser-wallet-installed';
 export * from './__generated__/TransactionResult';
 export * from './__generated__/WithdrawalApproval';

libs/wallet/src/is-browser-wallet-installed.ts

@@ -1,2 +1 @@
-// @ts-ignore vega globals defined in wallet lib
 export const isBrowserWalletInstalled = () => Boolean(window.vega);