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 ( -
+
-

+

{t('Deposit')}

- +
); }; + +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 ( + + ); +}; + 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')}

- +