diff --git a/apps/trading/client-pages/deposit/deposit.tsx b/apps/trading/client-pages/deposit/deposit.tsx
index 390d7f6ff..4ca74ab57 100644
--- a/apps/trading/client-pages/deposit/deposit.tsx
+++ b/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 (
-
+
);
};
+
+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 (
+
+
{t('Get started')}
+
+ {step > OnboardingStep.ONBOARDING_DEPOSIT_STEP && (
+ dismiss()}
+ intent={Intent.Info}
+ >
+ {t('Start trading')}
+
+ )}
+
+ );
+};
diff --git a/apps/trading/components/welcome-dialog/get-started.tsx b/apps/trading/components/welcome-dialog/get-started.tsx
index c496a5f55..a2612cbd3 100644
--- a/apps/trading/components/welcome-dialog/get-started.tsx
+++ b/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 (
+
+ OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
+ )}
+ />
+ OnboardingStep.ONBOARDING_DEPOSIT_STEP}
+ />
+ OnboardingStep.ONBOARDING_ORDER_STEP}
+ />
+
+ );
+};
+
export const GetStarted = ({ lead }: Props) => {
const { pubKey } = useVegaWallet();
const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
@@ -90,25 +116,7 @@ export const GetStarted = ({ lead }: Props) => {
{lead &&
{lead}
}
{t('Get started')}
-
- OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
- )}
- />
- OnboardingStep.ONBOARDING_DEPOSIT_STEP}
- />
- OnboardingStep.ONBOARDING_ORDER_STEP}
- />
-
+