+
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 (
+
+
+
+
+ );
+ };
+
return (
-
-
-
+
+
+
+
+ }
+ 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"
+ >
+ startSolidity()} />
+ startStarkNet()} />
+ startSolhint()} />
+ startSourceVerify()} />
+
+
+
+
+
)
}
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) {
}