Fixed ids

Author: ioedeveloper

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

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { useIntl } from 'react-intl'
 import { ThemeContext } from '../themeContext'
 import { ToggleSwitch } from '@remix-ui/toggle'
 import fetchResults from '../fetch2.json'
-import { RenderIf } from '@remix-ui/helper'
+import { RenderIf, RenderIfNot } from '@remix-ui/helper'
 declare global {
   interface Window {
     _paq: any
@@ -32,22 +32,34 @@ interface PluginInfo {
 
 function HomeTabFeaturedPlugins({ plugin }: HomeTabFeaturedPluginsProps) {
   const [activePlugins, setActivePlugins] = useState<string[]>([])
-  const intl = useIntl()
+  const [loadingPlugins, setLoadingPlugins] = useState<string[]>([])
   const theme = useContext(ThemeContext)
   const isDark = theme.name === 'dark'
 
+  // TODO: Fix this
+  // useEffect(() => {
+  //   const fetchActivePlugins = async () => {
+  //     fetchResults.plugins.forEach(async (pluginInfo: PluginInfo) => {
+  //       const isActive = await plugin.appManager.isActive(pluginInfo.pluginId)
+  //       if (isActive) {
+  //         setActivePlugins([...activePlugins, pluginInfo.pluginId])
+  //       }
+  //     })
+  //   }
+  //   fetchActivePlugins()
+  // }, [])
+
   const activateFeaturedPlugin = async (pluginId: string) => {
-    if (await plugin.call('manager', 'isActive', pluginId)) {
-      console.log('deactivate', pluginId)
-      plugin.verticalIcons.select(pluginId)
-      await plugin.call('manager', 'deactivatePlugin', pluginId)
-      setActivePlugins(activePlugins.filter((pluginId) => pluginId !== pluginId))
+    setLoadingPlugins([...loadingPlugins, pluginId])
+    if (await plugin.appManager.isActive(pluginId)) {
+      await plugin.appManager.deactivatePlugin(pluginId)
+      setActivePlugins(activePlugins.filter((id) => id !== pluginId))
     } else {
-      console.log('activate', pluginId)
-      await plugin.call('manager', 'activatePlugin', pluginId)
-      plugin.verticalIcons.select(pluginId)
+      await plugin.appManager.activatePlugin([pluginId])
+      await plugin.verticalIcons.select(pluginId)
       setActivePlugins([...activePlugins, pluginId])
     }
+    setLoadingPlugins(loadingPlugins.filter((id) => id !== pluginId))
     _paq.push(['trackEvent', 'hometabActivate', 'userActivate', pluginId])
   }
 
@@ -56,7 +68,12 @@ function HomeTabFeaturedPlugins({ plugin }: HomeTabFeaturedPluginsProps) {
       <div className="card mb-3">
         <div className="d-flex align-items-center px-2 justify-content-between border-bottom">
           <div className='d-flex align-items-center'>
-            { pluginInfo.iconClass ? <i className={`${pluginInfo.iconClass} mr-2`}></i> : <i className="fa-solid fa-file-book mr-2"></i> }
+            <RenderIf condition={loadingPlugins.includes(pluginInfo.pluginId)}>
+              <i className="fad fa-spinner fa-spin mr-2"></i>
+            </RenderIf>
+            <RenderIfNot condition={loadingPlugins.includes(pluginInfo.pluginId)}>
+              { pluginInfo.iconClass ? <i className={`${pluginInfo.iconClass} mr-2`}></i> : <i className="fa-solid fa-file-book mr-2"></i> }
+            </RenderIfNot>
             <span className="fw-bold" style={{ color: isDark ? 'white' : 'black' }}>{pluginInfo.pluginTitle}</span>
           </div>
           <ToggleSwitch id={`toggleSwitch-${pluginInfo.pluginId}`} isOn={activePlugins.includes(pluginInfo.pluginId)} onClick={() => activateFeaturedPlugin(pluginInfo.pluginId)} />

libs/remix-ui/home-tab/src/lib/fetch2.json

@@ -1,7 +1,7 @@
 {
     "caption": "Most used plugins",
     "plugins": [{
-        "pluginId": "contractVerification",
+        "pluginId": "contract-verification",
         "pluginTitle": "Contract Verification",
         "action": {
             "type": "link",
@@ -13,7 +13,7 @@
         "description": "Verify your contracts on multiple services at the same time."
     },
     {   
-        "pluginId": "learnEth",
+        "pluginId": "LearnEth",
         "pluginTitle": "LearnEth Tutorials",
         "action": {
             "type": "methodCall",
@@ -25,7 +25,7 @@
         "description": "Learn about Remix, Solidity, and other Web3 projects."
     },
     {
-        "pluginId": "staticAnalysis",
+        "pluginId": "solidityStaticAnalysis",
         "pluginTitle": "Solidity Analyzers",
         "action": {
             "type": "link",
@@ -37,7 +37,7 @@
         "description": "Analyze your code using Remix, Solhint and Slither."
     },
     {
-        "pluginId": "cookbook",
+        "pluginId": "cookbookdev",
         "pluginTitle": "Cookbook",
         "action": {
             "type": "link",