Merge pull request #4355 from ethereum/react18v4_desktop

React18v4 desktop

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/circuit-compiler/src/main.tsx

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

apps/debugger/src/main.tsx

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

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

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

apps/doc-gen/src/main.tsx

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

apps/doc-viewer/src/main.tsx

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

apps/etherscan/src/app/EtherscanPluginClient.ts

@@ -9,8 +9,8 @@ export class EtherscanPluginClient extends PluginClient {
 
   constructor() {
     super()
-    createClient(this)
     this.internalEvents = new EventManager()
+    createClient(this)
     this.onload()
   }
 

apps/etherscan/src/app/app.tsx

@@ -40,22 +40,27 @@ const App = () => {
 
   contractsRef.current = contracts
 
-  useEffect(() => {
-    plugin.internalEvents.on('etherscan_activated', () => {
-      plugin.on('solidity', 'compilationFinished', (fileName: string, source: CompilationFileSources, languageVersion: string, data: CompilationResult) => {
-        const newContractsNames = getNewContractNames(data)
+  const setListeners = () => {
+    plugin.on('solidity', 'compilationFinished', (fileName: string, source: CompilationFileSources, languageVersion: string, data: CompilationResult) => {
+      const newContractsNames = getNewContractNames(data)
+
+      const newContractsToSave: string[] = [...contractsRef.current, ...newContractsNames]
 
-        const newContractsToSave: string[] = [...contractsRef.current, ...newContractsNames]
+      const uniqueContracts: string[] = [...new Set(newContractsToSave)]
 
-        const uniqueContracts: string[] = [...new Set(newContractsToSave)]
+      setContracts(uniqueContracts)
+    })
+    plugin.on('blockchain' as any, 'networkStatus', (result) => {
+      setNetworkName(`${result.network.name} ${result.network.id !== '-' ? `(Chain id: ${result.network.id})` : '(Not supported)'}`)
+    })
+    // @ts-ignore
+    plugin.call('blockchain', 'getCurrentNetworkStatus').then((result: any) => setNetworkName(`${result.network.name} ${result.network.id !== '-' ? `(Chain id: ${result.network.id})` : '(Not supported)'}`))
 
-        setContracts(uniqueContracts)
-      })
-      plugin.on('blockchain' as any, 'networkStatus', (result) => {
-        setNetworkName(`${result.network.name} ${result.network.id !== '-' ? `(Chain id: ${result.network.id})` : '(Not supported)'}`)
-      })
-      // @ts-ignore
-      plugin.call('blockchain', 'getCurrentNetworkStatus').then((result: any) => setNetworkName(`${result.network.name} ${result.network.id !== '-' ? `(Chain id: ${result.network.id})` : '(Not supported)'}`))
+  }
+
+  useEffect(() => {
+    plugin.onload(() => {
+        setListeners()
     })
   }, [])
 

apps/etherscan/src/app/components/HeaderWithSettings.tsx

@@ -13,7 +13,7 @@ interface IconProps {
   from: string
 }
 
-const HomeIcon: React.FC<IconProps> = ({from}: IconProps) => {
+const HomeIcon = ({from}: IconProps) => {
   return (
     <NavLink
       data-id="home"
@@ -31,7 +31,7 @@ const HomeIcon: React.FC<IconProps> = ({from}: IconProps) => {
   )
 }
 
-const ReceiptsIcon: React.FC<IconProps> = ({from}: IconProps) => {
+const ReceiptsIcon = ({from}: IconProps) => {
   return (
     <NavLink
       data-id="receipts"
@@ -49,7 +49,7 @@ const ReceiptsIcon: React.FC<IconProps> = ({from}: IconProps) => {
   )
 }
 
-const SettingsIcon: React.FC<IconProps> = ({from}: IconProps) => {
+const SettingsIcon = ({from}: IconProps) => {
   return (
     <NavLink
       data-id="settings"
@@ -67,11 +67,9 @@ const SettingsIcon: React.FC<IconProps> = ({from}: IconProps) => {
   )
 }
 
-export const HeaderWithSettings: React.FC<Props> = ({title = '', from}) => {
+export const HeaderWithSettings = ({title = '', from}) => {
   return (
-    <AppContext.Consumer>
-      {() => (
-        <div className="d-flex justify-content-between">
+    <div className="d-flex justify-content-between">
           <h6 className="d-inline">{title}</h6>
           <div className="nav">
             <HomeIcon from={from} />
@@ -79,7 +77,5 @@ export const HeaderWithSettings: React.FC<Props> = ({title = '', from}) => {
             <SettingsIcon from={from} />
           </div>
         </div>
-      )}
-    </AppContext.Consumer>
   )
 }

apps/etherscan/src/app/components/SubmitButton.tsx

@@ -8,7 +8,7 @@ interface Props {
   disable?: boolean
 }
 
-export const SubmitButton: React.FC<Props> = ({text, dataId, isSubmitting = false, disable = true}) => {
+export const SubmitButton = ({text, dataId, isSubmitting = false, disable = true}) => {
   return (
     <div>
       <button data-id={dataId} type="submit" className="btn btn-primary btn-block p-1 text-decoration-none" disabled={disable}>

apps/etherscan/src/app/layouts/Default.tsx

@@ -7,7 +7,7 @@ interface Props {
   title?: string
 }
 
-export const DefaultLayout: React.FC<PropsWithChildren<Props>> = ({children, from, title}) => {
+export const DefaultLayout = ({children, from, title}) => {
   return (
     <div>
       <HeaderWithSettings from={from} title={title} />

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

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 
 import {Formik, ErrorMessage, Field} from 'formik'
 import {useNavigate, useLocation} from 'react-router-dom'
@@ -6,59 +6,58 @@ import {useNavigate, useLocation} from 'react-router-dom'
 import {AppContext} from '../AppContext'
 import {SubmitButton} from '../components'
 
-export const CaptureKeyView: React.FC = () => {
+export const CaptureKeyView = () => {
   const location = useLocation()
   const navigate = useNavigate()
   const [msg, setMsg] = useState('')
+  const context = React.useContext(AppContext)
+
+  useEffect(() => {
+    if (!context.apiKey) setMsg('Please provide a 34-character API key to continue')
+  }, [context.apiKey])
+
   return (
-    <AppContext.Consumer>
-      {({apiKey, clientInstance, setAPIKey}) => {
-        if (!apiKey) setMsg('Please provide a 34-character API key to continue')
-        return (
-          <div>
-            <Formik
-              initialValues={{apiKey}}
-              validate={(values) => {
-                const errors = {} as any
-                if (!values.apiKey) {
-                  errors.apiKey = 'Required'
-                } else if (values.apiKey.length !== 34) {
-                  errors.apiKey = 'API key should be 34 characters long'
-                }
-                return errors
-              }}
-              onSubmit={(values) => {
-                const apiKey = values.apiKey
-                if (apiKey.length === 34) {
-                  setAPIKey(values.apiKey)
-                  navigate(location && location.state ? location.state : '/')
-                }
-              }}
-            >
-              {({errors, touched, handleSubmit}) => (
-                <form onSubmit={handleSubmit}>
-                  <div className="form-group mb-2">
-                    <label htmlFor="apikey">API Key</label>
-                    <Field
-                      className={errors.apiKey && touched.apiKey ? 'form-control form-control-sm is-invalid' : 'form-control form-control-sm'}
-                      type="password"
-                      name="apiKey"
-                      placeholder="e.g. GM1T20XY6JGSAPWKDCYZ7B2FJXKTJRFVGZ"
-                    />
-                    <ErrorMessage className="invalid-feedback" name="apiKey" component="div" />
-                  </div>
+    <div>
+      <Formik
+        initialValues={{apiKey: context.apiKey}}
+        validate={(values) => {
+          const errors = {} as any
+          if (!values.apiKey) {
+            errors.apiKey = 'Required'
+          } else if (values.apiKey.length !== 34) {
+            errors.apiKey = 'API key should be 34 characters long'
+          }
+          return errors
+        }}
+        onSubmit={(values) => {
+          const apiKey = values.apiKey
+          if (apiKey.length === 34) {
+            context.setAPIKey(values.apiKey)
+            navigate(location && location.state ? location.state : '/')
+          }
+        }}
+      >
+        {({errors, touched, handleSubmit}) => (
+          <form onSubmit={handleSubmit}>
+            <div className="form-group mb-2">
+              <label htmlFor="apikey">API Key</label>
+              <Field
+                className={errors.apiKey && touched.apiKey ? 'form-control form-control-sm is-invalid' : 'form-control form-control-sm'}
+                type="password"
+                name="apiKey"
+                placeholder="e.g. GM1T20XY6JGSAPWKDCYZ7B2FJXKTJRFVGZ"
+              />
+              <ErrorMessage className="invalid-feedback" name="apiKey" component="div" />
+            </div>
 
-                  <div>
-                    <SubmitButton text="Save" dataId="save-api-key" disable={errors && errors.apiKey ? true : false} />
-                  </div>
-                </form>
-              )}
-            </Formik>
+            <div>
+              <SubmitButton text="Save" dataId="save-api-key" disable={errors && errors.apiKey ? true : false} />
+            </div>
+          </form>
+        )}
+      </Formik>
 
-            <div data-id="api-key-result" className="text-primary mt-4 text-center" style={{fontSize: '0.8em'}} dangerouslySetInnerHTML={{__html: msg}} />
-          </div>
-        )
-      }}
-    </AppContext.Consumer>
+      <div data-id="api-key-result" className="text-primary mt-4 text-center" style={{fontSize: '0.8em'}} dangerouslySetInnerHTML={{__html: msg}} />
+    </div>
   )
 }

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const ErrorView: React.FC = () => {
+export const ErrorView = () => {
   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,29 +7,25 @@ import {Receipt} from '../types'
 
 import {VerifyView} from './VerifyView'
 
-export const HomeView: React.FC = () => {
-  return (
-    <AppContext.Consumer>
-      {({apiKey, clientInstance, setReceipts, receipts, contracts, networkName}) => {
-        return !apiKey ? (
-          <Navigate
-            to={{
-              pathname: '/settings'
-            }}
-          />
-        ) : (
-          <VerifyView
-            contracts={contracts}
-            client={clientInstance}
-            apiKey={apiKey}
-            onVerifiedContract={(receipt: Receipt) => {
-              const newReceipts = [...receipts, receipt]
-              setReceipts(newReceipts)
-            }}
-            networkName={networkName}
-          />
-        )
+export const HomeView = () => {
+  const context = React.useContext(AppContext)
+  
+  return !context.apiKey ? (
+    <Navigate
+      to={{
+        pathname: '/settings'
       }}
-    </AppContext.Consumer>
+    />
+  ) : (
+    <VerifyView
+      contracts={context.contracts}
+      client={context.clientInstance}
+      apiKey={context.apiKey}
+      onVerifiedContract={(receipt: Receipt) => {
+        const newReceipts = [...context.receipts, receipt]
+        context.setReceipts(newReceipts)
+      }}
+      networkName={context.networkName}
+    />
   )
 }

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

@@ -13,9 +13,10 @@ interface FormValues {
   receiptGuid: string
 }
 
-export const ReceiptsView: React.FC = () => {
+export const ReceiptsView = () => {
   const [results, setResults] = useState({succeed: false, message: ''})
   const [isProxyContractReceipt, setIsProxyContractReceipt] = useState(false)
+  const context = React.useContext(AppContext)
 
   const onGetReceiptStatus = async (values: FormValues, clientInstance: any, apiKey: string) => {
     try {
@@ -48,88 +49,82 @@ export const ReceiptsView: React.FC = () => {
     }
   }
 
-  return (
-    <AppContext.Consumer>
-      {({apiKey, clientInstance, receipts, setReceipts}) => {
-        return !apiKey ? (
-          <Navigate
-            to={{
-              pathname: '/settings'
-            }}
-          />
-        ) : (
-          <div>
-            <Formik
-              initialValues={{receiptGuid: ''}}
-              validate={(values) => {
-                const errors = {} as any
-                if (!values.receiptGuid) {
-                  errors.receiptGuid = 'Required'
-                }
-                return errors
-              }}
-              onSubmit={(values) => onGetReceiptStatus(values, clientInstance, apiKey)}
-            >
-              {({errors, touched, handleSubmit, handleChange}) => (
-                <form onSubmit={handleSubmit}>
-                  <div className="form-group mb-2">
-                    <label htmlFor="receiptGuid">Receipt GUID</label>
-                    <Field
-                      className={errors.receiptGuid && touched.receiptGuid ? 'form-control form-control-sm is-invalid' : 'form-control form-control-sm'}
-                      type="text"
-                      name="receiptGuid"
-                    />
-                    <ErrorMessage className="invalid-feedback" name="receiptGuid" component="div" />
-                  </div>
+  return !context.apiKey ? (
+    <Navigate
+      to={{
+        pathname: '/settings'
+      }}
+    />
+  ) : (
+    <div>
+      <Formik
+        initialValues={{receiptGuid: ''}}
+        validate={(values) => {
+          const errors = {} as any
+          if (!values.receiptGuid) {
+            errors.receiptGuid = 'Required'
+          }
+          return errors
+        }}
+        onSubmit={(values) => onGetReceiptStatus(values, context.clientInstance, context.apiKey)}
+      >
+        {({errors, touched, handleSubmit, handleChange}) => (
+          <form onSubmit={handleSubmit}>
+            <div className="form-group mb-2">
+              <label htmlFor="receiptGuid">Receipt GUID</label>
+              <Field
+                className={errors.receiptGuid && touched.receiptGuid ? 'form-control form-control-sm is-invalid' : 'form-control form-control-sm'}
+                type="text"
+                name="receiptGuid"
+              />
+              <ErrorMessage className="invalid-feedback" name="receiptGuid" component="div" />
+            </div>
 
-                  <div className="d-flex mb-2 custom-control custom-checkbox">
-                    <Field
-                      className="custom-control-input"
-                      type="checkbox"
-                      name="isProxyReceipt"
-                      id="isProxyReceipt"
-                      onChange={async (e) => {
-                        handleChange(e)
-                        if (e.target.checked) setIsProxyContractReceipt(true)
-                        else setIsProxyContractReceipt(false)
-                      }}
-                    />
-                    <label className="form-check-label custom-control-label" htmlFor="isProxyReceipt">
-                      It's a proxy contract GUID
-                    </label>
-                  </div>
-                  <SubmitButton text="Check" disable={!touched.receiptGuid || (touched.receiptGuid && errors.receiptGuid) ? true : false} />
-                </form>
-              )}
-            </Formik>
+            <div className="d-flex mb-2 custom-control custom-checkbox">
+              <Field
+                className="custom-control-input"
+                type="checkbox"
+                name="isProxyReceipt"
+                id="isProxyReceipt"
+                onChange={async (e) => {
+                  handleChange(e)
+                  if (e.target.checked) setIsProxyContractReceipt(true)
+                  else setIsProxyContractReceipt(false)
+                }}
+              />
+              <label className="form-check-label custom-control-label" htmlFor="isProxyReceipt">
+                It's a proxy contract GUID
+              </label>
+            </div>
+            <SubmitButton dataId={null} text="Check" disable={!touched.receiptGuid || (touched.receiptGuid && errors.receiptGuid) ? true : false} />
+          </form>
+        )}
+      </Formik>
 
-            <div
-              className={results['succeed'] ? 'text-success mt-3 text-center' : 'text-danger mt-3 text-center'}
-              dangerouslySetInnerHTML={{
-                __html: results.message ? results.message : ''
-              }}
-            />
+      <div
+        className={results['succeed'] ? 'text-success mt-3 text-center' : 'text-danger mt-3 text-center'}
+        dangerouslySetInnerHTML={{
+          __html: results.message ? results.message : ''
+        }}
+      />
 
-            <ReceiptsTable receipts={receipts} />
-            <br />
-            <CustomTooltip tooltipText="Clear the list of receipts" tooltipId="etherscan-clear-receipts" placement="bottom">
-              <Button
-                className="btn-sm"
-                onClick={() => {
-                  setReceipts([])
-                }}
-              >
-                Clear
-              </Button>
-            </CustomTooltip>
-          </div>
-        )
-      }}
-    </AppContext.Consumer>
+      <ReceiptsTable receipts={context.receipts} />
+      <br />
+      <CustomTooltip tooltipText="Clear the list of receipts" tooltipId="etherscan-clear-receipts" placement="bottom">
+        <Button
+          className="btn-sm"
+          onClick={() => {
+            context.setReceipts([])
+          }}
+        >
+          Clear
+        </Button>
+      </CustomTooltip>
+    </div>
   )
 }
 
-const ReceiptsTable: React.FC<{receipts: Receipt[]}> = ({receipts}) => {
+const ReceiptsTable = ({receipts}) => {
   return (
     <div className="table-responsive">
       <h6>Receipts</h6>

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

@@ -24,7 +24,7 @@ interface FormValues {
   expectedImplAddress?: string
 }
 
-export const VerifyView: React.FC<Props> = ({apiKey, client, contracts, onVerifiedContract, networkName}) => {
+export const VerifyView = ({apiKey, client, contracts, onVerifiedContract, networkName}) => {
   const [results, setResults] = useState('')
   const [selectedContract, setSelectedContract] = useState('')
   const [showConstructorArgs, setShowConstructorArgs] = 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(
     <App />
-  </StrictMode>,
-  document.getElementById('root')
-)
+  );
+}
+

apps/remix-ide-e2e/src/commands/sendLowLevelTx.ts

@@ -9,7 +9,7 @@ class sendLowLevelTx extends EventEmitter {
       .sendKeys(`#instance${address} #deployAndRunLLTxCalldata`, ['_', this.api.Keys.BACK_SPACE, callData])
       .waitForElementVisible('#value')
       .clearValue('#value')
-      .sendKeys('#value', ['1', this.api.Keys.BACK_SPACE, value])
+      .sendKeys('#value', value)
       .pause(2000)
       .scrollAndClick(`#instance${address} #deployAndRunLLTxSendTransaction`)
       .perform(() => {

apps/remix-ide-e2e/src/commands/validateValueInput.ts

@@ -5,9 +5,12 @@ class ValidateValueInput extends EventEmitter {
   command (this: NightwatchBrowser, selector: string, valueTosSet: string, expectedValue: string) {
     const browser = this.api
     browser.perform((done) => {
-      browser.clearValue(selector)
-        .pause(2000)
-        .setValue(selector, valueTosSet).pause(2000)
+      browser
+        .clearValue(selector)
+        .execute((selector) => {
+          (document.querySelector(selector) as any).focus()
+        }, [selector], () => { })
+        .setValue(selector, valueTosSet)
         .execute(function (selector) {
           const elem = document.querySelector(selector) as HTMLInputElement
           return elem.value

apps/remix-ide-e2e/src/helpers/init.ts

@@ -10,8 +10,6 @@ type LoadPlugin = {
 export default function (browser: NightwatchBrowser, callback: VoidFunction, url?: string, preloadPlugins = true, loadPlugin?: LoadPlugin, hideToolTips: boolean = true): void {
   browser
     .url(url || 'http://127.0.0.1:8080')
-    //.switchBrowserTab(0)
-    
     .perform((done) => {
       if (!loadPlugin) return done()
       browser
@@ -34,35 +32,41 @@ export default function (browser: NightwatchBrowser, callback: VoidFunction, url
           }
 
           addStyle(`
-            .bs-popover-right {
-              display:none !important;
-            }
-            .bs-popover-top {
-              display:none !important;
-            }
-            .bs-popover-left {
-              display:none !important;
-            }
-            .bs-popover-bottom {
-              display:none !important;
-            }
+          .popover {
+            display:none !important;
+          }
           `);
         })
-      }
-      if (preloadPlugins) {
-        initModules(browser, () => {
-          browser
-            .clickLaunchIcon('solidity')
-            .waitForElementVisible('[for="autoCompile"]')
-            .click('[for="autoCompile"]')
-            .verify.elementPresent('[data-id="compilerContainerAutoCompile"]:checked')
-            .perform(() => { callback() })
+      }})
+      .perform(() => {
+        browser.execute(function () { 
+          (window as any).logs = [];
+          (console as any).browserLog = console.log;
+          (console as any).browserError = console.error
+          console.log = function () {
+            (window as any).logs.push(JSON.stringify(arguments));
+            (console as any).browserLog(...arguments)
+          }
+          console.error = function () {
+            (window as any).logs.push(JSON.stringify(arguments));
+            (console as any).browserError(...arguments)
+          }
         })
-
-      } else {
-        callback()
-      }
-    })
+      })
+      .perform(() => {
+        if (preloadPlugins) {
+          initModules(browser, () => {
+            browser
+              .clickLaunchIcon('solidity')
+              .waitForElementVisible('[for="autoCompile"]')
+              .click('[for="autoCompile"]')
+              .verify.elementPresent('[data-id="compilerContainerAutoCompile"]:checked')
+              .perform(() => { callback() })
+          })
+        } else {
+          callback()
+        }
+      })
 }
 
 function initModules(browser: NightwatchBrowser, callback: VoidFunction) {

apps/remix-ide-e2e/src/local-plugin/src/app/logger.tsx

@@ -4,7 +4,7 @@ interface loggerProps {
   id: string
 }
 
-export const Logger: React.FC<loggerProps> = (props) => {
+export const Logger = (props) => {
   return (
     <div id={props.id} className="jumbotron overflow-auto text-break mb-1 p-2">
       {props.log}

apps/remix-ide-e2e/src/local-plugin/src/main.tsx

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

apps/remix-ide-e2e/src/tests/editor.test.ts

@@ -20,13 +20,13 @@ module.exports = {
       .checkElementStyle('.view-lines', 'font-size', '14px')
       .click('*[data-id="tabProxyZoomIn"]')
       .click('*[data-id="tabProxyZoomIn"]')
-      .checkElementStyle('.view-lines', 'font-size', '16px')
+      .checkElementStyle('.view-lines', 'font-size', '16.8px')
   },
 
   'Should zoom out editor #group1': function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('#editorView')
-      .checkElementStyle('.view-lines', 'font-size', '16px')
+      .checkElementStyle('.view-lines', 'font-size', '16.8px')
       .click('*[data-id="tabProxyZoomOut"]')
       .click('*[data-id="tabProxyZoomOut"]')
       .checkElementStyle('.view-lines', 'font-size', '14px')

apps/remix-ide-e2e/src/tests/editorHoverContext.test.ts

@@ -15,9 +15,9 @@ const checkEditorHoverContent = (browser: NightwatchBrowser, path: string, expec
 module.exports = {
     '@disabled': true,
     before: function (browser: NightwatchBrowser, done: VoidFunction) {
-        init(browser, done, 'http://127.0.0.1:8080', false)
+        init(browser, done, 'http://127.0.0.1:8080', false, null, true)
     },
-    'Should load the test file': function (browser: NightwatchBrowser) {
+    'Should load the test file #group1': function (browser: NightwatchBrowser) {
         browser.openFile('contracts')
             .openFile('contracts/3_Ballot.sol')
             .waitForElementVisible('#editorView')
@@ -86,7 +86,7 @@ module.exports = {
         const expectedContent = 'StructDefinition'
         checkEditorHoverContent(browser, path, expectedContent)
     },
-    'Add token file': function (browser: NightwatchBrowser) {
+    'Add token file #group1': function (browser: NightwatchBrowser) {
         browser
         .clickLaunchIcon('solidity')
         .setSolidityCompilerVersion('soljson-v0.8.20+commit.a1b79de6.js')

apps/remix-ide-e2e/src/tests/etherscan_api.test.ts

@@ -45,7 +45,7 @@ module.exports = {
       .setValue('*[name="contractAddress"]', ['0x9981c9d00103da481c3c65b22a79582a3e3ff50b', browser.Keys.TAB])
       .click('[data-id="verify-contract"]')
       .waitForElementVisible('[data-id="verify-result"]')
-      .waitForElementContainsText('[data-id="verify-result"]', 'Contract source code already verified')
+      .waitForElementContainsText('[data-id="verify-result"]', 'Contract source code already verified', 15000)
     },
 
     'Should call the etherscan plugin api #group1': function (browser: NightwatchBrowser) {

apps/remix-ide-e2e/src/tests/plugin_api.ts

@@ -431,7 +431,7 @@ module.exports = {
       .waitForElementContainsText('*[data-shared="tooltipPopup"]', 'I am a re-toast')
 
   },
-  'Should open 2 alerts from localplugin #group9': function (browser: NightwatchBrowser) {
+  'Should open 2 alerts from localplugin #group9': !function (browser: NightwatchBrowser) {
     browser
       .clickLaunchIcon('localPlugin')
       .useXpath()

apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts

@@ -25,9 +25,10 @@ module.exports = {
   'Should load run and deploy tab and check value validation #group1': function (browser: NightwatchBrowser) {
     browser.waitForElementPresent('*[data-id="remixIdeSidePanel"]')
       .assert.containsText('*[data-id="sidePanelSwapitTitle"]', 'DEPLOY & RUN TRANSACTIONS')
-      .validateValueInput('#value', '0000', '0')
-      .validateValueInput('#value', '', '0')
-      .validateValueInput('#value', 'dragon', '0')
+      .validateValueInput('*[data-id="dandrValue"]', '999', '999')
+      .validateValueInput('*[data-id="dandrValue"]', '0000', '0')
+      .validateValueInput('*[data-id="dandrValue"]', '1.3', '0') // no decimal
+      // .validateValueInput('*[data-id="dandrValue"]', 'dragon', '0') // only numbers
   },
 
   'Should sign message using account key #group2': function (browser: NightwatchBrowser) {
@@ -81,10 +82,10 @@ module.exports = {
         instanceAddress = address
         browser
         .waitForElementVisible(`#instance${instanceAddress} [data-id="instanceContractBal"]`)
-        .assert.containsText(`#instance${instanceAddress} [data-id="instanceContractBal"]`, 'Balance: 0.000000000000000111 ETH')
+        .waitForElementContainsText(`#instance${instanceAddress} [data-id="instanceContractBal"]`, 'Balance: 0.000000000000000111 ETH', 10000)
         .clickFunction('sendSomeEther - transact (not payable)', { types: 'uint256 num', values: '2' })
         .pause(1000)
-        .assert.containsText(`#instance${instanceAddress} [data-id="instanceContractBal"]`, 'Balance: 0.000000000000000109 ETH')
+        .waitForElementContainsText(`#instance${instanceAddress} [data-id="instanceContractBal"]`, 'Balance: 0.000000000000000109 ETH', 10000)
       })
   },
 

apps/remix-ide-e2e/src/tests/staticAnalysis.test.ts

@@ -46,14 +46,14 @@ module.exports = {
       .waitForElementPresent('//*[@id="staticanalysisresult"]', 5000)
       .useCss()
       // Check warning count
-      .click('*[data-rb-event-key="remix"]')
+      .click('*[data-rr-ui-event-key="remix"]')
       .assert.containsText('span#ssaRemixtab > *[data-id="RemixStaticAnalysisErrorCount"]', '1')
       .verify.elementPresent('input[name="showLibWarnings"]')
       .verify.not.elementPresent('input[name="showLibWarnings"]:checked')
       .verify.elementPresent('label[id="headingshowLibWarnings"]')
       .click('label[id="headingshowLibWarnings"]')
       .pause(1000)
-      .click('*[data-rb-event-key="remix"]')
+      .click('*[data-rr-ui-event-key="remix"]')
       .assert.containsText('span#ssaRemixtab > *[data-id="RemixStaticAnalysisErrorCount', '386')
       .click('label[id="headingshowLibWarnings"]')
       .pause(1000)

apps/remix-ide/src/app/components/preload.tsx

@@ -1,6 +1,6 @@
 import {RemixApp} from '@remix-ui/app'
 import React, {useEffect, useRef, useState} from 'react'
-import {render} from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import * as packageJson from '../../../../../package.json'
 import {fileSystem, fileSystems} from '../files/fileSystem'
 import {indexedDBFileSystem} from '../files/filesystems/indexedDB'
@@ -10,7 +10,7 @@ import './styles/preload.css'
 import isElectron from 'is-electron'
 const _paq = (window._paq = window._paq || [])
 
-export const Preload = () => {
+export const Preload = (props: any) => {
   const [supported, setSupported] = useState<boolean>(true)
   const [error, setError] = useState<boolean>(false)
   const [showDownloader, setShowDownloader] = useState<boolean>(false)
@@ -33,12 +33,7 @@ export const Preload = () => {
       .then((AppComponent) => {
         const appComponent = new AppComponent.default()
         appComponent.run().then(() => {
-          render(
-            <>
-              <RemixApp app={appComponent} />
-            </>,
-            document.getElementById('root')
-          )
+          props.root.render(<RemixApp app={appComponent} />)
         })
       })
       .catch((err) => {

apps/remix-ide/src/app/editor/editor.js

@@ -402,10 +402,7 @@ class Editor extends Plugin {
    */
   editorFontSize (incr) {
     if (!this.activated) return
-    const newSize = this.api.getFontSize() + incr
-    if (newSize >= 6) {
-      this.emit('setFontSize', newSize)
-    }
+    this.emit('setFontSize', incr)
   }
 
   /**

apps/remix-ide/src/app/files/fileManager.ts

@@ -619,7 +619,10 @@ class FileManager extends Plugin {
     if (!provider) throw createError({ code: 'ENOENT', message: `${path} not available` })
     // TODO: change provider to Promise
     return new Promise((resolve, reject) => {
-      if (this.currentFile() === path) return resolve(this.editor.currentContent())
+      if (this.currentFile() === path) {
+        const editorContent = this.editor.currentContent()
+        if(editorContent) resolve(editorContent)
+      }
       provider.get(path, (err, content) => {
         if (err) reject(err)
         resolve(content)

apps/remix-ide/src/app/plugins/compile-details.tsx

@@ -35,8 +35,6 @@ export class CompilationDetailsPlugin extends ViewPlugin {
   }
 
   async onActivation() {
-    await this.call('tabs', 'focus', 'compilationDetails')
-    this.renderComponent()
     _paq.push(['trackEvent', 'plugin', 'activated', 'compilationDetails'])
   }
 
@@ -46,13 +44,17 @@ export class CompilationDetailsPlugin extends ViewPlugin {
 
   async showDetails(sentPayload: any) {
     await this.call('tabs', 'focus', 'compilationDetails')
-    this.payload = sentPayload
-    this.renderComponent()
+    setTimeout(() => {
+      // TODO: use the react API to render when the tab is focused and tbe plugin in the view.
+      this.payload = sentPayload
+      this.renderComponent()
+    }, 2000)
   }
 
   setDispatch(dispatch: React.Dispatch<any>): void {
     this.dispatch = dispatch
   }
+
   render() {
     return (
       <div id="compileDetails">

apps/remix-ide/src/app/plugins/parser/services/code-parser-compiler.ts

@@ -48,7 +48,7 @@ export default class CodeParserCompiler {
   init() {
 
     this.onAstFinished = async (success, data: CompilationResult, source: CompilationSourceCode, input: any, version) => {
-      this.plugin.call('editor', 'clearAnnotations')
+      await this.plugin.call('editor', 'clearAnnotations')
       this.errorState = true
       const result = new CompilerAbstract('soljson', data, source, input)
       let allErrors: errorMarker[] = []
@@ -93,7 +93,7 @@ export default class CodeParserCompiler {
 
         const displayErrors = await this.plugin.call('config', 'getAppParameter', 'display-errors')
         if (displayErrors) await this.plugin.call('editor', 'addErrorMarker', allErrors)
-        this.addDecorators(allErrors, sources)
+        await this.addDecorators(allErrors, sources)
       } else {
         await this.plugin.call('editor', 'clearErrorMarkers', result.getSourceCode().sources)
         await this.clearDecorators(result.getSourceCode().sources)

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/remix-ide/src/app/tabs/test-tab.js

@@ -81,13 +81,14 @@ module.exports = class TestTab extends ViewPlugin {
   onDeactivation () {
     this.off('filePanel', 'newTestFileCreated')
     this.off('filePanel', 'setWorkspace')
+    this.off('filePanel', 'workspaceCreated')
     // 'currentFileChanged' event is added more than once
     this.fileManager.events.removeAllListeners('currentFileChanged')
   }
 
   listenToEvents () {
     this.on('filePanel', 'workspaceCreated', async () => {
-      this.createTestLibs()
+      setTimeout(() => this.createTestLibs(), 50)
     })
 
     this.testRunner.event.on('compilationFinished', (success, data, source, input, version) => {

apps/remix-ide/src/index.tsx

@@ -1,6 +1,5 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
-import {render} from 'react-dom'
 import './index.css'
 import {ThemeModule} from './app/tabs/theme-module'
 import {Preload} from './app/components/preload'
@@ -8,6 +7,7 @@ import Config from './config'
 import {Registry} from '@remix-project/remix-lib'
 import {Storage} from '@remix-project/remix-lib'
 
+import { createRoot } from 'react-dom/client'
 
 ;(async function () {
   try {
@@ -18,11 +18,9 @@ import {Storage} from '@remix-project/remix-lib'
   const theme = new ThemeModule()
   theme.initTheme()
   
-  render(
-    <React.StrictMode>
-      <Preload></Preload>
-    </React.StrictMode>,
-    document.getElementById('root')
-  )
-  
+  const container = document.getElementById('root');
+  const root = createRoot(container)
+  if (container) {    
+    root.render(<Preload root={root} />);
+  }  
 })()

apps/solhint/src/main.tsx

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

apps/solidity-compiler/src/main.tsx

@@ -1,12 +1,13 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client';
 
 import App from './app/app'
 
-ReactDOM.render(
-  <React.StrictMode>
+const container = document.getElementById('root');
+
+if (container) {
+  createRoot(container).render(<React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+  </React.StrictMode>);
+}

apps/vyper/src/app/app.tsx

@@ -25,7 +25,7 @@ interface OutputMap {
   [fileName: string]: VyperCompilationOutput
 }
 
-const App: React.FC = () => {
+const App = () => {
   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>);
+}
+

apps/walletconnect/src/main.tsx

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

libs/remix-solidity/src/compiler/compiler.ts

@@ -50,7 +50,6 @@ export class Compiler {
       if (success && this.state.compilationStartTime) {
         this.event.trigger('compilationDuration', [(new Date().getTime()) - this.state.compilationStartTime])
       }
-      this.state.compilationStartTime = null
     })
 
     this.event.register('compilationStarted', () => {
@@ -83,7 +82,7 @@ export class Compiler {
    */
 
   internalCompile(files: Source, missingInputs?: string[], timeStamp?: number): void {
-    if(timeStamp != this.state.compilationStartTime && this.state.compilerRetriggerMode == CompilerRetriggerMode.retrigger ) {
+    if(timeStamp < this.state.compilationStartTime && this.state.compilerRetriggerMode == CompilerRetriggerMode.retrigger ) {
       return
     }
     this.gatherImports(files, missingInputs, (error, input) => {
@@ -294,7 +293,7 @@ export class Compiler {
 
     this.state.worker.addEventListener('message', (msg: Record<'data', MessageFromWorker>) => {
       const data: MessageFromWorker = msg.data
-      if (this.state.compilerRetriggerMode == CompilerRetriggerMode.retrigger && data.timestamp !== this.state.compilationStartTime) {
+      if (this.state.compilerRetriggerMode == CompilerRetriggerMode.retrigger && data.timestamp < this.state.compilationStartTime) {
         // drop message from previous compilation
         return
       }

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/editor/src/lib/actions/editor.ts

@@ -85,7 +85,11 @@ export const reducerActions = (models = initialState, action: Action) => {
   case 'SET_FONTSIZE': {
     if (!editor) return models
     const size = action.payload.size
-    editor.updateOptions({ fontSize: size })
+    if (size === 1) {
+      editor.trigger('keyboard', 'editor.action.fontZoomIn', {});
+    } else{
+      editor.trigger('keyboard', 'editor.action.fontZoomOut', {});
+    }
     return models
   }
   case 'SET_WORDWRAP': {

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

@@ -645,14 +645,6 @@ export const EditorUI = (props: EditorUIProps) => {
       }
     })
 
-    // zoomin zoomout
-    editor.addCommand(monacoRef.current.KeyMod.CtrlCmd | (monacoRef.current.KeyCode as any).US_EQUAL, () => {
-      editor.updateOptions({fontSize: editor.getOption(51) + 1})
-    })
-    editor.addCommand(monacoRef.current.KeyMod.CtrlCmd | (monacoRef.current.KeyCode as any).US_MINUS, () => {
-      editor.updateOptions({fontSize: editor.getOption(51) - 1})
-    })
-
     // add context menu items
     const zoominAction = {
       id: 'zoomIn',
@@ -664,7 +656,7 @@ export const EditorUI = (props: EditorUIProps) => {
         monacoRef.current.KeyMod.CtrlCmd | monacoRef.current.KeyCode.Equal,
       ],
       run: () => {
-        editor.updateOptions({fontSize: editor.getOption(51) + 1})
+        editor.trigger('keyboard', 'editor.action.fontZoomIn', {});
       }
     }
     const zoomOutAction = {
@@ -677,7 +669,7 @@ export const EditorUI = (props: EditorUIProps) => {
         monacoRef.current.KeyMod.CtrlCmd | monacoRef.current.KeyCode.Minus,
       ],
       run: () => {
-        editor.updateOptions({fontSize: editor.getOption(51) - 1})
+        editor.trigger('keyboard', 'editor.action.fontZoomOut', {});
       }
     }
     const formatAction = {

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/home-tab/src/lib/components/homeTabFile.tsx

@@ -82,8 +82,11 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
       deleteSavedWorkspace(deletedName)
     })
     return () => {
-      plugin.off('filePanel', 'setWorkspace')
-      plugin.off('filePanel', 'workspaceDeleted')
+      try {
+        plugin.off('filePanel', 'setWorkspace')
+        plugin.off('filePanel', 'workspaceDeleted')
+      } catch (e) {
+      }
     }
   }, [plugin])
 

libs/remix-ui/run-tab/src/lib/components/value.tsx

@@ -6,20 +6,13 @@ import {CustomTooltip, isNumeric} from '@remix-ui/helper'
 import {ValueProps} from '../types'
 
 export function ValueUI(props: ValueProps) {
-  const [sendValue, setSendValue] = useState<string>(props.sendValue)
-  const inputValue = useRef<HTMLInputElement>({} as HTMLInputElement)
+  const inputValue = useRef<HTMLInputElement>({} as HTMLInputElement)  
 
   useEffect(() => {
-    sendValue !== props.sendValue && props.setSendValue(sendValue)
-  }, [sendValue])
-
-  const validateInputKey = (e) => {
-    // preventing not numeric keys
-    // preventing 000 case
-    if (!isNumeric(e.key) || (e.key === '0' && !parseInt(inputValue.current.value) && inputValue.current.value.length > 0)) {
-      e.preventDefault()
+    if (props.sendValue !== inputValue.current.value) {
+      inputValue.current.value = props.sendValue
     }
-  }
+  },[props.sendValue])
 
   const validateValue = (e) => {
     const value = e.target.value
@@ -27,22 +20,28 @@ export function ValueUI(props: ValueProps) {
     if (!value) {
       // assign 0 if given value is
       // - empty
-      return setSendValue('0')
+      inputValue.current.value = '0'
+      props.setSendValue('0')
+      return
     }
 
     let v
     try {
       v = new BN(value, 10)
-      setSendValue(v.toString(10))
+      props.setSendValue(v.toString(10))
     } catch (e) {
       // assign 0 if given value is
       // - not valid (for ex 4345-54)
       // - contains only '0's (for ex 0000) copy past or edit
-      setSendValue('0')
+      inputValue.current.value = '0'
+      props.setSendValue('0')
     }
 
     // if giveen value is negative(possible with copy-pasting) set to 0
-    if (v.lt(0)) setSendValue('0')
+    if (v.lt(0)) {
+      inputValue.current.value = '0'
+      props.setSendValue('0')
+    }
   }
 
   return (
@@ -61,7 +60,6 @@ export function ValueUI(props: ValueProps) {
             className="form-control udapp_gasNval udapp_col2"
             id="value"
             data-id="dandrValue"
-            onKeyPress={validateInputKey}
             onChange={validateValue}
             value={props.sendValue}
           />

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

@@ -436,10 +436,16 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   }
 
   const isCopilotActivated = props.config.get('settings/copilot/suggest/activate') || false
-  const copilotMaxnewToken = props.config.get('settings/copilot/suggest/max_new_tokens')
-  if (!copilotMaxnewToken) props.config.set('settings/copilot/suggest/max_new_tokens', 5)
-  const copilotTemperatureValue = (props.config.get('settings/copilot/suggest/temperature')) * 100
-  if (!copilotTemperatureValue) props.config.set('settings/copilot/suggest/temperature', 0.5)
+  let copilotMaxnewToken = props.config.get('settings/copilot/suggest/max_new_tokens')
+  if (!copilotMaxnewToken) {
+    props.config.set('settings/copilot/suggest/max_new_tokens', 5)
+    copilotMaxnewToken = 5
+  }
+  let copilotTemperatureValue = (props.config.get('settings/copilot/suggest/temperature')) * 100
+  if (!copilotTemperatureValue) {
+    props.config.set('settings/copilot/suggest/temperature', 0.5)
+    copilotTemperatureValue = 0.5
+  }
 
   if (isCopilotActivated) props.plugin.call('copilot-suggestion', 'init')
   const copilotSettings = () => (

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { CompileTabLogic } from '../logic/compileTabLogic'
+
 export const setEditorMode = (mode: string) => {
   return {
     type: 'SET_EDITOR_MODE',
@@ -28,7 +29,7 @@ export const resetCompilerMode = () => (dispatch: React.Dispatch<any>) => {
 
 export const listenToEvents = (compileTabLogic: CompileTabLogic, api) => (dispatch: React.Dispatch<any>) => {
   api.onSessionSwitched = () => {
-    dispatch(setEditorMode('sessionSwitched'))
+    dispatch(setEditorMode('sessionSwitched_' + Date.now()))
   }
 
   compileTabLogic.event.on('startingCompilation', () => {
@@ -40,7 +41,7 @@ export const listenToEvents = (compileTabLogic: CompileTabLogic, api) => (dispat
   })
 
   api.onContentChanged = () => {
-    dispatch(setEditorMode('contentChanged'))
+    dispatch(setEditorMode('contentChanged_' + Date.now()))
   }
   compileTabLogic.compiler.event.register('loadingCompiler', () => {
     dispatch(setCompilerMode('loadingCompiler'))

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

@@ -6,7 +6,7 @@ import {ConfigurationSettings} from '@remix-project/remix-lib'
 import {checkSpecialChars, CustomTooltip, extractNameFromKey} from '@remix-ui/helper'
 import {canUseWorker, urlFromVersion, pathToURL} from '@remix-project/remix-solidity'
 import {compilerReducer, compilerInitialState} from './reducers/compiler'
-import {resetEditorMode, listenToEvents} from './actions/compiler'
+import {listenToEvents} from './actions/compiler'
 import {getValidLanguage} from '@remix-project/remix-solidity'
 import {CopyToClipboard} from '@remix-ui/clipboard'
 import {configFileContent} from './compilerConfiguration'
@@ -231,16 +231,13 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
 
   useEffect(() => {
     if (compilerContainer.editor.mode) {
-      switch (compilerContainer.editor.mode) {
-      case 'sessionSwitched':
+      if (compilerContainer.editor.mode.startsWith('sessionSwitched')) {
         sessionSwitched()
-        resetEditorMode()(dispatch)
-        break
-      case 'contentChanged':
+        return
+      } else if (compilerContainer.editor.mode.startsWith('contentChanged')) {
         contentChanged()
-        resetEditorMode()(dispatch)
-        break
-      }
+        return
+      }      
     }
   }, [compilerContainer.editor.mode])
 

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/solidity-unit-testing/src/lib/solidity-unit-testing.tsx

@@ -164,6 +164,10 @@ 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/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} drop={'end'}>
         {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

@@ -143,6 +143,7 @@
     "@remixproject/plugin-utils": "0.3.42",
     "@remixproject/plugin-webview": "0.3.42",
     "@remixproject/plugin-ws": "0.3.42",
+    "@ricarso/react-image-magnifiers": "^1.9.0",
     "@types/nightwatch": "^2.3.1",
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.6.2",
@@ -175,7 +176,7 @@
     "file-path-filter": "^3.0.2",
     "file-saver": "^2.0.5",
     "form-data": "^4.0.0",
-    "formik": "^2.2.9",
+    "formik": "^2.4.5",
     "from-exponential": "1.1.1",
     "fs-extra": "^3.0.1",
     "ganache": "^7.9.1",
@@ -197,19 +198,18 @@
     "prettier": "^2.8.4",
     "prettier-plugin-solidity": "^1.0.0-beta.24",
     "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.0",
-    "react-bootstrap": "^1.6.4",
-    "react-dom": "^17.0.2",
+    "react-bootstrap": "^2.9.0",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.4",
-    "react-image-magnifiers": "^1.4.0",
     "react-intl": "^6.0.4",
     "react-json-view": "^1.21.3",
     "react-markdown": "^8.0.5",
     "react-multi-carousel": "^2.8.2",
-    "react-router-dom": "^6.3.0",
-    "react-tabs": "^3.2.2",
-    "react-zoom-pan-pinch": "^3.0.2",
+    "react-router-dom": "^6.16.0",
+    "react-tabs": "^6.0.2",
+    "react-zoom-pan-pinch": "^3.1.0",
     "regenerator-runtime": "0.13.7",
     "remark-gfm": "^3.0.1",
     "rlp": "^3.0.0",
@@ -248,7 +248,7 @@
     "@babel/register": "^7.4.4",
     "@electron-forge/cli": "^6.1.1",
     "@fortawesome/fontawesome-free": "^5.8.1",
-    "@monaco-editor/react": "4.5.1",
+    "@monaco-editor/react": "4.6.0",
     "@nrwl/cli": "15.7.1",
     "@nrwl/eslint-plugin-nx": "15.7.1",
     "@nrwl/js": "15.7.1",
@@ -271,11 +271,11 @@
     "@types/lodash": "^4.14.172",
     "@types/mocha": "^9.1.1",
     "@types/node": "18.16.1",
-    "@types/react": "^17.0.24",
+    "@types/react": "^18.2.0",
     "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^18.2.0",
     "@types/react-image-magnifiers": "^1.3.2",
-    "@types/react-router-dom": "^5.3.0",
+    "@types/react-router-dom": "^5.3.3",
     "@types/request": "^2.48.7",
     "@types/semver": "^7.3.10",
     "@types/tape": "^4.13.0",
@@ -348,7 +348,7 @@
     "minixhr": "^4.0.0",
     "mkdirp": "^0.5.1",
     "mocha": "^8.0.1",
-    "monaco-editor": "0.41.0",
+    "monaco-editor": "0.44.0",
     "nanohtml": "^1.6.3",
     "nightwatch": "^2.3",
     "nodemon": "^2.0.4",
@@ -362,7 +362,6 @@
     "os-browserify": "^0.3.0",
     "process": "^0.11.10",
     "react-refresh": "^0.14.0",
-    "react-test-renderer": "^17.0.2",
     "request": "^2.83.0",
     "rimraf": "^2.6.1",
     "selenium-standalone": "^9.0.3",
@@ -387,6 +386,6 @@
     "webpack-cli": "^4.10.0"
   },
   "resolutions": {
-    "@types/react": "^17.0.24"
+    "@types/react": "^18.2.0"
   }
 }

yarn.lock

@@ -1649,7 +1649,7 @@
     core-js-pure "^3.19.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.14.0", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.0", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
   integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
@@ -1677,12 +1677,12 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.7.6":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
-  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
+"@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
+  integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
   dependencies:
-    regenerator-runtime "^0.13.4"
+    regenerator-runtime "^0.14.0"
 
 "@babel/template@^7.15.4", "@babel/template@^7.20.7", "@babel/template@^7.3.3", "@babel/template@^7.4.0":
   version "7.20.7"
@@ -4025,19 +4025,19 @@
     semver "^7.3.8"
     superstruct "^1.0.3"
 
-"@monaco-editor/loader@^1.3.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.3.tgz#7f1742bd3cc21c0362a46a4056317f6e5215cfca"
-  integrity sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
   dependencies:
     state-local "^1.0.6"
 
-"@monaco-editor/react@4.5.1":
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.5.1.tgz#fbc76c692aee9a33b9ab24ae0c5f219b8f002fdb"
-  integrity sha512-NNDFdP+2HojtNhCkRfE6/D6ro6pBNihaOzMbGK84lNWzRu+CfBjwzGt4jmnqimLuqp5yE5viHS2vi+QOAnD5FQ==
+"@monaco-editor/react@4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
   dependencies:
-    "@monaco-editor/loader" "^1.3.3"
+    "@monaco-editor/loader" "^1.4.0"
 
 "@motionone/animation@^10.15.1":
   version "10.15.1"
@@ -4893,10 +4893,10 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.8.6":
-  version "2.10.2"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
-  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+"@popperjs/core@^2.11.6":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
@@ -4964,6 +4964,18 @@
     unbzip2-stream "1.4.3"
     yargs "17.7.1"
 
+"@react-aria/ssr@^3.5.0":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.0.tgz#457310129e1447b09d2f4aa2fdd62ab0e668d88c"
+  integrity sha512-Bz6BqP6ZorCme9tSWHZVmmY+s7AU8l6Vl2NUYmBzezD//fVHHfFo4lFBn5tBuAaJEm3AuCLaJQ6H2qhxNSb7zg==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@remix-run/router@1.14.0":
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.14.0.tgz#9bc39a5a3a71b81bdb310eba6def5bc3966695b7"
+  integrity sha512-WOHih+ClN7N8oHk9N4JUiMxQJmRVaOxcg8w7F/oHUXzJt920ekASLI/7cYX8XkntDWRhLZtsk6LbGrkgOAvi5A==
+
 "@remixproject/engine-electron@0.3.42":
   version "0.3.42"
   resolved "https://registry.yarnpkg.com/@remixproject/engine-electron/-/engine-electron-0.3.42.tgz#12328f762f3a2969a55abda58c9f3307143bb03b"
@@ -5042,17 +5054,36 @@
     "@remixproject/plugin-utils" "0.3.42"
     events "3.2.0"
 
-"@restart/context@^2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02"
-  integrity sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==
+"@restart/hooks@^0.4.9":
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.15.tgz#70990085c9b79d1f3e140db824b29218bdc2b5bb"
+  integrity sha512-cZFXYTxbpzYcieq/mBwSyXgqnGMHoBVh3J7MU0CCoIB4NRZxV9/TuwTBAaLMqpNhC3zTPMCgkQ5Ey07L02Xmcw==
+  dependencies:
+    dequal "^2.0.3"
 
-"@restart/hooks@^0.3.26":
-  version "0.3.27"
-  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.27.tgz#91f356d66d4699a8cd8b3d008402708b6a9dc505"
-  integrity sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==
+"@restart/ui@^1.6.6":
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.6.6.tgz#3481e2eaf15d7cae55bb2f518624e10d19c75800"
+  integrity sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==
   dependencies:
-    dequal "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@popperjs/core" "^2.11.6"
+    "@react-aria/ssr" "^3.5.0"
+    "@restart/hooks" "^0.4.9"
+    "@types/warning" "^3.0.0"
+    dequal "^2.0.3"
+    dom-helpers "^5.2.0"
+    uncontrollable "^8.0.1"
+    warning "^4.0.3"
+
+"@ricarso/react-image-magnifiers@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@ricarso/react-image-magnifiers/-/react-image-magnifiers-1.9.0.tgz#c743620a05acc6c288797dac93e91f229ada9cb0"
+  integrity sha512-2s+xbcRQMcTu5d5WRNCjveeOoiSUl8Qc6rGgZ2P5HTlyHzBsI/uCHQD3UWg0i3o2CaEV/veAHE/kMYyu216pzQ==
+  dependencies:
+    prop-types "^15.7.2"
+    react-input-position "^1.3.1"
+    typescript "^4.8.4"
 
 "@rollup/plugin-babel@^5.3.0":
   version "5.3.1"
@@ -5566,6 +5597,13 @@
     "@svgr/plugin-jsx" "^6.5.1"
     "@svgr/plugin-svgo" "^6.5.1"
 
+"@swc/helpers@^0.5.0":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.3.tgz#98c6da1e196f5f08f977658b80d6bd941b5f294f"
+  integrity sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==
+  dependencies:
+    tslib "^2.4.0"
+
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -5930,11 +5968,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/invariant@^2.2.33":
-  version "2.2.35"
-  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
-  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
-
 "@types/isomorphic-git__lightning-fs@^4.4.2":
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/@types/isomorphic-git__lightning-fs/-/isomorphic-git__lightning-fs-4.4.2.tgz#aead17cb1ab1a965b69a5247a7d4087336ad5df7"
@@ -6093,7 +6126,7 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.2.tgz#6c2324641cc4ba050a8c710b2b251b377581fbf0"
   integrity sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==
 
-"@types/prop-types@*", "@types/prop-types@^15.7.3":
+"@types/prop-types@*":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
@@ -6125,13 +6158,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^17.0.9":
-  version "17.0.20"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.20.tgz#e0c8901469d732b36d8473b40b679ad899da1b53"
-  integrity sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==
-  dependencies:
-    "@types/react" "^17"
-
 "@types/react-dom@^18.0.0":
   version "18.0.7"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.7.tgz#ee7cf8ec4e6977e3f0a7b1d38bd89c75aa2aec28"
@@ -6139,6 +6165,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^18.2.0":
+  version "18.2.18"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.18.tgz#16946e6cd43971256d874bc3d0a72074bb8571dd"
+  integrity sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-image-magnifiers@^1.3.2":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@types/react-image-magnifiers/-/react-image-magnifiers-1.3.2.tgz#7c8f08105ee72b7a306d0d068916a9d53a49e3f9"
@@ -6156,7 +6189,7 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-router-dom@^5.3.0":
+"@types/react-router-dom@^5.3.3":
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
   integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
@@ -6173,17 +6206,17 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.1":
-  version "4.4.4"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
-  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+"@types/react-transition-group@^4.4.6":
+  version "4.4.10"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
+  integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@>=16.14.8", "@types/react@>=16.9.11", "@types/react@^17", "@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==
+"@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==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -10287,10 +10320,10 @@ classic-level@^1.2.0:
     napi-macros "^2.2.2"
     node-gyp-build "^4.3.0"
 
-classnames@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
 clean-git-ref@^2.0.1:
   version "2.0.1"
@@ -10491,6 +10524,11 @@ clsx@^1.1.0, clsx@^1.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 cmd-shim@~2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-2.0.2.tgz#6fcbda99483a8fd15d7d30a196ca69d688a2efdb"
@@ -12023,16 +12061,11 @@ deps-sort@^2.0.0, deps-sort@^2.0.1:
     subarg "^1.0.0"
     through2 "^2.0.0"
 
-dequal@^2.0.0:
+dequal@^2.0.0, dequal@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
-dequal@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
-  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
-
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -14442,18 +14475,19 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
-formik@^2.2.9:
-  version "2.2.9"
-  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0"
-  integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==
+formik@^2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.5.tgz#f899b5b7a6f103a8fabb679823e8fafc7e0ee1b4"
+  integrity sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==
   dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
     deepmerge "^2.1.1"
     hoist-non-react-statics "^3.3.0"
     lodash "^4.17.21"
     lodash-es "^4.17.21"
     react-fast-compare "^2.0.1"
     tiny-warning "^1.0.2"
-    tslib "^1.10.0"
+    tslib "^2.0.0"
 
 forwarded@0.2.0:
   version "0.2.0"
@@ -15778,13 +15812,6 @@ hey-listen@^1.0.8:
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
-history@^5.2.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
-  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -20488,10 +20515,10 @@ mold-source-map@~0.4.0:
     convert-source-map "^1.1.0"
     through "~2.2.7"
 
-monaco-editor@0.41.0:
-  version "0.41.0"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.41.0.tgz#2ba31e5af7e3ae93ac5d7467ec2772ef9b3d967f"
-  integrity sha512-1o4olnZJsiLmv5pwLEAmzHTE/5geLKQ07BrGxlF4Ri/AXAc2yyDGZwHjiTqD8D/ROKUZmwMA28A+yEowLNOEcA==
+monaco-editor@0.44.0:
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.44.0.tgz#3c0fe3655923bbf7dd647057302070b5095b6c59"
+  integrity sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==
 
 motion@10.16.2:
   version "10.16.2"
@@ -23823,37 +23850,31 @@ react-beautiful-dnd@^13.1.0:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
-react-bootstrap@^1.6.4:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-1.6.4.tgz#94d5d2422e26bba277656d3529128e14f838b7ca"
-  integrity sha512-z3BhBD4bEZuLP8VrYqAD7OT7axdcSkkyvWBWnS2U/4MhyabUihrUyucPWkan7aMI1XIHbmH4LCpEtzWGfx/yfA==
-  dependencies:
-    "@babel/runtime" "^7.14.0"
-    "@restart/context" "^2.1.4"
-    "@restart/hooks" "^0.3.26"
-    "@types/invariant" "^2.2.33"
-    "@types/prop-types" "^15.7.3"
-    "@types/react" ">=16.14.8"
-    "@types/react-transition-group" "^4.4.1"
-    "@types/warning" "^3.0.0"
-    classnames "^2.3.1"
+react-bootstrap@^2.9.0:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.9.1.tgz#c1ab48ae2b2cfe6d5ac957c2042eb36fcafdb1d2"
+  integrity sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+    "@restart/hooks" "^0.4.9"
+    "@restart/ui" "^1.6.6"
+    "@types/react-transition-group" "^4.4.6"
+    classnames "^2.3.2"
     dom-helpers "^5.2.1"
     invariant "^2.2.4"
-    prop-types "^15.7.2"
+    prop-types "^15.8.1"
     prop-types-extra "^1.1.0"
-    react-overlays "^5.1.1"
-    react-transition-group "^4.4.1"
+    react-transition-group "^4.4.5"
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
 react-draggable@^4.4.4:
   version "4.4.5"
@@ -23868,14 +23889,6 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-image-magnifiers@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/react-image-magnifiers/-/react-image-magnifiers-1.4.0.tgz#0472e93491d5a199a278d4efc855f03542214601"
-  integrity sha512-ZszHusdsYteccKGysHXUOgLRGtHqfRYuG1koHh3VAvuhrzF4BEs1Ot5tSe1WA2v+EsjAEfYcrRyi/Is4QDD61A==
-  dependencies:
-    prop-types "^15.7.2"
-    react-input-position "^1.3.1"
-
 react-input-position@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/react-input-position/-/react-input-position-1.3.2.tgz#4e1f3b671eb41c0bd9f232846b94328263a7b65b"
@@ -23899,11 +23912,6 @@ react-intl@^6.0.4:
     intl-messageformat "10.1.0"
     tslib "2.4.0"
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
-  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
-
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -23914,6 +23922,11 @@ react-is@^17.0.1, react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-json-view@^1.21.3:
   version "1.21.3"
   resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.21.3.tgz#f184209ee8f1bf374fb0c41b0813cff54549c475"
@@ -23955,20 +23968,6 @@ react-multi-carousel@^2.8.2:
   resolved "https://registry.yarnpkg.com/react-multi-carousel/-/react-multi-carousel-2.8.2.tgz#4bbd7a9656d8e49e081745331593e5500eefdbe4"
   integrity sha512-M9Y7DfAp8bA/r6yexttU6RLA7uyppje4c0ELRuCHZWswH+u7nr0uVP6qHNPjc4XGOEY1MYFOb5nBg7JvoKutuQ==
 
-react-overlays@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.1.1.tgz#2e7cf49744b56537c7828ccb94cfc63dd778ae4f"
-  integrity sha512-eCN2s2/+GVZzpnId4XVWtvDPYYBD2EtOGP74hE+8yDskPzFy9+pV1H3ZZihxuRdEbQzzacySaaDkR7xE0ydl4Q==
-  dependencies:
-    "@babel/runtime" "^7.13.8"
-    "@popperjs/core" "^2.8.6"
-    "@restart/hooks" "^0.3.26"
-    "@types/warning" "^3.0.0"
-    dom-helpers "^5.2.0"
-    prop-types "^15.7.2"
-    uncontrollable "^7.2.1"
-    warning "^4.0.3"
-
 react-property@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.0.tgz#2156ba9d85fa4741faf1918b38efc1eae3c6a136"
@@ -23991,47 +23990,29 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
-  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+react-router-dom@^6.16.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.0.tgz#aa4c6bc046a8e8723095bc09b3c0ab2254532712"
+  integrity sha512-1dUdVj3cwc1npzJaf23gulB562ESNvxf7E4x8upNJycqyUm5BRRZ6dd3LrlzhtLaMrwOCO8R0zoiYxdaJx4LlQ==
   dependencies:
-    history "^5.2.0"
-    react-router "6.3.0"
+    "@remix-run/router" "1.14.0"
+    react-router "6.21.0"
 
-react-router@6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
-  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+react-router@6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.21.0.tgz#6fe3e59877aca3dccceec1801d26991ddf42d12b"
+  integrity sha512-hGZ0HXbwz3zw52pLZV3j3+ec+m/PQ9cTpBvqjFQmy2XVUWGn5MD+31oXHb6dVTxYzmAeaiUBYjkoNz66n3RGCg==
   dependencies:
-    history "^5.2.0"
+    "@remix-run/router" "1.14.0"
 
-react-shallow-renderer@^16.13.1:
-  version "16.15.0"
-  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
-  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
-  dependencies:
-    object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
-
-react-tabs@^3.2.2:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-3.2.3.tgz#ccbb3e1241ad3f601047305c75db661239977f2f"
-  integrity sha512-jx325RhRVnS9DdFbeF511z0T0WEqEoMl1uCE3LoZ6VaZZm7ytatxbum0B8bCTmaiV0KsU+4TtLGTGevCic7SWg==
+react-tabs@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-6.0.2.tgz#bc1065c3828561fee285a8fd045f22e0fcdde1eb"
+  integrity sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==
   dependencies:
-    clsx "^1.1.0"
+    clsx "^2.0.0"
     prop-types "^15.5.0"
 
-react-test-renderer@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
-  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
-  dependencies:
-    object-assign "^4.1.1"
-    react-is "^17.0.2"
-    react-shallow-renderer "^16.13.1"
-    scheduler "^0.20.2"
-
 react-textarea-autosize@^8.3.2:
   version "8.3.4"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz#270a343de7ad350534141b02c9cb78903e553524"
@@ -24041,28 +24022,27 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react-transition-group@^4.4.1:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
     "@babel/runtime" "^7.5.5"
     dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-zoom-pan-pinch@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.0.2.tgz#706c67e875e9a30480cdbef8dd4e3d6fdac9921c"
-  integrity sha512-c8BxPl/zK6RiOYrV/xBQ+ebgZpsMvbz6WOoqv2P/1QWxGCk1+q3xWF+5ub4QYasv4W8+J6vSelOR8H0WCEbL4w==
+react-zoom-pan-pinch@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.3.0.tgz#873648438c5244d89fcc2127614046928429cbe0"
+  integrity sha512-vy1h8aenDzXye+HRqANZaSA8IPHoqOiuDPFBkswoyPUH8uMfsmbeH6gFI4r4BhEJa0xIlcA+FbvhidRWKGUrOg==
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 read-cache@^1.0.0:
   version "1.0.0"
@@ -24432,6 +24412,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -25262,13 +25247,12 @@ sax@>=0.6.0, sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"
@@ -27899,6 +27883,11 @@ uncontrollable@^7.2.1:
     invariant "^2.2.4"
     react-lifecycles-compat "^3.0.4"
 
+uncontrollable@^8.0.1:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-8.0.4.tgz#a0a8307f638795162fafd0550f4a1efa0f8c5eb6"
+  integrity sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==
+
 undeclared-identifiers@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/undeclared-identifiers/-/undeclared-identifiers-1.1.3.tgz#9254c1d37bdac0ac2b52de4b6722792d2a91e30f"