Merge branch 'desktopmerge' of https://github.com/ethereum/remix-project into desktopoffline

apps/remix-ide/src/app.js

@@ -148,6 +148,7 @@ class AppComponent {
     }
     this.showMatamo = matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
     this.walkthroughService = new WalkthroughService(appManager, this.showMatamo)
+    this.platform = isElectron() ? 'desktop' : 'web'
 
     const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080']
     // workaround for Electron support

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

@@ -1,8 +1,21 @@
 import React from 'react'
 import {AlertModal, AppModal} from '../interface'
 import {ModalInitialState} from '../state/modals'
+import { Plugin } from '@remixproject/engine'
 
-export const AppContext = React.createContext<any>(null)
+export type appProviderContextType = {
+  settings: any,
+  showMatamo: boolean
+  appManager: any
+  modal: any
+  layout: any
+  platform: appPlatformType
+}
+
+export type appPlatformType = 'web' | 'desktop'
+
+
+export const AppContext = React.createContext<appProviderContextType>(null)
 
 export interface dispatchModalInterface {
   modal: (data: AppModal) => void

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

@@ -80,7 +80,7 @@ export const ModalProvider = ({children = [], reducer = modalReducer, initialSta
   )
 }
 
-export const AppProvider = ({children = [], value = {}} = {}) => {
+export const AppProvider = ({children = [], value = {}} = null) => {
   return (
     <AppContext.Provider value={value}>
       <ModalProvider>{children}</ModalProvider>

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

@@ -7,10 +7,9 @@ import DragBar from './components/dragbar/dragbar'
 import {AppProvider} from './context/provider'
 import AppDialogs from './components/modals/dialogs'
 import DialogViewPlugin from './components/modals/dialogViewPlugin'
-import { AppContext } from './context/context'
+import { AppContext, appProviderContextType } from './context/context'
 import { FormattedMessage, IntlProvider } from 'react-intl'
 import { CustomTooltip } from '@remix-ui/helper';
-import { RemixUiXterminals } from '@remix-ui/xterm'
 
 interface IRemixAppUi {
   app: any
@@ -74,12 +73,13 @@ const RemixApp = (props: IRemixAppUi) => {
     })
   }
 
-  const value = {
+  const value: appProviderContextType = {
     settings: props.app.settings,
     showMatamo: props.app.showMatamo,
     appManager: props.app.appManager,
     modal: props.app.notification,
-    layout: props.app.layout
+    layout: props.app.layout,
+    platform: props.app.platform,
   }
 
   return (

libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts

@@ -5,5 +5,6 @@ export const MoveContext = createContext<MoveContextType>({
   dragged: {} as { path: string, isDirectory: boolean },
   moveFile: () => null,
   moveFolder: () => null,
-  currentlyMoved: () => null
+  currentlyMoved: () => null,
+  dragStatus: () => null
 })

libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx

@@ -14,7 +14,8 @@ export const Drag = (props: DragType) => {
         moveFolder: props.onFolderMoved,
         currentlyMoved: (path) => {
           setDragged(() => path)
-        }
+        },
+        dragStatus: props.dragStatus
       }}
     >
       {props.children}
@@ -68,6 +69,7 @@ export const Draggable = (props: DraggableType) => {
   }
 
   const handleDrag = () => {
+    context.dragStatus(true)
     if (context.dragged.path !== destination.path) {
       context.currentlyMoved({
         path: destination.path,
@@ -76,6 +78,10 @@ export const Draggable = (props: DraggableType) => {
     }
   }
 
+  const handleDragEnd = () => {
+    context.dragStatus(false)
+  }
+
   return (
     <>
       {props.isDraggable ? (
@@ -97,6 +103,9 @@ export const Draggable = (props: DraggableType) => {
               handleDrag()
             }
           }}
+          onDragEnd={(event) => {
+            handleDragEnd()
+          }}
           onDragOver={(event) => {
             if (destination) {
               handleDragover(event)

libs/remix-ui/drag-n-drop/src/lib/types/index.ts

@@ -17,6 +17,7 @@ export interface MoveContextType {
   moveFile: (dest: string, src: string) => void
   moveFolder: (dest: string, src: string) => void
   currentlyMoved: (file: { path: string, isDirectory: boolean }) => void
+  dragStatus: (isDragged: boolean) => void
 }
 
 export interface DraggableType {
@@ -31,4 +32,5 @@ export interface DragType {
   children: ReactNode
   onFileMoved: (dest: string, src: string) => void
   onFolderMoved: (dest: string, src: string) => void
+  dragStatus: (isDragged: boolean) => void
 }

libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import { use } from 'chai'
-import {Fragment} from 'react'
+import React, { useEffect } from 'react'
-import {OverlayTrigger, Popover} from 'react-bootstrap'
+import { Fragment } from 'react'
-import {CustomTooltipType} from '../../types/customtooltip'
+import { OverlayTrigger, Popover } from 'react-bootstrap'
+import { CustomTooltipType } from '../../types/customtooltip'
 
-export function CustomTooltip({children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay}: CustomTooltipType) {
+export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay, hide }: CustomTooltipType) {
   if (typeof tooltipText !== 'string') {
     const newTooltipText = React.cloneElement(tooltipText, {
       className: ' bg-secondary text-wrap p-1 px-2 '
@@ -12,24 +13,31 @@ export function CustomTooltip({children, placement, tooltipId, tooltipClasses, t
   }
 
   return (
-    <Fragment>
+    (!hide ? (
-      <OverlayTrigger
+      <Fragment>
-        placement={placement}
+        <OverlayTrigger
-        overlay={
+          placement={placement}
-          <Popover id={`popover-positioned-${placement}`}>
+          overlay={
-            <Popover.Content
+
-              id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId}
+            <Popover id={`popover-positioned-${placement}`}>
-              style={{minWidth: 'fit-content'}}
+              <Popover.Content
-              className={'text-wrap p-1 px-2 bg-secondary w-100' + tooltipClasses}
+                id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId}
-            >
+                style={{ minWidth: 'fit-content' }}
-              {typeof tooltipText === 'string' ? <span className={'text-wrap p-1 px-2 bg-secondary ' + {tooltipTextClasses}}>{tooltipText}</span> : tooltipText}
+                className={'text-wrap p-1 px-2 bg-secondary w-100' + tooltipClasses}
-            </Popover.Content>
+              >
-          </Popover>
+                {typeof tooltipText === 'string' ? <span className={'text-wrap p-1 px-2 bg-secondary ' + { tooltipTextClasses }}>{tooltipText}</span> : tooltipText}
-        }
+              </Popover.Content>
-        delay={delay}
+            </Popover>
-      >
+          }
+          delay={delay}
+        >
+          {children}
+        </OverlayTrigger>
+      </Fragment>
+    ) : (
+      <Fragment>
         {children}
-      </OverlayTrigger>
+      </Fragment>
-    </Fragment>
+    ))
   )
 }

libs/remix-ui/helper/src/types/customtooltip.ts

@@ -9,4 +9,5 @@ export type CustomTooltipType = {
   tooltipText: string | JSX.Element,
   tooltipTextClasses?: string
   delay?: OverlayDelay
+  hide?: boolean
 }

libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx

@@ -26,19 +26,26 @@ export function LanguageOptions({ plugin }: { plugin: any }) {
 
   return (
     <>
-      <div className="d-flex align-items-center justify-content-end mr-2">
+      <div className={langOptions !== 'fr' ? `d-flex align-items-center justify-content-end mr-2` : `d-flex align-items-center justify-content-end mr-3`}>
-        <DropdownButton title={langOptions} id="langdropdown" size="sm">
+        <Dropdown>
-          {['EN', 'ES', 'FR', 'ZH'].map(lang => (
+          <Dropdown.Toggle title={langOptions} id="languagedropdown" size="sm">
-            <DropdownItem as={'span'} onClick={() =>
+            {langOptions}
-            {
+          </Dropdown.Toggle>
-              changeLanguage(lang.toLowerCase())
+          <Dropdown.Menu className="dropdown-menu langSelector" style={{ minWidth: '2rem', backgroundColor: 'var(--body-bg)'}}>
-              setLangOptions(lang)
+            {['EN', 'ES', 'FR', 'IT', 'ZH'].map((lang, index) => (
-            }}
+              <DropdownItem as={'span'} className="p-2" onClick={() =>
-            >
+              {
-              {lang}
+                changeLanguage(lang.toLowerCase())
-            </DropdownItem>
+                setLangOptions(lang)
-          ))}
+              }}
-        </DropdownButton>
+              style={{ color: 'var(--text)', cursor: 'pointer' }}
+              key={index}
+              >
+                {lang}
+              </DropdownItem>
+            ))}
+          </Dropdown.Menu>
+        </Dropdown>
       </div>
     </>
   )

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css

@@ -109,3 +109,8 @@
 .remixui_home_carouselText {
   font-size: rfs-fluid-value(1rem);
 }
+
+.langSelectorbg {
+  background-color: var(--body-bg);
+  color: var(--text);
+}

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -334,6 +334,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }
 
+  const dragStatus = (isDragged: boolean) => {
+    props.dragStatus(isDragged)
+  }
+
   useEffect(() => {
     if (files[ROOT_PATH]){
       try {
@@ -349,7 +353,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
 
   return (
-    <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove}>
+    <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove} dragStatus={dragStatus}>
       <div ref={treeRef} tabIndex={0} style={{outline: 'none'}}>
         <TreeView id="treeView">
           <li key={`treeViewLiMenu`} data-id={`treeViewLiMenu`} className="li_tv">
@@ -393,6 +397,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
                     key={index}
                     showIconsMenu={props.showIconsMenu}
                     hideIconsMenu={props.hideIconsMenu}
+                    dragStatus={state.dragStatus}
                   />
                 ))
               }

libs/remix-ui/workspace/src/lib/components/file-label.tsx

@@ -14,6 +14,7 @@ export interface FileLabelProps {
   }
   fileDecorations: fileDecoration[]
   editModeOff: (content: string) => void
+  dragStatus: boolean
 }
 
 export const FileLabel = (props: FileLabelProps) => {
@@ -84,6 +85,7 @@ export const FileLabel = (props: FileLabelProps) => {
         tooltipText={`${file.path}`}
         tooltipId={`fileExplorer.${file.path}`}
         tooltipClasses="text-nowrap"
+        hide={props.dragStatus}
       >
         <span className={`remixui_label ${fileStateClasses} ` + (file.isDirectory ? 'folder' : 'remixui_leaf')} data-path={file.path}>
           {file.name}

libs/remix-ui/workspace/src/lib/components/file-render.tsx

@@ -25,6 +25,7 @@ export interface RenderFileProps {
   handleClickFile: (path: string, type: string) => void
   handleContextMenu: (pageX: number, pageY: number, path: string, content: string, type: string) => void
   fileDecorations: fileDecoration[]
+  dragStatus: boolean
 }
 
 export const FileRender = (props: RenderFileProps) => {
@@ -107,7 +108,7 @@ export const FileRender = (props: RenderFileProps) => {
           <>
             <Draggable isDraggable={props.focusEdit.element !== null} file={file} expandedPath={props.expandPath} handleClickFolder={props.handleClickFolder}>
               <div className="d-flex flex-row">
-                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} />
+                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} dragStatus={props.dragStatus} />
                 <FileDecorationIcons file={file} fileDecorations={props.fileDecorations} />
               </div>
             </Draggable>
@@ -138,6 +139,7 @@ export const FileRender = (props: RenderFileProps) => {
                 handleContextMenu={props.handleContextMenu}
                 expandPath={props.expandPath}
                 key={index}
+                dragStatus={props.dragStatus}
               />
             ))}
           </TreeView>
@@ -155,7 +157,7 @@ export const FileRender = (props: RenderFileProps) => {
           <>
             <Draggable isDraggable={props.focusEdit.element !== null} file={file} expandedPath={props.expandPath} handleClickFolder={props.handleClickFolder}>
               <div className="d-flex flex-row">
-                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} />
+                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} dragStatus={props.dragStatus} />
                 <FileDecorationIcons file={file} fileDecorations={props.fileDecorations} />
               </div>
             </Draggable>

libs/remix-ui/workspace/src/lib/components/workspace-hamburger-item.tsx

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import {CustomTooltip, CustomMenu, CustomIconsToggle} from '@remix-ui/helper'
 import {Dropdown, NavDropdown} from 'react-bootstrap'
 import {FormattedMessage} from 'react-intl'
+import { AppContext, appPlatformType } from 'libs/remix-ui/app/src/lib/remix-app/context/context'
 
 const _paq = (window._paq = window._paq || [])
 
@@ -10,13 +11,16 @@ export interface HamburgerMenuItemProps {
   kind: string
   actionOnClick: () => void
   fa: string
+  platforms: appPlatformType[]
 }
 
 export function HamburgerMenuItem(props: HamburgerMenuItemProps) {
   const {hideOption} = props
+  const {platform} = useContext(AppContext)
   const uid = 'workspace' + props.kind
   return (
     <>
+      {props.platforms.includes(platform)?(
       <Dropdown.Item>
         <CustomTooltip placement="right" tooltipId={uid + 'Tooltip'} tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id={'filePanel.workspace.' + props.kind} />}>
           <div
@@ -33,7 +37,7 @@ export function HamburgerMenuItem(props: HamburgerMenuItemProps) {
             </span>
           </div>
         </CustomTooltip>
-      </Dropdown.Item>
+      </Dropdown.Item>):null}
     </>
   )
 }
@@ -69,6 +73,7 @@ export interface HamburgerSubMenuItemProps {
   id: string
   title: string
   subMenus: Array<HamburgerMenuItemProps>
+  platforms: appPlatformType[]
 }
 
 export function HamburgerSubMenuItem(props: HamburgerSubMenuItemProps) {
@@ -76,7 +81,7 @@ export function HamburgerSubMenuItem(props: HamburgerSubMenuItemProps) {
     <>
       <NavDropdown title={props.title} as={CustomMenu} key={props.id} id={props.id} drop="right">
         {props.subMenus.map((item) => (
-          <NavHamburgerMenuItem kind={item.kind} fa={item.fa} hideOption={item.hideOption} actionOnClick={item.actionOnClick} />
+          <NavHamburgerMenuItem platforms={props.platforms} kind={item.kind} fa={item.fa} hideOption={item.hideOption} actionOnClick={item.actionOnClick} />
         ))}
       </NavDropdown>
     </>

libs/remix-ui/workspace/src/lib/components/workspace-hamburger.tsx

@@ -33,6 +33,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.createWorkspace()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web', 'desktop']}
       ></HamburgerMenuItem>
       <HamburgerMenuItem
         kind="clone"
@@ -42,6 +43,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.cloneGitRepository()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web', 'desktop']}
       ></HamburgerMenuItem>
       <HamburgerMenuItem
         kind="rename"
@@ -51,6 +53,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.renameCurrentWorkspace()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web']}
       ></HamburgerMenuItem>
       <HamburgerMenuItem
         kind="download"
@@ -60,6 +63,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.downloadCurrentWorkspace()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web']}
       ></HamburgerMenuItem>
       <HamburgerMenuItem
         kind="delete"
@@ -69,6 +73,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.deleteCurrentWorkspace()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web']}
       ></HamburgerMenuItem>
       <Dropdown.Divider className="border mb-0 mt-0 remixui_menuhr" style={{pointerEvents: 'none'}} />
       <HamburgerMenuItem
@@ -79,6 +84,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.deleteAllWorkspaces()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web']}
       ></HamburgerMenuItem>
       <HamburgerMenuItem
         kind="backup"
@@ -88,6 +94,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.downloadWorkspaces()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web']}
       ></HamburgerMenuItem>
       <HamburgerMenuItem
         kind="restore"
@@ -97,6 +104,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.restoreBackup()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web']}
       ></HamburgerMenuItem>
       <Dropdown.Divider className="border mt-0 mb-0 remixui_menuhr" style={{pointerEvents: 'none'}} />
       <HamburgerMenuItem
@@ -107,6 +115,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.addGithubAction()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web', 'desktop']}
       ></HamburgerMenuItem>
       <HamburgerMenuItem
         kind="tssoltestghaction"
@@ -116,6 +125,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.addTsSolTestGithubAction()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web', 'desktop']}
       ></HamburgerMenuItem>
       <HamburgerMenuItem
         kind="slitherghaction"
@@ -125,6 +135,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.addSlitherGithubAction()
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web', 'desktop']}
       ></HamburgerMenuItem>
       <Dropdown.Divider className="border mb-0 mt-0 remixui_menuhr" style={{pointerEvents: 'none'}} />
       <HamburgerMenuItem
@@ -135,6 +146,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.addHelperScripts('etherscan')
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web', 'desktop']}
       ></HamburgerMenuItem>
       <HamburgerMenuItem
         kind="addscriptdeployer"
@@ -144,6 +156,7 @@ export function HamburgerMenu(props: HamburgerMenuProps) {
           props.addHelperScripts('deployer')
           props.hideIconsMenu(!showIconsMenu)
         }}
+        platforms={['web', 'desktop']}
       ></HamburgerMenuItem>
     </>
   )

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

@@ -71,7 +71,8 @@ export function Workspace() {
     mouseOverElement: null,
     showContextMenu: false,
     reservedKeywords: [ROOT_PATH, 'gist-'],
-    copyElement: []
+    copyElement: [],
+    dragStatus: false
   })
 
   useEffect(() => {
@@ -628,6 +629,15 @@ export function Workspace() {
     })
   }
 
+  const dragStatus = (status: boolean) => {
+    setState((prevState) => {
+      return {
+        ...prevState,
+        dragStatus: status
+      }
+    })
+  }
+
   const handleNewFileInput = async (parentFolder?: string) => {
     if (!parentFolder) parentFolder = getFocusedFolder()
     const expandPath = [...new Set([...global.fs.browser.expandPath, parentFolder])]
@@ -1060,6 +1070,7 @@ export function Workspace() {
                     editModeOn={editModeOn}
                     handleNewFileInput={handleNewFileInput}
                     handleNewFolderInput={handleNewFolderInput}
+                    dragStatus={dragStatus}
                   />
                 </div>
               )}
@@ -1118,6 +1129,7 @@ export function Workspace() {
                     editModeOn={editModeOn}
                     handleNewFileInput={handleNewFileInput}
                     handleNewFolderInput={handleNewFolderInput}
+                    dragStatus={dragStatus}
                   />
                 </div>
               )}

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

@@ -125,6 +125,7 @@ export interface FileExplorerProps {
     toGist: (path?: string, type?: string) => void
     handleNewFileInput: (parentFolder?: string) => Promise<void>
     handleNewFolderInput: (parentFolder?: string) => Promise<void>
+    dragStatus: (status: boolean) => void
 }
 type Placement = import('react-overlays/usePopper').Placement
 export interface FileExplorerMenuProps {
@@ -190,6 +191,7 @@ export interface WorkSpaceState {
     showContextMenu: boolean
     reservedKeywords: string[]
     copyElement: CopyElementType[]
+    dragStatus: boolean
 }
 
 export type FileFocusContextType = {

libs/remix-ws-templates/src/templates/semaphore/README.txt

@@ -1,9 +1,10 @@
-REMIX CIRCOM WORKSPACE
+CIRCOM ZKP SEMAPHORE WORKSPACE
 
-Welcome to the Remix Circom Workspace. This workspace becomes available when you create a new workspace using the 'Circom' template.
+Welcome to the Remix Circom ZKP Semaphore Workspace. 
-Directory Structure
 
 The workspace comprises two main directories:
 
-    circuits: Contains sample semaphore contracts. These can be compiled to generate a witness.
+- circuits: Contains sample semaphore contracts. These can be compiled to generate a witness using 'Circom ZKP Compiler' plugin.
-    scripts: Provides a sample script designed for a trusted setup using snarkjs. This script also aids in generating Solidity code, which is essential for on-chain deployment.
+- scripts: Provides a sample script designed for a trusted setup using snarkjs. This script also aids 
+in generating Solidity code, which is essential for on-chain deployment.
+