Merge branch 'master' into apply-refactored-tooltips

libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx

@@ -4,6 +4,7 @@ import { ThemeContext, themes } from '../themeContext'
 import Carousel from 'react-multi-carousel'
 import 'react-multi-carousel/lib/styles.css'
 import CustomNavButtons from './customNavButtons'
+const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 function HomeTabFeatured() {
   const themeFilter = useContext(ThemeContext)
@@ -44,7 +45,7 @@ function HomeTabFeatured() {
                 <div className="h6 w-50 p-4" style={{ flex: "1" }}>
                   <h5>JUMP INTO WEB3</h5>
                   <p>The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level, and as a learning lab for teaching and experimenting with Ethereum.</p>
-                  <a className="remixui_home_text" target="__blank" href="https://remix-project.org">More</a>
+                  <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])} target="__blank" href="https://remix-project.org">More</a>
                 </div>
               </div>
               <div className="d-flex">
@@ -55,7 +56,7 @@ function HomeTabFeatured() {
                   <p>
                     Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism. Remix Reward holders are able to mint a second “Remixer” user NFT badge to give to any other user of their choice.
                   </p>
-                  <a className="remixui_home_text" target="__blank" href="https://rewards.remix.ethereum.eth.limo">More</a>
+                  <a className="remixui_home_text" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'remixRewards'])} href="https://rewards.remix.ethereum.eth.limo">More</a>
                 </div>
               </div>
               <div className="d-flex">
@@ -64,7 +65,7 @@ function HomeTabFeatured() {
                   <h5>BETA TESTING</h5>
                   <p style={{ fontStyle: 'italic' }}>Our community supports us.</p>
                   <p>You can join Beta Testing before each release of Remix IDE. Help us test now and get a handle on new features!</p>
-                  <a className="remixui_home_text" target="__blank" href="https://rewards.remix.ethereum.eth.limo">More</a>
+                  <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'betatesting'])} target="__blank" href="https://rewards.remix.ethereum.eth.limo">More</a>
                 </div>
               </div>
             </Carousel>

libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx

@@ -59,27 +59,27 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
   const startSolidity = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'udapp', 'solidityStaticAnalysis', 'solidityUnitTesting'])
     plugin.verticalIcons.select('solidity')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity'])
+    _paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'solidity'])
   }
   const startStarkNet = async () => {
     await plugin.appManager.activatePlugin('starkNet_compiler')
     plugin.verticalIcons.select('starkNet_compiler')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'starkNet_compiler'])
+    _paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'starkNet_compiler'])
   }
   const startSolhint = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'solhint'])
     plugin.verticalIcons.select('solhint')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solhint'])
+    _paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'solhint'])
   }
   const startSourceVerify = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'sourcify'])
     plugin.verticalIcons.select('sourcify')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'sourcify'])
+    _paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'sourcify'])
   }  
   const startSolidityUnitTesting = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'solidityUnitTesting'])
     plugin.verticalIcons.select('solidityUnitTesting')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidityUnitTesting'])
+    _paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'solidityUnitTesting'])
   }
   
   return (

libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx

@@ -2,6 +2,7 @@
 import React, { useState, useRef, useReducer } from 'react'
 import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
+const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 interface  HomeTabFileProps {
   plugin: any
@@ -36,7 +37,8 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
 
   const inputValue = useRef(null)
 
-  const processLoading = () => {
+  const processLoading = (type: string) => {
+    _paq.push(['trackEvent', 'hometab', 'filesSection', 'importFrom' + type])
     const contentImport = plugin.contentImport
     const workspace = plugin.fileManager.getProvider('workspace')
     contentImport.import(
@@ -70,18 +72,22 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
   }
 
   const createNewFile = async () => {
+    _paq.push(['trackEvent', 'hometab', 'filesSection', 'createNewFile'])
     plugin.verticalIcons.select('filePanel')
     await plugin.call('filePanel', 'createNewFile')
   }
 
   const uploadFile = async (target) => {
+    _paq.push(['trackEvent', 'hometab', 'filesSection', 'uploadFile'])
     await plugin.call('filePanel', 'uploadFile', target)
   }
 
   const connectToLocalhost = () => {
+    _paq.push(['trackEvent', 'hometab', 'filesSection', 'connectToLocalhost'])
     plugin.appManager.activatePlugin('remixd')
   }
   const importFromGist = () => {
+    _paq.push(['trackEvent', 'hometab', 'filesSection', 'importFromGist'])
     plugin.call('gistHandler', 'load', '')
     plugin.verticalIcons.select('filePanel')
   }
@@ -108,7 +114,7 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
         okLabel='Import'
         hide={ !state.showModalDialog }
         handleHide={ () => hideFullMessage() }
-        okFn={ () => processLoading() }
+        okFn={ () => processLoading(state.modalInfo.title) }
       >
         <div className="p-2 user-select-auto">
           { state.modalInfo.loadItem !== '' && <span>Enter the { state.modalInfo.loadItem } you would like to load.</span> }

libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx

@@ -60,7 +60,7 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
     await plugin.call('filePanel', 'createWorkspace', templateName + "_" + timeStamp, templateName)
     await plugin.call('filePanel', 'setWorkspace', templateName + "_" + timeStamp)
     plugin.verticalIcons.select('filePanel')
-    _paq.push(['trackEvent', 'homeTab', 'homeGetStarted', templateName])
+    _paq.push(['trackEvent', 'hometab', 'homeGetStarted', templateName])
   }
 
   return (

libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx

@@ -34,7 +34,7 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
     await plugin.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting'])
     plugin.call('LearnEth', 'startTutorial', 'ethereum/remix-workshops', 'master', tutorial)
     plugin.verticalIcons.select('LearnEth')
-    _paq.push(['trackEvent', 'homeTab', 'startLearnEthTutorial', tutorial])
+    _paq.push(['trackEvent', 'hometab', 'startLearnEthTutorial', tutorial])
   }
 
   return (

libs/remix-ui/home-tab/src/lib/components/homeTabScamAlert.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react'
+const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 function HomeTabScamAlert () {
   return (
@@ -15,10 +16,10 @@ function HomeTabScamAlert () {
         </span>
         <span className="pl-4 mt-1">        
           Beware of online videos promoting "liquidity front runner bots":  
-          <a className="pl-2 remixui_home_text" target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">Learn more</a>
+          <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'learnMore'])}  target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">Learn more</a>
         </span>
         <span className="pl-4 mt-1">
-          Additional safety tips: &nbsp;<a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">here</a>
+          Additional safety tips: &nbsp;<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])} target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">here</a>
         </span>
       </div>
     </div>

libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx

@@ -4,6 +4,8 @@ import BasicLogo from 'libs/remix-ui/vertical-icons-panel/src/lib/components/Bas
 import { ThemeContext } from '../themeContext'
 import React, { useEffect, useState, useRef, useContext } from 'react'
 import { CustomTooltip } from '@remix-ui/helper'
+const _paq = window._paq = window._paq || [] // eslint-disable-line
+
 
 function HomeTabTitle() {
   useEffect(() => {
@@ -28,6 +30,7 @@ function HomeTabTitle() {
   const handleSearchKeyDown = (e: KeyboardEvent) => {
     if (e.target !== searchInputRef.current) return
     if (e.key === "Enter") {
+      _paq.push(['trackEvent', 'hometab', 'header', 'searchDocumentation'])
       openLink()
       searchInputRef.current.value = ""
     } else {
@@ -69,7 +72,10 @@ function HomeTabTitle() {
             tooltipTextClasses="border bg-light text-dark p-1 pr-3"
           >
             <button
-              onClick={() => openLink("https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA")}
+              onClick={() => {
+                openLink("https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA")
+                _paq.push(['trackEvent', 'hometab', 'socialMedia', 'youtube'])
+              }}
               className="border-0 h-100 btn fab fa-youtube">
             </button>
           </CustomTooltip>
@@ -82,7 +88,10 @@ function HomeTabTitle() {
             tooltipTextClasses="border bg-light text-dark p-1 pr-3"
           >
             <button
-              onClick={() => openLink("https://twitter.com/EthereumRemix")}
+              onClick={() => { 
+                openLink("https://twitter.com/EthereumRemix")
+                _paq.push(['trackEvent', 'hometab', 'socialMedia', 'twitter'])
+              }}
               className="border-0 h-100 pl-2 btn fab fa-twitter">
             </button>
           </CustomTooltip>
@@ -95,7 +104,10 @@ function HomeTabTitle() {
             tooltipTextClasses="border bg-light text-dark p-1 pr-3"
           >
             <button
-              onClick={() => openLink("https://www.linkedin.com/company/ethereum-remix/")}
+              onClick={() => { 
+                openLink("https://www.linkedin.com/company/ethereum-remix/")
+                _paq.push(['trackEvent', 'hometab', 'socialmedia', 'linkedin'])
+              }}
               className="border-0 h-100 pl-2 btn fa fa-linkedin">
             </button>
           </CustomTooltip>
@@ -108,7 +120,10 @@ function HomeTabTitle() {
             tooltipTextClasses="border bg-light text-dark p-1 pr-3"
           >
             <button
-              onClick={() => openLink("https://medium.com/remix-ide")}
+              onClick={() => {
+                openLink("https://medium.com/remix-ide")
+                _paq.push(['trackEvent', 'hometab', 'socialmedia', 'medium'])
+              }}
               className="border-0 h-100 pl-2 btn fab fa-medium">
             </button>
           </CustomTooltip>
@@ -121,7 +136,10 @@ function HomeTabTitle() {
             tooltipTextClasses="border bg-light text-dark p-1 pr-3"
           >
             <button
-              onClick={() => openLink("https://gitter.im/ethereum/remix")}
+              onClick={() => {
+                openLink("https://gitter.im/ethereum/remix")
+                _paq.push(['trackEvent', 'hometab', 'socialmedia', 'gitter'])
+              }}
               className="border-0 h-100 pl-2 btn fab fa-gitter">
             </button>
           </CustomTooltip>
@@ -129,10 +147,10 @@ function HomeTabTitle() {
       </div>
       <b className="pb-1 text-dark" style={{ fontStyle: 'italic' }}>The Native IDE for Web3 Development.</b>
       <div className="pb-1" id="hTGeneralLinks">
-        <a className="remixui_home_text" target="__blank" href="https://remix-project.org">Website</a>
-        <a className="pl-2 remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest">Documentation</a>
-        <a className="pl-2 remixui_home_text" target="__blank" href="https://remix-plugin-docs.readthedocs.io/en/latest/">Remix Plugin</a>
-        <a className="pl-2 remixui_home_text" target="__blank" href="https://github.com/ethereum/remix-desktop/releases">Remix Desktop</a>
+        <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'webSite'])} target="__blank" href="https://remix-project.org">Website</a>
+        <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'documentation'])} target="__blank" href="https://remix-ide.readthedocs.io/en/latest">Documentation</a>
+        <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'remixPlugin'])} target="__blank" href="https://remix-plugin-docs.readthedocs.io/en/latest/">Remix Plugin</a>
+        <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'remixDesktop'])} target="__blank" href="https://github.com/ethereum/remix-desktop/releases">Remix Desktop</a>
       </div>
       <div className="d-flex pb-1 align-items-center">
         <input
@@ -145,7 +163,10 @@ function HomeTabTitle() {
         />
         <button
           className="form-control border d-flex align-items-center p-2 justify-content-center fas fa-search bg-light"
-          onClick={(e) => openLink()}
+          onClick={(e) => {
+            _paq.push(['trackEvent', 'hometab', 'header', 'searchDocumentation'])
+            openLink()
+          }}
           disabled={state.searchDisable}
           style={{ width: "3rem" }}
         >

libs/remix-ui/workspace/src/lib/actions/index.ts

@@ -370,7 +370,7 @@ export const handleDownloadFiles = async () => {
 export const restoreBackupZip = async () => {
   await plugin.appManager.activatePlugin(['restorebackupzip'])
   await plugin.call('mainPanel', 'showContent', 'restorebackupzip')
-  _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'restorebackupzip'])
+  _paq.push(['trackEvent', 'Backup', 'userActivate', 'restorebackupzip'])
 }
 
 const packageGistFiles = async (directory) => {