feat: add get started steps - add some AC adjustments

apps/trading/components/sidebar/sidebar.tsx

@@ -185,6 +185,7 @@ export const SidebarContent = () => {
               setView({ type: ViewType.Deposit, assetId })
             }
           />
+          <GetStarted />
         </ContentWrapper>
       );
     } else {
@@ -208,6 +209,7 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Deposit')}>
         <DepositContainer assetId={view.assetId} />
+        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -216,6 +218,7 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Withdraw')}>
         <WithdrawContainer assetId={view.assetId} />
+        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -224,6 +227,7 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Transfer')}>
         <TransferContainer assetId={view.assetId} />
+        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -254,7 +258,6 @@ const ContentWrapper = ({
     >
       {title && <h2 className="mb-4">{title}</h2>}
       {children}
-      <GetStarted />
     </TinyScroll>
   );
 };

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

@@ -8,10 +8,10 @@ import * as constants from '../constants';
 import { isBrowserWalletInstalled } from '@vegaprotocol/utils';
 
 interface Props {
-  showLead?: boolean;
+  lead?: string;
 }
 
-export const GetStarted = ({ showLead }: Props) => {
+export const GetStarted = ({ lead }: Props) => {
   const { pubKey } = useVegaWallet();
 
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
@@ -35,16 +35,10 @@ export const GetStarted = ({ showLead }: Props) => {
       <div
         className={classNames(
           'flex flex-col bg-vega-blue-300 dark:bg-vega-blue-700 border border-vega-blue-350 dark:border-vega-blue-650 px-6 py-8 gap-4',
-          { 'mt-8': !showLead }
+          { 'mt-8': !lead }
         )}
       >
-        {showLead && (
-          <div>
-            {t(
-              'Start trading on the worlds most advanced decentralised exchange.'
-            )}
-          </div>
-        )}
+        {lead && <div>{lead}</div>}
         <div>{t('Get started')}</div>
         <div>
           <ul className="list-decimal list-inside">
@@ -64,7 +58,7 @@ export const GetStarted = ({ showLead }: Props) => {
           </TradingButton>
         </div>
         {VEGA_ENV === 'MAINNET' && (
-          <div className="">
+          <div className="text-sm">
             {t('Experiment for free with virtual assets on')}{' '}
             <ExternalLink href={CANONICAL_URL}>
               {t('Fairground Testnet')}
@@ -72,7 +66,7 @@ export const GetStarted = ({ showLead }: Props) => {
           </div>
         )}
         {VEGA_ENV === 'TESTNET' && (
-          <div className="">
+          <div className="text-sm">
             {t('Ready to trade with real funds?')}{' '}
             <ExternalLink href={CANONICAL_URL}>
               {t('Switch to Mainnet')}

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

@@ -5,8 +5,10 @@ import { useNavigate } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import * as constants from '../constants';
+import { useEnvironment } from '@vegaprotocol/environment';
 
 export const OnboardingDialog = () => {
+  const { VEGA_ENV } = useEnvironment();
   const [, setOnboardingViewed] = useLocalStorage(
     constants.ONBOARDING_VIEWED_KEY
   );
@@ -16,6 +18,12 @@ export const OnboardingDialog = () => {
     navigate(link);
     setOnboardingViewed('true');
   };
+  const lead =
+    VEGA_ENV === 'MAINNET'
+      ? t('Start trading on the worlds most advanced decentralised exchange.')
+      : t(
+          'Free from the risks of real trading, Fairground is a safe and fun place to try out Vega yourself with virtual assets.'
+        );
   return (
     <div className="flex flex-col py-2">
       <div className="flex gap-8">
@@ -64,7 +72,7 @@ export const OnboardingDialog = () => {
           </TradingButton>
         </div>
         <div className="w-1/2 -mr-3 flex flex-grow">
-          <GetStarted showLead />
+          <GetStarted lead={lead} />
         </div>
       </div>
     </div>

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

@@ -3,10 +3,11 @@ import { useNavigate } from 'react-router-dom';
 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, isTestEnv } from '@vegaprotocol/utils';
 import * as constants from '../constants';
 import { OnboardingDialog } from './onboarding-dialog';
-import { useEnvironment } from '@vegaprotocol/environment';
-import { isTestEnv } from '@vegaprotocol/utils';
+import { getConfig } from '@vegaprotocol/wallet';
 import { Links, Routes } from '../../pages/client-router';
 import { useGlobalStore } from '../../stores';
 
@@ -20,7 +21,11 @@ export const WelcomeDialog = () => {
     constants.ONBOARDING_VIEWED_KEY
   );
   const navigate = useNavigate();
-  const isOnboardingDialogNeeded = onBoardingViewed !== 'true' && !isTestEnv();
+  const isOnboardingDialogNeeded =
+    onBoardingViewed !== 'true' &&
+    !isTestEnv() &&
+    !isBrowserWalletInstalled() &&
+    !getConfig();
   const marketId = useGlobalStore((store) => store.marketId);
 
   if (isOnboardingDialogNeeded) {

libs/wallet/src/index.ts

@@ -12,5 +12,6 @@ export * from './vega-transaction-dialog';
 export * from './provider';
 export * from './connect-dialog';
 export * from './utils';
+export * from './storage';
 export * from './__generated__/TransactionResult';
 export * from './__generated__/WithdrawalApproval';