add status bar

apps/remix-ide/src/app.js

@@ -9,6 +9,7 @@ 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 {StatusBar} from './app/components/status-bar'
 import {HiddenPanel} from './app/components/hidden-panel'
 import {PinnedPanel} from './app/components/pinned-panel'
 import {VerticalIcons} from './app/components/vertical-icons'
@@ -301,7 +302,7 @@ class AppComponent {
     const permissionHandler = new PermissionHandlerPlugin()
     // ----------------- run script after each compilation results -----------
     const pluginStateLogger = new PluginStateLogger()
-    
+
     this.engine.register([
       permissionHandler,
       this.layout,
@@ -339,7 +340,7 @@ class AppComponent {
       hardhatProvider,
       ganacheProvider,
       foundryProvider,
-      externalHttpProvider,      
+      externalHttpProvider,
       this.walkthroughService,
       search,
       solidityumlgen,
@@ -381,6 +382,7 @@ class AppComponent {
     // those views depend on app_manager
     this.menuicons = new VerticalIcons()
     this.sidePanel = new SidePanel()
+    this.statusBar = new StatusBar()
     this.hiddenPanel = new HiddenPanel()
     this.pinnedPanel = new PinnedPanel()
 
@@ -389,7 +391,7 @@ class AppComponent {
     const landingPage = new LandingPage(appManager, this.menuicons, fileManager, filePanel, contentImport)
     this.settings = new SettingsTab(Registry.getInstance().get('config').api, editor, appManager)
 
-    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel])
+    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, this.statusBar, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel])
 
     // CONTENT VIEWS & DEFAULT PLUGINS
     const openZeppelinProxy = new OpenZeppelinProxy(blockchain)
@@ -470,6 +472,7 @@ class AppComponent {
       'offsetToLineColumnConverter',
       'pluginStateLogger'
     ])
+    await this.appManager.activatePlugin(['statusBar'])
     await this.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await this.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await this.appManager.activatePlugin(['pinnedPanel'])
@@ -511,9 +514,9 @@ class AppComponent {
     await this.appManager.activatePlugin(['solidity-script'])
     await this.appManager.activatePlugin(['solcoder'])
 
-    
 
-    await this.appManager.activatePlugin(['filePanel'])    
+
+    await this.appManager.activatePlugin(['filePanel'])
 
     // Set workspace after initial activation
     this.appManager.on('editor', 'editorMounted', () => {

apps/remix-ide/src/app/components/status-bar.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { EventEmitter } from 'events'
+import { Plugin } from '@remixproject/engine'
+import packageJson from '../../../../../package.json'
+import { PluginViewWrapper } from '@remix-ui/helper'
+import { PluginProfile } from '../../types'
+import { RemixUIStatusBar } from '@remix-ui/panel'
+
+const statusBarProfile: PluginProfile = {
+  name: 'statusBar',
+  displayName: 'Status Bar',
+  description: 'Remix IDE status bar panel',
+  version: packageJson.version
+}
+
+export class StatusBar extends Plugin {
+  htmlElement: HTMLDivElement
+  events: EventEmitter
+  dispatch: React.Dispatch<any> = () => {}
+  constructor() {
+    super(statusBarProfile)
+    this.events = new EventEmitter()
+    this.htmlElement = document.createElement('div')
+    this.htmlElement.setAttribute('id', 'status-bar')
+  }
+
+  onActivation(): void {
+    this.renderComponent()
+  }
+  setDispatch(dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+  }
+
+  renderComponent() {
+    this.dispatch({
+      plugins: this
+    })
+  }
+
+  updateComponent(state: any) {
+    return <RemixUIStatusBar statusBarPlugin={state.plugins} />
+  }
+
+  render() {
+    <div data-id="status-bar-container">
+      test
+      <PluginViewWrapper plugin={this} />
+    </div>
+  }
+
+}

apps/remix-ide/src/types/index.d.ts

@@ -0,0 +1,19 @@
+
+export interface PluginProfile {
+  name: string
+  displayName: string
+  description: string
+  keywords?: string[]
+  icon?: string
+  url?: string
+  methods?: string[]
+  events?: string[]
+  version?: string
+}
+
+export interface StatusBarInterface extends Plugin {
+  htmlElement: HTMLDivElement
+  events: EventEmitter
+  dispatch: React.Dispatch<any>
+  setDispatch(dispatch: React.Dispatch<any>): void
+}

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -218,7 +218,6 @@ const RemixApp = (props: IRemixAppUi) => {
                 ></DragBar>
               }
             </div>
-            <div>{props.app.hiddenPanel.render()}</div>
             <AppDialogs></AppDialogs>
             <DialogViewPlugin></DialogViewPlugin>
           </AppProvider>

libs/remix-ui/app/src/lib/remix-app/style/remix-app.css

@@ -20,6 +20,7 @@ pre {
   overflow           : hidden;
   flex               : 1;
   min-width          : 320px;
+  padding-bottom     : 1.4rem;
 }
 .iconpanel           {
   display            : flex;
@@ -27,12 +28,20 @@ pre {
   overflow           : hidden;
   width              : 50px;
   user-select        : none;
+  padding-bottom     : 1.4rem;
 }
 .sidepanel           {
   display            : flex;
   flex-direction     : row-reverse;
   width              : 320px;
   transition         : width 0.25s;
+  padding-bottom     : 1.4rem;
+}
+.statusBar           {
+  /* width              : 100%; */
+  /* height             : 1.4rem; */
+  /* position           : fixed; */
+  /* overflow           : hidden; */
 }
 .pinnedpanel           {
   width              : 320px;
@@ -77,4 +86,4 @@ pre {
   width              : 4rem;
   right              : -10px;
   filter             : opacity(0.5);
-}
+}

libs/remix-ui/panel/src/index.ts

@@ -1,4 +1,5 @@
 export { default as RemixPluginPanel } from './lib/plugins/remix-ui-panel'
 export { default as RemixUIMainPanel } from './lib/main/main-panel'
 export { PluginRecord } from './lib/types'
-export { default as RemixUIPanelHeader } from './lib/plugins/panel-header'
+export { default as RemixUIPanelHeader } from './lib/plugins/panel-header'
+export { default as RemixUIStatusBar } from './lib/statusbar/remixui-statusbar-panel'

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

@@ -110,3 +110,7 @@ iframe {
 .highlight {
     animation: highlight 2s forwards;
 }
+
+.remixui_height {
+  height: 97vh;
+}

libs/remix-ui/panel/src/lib/statusbar/remixui-statusbar-panel.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { StatusBarInterface } from '../types'
+
+export interface RemixUIStatusBarProps {
+  statusBarPlugin: StatusBarInterface
+}
+
+export default function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
+  return (
+    <div className="d-flex flex-row bg-primary">
+      <h6>Statusbar</h6>
+    </div>
+  )
+}

libs/remix-ui/panel/src/lib/types/index.ts

@@ -1,4 +1,5 @@
 import { Profile } from '@remixproject/plugin-utils'
+import EventEmitter from 'events'
 
 export type PluginRecord = {
     profile: Profile
@@ -8,3 +9,22 @@ export type PluginRecord = {
     class?: string
     minimized?: boolean
 }
+
+export interface PluginProfile {
+  name: string
+  displayName: string
+  description: string
+  keywords?: string[]
+  icon?: string
+  url?: string
+  methods?: string[]
+  events?: string[]
+  version?: string
+}
+
+export interface StatusBarInterface extends Plugin {
+  htmlElement: HTMLDivElement
+  events: EventEmitter
+  dispatch: React.Dispatch<any>
+  setDispatch(dispatch: React.Dispatch<any>): void
+}

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css

@@ -84,7 +84,7 @@
     padding-left: 5px;
     padding-right: 5px;
   }
-  
+
   .remixui_verticalIconContextcontainer {
     display: block;
     position: fixed;
@@ -105,7 +105,7 @@
   .remixui_liitem:hover {
     background-color: var(--secondary);
   }
-  
+
   .remixui_scrollbar {
     overflow-y: scroll;
     scrollbar-width: none; /* Firefox hide scrollbar */
@@ -141,6 +141,10 @@
     flex-basis: 50px;
   }
 
+  .remixui_icons_height {
+    height: 97vh;
+  }
+
   #menuitems {
     list-style: none;
     margin: 0px;

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@@ -69,7 +69,7 @@ const RemixUiVerticalIconsPanel = ({ verticalIconsPlugin, icons }: RemixUiVertic
 
   return (
     <div id="iconsP" className="h-100">
-      <div className="remixui_icons d-flex flex-column vh-100" ref={iconPanelRef}>
+      <div className="remixui_icons d-flex flex-column remixui_icons_height" ref={iconPanelRef}>
         <Home verticalIconPlugin={verticalIconsPlugin} />
         <div
           className={