diff --git a/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts b/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts new file mode 100644 index 000000000..b2d5d18d3 --- /dev/null +++ b/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts @@ -0,0 +1,57 @@ +import { useCallback, useMemo } from 'react'; +import { isBrowserWalletInstalled, useVegaWallet } from '@vegaprotocol/wallet'; +import { depositsProvider } from '@vegaprotocol/deposits'; +import { useDataProvider } from '@vegaprotocol/data-provider'; +import { ordersWithMarketProvider } from '@vegaprotocol/orders'; +import * as Types from '@vegaprotocol/types'; + +export enum OnboardingStep { + ONBOARDING_UNKNOWN_STEP, + ONBOARDING_WALLET_STEP, + ONBOARDING_CONNECT_STEP, + ONBOARDING_DEPOSIT_STEP, + ONBOARDING_ORDER_STEP, + ONBOARDING_COMPLETE_STEP, +} + +export const useGetOnboardingStep = () => { + const { pubKey = '' } = useVegaWallet(); + const { data: depositsData } = useDataProvider({ + dataProvider: depositsProvider, + variables: { partyId: pubKey }, + skip: !pubKey, + }); + const deposits = depositsData?.some( + (item) => item.status === Types.DepositStatus.STATUS_FINALIZED + ); + const { data: ordersData } = useDataProvider({ + dataProvider: ordersWithMarketProvider, + variables: { + partyId: pubKey, + }, + skip: !pubKey, + }); + const orders = Boolean(ordersData?.length); + const resolveOnBoardingState = useCallback( + (pubKey?: string, deposits?: boolean, orders?: boolean) => { + if (!pubKey && !isBrowserWalletInstalled()) { + return OnboardingStep.ONBOARDING_WALLET_STEP; + } + if (!pubKey) { + return OnboardingStep.ONBOARDING_CONNECT_STEP; + } + if (!deposits) { + return OnboardingStep.ONBOARDING_DEPOSIT_STEP; + } + if (!orders) { + return OnboardingStep.ONBOARDING_ORDER_STEP; + } + return OnboardingStep.ONBOARDING_COMPLETE_STEP; + }, + [] + ); + return useMemo( + () => resolveOnBoardingState(pubKey, deposits, orders), + [resolveOnBoardingState, pubKey, deposits, orders] + ); +}; diff --git a/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx b/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx index c29637f9f..218db85bb 100644 --- a/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx +++ b/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx @@ -3,21 +3,19 @@ import { GetStarted } from './get-started'; import { TradingButton } from '@vegaprotocol/ui-toolkit'; 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 { Networks, useEnvironment } from '@vegaprotocol/environment'; import type { ReactNode } from 'react'; +import { useGlobalStore } from '../../stores'; export const WelcomeDialogContent = () => { const { VEGA_ENV } = useEnvironment(); - const [, setOnboardingViewed] = useLocalStorage( - constants.ONBOARDING_VIEWED_KEY - ); + + const update = useGlobalStore((store) => store.update); const navigate = useNavigate(); const browseMarkets = () => { const link = Links[Routes.MARKETS](); navigate(link); - setOnboardingViewed('true'); + update({ onBoardingDismissed: true }); }; const lead = VEGA_ENV === Networks.MAINNET @@ -57,7 +55,7 @@ export const WelcomeDialogContent = () => { {t('Browse the markets')}