fix e2e walkthrough test failures

apps/remix-ide/src/walkthroughService.js

@@ -6,8 +6,8 @@ export class WalkthroughService {
   }
 
   start (params) {
-    if (!localStorage.getItem('hadTour_initial')) {
+    document.addEventListener('doWalkThrough', (e) => {
-      document.addEventListener('doWalkThrough', (e) => {
+      if (!localStorage.getItem('hadTour_initial')) {
         introJs().setOptions({
           steps: [{
             title: 'Welcome to Remix IDE',
@@ -47,8 +47,8 @@ export class WalkthroughService {
           }
         }).start()
         localStorage.setItem('hadTour_initial', true)
-      })
+      }
-    }
+    })
   }
 
   startFeatureTour () {

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@@ -4,7 +4,8 @@ import React, {
   Fragment,
   useEffect,
   useReducer,
-  useRef
+  useRef,
+  useState
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -24,7 +25,7 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  const udappPanelRef = useRef<any>()
+  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -90,12 +91,11 @@ export function RemixUiVerticalIconsPanel ({
 
   useEffect(() => {
     const found = iconPanelRef.current!.querySelector('#verticalIconsKindudapp')
-    if (found) {
+    if (verticalIconsPlugin.targetProfileForChange && verticalIconsPlugin.targetProfileForChange.udapp) {
-      console.log('emit event now as vertical panel is in the viewport', found)
       const doWalkThroughEvent = new Event('doWalkThrough')
       document.dispatchEvent(doWalkThroughEvent)
     }
-  })
+  }, [Object.keys(verticalIconsPlugin.targetProfileForChange).length])
 
   return (
     <div id="iconsP" className="h-100">
@@ -178,7 +178,7 @@ export function RemixUiVerticalIconsPanel ({
               .map(p => (
                 <div id="runIcons" data-id="verticalIconsKindUdapp" key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
-                } ref={udappPanelRef}
+                }
                 >
                   <Icon
                     kind={verticalIconsPlugin.targetProfileForChange[p].kind}