From 7ecc5353a12d9877a0057ac24348fd5c48ea3301 Mon Sep 17 00:00:00 2001 From: onmax Date: Mon, 31 Jan 2022 16:05:19 +0100 Subject: [PATCH] steps are reactive --- src/components/TourLargeScreenManager.vue | 6 +- ...tars.vue => NimiqLogoOutlineWithStars.vue} | 0 src/components/layouts/Network.vue | 4 +- .../modals/DiscoverTheNimiqWalletModal.vue | 6 +- .../tour/onboarding/01_FirstAddressStep.ts | 88 +++++++-------- .../tour/onboarding/02_TransactionListStep.ts | 102 ++++++++---------- .../onboarding/03_FirstTransactionStep.ts | 20 ++-- .../tour/onboarding/04_BitcoinAddressStep.ts | 16 +-- .../tour/onboarding/05_WalletBalanceStep.ts | 14 ++- .../tour/onboarding/06_0_BackupAlertStep.ts | 4 +- src/lib/tour/onboarding/06_1_MenuIconStep.ts | 8 +- .../07_1_BackupOptionNotLargeScreenStep.ts | 8 +- .../07_2_BackupOptionLargeScreenStep.ts | 4 +- .../tour/onboarding/07_AccountOptionsStep.ts | 12 ++- .../tour/onboarding/08_OnboardingCompleted.ts | 26 +++-- src/lib/tour/onboarding/index.ts | 4 +- src/lib/tour/types.ts | 3 +- 17 files changed, 164 insertions(+), 161 deletions(-) rename src/components/icons/{GreenNimiqLogoOutlineWithStars.vue => NimiqLogoOutlineWithStars.vue} (100%) diff --git a/src/components/TourLargeScreenManager.vue b/src/components/TourLargeScreenManager.vue index 28d3667eb..dbeae3803 100644 --- a/src/components/TourLargeScreenManager.vue +++ b/src/components/TourLargeScreenManager.vue @@ -55,6 +55,9 @@ export default defineComponent({ original.style.visibility = 'initial'; } + // at some steps, a modal will be openened in the tour and we still need to show the tour + // manager to the user, therefore, we need to duplicate the manager and set it to the body + // positionated over the modal function _duplicateManager() { _removeClonedManager(); const original = $originalManager.value!; @@ -69,8 +72,7 @@ export default defineComponent({ } manager.style.position = 'absolute'; - // manager.style.top = `${original.offsetTop}px`; // FIXME: it is getting 114px instead of 98px - manager.style.top = '98px'; + manager.style.top = `${original.offsetTop - 16}px`; // TODO Test this with other announcements manager.style.left = `${original.offsetLeft}px`; manager.style.width = `${original.offsetWidth}px`; manager.style.height = `${original.offsetHeight}px`; diff --git a/src/components/icons/GreenNimiqLogoOutlineWithStars.vue b/src/components/icons/NimiqLogoOutlineWithStars.vue similarity index 100% rename from src/components/icons/GreenNimiqLogoOutlineWithStars.vue rename to src/components/icons/NimiqLogoOutlineWithStars.vue diff --git a/src/components/layouts/Network.vue b/src/components/layouts/Network.vue index 5c775e6a3..8a661fcb7 100644 --- a/src/components/layouts/Network.vue +++ b/src/components/layouts/Network.vue @@ -49,8 +49,8 @@ const LOCALSTORAGE_KEY = 'network-info-dismissed'; export default defineComponent({ setup(props, context) { - const showNetworkInfo = ref(true // TOOD Remove me - || !window.localStorage.getItem(LOCALSTORAGE_KEY) || !!context.root.$route.params.showNetworkInfo); + const showNetworkInfo = ref( + !window.localStorage.getItem(LOCALSTORAGE_KEY) || !!context.root.$route.params.showNetworkInfo); function onNetworkInfoClosed() { window.localStorage.setItem(LOCALSTORAGE_KEY, '1'); diff --git a/src/components/modals/DiscoverTheNimiqWalletModal.vue b/src/components/modals/DiscoverTheNimiqWalletModal.vue index 88e2fb82e..8bc34e1fb 100644 --- a/src/components/modals/DiscoverTheNimiqWalletModal.vue +++ b/src/components/modals/DiscoverTheNimiqWalletModal.vue @@ -15,7 +15,7 @@
- +

{{ $t('Discover the Nimiq Wallet!') }}

{{ $t('It\'s free, does not collect data and is controlled by no one but you.') }} @@ -43,7 +43,7 @@ import { PageHeader } from '@nimiq/vue-components'; import { defineComponent } from '@vue/composition-api'; import { TourName } from '@/lib/tour'; import { Languages } from '../../i18n/i18n-setup'; -import GreenNimiqLogoOutlineWithStars from '../icons/GreenNimiqLogoOutlineWithStars.vue'; +import NimiqLogoOutlineWithStars from '../icons/NimiqLogoOutlineWithStars.vue'; import CaretRightIcon from '../icons/CaretRightIcon.vue'; import Modal from './Modal.vue'; @@ -73,7 +73,7 @@ export default defineComponent({ components: { Modal, PageHeader, - GreenNimiqLogoOutlineWithStars, + NimiqLogoOutlineWithStars, CaretRightIcon, }, }); diff --git a/src/lib/tour/onboarding/01_FirstAddressStep.ts b/src/lib/tour/onboarding/01_FirstAddressStep.ts index a9afbc1ea..e1a745308 100644 --- a/src/lib/tour/onboarding/01_FirstAddressStep.ts +++ b/src/lib/tour/onboarding/01_FirstAddressStep.ts @@ -1,11 +1,11 @@ import { CryptoCurrency } from '@/lib/Constants'; import { useAccountStore } from '@/stores/Account'; import { useAddressStore } from '@/stores/Address'; -import { GetStepFnArgs, OnboardingTourStep, TourStep, WalletHTMLElements } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep, WalletHTMLElements } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; export function getFirstAddressStep( - { isSmallScreen, isANewUser, root }: GetStepFnArgs): TourStep { + { isSmallScreen, isANewUser, root }: OnboardingGetStepFnArgs): TourStep { const created = () => { const { setActiveCurrency } = useAccountStore(); const { addressInfos, selectAddress } = useAddressStore(); @@ -43,63 +43,51 @@ export function getFirstAddressStep( ], }; - if (isSmallScreen.value) { - return { - path, - tooltip: { - target: `${WalletHTMLElements.ACCOUNT_OVERVIEW_ADDRESS_LIST} .address-button .identicon img`, - content: getOnboardingTexts(OnboardingTourStep.FIRST_ADDRESS, isANewUser).default, - params: { - placement: 'bottom-start', - }, - }, - lifecycle: { - created, - mounted: ({ goToNextStep }) => { - if (!isSmallScreen.value) { - return undefined; - } - - // Listener for the first address button only for mobile - - const addressButton = document - .querySelector('.address-list > .address-button') as HTMLButtonElement; - - let addressClicked = false; - const onClick = (e: MouseEvent) => { - addressClicked = true; - goToNextStep(); - e.preventDefault(); - e.stopPropagation(); - }; - - addressButton!.addEventListener('click', onClick, { once: true, capture: true }); - - return async (args) => { - if (!args?.ending && !addressClicked && root.$route.path === path) { - addressButton!.click(); - await root.$nextTick(); - } - addressButton!.removeEventListener('click', onClick, true); - }; - }, - }, - ui, - } as TourStep; - } - - // Not mobile return { path, tooltip: { - target: `${WalletHTMLElements.ADDRESS_OVERVIEW_ACTIVE_ADDRESS} .identicon`, + get target() { + return isSmallScreen.value + ? `${WalletHTMLElements.ACCOUNT_OVERVIEW_ADDRESS_LIST} .address-button .identicon img` + : `${WalletHTMLElements.ADDRESS_OVERVIEW_ACTIVE_ADDRESS} .identicon`; + }, content: getOnboardingTexts(OnboardingTourStep.FIRST_ADDRESS, isANewUser).default, params: { - placement: 'left-start', + get placement() { + return isSmallScreen.value ? 'bottom-start' : 'left-start'; + }, }, }, lifecycle: { created, + mounted: ({ goToNextStep }) => { + if (!isSmallScreen.value) { + return undefined; + } + + // Listener for the first address button only for mobile + + const addressButton = document + .querySelector('.address-list > .address-button') as HTMLButtonElement; + + let addressClicked = false; + const onClick = (e: MouseEvent) => { + addressClicked = true; + goToNextStep(); + e.preventDefault(); + e.stopPropagation(); + }; + + addressButton!.addEventListener('click', onClick, { once: true, capture: true }); + + return async (args) => { + if (!args?.ending && !addressClicked && root.$route.path === path) { + addressButton!.click(); + await root.$nextTick(); + } + addressButton!.removeEventListener('click', onClick, true); + }; + }, }, ui, } as TourStep; diff --git a/src/lib/tour/onboarding/02_TransactionListStep.ts b/src/lib/tour/onboarding/02_TransactionListStep.ts index 25c044436..72d323338 100644 --- a/src/lib/tour/onboarding/02_TransactionListStep.ts +++ b/src/lib/tour/onboarding/02_TransactionListStep.ts @@ -1,68 +1,18 @@ import { useTransactionsStore } from '@/stores/Transactions'; import { WalletHTMLElements } from '..'; -import { GetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; export function getTransactionListStep( - { root, steps, isSmallScreen, isANewUser }: GetStepFnArgs): TourStep { - const txs = useTransactionsStore().state.transactions; - const startsWithNoTransactions = Object.values(txs).length === 0; + { isSmallScreen, isANewUser }: OnboardingGetStepFnArgs): TourStep { + const txsLen = () => Object.values(useTransactionsStore().state.transactions).length; - const tooltipWhenNoTx: TourStep['tooltip'] = { - target: isSmallScreen.value - ? `${WalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} > .empty-state h2` - : WalletHTMLElements.ADDRESS_OVERVIEW, - content: getOnboardingTexts(OnboardingTourStep.TRANSACTIONS_LIST, isANewUser).default, - params: { - placement: isSmallScreen.value ? 'top' : 'left', - }, - }; - const tooltipWhenAtLeastOneTx: TourStep['tooltip'] = { - target: isSmallScreen.value - ? '.vue-recycle-scroller__item-wrapper' - : WalletHTMLElements.ADDRESS_OVERVIEW, - content: getOnboardingTexts(OnboardingTourStep.TRANSACTIONS_LIST, isANewUser).alternative || [], - params: { - placement: isSmallScreen.value ? 'bottom' : 'left', - }, - }; - - let userHasClicked = false; const highlightButton = (highlight: boolean) => { - if (userHasClicked) return; - const receiveNim = document .querySelector(WalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_RECEIVE_FREE_NIM) as HTMLButtonElement; if (!receiveNim) return; receiveNim.classList[highlight ? 'add' : 'remove']('highlighted'); }; - const mounted = () => { - const { transactions } = useTransactionsStore().state; - - if (Object.values(transactions.value || []).length === 0) { - const unwatch = root.$watch(() => txs, () => { - if (!Object.values(txs).length) { - unwatch(); - return; - } - - userHasClicked = true; - - const buyNimBtn = document - .querySelector(`${WalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} a button`) as HTMLButtonElement; - buyNimBtn.disabled = true; - - // Once the user has at least one transaction, step TRANSACTIONS_LIST is modified - steps[OnboardingTourStep.TRANSACTIONS_LIST]!.tooltip = tooltipWhenAtLeastOneTx; - steps[OnboardingTourStep.TRANSACTIONS_LIST]!.ui.isNextStepDisabled = false; - steps[OnboardingTourStep.TRANSACTIONS_LIST]!.lifecycle = {}; - - unwatch(); - }); - } - highlightButton(true); - return () => highlightButton(false); - }; const ui: TourStep['ui'] = { fadedElements: [ @@ -92,13 +42,49 @@ export function getTransactionListStep( WalletHTMLElements.BUTTON_SIDEBAR_SELL, WalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_BUY, ], - isNextStepDisabled: startsWithNoTransactions, }; return { - path: isSmallScreen.value ? '/transactions' : '/', - tooltip: startsWithNoTransactions ? tooltipWhenNoTx : tooltipWhenAtLeastOneTx, - lifecycle: startsWithNoTransactions ? { mounted } : {}, - ui, + get path() { + return isSmallScreen.value ? '/transactions' : '/'; + }, + tooltip: { + get target() { + if (txsLen() > 0) { + return isSmallScreen.value + ? `${WalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} .vue-recycle-scroller__item-wrapper` + : WalletHTMLElements.ADDRESS_OVERVIEW; + } + return isSmallScreen.value + ? `${WalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} > .empty-state h2` + : WalletHTMLElements.ADDRESS_OVERVIEW; + }, + get content() { + return txsLen() > 0 + ? getOnboardingTexts(OnboardingTourStep.TRANSACTION_LIST, isANewUser).alternative || [] + : getOnboardingTexts(OnboardingTourStep.TRANSACTION_LIST, isANewUser).default || []; + }, + params: { + get placement() { + if (txsLen() > 0) { + return isSmallScreen.value ? 'bottom' : 'left'; + } + return isSmallScreen.value ? 'top' : 'left'; + }, + }, + }, + lifecycle: { + mounted: () => { + if (txsLen() > 0) return undefined; + highlightButton(true); + return () => highlightButton(false); + }, + }, + get ui() { + return { + ...ui, + isNextStepDisabled: txsLen() === 0, + }; + }, }; } diff --git a/src/lib/tour/onboarding/03_FirstTransactionStep.ts b/src/lib/tour/onboarding/03_FirstTransactionStep.ts index 4b047e0ad..a14218697 100644 --- a/src/lib/tour/onboarding/03_FirstTransactionStep.ts +++ b/src/lib/tour/onboarding/03_FirstTransactionStep.ts @@ -1,8 +1,8 @@ import { WalletHTMLElements } from '..'; -import { GetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; -export function getFirstTransactionStep({ isSmallScreen, isANewUser }: GetStepFnArgs): TourStep { +export function getFirstTransactionStep({ isSmallScreen, isANewUser }: OnboardingGetStepFnArgs): TourStep { const ui: TourStep['ui'] = { fadedElements: [ WalletHTMLElements.SIDEBAR_TESTNET, @@ -31,14 +31,20 @@ export function getFirstTransactionStep({ isSmallScreen, isANewUser }: GetStepFn }; return { - path: isSmallScreen.value ? '/transactions' : '/', + get path() { + return isSmallScreen.value ? '/transactions' : '/'; + }, tooltip: { - target: isSmallScreen.value - ? `${WalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} .transaction > .identicon` - : `${WalletHTMLElements.ADDRESS_OVERVIEW} .vue-recycle-scroller__item-view:nth-child(2)`, + get target() { + return isSmallScreen.value + ? `${WalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} .transaction > .identicon` + : `${WalletHTMLElements.ADDRESS_OVERVIEW} .vue-recycle-scroller__item-view:nth-child(2)`; + }, content: getOnboardingTexts(OnboardingTourStep.FIRST_TRANSACTION, isANewUser).default, params: { - placement: isSmallScreen.value ? 'bottom-start' : 'left', + get placement() { + return isSmallScreen.value ? 'bottom-start' : 'left'; + }, }, }, ui, diff --git a/src/lib/tour/onboarding/04_BitcoinAddressStep.ts b/src/lib/tour/onboarding/04_BitcoinAddressStep.ts index 6e2a83fea..cb252158d 100644 --- a/src/lib/tour/onboarding/04_BitcoinAddressStep.ts +++ b/src/lib/tour/onboarding/04_BitcoinAddressStep.ts @@ -1,8 +1,8 @@ -import { GetStepFnArgs, OnboardingTourStep, TourStep, WalletHTMLElements } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep, WalletHTMLElements } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; export function getBitcoinAddressStep( - { isSmallScreen, isMediumScreen, isANewUser }: GetStepFnArgs): TourStep { + { isLargeScreen, isANewUser }: OnboardingGetStepFnArgs): TourStep { const ui: TourStep['ui'] = { fadedElements: [ WalletHTMLElements.SIDEBAR_TESTNET, @@ -33,12 +33,16 @@ export function getBitcoinAddressStep( return { path: '/', tooltip: { - target: `.account-overview .bitcoin-account ${isSmallScreen.value || isMediumScreen.value - ? '> .bitcoin-account-item > svg' : ''}`, + get target() { + return `.account-overview .bitcoin-account ${!isLargeScreen.value + ? '> .bitcoin-account-item > svg' : ''}`; + }, content: getOnboardingTexts(OnboardingTourStep.BITCOIN_ADDRESS, isANewUser).default, params: { - placement: isSmallScreen.value || isMediumScreen.value ? 'top-start' : 'right-end', - // TODO Add margin in large screens + get placement() { + // TODO Add margin in large screens + return !isLargeScreen.value ? 'bottom-start' : 'left'; + }, }, }, ui, diff --git a/src/lib/tour/onboarding/05_WalletBalanceStep.ts b/src/lib/tour/onboarding/05_WalletBalanceStep.ts index 2e1aab6cb..a07d8a7eb 100644 --- a/src/lib/tour/onboarding/05_WalletBalanceStep.ts +++ b/src/lib/tour/onboarding/05_WalletBalanceStep.ts @@ -1,7 +1,7 @@ -import { GetStepFnArgs, OnboardingTourStep, TourStep, WalletHTMLElements } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep, WalletHTMLElements } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; -export function getWalletBalanceStep({ isSmallScreen, isANewUser }: GetStepFnArgs): TourStep { +export function getWalletBalanceStep({ isSmallScreen, isANewUser }: OnboardingGetStepFnArgs): TourStep { const ui: TourStep['ui'] = { fadedElements: [ WalletHTMLElements.SIDEBAR_TESTNET, @@ -32,11 +32,15 @@ export function getWalletBalanceStep({ isSmallScreen, isANewUser }: GetStepFnArg return { path: '/', tooltip: { - target: `${WalletHTMLElements.ACCOUNT_OVERVIEW_BALANCE} - ${isSmallScreen.value ? '.amount' : '.balance-distribution'}`, + get target() { + return `${WalletHTMLElements.ACCOUNT_OVERVIEW_BALANCE} + ${isSmallScreen.value ? '.amount' : '.balance-distribution'}`; + }, content: getOnboardingTexts(OnboardingTourStep.WALLET_BALANCE, isANewUser).default, params: { - placement: isSmallScreen.value ? 'bottom' : 'right', + get placement() { + return isSmallScreen.value ? 'bottom' : 'right'; + }, }, }, ui, diff --git a/src/lib/tour/onboarding/06_0_BackupAlertStep.ts b/src/lib/tour/onboarding/06_0_BackupAlertStep.ts index 27fae670a..e4e7dbf69 100644 --- a/src/lib/tour/onboarding/06_0_BackupAlertStep.ts +++ b/src/lib/tour/onboarding/06_0_BackupAlertStep.ts @@ -1,9 +1,9 @@ import { WalletHTMLElements } from '..'; -import { GetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; export function getBackupAlertStep( - { isSmallScreen, isANewUser }: GetStepFnArgs): TourStep { + { isSmallScreen, isANewUser }: OnboardingGetStepFnArgs): TourStep { const ui: TourStep['ui'] = { fadedElements: [ WalletHTMLElements.SIDEBAR_TESTNET, diff --git a/src/lib/tour/onboarding/06_1_MenuIconStep.ts b/src/lib/tour/onboarding/06_1_MenuIconStep.ts index 086afe317..a9045e3a9 100644 --- a/src/lib/tour/onboarding/06_1_MenuIconStep.ts +++ b/src/lib/tour/onboarding/06_1_MenuIconStep.ts @@ -1,12 +1,12 @@ import { WalletHTMLElements } from '..'; -import { GetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; -export function getMenuIconStep({ isANewUser }: GetStepFnArgs): TourStep { +export function getMenuIconStep({ isANewUser }: OnboardingGetStepFnArgs): TourStep { return { path: '/', tooltip: { - target: `${WalletHTMLElements.ACCOUNT_OVERVIEW_MOBILE_ACTION_BAR} > button.reset`, + target: `${WalletHTMLElements.ACCOUNT_OVERVIEW_TABLET_MENU_BAR} > button.reset`, content: getOnboardingTexts(OnboardingTourStep.MENU_ICON, isANewUser).default, params: { placement: 'bottom-start', @@ -15,7 +15,7 @@ export function getMenuIconStep({ isANewUser }: GetStepFnArgs { const hamburguerIcon = document.querySelector( - `${WalletHTMLElements.ACCOUNT_OVERVIEW_MOBILE_ACTION_BAR} > button.reset`) as HTMLButtonElement; + `${WalletHTMLElements.ACCOUNT_OVERVIEW_TABLET_MENU_BAR} > button.reset`) as HTMLButtonElement; hamburguerIcon!.addEventListener('click', () => goToNextStep(), { once: true, capture: true }); }, diff --git a/src/lib/tour/onboarding/07_1_BackupOptionNotLargeScreenStep.ts b/src/lib/tour/onboarding/07_1_BackupOptionNotLargeScreenStep.ts index 8e1e9bec0..63791fbc0 100644 --- a/src/lib/tour/onboarding/07_1_BackupOptionNotLargeScreenStep.ts +++ b/src/lib/tour/onboarding/07_1_BackupOptionNotLargeScreenStep.ts @@ -1,10 +1,10 @@ import { WalletHTMLElements } from '..'; -import { GetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; export function getBackupOptionNotLargeScreenStep( { closeAccountOptions, openAccountOptions, isANewUser, isSmallScreen } - : GetStepFnArgs): TourStep { + : OnboardingGetStepFnArgs): TourStep { const ui: TourStep['ui'] = { fadedElements: [ WalletHTMLElements.SIDEBAR_TESTNET, @@ -41,7 +41,9 @@ export function getBackupOptionNotLargeScreenStep( content: getOnboardingTexts( OnboardingTourStep.BACKUP_OPTION_NOT_LARGE_SCREENS, isANewUser).default, params: { - placement: isSmallScreen.value ? 'top-start' : 'right', + get placement() { + return isSmallScreen.value ? 'top-start' : 'right'; + }, }, }, ui, diff --git a/src/lib/tour/onboarding/07_2_BackupOptionLargeScreenStep.ts b/src/lib/tour/onboarding/07_2_BackupOptionLargeScreenStep.ts index 1c0e5319c..6253c1a64 100644 --- a/src/lib/tour/onboarding/07_2_BackupOptionLargeScreenStep.ts +++ b/src/lib/tour/onboarding/07_2_BackupOptionLargeScreenStep.ts @@ -1,9 +1,9 @@ import { WalletHTMLElements } from '..'; -import { GetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; export function getBackupOptionLargeScreenStep( - { isANewUser }: GetStepFnArgs): TourStep { + { isANewUser }: OnboardingGetStepFnArgs): TourStep { const ui: TourStep['ui'] = { fadedElements: [ WalletHTMLElements.SIDEBAR_TESTNET, diff --git a/src/lib/tour/onboarding/07_AccountOptionsStep.ts b/src/lib/tour/onboarding/07_AccountOptionsStep.ts index eed381c82..1c6f56942 100644 --- a/src/lib/tour/onboarding/07_AccountOptionsStep.ts +++ b/src/lib/tour/onboarding/07_AccountOptionsStep.ts @@ -1,8 +1,8 @@ import { WalletHTMLElements } from '..'; -import { GetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; -type AccountStep = GetStepFnArgs & { keepMenuOpenOnForward: boolean }; +type AccountStep = OnboardingGetStepFnArgs & { keepMenuOpenOnForward: boolean }; export function getAccountOptionsStep( { isSmallScreen, isLargeScreen, isANewUser, openAccountOptions, closeAccountOptions, keepMenuOpenOnForward } : AccountStep): TourStep { @@ -35,12 +35,16 @@ export function getAccountOptionsStep( }; return { - path: isLargeScreen.value ? '/' : '/?sidebar=true', + get path() { + return isLargeScreen.value ? '/' : '/?sidebar=true'; + }, tooltip: { target: WalletHTMLElements.MODAL_PAGE, content: getOnboardingTexts(OnboardingTourStep.ACCOUNT_OPTIONS, isANewUser).default, params: { - placement: isSmallScreen.value ? 'top' : 'right', + get placement() { + return isSmallScreen.value ? 'top' : 'right'; + }, }, }, ui, diff --git a/src/lib/tour/onboarding/08_OnboardingCompleted.ts b/src/lib/tour/onboarding/08_OnboardingCompleted.ts index 7d8e43e4a..314e846f3 100644 --- a/src/lib/tour/onboarding/08_OnboardingCompleted.ts +++ b/src/lib/tour/onboarding/08_OnboardingCompleted.ts @@ -1,9 +1,8 @@ -import { useAccountStore } from '@/stores/Account'; -import { GetStepFnArgs, OnboardingTourStep, TourStep, WalletHTMLElements } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourStep, WalletHTMLElements } from '../types'; import { getOnboardingTexts } from './OnboardingTourTexts'; export function getOnboardingCompletedStep( - { root, isLargeScreen, isANewUser }: GetStepFnArgs): TourStep { + { root, isLargeScreen, isANewUser }: OnboardingGetStepFnArgs): TourStep { const ui: TourStep['ui'] = { fadedElements: [ WalletHTMLElements.SIDEBAR_TESTNET, @@ -32,12 +31,18 @@ export function getOnboardingCompletedStep( ], }; return { - path: isLargeScreen.value ? '/' : '/?sidebar=true', + get path() { + return isLargeScreen.value ? '/' : '/?sidebar=true'; + }, tooltip: { - target: `${WalletHTMLElements.SIDEBAR_NETWORK} ${isLargeScreen.value ? 'span' : '.consensus-icon'}`, + get target() { + return `${WalletHTMLElements.SIDEBAR_NETWORK} ${isLargeScreen.value ? 'span' : '.consensus-icon'}`; + }, content: getOnboardingTexts(OnboardingTourStep.ONBOARDING_COMPLETED, isANewUser).default, params: { - placement: isLargeScreen.value ? 'right' : 'top-start', + get placement() { + return isLargeScreen.value ? 'right' : 'top-start'; + }, }, button: { text: 'Go to Network', @@ -45,9 +50,12 @@ export function getOnboardingCompletedStep( if (endTour) { await endTour(); } - const { setTour } = useAccountStore(); - setTour({ name: 'network', isANewUser: false }); - root.$router.push('/network'); + root.$router.push({ + name: 'network', + params: { + showNetworkInfo: 'true', + }, + }); }, }, }, diff --git a/src/lib/tour/onboarding/index.ts b/src/lib/tour/onboarding/index.ts index 0ae2a219f..b551368a4 100644 --- a/src/lib/tour/onboarding/index.ts +++ b/src/lib/tour/onboarding/index.ts @@ -2,7 +2,7 @@ import { useWindowSize } from '@/composables/useWindowSize'; import { AccountType, useAccountStore } from '@/stores/Account'; import { SetupContext } from '@vue/composition-api'; import { searchComponentByName, TourName } from '..'; -import { GetStepFnArgs, OnboardingTourStep, TourSteps } from '../types'; +import { OnboardingGetStepFnArgs, OnboardingTourStep, TourSteps } from '../types'; import { getFirstAddressStep } from './01_FirstAddressStep'; import { getTransactionListStep } from './02_TransactionListStep'; import { getFirstTransactionStep } from './03_FirstTransactionStep'; @@ -51,7 +51,7 @@ export function getOnboardingTourSteps({ root }: SetupContext): TourSteps = { + const args: OnboardingGetStepFnArgs = { sleep, toggleDisabledAttribute, root, diff --git a/src/lib/tour/types.ts b/src/lib/tour/types.ts index f3d7d00b7..52c016a65 100644 --- a/src/lib/tour/types.ts +++ b/src/lib/tour/types.ts @@ -81,8 +81,7 @@ export type TourSteps = { [x in T]?: TourStep; }; -// TODO Rename or mix with NetworkGetStepFnArgs -export type GetStepFnArgs = +export type OnboardingGetStepFnArgs = Pick, 'isSmallScreen' | 'isMediumScreen' | 'isLargeScreen'> & { root: SetupContext['root'],