fixed bug for receive free nim in tour

Author: onmax

src/lib/tour/onboarding/02_TransactionListStep.ts

@@ -1,3 +1,4 @@
+import { watch } from '@vue/composition-api';
 import { defaultTooltipModifiers, ITooltipModifier, IWalletHTMLElements } from '..';
 import { IOnboardingGetStepFnArgs, ITourStep, OnboardingTourStep } from '../types';
 import { getOnboardingTexts } from './OnboardingTourTexts';
@@ -23,7 +24,7 @@ export function getTransactionListStep(
             IWalletHTMLElements.ADDRESS_OVERVIEW_MOBILE_ACTION_BAR,
         ],
         disabledElements: [
-            ...(txsLen() > 0
+            ...(txsLen.value > 0
                 ? [IWalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS]
                 : [
                     `${IWalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} h2`,
@@ -37,14 +38,14 @@ export function getTransactionListStep(
         disabledButtons: [
             IWalletHTMLElements.BUTTON_SIDEBAR_BUY,
             IWalletHTMLElements.BUTTON_SIDEBAR_SELL,
-            txsLen() === 0 ? '' : IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_BUY,
+            txsLen.value === 0 ? '' : IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_BUY,
         ],
         scrollLockedElements: [
             `${IWalletHTMLElements.ACCOUNT_OVERVIEW_ADDRESS_LIST} .vue-recycle-scroller`,
             `${IWalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} .vue-recycle-scroller`,
         ],
         explicitInteractableElements: [
-            txsLen() === 0 ? IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_BUY : '',
+            txsLen.value === 0 ? IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_BUY : '',
         ],
     };
 
@@ -54,7 +55,7 @@ export function getTransactionListStep(
         },
         tooltip: {
             get target() {
-                if (txsLen() > 0) {
+                if (txsLen.value > 0) {
                     return isSmallScreen.value
                         ? `${IWalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS}
                                 .vue-recycle-scroller__item-view:nth-child(2)`
@@ -66,21 +67,21 @@ export function getTransactionListStep(
             },
             get content() {
                 return getOnboardingTexts(
-                    OnboardingTourStep.TRANSACTION_LIST)[txsLen() <= 1 ? 'default' : 'alternative'] || [];
+                    OnboardingTourStep.TRANSACTION_LIST)[txsLen.value <= 1 ? 'default' : 'alternative'] || [];
             },
             params: {
                 get placement() {
                     if (!isSmallScreen.value) {
                         return 'left';
                     }
-                    return txsLen() > 0 ? 'bottom' : 'top';
+                    return txsLen.value > 0 ? 'bottom' : 'top';
                 },
                 get modifiers() {
                     return [
                         {
                             name: 'offset',
                             options: {
-                                offset: txsLen() > 0 && isSmallScreen.value ? [0, 32] : [0, 20],
+                                offset: txsLen.value > 0 && isSmallScreen.value ? [0, 32] : [0, 20],
                             },
                         } as ITooltipModifier,
                         ...defaultTooltipModifiers.filter((d) => d.name !== 'offset'),
@@ -90,25 +91,26 @@ export function getTransactionListStep(
         },
         lifecycle: {
             mounted: ({ goToNextStep }) => {
-                if (txsLen() > 0) return undefined;
+                if (txsLen.value > 0) return undefined;
 
-                const freeNimBtnSelector = IWalletHTMLElements.ADDRESS_OVERVIEW_ACTIONS;
-                const freeNimBtn = document.querySelector(freeNimBtnSelector);
-                if (!freeNimBtn) return undefined;
-
-                freeNimBtn.addEventListener('click', () => goToNextStep(), { once: true });
+                const unwatch = watch(txsLen, (newVal) => {
+                    if (newVal > 0) goToNextStep();
+                });
 
                 // Add hightlight effect to 'Get Free NIM' button
-                toggleHighlightButton(freeNimBtnSelector, true, 'green');
-                return () => toggleHighlightButton(freeNimBtnSelector, false, 'green');
+                toggleHighlightButton(IWalletHTMLElements.ADDRESS_OVERVIEW_ACTIONS, true, 'green');
+                return () => {
+                    unwatch();
+                    return toggleHighlightButton(IWalletHTMLElements.ADDRESS_OVERVIEW_ACTIONS, false, 'green');
+                };
             },
         },
         get ui() {
             return {
                 ...ui,
 
                 // User is expected to click on the 'Get Free NIM' button
-                isNextStepDisabled: txsLen() === 0,
+                isNextStepDisabled: txsLen.value === 0,
             };
         },
     };

src/lib/tour/onboarding/03_FirstTransactionStep.ts

@@ -50,7 +50,7 @@ export function getFirstTransactionStep({ isSmallScreen, txsLen }: IOnboardingGe
                     : '.vue-recycle-scroller__item-view:nth-child(2)'}`;
             },
             content: getOnboardingTexts(OnboardingTourStep.FIRST_TRANSACTION)[
-                txsLen() === 1 ? 'default' : 'alternative'],
+                txsLen.value === 1 ? 'default' : 'alternative'],
             params: {
                 get placement() {
                     return isSmallScreen.value ? 'bottom-start' : 'left';

src/lib/tour/onboarding/index.ts

@@ -1,6 +1,6 @@
 import { ScreenTypes } from '@/composables/useWindowSize';
 import { AccountType, useAccountStore } from '@/stores/Account';
-import { SetupContext } from '@vue/composition-api';
+import { computed, SetupContext } from '@vue/composition-api';
 import { ITourOrigin, searchComponentByName } from '..';
 import { IOnboardingGetStepFnArgs, ITourSteps, OnboardingTourStep } from '../types';
 import { getFirstAddressStep } from './01_FirstAddressStep';
@@ -29,10 +29,10 @@ export function getOnboardingTourSteps({ root }: SetupContext, screenTypes: Scre
     // Returns the length of the transaction list for the current active account and active address
     // Easier to access component transaction-list which has already been mounted and has the list
     // of valid transactions for the current active account and active address
-    const txsLen = () => {
-        const txs = (searchComponentByName(root, 'transactions-list') as any).transactions || [];
+    const txsLen = computed<number>(() => {
+        const txs = (searchComponentByName(root, 'transactions-list') as any).txsForActiveAddress || [];
         return txs.length || 0;
-    };
+    });
 
     const { state, activeAccountInfo } = useAccountStore();
     const { startedFrom } = (state.tour as { startedFrom: ITourOrigin });

src/lib/tour/types.ts

@@ -1,5 +1,5 @@
 import { ScreenTypes } from '@/composables/useWindowSize';
-import { SetupContext } from '@vue/composition-api';
+import { Ref, SetupContext } from '@vue/composition-api';
 import { NodeHexagon } from '../NetworkMap';
 
 export enum TourName { ONBOARDING = 'onboarding', NETWORK = 'network' }
@@ -133,7 +133,7 @@ export type IOnboardingGetStepFnArgs = ScreenTypes & {
     sleep: (ms: number) => Promise<unknown>,
     startedFrom: ITourOrigin,
     toggleHighlightButton: (selector: string, highlight: boolean, color: 'gray' | 'orange' | 'green') => void,
-    txsLen: () => number,
+    txsLen: Readonly<Ref<number>>,
 };
 
 // Every step is defined in its own file as a function. The function receives this interface as a parameter