Merge pull request #4360 from ethereum/fixcontext

fix context

.circleci/config.yml

@@ -29,9 +29,9 @@ jobs:
           name: Build
           command: |
             if [ "${CIRCLE_BRANCH}" == "master" ]; then
-              NX_BIN_URL=http://127.0.0.1:8080/assets/js/soljson NX_WASM_URL=http://127.0.0.1:8080/assets/js/soljson NPM_URL=http://localhost:9090/ yarn build:production
+              NX_BIN_URL=http://127.0.0.1:8080/assets/js/soljson NX_WASM_URL=http://127.0.0.1:8080/assets/js/soljson NX_NPM_URL=http://127.0.0.1:9090/ yarn build:production
             else
-              NX_BIN_URL=http://127.0.0.1:8080/assets/js/soljson NX_WASM_URL=http://127.0.0.1:8080/assets/js/soljson NPM_URL=http://localhost:9090/ yarn build
+              NX_BIN_URL=http://127.0.0.1:8080/assets/js/soljson NX_WASM_URL=http://127.0.0.1:8080/assets/js/soljson NX_NPM_URL=http://127.0.0.1:9090/ yarn build
             fi
       - run: yarn run build:e2e
       
@@ -313,7 +313,7 @@ jobs:
           at: .
       - run: unzip ./persist/dist.zip
       - run: yarn install --cwd ./apps/remix-ide-e2e --modules-folder ../../node_modules
-
+      - run: mkdir node_modules/hardhat && wget https://unpkg.com/hardhat/console.sol -O node_modules/hardhat/console.sol
       - run: ls -la ./dist/apps/remix-ide/assets/js
       - run: yarn run selenium-install || yarn run selenium-install
       - when:

libs/remix-lib/src/types/ICompilerApi.ts

@@ -48,6 +48,7 @@ export interface ICompilerApi {
     emit?: (key: string, ...payload: any) => void
 
     setSolJsonBinData: (binData: iSolJsonBinData) => void
+    solJsonBinData: iSolJsonBinData
 }
 
 export interface iSolJsonBinDataBuild {

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

@@ -1,5 +1,5 @@
 export { default as RemixApp } from './lib/remix-app/remix-app'
-export { dispatchModalContext, dispatchModalInterface, AppContext, appProviderContextType, appPlatformTypes } from './lib/remix-app/context/context'
+export { dispatchModalContext, dispatchModalInterface, AppContext, appProviderContextType, appPlatformTypes, platformContext, onLineContext } from './lib/remix-app/context/context'
 export { ModalProvider, useDialogDispatchers } from './lib/remix-app/context/provider'
 export { AppModal } from './lib/remix-app/interface/index'
 export { AlertModal } from './lib/remix-app/interface/index'

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

@@ -8,9 +8,6 @@ export type appProviderContextType = {
   showEnter: boolean,
   appManager: any
   modal: any
-  layout: any
-  platform: appPlatformTypes
-  online: boolean
 }
 
 export enum appPlatformTypes  {
@@ -18,8 +15,9 @@ export enum appPlatformTypes  {
   desktop = 'desktop'
 }
 
-
 export const AppContext = React.createContext<appProviderContextType>(null)
+export const onLineContext = React.createContext<boolean>(null)
+export const platformContext = React.createContext<appPlatformTypes>(null)
 
 export interface dispatchModalInterface {
   modal: (data: AppModal) => void

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

@@ -8,7 +8,7 @@ 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, appProviderContextType } from './context/context'
+import { appProviderContextType, onLineContext, platformContext } from './context/context'
 import { FormattedMessage, IntlProvider } from 'react-intl'
 import {CustomTooltip} from '@remix-ui/helper'
 import {UsageTypes} from './types'
@@ -105,10 +105,7 @@ const RemixApp = (props: IRemixAppUi) => {
     showMatamo: props.app.showMatamo,
     appManager: props.app.appManager,
     showEnter: props.app.showEnter,
-    modal: props.app.notification,
-    layout: props.app.layout,
-    platform: props.app.platform,
-    online: online
+    modal: props.app.notification
   }
 
   const handleUserChosenType = async (type) => {
@@ -151,41 +148,45 @@ const RemixApp = (props: IRemixAppUi) => {
   return (
     //@ts-ignore
     <IntlProvider locale={locale.code} messages={locale.messages}>
-      <AppProvider value={value}>
-        <OriginWarning></OriginWarning>
-        <MatomoDialog hide={!appReady} okFn={() => setShowEnterDialog(true)}></MatomoDialog>
-        {showEnterDialog && <EnterDialog handleUserChoice={(type) => handleUserChosenType(type)}></EnterDialog>}
-        <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()}
-          </div>
-          <div
-            ref={sidePanelRef}
-            id="side-panel"
-            data-id="remixIdeSidePanel"
-            className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}
-          >
-            {props.app.sidePanel.render()}
-          </div>
-          <DragBar
-            resetTrigger={resetTrigger}
-            maximiseTrigger={maximiseTrigger}
-            minWidth={285}
-            refObject={sidePanelRef}
-            hidden={hideSidePanel}
-            setHideStatus={setHideSidePanel}
-          ></DragBar>
-          <div id="main-panel" data-id="remixIdeMainPanel" className="mainpanel d-flex">
-            <RemixUIMainPanel Context={AppContext}></RemixUIMainPanel>
-            <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-all-tabs" tooltipText={<FormattedMessage id="remixApp.scrollToSeeAllTabs" />}>
-              <div className="remix-ui-tabs_end remix-bg-opacity position-absolute position-fixed"></div>
-            </CustomTooltip>
-          </div>
-        </div>
-        <div>{props.app.hiddenPanel.render()}</div>
-        <AppDialogs></AppDialogs>
-        <DialogViewPlugin></DialogViewPlugin>
-      </AppProvider>
+      <platformContext.Provider value={props.app.platform}>
+        <onLineContext.Provider value={online}>
+          <AppProvider value={value}>
+            <OriginWarning></OriginWarning>
+            <MatomoDialog hide={!appReady} okFn={() => setShowEnterDialog(true)}></MatomoDialog>
+            {showEnterDialog && <EnterDialog handleUserChoice={(type) => handleUserChosenType(type)}></EnterDialog>}
+            <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()}
+              </div>
+              <div
+                ref={sidePanelRef}
+                id="side-panel"
+                data-id="remixIdeSidePanel"
+                className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}
+              >
+                {props.app.sidePanel.render()}
+              </div>
+              <DragBar
+                resetTrigger={resetTrigger}
+                maximiseTrigger={maximiseTrigger}
+                minWidth={285}
+                refObject={sidePanelRef}
+                hidden={hideSidePanel}
+                setHideStatus={setHideSidePanel}
+              ></DragBar>
+              <div id="main-panel" data-id="remixIdeMainPanel" className="mainpanel d-flex">
+                <RemixUIMainPanel layout={props.app.layout}></RemixUIMainPanel>
+                <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-all-tabs" tooltipText={<FormattedMessage id="remixApp.scrollToSeeAllTabs" />}>
+                  <div className="remix-ui-tabs_end remix-bg-opacity position-absolute position-fixed"></div>
+                </CustomTooltip>
+              </div>
+            </div>
+            <div>{props.app.hiddenPanel.render()}</div>
+            <AppDialogs></AppDialogs>
+            <DialogViewPlugin></DialogViewPlugin>
+          </AppProvider>
+        </onLineContext.Provider>
+      </platformContext.Provider>
     </IntlProvider>
   )
 }

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

@@ -7,7 +7,9 @@ import Carousel from 'react-multi-carousel'
 import WorkspaceTemplate from './workspaceTemplate'
 import 'react-multi-carousel/lib/styles.css'
 import CustomNavButtons from './customNavButtons'
-import { AppContext, appPlatformTypes } from '@remix-ui/app'
+import { appPlatformTypes, platformContext } from '@remix-ui/app'
+
+
 declare global {
   interface Window {
     _paq: any
@@ -19,7 +21,7 @@ interface HomeTabGetStartedProps {
 }
 
 function HomeTabGetStarted({plugin}: HomeTabGetStartedProps) {
-  const {platform} = useContext(AppContext)
+  const platform = useContext(platformContext)
   const themeFilter = useContext(ThemeContext)
   const carouselRef = useRef<any>({})
   const carouselRefDiv = useRef(null)

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

@@ -9,7 +9,7 @@ import HomeTabScamAlert from './components/homeTabScamAlert'
 import HomeTabGetStarted from './components/homeTabGetStarted'
 import HomeTabFeatured from './components/homeTabFeatured'
 import HomeTabFeaturedPlugins from './components/homeTabFeaturedPlugins'
-import { AppContext, appPlatformTypes } from '@remix-ui/app'
+import { appPlatformTypes, platformContext } from '@remix-ui/app'
 import { HomeTabFileElectron } from './components/homeTabFileElectron'
 import { LanguageOptions } from './components/homeTablangOptions'
 
@@ -24,7 +24,7 @@ export interface RemixUiHomeTabProps {
 }
 
 export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
-  const {platform} = useContext(AppContext)
+  const platform = useContext(platformContext)
   const {plugin} = props
 
   const [state, setState] = useState<{

libs/remix-ui/panel/src/lib/main/main-panel.tsx

@@ -3,17 +3,17 @@ import React, {useContext, useEffect, useRef, useState} from 'react' // eslint-d
 import DragBar from '../dragbar/dragbar'
 import RemixUIPanelPlugin from '../plugins/panel-plugin'
 import {PluginRecord} from '../types'
-import { AppContext, appPlatformTypes } from '@remix-ui/app'
+import { appPlatformTypes, platformContext } from '@remix-ui/app'
 import './main-panel.css'
 
 
 export type RemixUIMainPanelProps = {
-  Context: React.Context<any>
+  layout: any
 }
 
 const RemixUIMainPanel = (props: RemixUIMainPanelProps) => {
-  const {platform} = useContext(AppContext)
-  const appContext = useContext(props.Context)
+  const platform = useContext(platformContext)
+  const {layout} = props
   const [plugins, setPlugins] = useState<PluginRecord[]>([])
   const editorRef = useRef<HTMLDivElement>(null)
   const mainPanelRef = useRef<HTMLDivElement>(null)
@@ -23,9 +23,9 @@ const RemixUIMainPanel = (props: RemixUIMainPanelProps) => {
   const refs = [tabsRef, editorRef, mainPanelRef, terminalRef]
 
   const renderPanels = () => {
-    if (appContext) {
+    if (layout.panels) {
       const pluginPanels: PluginRecord[] = []
-      Object.values(appContext.layout.panels).map((panel: any) => {
+      Object.values(layout.panels).map((panel: any) => {
         pluginPanels.push({
           profile: panel.plugin.profile,
           active: panel.active,
@@ -40,23 +40,23 @@ const RemixUIMainPanel = (props: RemixUIMainPanelProps) => {
 
   useEffect(() => {
     renderPanels()
-    appContext.layout.event.on('change', () => {
+    layout.event.on('change', () => {
       renderPanels()
     })
 
     return () => {
-      appContext.layout.event.off('change')
+      layout.event.off('change')
     }
   }, [])
 
   const showTerminal = (hide: boolean) => {
-    appContext.layout.panels.terminal.minimized = hide
-    appContext.layout.event.emit('change', appContext.layout.panels)
-    appContext.layout.emit('change', appContext.layout.panels)
+    layout.panels.terminal.minimized = hide
+    layout.event.emit('change', layout.panels)
+    layout.emit('change', layout.panels)
   }
 
   const resize = (height: number) => {
-    appContext.layout.emit('resize', height)
+    layout.emit('resize', height)
   }
 
   return (

libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx

@@ -4,7 +4,7 @@ import React, { useContext, useEffect, useState } from 'react'
 import {FormattedMessage, useIntl} from 'react-intl'
 import '../remix-ui-plugin-manager.css'
 import {CustomTooltip} from '@remix-ui/helper'
-import { AppContext } from '@remix-ui/app'
+import { onLineContext } from '@remix-ui/app'
 interface PluginCardProps {
   profile: any
   buttonText: string
@@ -12,7 +12,7 @@ interface PluginCardProps {
 }
 
 function InactivePluginCard({profile, buttonText, activatePlugin}: PluginCardProps) {
-  const {online} = useContext(AppContext)
+  const online = useContext(onLineContext)
   const [canBeActivated, setCanBeActivated] = useState(false)
   const intl = useIntl()
   useEffect(() => {

libs/remix-ui/search/src/lib/components/Search.tsx

@@ -6,11 +6,13 @@ import {Include} from './Include'
 import {Exclude} from './Exclude'
 import {FindContainer} from './FindContainer'
 import {Undo} from './Undo'
-import { AppContext } from '@remix-ui/app'
+import { platformContext } from '@remix-ui/app'
+
+
 
 export const SearchTab = (props) => {
   const plugin = props.plugin
-  const {platform} = useContext(AppContext)
+  const platform = useContext(platformContext)
 
   return (
     <>

libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts

@@ -16,6 +16,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
   compileErrors: any
   compileTabLogic: CompileTabLogic
   configurationSettings: ConfigurationSettings
+  solJsonBinData: iSolJsonBinData
 
   onCurrentFileChanged: (fileName: string) => void
   // onResetResults: () => void
@@ -281,7 +282,11 @@ export const CompilerApiMixin = (Base) => class extends Base {
     this.on('fileManager', 'fileClosed', this.data.eventHandlers.onFileClosed)
 
     this.on('compilerloader', 'jsonBinDataLoaded', (urls: iSolJsonBinData) => {
-      this.setSolJsonBinData(urls)
+      try{
+        this.setSolJsonBinData(urls)
+      }catch(e){
+      }
+      this.solJsonBinData = urls
     })
     this.call('compilerloader', 'getJsonBinData')
 

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -10,11 +10,13 @@ import {listenToEvents} from './actions/compiler'
 import {getValidLanguage} from '@remix-project/remix-solidity'
 import {CopyToClipboard} from '@remix-ui/clipboard'
 import {configFileContent} from './compilerConfiguration'
-import { AppContext, appPlatformTypes } from '@remix-ui/app'
+import { appPlatformTypes, platformContext, onLineContext } from '@remix-ui/app'
 
 import './css/style.css'
 
 import { CompilerDropdown } from './components/compiler-dropdown'
+
+
 const defaultPath = 'compiler_config.json'
 
 declare global {
@@ -26,7 +28,8 @@ declare global {
 const _paq = (window._paq = window._paq || []) //eslint-disable-line
 
 export const CompilerContainer = (props: CompilerContainerProps) => {
-  const {platform, online} = useContext(AppContext)
+  const online = useContext(onLineContext)
+  const platform = useContext(platformContext)
   const {
     api,
     compileTabLogic,

libs/remix-ui/solidity-compiler/src/lib/components/compiler-dropdown.tsx

@@ -1,4 +1,6 @@
-import { AppContext, appPlatformTypes } from '@remix-ui/app';
+import { appPlatformTypes, platformContext, onLineContext } from '@remix-ui/app';
+
+;
 import React, { useEffect, useState, useRef, useReducer, useContext } from 'react' // eslint-disable-line
 import { Dropdown } from 'react-bootstrap';
 import { CompilerMenu, CompilerMenuToggle } from './compiler-menu';
@@ -20,7 +22,8 @@ interface compilerDropdownProps {
 }
 
 export const CompilerDropdown = (props: compilerDropdownProps) => {
-  const {platform, online} = useContext(AppContext)
+  const online = useContext(onLineContext)
+  const platform = useContext(platformContext)
   const { customVersions, selectedVersion, defaultVersion, allversions, handleLoadVersion, _shouldBeAdded, onlyDownloaded } = props
   return (
     <Dropdown id="versionSelector" data-id="versionSelector">

libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx

@@ -140,7 +140,10 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
   }
 
   api.setSolJsonBinData = (data: iSolJsonBinData) => {
+    setSolJsonBinData(data)
+  }
 
+  const setSolJsonBinData = (data: iSolJsonBinData) => {
     const builtin: iSolJsonBinDataBuild =
     {
       path: 'builtin',
@@ -245,6 +248,12 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
     </div>
   )
 
+  useEffect(() => {
+    if(!state.solJsonBinData && api.solJsonBinData){
+      setSolJsonBinData(api.solJsonBinData)
+    }
+  },[])
+
   return (
     <>
       <div id="compileTabView">

libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx

@@ -9,7 +9,9 @@ import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 import { format } from 'util'
 import './css/style.css'
 import { CustomTooltip } from '@remix-ui/helper'
-import { AppContext, appPlatformTypes } from '@remix-ui/app'
+import { appPlatformTypes, platformContext } from '@remix-ui/app'
+
+
 
 const _paq = ((window as any)._paq = (window as any)._paq || []) // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -44,7 +46,7 @@ interface FinalResult {
 
 export const SolidityUnitTesting = (props: Record<string, any>) => {
   // eslint-disable-line @typescript-eslint/no-explicit-any
-  const {platform} = useContext(AppContext)
+  const platform = useContext(platformContext)
   const { helper, testTab, initialPath } = props
   const { testTabLogic } = testTab
 
@@ -164,10 +166,6 @@ export const SolidityUnitTesting = (props: Record<string, any>) => {
       }
     })
 
-    testTab.on('filePanel', 'workspaceCreated', async () => {
-      setTimeout(async () => await setCurrentPath(defaultPath), 100)
-    })
-
     testTab.on('filePanel', 'setWorkspace', async () => {
       await setCurrentPath(defaultPath)
     })

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

@@ -6,7 +6,7 @@ import Home from './components/Home'
 import { verticalScrollReducer } from './reducers/verticalScrollReducer'
 import { Chevron } from './components/Chevron'
 import { IconRecord } from './types'
-import { AppContext } from '@remix-ui/app'
+import { onLineContext } from '@remix-ui/app'
 import { CustomTooltip } from '@remix-ui/helper'
 export interface RemixUiVerticalIconsPanelProps {
   verticalIconsPlugin: Plugin
@@ -24,7 +24,7 @@ const RemixUiVerticalIconsPanel = ({ verticalIconsPlugin, icons }: RemixUiVertic
   const iconPanelRef = useRef<any>()
   const [activateScroll, dispatchScrollAction] = useReducer(verticalScrollReducer, initialState)
   const [theme, setTheme] = useState<string>('dark')
-  const { online } = useContext(AppContext)
+  const online = useContext(onLineContext)
 
   const evaluateScrollability = () => {
     dispatchScrollAction({

libs/remix-ui/workspace/src/lib/components/electron-menu.tsx

@@ -1,12 +1,12 @@
 import React, { MouseEventHandler, useContext, useEffect, useState } from "react"
 import { FileSystemContext } from "../contexts"
-import { AppContext, appPlatformTypes } from '@remix-ui/app'
+import { appPlatformTypes, platformContext } from '@remix-ui/app'
 import { FormattedMessage } from "react-intl"
 import '../css/electron-menu.css'
 import { CustomTooltip } from '@remix-ui/helper'
 
 export const ElectronMenu = () => {
-  const {platform} = useContext(AppContext)
+  const platform = useContext(platformContext)
   const global = useContext(FileSystemContext)
 
   useEffect(() => {

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

@@ -5,7 +5,7 @@ import {action, FileExplorerContextMenuProps} from '../types'
 import '../css/file-explorer-context-menu.css'
 import {customAction} from '@remixproject/plugin-api'
 import UploadFile from './upload-file'
-import { AppContext, appPlatformTypes } from '@remix-ui/app'
+import { appPlatformTypes, platformContext } from '@remix-ui/app'
 
 declare global {
   interface Window {
@@ -15,7 +15,7 @@ declare global {
 const _paq = (window._paq = window._paq || []) //eslint-disable-line
 
 export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => {
-  const {platform} = useContext(AppContext)
+  const platform = useContext(platformContext)
   const {
     actions,
     createNewFile,

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

@@ -2,7 +2,7 @@ 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, appPlatformTypes } from '@remix-ui/app'
+import { appPlatformTypes, platformContext } from '@remix-ui/app'
 const _paq = (window._paq = window._paq || [])
 
 export interface HamburgerMenuItemProps {
@@ -15,7 +15,7 @@ export interface HamburgerMenuItemProps {
 
 export function HamburgerMenuItem(props: HamburgerMenuItemProps) {
   const {hideOption} = props
-  const {platform} = useContext(AppContext)
+  const platform = useContext(platformContext)
   const uid = 'workspace' + props.kind
   return (
     <>

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

@@ -12,7 +12,7 @@ import {MenuItems, WorkSpaceState} from './types'
 import {contextMenuActions} from './utils'
 import FileExplorerContextMenu from './components/file-explorer-context-menu'
 import { customAction } from '@remixproject/plugin-api'
-import { AppContext, appPlatformTypes } from '@remix-ui/app'
+import { appPlatformTypes, platformContext } from '@remix-ui/app'
 import { ElectronMenu } from './components/electron-menu'
 
 const _paq = (window._paq = window._paq || [])
@@ -20,7 +20,7 @@ const _paq = (window._paq = window._paq || [])
 const canUpload = window.File || window.FileReader || window.FileList || window.Blob
 
 export function Workspace() {
-  const {platform} = useContext(AppContext)
+  const platform = useContext(platformContext)
   const LOCALHOST = ' - connect to localhost - '
   const NO_WORKSPACE = ' - none - '
   const ELECTRON = 'electron'

libs/remix-url-resolver/src/resolve.ts

@@ -184,7 +184,7 @@ export class RemixURLResolver {
     }
 
     const npm_urls = ["https://cdn.jsdelivr.net/npm/", "https://unpkg.com/"]
-    process && process.env && process.env['NPM_URL'] && npm_urls.unshift(process.env['NPM_URL'])
+    process && process.env && process.env['NX_NPM_URL'] && npm_urls.unshift(process.env['NX_NPM_URL'])
     let content = null
     // get response from all urls
     for (let i = 0; i < npm_urls.length; i++) {