From e5b74a141cd288b7e39199a91a894be2c0f6f06e Mon Sep 17 00:00:00 2001 From: maciek Date: Wed, 16 Aug 2023 17:03:11 +0200 Subject: [PATCH] feat: improve get started steps interactions --- apps/governance/.env | 2 - apps/governance/.env.capsule | 5 +- apps/governance/.env.devnet | 5 +- apps/governance/.env.mainnet | 4 +- apps/governance/.env.mainnet-mirror | 4 +- apps/governance/.env.stagnet1 | 5 +- apps/governance/.env.testnet | 5 +- apps/governance/.env.validators-testnet | 5 +- apps/trading-e2e/.env | 2 +- apps/trading/.env | 3 +- apps/trading/.env.capsule | 2 + apps/trading/.env.devnet | 2 + apps/trading/.env.mainnet | 2 + apps/trading/.env.mainnet-mirror | 2 + apps/trading/.env.stagnet1 | 4 +- apps/trading/.env.testnet | 4 +- apps/trading/.env.validators-testnet | 3 + apps/trading/components/constants.ts | 1 + .../components/welcome-dialog/get-started.tsx | 118 ++++++++++++++---- .../welcome-dialog/use-get-onboarding-step.ts | 57 +++++++++ .../welcome-dialog/welcome-dialog-content.tsx | 12 +- .../welcome-dialog/welcome-dialog.tsx | 21 ++-- apps/trading/stores/global.ts | 2 + nx.json | 3 +- 24 files changed, 215 insertions(+), 58 deletions(-) create mode 100644 apps/trading/components/welcome-dialog/use-get-onboarding-step.ts diff --git a/apps/governance/.env b/apps/governance/.env index 266d00b1b..367b8fcda 100644 --- a/apps/governance/.env +++ b/apps/governance/.env @@ -22,8 +22,6 @@ NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/ NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket -NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn -NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet #Test configuration variables CYPRESS_FAIRGROUND=false diff --git a/apps/governance/.env.capsule b/apps/governance/.env.capsule index b8814b856..4c371f3e2 100644 --- a/apps/governance/.env.capsule +++ b/apps/governance/.env.capsule @@ -19,6 +19,9 @@ NX_DELEGATIONS_PAGINATION=50 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz NX_VEGA_REST_URL=http://localhost:3008/api/v2/ +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet + NX_TENDERMINT_URL=http://localhost:26617 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket @@ -26,4 +29,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket CYPRESS_FAIRGROUND=false # Cosmic elevator flags -NX_SUCCESSOR_MARKETS=false \ No newline at end of file +NX_SUCCESSOR_MARKETS=false diff --git a/apps/governance/.env.devnet b/apps/governance/.env.devnet index 51aa96100..71625ea77 100644 --- a/apps/governance/.env.devnet +++ b/apps/governance/.env.devnet @@ -14,8 +14,11 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou NX_VEGA_REST_URL=https://api.n00.devnet1.vega.xyz/api/v2/ NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996 +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet + NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/ NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket # Cosmic elevator flags -NX_SUCCESSOR_MARKETS=true \ No newline at end of file +NX_SUCCESSOR_MARKETS=true diff --git a/apps/governance/.env.mainnet b/apps/governance/.env.mainnet index 9ac987b42..7a2e15d5c 100644 --- a/apps/governance/.env.mainnet +++ b/apps/governance/.env.mainnet @@ -14,9 +14,11 @@ NX_DELEGATIONS_PAGINATION=50 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-k8s.ops.vega.xyz NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json NX_VEGA_REST_URL=https://api.vega.community/api/v2/ +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet NX_TENDERMINT_URL=https://be.vega.community NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket # Cosmic elevator flags -NX_SUCCESSOR_MARKETS=false \ No newline at end of file +NX_SUCCESSOR_MARKETS=false diff --git a/apps/governance/.env.mainnet-mirror b/apps/governance/.env.mainnet-mirror index 22fd23a50..a847576e3 100644 --- a/apps/governance/.env.mainnet-mirror +++ b/apps/governance/.env.mainnet-mirror @@ -13,9 +13,11 @@ NX_DELEGATIONS_PAGINATION=50 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-mirror-k8s.ops.vega.xyz NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json NX_VEGA_REST_URL=https://api.mainnet-mirror.vega.rocks/api/v2/ +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket # Cosmic elevator flags -NX_SUCCESSOR_MARKETS=false \ No newline at end of file +NX_SUCCESSOR_MARKETS=false diff --git a/apps/governance/.env.stagnet1 b/apps/governance/.env.stagnet1 index 53f1e733f..a83edd54e 100644 --- a/apps/governance/.env.stagnet1 +++ b/apps/governance/.env.stagnet1 @@ -10,8 +10,11 @@ NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/ +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet + NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket # Cosmic elevator flags -NX_SUCCESSOR_MARKETS=true \ No newline at end of file +NX_SUCCESSOR_MARKETS=true diff --git a/apps/governance/.env.testnet b/apps/governance/.env.testnet index 0a817b1d2..2e64b5662 100644 --- a/apps/governance/.env.testnet +++ b/apps/governance/.env.testnet @@ -15,8 +15,11 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou NX_VEGA_REST_URL=https://api.n07.testnet.vega.xyz/api/v2/ NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996 +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet + NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket # Cosmic elevator flags -NX_SUCCESSOR_MARKETS=true \ No newline at end of file +NX_SUCCESSOR_MARKETS=true diff --git a/apps/governance/.env.validators-testnet b/apps/governance/.env.validators-testnet index 0064e8152..17e335022 100644 --- a/apps/governance/.env.validators-testnet +++ b/apps/governance/.env.validators-testnet @@ -12,8 +12,11 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou NX_VEGA_REST_URL=https://api-validators-testnet.vega.rocks/api/v2/ NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996 +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet + NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega. # Cosmic elevator flags -NX_SUCCESSOR_MARKETS=false \ No newline at end of file +NX_SUCCESSOR_MARKETS=false diff --git a/apps/trading-e2e/.env b/apps/trading-e2e/.env index f6970c049..a575afdea 100644 --- a/apps/trading-e2e/.env +++ b/apps/trading-e2e/.env @@ -36,4 +36,4 @@ CYPRESS_VEGA_WALLET_API_TOKEN= # Cosmic elevator flags (MUST be doubled with CYPRESS_ prefix) NX_SUCCESSOR_MARKETS=true -CYPRESS_NX_SUCCESSOR_MARKETS=true \ No newline at end of file +CYPRESS_NX_SUCCESSOR_MARKETS=true diff --git a/apps/trading/.env b/apps/trading/.env index bd619e109..21058b8bb 100644 --- a/apps/trading/.env +++ b/apps/trading/.env @@ -12,8 +12,7 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72 -NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn -NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet + # Cosmic elevator flags NX_SUCCESSOR_MARKETS=true diff --git a/apps/trading/.env.capsule b/apps/trading/.env.capsule index d2a3ef8be..149f153bd 100644 --- a/apps/trading/.env.capsule +++ b/apps/trading/.env.capsule @@ -12,6 +12,8 @@ NX_VEGA_WALLET_URL=http://localhost:1789 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/test/announcements.json +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet NX_ETH_LOCAL_PROVIDER_URL=http://localhost:8545/ NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supply green clown session" diff --git a/apps/trading/.env.devnet b/apps/trading/.env.devnet index 52112f1bf..e4c6958a0 100644 --- a/apps/trading/.env.devnet +++ b/apps/trading/.env.devnet @@ -13,6 +13,8 @@ NX_VEGA_DOCS_URL=# NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet # Cosmic elevator flags NX_SUCCESSOR_MARKETS=true diff --git a/apps/trading/.env.mainnet b/apps/trading/.env.mainnet index 134a47026..708a34153 100644 --- a/apps/trading/.env.mainnet +++ b/apps/trading/.env.mainnet @@ -13,6 +13,8 @@ NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports NX_VEGA_CONSOLE_URL=https://console.vega.xyz +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-mainnet/codfcglpplgmmlokgilfkpcjnmkbfiel +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet-mainnet # TAG name of the current app version - TODO: bump to the latest upon release NX_APP_VERSION=v0.20.21-core-0.71.6 diff --git a/apps/trading/.env.mainnet-mirror b/apps/trading/.env.mainnet-mirror index a68b8e1e4..e28f506fe 100644 --- a/apps/trading/.env.mainnet-mirror +++ b/apps/trading/.env.mainnet-mirror @@ -13,6 +13,8 @@ NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports NX_VEGA_CONSOLE_URL=https://console.mainnet-mirror.vega.rocks +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-mainnet/codfcglpplgmmlokgilfkpcjnmkbfiel +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet-mainnet # TAG name of the current app version - TODO: bump to the latest upon release NX_APP_VERSION=v0.20.19-core-0.71.6 diff --git a/apps/trading/.env.stagnet1 b/apps/trading/.env.stagnet1 index 7a75a6ee0..91425161b 100644 --- a/apps/trading/.env.stagnet1 +++ b/apps/trading/.env.stagnet1 @@ -13,9 +13,11 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet # Cosmic elevator flags NX_SUCCESSOR_MARKETS=true NX_STOP_ORDERS=true # NX_ICEBERG_ORDERS -# NX_PRODUCT_PERPETUALS \ No newline at end of file +# NX_PRODUCT_PERPETUALS diff --git a/apps/trading/.env.testnet b/apps/trading/.env.testnet index 5958b71b6..bf23f97a2 100644 --- a/apps/trading/.env.testnet +++ b/apps/trading/.env.testnet @@ -14,6 +14,8 @@ NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json 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/pl/firefox/addon/vega-wallet # Cosmic elevator flags NX_SUCCESSOR_MARKETS=true @@ -22,4 +24,4 @@ NX_ICEBERG_ORDERS=true # NX_PRODUCT_PERPETUALS NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz -NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket \ No newline at end of file +NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket diff --git a/apps/trading/.env.validators-testnet b/apps/trading/.env.validators-testnet index 2461252a1..11f5f217e 100644 --- a/apps/trading/.env.validators-testnet +++ b/apps/trading/.env.validators-testnet @@ -15,6 +15,9 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports NX_VEGA_CONSOLE_URL=https://trading.validators-testnet.vega.rocks +NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn +NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet + # Cosmic elevator flags NX_SUCCESSOR_MARKETS=false NX_STOP_ORDERS=false diff --git a/apps/trading/components/constants.ts b/apps/trading/components/constants.ts index f1168e6ce..c1a82cbfa 100644 --- a/apps/trading/components/constants.ts +++ b/apps/trading/components/constants.ts @@ -2,6 +2,7 @@ import { t } from '@vegaprotocol/i18n'; export const THROTTLE_UPDATE_TIME = 500; export const ONBOARDING_VIEWED_KEY = 'vega_onboarding_viewed'; +export const STARTED_STEPS_KEY = 'vega_started_steps_viewed'; export const MAINNET_WELCOME_HEADER = t( 'Trade cash settled futures on the fully decentralised Vega network.' ); diff --git a/apps/trading/components/welcome-dialog/get-started.tsx b/apps/trading/components/welcome-dialog/get-started.tsx index 3889a7662..c74c8134f 100644 --- a/apps/trading/components/welcome-dialog/get-started.tsx +++ b/apps/trading/components/welcome-dialog/get-started.tsx @@ -1,36 +1,88 @@ import classNames from 'classnames'; import { t } from '@vegaprotocol/i18n'; -import { ExternalLink, Intent, TradingButton } from '@vegaprotocol/ui-toolkit'; import { - useVegaWallet, - useVegaWalletDialogStore, - isBrowserWalletInstalled, -} from '@vegaprotocol/wallet'; + ExternalLink, + Intent, + TradingButton, + VegaIcon, + VegaIconNames, +} from '@vegaprotocol/ui-toolkit'; +import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet'; import { Networks, useEnvironment } from '@vegaprotocol/environment'; -import { useLocalStorage } from '@vegaprotocol/react-helpers'; -import * as constants from '../constants'; +import { + OnboardingStep, + useGetOnboardingStep, +} from './use-get-onboarding-step'; +import { useNavigate } from 'react-router-dom'; +import { Links, Routes } from '../../pages/client-router'; +import { useGlobalStore } from '../../stores'; +import { useSidebar, ViewType } from '../sidebar'; interface Props { lead?: string; } +const GetStartedButton = ({ step }: { step: OnboardingStep }) => { + const navigate = useNavigate(); + + const update = useGlobalStore((store) => store.update); + const marketId = useGlobalStore((store) => store.marketId); + const openVegaWalletDialog = useVegaWalletDialogStore( + (store) => store.openVegaWalletDialog + ); + const setView = useSidebar((store) => store.setView); + let buttonText = t('Get started'); + let onClickHandle = () => { + openVegaWalletDialog(); + }; + if (step === OnboardingStep.ONBOARDING_WALLET_STEP) { + buttonText = t('Get Vega Wallet'); + } else if (step === OnboardingStep.ONBOARDING_CONNECT_STEP) { + buttonText = t('Connect'); + } else if (step === OnboardingStep.ONBOARDING_DEPOSIT_STEP) { + buttonText = t('Deposit'); + onClickHandle = () => { + const link = Links[Routes.DEPOSIT](); + navigate(link); + update({ onBoardingDismissed: true }); + }; + } else if (step === OnboardingStep.ONBOARDING_ORDER_STEP) { + buttonText = t('Trade'); + onClickHandle = () => { + const link = marketId + ? Links[Routes.MARKET](marketId) + : Links[Routes.HOME](); + navigate(link); + setView({ type: ViewType.Order }); + update({ onBoardingDismissed: true }); + }; + } + + return ( + + {buttonText} + + ); +}; + export const GetStarted = ({ lead }: Props) => { const { pubKey } = useVegaWallet(); const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment(); const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz'; - const [, setOnboardingViewed] = useLocalStorage( - constants.ONBOARDING_VIEWED_KEY - ); + const currentStep = useGetOnboardingStep(); const openVegaWalletDialog = useVegaWalletDialogStore( (store) => store.openVegaWalletDialog ); - const onButtonClick = () => { - openVegaWalletDialog(); - setOnboardingViewed('true'); - }; + const getStartedNeeded = + Number(currentStep || 0) < OnboardingStep.ONBOARDING_COMPLETE_STEP; const wrapperClasses = classNames( 'flex flex-col py-4 px-6 gap-4 rounded', @@ -39,27 +91,41 @@ export const GetStarted = ({ lead }: Props) => { { 'mt-8': !lead } ); - if (!pubKey && !isBrowserWalletInstalled()) { + if (!pubKey || getStartedNeeded) { return (
{lead &&

{lead}

}

{t('Get started')}

    -
  • {t('Get a Vega wallet')}
    • -
  • {t('Connect')}
    • -
  • {t('Deposit funds')}
    • -
  • {t('Open a position')}
    • +
  • + {t('Get a Vega wallet')}{' '} + {currentStep > OnboardingStep.ONBOARDING_WALLET_STEP && ( + + )} +
    • +
  • + {t('Connect')}{' '} + {currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP && ( + + )} +
    • +
  • + {t('Deposit funds')}{' '} + {currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP && ( + + )} +
    • +
  • + {t('Open a position')}{' '} + {currentStep > OnboardingStep.ONBOARDING_ORDER_STEP && ( + + )} +
- - {t('Get started')} - +
{VEGA_ENV === Networks.MAINNET && (

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')}

-
+
diff --git a/apps/trading/components/welcome-dialog/welcome-dialog.tsx b/apps/trading/components/welcome-dialog/welcome-dialog.tsx index c1b6670bc..1007c82cb 100644 --- a/apps/trading/components/welcome-dialog/welcome-dialog.tsx +++ b/apps/trading/components/welcome-dialog/welcome-dialog.tsx @@ -2,31 +2,34 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import { Dialog, Intent } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/i18n'; -import { useLocalStorage } from '@vegaprotocol/react-helpers'; import { useEnvironment } from '@vegaprotocol/environment'; -import { isBrowserWalletInstalled } from '@vegaprotocol/wallet'; -import * as constants from '../constants'; import { WelcomeDialogContent } from './welcome-dialog-content'; -import { getConfig } from '@vegaprotocol/wallet'; import { Links, Routes } from '../../pages/client-router'; import { useGlobalStore } from '../../stores'; +import { + useGetOnboardingStep, + OnboardingStep, +} from './use-get-onboarding-step'; export const WelcomeDialog = () => { const { VEGA_ENV } = useEnvironment(); - const [onBoardingViewed, setOnboardingViewed] = useLocalStorage( - constants.ONBOARDING_VIEWED_KEY - ); + + const update = useGlobalStore((store) => store.update); + const dismissed = useGlobalStore((store) => store.onBoardingDismissed); + const currentStep = useGetOnboardingStep(); + const navigate = useNavigate(); const isOnboardingDialogNeeded = - onBoardingViewed !== 'true' && !isBrowserWalletInstalled() && !getConfig(); + Number(currentStep || 0) < OnboardingStep.ONBOARDING_COMPLETE_STEP && + !dismissed; const marketId = useGlobalStore((store) => store.marketId); const onClose = () => { - setOnboardingViewed('true'); const link = marketId ? Links[Routes.MARKET](marketId) : Links[Routes.HOME](); navigate(link); + update({ onBoardingDismissed: true }); }; const title = ( diff --git a/apps/trading/stores/global.ts b/apps/trading/stores/global.ts index e5b69fd04..e38c29057 100644 --- a/apps/trading/stores/global.ts +++ b/apps/trading/stores/global.ts @@ -4,6 +4,7 @@ import produce from 'immer'; interface GlobalStore { marketId: string | null; + onBoardingDismissed: boolean; update: (store: Partial>) => void; } @@ -14,6 +15,7 @@ interface PageTitleStore { export const useGlobalStore = create()((set) => ({ marketId: LocalStorage.getItem('marketId') || null, + onBoardingDismissed: false, update: (newState) => { set( produce((state: GlobalStore) => { diff --git a/nx.json b/nx.json index 0cc81acee..d9f27667e 100644 --- a/nx.json +++ b/nx.json @@ -21,8 +21,7 @@ "echo $NX_TENDERMINT_URL", "echo $NX_TENDERMINT_WEBSOCKET_URL", "echo $NX_ETHEREUM_PROVIDER_URL" - ], - "url": "https://cloud.nx.app" + ] } } },