final cleanup

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

@@ -47,11 +47,6 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
     plugin.verticalIcons.select('solhint')
     _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solhint'])
   }
-  const startLearnEth = async () => {
-    await plugin.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting'])
-    plugin.verticalIcons.select('learnEth')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'learnEth'])
-  }
   const startSourceVerify = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'sourcify'])
     plugin.verticalIcons.select('sourcify')
@@ -63,7 +58,7 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
     _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidityUnitTesting'])
   }
   
-    return (
+  return (
     <div className="pl-2 w-100" id="hTFeaturedPlugins">
       <label className="" style={{fontSize: "1.2rem"}}>Featured Plugins</label>
       <div className="w-100 d-flex flex-column">
@@ -84,11 +79,42 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
             deviceType={"desktop"}
             itemClass="w-100"
           >
-            <PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" description="Compile, test and analyse smart contract." remixMaintained={true} callback={() => startSolidity()} />
+            <PluginButton
-            <PluginButton imgPath="assets/img/starkNetLogo.webp" envID="starkNetLogo" envText="StarkNet" description="Compile and deploy contracts with Cairo, a native language for StarkNet." l2={true} callback={() => startStarkNet()} />
+              imgPath="assets/img/solidityLogo.webp"
-            <PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" description="Solhint is an open source project for linting Solidity code." callback={() => startSolhint()} />
+              envID="solidityLogo"
-            <PluginButton imgPath="assets/img/sourcifyNewLogo.webp" envID="sourcifyLogo" envText="Sourcify" description="Solidity contract and metadata verification service." callback={() => startSourceVerify()} />
+              envText="Solidity"
-            <PluginButton imgPath="assets/img/unitTesting.webp" envID="sUTLogo" envText="Solidity unit testing" description="Write and run unit tests for your contracts in Solidity." callback={() => startSolidityUnitTesting()} />
+              description="Compile, test and analyse smart contract."
+              remixMaintained={true}
+              callback={() => startSolidity()}
+            />
+            <PluginButton
+              imgPath="assets/img/starkNetLogo.webp"
+              envID="starkNetLogo"
+              envText="StarkNet"
+              description="Compile and deploy contracts with Cairo, a native language for StarkNet."
+              l2={true}
+              callback={() => startStarkNet()}
+            />
+            <PluginButton
+              imgPath="assets/img/solhintLogo.webp"
+              envID="solhintLogo" envText="Solhint linter"
+              description="Solhint is an open source project for linting Solidity code."
+              callback={() => startSolhint()}
+            />
+            <PluginButton
+              imgPath="assets/img/sourcifyNewLogo.webp"
+              envID="sourcifyLogo"
+              envText="Sourcify"
+              description="Solidity contract and metadata verification service."
+              callback={() => startSourceVerify()}
+            />
+            <PluginButton
+              imgPath="assets/img/unitTesting.webp"
+              envID="sUTLogo"
+              envText="Solidity unit testing"
+              description="Write and run unit tests for your contracts in Solidity."
+              callback={() => startSolidityUnitTesting()}
+            />
           </Carousel>
         </ThemeContext.Provider>
       </div>

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

@@ -53,15 +53,40 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
             deviceType={"desktop"}
             itemClass="w-100"
           >
-            <WorkspaceTemplate gsID="starkNetLogo" workspaceTitle="Blank" description="Create an empty workspace." callback={() => createWorkspace("blank")} />
+            <WorkspaceTemplate
-            <WorkspaceTemplate gsID="solhintLogo" workspaceTitle="Remix Default" description="Create a workspace with sample files." callback={() => createWorkspace("remixDefault")} />
+              gsID="starkNetLogo"
-            <WorkspaceTemplate gsID="sourcifyLogo" workspaceTitle="OpenZeppelin ERC20" description="Create an ERC20 token by importing OpenZeppelin library." callback={() => createWorkspace("ozerc20")} />
+              workspaceTitle="Blank"
-            <WorkspaceTemplate gsID="sUTLogo" workspaceTitle="OpenZeppelin ERC721" description="Create an NFT token by importing OpenZeppelin library." callback={() => createWorkspace("ozerc721")} />
+              description="Create an empty workspace."
-            <WorkspaceTemplate gsID="sUTLogo" workspaceTitle="0xProject ERC20" description="Create an ERC20 token by importing 0xProject contract." callback={() => createWorkspace("zeroxErc20")} />
+              callback={() => createWorkspace("blank")} />
-            <WorkspaceTemplate gsID="solidityLogo" workspaceTitle="Add a workspace" description="Create and configure a workspace manually." callback={() => createWorkspace("")} />
+            <WorkspaceTemplate
+              gsID="solhintLogo"
+              workspaceTitle="Remix Default"
+              description="Create a workspace with sample files."
+              callback={() => createWorkspace("remixDefault")} />
+            <WorkspaceTemplate
+              gsID="sourcifyLogo"
+              workspaceTitle="OpenZeppelin ERC20"
+              description="Create an ERC20 token by importing OpenZeppelin library."
+              callback={() => createWorkspace("ozerc20")} />
+            <WorkspaceTemplate
+              gsID="sUTLogo"
+              workspaceTitle="OpenZeppelin ERC721"
+              description="Create an NFT token by importing OpenZeppelin library."
+              callback={() => createWorkspace("ozerc721")} />
+            <WorkspaceTemplate
+              gsID="sUTLogo"
+              workspaceTitle="0xProject ERC20"
+              description="Create an ERC20 token by importing 0xProject contract."
+              callback={() => createWorkspace("zeroxErc20")} />
+            <WorkspaceTemplate
+              gsID="solidityLogo"
+              workspaceTitle="Add a workspace"
+              description="Create and configure a workspace manually."
+              callback={() => createWorkspace("")} />
           </Carousel>
         </ThemeContext.Provider>
-      </div>    </div>
+      </div>
+    </div>
   )
 }
 

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

@@ -27,14 +27,14 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
   const themeFilter = useContext(ThemeContext)
 
   const openLink = () => {
-      window.open("https://remix-ide.readthedocs.io/en/latest/remix_tutorials_learneth.html?highlight=learneth#learneth-tutorial-repos", '_blank')
+    window.open("https://remix-ide.readthedocs.io/en/latest/remix_tutorials_learneth.html?highlight=learneth#learneth-tutorial-repos", '_blank')
   }
 
   const startLearnEthTutorial = async (tutorial) => {
     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'])
+    _paq.push(['trackEvent', 'homeTab', 'startLearnEthTutorial', tutorial])
   }
 
   return (

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState, useRef } from 'react'
+import React from 'react'
 
 function HomeTabScamAlert () {
   return (

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

@@ -30,13 +30,13 @@ function PluginButton ({ imgPath, envID, envText, callback, l2, description, rem
       </button>
       { l2 && <label className="bg-light mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_l2Label">L2</label> }
       { remixMaintained &&
-          <OverlayTrigger placement="bottom" overlay={
+        <OverlayTrigger placement="bottom" overlay={
-            <Tooltip id="overlay-tooltip-run-script">
+          <Tooltip id="overlay-tooltip-run-script">
-              <span>Maintained by Remix</span>
+            <span>Maintained by Remix</span>
-            </Tooltip>
+          </Tooltip>
-          }>
+        }>
-            <i className="bg-light text-success mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_maintainedLabel fas fa-check"></i>
+          <i className="bg-light text-success mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_maintainedLabel fas fa-check"></i>
-          </OverlayTrigger>
+        </OverlayTrigger>
       }
 
     </div>

libs/remix-ui/home-tab/src/lib/components/rssFeed.css

@@ -1,12 +0,0 @@
-.RSSFeed-item img  {
-    width: 100%;
-}
-
-.RSSFeed-item .truncate {
-    max-height: 500px;
-    overflow: hidden;
-}
-
-.RSSFeed-item .more-button {
-
-}

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

@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from "react";
-import Parser from "rss-parser";
-import './rssFeed.css';
-
-interface RSSFeedProps {
-    feedUrl: string,
-    maxItems: number,
-}
-
-export function RSSFeed({ feedUrl, maxItems }: RSSFeedProps) {
-    const [feed, setFeed] = useState(null);
-
-    useEffect(() => {
-        const fetchData = async () => {
-            const parser = new Parser()
-            const feed = await parser.parseURL(feedUrl);
-            for (const item of feed.items) {
-                item.content = item['content:encoded']
-                item.date = new Date(item.pubDate).toLocaleDateString('en-US', {
-                    month: 'short',
-                    day: 'numeric'
-                })
-            }
-            setFeed(feed);
-        };
-        fetchData();
-    }, [feedUrl]);
-
-
-    return (<>
-        {feed && feed.items.slice(0, maxItems).map((item: any, index: any) => (
-            <div className='RSSFeed-item' key={index}>
-                <a target="_blank" href={item.link}><h3>{item.title}</h3></a>
-                <p>Author: {item.creator}</p>
-                <h4>{item.date}</h4>
-                <div className="truncate" dangerouslySetInnerHTML={{ __html: item.content }} />
-                <a className="more-button btn mb-3" target="_blank" href={item.link}>READ MORE</a>
-                <hr></hr>
-            </div>
-        ))}
-    </>)
-}

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

@@ -1,7 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useContext } from 'react'
-import { ThemeContext } from '../themeContext'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
 interface WorkspaceTemplateProps {
   gsID: string,
   workspaceTitle: string,
@@ -10,7 +8,6 @@ interface WorkspaceTemplateProps {
 }
 
 function WorkspaceTemplate ({ gsID, workspaceTitle, description, callback }: WorkspaceTemplateProps) {
-  const themeFilter = useContext(ThemeContext)
 
   return (
     <div className="d-flex remixui_home_workspaceTemplate">

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

@@ -1,8 +1,7 @@
-import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
+import React, { useState, useEffect } from 'react' // eslint-disable-line
 
 import './remix-ui-home-tab.css'
 import { ThemeContext, themes } from './themeContext'
-import { RSSFeed } from './components/rssFeed'
 import HomeTabTitle from './components/homeTabTitle'
 import HomeTabFile from './components/homeTabFile'
 import HomeTabLearn from './components/homeTabLearn'
@@ -16,9 +15,7 @@ declare global {
     _paq: any
   }
 }
-const _paq = window._paq = window._paq || [] //eslint-disable-line
 
-/* eslint-disable-next-line */
 export interface RemixUiHomeTabProps {
   plugin: any
 }
@@ -28,14 +25,10 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
 
   const [state, setState] = useState<{
     themeQuality: { filter: string, name: string },
-    showMediaPanel: 'none' | 'twitter' | 'medium'
   }>({
     themeQuality: themes.light,
-    showMediaPanel: 'none'
   })
 
-  const rightPanel = useRef(null)
-
   useEffect(() => {
     plugin.call('theme', 'currentTheme').then((theme) => {
       // update theme quality. To be used for for images
@@ -50,23 +43,6 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
         return { ...prevState, themeQuality: theme.quality === 'dark' ? themes.dark : themes.light }
       })
     })
-    window.addEventListener('click', (event) => {
-      const target = event.target as Element
-      const id = target.id
-      if (id !== 'remixIDEHomeTwitterbtn' && id !== 'remixIDEHomeMediumbtn' && (rightPanel && rightPanel.current && !rightPanel.current.contains(event.target))) {
-        // todo check event.target
-        setState(prevState => { return { ...prevState, showMediaPanel: 'none' } })
-      }
-    })
-    // to retrieve twitter feed
-    const scriptTwitter = document.createElement('script')
-    scriptTwitter.src = 'https://platform.twitter.com/widgets.js'
-    scriptTwitter.async = true
-    document.body.appendChild(scriptTwitter)
-    
-    return () => {
-      document.body.removeChild(scriptTwitter)
-    }
   }, [])
   
   return (
@@ -89,116 +65,3 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
 }
 
 export default RemixUiHomeTab
-
-
-/*
-  
-
-  const maxHeight = Math.max(window.innerHeight - 150, 250) + 'px'
-  const elHeight = '4000px'
-<div className="d-flex flex-column ml-4" id="remixUiRightPanel">
-        <div className="border-bottom d-flex flex-column mr-4 pb-3 mb-3">
-          <div className="pt-2 d-flex justify-content-between">
-            <div>
-              <div className="mx-4 my-4 pt-4 d-flex">
-                <label style={ { fontSize: 'xxx-large' } }>Remix IDE</label>
-              </div>
-              
-            </div>
-            <div className="mr-4 d-flex">
-              <img className="align-self-end remixui_home_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
-              <audio
-                id="remiAudio"
-                muted={false}
-                src="assets/audio/remiGuitar-single-power-chord-A-minor.wav"
-                ref={remiAudioEl}
-              ></audio>
-            </div>
-          </div>
-        </div>
-        <div className="row mx-2 mr-4" data-id="landingPageHpSections">
-          <div className="ml-3">
-            <div className="mb-3">
-              <h4>Featured Plugins</h4>
-              <div className="d-flex flex-row pt-2">
-                <ThemeContext.Provider value={ state.themeQuality }>
-                  <PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={() => startSolidity()} />
-                  <PluginButton imgPath="assets/img/starkNetLogo.webp" envID="starkNetLogo" envText="StarkNet" l2={true} callback={() => startStarkNet()} />
-                  <PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={() => startSolhint()} />
-                  <PluginButton imgPath="assets/img/learnEthLogo.webp" envID="learnEthLogo" envText="LearnEth" callback={() => startLearnEth()} />
-                  <PluginButton imgPath="assets/img/sourcifyNewLogo.webp" envID="sourcifyLogo" envText="Sourcify" callback={() => startSourceVerify()} />
-                  <PluginButton imgPath="assets/img/moreLogo.webp" envID="moreLogo" envText="More" callback={startPluginManager} />
-                </ThemeContext.Provider>
-              </div>
-            </div>
-            ------------------------
-              <div className="ml-4 pl-4">
-                <h4>Resources</h4>
-                <p className="mb-1">
-                  <i className="mr-2 fas fa-book"></i>
-                  <a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
-                </p>
-                <p className="mb-1">
-                  <i className="mr-2 fab fa-gitter"></i>
-                  <a className="remixui_home_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
-                </p>
-                <p className="mb-1">
-                  <img id='remixHhomeWebsite' className="mr-2 remixui_home_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
-                  <a className="remixui_home_text" target="__blank" href="https://remix-project.org">Featuring website</a>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="d-flex flex-column remixui_home_rightPanel">
-          <div className="d-flex pr-3 py-2 align-self-end" id="remixIDEMediaPanelsTitle">
-            <button
-              className="btn-info p-2 m-1 border rounded-circle remixui_home_mediaBadge fab fa-twitter"
-              id="remixIDEHomeTwitterbtn"
-              title="Twitter"
-              onClick={(e) => {
-                setState(prevState => {
-                  return { ...prevState, showMediaPanel: state.showMediaPanel === 'twitter' ? 'none' : 'twitter' }
-                })
-                _paq.push(['trackEvent', 'pluginManager', 'media', 'twitter'])
-              }}
-            ></button>
-            <button
-              className="btn-danger p-2 m-1 border rounded-circle remixui_home_mediaBadge fab fa-medium"
-              id="remixIDEHomeMediumbtn"
-              title="Medium blogs"
-              onClick={(e) => {
-                setState(prevState => {
-                  return { ...prevState, showMediaPanel: state.showMediaPanel === 'medium' ? 'none' : 'medium' }
-                })
-                _paq.push(['trackEvent', 'pluginManager', 'media', 'medium'])
-              }}
-            ></button>
-          </div>
-          <div
-            className="mr-3 d-flex bg-light remixui_home_panels"
-            style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } }
-            id="remixIDEMediaPanels"
-            ref={rightPanel}
-          >
-            <div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" style={ { maxHeight: maxHeight } }>
-              <div id="medium-widget" className="px-3 remixui_home_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: '10000px' } }>
-                <RSSFeed feedUrl='https://rss.remixproject.org/' maxItems={10} />
-              </div>
-            </div>
-            <div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } >
-              <div className="remixui_home_media" style={ { minHeight: elHeight } } >
-                <a className="twitter-timeline"
-                  data-width="375"
-                  data-theme={ state.themeQuality.name }
-                  data-chrome="nofooter noheader transparent"
-                  data-tweet-limit="18"
-                  href="https://twitter.com/EthereumRemix"
-                >
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      */