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

desktopoffline
filip mertens 1 year ago
commit 7da2052e40
  1. 1
      apps/remix-ide/src/app.js
  2. 15
      libs/remix-ui/app/src/lib/remix-app/context/context.tsx
  3. 2
      libs/remix-ui/app/src/lib/remix-app/context/provider.tsx
  4. 8
      libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
  5. 3
      libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts
  6. 11
      libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx
  7. 2
      libs/remix-ui/drag-n-drop/src/lib/types/index.ts
  8. 54
      libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
  9. 1
      libs/remix-ui/helper/src/types/customtooltip.ts
  10. 33
      libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx
  11. 5
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
  12. 7
      libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
  13. 2
      libs/remix-ui/workspace/src/lib/components/file-label.tsx
  14. 6
      libs/remix-ui/workspace/src/lib/components/file-render.tsx
  15. 11
      libs/remix-ui/workspace/src/lib/components/workspace-hamburger-item.tsx
  16. 13
      libs/remix-ui/workspace/src/lib/components/workspace-hamburger.tsx
  17. 14
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
  18. 2
      libs/remix-ui/workspace/src/lib/types/index.ts
  19. 11
      libs/remix-ws-templates/src/templates/semaphore/README.txt

@ -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

@ -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

@ -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>

@ -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 (

@ -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
})

@ -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)

@ -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
}

@ -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>
))
)
}

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

@ -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>
</>
)

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

@ -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}
/>
))
}

@ -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}

@ -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>

@ -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>
</>

@ -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>
</>
)

@ -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>
)}

@ -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 = {

@ -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.

Loading…
Cancel
Save