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

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 {Fragment} from 'react'
-import {OverlayTrigger, Popover} from 'react-bootstrap'
-import {CustomTooltipType} from '../../types/customtooltip'
+import { use } from 'chai'
+import React, { useEffect } from 'react'
+import { Fragment } from 'react'
+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>
-      <OverlayTrigger
-        placement={placement}
-        overlay={
-          <Popover id={`popover-positioned-${placement}`}>
-            <Popover.Content
-              id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId}
-              style={{minWidth: 'fit-content'}}
-              className={'text-wrap p-1 px-2 bg-secondary w-100' + tooltipClasses}
-            >
-              {typeof tooltipText === 'string' ? <span className={'text-wrap p-1 px-2 bg-secondary ' + {tooltipTextClasses}}>{tooltipText}</span> : tooltipText}
-            </Popover.Content>
-          </Popover>
-        }
-        delay={delay}
-      >
+    (!hide ? (
+      <Fragment>
+        <OverlayTrigger
+          placement={placement}
+          overlay={
+
+            <Popover id={`popover-positioned-${placement}`}>
+              <Popover.Content
+                id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId}
+                style={{ minWidth: 'fit-content' }}
+                className={'text-wrap p-1 px-2 bg-secondary w-100' + tooltipClasses}
+              >
+                {typeof tooltipText === 'string' ? <span className={'text-wrap p-1 px-2 bg-secondary ' + { tooltipTextClasses }}>{tooltipText}</span> : tooltipText}
+              </Popover.Content>
+            </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">
-        <DropdownButton title={langOptions} id="langdropdown" size="sm">
-          {['EN', 'ES', 'FR', 'ZH'].map(lang => (
-            <DropdownItem as={'span'} onClick={() =>
-            {
-              changeLanguage(lang.toLowerCase())
-              setLangOptions(lang)
-            }}
-            >
-              {lang}
-            </DropdownItem>
-          ))}
-        </DropdownButton>
+      <div className={langOptions !== 'fr' ? `d-flex align-items-center justify-content-end mr-2` : `d-flex align-items-center justify-content-end mr-3`}>
+        <Dropdown>
+          <Dropdown.Toggle title={langOptions} id="languagedropdown" size="sm">
+            {langOptions}
+          </Dropdown.Toggle>
+          <Dropdown.Menu className="dropdown-menu langSelector" style={{ minWidth: '2rem', backgroundColor: 'var(--body-bg)'}}>
+            {['EN', 'ES', 'FR', 'IT', 'ZH'].map((lang, index) => (
+              <DropdownItem as={'span'} className="p-2" onClick={() =>
+              {
+                changeLanguage(lang.toLowerCase())
+                setLangOptions(lang)
+              }}
+              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/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.
-Directory Structure
+Welcome to the Remix Circom ZKP Semaphore Workspace. 
 
 The workspace comprises two main directories:
 
-    circuits: Contains sample semaphore contracts. These can be compiled to generate a witness.
-    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.
+- 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.
+