feat: add bespoke get started section for deposit page

apps/trading/client-pages/deposit/deposit.tsx

@@ -1,19 +1,62 @@
 import { DepositContainer } from '@vegaprotocol/deposits';
-import { GetStarted } from '../../components/welcome-dialog';
 import { t } from '@vegaprotocol/i18n';
+import {
+  Intent,
+  TradingAnchorButton,
+  TradingButton,
+} from '@vegaprotocol/ui-toolkit';
+import { GetStartedCheckList } from '../../components/welcome-dialog';
+import {
+  useGetOnboardingStep,
+  useOnboardingStore,
+  OnboardingStep,
+} from '../../components/welcome-dialog/use-get-onboarding-step';
+import { Links, Routes } from '../../pages/client-router';
+import classNames from 'classnames';
 
 export const Deposit = () => {
   return (
-    <div className="py-16 px-8 flex w-full justify-center">
+    <div className="flex justify-center w-full px-8 py-16">
       <div className="lg:min-w-[700px] min-w-[300px] max-w-[700px]">
-        <h1 className="text-4xl xl:text-5xl uppercase font-alpha calt">
+        <h1 className="text-4xl uppercase xl:text-5xl font-alpha calt">
           {t('Deposit')}
         </h1>
         <div className="mt-10">
           <DepositContainer />
-          <GetStarted />
+          <DepositGetStarted />
         </div>
       </div>
     </div>
   );
 };
+
+const DepositGetStarted = () => {
+  const onboardingDismissed = useOnboardingStore((store) => store.dismissed);
+  const dismiss = useOnboardingStore((store) => store.dismiss);
+  const step = useGetOnboardingStep();
+  const wrapperClasses = classNames(
+    'flex flex-col py-4 px-6 gap-4 rounded mt-6',
+    'bg-vega-blue-300 dark:bg-vega-blue-700',
+    'border border-vega-blue-350 dark:border-vega-blue-650'
+  );
+
+  if (onboardingDismissed) {
+    return null;
+  }
+
+  return (
+    <div className={wrapperClasses}>
+      <h3 className="text-lg">{t('Get started')}</h3>
+      <GetStartedCheckList />
+      {step > OnboardingStep.ONBOARDING_DEPOSIT_STEP && (
+        <TradingAnchorButton
+          href={Links[Routes.HOME]()}
+          onClick={() => dismiss()}
+          intent={Intent.Info}
+        >
+          {t('Start trading')}
+        </TradingAnchorButton>
+      )}
+    </div>
+  );
+};

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

@@ -9,7 +9,7 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import { useNavigate } from 'react-router-dom';
+import { useMatch, useNavigate } from 'react-router-dom';
 import {
   OnboardingStep,
   useGetOnboardingStep,
@@ -42,7 +42,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
   } else if (step === OnboardingStep.ONBOARDING_DEPOSIT_STEP) {
     buttonText = t('Deposit');
     onClickHandle = () => {
-      navigate(link);
+      navigate('deposit');
       setView({ type: ViewType.Deposit });
       setDialogOpen(false);
     };
@@ -67,6 +67,32 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
   );
 };
 
+export const GetStartedCheckList = () => {
+  const { pubKey } = useVegaWallet();
+  const currentStep = useGetOnboardingStep();
+  return (
+    <ul className="list-none">
+      <Step
+        step={1}
+        text={t('Connect')}
+        complete={Boolean(
+          currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
+        )}
+      />
+      <Step
+        step={2}
+        text={t('Deposit funds')}
+        complete={currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP}
+      />
+      <Step
+        step={3}
+        text={t('Open a position')}
+        complete={currentStep > OnboardingStep.ONBOARDING_ORDER_STEP}
+      />
+    </ul>
+  );
+};
+
 export const GetStarted = ({ lead }: Props) => {
   const { pubKey } = useVegaWallet();
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
@@ -90,25 +116,7 @@ export const GetStarted = ({ lead }: Props) => {
         {lead && <h2>{lead}</h2>}
         <h3 className="text-lg">{t('Get started')}</h3>
         <div>
-          <ul className="list-none">
-            <Step
-              step={1}
-              text={t('Connect')}
-              complete={Boolean(
-                currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
-              )}
-            />
-            <Step
-              step={2}
-              text={t('Deposit funds')}
-              complete={currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP}
-            />
-            <Step
-              step={3}
-              text={t('Open a position')}
-              complete={currentStep > OnboardingStep.ONBOARDING_ORDER_STEP}
-            />
-          </ul>
+          <GetStartedCheckList />
         </div>
         <div>
           <GetStartedButton step={currentStep} />