fix bugs

apps/remix-ide/src/app/components/popup-panel.tsx

@@ -80,14 +80,14 @@ export class PopupPanel extends AbstractPanel {
 
   render() {
     return (
-      <PluginViewWrapper plugin={this} />
+      <PluginViewWrapper useAppContext={true} plugin={this} />
     )
   }
 
-  updateComponent(state: popupPanelState & Partial<AppState>) {
+  updateComponent(state: popupPanelState, appState: Partial<AppState>) {
     return (
       <div
-        className={'px-0 bg-light border-info ' + (!state.showPopupPanel ? 'd-none' : 'd-flex')}
+        className={`px-0 bg-light border-info ${appState?.showPopupPanel ? 'd-flex' : 'd-none'}`}
         style={{
           maxHeight: '40rem',
           maxWidth: '25rem',

libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx

@@ -1,28 +1,35 @@
 import { AppContext } from '@remix-ui/app'
-import React, { useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
-import { useEffect, useState } from 'react'
 
 interface IPluginViewWrapperProps {
   plugin: any
+  useAppContext?: boolean // Optional flag to decide whether to use AppContext
 }
 
-export const PluginViewWrapper = (props: IPluginViewWrapperProps) => {
+export const PluginViewWrapper = ({ plugin, useAppContext = false }: IPluginViewWrapperProps) => {
   const [state, setState] = useState<any>(null)
-  const appContext = useContext(AppContext)
+  const appContext = useAppContext ? useContext(AppContext) : null
 
   useEffect(() => {
-    if (props.plugin.setDispatch) {
+    if (plugin.setDispatch) {
-      props.plugin.setDispatch(setState)
+      plugin.setDispatch(setState)
     }
-    if (props.plugin.setAppStateDispatch) {
+    if (useAppContext && appContext.appStateDispatch && plugin.setAppStateDispatch) {
-      props.plugin.setAppStateDispatch(appContext.appStateDispatch)
+      plugin.setAppStateDispatch(appContext.appStateDispatch)
     }
-  }, [])
+  }, [plugin])
 
-  return <>{state ? <>{props.plugin.updateComponent(
+  if (useAppContext && appContext && appContext.appState) {
-    {
+    return (
-      ...state,
+      <>
-      ...appContext['appState']
+        {state ? <>{plugin.updateComponent(state, appContext.appState)}</> : <></>}
-    })}
+      </>
-  </> : <></>}</>
+    )
+  }
+
+  return (
+    <>
+      {state ? <>{plugin.updateComponent(state)}</> : <></>}
+    </>
+  )
 }