Load initialState for udapp after pinning

apps/remix-ide/src/app.js

@@ -7,6 +7,7 @@ import {LocaleModule} from './app/tabs/locale-module'
 import {NetworkModule} from './app/tabs/network-module'
 import {Web3ProviderModule} from './app/tabs/web3-provider'
 import {CompileAndRun} from './app/tabs/compile-and-run'
+import {PluginStateLogger} from './app/tabs/state-logger'
 import {SidePanel} from './app/components/side-panel'
 import {HiddenPanel} from './app/components/hidden-panel'
 import {PinnedPanel} from './app/components/pinned-panel'
@@ -301,7 +302,8 @@ class AppComponent {
     this.layout = new Layout()
 
     const permissionHandler = new PermissionHandlerPlugin()
-
+    // ----------------- run script after each compilation results -----------
+    const pluginStateLogger = new PluginStateLogger()
     
     this.engine.register([
       permissionHandler,
@@ -352,6 +354,7 @@ class AppComponent {
       templates,
       openaigpt,
       solcoder,
+      pluginStateLogger
     ])
 
     //---- fs plugin
@@ -468,7 +471,8 @@ class AppComponent {
       'compilerArtefacts',
       'network',
       'web3Provider',
-      'offsetToLineColumnConverter'
+      'offsetToLineColumnConverter',
+      'pluginStateLogger'
     ])
     await this.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await this.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately

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

@@ -17,6 +17,7 @@ const pinnedPanel = {
 export class PinnedPanel extends AbstractPanel {
   sideelement: any
   dispatch: React.Dispatch<any> = () => {}
+  loggedState: any
 
   constructor() {
     super(pinnedPanel)
@@ -26,11 +27,12 @@ export class PinnedPanel extends AbstractPanel {
     this.renderComponent()
   }
 
-  pinView (profile, view) {
+  async pinView (profile, view) {
     const activePlugin = this.currentFocus()
 
     if (activePlugin === profile.name) throw new Error(`Plugin ${profile.name} already pinned`) 
     if (activePlugin) this.remove(activePlugin)
+    this.loggedState = await this.call('pluginStateLogger', 'getPluginState', profile.name)
     this.addView(profile, view)
     this.plugins[profile.name].pinned = true
     this.plugins[profile.name].active = true
@@ -59,12 +61,13 @@ export class PinnedPanel extends AbstractPanel {
   }
 
   updateComponent(state: any) {
-    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} plugins={state.plugins} />
+    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} plugins={state.plugins} pluginState={state.pluginState} />
   }
 
   renderComponent() {
     this.dispatch({
-      plugins: this.plugins
+      plugins: this.plugins,
+      pluginState: this.loggedState
     })
   }
 }

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

@@ -18,7 +18,9 @@ const sidePanel = {
 export class SidePanel extends AbstractPanel {
   // lastPinned
   sideelement: any
+  loggedState: any
   dispatch: React.Dispatch<any> = () => {}
+
   constructor() {
     super(sidePanel)
     this.sideelement = document.createElement('section')
@@ -65,7 +67,6 @@ export class SidePanel extends AbstractPanel {
   }
 
   addView(profile, view) {
-    console.log(profile.name)
     super.addView(profile, view)
     this.call('menuicons', 'linkContent', profile)
     this.renderComponent()
@@ -79,15 +80,20 @@ export class SidePanel extends AbstractPanel {
   }
 
   showView(profile) {
+    const activePlugin = this.currentFocus()
+
+    this.plugins[activePlugin].active = false
+    this.plugins[profile.name].active = true
     this.call('menuicons', 'linkContent', profile)
     this.renderComponent()
   }
 
-  pinView (profile, view) {
+  pinView (profile) {
     if (this.plugins[profile.name].pinned) return
     this.plugins[profile.name].pinned = true
-    this.call('pinnedPanel', 'pinView', profile, view)
+    this.call('pinnedPanel', 'pinView', profile, this.plugins[profile.name].view)
-    this.hideView(profile)
+    this.removeView(profile)
+    // this.hideView(profile)
   }
 
   unPinView (profile) {
@@ -120,12 +126,13 @@ export class SidePanel extends AbstractPanel {
   }
 
   updateComponent(state: any) {
-    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} plugins={state.plugins} />
+    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} plugins={state.plugins} pluginState={state.loggedState} />
   }
 
   renderComponent() {
     this.dispatch({
-      plugins: this.plugins
+      plugins: this.plugins,
+      pluginState: this.loggedState
     })
   }
 }

apps/remix-ide/src/app/tabs/state-logger.js

@@ -0,0 +1,26 @@
+import { Plugin } from "@remixproject/engine"
+import { EventEmitter } from 'events'
+import * as packageJson from '../../../../../package.json'
+
+const profile = {
+  name: 'pluginStateLogger',
+  events: [],
+  methods: ['logPluginState', 'getPluginState'],
+  version: packageJson.version,
+}
+
+export class PluginStateLogger extends Plugin {
+  constructor() {
+    super(profile)
+    this.events = new EventEmitter()
+    this.stateLogs = {}
+  }
+
+  logPluginState(name, state) {
+    this.stateLogs[name] = state
+  }
+
+  getPluginState(name) {
+    return this.stateLogs[name]
+  }
+}

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -28,7 +28,6 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
   }
 
   const pinPlugin = () => {
-    console.log('called pinPlugin')
     props.pinView && props.pinView(plugin.profile, plugin.view)
   }
 

libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx

@@ -3,7 +3,9 @@ import React, {forwardRef, useEffect, useRef, useState} from 'react' // eslint-d
 import { PluginRecord } from '../types'
 import './panel.css'
 interface panelPLuginProps {
-  pluginRecord: PluginRecord
+  pluginRecord: PluginRecord,
+  initialState?: any,
+  children?: any
 }
 
 const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
@@ -14,7 +16,19 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
     if (ref.current) {
       if (props.pluginRecord.view) {
         if (React.isValidElement(props.pluginRecord.view)) {
-          setView(props.pluginRecord.view)
+          let view = props.pluginRecord.view
+
+          if (props.initialState) {
+            view = React.Children.map((props.pluginRecord.view.props as any).children, child => {
+              if (React.isValidElement(child) && typeof child.type === 'function') {
+              // Safe to clone and pass `initialState`
+                return React.cloneElement(child, { ...props, initialState: props.initialState } as any)
+              }
+              return child
+            })
+          }
+
+          setView(view)
         } else {
           ref.current.appendChild(props.pluginRecord.view)
         }

libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx

@@ -6,8 +6,9 @@ import { PluginRecord } from '../types'
 
 /* eslint-disable-next-line */
 export interface RemixPanelProps {
-  plugins: Record<string, PluginRecord>
+  plugins: Record<string, PluginRecord>,
-  header: JSX.Element
+  header: JSX.Element,
+  pluginState?: any,
 }
 
 export function RemixPluginPanel(props: RemixPanelProps) {
@@ -17,7 +18,7 @@ export function RemixPluginPanel(props: RemixPanelProps) {
       <div className="pluginsContainer">
         <div className="plugins" id="plugins">
           {Object.values(props.plugins).map((pluginRecord) => {
-            return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
+            return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} initialState={props.pluginState} />
           })}
         </div>
       </div>

libs/remix-ui/run-tab/src/lib/run-tab.tsx

@@ -74,18 +74,23 @@ export function RunTabUI(props: RunTabProps) {
     storage: null,
     contract: null
   })
-  runTabInitialState.selectExEnv = plugin.blockchain.getProvider()
+  const initialState = props.initialState || runTabInitialState
-  const [runTab, dispatch] = useReducer(runTabReducer, runTabInitialState)
+
-  const REACT_API = { runTab }
+  initialState.selectExEnv = plugin.blockchain.getProvider()
+  const [runTab, dispatch] = useReducer(runTabReducer, initialState)
+  const REACT_API = {runTab}
   const currentfile = plugin.config.get('currentFile')
 
   useEffect(() => {
-    initRunTab(plugin)(dispatch)
+    if (!props.initialState) {
-    plugin.onInitDone()
+      initRunTab(plugin)(dispatch)
+      plugin.onInitDone()
+    }
   }, [plugin])
 
   useEffect(() => {
     plugin.onReady(runTab)
+    plugin.call('pluginStateLogger', 'logPluginState', 'udapp', runTab)
   }, [REACT_API])
 
   useEffect(() => {

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -5,7 +5,8 @@ import { RunTab } from './run-tab'
 import { SolcInput, SolcOutput } from '@openzeppelin/upgrades-core'
 import { LayoutCompatibilityReport } from '@openzeppelin/upgrades-core/dist/storage/report'
 export interface RunTabProps {
-  plugin: RunTab
+  plugin: RunTab,
+  initialState: RunTabState
 }
 
 export interface Contract {