fix build for react 18

apps/circuit-compiler/src/app/components/feedback.tsx

@@ -22,7 +22,7 @@ export function CompilerFeedback ({ feedback, filePathToId, hideWarnings, openEr
       <div className="circuit_errors_box py-4">
         <RenderIf condition={ (typeof feedback === "string") && showException }>
           <div className="circuit_feedback error alert alert-danger" data-id="circuit_feedback">
-            <span> { feedback } </span>
+            <span> <>{ feedback }</> </span>
             <div className="close" data-id="renderer" onClick={handleCloseException}>
               <i className="fas fa-times"></i>
             </div>

apps/doc-gen/src/app/views/ErrorView.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const ErrorView: React.FC = () => {
+export const ErrorView: React.FC<React.PropsWithChildren> = () => {
   return (
     <div
       style={{

apps/etherscan/src/app/routes.tsx

@@ -4,11 +4,6 @@ import {HashRouter as Router, Route, Routes, RouteProps} from 'react-router-dom'
 import {ErrorView, HomeView, ReceiptsView, CaptureKeyView} from './views'
 import {DefaultLayout} from './layouts'
 
-interface Props extends RouteProps {
-  component: any // TODO: new (props: any) => React.Component
-  from: string
-}
-
 export const DisplayRoutes = () => (
   <Router>
     <Routes>

apps/etherscan/src/app/views/CaptureKeyView.tsx

@@ -6,7 +6,7 @@ import {useNavigate, useLocation} from 'react-router-dom'
 import {AppContext} from '../AppContext'
 import {SubmitButton} from '../components'
 
-export const CaptureKeyView: React.FC = () => {
+export const CaptureKeyView: React.FC<React.PropsWithChildren> = () => {
   const location = useLocation()
   const navigate = useNavigate()
   const [msg, setMsg] = useState('')

apps/etherscan/src/app/views/ErrorView.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const ErrorView: React.FC = () => {
+export const ErrorView: React.FC<React.PropsWithChildren> = () => {
   return (
     <div className="d-flex w-100 flex-column align-items-center">
       <img className="pb-4" width="250" src="https://res.cloudinary.com/key-solutions/image/upload/v1580400635/solid/error-png.png" alt="Error page" />

apps/etherscan/src/app/views/HomeView.tsx

@@ -7,7 +7,7 @@ import {Receipt} from '../types'
 
 import {VerifyView} from './VerifyView'
 
-export const HomeView: React.FC = () => {
+export const HomeView: React.FC<React.PropsWithChildren> = () => {
   return (
     <AppContext.Consumer>
       {({apiKey, clientInstance, setReceipts, receipts, contracts, networkName}) => {

apps/etherscan/src/app/views/ReceiptsView.tsx

@@ -13,7 +13,7 @@ interface FormValues {
   receiptGuid: string
 }
 
-export const ReceiptsView: React.FC = () => {
+export const ReceiptsView: React.FC<React.PropsWithChildren> = () => {
   const [results, setResults] = useState({succeed: false, message: ''})
   const [isProxyContractReceipt, setIsProxyContractReceipt] = useState(false)
 

apps/etherscan/src/main.tsx

@@ -1,11 +1,14 @@
-import {StrictMode} from 'react'
+import React from 'react'
 import * as ReactDOM from 'react-dom'
-
+import { createRoot } from 'react-dom/client';
 import App from './app/app'
 
-ReactDOM.render(
-  <StrictMode>
+
+const container = document.getElementById('root');
+
+if (container) {
+  createRoot(container).render(<React.StrictMode>
     <App />
-  </StrictMode>,
-  document.getElementById('root')
-)
+  </React.StrictMode>);
+}
+

apps/remix-ide/src/app/providers/external-http-provider.tsx

@@ -27,7 +27,7 @@ export class ExternalHttpProvider extends AbstractProvider {
             values={{
               a: (chunks) => (
                 <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank" rel="noreferrer">
-                  {chunks}
+                  <>{chunks}</>
                 </a>
               )
             }}
@@ -39,7 +39,7 @@ export class ExternalHttpProvider extends AbstractProvider {
             values={{
               a: (chunks) => (
                 <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank" rel="noreferrer">
-                  {chunks}
+                  <>{chunks}</>
                 </a>
               )
             }}
@@ -49,7 +49,7 @@ export class ExternalHttpProvider extends AbstractProvider {
           </div>
           <br />
           <br />
-          <FormattedMessage id="udapp.externalHttpProviderText3" values={{b: (chunks) => <b>{chunks}</b>}} />
+          <FormattedMessage id="udapp.externalHttpProviderText3" values={{b: (chunks) => <b><>{chunks}</></b>}} />
           <br />
           <br />
           <FormattedMessage

apps/vyper/src/app/app.tsx

@@ -25,7 +25,7 @@ interface OutputMap {
   [fileName: string]: VyperCompilationOutput
 }
 
-const App: React.FC = () => {
+const App: React.FC<React.PropsWithChildren> = () => {
   const [contract, setContract] = useState<string>()
   const [output, setOutput] = useState<OutputMap>({})
   const [state, setState] = useState<AppState>({
@@ -82,10 +82,10 @@ const App: React.FC = () => {
           </Button>
         </div>
         <ToggleButtonGroup name="remote" onChange={setEnvironment} type="radio" value={state.environment}>
-          <ToggleButton data-id="remote-compiler" variant="secondary" name="remote" value="remote">
+          <ToggleButton id="remote-compiler" data-id="remote-compiler" variant="secondary" name="remote" value="remote">
             Remote Compiler v0.2.16
           </ToggleButton>
-          <ToggleButton data-id="local-compiler" variant="secondary" name="local" value="local">
+          <ToggleButton id="local-compiler" data-id="local-compiler" variant="secondary" name="local" value="local">
             Local Compiler
           </ToggleButton>
         </ToggleButtonGroup>

apps/vyper/src/main.tsx

@@ -1,11 +1,13 @@
-import {StrictMode} from 'react'
+import React from 'react'
 import * as ReactDOM from 'react-dom'
-
+import { createRoot } from 'react-dom/client';
 import App from './app/app'
 
-ReactDOM.render(
-  <StrictMode>
+const container = document.getElementById('root');
+
+if (container) {
+  createRoot(container).render(<React.StrictMode>
     <App />
-  </StrictMode>,
-  document.getElementById('root')
-)
+  </React.StrictMode>);
+}
+

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

@@ -1,7 +1,7 @@
 import {CustomTooltip} from '@remix-ui/helper'
 import React, {CSSProperties} from 'react' //eslint-disable-line
 import './remix-ui-checkbox.css'
-type Placement = import('react-overlays/usePopper').Placement
+import {Placement} from 'react-bootstrap/esm/types'
 
 /* eslint-disable-next-line */
 export interface RemixUiCheckboxProps {

libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react'
 import copy from 'copy-to-clipboard'
-import {Placement} from 'react-bootstrap/esm/Overlay'
+import {Placement} from 'react-bootstrap/esm/types'
 
 import './copy-to-clipboard.css'
 import {CustomTooltip} from '@remix-ui/helper'

libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-tooltip.tsx

@@ -22,9 +22,9 @@ const FileDecorationTooltip = (props: {fileDecoration: fileDecoration; icon: JSX
       placement="auto"
       overlay={
         <Popover id={`popover-positioned-auto}`}>
-          <Popover.Content id={`error-tooltip-${props.fileDecoration.path}`} style={{minWidth: 'fit-content'}} className={'text-wrap bg-secondary w-100 p-1 m-0'}>
+          <Popover.Body id={`error-tooltip-${props.fileDecoration.path}`} style={{minWidth: 'fit-content'}} className={'text-wrap bg-secondary w-100 p-1 m-0'}>
             <pre>{getComments(props.fileDecoration)}</pre>
-          </Popover.Content>
+          </Popover.Body>
         </Popover>
       }
     >

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

@@ -17,26 +17,25 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
       <Fragment>
         <OverlayTrigger
           placement={placement}
-          overlay={
-
+          overlay={<>
             <Popover id={`popover-positioned-${placement}`}>
-              <Popover.Content
+              <Popover.Body 
                 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>
+                <>{typeof tooltipText === 'string' ? <span className={'text-wrap p-1 px-2 bg-secondary ' + { tooltipTextClasses }}>{tooltipText}</span> : tooltipText}</>
+              </Popover.Body>
             </Popover>
-          }
+            </>}
           delay={delay}
         >
-          {children}
+          <>{children}</>
         </OverlayTrigger>
       </Fragment>
     ) : (
       <Fragment>
-        {children}
+        <>{children}</>
       </Fragment>
     ))
   )

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

@@ -1,4 +1,4 @@
-import { Placement } from 'react-bootstrap/esm/Overlay'
+import { Placement } from 'react-bootstrap/esm/types'
 import { OverlayDelay, OverlayTriggerRenderProps } from 'react-bootstrap/esm/OverlayTrigger'
 
 export type CustomTooltipType = {

libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx

@@ -1,7 +1,7 @@
 import React, {Fragment, useCallback, useEffect, useState} from 'react'
 import {FormattedMessage} from 'react-intl'
 import {TransformComponent, TransformWrapper} from 'react-zoom-pan-pinch'
-import {GlassMagnifier, MagnifierContainer} from 'react-image-magnifiers'
+import {GlassMagnifier, MagnifierContainer} from '@ricarso/react-image-magnifiers'
 import {ThemeSummary} from '../types'
 import UmlDownload from './components/UmlDownload'
 import './css/solidity-uml-gen.css'

libs/remix-ui/tooltip-popup/src/lib/tooltip-popup.tsx

@@ -5,10 +5,10 @@ import './tooltip-popup.module.css'
 
 const popover = (title?: string, content?: string | React.ReactNode) => (
   <Popover id="popover-basic" className="bg-danger border-danger">
-    <Popover.Title as="h3" className="bg-warning border-0">
+    <Popover.Header as="h3" className="bg-warning border-0">
       {title || 'Tooltip'}
-    </Popover.Title>
-    <Popover.Content className="bg-danger border-info">{content}</Popover.Content>
+    </Popover.Header>
+    <Popover.Body className="bg-danger border-info">{content}</Popover.Body>
   </Popover>
 )
 

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

@@ -1,7 +1,7 @@
 import {CustomTooltip} from '@remix-ui/helper'
 import React, {useState, useEffect, useContext} from 'react' //eslint-disable-line
 import {FormattedMessage} from 'react-intl'
-import {Placement} from 'react-bootstrap/esm/Overlay'
+import {Placement} from 'react-bootstrap/esm/types'
 import {FileExplorerMenuProps} from '../types'
 import { FileSystemContext } from '../contexts'
 const _paq = (window._paq = window._paq || [])

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

@@ -78,7 +78,7 @@ export interface HamburgerSubMenuItemProps {
 export function HamburgerSubMenuItem(props: HamburgerSubMenuItemProps) {
   return (
     <>
-      <NavDropdown title={props.title} as={CustomMenu} key={props.id} id={props.id} drop="right">
+      <NavDropdown title={props.title} as={CustomMenu} key={props.id} id={props.id} dir='right'>
         {props.subMenus.map((item) => (
           <NavHamburgerMenuItem platforms={props.platforms} kind={item.kind} fa={item.fa} hideOption={item.hideOption} actionOnClick={item.actionOnClick} />
         ))}

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

@@ -93,7 +93,11 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
   }
 
   const dispatchFetchWorkspaceDirectory = async (path: string) => {
-    await fetchWorkspaceDirectory(path)
+    try {
+      await fetchWorkspaceDirectory(path)
+    } catch (err) {
+      console.error(err)
+    }    
   }
 
   const dispatchSwitchToWorkspace = async (name: string) => {

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

@@ -5,6 +5,7 @@ import { fileDecoration } from '@remix-ui/file-decorators'
 import { RemixAppManager } from 'libs/remix-ui/plugin-manager/src/types'
 import { ViewPlugin } from '@remixproject/engine-web'
 import { appPlatformTypes } from '@remix-ui/app'
+import { Placement } from 'react-bootstrap/esm/types'
 
 export type action = { name: string, type?: Array<WorkspaceElement>, path?: string[], extension?: string[], pattern?: string[], id: string, multiselect: boolean, label: string, sticky?: boolean, group: number, platform?: appPlatformTypes }
 export interface JSONStandardInput {
@@ -129,7 +130,7 @@ export interface FileExplorerProps {
     handleNewFolderInput: (parentFolder?: string) => Promise<void>
     dragStatus: (status: boolean) => void
 }
-type Placement = import('react-overlays/usePopper').Placement
+
 export interface FileExplorerMenuProps {
   title: string
   menuItems: string[]

package.json

@@ -386,6 +386,6 @@
     "webpack-cli": "^4.10.0"
   },
   "resolutions": {
-    "@types/react": "^17.0.24"
+    "@types/react": "^18.2.0"
   }
 }

yarn.lock

@@ -6213,16 +6213,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@>=16.9.11", "@types/react@^17.0.24":
-  version "17.0.52"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.52.tgz#10d8b907b5c563ac014a541f289ae8eaa9bf2e9b"
-  integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^18.2.0":
+"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@>=16.9.11", "@types/react@^18.2.0":
   version "18.2.45"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.45.tgz#253f4fac288e7e751ab3dc542000fb687422c15c"
   integrity sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==