trying manual plumbing for localplugin creation

libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx

@@ -33,7 +33,7 @@ function ActivePluginCardContainer ({ pluginComponent }: ActivePluginCardContain
           buttonText="Deactivate"
           profile={profile}
           deactivatePlugin={deactivatePlugin}
-          key={profile.name}
+          key={profile.version}
           setInactivePlugins={setinactiveProfiles}
           inactivePlugins={inactiveProfiles}
           activePlugins={activeProfiles}

libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx

@@ -1,6 +1,6 @@
-import { getSolidity } from '@remix-ui/plugin-manager'
 import { Profile } from '@remixproject/plugin-utils'
 import React, { Dispatch, useState } from 'react'
+import { getSolidity } from '../../pluginManagerStateMachine'
 import { PluginManagerComponent } from '../../types'
 import '../remix-ui-plugin-manager.css'
 interface PluginCardProps {
@@ -71,6 +71,7 @@ function InactivePluginCard ({
                     if (workspacePlugins.includes('solidity') === true && workspacePlugins.includes('solidity-logic') === true) {
                       if (pluginComponent.activeProfiles.includes('solidity') && pluginComponent.activeProfiles.includes('solidity-logic')) {
                         const result = await getSolidity(pluginComponent)
+                        // check to make sure that solidity isn't already in tempList so that it won't be persisted to lcoalstorage twice.
                         tempList.push(...result)
                       }
                     }
@@ -81,18 +82,6 @@ function InactivePluginCard ({
                   const temp = inactivePlugins.filter(plugin => plugin.name !== profile.name).filter(plugin => plugin.name !== 'solidity' && plugin.name !== 'solidity-logic')
                   setInactivePlugins(temp)
                   localStorage.setItem('updatedInactives', JSON.stringify(temp))
-                  // const newActives = JSON.parse(localStorage.getItem('newActivePlugins'))
-                  // // const updatedInactives = JSON.parse(localStorage.getItem('updatedInactives'))
-                  // if (newActives === null || newActives.length === 0) {
-                  //       localStorage.setItem('newActivePlugins', JSON.stringify(getSolidity(pluginComponent)))
-                  //       const filteredInactives = pluginComponent.inactivePlugins.filter(inactive => inactive.name !== 'solidity' &&
-                  //       inactive.name !== 'solidity-logic')
-                  //       localStorage.setItem('updatedInactives', JSON.stringify(filteredInactives))
-                  //     }
-                  //   }
-                  // }
-                  // check to make sure that this activated profile is removed from inactives
-                  // this should happen higher up in use effect at the root checking for the length of trackActiveProfiles
                 }}
                 className="btn btn-success btn-sm"
                 data-id={`pluginManagerComponentActivateButton${profile.name}`}

libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx

@@ -1,12 +1,23 @@
 import { Profile } from '@remixproject/plugin-utils'
 import React, { Fragment, useEffect, useState } from 'react'
-import { PluginManagerComponent } from '../../types'
+import { PluginManagerComponent, PluginManagerProfile } from '../../types'
 import InactivePluginCard from './InactivePluginCard'
 import ModuleHeading from './moduleHeading'
 
 interface InactivePluginCardContainerProps {
   pluginComponent: PluginManagerComponent
 }
+
+interface LocalPluginInterface {
+  profile: Partial<PluginManagerProfile> // { name: string, displayName: string, url: string, type: 'iframe' | 'ws', hash: string, methods: string, location: 'sidePanel' | 'mainPanel' | 'none'}
+  activateService: {}
+  requestQueue: []
+  options: { queueTimeout: number }
+  id: number
+  pendingRequest: {}
+  listener: []
+  iframe: {}
+}
 function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardContainerProps) {
   const [activeProfiles, setActiveProfiles] = useState<Profile[]>()
   const [inactiveProfiles, setinactiveProfiles] = useState<Profile[]>([])
@@ -16,14 +27,29 @@ function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardCon
   }
 
   useEffect(() => {
-    const savedInactiveProfiles = JSON.parse(localStorage.getItem('updatedInactives'))
+    const savedInactiveProfiles: Profile[] = JSON.parse(localStorage.getItem('updatedInactives'))
+    const savedLocalPlugins: LocalPluginInterface = JSON.parse(localStorage.getItem('plugins/local'))
     if (savedInactiveProfiles === null) {
       localStorage.setItem('updatedInactives', '[]')
     }
-    if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length > 0) {
+    if (savedLocalPlugins === null) {
-      setinactiveProfiles(pluginComponent.inactivePlugins)
+      localStorage.setItem('plugins/local', '{}')
-    } else if (savedInactiveProfiles && pluginComponent.inactivePlugins.length > savedInactiveProfiles.length) {
+    }
+    if (savedInactiveProfiles && pluginComponent.inactivePlugins.length > savedInactiveProfiles.length) {
+      if (Object.keys(savedLocalPlugins).length > 0 && !pluginComponent.inactivePlugins.includes(savedLocalPlugins.profile as Profile)) {
+        const inactiveLocalPlugin = savedLocalPlugins.profile
+        localStorage.setItem('currentLocalPlugin', inactiveLocalPlugin.name)
+        savedInactiveProfiles.push(inactiveLocalPlugin as Profile)
+      }
       setinactiveProfiles(savedInactiveProfiles)
+    } else if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length > 0) {
+      const temp = []
+      if (Object.keys(savedLocalPlugins).length > 0) {
+        const inactiveLocalPlugin = savedLocalPlugins.profile
+        localStorage.setItem('currentLocalPlugin', inactiveLocalPlugin.name)
+        temp.push([...pluginComponent.inactivePlugins, inactiveLocalPlugin])
+      }
+      setinactiveProfiles(temp)
     }
   }, [pluginComponent, pluginComponent.inactivePlugins])
   return (

libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx

@@ -1,7 +1,7 @@
+import React, { useState } from 'react'
 import { ModalDialog } from '@remix-ui/modal-dialog'
 import { Toaster } from '@remix-ui/toaster'
 import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web'
-import React, { useState } from 'react'
 import { FormStateProps, PluginManagerComponent } from '../../types'
 
 interface LocalPluginFormProps {
@@ -12,9 +12,7 @@ interface LocalPluginFormProps {
   pluginManager: PluginManagerComponent
 }
 
-function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) {
+const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin: FormStateProps, setErrorMsg: React.Dispatch<React.SetStateAction<string>>) => {
-  const [errorMsg, setErrorMsg] = useState('')
-  const handleModalOkClick = async () => {
   try {
     const profile = JSON.parse(localStorage.getItem('plugins/local')) || plugin
     if (!profile) return
@@ -31,11 +29,10 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa
       if (!profile.url) throw new Error('Plugin should have an URL')
       const localPlugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile)
       localPlugin.profile.hash = `local-${profile.name}`
+      // <-------------------------------- Plumbing starts here --------------------------------------->
       pluginManager.engine.register(localPlugin)
-        // eslint-disable-next-line no-debugger
-        debugger
-        await pluginManager.appManager.activatePlugin(localPlugin.profile.name)
       localStorage.setItem('plugins/local', JSON.stringify(localPlugin))
+      pluginManager.activateP(localPlugin.profile.name)
     }
   } catch (error) {
     console.error(error)
@@ -43,6 +40,9 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa
     setErrorMsg('This name has already been used')
   }
 }
+function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) {
+  const [errorMsg, setErrorMsg] = useState('')
+
   return (
     <><ModalDialog
       handleHide={closeModal}
@@ -50,7 +50,7 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa
       hide={visible}
       title="Local Plugin"
       okLabel="OK"
-      okFn={handleModalOkClick}
+      okFn={() => handleModalOkClick(pluginManager, plugin, setErrorMsg) }
       cancelLabel="Cancel"
       cancelFn={closeModal}
     >

libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx

@@ -1,25 +1,10 @@
 import React from 'react'
-import { PluginManagerComponent, RemixUiPluginManagerProps } from '../types'
+import { RemixUiPluginManagerProps } from '../types'
 import ActivePluginCardContainer from './components/ActivePluginCardContainer'
 import InactivePluginCardContainer from './components/InactivePluginCardContainer'
 import RootView from './components/rootView'
 import './remix-ui-plugin-manager.css'
 
-export function getSolidity (pluginComponent: PluginManagerComponent) {
-  const fetchSolidity = async () => {
-    const solidity = await pluginComponent.appManager.getProfile('solidity')
-    const solidityLogic = await pluginComponent.appManager.getProfile('solidity-logic')
-    return [solidity, solidityLogic]
-  }
-  const materializeFetch = fetchSolidity()
-  return materializeFetch
-}
-
-export function getWorkspacePluginNames () {
-  const workspace: string[] = JSON.parse(localStorage.getItem('workspace'))
-  return workspace
-}
-
 export const RemixUiPluginManager = ({ pluginComponent }: RemixUiPluginManagerProps) => {
   return (
     <RootView pluginComponent={pluginComponent}>

libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts

@@ -1,4 +1,3 @@
-import { Profile } from '@remixproject/plugin-utils'
 import { PluginManagerComponent } from './types'
 
 export const defaultActivatedPlugins = [
@@ -27,75 +26,12 @@ export const defaultActivatedPlugins = [
   'udapp'
 ]
 
-// /**
+export function getSolidity (pluginComponent: PluginManagerComponent) {
-//  * Compares default enabled plugins of remix ide
+  const fetchSolidity = async () => {
-//  * and tracks newly activated plugins and manages
+    const solidity = await pluginComponent.appManager.getProfile('solidity')
-//  * their state by persisting in local storage
+    const solidityLogic = await pluginComponent.appManager.getProfile('solidity-logic')
-//  * @param newPlugin Profile of a Plugin
+    return [solidity, solidityLogic]
-//  * @param pluginComponent PluginManagerComponent Instance
-//  */
-// export async function PersistActivatedPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile) {
-//   const persisted = localStorage.getItem('newActivePlugins')
-//   const activatedPlugins: Profile[] = JSON.parse(persisted)
-
-//   const newlyActivatedPlugins: Array<Profile> = []
-//   const defaultActivated = defaultActivatedPlugins.includes(newPlugin.name) === false
-//   if (newPlugin) {
-//     if (defaultActivated) {
-//       // if this is true then we are sure that the profile name is in localStorage/workspace
-//       if (activatedPlugins && activatedPlugins.length && !activatedPlugins.includes(newPlugin)) {
-//         await FetchAndPersistPlugin(pluginComponent, newPlugin, activatedPlugins)
-//         localStorage.setItem('newActivePlugins', JSON.stringify(activatedPlugins))
-//       } else {
-//         await FetchAndPersistPlugin(pluginComponent, newPlugin, newlyActivatedPlugins)
-//         localStorage.setItem('newActivePlugins', JSON.stringify(newlyActivatedPlugins))
-//       }
-//     }
-//   }
-// }
-
-export function populateActivePlugins (pluginComponent: PluginManagerComponent) {
-  const activePluginNames = pluginComponent.activeProfiles
-  const filteredNames = []
-  const workspace: string[] = JSON.parse(localStorage.getItem('workspace'))
-  defaultActivatedPlugins.forEach(defaultName => {
-    if (workspace.includes(defaultName) === false) {
-      filteredNames.push(defaultName)
   }
-  })
+  const materializeFetch = fetchSolidity()
-  // filteredNames = activePluginNames.concat(defaultActivatedPlugins)
+  return materializeFetch
-  // const newArray = [...new Set(filteredNames)]
-  console.log('Here are the plugin names that should be shown!!', filteredNames)
-  // console.log('Here are the distinct profile names!!', newArray)
 }
-
-// async function FetchAndPersistPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile<any>, newlyActivatedPlugins: Profile<any>[]) {
-//   try {
-//     const targetProfile = await pluginComponent.appManager.getProfile(newPlugin.name)
-//     if (targetProfile !== null || targetProfile !== undefined) newlyActivatedPlugins.push(targetProfile)
-//   } catch {
-//     throw new Error('Could not fetch and persist target profile!')
-//   }
-// }
-
-// /**
-//  * Remove a deactivated plugin from persistence (localStorage)
-//  * @param pluginName Name of plugin profile to be removed
-//  */
-// export function RemoveActivatedPlugin (pluginName: string) {
-//   const getWorkspacePlugins = JSON.parse(localStorage.getItem('newActivePlugins'))
-//   const removeExisting = getWorkspacePlugins.filter(target => target.name !== pluginName)
-//   localStorage.setItem('newActivePlugins', JSON.stringify(removeExisting))
-// }
-
-// /**
-//  * Gets the latest list of inactive plugin profiles and persist them
-//  * in local storage
-//  * @param inactivesList Array of inactive plugin profiles
-//  * @returns {void}
-//  */
-// export function PersistNewInactivesState (inactivesList: Profile[]) {
-//   if (inactivesList && inactivesList.length) {
-//     localStorage.setItem('updatedInactives', JSON.stringify(inactivesList))
-//   }
-// }