From 21016b16d708d1bc885c37ae140f32ac75bbf04e Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Wed, 28 Sep 2022 15:16:31 +0200
Subject: [PATCH] scrollelement for Featured plugins

---
 .../src/lib/components/homeTabFeatured.tsx    |   4 +-
 .../lib/components/homeTabFeaturedPlugins.tsx | 140 +++++++++++++-----
 .../src/lib/components/homeTabLearn.tsx       |   1 -
 .../src/lib/components/homeTabScamAlert.tsx   |   3 +-
 .../src/lib/components/homeTabTitle.tsx       |   2 +-
 .../src/lib/components/pluginButton.tsx       |  26 +++-
 .../home-tab/src/lib/remix-ui-home-tab.css    |  17 ++-
 .../home-tab/src/lib/remix-ui-home-tab.tsx    |  37 +----
 yarn.lock                                     |  15 ++
 9 files changed, 162 insertions(+), 83 deletions(-)

diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
index b447894c50..e133594429 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
@@ -8,9 +8,7 @@ function HomeTabFeatured () {
     searchInput: ''
   })
   useEffect(() => {
-  
     document.addEventListener("keyup", (e) => handleSearchKeyDown(e))
-    
     return () => {
       document.removeEventListener("keyup", handleSearchKeyDown)
     }
@@ -42,7 +40,7 @@ function HomeTabFeatured () {
   }
 
   return (
-    <div className="" id="hTFeaturedeSection">
+    <div className="pt-4" id="hTFeaturedeSection">
       <label style={{fontSize: "1.2rem"}}>Featured</label>
       <div className="border"></div>
     </div>
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
index d13c0da443..643e867b42 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
@@ -1,50 +1,120 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useEffect, useState, useRef } from 'react'
+import PluginButton from './pluginButton'
+import { ThemeContext, themes } from '../themeContext'
+import Carousel from 'react-multi-carousel'
+import 'react-multi-carousel/lib/styles.css'
+import CustomNavButtons from './customNavButtons'
+declare global {
+  interface Window {
+    _paq: any
+  }
+}
+const _paq = window._paq = window._paq || [] //eslint-disable-line
+
+interface  HomeTabFeaturedPluginsProps {
+  plugin: any
+}
 
-function HomeTabFeaturedPlugins () {
+function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
   const [state, setState] = useState<{
-    searchInput: string
+    themeQuality: { filter: string, name: string },
+    showMediaPanel: 'none' | 'twitter' | 'medium'
   }>({
-    searchInput: ''
+    themeQuality: themes.light,
+    showMediaPanel: 'none'
   })
-  useEffect(() => {
-  
-    document.addEventListener("keyup", (e) => handleSearchKeyDown(e))
-    
-    return () => {
-      document.removeEventListener("keyup", handleSearchKeyDown)
-    }
-  }, [])
 
-  const searchInputRef = useRef(null)
-  const remiAudioEl = useRef(null)
-
-  const playRemi = async () => {
-    remiAudioEl.current.play()
+  const startSolidity = async () => {
+    await plugin.appManager.activatePlugin(['solidity', 'udapp', 'solidityStaticAnalysis', 'solidityUnitTesting'])
+    plugin.verticalIcons.select('solidity')
+    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity'])
   }
-  const handleSearchKeyDown = (e: KeyboardEvent) => {
-    if (e.target !== searchInputRef.current) return
-    if (e.key === "Enter") {
-      openLink()
-      setState(prevState => {
-        return { ...prevState, searchInput: '' }
-      })
-      searchInputRef.current.value = ""
-    }
+  const startStarkNet = async () => {
+    await plugin.appManager.activatePlugin('starkNet_compiler')
+    plugin.verticalIcons.select('starkNet_compiler')
+    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'starkNet_compiler'])
   }
-
-  const openLink = (url = "") => {
-    if (url === "") {
-      window.open("https://remix-ide.readthedocs.io/en/latest/search.html?q=" + state.searchInput + "&check_keywords=yes&area=default", '_blank')
-    } else {
-      window.open(url, '_blank')
-    }
+  const startSolhint = async () => {
+    await plugin.appManager.activatePlugin(['solidity', 'solhint'])
+    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')
+    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'sourcify'])
   }
+  const startPluginManager = async () => {
+    plugin.verticalIcons.select('pluginManager')
+  }
+  const responsive = {
+    desktop: {
+      breakpoint: { max: 3000, min: 1024 },
+      items: 4,
+      slidesToSlide: 3 // optional, default to 1.
+    },
+    tablet: {
+      breakpoint: { max: 1024, min: 464 },
+      items: 2,
+      slidesToSlide: 2 // optional, default to 1.
+    },
+    mobile: {
+      breakpoint: { max: 464, min: 0 },
+      items: 1,
+      slidesToSlide: 1 // optional, default to 1.
+    }
+  };
 
+  const CustomNavButtons = ({ next, previous, goToSlide, ...rest }) => {
+    const { carouselState: { currentSlide } } = rest;
+    return (
+      <div className="d-flex justify-content-end carousel-button-group">
+        <button className={currentSlide === 0 ? 'disable py-0 border btn' : 'py-0 border btn'} onClick={() => previous()}>
+          <i className="fas fa-angle-left"></i>
+        </button>
+        <button className="py-0 border btn" onClick={() => next()} >
+          <i className="fas fa-angle-right"></i>
+        </button>
+      </div>
+    );
+  };
+  
   return (
-    <div className="" id="hTFeaturedPlugins">
-      <label style={{fontSize: "1.2rem"}}>Featured Plugins</label>
-      <div className="border"></div>
+    <div className="w-100" id="hTFeaturedPlugins">
+      <label className="pl-2" style={{fontSize: "1.2rem"}}>Featured Plugins</label>
+      <div className="w-100 d-flex flex-column">
+        <ThemeContext.Provider value={ state.themeQuality }>
+          <Carousel 
+            customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />}
+            arrows={false}
+            swipeable={false}
+            draggable={true}
+            showDots={false}
+            responsive={responsive}
+            renderDotsOutside={false}
+            renderButtonGroupOutside={true}
+            ssr={true} // means to render carousel on server-side.
+            infinite={false}
+            keyBoardControl={true}
+            containerClass="carousel-container"
+            deviceType={"desktop"}
+            itemClass="carousel-item-padding-10-px"
+          >
+            <PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" 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/moreLogo.webp" envID="moreLogo" envText="Plugin Manager" description="Discover more plugins." callback={startPluginManager} />
+          </Carousel>
+            
+        </ThemeContext.Provider>
+      </div>
     </div>
   )
 }
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx
index 785d234ba1..8d92fa9bfb 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx
@@ -68,7 +68,6 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
           </div>}
         </button>
       </div>
-      <br/>
     </div>
   )
 }
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabScamAlert.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabScamAlert.tsx
index 94ff388dd8..9cbe71bf7b 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabScamAlert.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabScamAlert.tsx
@@ -5,7 +5,7 @@ function HomeTabScamAlert () {
   return (
     <div className="" id="hTScamAlertSection">
       <label className="pl-2 text-danger" style={{fontSize: "1.2rem"}}>Scam Alert</label>
-      <div className="ml-2 align-self-end mb-2 d-flex flex-column border border-danger">
+      <div className="py-2 ml-2 align-self-end mb-2 d-flex flex-column border border-danger">
         <span className="pl-4 mt-2">
           <i className="pr-2 text-danger fas fa-exclamation-triangle"></i>
           <b>Scam Alerts:</b>
@@ -21,7 +21,6 @@ function HomeTabScamAlert () {
           Additional safety tips: &nbsp;<a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">here</a>
         </span>
       </div>
-      <br/>
     </div>
   )
 }
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx
index 379bdd809d..c1769a2b2c 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx
@@ -53,7 +53,7 @@ function HomeTabTitle () {
         ></audio>
       </div>
       <div className="d-flex justify-content-between">
-        <span className="h-80" style={ { fontSize: 'xx-large', fontFamily: "Noah" } }>Remix</span>
+        <span className="h-80" style={ { fontSize: 'x-large', fontFamily: "Noah" } }>Remix</span>
         <span>
           <button
             onClick={ ()=> openLink("https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA")}
diff --git a/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx b/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
index 06f108afe8..0c61690043 100644
--- a/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
@@ -1,29 +1,43 @@
 /* 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 PluginButtonProps {
   imgPath: string,
   envID: string,
   envText: string,
   callback: any,
-  l2?: boolean
+  l2?: boolean,
+  description: string,
+  remixMaintained?: boolean
 }
 
-function PluginButton ({ imgPath, envID, envText, callback, l2 }: PluginButtonProps) {
+function PluginButton ({ imgPath, envID, envText, callback, l2, description, remixMaintained }: PluginButtonProps) {
   const themeFilter = useContext(ThemeContext)
 
   return (
     <div>
       <button
-        className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center remixui_home_envButton"
+        className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center align-items-center remixui_home_envButton"
         data-id={'landingPageStart' + envText}
         onClick={() => callback()}
       >
-        <img className="m-2 align-self-center remixui_home_envLogo" id={envID} src={imgPath} alt="" style={ { filter: themeFilter.filter } } />
-        <label className="text-uppercase text-dark remixui_home_cursorStyle">{envText}</label>
+        <img className="px-2 m-2 align-self-center remixui_home_envLogo" id={envID} src={imgPath} alt="" style={ { filter: themeFilter.filter } } />
+        <div className="h-100 d-flex flex-column">
+          <label className="text-uppercase text-dark remixui_home_cursorStyle">{envText}</label>
+          <div className="remixui_home_envLogoDescription">{description}</div>
+        </div>
       </button>
       { l2 && <label className="bg-light mx-1 px-1 mb-0 mx-2 position-relative remixui_home_l2Label">L2</label> }
+      { remixMaintained &&
+          <OverlayTrigger placement="bottom" overlay={
+            <Tooltip id="overlay-tooltip-run-script">
+              <span>Maintained by Remix</span>
+            </Tooltip>
+          }>
+            <i className="bg-light text-success mx-1 px-1 mb-0 mx-2 position-relative remixui_home_maintainedLabel fas fa-check"></i>
+          </OverlayTrigger>
+      }
 
     </div>
   )
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
index 5a780e8600..0c2aaa164d 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
@@ -63,14 +63,21 @@
   opacity: 0.7;
 }
 .remixui_home_envLogo {
-  height: 16px;
+  height: 2.5rem;
+}
+.remixui_home_envLogoDescription{
+  white-space: pre-wrap;
+  font-size: smaller;
+  line-height: 0.8rem;
+  text-align: left;
 }
 .remixui_home_cursorStyle {
   cursor: pointer;
+  font-size: 0.7rem;
 }
 .remixui_home_envButton {
-  width: 120px;
-  height: 70px;
+  width: 240px;
+  height: 80px;
 }
 .remixui_home_media {
   overflow: hidden;
@@ -84,3 +91,7 @@
 .remixui_home_l2Label {
   bottom: 10px;
 }
+.remixui_home_maintainedLabel {
+  bottom: 10px;
+  left: 20px;
+}
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
index b123a1c7e4..b7bcac938d 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
@@ -11,6 +11,7 @@ import HomeTabLearn from './components/homeTabLearn'
 import HomeTabScamAlert from './components/homeTabScamAlert'
 import HomeTabGetStarted from './components/homeTabGetStarted'
 import HomeTabFeatured from './components/homeTabFeatured'
+import HomeTabFeaturedPlugins from './components/homeTabFeaturedPlugins'
 
 declare global {
   interface Window {
@@ -69,51 +70,23 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     }
   }, [])
   
-  const startSolidity = async () => {
-    await plugin.appManager.activatePlugin(['solidity', 'udapp', 'solidityStaticAnalysis', 'solidityUnitTesting'])
-    plugin.verticalIcons.select('solidity')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity'])
-  }
-  const startStarkNet = async () => {
-    await plugin.appManager.activatePlugin('starkNet_compiler')
-    plugin.verticalIcons.select('starkNet_compiler')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'starkNet_compiler'])
-  }
-  const startSolhint = async () => {
-    await plugin.appManager.activatePlugin(['solidity', 'solhint'])
-    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')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'sourcify'])
-  }
-  const startPluginManager = async () => {
-    plugin.verticalIcons.select('pluginManager')
-  }
+  
 
   const maxHeight = Math.max(window.innerHeight - 150, 250) + 'px'
   const elHeight = '4000px'
   
   return (
     <div className="d-flex flex-row w-100" id="remixUIHTAll">
-      <div className="px-2 justify-content-between d-flex border-right flex-column" id="remixUIHTLeft" style={{flex: 2}}>
+      <div className="px-2 justify-content-between d-flex border-right flex-column" id="remixUIHTLeft" style={{flex: 2, minWidth: "30%"}}>
         <HomeTabTitle />
         <HomeTabFile plugin={plugin} />
         <ThemeContext.Provider value={ state.themeQuality }>
           <HomeTabLearn plugin={plugin}/>
         </ThemeContext.Provider>
       </div>
-      <div className="px-2 justify-content-between d-flex flex-column" id="remixUIHTRight" style={{flex: 4}}>
-        <div className="" id="hTFeaturedeSection">
-        </div>
+      <div className="pl-2 pr-3 justify-content-between d-flex flex-column" style={{width: "70%"}} id="remixUIHTRight">
         <HomeTabFeatured></HomeTabFeatured>
+        <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
         <HomeTabGetStarted></HomeTabGetStarted>
         <HomeTabScamAlert></HomeTabScamAlert>
       </div>
diff --git a/yarn.lock b/yarn.lock
index 0905d23bd6..8c96a184a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4529,6 +4529,11 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
+"@types/overlayscrollbars@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@types/overlayscrollbars/-/overlayscrollbars-1.12.1.tgz#fb637071b545834fb12aea94ee309a2ff4cdc0a8"
+  integrity sha512-V25YHbSoKQN35UasHf0EKD9U2vcmexRSp78qa8UglxFH8H3D+adEa9zGZwrqpH4TdvqeMrgMqVqsLB4woAryrQ==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -18089,6 +18094,11 @@ outpipe@^1.1.0:
   dependencies:
     shell-quote "^1.4.2"
 
+overlayscrollbars-react@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/overlayscrollbars-react/-/overlayscrollbars-react-0.3.0.tgz#6d18e741897131643aa8afbc7fed735fbd106c9c"
+  integrity sha512-dV74p9VL/aImqJpeYz0vmpScZYu6UiNTmRKfyI4CS0OYUpYCUiTd723adY38Grz2W57hoNCECWDzkOJRFDQeZg==
+
 p-cancelable@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.3.0.tgz#b9e123800bcebb7ac13a479be195b507b98d30fa"
@@ -19712,6 +19722,11 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-multi-carousel@^2.8.2:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/react-multi-carousel/-/react-multi-carousel-2.8.2.tgz#4bbd7a9656d8e49e081745331593e5500eefdbe4"
+  integrity sha512-M9Y7DfAp8bA/r6yexttU6RLA7uyppje4c0ELRuCHZWswH+u7nr0uVP6qHNPjc4XGOEY1MYFOb5nBg7JvoKutuQ==
+
 react-overlays@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.1.1.tgz#2e7cf49744b56537c7828ccb94cfc63dd778ae4f"