From 346d49c37ae91735a6852565f09c8431f01e486e Mon Sep 17 00:00:00 2001 From: saml33 Date: Mon, 12 Feb 2024 14:14:47 +1100 Subject: [PATCH] add account ui tour --- components/StatusBar.tsx | 20 +++- components/TopBar.tsx | 14 ++- components/account/AccountHeroStats.tsx | 17 +++- components/account/AccountOverview.tsx | 7 +- components/account/AccountTabs.tsx | 35 ++++--- components/explore/Explore.tsx | 1 + components/shared/ManualRefresh.tsx | 22 +++-- package.json | 1 + pages/_app.tsx | 1 + store/mangoStore.ts | 10 ++ styles/globals.css | 56 +++++++++++ utils/constants.ts | 2 +- utils/tours.ts | 118 ++++++++++++++++++++++++ yarn.lock | 9 +- 14 files changed, 276 insertions(+), 37 deletions(-) create mode 100644 utils/tours.ts diff --git a/components/StatusBar.tsx b/components/StatusBar.tsx index 96267cef..509e03a9 100644 --- a/components/StatusBar.tsx +++ b/components/StatusBar.tsx @@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next' import Tps, { StatusDot } from './Tps' import DiscordIcon from './icons/DiscordIcon' import { TwitterIcon } from './icons/TwitterIcon' -import { DocumentTextIcon } from '@heroicons/react/20/solid' +import { DocumentTextIcon, MapIcon } from '@heroicons/react/20/solid' import { useEffect, useMemo, useState } from 'react' import { IDL } from '@blockworks-foundation/mango-v4' import RpcPing from './RpcPing' @@ -12,6 +12,10 @@ import mangoStore from '@store/mangoStore' import { Connection } from '@solana/web3.js' import { sumBy } from 'lodash' import useInterval from './shared/useInterval' +import { LinkButton } from './shared/Button' +import { useRouter } from 'next/router' +import { startAccountTour } from 'utils/tours' +import useMangoAccount from 'hooks/useMangoAccount' const DEFAULT_LATEST_COMMIT = { sha: '', url: '' } export const tpsAlertThreshold = 1300 @@ -92,6 +96,9 @@ const getOverallStatus = ( const StatusBar = ({ collapsed }: { collapsed: boolean }) => { const { t } = useTranslation('common') + const { mangoAccountAddress } = useMangoAccount() + const accountPageTab = mangoStore((s) => s.accountPageTab) + const router = useRouter() const [latestCommit, setLatestCommit] = useState(DEFAULT_LATEST_COMMIT) const { offchainHealth, isLoading: loadingOffchainHealth } = useOffchainServicesHealth() @@ -208,6 +215,17 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => { ) : null}
+ {router?.asPath === '/' && + !router?.query?.view && + accountPageTab === 'overview' ? ( + startAccountTour(mangoAccountAddress)} + > + + UI Tour + + ) : null} {/* {router.asPath.includes('/trade') ? ( { } = useAccountPointsAndRank(mangoAccountAddress, seasonPointsToFetchId) const { data: isWhiteListed } = useIsWhiteListed() const router = useRouter() + const { asPath, query } = useRouter() const themeData = mangoStore((s) => s.themeData) const [action, setAction] = useState<'deposit' | 'withdraw'>('deposit') @@ -81,13 +83,21 @@ const TopBar = () => { const { isUnownedAccount } = useUnownedAccount() const showUserSetup = mangoStore((s) => s.showUserSetup) const [, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY) + const [seenAccountTours] = useLocalStorageState(UI_TOURS_KEY, []) const handleCloseSetup = useCallback(() => { set((s) => { s.showUserSetup = false }) setIsOnboarded(true) - }, [setIsOnboarded]) + if ( + asPath === '/' && + !query?.view && + !seenAccountTours.includes(TOURS.ACCOUNT) + ) { + startAccountTour(mangoAccountAddress) + } + }, [setIsOnboarded, seenAccountTours, asPath, query, mangoAccountAddress]) const handleShowSetup = useCallback(() => { set((s) => { diff --git a/components/account/AccountHeroStats.tsx b/components/account/AccountHeroStats.tsx index 950b33c9..cd638d25 100644 --- a/components/account/AccountHeroStats.tsx +++ b/components/account/AccountHeroStats.tsx @@ -79,8 +79,11 @@ const AccountHeroStats = ({ accountValue }: { accountValue: number }) => { return ( <> -
-
+
+
{
-
-
+
+
{
@@ -258,6 +264,7 @@ const AccountHeroStats = ({ accountValue }: { accountValue: number }) => {