hide topbar and pinned pannel for browser wallet mode

apps/remix-ide-e2e/src/tests/pinned_plugin.test.ts

@@ -60,5 +60,11 @@ module.exports = {
       .waitForElementVisible('*[data-id="movePluginToRight"]')
       .click('*[data-pinnedplugin="movePluginToLeft-udapp"]')
       .end()
+  },
+  'Check if pannel is gone when the app is in destop client mode #group1': function (browser: NightwatchBrowser) {
+    browser
+      .url('http://127.0.0.1:8080/?#activate=udapp,desktopClient')
+      .waitForElementNotPresent('#pinned-panel')
+      .end()
   }
 }

apps/remix-ide/src/app.ts

@@ -520,7 +520,7 @@ class AppComponent {
     const pluginManagerComponent = new PluginManagerComponent(appManager, this.engine)
     const filePanel = new Filepanel(appManager, contentImport)
     this.statusBar = new StatusBar(filePanel, this.menuicons)
-    this.topBar = new Topbar(filePanel, git)
+    this.topBar = new Topbar(filePanel, git, this.desktopClientMode)
     const landingPage = new LandingPage(appManager, this.menuicons, fileManager, filePanel, contentImport)
     this.settings = new SettingsTab(Registry.getInstance().get('config').api, editor)//, appManager)
 

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

@@ -39,8 +39,9 @@ export class Topbar extends Plugin {
   registry: Registry
   fileProviders: any
   fileManager: any
+  desktopClientMode: boolean
 
-  constructor(filePanel: FilePanel, git: GitPlugin) {
+  constructor(filePanel: FilePanel, git: GitPlugin, desktopClientMode = false) {
     super(TopBarProfile)
     this.filePanel = filePanel
     this.registry = Registry.getInstance()
@@ -50,6 +51,7 @@ export class Topbar extends Plugin {
     this.git = git
     this.workspaces = []
     this.currentWorkspaceMetadata = null
+    this.desktopClientMode = desktopClientMode
   }
 
   onActivation(): void {

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

@@ -22,7 +22,7 @@ const RemixApp = (props: IRemixAppUi) => {
   const [appReady, setAppReady] = useState<boolean>(false)
   const [showManagePreferencesDialog, setShowManagePreferencesDialog] = useState<boolean>(false)
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
-  const [hidePinnedPanel, setHidePinnedPanel] = useState<boolean>(true)
+  const [hidePinnedPanel, setHidePinnedPanel] = useState<boolean>(props.app.desktopClientMode || true)
   const [maximiseLeftTrigger, setMaximiseLeftTrigger] = useState<number>(0)
   const [enhanceLeftTrigger, setEnhanceLeftTrigger] = useState<number>(0)
   const [resetLeftTrigger, setResetLeftTrigger] = useState<number>(0)
@@ -125,13 +125,16 @@ const RemixApp = (props: IRemixAppUi) => {
       setLocale(nextLocale)
     })
 
-    props.app.pinnedPanel.events.on('pinnedPlugin', (profile, isClosed) => {
-      if (!isClosed) setHidePinnedPanel(false)
-    })
+    if (!props.app.desktopClientMode) {
 
-    props.app.pinnedPanel.events.on('unPinnedPlugin', () => {
-      setHidePinnedPanel(true)
-    })
+      props.app.pinnedPanel.events.on('unPinnedPlugin', () => {
+        setHidePinnedPanel(true)
+      })
+
+      props.app.pinnedPanel.events.on('pinnedPlugin', (profile, isClosed) => {
+        if (!isClosed) setHidePinnedPanel(false)
+      })
+    }
 
     setInterval(() => {
       setOnline(window.navigator.onLine)
@@ -158,9 +161,11 @@ const RemixApp = (props: IRemixAppUi) => {
             <MatomoDialog hide={!appReady} managePreferencesFn={() => setShowManagePreferencesDialog(true)}></MatomoDialog>
             {showManagePreferencesDialog && <ManagePreferencesDialog></ManagePreferencesDialog>}
             <div className='d-flex flex-column'>
-              <div className='top-bar'>
-                {props.app.topBar.render()}
-              </div>
+              {!props.app.desktopClientMode && (
+                <div className='top-bar'>
+                  {props.app.topBar.render()}
+                </div>
+              )}
               <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
                 <div id="icon-panel" data-id="remixIdeIconPanel" className="custom_icon_panel iconpanel bg-light">
                   {props.app.menuicons.render()}

libs/remix-ui/top-bar/src/context/topbarContext.tsx

@@ -11,6 +11,7 @@ export const TopbarContext = createContext<{
   openRecentFolder: (path: string) => Promise<void>,
   openRecentFolderInNewWindow: (path: string) => Promise<void>,
   removeRecentFolder: (path: string) => Promise<void>,
-  revealRecentFolderInExplorer: (path: string) => Promise<void>
+  revealRecentFolderInExplorer: (path: string) => Promise<void>,
+  desktopClientMode?: boolean
     }>(null)
 

libs/remix-ui/top-bar/src/context/topbarProvider.tsx

@@ -214,7 +214,8 @@ export const TopbarProvider = (props: TopbarProviderProps) => {
     openRecentFolder,
     openRecentFolderInNewWindow,
     removeRecentFolder,
-    revealRecentFolderInExplorer
+    revealRecentFolderInExplorer,
+    desktopClientMode: plugin.desktopClientMode
   }
 
   return (