chore(trading): get started section for deposit (#4783)

Co-authored-by: maciek <maciek@vegaprotocol.io>
Co-authored-by: Madalina Raicu <madalina@raygroup.uk>

apps/trading/.env

@@ -16,6 +16,7 @@ NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
 NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
 NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-fairground
+NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true

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

@@ -1,18 +1,58 @@
 import { DepositContainer } from '@vegaprotocol/deposits';
-import { GetStarted } from '../../components/welcome-dialog';
 import { t } from '@vegaprotocol/i18n';
+import { Intent, TradingAnchorButton } 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="max-w-[600px] px-4 py-8 mx-auto lg:px-8">
-      <div className="lg:min-w-[700px] min-w-[300px] max-w-[700px]">
+      <h1 className="mb-6 text-4xl uppercase xl:text-5xl font-alpha calt">
-        <h1 className="text-4xl xl:text-5xl uppercase font-alpha calt">
+        {t('Deposit')}
-          {t('Deposit')}
+      </h1>
-        </h1>
+      <div className="flex flex-col gap-6">
-        <div className="mt-10">
+        <DepositContainer />
-          <DepositContainer />
+        <DepositGetStarted />
-          <GetStarted />
+      </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',
+    'bg-vega-blue-300 dark:bg-vega-blue-700',
+    'border border-vega-blue-350 dark:border-vega-blue-650'
+  );
+
+  // Dont show unless still onboarding
+  if (onboardingDismissed) {
+    return null;
+  }
+
+  return (
+    <div className="pt-6 border-t border-default">
+      <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>
     </div>
   );

apps/trading/components/sidebar/sidebar.tsx

@@ -14,9 +14,9 @@ import { Settings } from '../settings';
 import { Tooltip } from '../../components/tooltip';
 import { WithdrawContainer } from '../withdraw-container';
 import { Routes as AppRoutes } from '../../pages/client-router';
-import { GetStarted } from '../welcome-dialog';
 import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { GetStarted } from '../welcome-dialog';
 
 export enum ViewType {
   Order = 'Order',
@@ -57,7 +57,7 @@ export const Sidebar = () => {
   const setViewAsDialogOpen = useViewAsDialog((state) => state.setOpen);
   const { pubKeys } = useVegaWallet();
   return (
-    <div className="flex lg:flex-col gap-2 h-full p-1" data-testid="sidebar">
+    <div className="flex h-full p-1 lg:flex-col gap-2" data-testid="sidebar">
       <nav className={navClasses}>
         {/* sidebar options that always show */}
         <SidebarButton
@@ -197,7 +197,7 @@ export const SidebarButton = ({
 const SidebarDivider = () => {
   return (
     <div
-      className="bg-vega-clight-600 dark:bg-vega-cdark-600 w-px h-4 lg:w-4 lg:h-px"
+      className="w-px h-4 bg-vega-clight-600 dark:bg-vega-cdark-600 lg:w-4 lg:h-px"
       role="separator"
     />
   );
@@ -245,7 +245,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Deposit')}>
         <DepositContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -254,7 +253,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Withdraw')}>
         <WithdrawContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -263,7 +261,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Transfer')}>
         <TransferContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -288,7 +285,7 @@ const ContentWrapper = ({
 }) => {
   return (
     <TinyScroll
-      className="h-full overflow-auto py-4 pl-3 pr-4"
+      className="h-full py-4 pl-3 pr-4 overflow-auto"
       // panes have p-1, since sidebar is on the right make pl less to account for additional pane space
       data-testid="sidebar-content"
     >

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

@@ -75,7 +75,7 @@ describe('GetStarted', () => {
       </MemoryRouter>
     );
     checkTicks(screen.getAllByRole('listitem'));
-    expect(screen.getByRole('button', { name: 'Deposit' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Deposit' })).toBeInTheDocument();
 
     mockStep = 4;
     rerender(
@@ -87,10 +87,10 @@ describe('GetStarted', () => {
     );
     checkTicks(screen.getAllByRole('listitem'));
     expect(
-      screen.getByRole('button', { name: 'Ready to trade' })
+      screen.getByRole('link', { name: 'Ready to trade' })
     ).toBeInTheDocument();
 
-    fireEvent.click(screen.getByRole('button', { name: 'Ready to trade' }));
+    fireEvent.click(screen.getByRole('link', { name: 'Ready to trade' }));
 
     mockStep = 5;
     rerender(

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

@@ -3,13 +3,13 @@ import { t } from '@vegaprotocol/i18n';
 import {
   ExternalLink,
   Intent,
+  TradingAnchorButton,
   TradingButton,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import { useNavigate } from 'react-router-dom';
 import {
   OnboardingStep,
   useGetOnboardingStep,
@@ -24,49 +24,84 @@ interface Props {
 }
 
 const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
-  const navigate = useNavigate();
   const dismiss = useOnboardingStore((store) => store.dismiss);
   const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen);
   const marketId = useGlobalStore((store) => store.marketId);
-  const link = marketId ? Links[Routes.MARKET](marketId) : Links[Routes.HOME]();
   const openVegaWalletDialog = useVegaWalletDialogStore(
     (store) => store.openVegaWalletDialog
   );
   const setViews = useSidebar((store) => store.setViews);
-  let buttonText = t('Get started');
+
-  let onClickHandle = () => {
+  const buttonProps = {
-    openVegaWalletDialog();
+    size: 'small' as const,
+    'data-testid': 'get-started-button',
+    intent: Intent.Info,
   };
+
   if (step <= OnboardingStep.ONBOARDING_CONNECT_STEP) {
-    buttonText = t('Connect');
+    return (
+      <TradingButton {...buttonProps} onClick={() => openVegaWalletDialog()}>
+        {t('Connect')}
+      </TradingButton>
+    );
   } else if (step === OnboardingStep.ONBOARDING_DEPOSIT_STEP) {
-    buttonText = t('Deposit');
+    return (
-    onClickHandle = () => {
+      <TradingAnchorButton
-      navigate(link);
+        {...buttonProps}
-      setViews({ type: ViewType.Deposit }, Routes.MARKET);
+        href={Links[Routes.DEPOSIT]()}
-      setDialogOpen(false);
+        onClick={() => setDialogOpen(false)}
-    };
+      >
+        {t('Deposit')}
+      </TradingAnchorButton>
+    );
   } else if (step >= OnboardingStep.ONBOARDING_ORDER_STEP) {
-    buttonText = t('Ready to trade');
+    return (
-    onClickHandle = () => {
+      <TradingAnchorButton
-      navigate(link);
+        {...buttonProps}
-      setViews({ type: ViewType.Order }, Routes.MARKET);
+        href={marketId ? Links[Routes.MARKET](marketId) : Links[Routes.HOME]()}
-      dismiss();
+        onClick={() => {
-    };
+          setViews({ type: ViewType.Order }, Routes.MARKET);
+          dismiss();
+        }}
+      >
+        {t('Ready to trade')}
+      </TradingAnchorButton>
+    );
   }
 
   return (
-    <TradingButton
+    <TradingButton {...buttonProps} onClick={() => openVegaWalletDialog()}>
-      onClick={onClickHandle}
+      {t('Get started')}
-      size="small"
-      data-testid="get-started-button"
-      intent={Intent.Info}
-    >
-      {buttonText}
     </TradingButton>
   );
 };
 
+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();
@@ -89,25 +124,7 @@ export const GetStarted = ({ lead }: Props) => {
         {lead && <h2>{lead}</h2>}
         <h3 className="text-lg">{t('Get started')}</h3>
         <div>
-          <ul className="list-none">
+          <GetStartedCheckList />
-            <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>
         </div>
         <div>
           <GetStartedButton step={currentStep} />