lint fixes for remix-ui

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

@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useRef} from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import Draggable from 'react-draggable'
 import './dragbar.css'
 
@@ -77,7 +77,7 @@ const DragBar = (props: IRemixDragBarUi) => {
   return (
     <>
       <div className={`overlay ${dragState ? '' : 'd-none'}`}></div>
-      <Draggable nodeRef={nodeRef} position={{x: dragBarPosX, y: 0}} onStart={startDrag} onStop={stopDrag} axis="x">
+      <Draggable nodeRef={nodeRef} position={{ x: dragBarPosX, y: 0 }} onStart={startDrag} onStop={stopDrag} axis="x">
         <div ref={nodeRef} className={`dragbar ${dragState ? 'ondrag' : ''}`}></div>
       </Draggable>
     </>

libs/remix-ui/app/src/lib/remix-app/components/modals/dialogViewPlugin.tsx

@@ -1,13 +1,13 @@
-import React, {useContext, useEffect} from 'react'
+import React, { useContext, useEffect } from 'react'
-import {AppContext} from '../../context/context'
+import { AppContext } from '../../context/context'
-import {useDialogDispatchers} from '../../context/provider'
+import { useDialogDispatchers } from '../../context/provider'
 
 const DialogViewPlugin = () => {
-  const {modal, alert, toast} = useDialogDispatchers()
+  const { modal, alert, toast } = useDialogDispatchers()
   const app = useContext(AppContext)
 
   useEffect(() => {
-    app.modal.setDispatcher({modal, alert, toast})
+    app.modal.setDispatcher({ modal, alert, toast })
   }, [])
   return <></>
 }

libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import {useDialogDispatchers, useDialogs} from '../../context/provider'
+import { useDialogDispatchers, useDialogs } from '../../context/provider'
-import {Toaster} from '@remix-ui/toaster'
+import { Toaster } from '@remix-ui/toaster'
 import ModalWrapper from './modal-wrapper'
 
 const AppDialogs = () => {
-  const {handleHideModal, handleToaster} = useDialogDispatchers()
+  const { handleHideModal, handleToaster } = useDialogDispatchers()
-  const {focusModal, focusToaster} = useDialogs()
+  const { focusModal, focusToaster } = useDialogs()
 
   return (
     <>

libs/remix-ui/app/src/lib/remix-app/components/modals/enter.tsx

@@ -1,7 +1,7 @@
-import React, {useContext, useEffect, useState} from 'react'
+import React, { useContext, useEffect, useState } from 'react'
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
-import {AppContext} from '../../context/context'
+import { AppContext } from '../../context/context'
-import {UsageTypes} from '../../types'
+import { UsageTypes } from '../../types'
 import { type } from 'os'
 
 interface EnterDialogProps {
@@ -27,7 +27,7 @@ const EnterDialog = (props: EnterDialogProps) => {
         <div
           tabIndex={-1}
           className={'modal-content remixModalContent mb-4'}
-          onKeyDown={({keyCode}) => {
+          onKeyDown={({ keyCode }) => {
           }}
         >
           <div className="modal-header d-flex flex-column">
@@ -36,14 +36,14 @@ const EnterDialog = (props: EnterDialogProps) => {
               <h6 className="modal-title text-dark" data-id={`EnterModalDialogModalTitle-react`}>
                 <FormattedMessage id="remixApp.enterText2" />
               </h6>
-              <i className="text-dark fal fa-door-open text-center" style={{minWidth: "100px", fontSize: "xxx-large"}}></i>
+              <i className="text-dark fal fa-door-open text-center" style={{ minWidth: "100px", fontSize: "xxx-large" }}></i>
             </div>
           </div>
           <div className="modal-body text-break remixModalBody d-flex flex-column p-3 justify-content-between" data-id={`EnterModalDialogModalBody-react`}>
-            <button className="btn btn-secondary text-left" data-id="beginnerbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Beginner)}}><FormattedMessage id="remixApp.enterText3" /></button>
+            <button className="btn btn-secondary text-left" data-id="beginnerbtn" style={{ minWidth: "100px" }} onClick={() => {enterAs(UsageTypes.Beginner)}}><FormattedMessage id="remixApp.enterText3" /></button>
-            <button className="btn btn-secondary my-1 text-left" data-id="prototyperbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Prototyper)}}><FormattedMessage id="remixApp.enterText4" /></button>
+            <button className="btn btn-secondary my-1 text-left" data-id="prototyperbtn" style={{ minWidth: "100px" }} onClick={() => {enterAs(UsageTypes.Prototyper)}}><FormattedMessage id="remixApp.enterText4" /></button>
-            <button className="btn btn-secondary text-left" data-id="advanceUserbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Advance)}}><FormattedMessage id="remixApp.enterText5" /></button>
+            <button className="btn btn-secondary text-left" data-id="advanceUserbtn" style={{ minWidth: "100px" }} onClick={() => {enterAs(UsageTypes.Advance)}}><FormattedMessage id="remixApp.enterText5" /></button>
-            <button className="btn btn-secondary mt-1 text-left" data-id="productionbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Production)}}><FormattedMessage id="remixApp.enterText6" /></button>
+            <button className="btn btn-secondary mt-1 text-left" data-id="productionbtn" style={{ minWidth: "100px" }} onClick={() => {enterAs(UsageTypes.Production)}}><FormattedMessage id="remixApp.enterText6" /></button>
           </div>
         </div>
       </div>

libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx

@@ -1,7 +1,7 @@
-import React, {useContext, useEffect, useState} from 'react'
+import React, { useContext, useEffect, useState } from 'react'
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
-import {AppContext} from '../../context/context'
+import { AppContext } from '../../context/context'
-import {useDialogDispatchers} from '../../context/provider'
+import { useDialogDispatchers } from '../../context/provider'
 declare global {
   interface Window {
     _paq: any
@@ -15,8 +15,8 @@ interface MatomoDialogProps {
 }
 
 const MatomoDialog = (props: MatomoDialogProps) => {
-  const {settings, showMatamo, appManager} = useContext(AppContext)
+  const { settings, showMatamo, appManager } = useContext(AppContext)
-  const {modal} = useDialogDispatchers()
+  const { modal } = useDialogDispatchers()
   const [visible, setVisible] = useState<boolean>(props.hide)
 
   const message = () => {

libs/remix-ui/app/src/lib/remix-app/components/modals/modal-wrapper.tsx

@@ -1,6 +1,6 @@
-import React, {useEffect, useRef, useState} from 'react'
+import React, { useEffect, useRef, useState } from 'react'
-import {ModalDialog, ModalDialogProps, ValidationResult} from '@remix-ui/modal-dialog'
+import { ModalDialog, ModalDialogProps, ValidationResult } from '@remix-ui/modal-dialog'
-import {ModalTypes} from '../../types'
+import { ModalTypes } from '../../types'
 
 interface ModalWrapperProps extends ModalDialogProps {
   modalType?: ModalTypes
@@ -80,7 +80,7 @@ const ModalWrapper = (props: ModalWrapperProps) => {
     if (props.validationFn) {
       const validation = props.validationFn(getFormData())
       setState((prevState) => {
-        return {...prevState, message: createForm(validation), validation}
+        return { ...prevState, message: createForm(validation), validation }
       })
     }
   }
@@ -106,7 +106,7 @@ const ModalWrapper = (props: ModalWrapperProps) => {
           ...props,
           okFn: onFinishPrompt,
           cancelFn: onCancelFn,
-          message: createModalMessage(props.defaultValue, {valid: true})
+          message: createModalMessage(props.defaultValue, { valid: true })
         })
         break
       case ModalTypes.form:
@@ -114,7 +114,7 @@ const ModalWrapper = (props: ModalWrapperProps) => {
           ...props,
           okFn: onFinishPrompt,
           cancelFn: onCancelFn,
-          message: createForm({valid: true})
+          message: createForm({ valid: true })
         })
         break
       default:
@@ -137,7 +137,7 @@ const ModalWrapper = (props: ModalWrapperProps) => {
   // reset the message and input if any, so when the modal is shown again it doesn't show the previous value.
   const handleHide = () => {
     setState((prevState) => {
-      return {...prevState, message: ''}
+      return { ...prevState, message: '' }
     })
     props.handleHide()
   }

libs/remix-ui/app/src/lib/remix-app/components/modals/origin-warning.tsx

@@ -1,9 +1,9 @@
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
-import {ModalDialog} from '@remix-ui/modal-dialog'
+import { ModalDialog } from '@remix-ui/modal-dialog'
-import {useDialogDispatchers} from '../../context/provider'
+import { useDialogDispatchers } from '../../context/provider'
 
 const OriginWarning = () => {
-  const {alert} = useDialogDispatchers()
+  const { alert } = useDialogDispatchers()
   const [content, setContent] = useState<string>(null)
 
   useEffect(() => {
@@ -29,7 +29,7 @@ const OriginWarning = () => {
 
   useEffect(() => {
     if (content) {
-      alert({id: 'warningOriging', title: null, message: content})
+      alert({ id: 'warningOriging', title: null, message: content })
     }
   }, [content])
 

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

@@ -4,7 +4,7 @@ const RemixSplashScreen = (props) => {
   return (
     <>
       {' '}
-      <div style={{display: props.hide ? 'none' : 'block'}} className="centered">
+      <div style={{ display: props.hide ? 'none' : 'block' }} className="centered">
         <svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
           <path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z" />
           <path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z" />

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import {AlertModal, AppModal} from '../interface'
+import { AlertModal, AppModal } from '../interface'
-import {ModalInitialState} from '../state/modals'
+import { ModalInitialState } from '../state/modals'
 
 export type appProviderContextType = {
   settings: any,

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

@@ -1,11 +1,11 @@
-import React, {useReducer} from 'react'
+import React, { useReducer } from 'react'
-import {useIntl, IntlShape} from 'react-intl'
+import { useIntl, IntlShape } from 'react-intl'
-import {modalActionTypes} from '../actions/modals'
+import { modalActionTypes } from '../actions/modals'
-import {AlertModal, AppModal} from '../interface'
+import { AlertModal, AppModal } from '../interface'
-import {modalReducer} from '../reducer/modals'
+import { modalReducer } from '../reducer/modals'
-import {ModalInitialState} from '../state/modals'
+import { ModalInitialState } from '../state/modals'
-import {ModalTypes} from '../types'
+import { ModalTypes } from '../types'
-import {AppContext, dispatchModalContext, modalContext, platformContext, onLineContext} from './context'
+import { AppContext, dispatchModalContext, modalContext, platformContext, onLineContext } from './context'
 
 declare global {
   interface Window {
@@ -13,8 +13,8 @@ declare global {
   }
 }
 
-export const ModalProvider = ({children = [], reducer = modalReducer, initialState = ModalInitialState} = {}) => {
+export const ModalProvider = ({ children = [], reducer = modalReducer, initialState = ModalInitialState } = {}) => {
-  const [{modals, toasters, focusModal, focusToaster}, dispatch] = useReducer(reducer, initialState)
+  const [{ modals, toasters, focusModal, focusToaster }, dispatch] = useReducer(reducer, initialState)
 
   const onNextFn = async () => {
     dispatch({
@@ -23,7 +23,7 @@ export const ModalProvider = ({children = [], reducer = modalReducer, initialSta
   }
 
   const modal = (modalData: AppModal) => {
-    const {id, title, message, validationFn, okLabel, okFn, cancelLabel, cancelFn, modalType, defaultValue, hideFn, data} = modalData
+    const { id, title, message, validationFn, okLabel, okFn, cancelLabel, cancelFn, modalType, defaultValue, hideFn, data } = modalData
     return new Promise((resolve, reject) => {
       dispatch({
         type: modalActionTypes.setModal,
@@ -50,9 +50,9 @@ export const ModalProvider = ({children = [], reducer = modalReducer, initialSta
   const alert = (modalData: AlertModal) => {
     return modal({
       id: modalData.id,
-      title: modalData.title || window._intl.formatMessage({id: 'remixApp.alert'}),
+      title: modalData.title || window._intl.formatMessage({ id: 'remixApp.alert' }),
       message: modalData.message || modalData.title,
-      okLabel: window._intl.formatMessage({id: 'remixApp.ok'}),
+      okLabel: window._intl.formatMessage({ id: 'remixApp.ok' }),
       okFn: (value?: any) => {},
       cancelLabel: '',
       cancelFn: () => {}
@@ -69,7 +69,7 @@ export const ModalProvider = ({children = [], reducer = modalReducer, initialSta
   const toast = (message: string | JSX.Element) => {
     dispatch({
       type: modalActionTypes.setToast,
-      payload: {message, timestamp: Date.now()}
+      payload: { message, timestamp: Date.now() }
     })
   }
 
@@ -81,13 +81,13 @@ export const ModalProvider = ({children = [], reducer = modalReducer, initialSta
   }
 
   return (
-    <dispatchModalContext.Provider value={{modal, toast, alert, handleHideModal, handleToaster}}>
+    <dispatchModalContext.Provider value={{ modal, toast, alert, handleHideModal, handleToaster }}>
-      <modalContext.Provider value={{modals, toasters, focusModal, focusToaster}}>{children}</modalContext.Provider>
+      <modalContext.Provider value={{ modals, toasters, focusModal, focusToaster }}>{children}</modalContext.Provider>
     </dispatchModalContext.Provider>
   )
 }
 
-export const AppProvider = ({children = [], value = {}} = null) => {
+export const AppProvider = ({ children = [], value = {} } = null) => {
   window._intl = useIntl()
   return (
     <AppContext.Provider value={value}>

libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts

@@ -76,7 +76,7 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
       const toaster = toasterList[0]
       return { ...state, toasters: toasterList, focusToaster: toaster }
     } else {
-      return { ...state, toasters: [] }
+      return { ...state, toasters: []}
     }
   }
   }

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

@@ -1,7 +1,7 @@
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 import React, {CSSProperties} from 'react' //eslint-disable-line
 import './remix-ui-checkbox.css'
-import {Placement} from 'react-bootstrap/esm/Overlay'
+import { Placement } from 'react-bootstrap/esm/Overlay'
 
 /* eslint-disable-next-line */
 export interface RemixUiCheckboxProps {
@@ -52,8 +52,8 @@ export const RemixUiCheckbox = ({
         }
         onClick={onClick}
       >
-        <input id={id} type={inputType} onChange={onChange} style={{verticalAlign: 'bottom'}} name={name} className="custom-control-input" checked={checked} disabled={disabled} />
+        <input id={id} type={inputType} onChange={onChange} style={{ verticalAlign: 'bottom' }} name={name} className="custom-control-input" checked={checked} disabled={disabled} />
-        <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{paddingTop: '0.15rem'}} aria-disabled={disabled}>
+        <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }} aria-disabled={disabled}>
           {name ? <div className="font-weight-bold">{itemName}</div> : ''}
           {label}
         </label>
@@ -72,8 +72,8 @@ export const RemixUiCheckbox = ({
       }
       onClick={onClick}
     >
-      <input id={id} type={inputType} onChange={onChange} style={{verticalAlign: 'bottom'}} name={name} className="custom-control-input" checked={checked} />
+      <input id={id} type={inputType} onChange={onChange} style={{ verticalAlign: 'bottom' }} name={name} className="custom-control-input" checked={checked} />
-      <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{paddingTop: '0.15rem'}}>
+      <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
         {name ? <div className="font-weight-bold">{itemName}</div> : ''}
         {label}
       </label>

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

@@ -1,9 +1,9 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
 import copy from 'copy-to-clipboard'
-import {Placement} from 'react-bootstrap/esm/Overlay'
+import { Placement } from 'react-bootstrap/esm/Overlay'
 
 import './copy-to-clipboard.css'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 
 interface ICopyToClipboard {
   content?: any
@@ -16,8 +16,8 @@ interface ICopyToClipboard {
   getContent?: () => any
 }
 export const CopyToClipboard = (props: ICopyToClipboard) => {
-  const {tip = 'Copy', icon = 'fa-copy', direction = 'right', getContent, children, ...otherProps} = props
+  const { tip = 'Copy', icon = 'fa-copy', direction = 'right', getContent, children, ...otherProps } = props
-  let {content} = props
+  let { content } = props
   const [message, setMessage] = useState(tip)
 
   const copyData = () => {

libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx

@@ -31,14 +31,14 @@ export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{key: str
 
     if (item instanceof Array) {
       ret.children = item.map((item, index) => {
-        return {key: index, value: item}
+        return { key: index, value: item }
       })
       ret.self = 'Array'
       ret.isNode = true
       ret.isLeaf = false
     } else if (item instanceof Object) {
       ret.children = Object.keys(item).map((key) => {
-        return {key: key, value: item[key]}
+        return { key: key, value: item[key] }
       })
       ret.self = 'Object'
       ret.isNode = true

libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx

@@ -1,6 +1,6 @@
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 import React, {useState, useEffect} from 'react' // eslint-disable-line
-import {useIntl} from 'react-intl'
+import { useIntl } from 'react-intl'
 import './button-navigator.css'
 
 export const ButtonNavigation = ({
@@ -82,7 +82,7 @@ export const ButtonNavigation = ({
               stepOverBack && stepOverBack()
             }}
             disabled={state.overBackDisabled}
-            style={{pointerEvents: 'none', color: 'white'}}
+            style={{ pointerEvents: 'none', color: 'white' }}
           >
             <span className="fas fa-reply"></span>
           </button>
@@ -90,7 +90,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'top-start',
       tagId: 'overbackTooltip',
-      tooltipMsg: intl.formatMessage({id: 'debugger.stepOverBack'})
+      tooltipMsg: intl.formatMessage({ id: 'debugger.stepOverBack' })
     },
     stepBackJSX: {
       markup: (
@@ -110,7 +110,7 @@ export const ButtonNavigation = ({
               stepIntoBack && stepIntoBack()
             }}
             disabled={state.intoBackDisabled}
-            style={{pointerEvents: 'none', color: 'white'}}
+            style={{ pointerEvents: 'none', color: 'white' }}
           >
             <span className="fas fa-level-up-alt"></span>
           </button>
@@ -118,7 +118,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'top-start',
       tagId: 'intobackTooltip',
-      tooltipMsg: intl.formatMessage({id: 'debugger.stepBack'})
+      tooltipMsg: intl.formatMessage({ id: 'debugger.stepBack' })
     },
 
     stepIntoJSX: {
@@ -139,7 +139,7 @@ export const ButtonNavigation = ({
               stepIntoForward && stepIntoForward()
             }}
             disabled={state.intoForwardDisabled}
-            style={{pointerEvents: 'none', color: 'white'}}
+            style={{ pointerEvents: 'none', color: 'white' }}
           >
             <span className="fas fa-level-down-alt"></span>
           </button>
@@ -147,7 +147,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'top-start',
       tagId: 'intoforwardTooltip',
-      tooltipMsg: intl.formatMessage({id: 'debugger.stepInto'})
+      tooltipMsg: intl.formatMessage({ id: 'debugger.stepInto' })
     },
     stepOverForwardJSX: {
       markup: (
@@ -166,7 +166,7 @@ export const ButtonNavigation = ({
               stepOverForward && stepOverForward()
             }}
             disabled={state.overForwardDisabled}
-            style={{pointerEvents: 'none', color: 'white'}}
+            style={{ pointerEvents: 'none', color: 'white' }}
           >
             <span className="fas fa-share"></span>
           </button>
@@ -174,7 +174,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'top-end',
       tagId: 'overbackTooltip',
-      tooltipMsg: intl.formatMessage({id: 'debugger.stepOverForward'})
+      tooltipMsg: intl.formatMessage({ id: 'debugger.stepOverForward' })
     }
   }
   const jumpMarkupStructure = {
@@ -208,7 +208,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'bottom-start',
       tagId: 'jumppreviousbreakpointTooltip',
-      tooltipMsg: intl.formatMessage({id: 'debugger.jumpPreviousBreakpoint'})
+      tooltipMsg: intl.formatMessage({ id: 'debugger.jumpPreviousBreakpoint' })
     },
     jumpOutJSX: {
       markup: (
@@ -240,7 +240,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'bottom-end',
       tagId: 'jumpoutTooltip',
-      tooltipMsg: intl.formatMessage({id: 'debugger.jumpOut'})
+      tooltipMsg: intl.formatMessage({ id: 'debugger.jumpOut' })
     },
     jumpNextBreakpointJSX: {
       markup: (
@@ -260,7 +260,7 @@ export const ButtonNavigation = ({
               jumpNextBreakpoint && jumpNextBreakpoint()
             }}
             disabled={state.jumpNextBreakpointDisabled}
-            style={{pointerEvents: 'none', color: 'white'}}
+            style={{ pointerEvents: 'none', color: 'white' }}
           >
             <span className="fas fa-step-forward"></span>
           </button>
@@ -268,7 +268,7 @@ export const ButtonNavigation = ({
       ),
       placement: 'bottom-end',
       tagId: 'jumpnextbreakpointTooltip',
-      tooltipMsg: intl.formatMessage({id: 'debugger.jumpNextBreakpoint'})
+      tooltipMsg: intl.formatMessage({ id: 'debugger.jumpNextBreakpoint' })
     }
   }
 
@@ -299,9 +299,9 @@ export const ButtonNavigation = ({
           </CustomTooltip>
         ))}
       </div>
-      <div id="reverted" style={{display: revertedReason === '' ? 'none' : 'block'}}>
+      <div id="reverted" style={{ display: revertedReason === '' ? 'none' : 'block' }}>
         <span className="text-warning">This call has reverted, state changes made during the call will be reverted.</span>
-        <span className="text-warning" id="outofgas" style={{display: revertedReason === 'outofgas' ? 'inline' : 'none'}}>
+        <span className="text-warning" id="outofgas" style={{ display: revertedReason === 'outofgas' ? 'inline' : 'none' }}>
           This call will run out of gas.
         </span>
         <span

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

@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useRef} from 'react' // eslint-disable-line
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import TxBrowser from './tx-browser/tx-browser' // eslint-disable-line
 import StepManager from './step-manager/step-manager' // eslint-disable-line
 import VmDebugger from './vm-debugger/vm-debugger' // eslint-disable-line
@@ -7,7 +7,7 @@ import VmDebuggerHead from './vm-debugger/vm-debugger-head' // eslint-disable-li
 import {TransactionDebugger as Debugger} from '@remix-project/remix-debug' // eslint-disable-line
 import {DebuggerUIProps} from './idebugger-api' // eslint-disable-line
 import {Toaster} from '@remix-ui/toaster' // eslint-disable-line
-import {CustomTooltip, isValidHash} from '@remix-ui/helper'
+import { CustomTooltip, isValidHash } from '@remix-ui/helper'
 /* eslint-disable-next-line */
 import './debugger-ui.css'
 const _paq = ((window as any)._paq = (window as any)._paq || [])
@@ -93,7 +93,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       })
 
       debuggerModule.onBreakpointAdded((fileName, row) => {
-        if (state.debugger) state.debugger.breakPointManager.add({fileName: fileName, row: row})
+        if (state.debugger) state.debugger.breakPointManager.add({ fileName: fileName, row: row })
       })
 
       debuggerModule.onEditorContentChanged(() => {
@@ -107,7 +107,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       debuggerModule.onEnvChanged((provider) => {
         setState((prevState) => {
           const isLocalNodeUsed = !provider.startsWith('vm') && !provider.startsWith('injected')
-          return {...prevState, isLocalNodeUsed: isLocalNodeUsed}
+          return { ...prevState, isLocalNodeUsed: isLocalNodeUsed }
         })
       })
     }
@@ -121,7 +121,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     debuggerInstance.event.register('debuggerStatus', async (isActive) => {
       await debuggerModule.discardHighlight()
       setState((prevState) => {
-        return {...prevState, isActive}
+        return { ...prevState, isActive }
       })
     })
 
@@ -129,14 +129,14 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       setState((prevState) => {
         return {
           ...prevState,
-          sourceLocationStatus: intl.formatMessage({id: 'debugger.sourceLocationStatus1'})
+          sourceLocationStatus: intl.formatMessage({ id: 'debugger.sourceLocationStatus1' })
         }
       })
     })
 
     debuggerInstance.event.register('noBreakpointHit', async (isActive) => {
       setState((prevState) => {
-        return {...prevState, sourceLocationStatus: ''}
+        return { ...prevState, sourceLocationStatus: '' }
       })
     })
 
@@ -146,7 +146,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         setState((prevState) => {
           return {
             ...prevState,
-            sourceLocationStatus: intl.formatMessage({id: 'debugger.sourceLocationStatus2'})
+            sourceLocationStatus: intl.formatMessage({ id: 'debugger.sourceLocationStatus2' })
           }
         })
         return
@@ -175,7 +175,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         }
         if (path) {
           setState((prevState) => {
-            return {...prevState, sourceLocationStatus: ''}
+            return { ...prevState, sourceLocationStatus: '' }
           })
           await debuggerModule.discardHighlight()
           await debuggerModule.highlight(lineColumnPos, path, rawLocation, stepDetail, lineGasCost)
@@ -381,11 +381,11 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       <input
         className="custom-control-input"
         id="debugGeneratedSourcesInput"
-        onChange={({target: {checked}}) => {
+        onChange={({ target: { checked } }) => {
           setState((prevState) => {
             return {
               ...prevState,
-              opt: {...prevState.opt, debugWithGeneratedSources: checked}
+              opt: { ...prevState.opt, debugWithGeneratedSources: checked }
             }
           })
         }}
@@ -413,11 +413,11 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
                 <input
                   className="custom-control-input"
                   id="debugWithLocalNodeInput"
-                  onChange={({target: {checked}}) => {
+                  onChange={({ target: { checked } }) => {
                     setState((prevState) => {
                       return {
                         ...prevState,
-                        opt: {...prevState.opt, debugWithLocalNode: checked}
+                        opt: { ...prevState.opt, debugWithLocalNode: checked }
                       }
                     })
                   }}

libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect, useRef} from 'react' // eslint-disable-line
 
-export const Slider = ({jumpTo, sliderValue, traceLength}) => {
+export const Slider = ({ jumpTo, sliderValue, traceLength }) => {
   const onChangeId = useRef(null)
   const slider = useRef(null)
 

libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx

@@ -31,16 +31,16 @@ export const StepManager = ({
 
   const setRevertWarning = (warning) => {
     setState((prevState) => {
-      return {...prevState, revertWarning: warning}
+      return { ...prevState, revertWarning: warning }
     })
   }
 
   const updateStep = (step, stepState, jumpOutDisabled) => {
     setState((prevState) => {
-      return {...prevState, sliderValue: step, stepState, jumpOutDisabled}
+      return { ...prevState, sliderValue: step, stepState, jumpOutDisabled }
     })
   }
-  const {sliderValue, revertWarning, stepState, jumpOutDisabled} = state
+  const { sliderValue, revertWarning, stepState, jumpOutDisabled } = state
 
   return (
     <div className="py-1">

libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx

@@ -1,9 +1,9 @@
-import {CustomTooltip, isValidHash} from '@remix-ui/helper'
+import { CustomTooltip, isValidHash } from '@remix-ui/helper'
 import React, {useState, useEffect, useRef} from 'react' //eslint-disable-line
-import {useIntl, FormattedMessage} from 'react-intl'
+import { useIntl, FormattedMessage } from 'react-intl'
 import './tx-browser.css'
 
-export const TxBrowser = ({requestDebug, updateTxNumberFlag, unloadRequested, transactionNumber, debugging}) => {
+export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, transactionNumber, debugging }) => {
   const [state, setState] = useState({
     txNumber: '',
     isTxNumberValid: false
@@ -63,7 +63,7 @@ export const TxBrowser = ({requestDebug, updateTxNumberFlag, unloadRequested, tr
         onClick={handleSubmit}
         data-id="debuggerTransactionStartButton"
         disabled={!state.txNumber || !state.isTxNumberValid}
-        style={{pointerEvents: 'none', color: 'white'}}
+        style={{ pointerEvents: 'none', color: 'white' }}
       >
         <span>
           <FormattedMessage id={`debugger.${debugging ? 'stopDebugging' : 'startDebugging'}`} />
@@ -81,9 +81,9 @@ export const TxBrowser = ({requestDebug, updateTxNumberFlag, unloadRequested, tr
             className="form-control m-0 txinput"
             id="txinput"
             type="text"
-            onChange={({target: {value}}) => txInputChanged(value)}
+            onChange={({ target: { value } }) => txInputChanged(value)}
             onInput={txInputOnInput}
-            placeholder={intl.formatMessage({id: 'debugger.placeholder'})}
+            placeholder={intl.formatMessage({ id: 'debugger.placeholder' })}
             data-id="debuggerTransactionInput"
             disabled={debugging}
           />

libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx

@@ -1,9 +1,9 @@
 import React, {useState, useRef, useEffect, useReducer} from 'react' // eslint-disable-line
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
-import {initialState, reducer} from '../../reducers/assembly-items'
+import { initialState, reducer } from '../../reducers/assembly-items'
 import './styles/assembly-items.css'
 
-export const AssemblyItems = ({registerEvent}) => {
+export const AssemblyItems = ({ registerEvent }) => {
   const [assemblyItems, dispatch] = useReducer(reducer, initialState)
   const [absoluteSelectedIndex, setAbsoluteSelectedIndex] = useState(0)
   const [selectedItem, setSelectedItem] = useState(0)
@@ -34,7 +34,7 @@ export const AssemblyItems = ({registerEvent}) => {
       registerEvent('lineGasCostChanged', (instructionsIndexes: number[], line: []) => {
         dispatch({
           type: 'FETCH_INDEXES_FOR_NEW_LINE',
-          payload: {currentLineIndexes: instructionsIndexes || [], line}
+          payload: { currentLineIndexes: instructionsIndexes || [], line }
         })
       })
   }, [])

libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx

@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const CalldataPanel = ({calldata, className = ''}) => {
+export const CalldataPanel = ({ calldata, className = '' }) => {
   return (
     <div id="calldatapanel" className={className}>
       <DropdownPanel dropdownName="Call Data" calldata={calldata || {}} />

libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx

@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const CallstackPanel = ({calldata, className}) => {
+export const CallstackPanel = ({ calldata, className }) => {
   return (
     <div id="callstackpanel" className={className}>
       <DropdownPanel dropdownName="Call Stack" calldata={calldata || {}} />

libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect} from 'react' // eslint-disable-line
 import AssemblyItems from './assembly-items' // eslint-disable-line
 
-export const CodeListView = ({registerEvent, className = ''}) => {
+export const CodeListView = ({ registerEvent, className = '' }) => {
   return (
     <div className={className} id="asmcodes">
       <AssemblyItems registerEvent={registerEvent} />

libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx

@@ -1,10 +1,10 @@
 import React, {useState, useEffect, useReducer} from 'react' // eslint-disable-line
-import {useIntl} from 'react-intl'
+import { useIntl } from 'react-intl'
 import {TreeView, TreeViewItem} from '@remix-ui/tree-view' // eslint-disable-line
 import {DropdownPanelProps, ExtractData, ExtractFunc} from '../../types' // eslint-disable-line
 import {CopyToClipboard} from '@remix-ui/clipboard' // eslint-disable-line
-import {initialState, reducer} from '../../reducers/calldata'
+import { initialState, reducer } from '../../reducers/calldata'
-import {isBigInt} from 'web3-validator'
+import { isBigInt } from 'web3-validator'
 import './styles/dropdown-panel.css'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
@@ -34,14 +34,14 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
 
     if (item instanceof Array) {
       ret.children = item.map((item, index) => {
-        return {key: index, value: item}
+        return { key: index, value: item }
       })
       ret.self = 'Array'
       ret.isNode = true
       ret.isLeaf = false
     } else if (item instanceof Object) {
       ret.children = Object.keys(item).map((key) => {
-        return {key: key, value: item[key]}
+        return { key: key, value: item[key] }
       })
       ret.self = 'Object'
       ret.isNode = true
@@ -90,7 +90,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     header: '',
     toggleDropdown: true,
     message: {
-      innerText: intl.formatMessage({id: 'debugger.noDataAvailable'}),
+      innerText: intl.formatMessage({ id: 'debugger.noDataAvailable' }),
       display: 'block'
     },
     dropdownContent: {
@@ -110,12 +110,12 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
   useEffect(() => {
     registerEvent &&
       registerEvent(loadMoreCompletedEvent, (updatedCalldata) => {
-        dispatch({type: 'UPDATE_CALLDATA_SUCCESS', payload: updatedCalldata})
+        dispatch({ type: 'UPDATE_CALLDATA_SUCCESS', payload: updatedCalldata })
       })
   }, [])
 
   useEffect(() => {
-    dispatch({type: 'FETCH_CALLDATA_SUCCESS', payload: calldata})
+    dispatch({ type: 'FETCH_CALLDATA_SUCCESS', payload: calldata })
   }, [calldata])
 
   useEffect(() => {
@@ -199,7 +199,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         // replace 0xNaN with 0x0
         copiableContent,
         message: {
-          innerText: isEmpty ? intl.formatMessage({id: 'debugger.noDataAvailable'}) : '',
+          innerText: isEmpty ? intl.formatMessage({ id: 'debugger.noDataAvailable' }) : '',
           display: isEmpty ? 'block' : 'none'
         },
         updating: false,
@@ -232,7 +232,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
                 id={'treeViewLoadMore'}
                 data-id={'treeViewLoadMore'}
                 className="cursor_pointer"
-                label={intl.formatMessage({id: 'debugger.loadMore'})}
+                label={intl.formatMessage({ id: 'debugger.loadMore' })}
                 onClick={() => {
                   triggerEvent(loadMoreEvent, [data.cursor])
                 }}
@@ -267,17 +267,17 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         <span className="nameDetail" onClick={handleToggle}>
           {header}
         </span>
-        <CopyToClipboard tip={intl.formatMessage({id: 'debugger.copy'})} content={state.copiableContent} data-id={`dropdownPanelCopyToClipboard${uniquePanelName}`} />
+        <CopyToClipboard tip={intl.formatMessage({ id: 'debugger.copy' })} content={state.copiableContent} data-id={`dropdownPanelCopyToClipboard${uniquePanelName}`} />
       </div>
-      <div className="dropdownpanel" style={{display: state.toggleDropdown ? 'block' : 'none'}}>
+      <div className="dropdownpanel" style={{ display: state.toggleDropdown ? 'block' : 'none' }}>
-        <i className="refresh fas fa-sync" style={{display: state.updating ? 'inline-block' : 'none'}} aria-hidden="true"></i>
+        <i className="refresh fas fa-sync" style={{ display: state.updating ? 'inline-block' : 'none' }} aria-hidden="true"></i>
-        <div className="dropdowncontent pb-2" style={{display: state.dropdownContent.display, ...bodyStyle}}>
+        <div className="dropdowncontent pb-2" style={{ display: state.dropdownContent.display, ...bodyStyle }}>
           {state.data && <TreeView id="treeView">{Object.keys(state.data).map((innerkey) => renderData(state.data[innerkey], state.data, innerkey, innerkey))}</TreeView>}
         </div>
         <div className="dropdownrawcontent" hidden={true}>
           {state.copiableContent}
         </div>
-        <div className="message" style={{display: state.message.display}}>
+        <div className="message" style={{ display: state.message.display }}>
           {state.message.innerText}
         </div>
       </div>

libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx

@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import {DropdownPanel} from './dropdown-panel' // eslint-disable-line
 
-export const FullStoragesChanges = ({calldata, className = ''}) => {
+export const FullStoragesChanges = ({ calldata, className = '' }) => {
   return (
     <div className={className} id="fullstorageschangespanel">
       <DropdownPanel dropdownName="Full Storage Changes" calldata={calldata || {}} />

libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx

@@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 import {default as deepequal} from 'deep-equal' // eslint-disable-line
 
-export const FunctionPanel = ({data, className, stepManager}) => {
+export const FunctionPanel = ({ data, className, stepManager }) => {
   const [functionData, setFunctionData] = useState(null)
 
   useEffect(() => {

libs/remix-ui/debugger-ui/src/lib/vm-debugger/global-variables.tsx

@@ -2,7 +2,7 @@ import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 import {toBigInt} from 'web3-utils' // eslint-disable-line
 
-export const GlobalVariables = ({block, receipt, tx, className}) => {
+export const GlobalVariables = ({ block, receipt, tx, className }) => {
   // see https://docs.soliditylang.org/en/latest/units-and-global-variables.html#block-and-transaction-properties
   const globals = {
     'block.chainid': tx && tx.chainId,
@@ -22,7 +22,7 @@ export const GlobalVariables = ({block, receipt, tx, className}) => {
 
   return (
     <div id="globalvariable" data-id="globalvariable" className={className}>
-      <DropdownPanel hexHighlight={false} bodyStyle={{fontFamily: 'monospace'}} dropdownName="Global Variables" calldata={globals || {}} />
+      <DropdownPanel hexHighlight={false} bodyStyle={{ fontFamily: 'monospace' }} dropdownName="Global Variables" calldata={globals || {}} />
     </div>
   )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx

@@ -1,10 +1,10 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const MemoryPanel = ({calldata, className}) => {
+export const MemoryPanel = ({ calldata, className }) => {
   return (
     <div className={className}>
-      <DropdownPanel hexHighlight={true} bodyStyle={{fontFamily: 'monospace'}} dropdownName="Memory" calldata={calldata || {}} />
+      <DropdownPanel hexHighlight={true} bodyStyle={{ fontFamily: 'monospace' }} dropdownName="Memory" calldata={calldata || {}} />
     </div>
   )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx

@@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel' // eslint-disable-line
 import {extractData} from '../../utils/solidityTypeFormatter' // eslint-disable-line
 import {ExtractData} from '../../types' // eslint-disable-line
 
-export const SolidityLocals = ({data, message, registerEvent, triggerEvent, className = ''}) => {
+export const SolidityLocals = ({ data, message, registerEvent, triggerEvent, className = '' }) => {
   const [calldata, setCalldata] = useState(null)
 
   useEffect(() => {
@@ -34,10 +34,10 @@ export const SolidityLocals = ({data, message, registerEvent, triggerEvent, clas
         }}
       >
         {' ' + key}:
-        <label className="mb-0" style={{color}}>
+        <label className="mb-0" style={{ color }}>
           {' ' + data.self}
         </label>
-        <label style={{fontStyle: 'italic'}}>{data.isProperty || !data.type ? '' : ' ' + data.type}</label>
+        <label style={{ fontStyle: 'italic' }}>{data.isProperty || !data.type ? '' : ' ' + data.type}</label>
       </label>
     )
   }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx

@@ -1,9 +1,9 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
-import {extractData} from '../../utils/solidityTypeFormatter'
+import { extractData } from '../../utils/solidityTypeFormatter'
 import {ExtractData} from '../../types' // eslint-disable-line
 
-export const SolidityState = ({calldata, message, className}) => {
+export const SolidityState = ({ calldata, message, className }) => {
   const formatSelf = (key: string, data: ExtractData) => {
     try {
       let color = 'var(--primary)'
@@ -26,10 +26,10 @@ export const SolidityState = ({calldata, message, className}) => {
           }}
         >
           {' ' + key}:
-          <label className="mb-0" style={{color}}>
+          <label className="mb-0" style={{ color }}>
             {' ' + data.self}
           </label>
-          <label style={{fontStyle: 'italic'}}>{data.isProperty || !data.type ? '' : ' ' + data.type}</label>
+          <label style={{ fontStyle: 'italic' }}>{data.isProperty || !data.type ? '' : ' ' + data.type}</label>
         </label>
       )
     } catch (e) {

libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx

@@ -1,10 +1,10 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const StackPanel = ({calldata, className}) => {
+export const StackPanel = ({ calldata, className }) => {
   return (
     <div id="stackpanel" className={className}>
-      <DropdownPanel hexHighlight={true} bodyStyle={{fontFamily: 'monospace'}} dropdownName="Stack" calldata={calldata || {}} />
+      <DropdownPanel hexHighlight={true} bodyStyle={{ fontFamily: 'monospace' }} dropdownName="Stack" calldata={calldata || {}} />
     </div>
   )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx

@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const StepDetail = ({stepDetail, className = ''}) => {
+export const StepDetail = ({ stepDetail, className = '' }) => {
   return (
     <div className={className} id="stepdetail" data-id="stepdetail">
       <DropdownPanel className={className} hexHighlight={false} dropdownName="Step details" calldata={stepDetail || {}} />

libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx

@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const StoragePanel = ({calldata, header, className}) => {
+export const StoragePanel = ({ calldata, header, className }) => {
   return (
     <div id="storagepanel" className={className}>
       <DropdownPanel dropdownName="Storage" calldata={calldata || {}} header={header} />

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx

@@ -5,7 +5,7 @@ import StepDetail from './step-detail' // eslint-disable-line
 import SolidityState from './solidity-state' // eslint-disable-line
 import SolidityLocals from './solidity-locals' // eslint-disable-line
 
-export const VmDebuggerHead = ({vmDebugger: {registerEvent, triggerEvent}, debugging, stepManager}) => {
+export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent }, debugging, stepManager }) => {
   const [functionPanel, setFunctionPanel] = useState(null)
   const [stepDetail, setStepDetail] = useState({
     'vm trace step': '-',
@@ -69,73 +69,73 @@ export const VmDebuggerHead = ({vmDebugger: {registerEvent, triggerEvent}, debug
     registerEvent &&
       registerEvent('traceCurrentStepUpdate', (error, step) => {
         setStepDetail((prevState) => {
-          return {...prevState, 'execution step': error ? '-' : step}
+          return { ...prevState, 'execution step': error ? '-' : step }
         })
       })
     registerEvent &&
       registerEvent('traceMemExpandUpdate', (error, addmem) => {
         setStepDetail((prevState) => {
-          return {...prevState, 'add memory': error ? '-' : addmem}
+          return { ...prevState, 'add memory': error ? '-' : addmem }
         })
       })
     registerEvent &&
       registerEvent('traceStepCostUpdate', (error, gas) => {
         setStepDetail((prevState) => {
-          return {...prevState, gas: error ? '-' : gas}
+          return { ...prevState, gas: error ? '-' : gas }
         })
       })
     registerEvent &&
       registerEvent('traceCurrentCalledAddressAtUpdate', (error, address) => {
         setStepDetail((prevState) => {
-          return {...prevState, 'loaded address': error ? '-' : address}
+          return { ...prevState, 'loaded address': error ? '-' : address }
         })
       })
     registerEvent &&
       registerEvent('traceRemainingGasUpdate', (error, remainingGas) => {
         setStepDetail((prevState) => {
-          return {...prevState, 'remaining gas': error ? '-' : remainingGas}
+          return { ...prevState, 'remaining gas': error ? '-' : remainingGas }
         })
       })
     registerEvent &&
       registerEvent('indexUpdate', (index) => {
         setStepDetail((prevState) => {
-          return {...prevState, 'vm trace step': index}
+          return { ...prevState, 'vm trace step': index }
         })
       })
     registerEvent &&
       registerEvent('solidityState', (calldata) => {
         setSolidityState(() => {
-          return {...solidityState, calldata}
+          return { ...solidityState, calldata }
         })
       })
     registerEvent &&
       registerEvent('solidityStateMessage', (message) => {
         setSolidityState(() => {
-          return {...solidityState, message}
+          return { ...solidityState, message }
         })
       })
     registerEvent &&
       registerEvent('solidityLocals', (calldata) => {
         setSolidityLocals(() => {
-          return {...solidityLocals, calldata}
+          return { ...solidityLocals, calldata }
         })
       })
     registerEvent &&
       registerEvent('solidityLocalsMessage', (message) => {
         setSolidityLocals(() => {
-          return {...solidityLocals, message}
+          return { ...solidityLocals, message }
         })
       })
   }, [debugging])
 
   return (
     <div id="vmheadView" className="mt-1 px-2 d-flex">
-      <div className="d-flex flex-column pr-2" style={{flex: 1}}>
+      <div className="d-flex flex-column pr-2" style={{ flex: 1 }}>
         <FunctionPanel className="pb-1" data={functionPanel} stepManager={stepManager} />
         <SolidityLocals className="pb-1" data={solidityLocals.calldata} message={solidityLocals.message} registerEvent={registerEvent} triggerEvent={triggerEvent} />
         <CodeListView className="pb-2 flex-grow-1" registerEvent={registerEvent} />
       </div>
-      <div className="d-flex flex-column pl-2" style={{flex: 1}}>
+      <div className="d-flex flex-column pl-2" style={{ flex: 1 }}>
         <SolidityState className="pb-1" calldata={solidityState.calldata} message={solidityState.message} />
         <StepDetail className="pb-1 pb-2 h-100 flex-grow-1" stepDetail={stepDetail} />
       </div>

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx

@@ -8,7 +8,7 @@ import ReturnValuesPanel from './dropdown-panel' // eslint-disable-line
 import FullStoragesChangesPanel from './full-storages-changes' // eslint-disable-line
 import GlobalVariables from './global-variables' // eslint-disable-line
 
-export const VmDebugger = ({vmDebugger: {registerEvent}, currentBlock, currentReceipt, currentTransaction, debugging}) => {
+export const VmDebugger = ({ vmDebugger: { registerEvent }, currentBlock, currentReceipt, currentTransaction, debugging }) => {
   const [calldataPanel, setCalldataPanel] = useState(null)
   const [memoryPanel, setMemoryPanel] = useState(null)
   const [callStackPanel, setCallStackPanel] = useState(null)
@@ -40,7 +40,7 @@ export const VmDebugger = ({vmDebugger: {registerEvent}, currentBlock, currentRe
     registerEvent &&
       registerEvent('traceManagerStorageUpdate', (calldata, header) => {
         setStoragePanel(() => {
-          return {calldata, header}
+          return { calldata, header }
         })
       })
     registerEvent &&

libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx

@@ -1,7 +1,7 @@
-import {extractParentFromKey} from '@remix-ui/helper'
+import { extractParentFromKey } from '@remix-ui/helper'
-import React, {useContext, useRef, useState} from 'react'
+import React, { useContext, useRef, useState } from 'react'
-import {MoveContext} from './context/moveContext'
+import { MoveContext } from './context/moveContext'
-import {DraggableType, DragType} from './types'
+import { DraggableType, DragType } from './types'
 
 export const Drag = (props: DragType) => {
   const [dragged, setDragged] = useState<{path: string; isDirectory: boolean}>({} as {path: string; isDirectory: boolean})

libs/remix-ui/editor/src/lib/actions/editor.ts

@@ -87,7 +87,7 @@ export const reducerActions = (models = initialState, action: Action) => {
     const size = action.payload.size
     if (size === 1) {
       editor.trigger('keyboard', 'editor.action.fontZoomIn', {});
-    } else{
+    } else {
       editor.trigger('keyboard', 'editor.action.fontZoomOut', {});
     }
     return models

libs/remix-ui/editor/src/lib/providers/codeActionProvider.ts

@@ -1,7 +1,7 @@
-import {Monaco} from '@monaco-editor/react'
+import { Monaco } from '@monaco-editor/react'
 import monaco from '../../types/monaco'
-import {EditorUIProps} from '../remix-ui-editor'
+import { EditorUIProps } from '../remix-ui-editor'
-import {default as fixesList} from './quickfixes'
+import { default as fixesList } from './quickfixes'
 
 export class RemixCodeActionProvider implements monaco.languages.CodeActionProvider {
   props: EditorUIProps
@@ -115,7 +115,7 @@ export class RemixCodeActionProvider implements monaco.languages.CodeActionProvi
    * @param fix details of quick fix to apply
    */
   addQuickFix(actions: monaco.languages.CodeAction[], error: monaco.editor.IMarkerData, uri: monaco.Uri, fix: Record<string, any>) {
-    const {id, title, range, text} = fix
+    const { id, title, range, text } = fix
     actions.push({
       title,
       diagnostics: [error],
@@ -124,7 +124,7 @@ export class RemixCodeActionProvider implements monaco.languages.CodeActionProvi
         edits: [
           {
             resource: uri,
-            textEdit: {range, text},
+            textEdit: { range, text },
             versionId: undefined
           }
         ]

libs/remix-ui/editor/src/lib/providers/completion/completionGlobals.ts

@@ -33,7 +33,6 @@ export function getBytesCompletionItems(range: monacoTypes.IRange, monaco): mona
   ]
 }
 
-
 export function getBlockCompletionItems(range: monacoTypes.IRange, monaco): monacoTypes.languages.CompletionItem[] {
   return [
     {
@@ -442,7 +441,6 @@ export function getAbiCompletionItems(range: monacoTypes.IRange, monaco): monaco
   ];
 }
 
-
 export function GetCompletionTypes(range: monacoTypes.IRange, monaco): monacoTypes.languages.CompletionItem[] {
   const completionItems = [];
   const types = ['address', 'string', 'bytes', 'byte', 'int', 'uint', 'bool', 'hash'];
@@ -510,7 +508,6 @@ export function GetCompletionKeywords(range: monacoTypes.IRange, monaco): monaco
   return completionItems;
 }
 
-
 export function GeCompletionUnits(range: monacoTypes.IRange, monaco): monacoTypes.languages.CompletionItem[] {
   const completionItems = [];
   const etherUnits = ['wei', 'gwei', 'finney', 'szabo', 'ether'];
@@ -557,7 +554,6 @@ export function GetImports(range: monacoTypes.IRange
         }
       })]
 
-
     list = [...list,
       ...data.files
         .filter((item) => item.startsWith(word))

libs/remix-ui/editor/src/lib/providers/completionProvider.ts

@@ -158,7 +158,6 @@ export class RemixCompletionProvider implements monacoTypes.languages.Completion
       return variableDeclaration
     }
 
-
     for (const node of Object.values(filteredNodes) as any[]) {
       if (!node.name) continue
       if (node.nodeType === 'VariableDeclaration') {
@@ -282,7 +281,7 @@ export class RemixCompletionProvider implements monacoTypes.languages.Completion
           } else { // we use the block info from the nodesAtPosition
             const contractNodes = fileNodes.contracts[node.name].contractNodes
             for (const contractNode of Object.values(contractNodes)) {
-              if((contractNode as any).nodeType === 'Block'){
+              if ((contractNode as any).nodeType === 'Block'){
                 const nodeOfScope = await this.props.plugin.call('codeParser', 'getNodesWithScope', (contractNode as any).id)
                 nodes = [...nodes, ...nodeOfScope]
               }
@@ -348,7 +347,6 @@ export class RemixCompletionProvider implements monacoTypes.languages.Completion
       })
     }
 
-
     for (const nodeOfScope of contractCompletions) {
       if (nodeOfScope.name === nameOfLastTypedExpression) {
         if (nodeOfScope.typeName && nodeOfScope.typeName.nodeType === 'UserDefinedTypeName') {
@@ -373,8 +371,6 @@ export class RemixCompletionProvider implements monacoTypes.languages.Completion
 
     }
 
-
-
     return { nodes, suggestions }
   }
 

libs/remix-ui/editor/src/lib/providers/hoverProvider.ts

@@ -46,7 +46,6 @@ export class RemixHoverProvider implements monacoTypes.languages.HoverProvider {
       return await this.props.plugin.call('codeParser', 'getVariableDeclaration', node)
     }
 
-
     const getParamaters = async (node: any) => {
       return await this.props.plugin.call('codeParser', 'getFunctionParamaters', node)
     }
@@ -55,7 +54,6 @@ export class RemixHoverProvider implements monacoTypes.languages.HoverProvider {
       return await this.props.plugin.call('codeParser', 'getFunctionReturnParameters', node)
     }
 
-
     const getOverrides = async (node: any) => {
       if (node.overrides) {
         const overrides = []

libs/remix-ui/editor/src/lib/providers/inlineCompletionProvider.ts

@@ -2,7 +2,7 @@
 import { EditorUIProps, monacoTypes } from '@remix-ui/editor';
 import { CompletionTimer } from './completionTimer';
 
-import axios, {AxiosResponse} from 'axios'
+import axios, { AxiosResponse } from 'axios'
 import { slice } from 'lodash';
 const _paq = (window._paq = window._paq || [])
 
@@ -20,7 +20,6 @@ export class RemixInLineCompletionProvider implements monacoTypes.languages.Inli
     this.completionEnabled = true
   }
 
-
   async provideInlineCompletions(model: monacoTypes.editor.ITextModel, position: monacoTypes.Position, context: monacoTypes.languages.InlineCompletionContext, token: monacoTypes.CancellationToken): Promise<monacoTypes.languages.InlineCompletions<monacoTypes.languages.InlineCompletion>> {
     if (context.selectedSuggestionInfo) {
       return;
@@ -64,7 +63,7 @@ export class RemixInLineCompletionProvider implements monacoTypes.languages.Inli
       const ask = split[split.length - 2].trimStart()
       if (split[split.length - 1].trim() === '' && ask.startsWith('///')) {
         // use the code generation model, only take max 1000 word as context
-        this.props.plugin.call('terminal', 'log', {type: 'aitypewriterwarning', value: 'Solcoder - generating code for following comment: ' + ask.replace('///', '')})
+        this.props.plugin.call('terminal', 'log', { type: 'aitypewriterwarning', value: 'Solcoder - generating code for following comment: ' + ask.replace('///', '') })
 
         const data = await this.props.plugin.call('solcoder', 'code_generation', word)
         _paq.push(['trackEvent', 'ai', 'solcoder', 'code_generation'])
@@ -104,7 +103,7 @@ export class RemixInLineCompletionProvider implements monacoTypes.languages.Inli
 
     if (word.replace(/ +$/, '').endsWith('\n')){
       // Code insertion
-      try{
+      try {
         const output = await this.props.plugin.call('solcoder', 'code_insertion', word, word_after)
         _paq.push(['trackEvent', 'ai', 'solcoder', 'code_insertion'])
         const generatedText = output[0] // no need to clean it. should already be

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

@@ -152,16 +152,16 @@ export const EditorUI = (props: EditorUIProps) => {
   \t\t\t\t\t\t\t| |_) | |  _|   | |\\/| |  | |   \\  /    | |  | | | | |  _|  
   \t\t\t\t\t\t\t|  _ <  | |___  | |  | |  | |   /  \\    | |  | |_| | | |___ 
   \t\t\t\t\t\t\t|_| \\_\\ |_____| |_|  |_| |___| /_/\\_\\  |___| |____/  |_____|\n\n
-  \t\t\t\t\t\t\t${intl.formatMessage({id: 'editor.keyboardShortcuts'})}:\n
+  \t\t\t\t\t\t\t${intl.formatMessage({ id: 'editor.keyboardShortcuts' })}:\n
-  \t\t\t\t\t\t\t\tCTRL + S: ${intl.formatMessage({id: 'editor.keyboardShortcuts.text1'})}\n
+  \t\t\t\t\t\t\t\tCTRL + S: ${intl.formatMessage({ id: 'editor.keyboardShortcuts.text1' })}\n
-  \t\t\t\t\t\t\t\tCTRL + Shift + F : ${intl.formatMessage({id: 'editor.keyboardShortcuts.text2'})}\n
+  \t\t\t\t\t\t\t\tCTRL + Shift + F : ${intl.formatMessage({ id: 'editor.keyboardShortcuts.text2' })}\n
-  \t\t\t\t\t\t\t\tCTRL + Shift + A : ${intl.formatMessage({id: 'editor.keyboardShortcuts.text3'})}\n
+  \t\t\t\t\t\t\t\tCTRL + Shift + A : ${intl.formatMessage({ id: 'editor.keyboardShortcuts.text3' })}\n
-  \t\t\t\t\t\t\t\tCTRL + SHIFT + S: ${intl.formatMessage({id: 'editor.keyboardShortcuts.text4'})}\n
+  \t\t\t\t\t\t\t\tCTRL + SHIFT + S: ${intl.formatMessage({ id: 'editor.keyboardShortcuts.text4' })}\n
-  \t\t\t\t\t\t\t${intl.formatMessage({id: 'editor.editorKeyboardShortcuts'})}:\n
+  \t\t\t\t\t\t\t${intl.formatMessage({ id: 'editor.editorKeyboardShortcuts' })}:\n
-  \t\t\t\t\t\t\t\tCTRL + Alt + F : ${intl.formatMessage({id: 'editor.editorKeyboardShortcuts.text1'})}\n
+  \t\t\t\t\t\t\t\tCTRL + Alt + F : ${intl.formatMessage({ id: 'editor.editorKeyboardShortcuts.text1' })}\n
-  \t\t\t\t\t\t\t${intl.formatMessage({id: 'editor.importantLinks'})}:\n
+  \t\t\t\t\t\t\t${intl.formatMessage({ id: 'editor.importantLinks' })}:\n
-  \t\t\t\t\t\t\t\t${intl.formatMessage({id: 'editor.importantLinks.text1'})}: https://remix-project.org/\n
+  \t\t\t\t\t\t\t\t${intl.formatMessage({ id: 'editor.importantLinks.text1' })}: https://remix-project.org/\n
-  \t\t\t\t\t\t\t\t${intl.formatMessage({id: 'editor.importantLinks.text2'})}: https://remix-ide.readthedocs.io/en/latest/\n
+  \t\t\t\t\t\t\t\t${intl.formatMessage({ id: 'editor.importantLinks.text2' })}: https://remix-ide.readthedocs.io/en/latest/\n
   \t\t\t\t\t\t\t\tGithub: https://github.com/ethereum/remix-project\n
   \t\t\t\t\t\t\t\tGitter: https://gitter.im/ethereum/remix\n
   \t\t\t\t\t\t\t\tMedium: https://medium.com/remix-ide\n
@@ -472,7 +472,7 @@ export const EditorUI = (props: EditorUIProps) => {
 
   const addDecoration = (decoration: sourceAnnotation | sourceMarker, filePath: string, typeOfDecoration: string) => {
     const model = editorModelsState[filePath]?.model
-    if (!model) return { currentDecorations: [] }
+    if (!model) return { currentDecorations: []}
     const monacoDecoration = convertToMonacoDecoration(decoration, typeOfDecoration)
     return {
       currentDecorations: model.deltaDecorations([], [monacoDecoration]),
@@ -629,7 +629,7 @@ export const EditorUI = (props: EditorUIProps) => {
       if (!pasteCodeRef.current && e && e.range && e.range.startLineNumber >= 0 && e.range.endLineNumber >= 0 && e.range.endLineNumber - e.range.startLineNumber > 10) {
         const modalContent: AlertModal = {
           id: 'newCodePasted',
-          title: intl.formatMessage({id: 'editor.title1'}),
+          title: intl.formatMessage({ id: 'editor.title1' }),
           message: (
             <div>
               {' '}
@@ -638,7 +638,7 @@ export const EditorUI = (props: EditorUIProps) => {
               <div>
                 <FormattedMessage id="editor.title1.message2" />
                 <div className="mt-2">
-                  <FormattedMessage id="editor.title1.message3" values={{span: (chunks) => <span className="text-warning">{chunks}</span>}} />
+                  <FormattedMessage id="editor.title1.message3" values={{ span: (chunks) => <span className="text-warning">{chunks}</span> }} />
                 </div>
                 <div className="text-warning  mt-2">
                   <FormattedMessage id="editor.title1.message4" />
@@ -670,7 +670,7 @@ export const EditorUI = (props: EditorUIProps) => {
     // add context menu items
     const zoominAction = {
       id: 'zoomIn',
-      label: intl.formatMessage({id: 'editor.zoomIn'}),
+      label: intl.formatMessage({ id: 'editor.zoomIn' }),
       contextMenuOrder: 0, // choose the order
       contextMenuGroupId: 'zooming', // create a new grouping
       keybindings: [
@@ -683,7 +683,7 @@ export const EditorUI = (props: EditorUIProps) => {
     }
     const zoomOutAction = {
       id: 'zoomOut',
-      label: intl.formatMessage({id: 'editor.zoomOut'}),
+      label: intl.formatMessage({ id: 'editor.zoomOut' }),
       contextMenuOrder: 0, // choose the order
       contextMenuGroupId: 'zooming', // create a new grouping
       keybindings: [
@@ -696,7 +696,7 @@ export const EditorUI = (props: EditorUIProps) => {
     }
     const formatAction = {
       id: 'autoFormat',
-      label: intl.formatMessage({id: 'editor.formatCode'}),
+      label: intl.formatMessage({ id: 'editor.formatCode' }),
       contextMenuOrder: 0, // choose the order
       contextMenuGroupId: 'formatting', // create a new grouping
       keybindings: [
@@ -712,14 +712,14 @@ export const EditorUI = (props: EditorUIProps) => {
     let gptGenerateDocumentationAction
     const executeGptGenerateDocumentationAction = {
       id: 'generateDocumentation',
-      label: intl.formatMessage({id: 'editor.generateDocumentation'}),
+      label: intl.formatMessage({ id: 'editor.generateDocumentation' }),
       contextMenuOrder: 0, // choose the order
       contextMenuGroupId: 'gtp', // create a new grouping
       keybindings: [],
       run: async () => {
         const file = await props.plugin.call('fileManager', 'getCurrentFile')
         const content = await props.plugin.call('fileManager', 'readFile', file)
-        const message = intl.formatMessage({id: 'editor.generateDocumentationByAI'}, {content, currentFunction: currentFunction.current})
+        const message = intl.formatMessage({ id: 'editor.generateDocumentationByAI' }, { content, currentFunction: currentFunction.current })
         await props.plugin.call('openaigpt', 'message', message)
         _paq.push(['trackEvent', 'ai', 'openai', 'generateDocumentation'])
       },
@@ -728,14 +728,14 @@ export const EditorUI = (props: EditorUIProps) => {
     let gptExplainFunctionAction
     const executegptExplainFunctionAction = {
       id: 'explainFunction',
-      label: intl.formatMessage({id: 'editor.explainFunction'}),
+      label: intl.formatMessage({ id: 'editor.explainFunction' }),
       contextMenuOrder: 1, // choose the order
       contextMenuGroupId: 'gtp', // create a new grouping
       keybindings: [],
       run: async () => {
         const file = await props.plugin.call('fileManager', 'getCurrentFile')
         const content = await props.plugin.call('fileManager', 'readFile', file)
-        const message = intl.formatMessage({id: 'editor.explainFunctionByAI'}, {content, currentFunction: currentFunction.current})
+        const message = intl.formatMessage({ id: 'editor.explainFunctionByAI' }, { content, currentFunction: currentFunction.current })
         await props.plugin.call('openaigpt', 'message', message)
         _paq.push(['trackEvent', 'ai', 'openai', 'explainFunction'])
       },
@@ -744,7 +744,7 @@ export const EditorUI = (props: EditorUIProps) => {
     let solgptExplainFunctionAction
     const executeSolgptExplainFunctionAction = {
       id: 'solExplainFunction',
-      label: intl.formatMessage({id: 'editor.explainFunctionSol'}),
+      label: intl.formatMessage({ id: 'editor.explainFunctionSol' }),
       contextMenuOrder: 1, // choose the order
       contextMenuGroupId: 'sol-gtp', // create a new grouping
       keybindings: [],
@@ -758,12 +758,11 @@ export const EditorUI = (props: EditorUIProps) => {
       },
     }
 
-
     const freeFunctionCondition = editor.createContextKey('freeFunctionCondition', false)
     let freeFunctionAction
     const executeFreeFunctionAction = {
       id: 'executeFreeFunction',
-      label: intl.formatMessage({id: 'editor.executeFreeFunction'}),
+      label: intl.formatMessage({ id: 'editor.executeFreeFunction' }),
       contextMenuOrder: 0, // choose the order
       contextMenuGroupId: 'execute', // create a new grouping
       precondition: 'freeFunctionCondition',
@@ -780,10 +779,10 @@ export const EditorUI = (props: EditorUIProps) => {
             const file = await props.plugin.call('fileManager', 'getCurrentFile')
             props.plugin.call('solidity-script', 'execute', file, freeFunctionNode.name)
           } else {
-            props.plugin.call('notification', 'toast', intl.formatMessage({id: 'editor.toastText1'}))
+            props.plugin.call('notification', 'toast', intl.formatMessage({ id: 'editor.toastText1' }))
           }
         } else {
-          props.plugin.call('notification', 'toast', intl.formatMessage({id: 'editor.toastText2'}))
+          props.plugin.call('notification', 'toast', intl.formatMessage({ id: 'editor.toastText2' }))
         }
       },
     }
@@ -824,27 +823,26 @@ export const EditorUI = (props: EditorUIProps) => {
         return
       }
 
-      
       const { nodesAtPosition } = await retrieveNodesAtPosition(props.editorAPI, props.plugin)
       const freeFunctionNode = nodesAtPosition.find((node) => node.kind === 'freeFunction')
       if (freeFunctionNode) {
-        executeFreeFunctionAction.label = intl.formatMessage({id: 'editor.executeFreeFunction2'}, {name: freeFunctionNode.name})
+        executeFreeFunctionAction.label = intl.formatMessage({ id: 'editor.executeFreeFunction2' }, { name: freeFunctionNode.name })
         freeFunctionAction = editor.addAction(executeFreeFunctionAction)
       }
 
       const functionImpl = nodesAtPosition.find((node) => node.kind === 'function')
       if (functionImpl) {
         currentFunction.current = functionImpl.name
-        executeGptGenerateDocumentationAction.label = intl.formatMessage({id: 'editor.generateDocumentation2'}, {name: functionImpl.name})
+        executeGptGenerateDocumentationAction.label = intl.formatMessage({ id: 'editor.generateDocumentation2' }, { name: functionImpl.name })
         gptGenerateDocumentationAction = editor.addAction(executeGptGenerateDocumentationAction)
-        executegptExplainFunctionAction.label = intl.formatMessage({id: 'editor.explainFunction2'}, {name: functionImpl.name})
+        executegptExplainFunctionAction.label = intl.formatMessage({ id: 'editor.explainFunction2' }, { name: functionImpl.name })
         gptExplainFunctionAction = editor.addAction(executegptExplainFunctionAction)
-        executeSolgptExplainFunctionAction.label = intl.formatMessage({id: 'editor.explainFunctionSol'})
+        executeSolgptExplainFunctionAction.label = intl.formatMessage({ id: 'editor.explainFunctionSol' })
         solgptExplainFunctionAction = editor.addAction(executeSolgptExplainFunctionAction)
-      }else{
+      } else {
         // do not allow single character explaining
         if (editor.getModel().getValueInRange(editor.getSelection()).length <=1){ return}
-        executeSolgptExplainFunctionAction.label = intl.formatMessage({id: 'editor.explainFunctionSol'})
+        executeSolgptExplainFunctionAction.label = intl.formatMessage({ id: 'editor.explainFunctionSol' })
         solgptExplainFunctionAction = editor.addAction(executeSolgptExplainFunctionAction)
       }
       freeFunctionCondition.set(!!freeFunctionNode)
@@ -892,7 +890,7 @@ export const EditorUI = (props: EditorUIProps) => {
     monacoRef.current.languages.register({ id: 'remix-circom' })
 
     // Allow JSON schema requests
-    monacoRef.current.languages.json.jsonDefaults.setDiagnosticsOptions({enableSchemaRequest: true})
+    monacoRef.current.languages.json.jsonDefaults.setDiagnosticsOptions({ enableSchemaRequest: true })
 
     // Register a tokens provider for the language
     monacoRef.current.languages.setMonarchTokensProvider('remix-solidity', solidityTokensProvider as any)

libs/remix-ui/editor/src/lib/syntaxes/move.ts

@@ -13,7 +13,7 @@ export const moveLanguageConfig = {
     { open: "[", close: "]" },
     { open: "{", close: "}" },
     { open: "(", close: ")" },
-    { open: '"', close: '"', notIn: ["string"] },
+    { open: '"', close: '"', notIn: ["string"]},
   ],
   surroundingPairs: [
     { open: "{", close: "}" },

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

@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-use-before-define
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
 
-import {fileDecoration, fileDecorationType, FileType} from '../types'
+import { fileDecoration, fileDecorationType, FileType } from '../types'
 import FileDecorationCustomIcon from './filedecorationicons/file-decoration-custom-icon'
 import FileDecorationErrorIcon from './filedecorationicons/file-decoration-error-icon'
 import FileDecorationTooltip from './filedecorationicons/file-decoration-tooltip'

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

@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
-import {fileDecoration} from '../../types'
+import { fileDecoration } from '../../types'
 
 const FileDecorationCustomIcon = (props: {fileDecoration: fileDecoration}) => {
   return (

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

@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
 
-import {fileDecoration} from '../../types'
+import { fileDecoration } from '../../types'
 
 const FileDecorationErrorIcon = (props: {fileDecoration: fileDecoration}) => {
   return (

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import {OverlayTrigger, Popover} from 'react-bootstrap'
+import { OverlayTrigger, Popover } from 'react-bootstrap'
-import {fileDecoration} from '../../types'
+import { fileDecoration } from '../../types'
 
 const FileDecorationTooltip = (props: {fileDecoration: fileDecoration; icon: JSX.Element; index: number}) => {
   const getComments = function (fileDecoration: fileDecoration) {
@@ -22,7 +22,7 @@ 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.Content 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>

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

@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
-import {fileDecoration} from '../../types'
+import { fileDecoration } from '../../types'
 
 const FileDecorationWarningIcon = (props: {fileDecoration: fileDecoration}) => {
   return (

libs/remix-ui/file-decorators/src/lib/helper/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {fileDecoration} from '../types'
+import { fileDecoration } from '../types'
 
 export const getComments = function (fileDecoration: fileDecoration) {
   if (fileDecoration.comment) {

libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx

@@ -16,7 +16,7 @@ export const CustomCheckbox = (props: CustomCheckboxProps) => {
   if (!textColor || textColor == '') textColor = filterCon.keyValueMap[props.label].color
 
   return (
-    <div id={textColor + props.label} className="h-80 mx-1 align-items-center custom-control custom-checkbox" style={{minWidth: '4rem'}}>
+    <div id={textColor + props.label} className="h-80 mx-1 align-items-center custom-control custom-checkbox" style={{ minWidth: '4rem' }}>
       <input
         className="custom-control-input"
         id={"GVCheckbox" + props.label}

libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx

@@ -4,7 +4,6 @@ import './remix-ui-grid-cell.css'
 import FiltersContext from "./filtersContext"
 import { CustomTooltip } from '@remix-ui/helper'
 
-
 declare global {
   interface Window {
     _paq: any
@@ -39,11 +38,11 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
       { anyEnabled && <div className='d-flex flex-grid'>
         <div className={"d-flex mx-0 p-2 bg-light border border-secondary remixui_grid_cell_container " + props.classList || ''} data-id={"remixUIGS" + props.title}>
           <div className="d-flex remixui_grid_cell flex-column">
-            <div className='d-flex flex-row pb-1 align-items-end' style={{width: '8rem', height: '1rem'}}>
+            <div className='d-flex flex-row pb-1 align-items-end' style={{ width: '8rem', height: '1rem' }}>
-              { props.logo && <img className='remixui_grid_view_logo mr-1' src={props.logo}  style={{width: '1rem', height: '1rem'}}/> }
+              { props.logo && <img className='remixui_grid_view_logo mr-1' src={props.logo} style={{ width: '1rem', height: '1rem' }}/> }
               { props.title && <label
                 className='m-0 p-0 align-items-left'
-                style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 'xx-small'}}
+                style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 'xx-small' }}
               >
                 { props.title }
               </label> }

libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
 
 import './remix-ui-grid-view.css'
-import {ThemeContext, themes} from './themeContext'
+import { ThemeContext, themes } from './themeContext'
 import CustomCheckbox from './components/customCheckbox'
 import FiltersContext from "./filtersContext"
 
@@ -35,7 +35,7 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
     if (!color || color === '') color = setKeyValueMap[key].color
     setKeyValueMap((prevMap) => ({
       ...prevMap,
-      [key]: {color, enabled},
+      [key]: { color, enabled },
     }))
   }
 
@@ -52,7 +52,7 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
     }))
   }
 
-  const {plugin} = props.plugin
+  const { plugin } = props.plugin
   const searchInputRef = useRef(null)
 
   const [state, setState] = useState<{
@@ -121,7 +121,7 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
                     <input
                       ref={searchInputRef}
                       type="text"
-                      style={{minWidth: '100px'}}
+                      style={{ minWidth: '100px' }}
                       className="border form-control border-right-0 mr-4"
                       id="GVFilterInput"
                       placeholder={"Filter the list"}

libs/remix-ui/helper/src/lib/bleach.ts

@@ -57,7 +57,7 @@ export const bleach = {
     return matches
   },
 
-  sanitize: function (html, options = { mode: 'white', list: bleach.whitelist, encode_entities: false}) {
+  sanitize: function (html, options = { mode: 'white', list: bleach.whitelist, encode_entities: false }) {
     html = String(html) || ''
 
     const mode = options.mode || 'white'

libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
 
 interface IPluginViewWrapperProps {
   plugin: any

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

@@ -1,8 +1,8 @@
 // The forwardRef is important!!
 
-import React, {Ref} from 'react'
+import React, { Ref } from 'react'
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 
 // Dropdown needs access to the DOM node in order to position the Menu
 export const CustomToggle = React.forwardRef(
@@ -73,7 +73,7 @@ export const CustomIconsToggle = React.forwardRef(
           tooltipId="remixHamburgerTooltip"
           tooltipText={<FormattedMessage id="filePanel.workspaceActions" />}
         >
-          <i style={{fontSize: 'large'}} className={`${icon}`} data-id="workspaceDropdownMenuIcon"></i>
+          <i style={{ fontSize: 'large' }} className={`${icon}`} data-id="workspaceDropdownMenuIcon"></i>
         </CustomTooltip>
       )}
     </span>
@@ -102,7 +102,7 @@ export const CustomMenu = React.forwardRef(
     const height = window.innerHeight * 0.6
     return (
       <div ref={ref} style={style} className={className} aria-labelledby={labeledBy} data-id={dataId}>
-        <ul className="overflow-auto list-unstyled mb-0" style={{maxHeight: height + 'px'}}>
+        <ul className="overflow-auto list-unstyled mb-0" style={{ maxHeight: height + 'px' }}>
           {children}
         </ul>
       </div>
@@ -143,8 +143,8 @@ export const ProxyAddressToggle = React.forwardRef(
           }}
           className="udapp_input form-control"
           value={address}
-          placeholder={intl.formatMessage({id: 'udapp.enterProxyAddress'})}
+          placeholder={intl.formatMessage({ id: 'udapp.enterProxyAddress' })}
-          style={{width: '100%'}}
+          style={{ width: '100%' }}
           data-id="ERC1967AddressInput"
         />
       </div>

libs/remix-ui/helper/src/lib/components/web3Dialog.tsx

@@ -47,7 +47,7 @@ export function Web3ProviderDialog(props: web3ProviderDialogProps) {
         type="text"
         name="prompt_text"
         id="prompt_text"
-        style={{width: '100%'}}
+        style={{ width: '100%' }}
         className="form-control"
         defaultValue={props.externalEndpoint}
         data-id="modalDialogCustomPromptText"

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

@@ -1,4 +1,4 @@
-import {LayoutCompatibilityReport} from '@openzeppelin/upgrades-core/dist/storage/report'
+import { LayoutCompatibilityReport } from '@openzeppelin/upgrades-core/dist/storage/report'
 import React from 'react'
 
 export const fileChangedToastMsg = (from: string, path: string) => (
@@ -123,7 +123,7 @@ export const upgradeReportMsg = (report: LayoutCompatibilityReport) => (
   <div>
     <div className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex">
       <span className="align-self-center pl-4 mt-1">
-        <i className="pr-2 text-warning far fa-exclamation-triangle" aria-hidden="true" style={{fontSize: 'xxx-large', fontWeight: 'lighter'}}></i>
+        <i className="pr-2 text-warning far fa-exclamation-triangle" aria-hidden="true" style={{ fontSize: 'xxx-large', fontWeight: 'lighter' }}></i>
       </span>
       <div className="d-flex flex-column">
         <span className="pl-4 mt-1">The storage layout of new implementation is NOT</span>

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

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react'
 
-const CustomNavButtons = ({parent, next, previous, goToSlide, ...rest}) => {
+const CustomNavButtons = ({ parent, next, previous, goToSlide, ...rest }) => {
   const {
-    carouselState: {currentSlide, totalItems, containerWidth, transform}
+    carouselState: { currentSlide, totalItems, containerWidth, transform }
   } = rest
   return (
     <div className="mt-1 d-flex justify-content-end carousel-button-group">

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {useEffect, useState, useRef, useContext} from 'react'
+import React, { useEffect, useState, useRef, useContext } from 'react'
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
-import {ThemeContext, themes} from '../themeContext'
+import { ThemeContext, themes } from '../themeContext'
 import Carousel from 'react-multi-carousel'
 import 'react-multi-carousel/lib/styles.css'
 import * as releaseDetails from './../../../../../../releaseDetails.json'
@@ -13,11 +13,11 @@ function HomeTabFeatured() {
 
   return (
     <div className="pt-3 pl-2" id="hTFeaturedeSection">
-      <label style={{fontSize: '1.2rem'}}>
+      <label style={{ fontSize: '1.2rem' }}>
         <FormattedMessage id="home.featured" />
       </label>
       <div className="mb-2">
-        <div className="w-100 d-flex flex-column" style={{height: '200px'}}>
+        <div className="w-100 d-flex flex-column" style={{ height: '200px' }}>
           <ThemeContext.Provider value={themeFilter}>
             <Carousel
               arrows={false}
@@ -25,7 +25,7 @@ function HomeTabFeatured() {
               draggable={true}
               showDots={true}
               responsive={{
-                desktop: {breakpoint: {max: 2000, min: 1024}, items: 1}
+                desktop: { breakpoint: { max: 2000, min: 1024 }, items: 1 }
               }}
               renderDotsOutside={true}
               ssr={true} // means to render carousel on server-side.
@@ -43,16 +43,16 @@ function HomeTabFeatured() {
             >
               <div className="mr-1 pr-1 d-flex">
                 <a href={releaseDetails.moreLink} target="__blank">
-                  <img src={'assets/img/remi_drums_whatsnew.webp'} style={{flex: '1', height: '170px', maxWidth: '170px'}} alt=""></img>
+                  <img src={'assets/img/remi_drums_whatsnew.webp'} style={{ flex: '1', height: '170px', maxWidth: '170px' }} alt=""></img>
                 </a>
-                <div className="h6 w-50 p-2 pl-4 align-self-center" style={{flex: '1'}}>
+                <div className="h6 w-50 p-2 pl-4 align-self-center" style={{ flex: '1' }}>
                   <h5>{releaseDetails.version} {releaseDetails.title}</h5>
-                  <div style={{fontSize: '0.8rem'}} className="mb-3">
+                  <div style={{ fontSize: '0.8rem' }} className="mb-3">
                     <ul>
-                      { releaseDetails.highlight1 ? <li style={{padding: '0.15rem'}}>{releaseDetails.highlight1}</li> : '' }
+                      { releaseDetails.highlight1 ? <li style={{ padding: '0.15rem' }}>{releaseDetails.highlight1}</li> : '' }
-                      { releaseDetails.highlight2 ? <li style={{padding: '0.15rem'}}>{releaseDetails.highlight2}</li> : '' }
+                      { releaseDetails.highlight2 ? <li style={{ padding: '0.15rem' }}>{releaseDetails.highlight2}</li> : '' }
-                      { releaseDetails.highlight3 ? <li style={{padding: '0.15rem'}}>{releaseDetails.highlight3}</li> : '' }
+                      { releaseDetails.highlight3 ? <li style={{ padding: '0.15rem' }}>{releaseDetails.highlight3}</li> : '' }
-                      { releaseDetails.highlight4 ? <li style={{padding: '0.15rem'}}>{releaseDetails.highlight4}</li> : '' }
+                      { releaseDetails.highlight4 ? <li style={{ padding: '0.15rem' }}>{releaseDetails.highlight4}</li> : '' }
                     </ul>
                   </div>
                   <a
@@ -67,13 +67,13 @@ function HomeTabFeatured() {
               </div>
               <div className="mr-1 pr-1 d-flex">
                 <a href="https://remix-project.org" target="__blank">
-                  <img src={'assets/img/bgRemi_small.webp'} style={{flex: '1', height: '170px', maxWidth: '170px'}} alt=""></img>
+                  <img src={'assets/img/bgRemi_small.webp'} style={{ flex: '1', height: '170px', maxWidth: '170px' }} alt=""></img>
                 </a>
-                <div className="h6 w-50 p-2 pl-4  align-self-center" style={{flex: '1'}}>
+                <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: '1' }}>
                   <h5>
                     <FormattedMessage id="home.jumpIntoWeb3" />
                   </h5>
-                  <div style={{fontSize: '0.8rem', lineHeight: '1.25rem'}} className="mb-3">
+                  <div style={{ fontSize: '0.8rem', lineHeight: '1.25rem' }} className="mb-3">
                     <FormattedMessage id="home.jumpIntoWeb3Text" />
                   </div>
                   <a
@@ -88,16 +88,16 @@ function HomeTabFeatured() {
               </div>
               <div className="mr-1 pr-1 d-flex">
                 <a href="https://www.youtube.com/@EthereumRemix/videos" target="__blank">
-                  <img src={'/assets/img/YouTubeLogo.webp'} style={{flex: '1', height: '170px', maxWidth: '170px'}} alt=""></img>
+                  <img src={'/assets/img/YouTubeLogo.webp'} style={{ flex: '1', height: '170px', maxWidth: '170px' }} alt=""></img>
                 </a>
-                <div className="h6 w-50 p-2 pl-4  align-self-center" style={{flex: '1'}}>
+                <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: '1' }}>
                   <h5>
                     <FormattedMessage id="home.remixYouTube" />
                   </h5>
-                  <p style={{fontStyle: 'italic', fontSize: '1rem'}}>
+                  <p style={{ fontStyle: 'italic', fontSize: '1rem' }}>
                     <FormattedMessage id="home.remixYouTubeText1" />
                   </p>
-                  <div style={{fontSize: '0.8rem'}} className="mb-3">
+                  <div style={{ fontSize: '0.8rem' }} className="mb-3">
                     <FormattedMessage id="home.remixYouTubeText2" />
                   </div>
                   <a
@@ -112,16 +112,16 @@ function HomeTabFeatured() {
               </div>
               <div className="mr-1 pr-1 d-flex">
                 <a href="https://docs.google.com/forms/d/e/1FAIpQLSd0WsJnKbeJo-BGrnf7WijxAdmE4PnC_Z4M0IApbBfHLHZdsQ/viewform" target="__blank">
-                  <img src={'/assets/img/remixRewardBetaTester_small.webp'} style={{flex: '1', height: '170px', maxWidth: '170px'}} alt=""></img>
+                  <img src={'/assets/img/remixRewardBetaTester_small.webp'} style={{ flex: '1', height: '170px', maxWidth: '170px' }} alt=""></img>
                 </a>
-                <div className="h6 w-50 p-2 pl-4  align-self-center" style={{flex: '1'}}>
+                <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: '1' }}>
                   <h5>
                     <FormattedMessage id="home.betaTesting" />
                   </h5>
-                  <p style={{fontStyle: 'italic', fontSize: '1rem'}}>
+                  <p style={{ fontStyle: 'italic', fontSize: '1rem' }}>
                     <FormattedMessage id="home.betaTestingText1" />
                   </p>
-                  <div style={{fontSize: '0.8rem'}} className="mb-3">
+                  <div style={{ fontSize: '0.8rem' }} className="mb-3">
                     <FormattedMessage id="home.betaTestingText2" />
                   </div>
                   <a

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

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {useEffect, useRef, useContext} from 'react'
+import React, { useEffect, useRef, useContext } from 'react'
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import PluginButton from './pluginButton'
-import {ThemeContext} from '../themeContext'
+import { ThemeContext } from '../themeContext'
 import Carousel from 'react-multi-carousel'
 import 'react-multi-carousel/lib/styles.css'
 import CustomNavButtons from './customNavButtons'
@@ -17,7 +17,7 @@ interface HomeTabFeaturedPluginsProps {
   plugin: any
 }
 
-function HomeTabFeaturedPlugins({plugin}: HomeTabFeaturedPluginsProps) {
+function HomeTabFeaturedPlugins({ plugin }: HomeTabFeaturedPluginsProps) {
   const themeFilter = useContext(ThemeContext)
   const carouselRef = useRef<any>({})
   const carouselRefDiv = useRef(null)
@@ -85,7 +85,7 @@ function HomeTabFeaturedPlugins({plugin}: HomeTabFeaturedPluginsProps) {
 
   return (
     <div className="pl-2 w-100" id="hTFeaturedPlugins">
-      <label className="" style={{fontSize: '1.2rem'}}>
+      <label className="" style={{ fontSize: '1.2rem' }}>
         <FormattedMessage id="home.featuredPlugins" />
       </label>
       <div ref={carouselRefDiv} className="w-100 d-flex flex-column">
@@ -100,11 +100,11 @@ function HomeTabFeaturedPlugins({plugin}: HomeTabFeaturedPluginsProps) {
             showDots={false}
             responsive={{
               superLargeDesktop: {
-                breakpoint: {max: 4000, min: 3000},
+                breakpoint: { max: 4000, min: 3000 },
                 items: itemsToShow
               },
               desktop: {
-                breakpoint: {max: 3000, min: 1024},
+                breakpoint: { max: 3000, min: 1024 },
                 items: itemsToShow
               }
             }}
@@ -129,7 +129,7 @@ function HomeTabFeaturedPlugins({plugin}: HomeTabFeaturedPluginsProps) {
               imgPath="assets/img/cookbook.webp"
               envID="cookbookLogo"
               envText="Cookbook"
-              description={intl.formatMessage({id: 'home.cookbookDesc'})}
+              description={intl.formatMessage({ id: 'home.cookbookDesc' })}
               remixMaintained={false}
               callback={() => startCookbook()}
             />
@@ -137,7 +137,7 @@ function HomeTabFeaturedPlugins({plugin}: HomeTabFeaturedPluginsProps) {
               imgPath="assets/img/solidityLogo.webp"
               envID="solidityLogo"
               envText="Solidity"
-              description={intl.formatMessage({id: 'home.solidityPluginDesc'})}
+              description={intl.formatMessage({ id: 'home.solidityPluginDesc' })}
               remixMaintained={true}
               callback={() => startSolidity()}
             />
@@ -145,14 +145,14 @@ function HomeTabFeaturedPlugins({plugin}: HomeTabFeaturedPluginsProps) {
               imgPath="assets/img/sourcifyNewLogo.webp"
               envID="sourcifyLogo"
               envText="Sourcify"
-              description={intl.formatMessage({id: 'home.sourcifyPluginDesc'})}
+              description={intl.formatMessage({ id: 'home.sourcifyPluginDesc' })}
               callback={() => startSourceVerify()}
             />
             <PluginButton
               imgPath="assets/img/unitTesting.webp"
               envID="sUTLogo"
               envText="Solidity unit testing"
-              description={intl.formatMessage({id: 'home.unitTestPluginDesc'})}
+              description={intl.formatMessage({ id: 'home.unitTestPluginDesc' })}
               remixMaintained={true}
               callback={() => startSolidityUnitTesting()}
             />

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

@@ -300,7 +300,7 @@ contract HelloWorld {
               tooltipText={<FormattedMessage id="home.connectToLocalhost" />}
               tooltipTextClasses="border bg-light text-dark p-1 pr-3"
             >
-              <button className="btn text-nowrap p-2 border my-1" style={{width: 'fit-content'}} onClick={() => connectToLocalhost()}>
+              <button className="btn text-nowrap p-2 border my-1" style={{ width: 'fit-content' }} onClick={() => connectToLocalhost()}>
                 <FormattedMessage id="home.accessFileSystem" />
               </button>
             </CustomTooltip>

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

@@ -1,15 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {useEffect, useRef, useContext} from 'react'
+import React, { useEffect, useRef, useContext } from 'react'
-import {useIntl, FormattedMessage} from 'react-intl'
+import { useIntl, FormattedMessage } from 'react-intl'
-import {TEMPLATE_NAMES,TEMPLATE_METADATA} from '@remix-ui/workspace'
+import { TEMPLATE_NAMES,TEMPLATE_METADATA } from '@remix-ui/workspace'
-import {ThemeContext} from '../themeContext'
+import { ThemeContext } from '../themeContext'
 import Carousel from 'react-multi-carousel'
 import WorkspaceTemplate from './workspaceTemplate'
 import 'react-multi-carousel/lib/styles.css'
 import CustomNavButtons from './customNavButtons'
 import { appPlatformTypes, platformContext } from '@remix-ui/app'
 
-
 declare global {
   interface Window {
     _paq: any
@@ -20,7 +19,7 @@ interface HomeTabGetStartedProps {
   plugin: any
 }
 
-function HomeTabGetStarted({plugin}: HomeTabGetStartedProps) {
+function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
   const platform = useContext(platformContext)
   const themeFilter = useContext(ThemeContext)
   const carouselRef = useRef<any>({})
@@ -63,7 +62,7 @@ function HomeTabGetStarted({plugin}: HomeTabGetStartedProps) {
 
   const createWorkspace = async (templateName) => {
 
-    if(platform === appPlatformTypes.desktop){
+    if (platform === appPlatformTypes.desktop){
       await plugin.call('remix-templates', 'loadTemplateInNewWindow', templateName)
       return
     }
@@ -72,7 +71,7 @@ function HomeTabGetStarted({plugin}: HomeTabGetStartedProps) {
     const metadata = TEMPLATE_METADATA[templateName]
     if (metadata) {
       if (metadata.type === 'git') {
-        await plugin.call('dGitProvider', 'clone', {url: metadata.url, branch: metadata.branch}, templateDisplayName)
+        await plugin.call('dGitProvider', 'clone', { url: metadata.url, branch: metadata.branch }, templateDisplayName)
       } else if (metadata && metadata.type === 'plugin') {
         await plugin.appManager.activatePlugin('filePanel')
         templateDisplayName = await plugin.call('filePanel', 'getAvailableWorkspaceName', templateDisplayName)
@@ -93,7 +92,7 @@ function HomeTabGetStarted({plugin}: HomeTabGetStartedProps) {
 
   return (
     <div className="pl-2" id="hTGetStartedSection">
-      <label style={{fontSize: '1.2rem'}}>
+      <label style={{ fontSize: '1.2rem' }}>
         <FormattedMessage id="home.projectTemplates" />
       </label>
       <div ref={carouselRefDiv} className="w-100 d-flex flex-column">
@@ -108,11 +107,11 @@ function HomeTabGetStarted({plugin}: HomeTabGetStartedProps) {
             showDots={false}
             responsive={{
               superLargeDesktop: {
-                breakpoint: {max: 4000, min: 3000},
+                breakpoint: { max: 4000, min: 3000 },
                 items: 5
               },
               desktop: {
-                breakpoint: {max: 3000, min: 1024},
+                breakpoint: { max: 3000, min: 1024 },
                 items: 5,
                 partialVisibilityGutter: 0
               }
@@ -145,7 +144,7 @@ function HomeTabGetStarted({plugin}: HomeTabGetStartedProps) {
             <WorkspaceTemplate
               gsID="sourcifyLogo"
               workspaceTitle="ERC20"
-              description={intl.formatMessage({id: 'home.ozerc20TemplateDesc'})}
+              description={intl.formatMessage({ id: 'home.ozerc20TemplateDesc' })}
               projectLogo="assets/img/openzeppelinLogo.png"
               callback={() => createWorkspace('ozerc20')}
             />

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

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {useEffect, useState, useContext} from 'react'
+import React, { useEffect, useState, useContext } from 'react'
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
-import {ThemeContext} from '../themeContext'
+import { ThemeContext } from '../themeContext'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 declare global {
   interface Window {
     _paq: any
@@ -19,7 +19,7 @@ interface HomeTabLearnProps {
   plugin: any
 }
 
-function HomeTabLearn({plugin}: HomeTabLearnProps) {
+function HomeTabLearn({ plugin }: HomeTabLearnProps) {
   const [state, setState] = useState<{
     visibleTutorial: VisibleTutorial
   }>({
@@ -49,7 +49,7 @@ function HomeTabLearn({plugin}: HomeTabLearnProps) {
   return (
     <div className="d-flex px-2 pb-2 pt-2 d-flex flex-column" id="hTLearnSection">
       <div className="d-flex justify-content-between">
-        <label className="py-2 pt-3 align-self-center m-0" style={{fontSize: '1.2rem'}}>
+        <label className="py-2 pt-3 align-self-center m-0" style={{ fontSize: '1.2rem' }}>
           <FormattedMessage id="home.learn" />
         </label>
         <CustomTooltip
@@ -83,19 +83,19 @@ function HomeTabLearn({plugin}: HomeTabLearnProps) {
           className="d-flex flex-column btn border"
           onClick={() =>
             setState((prevState) => {
-              return {...prevState, visibleTutorial: VisibleTutorial.Basics}
+              return { ...prevState, visibleTutorial: VisibleTutorial.Basics }
             })
           }
         >
-          <label className="card-title align-self-start m-0 float-left" style={{fontSize: '1rem'}}>
+          <label className="card-title align-self-start m-0 float-left" style={{ fontSize: '1rem' }}>
             <FormattedMessage id="home.learnEth1" />
           </label>
           {state.visibleTutorial === VisibleTutorial.Basics && (
             <div className="pt-2 d-flex flex-column text-left">
-              <span className="py-1" style={{fontSize: '0.8rem'}}>
+              <span className="py-1" style={{ fontSize: '0.8rem' }}>
                 <FormattedMessage id="home.learnEth1Desc" />
               </span>
-              <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>
+              <button className="btn btn-sm btn-secondary mt-2" style={{ width: 'fit-content' }} onClick={() => startLearnEthTutorial('basics')}>
                 <FormattedMessage id="home.getStarted" />
               </button>
             </div>
@@ -112,15 +112,15 @@ function HomeTabLearn({plugin}: HomeTabLearnProps) {
             })
           }
         >
-          <label className="card-title align-self-start m-0 float-left" style={{fontSize: '1rem'}}>
+          <label className="card-title align-self-start m-0 float-left" style={{ fontSize: '1rem' }}>
             <FormattedMessage id="home.learnEth2" />
           </label>
           {state.visibleTutorial === VisibleTutorial.Intermediate && (
             <div className="pt-2 d-flex flex-column text-left">
-              <span className="py-1" style={{fontSize: '0.8rem'}}>
+              <span className="py-1" style={{ fontSize: '0.8rem' }}>
                 <FormattedMessage id="home.learnEth2Desc" />
               </span>
-              <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('soliditybeginner')}>
+              <button className="btn btn-sm btn-secondary mt-2" style={{ width: 'fit-content' }} onClick={() => startLearnEthTutorial('soliditybeginner')}>
                 <FormattedMessage id="home.getStarted" />
               </button>
             </div>
@@ -130,19 +130,19 @@ function HomeTabLearn({plugin}: HomeTabLearnProps) {
           className="d-flex flex-column btn border"
           onClick={() =>
             setState((prevState) => {
-              return {...prevState, visibleTutorial: VisibleTutorial.Advanced}
+              return { ...prevState, visibleTutorial: VisibleTutorial.Advanced }
             })
           }
         >
-          <label className="card-title align-self-start m-0 float-left" style={{fontSize: '1rem'}}>
+          <label className="card-title align-self-start m-0 float-left" style={{ fontSize: '1rem' }}>
             <FormattedMessage id="home.remixAdvanced" />
           </label>
           {state.visibleTutorial === VisibleTutorial.Advanced && (
             <div className="pt-2 d-flex flex-column text-left">
-              <span className="py-1" style={{fontSize: '0.8rem'}}>
+              <span className="py-1" style={{ fontSize: '0.8rem' }}>
                 <FormattedMessage id="home.remixAdvancedDesc" />
               </span>
-              <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('deploylibraries')}>
+              <button className="btn btn-sm btn-secondary mt-2" style={{ width: 'fit-content' }} onClick={() => startLearnEthTutorial('deploylibraries')}>
                 <FormattedMessage id="home.getStarted" />
               </button>
             </div>

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

@@ -1,18 +1,18 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react'
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
 
 const _paq = (window._paq = window._paq || []) // eslint-disable-line
 
 function HomeTabScamAlert() {
   return (
     <div className="" id="hTScamAlertSection">
-      <label className="pl-2 text-danger" style={{fontSize: '1.2rem'}}>
+      <label className="pl-2 text-danger" style={{ fontSize: '1.2rem' }}>
         <FormattedMessage id="home.scamAlert" />
       </label>
       <div className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex  border border-danger">
         <span className="align-self-center pl-4 mt-1">
-          <i style={{fontSize: 'xxx-large', fontWeight: 'lighter'}} className="pr-2 text-danger far fa-exclamation-triangle"></i>
+          <i style={{ fontSize: 'xxx-large', fontWeight: 'lighter' }} className="pr-2 text-danger far fa-exclamation-triangle"></i>
         </span>
         <div className="d-flex flex-column">
           <span className="pl-4 mt-1">

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

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
-import React, {useEffect, useState, useRef, useContext} from 'react'
+import React, { useEffect, useState, useRef, useContext } from 'react'
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 const _paq = (window._paq = window._paq || []) // eslint-disable-line
 
 function HomeTabTitle() {
@@ -53,12 +53,12 @@ function HomeTabTitle() {
     <div className="px-2 pb-2 pt-2 d-flex flex-column border-bottom" id="hTTitleSection">
       <div className="d-flex py-2 justify-content-between">
         <div className="d-flex justify-content-start">
-          <span className="h-80 text-uppercase" style={{fontSize: 'xx-large', fontFamily: 'Noah, sans-serif'}}>
+          <span className="h-80 text-uppercase" style={{ fontSize: 'xx-large', fontFamily: 'Noah, sans-serif' }}>
             Remix
           </span>
           <div className="ml-2 d-flex">
             <div onClick={() => playRemi()}>
-              <img className="" src="assets/img/guitarRemiCroped.webp" style={{height: '3rem'}} alt=""></img>
+              <img className="" src="assets/img/guitarRemiCroped.webp" style={{ height: '3rem' }} alt=""></img>
             </div>
             <audio id="remiAudio" muted={false} src="assets/audio/remiGuitar-single-power-chord-A-minor.mp3" ref={remiAudioEl}></audio>
           </div>
@@ -142,7 +142,7 @@ function HomeTabTitle() {
           </CustomTooltip>
         </span>
       </div>
-      <b className="py-1 text-dark" style={{fontStyle: 'italic'}}>
+      <b className="py-1 text-dark" style={{ fontStyle: 'italic' }}>
         <FormattedMessage id="home.nativeIDE" />
       </b>
       <div className="pb-1" id="hTGeneralLinks">
@@ -180,7 +180,7 @@ function HomeTabTitle() {
           type="text"
           className="border form-control border-right-0"
           id="homeTabSearchInput"
-          placeholder={intl.formatMessage({id: 'home.searchDocumentation'})}
+          placeholder={intl.formatMessage({ id: 'home.searchDocumentation' })}
           data-id="terminalInputSearchHome"
         />
         <button
@@ -190,7 +190,7 @@ function HomeTabTitle() {
             openLink()
           }}
           disabled={state.searchDisable}
-          style={{width: '3rem'}}
+          style={{ width: '3rem' }}
         ></button>
       </div>
     </div>

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

@@ -3,8 +3,6 @@ import { Dropdown, DropdownButton } from 'react-bootstrap'
 import DropdownItem from 'react-bootstrap/DropdownItem'
 import { localeLang } from './types/carouselTypes'
 
-
-
 export function LanguageOptions({ plugin }: { plugin: any }) {
   const [langOptions, setLangOptions] = useState<string>()
 
@@ -26,12 +24,12 @@ export function LanguageOptions({ plugin }: { plugin: any }) {
 
   return (
     <>
-      <div style={{position: 'absolute', right: "1rem", paddingTop: "0.4rem"}}>
+      <div style={{ position: 'absolute', right: "1rem", paddingTop: "0.4rem" }}>
         <Dropdown>
-          <Dropdown.Toggle title={langOptions} id="languagedropdown" size="sm" style={{backgroundColor: 'var(--secondary)', color: 'var(--text)'}}>
+          <Dropdown.Toggle title={langOptions} id="languagedropdown" size="sm" style={{ backgroundColor: 'var(--secondary)', color: 'var(--text)' }}>
             {langOptions}
           </Dropdown.Toggle>
-          <Dropdown.Menu className="dropdown-menu langSelector" style={{ paddingTop: "0px", paddingBottom: "0px", minWidth: 'fit-content', backgroundColor: 'var(--body-bg)'}}>
+          <Dropdown.Menu className="dropdown-menu langSelector" style={{ paddingTop: "0px", paddingBottom: "0px", minWidth: 'fit-content', backgroundColor: 'var(--body-bg)' }}>
             {['EN', 'ES', 'FR', 'IT', 'RU', 'ZH'].map((lang, index) => (
               <DropdownItem as={'span'} className={langOptions === lang ? "border border-primary px-2" : "px-2"} onClick={() =>
               {

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

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {useContext} from 'react'
+import React, { useContext } from 'react'
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
-import {ThemeContext} from '../themeContext'
+import { ThemeContext } from '../themeContext'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 interface PluginButtonProps {
   imgPath: string
   envID: string
@@ -13,7 +13,7 @@ interface PluginButtonProps {
   remixMaintained?: boolean
 }
 
-function PluginButton({imgPath, envID, envText, callback, l2, description, remixMaintained}: PluginButtonProps) {
+function PluginButton({ imgPath, envID, envText, callback, l2, description, remixMaintained }: PluginButtonProps) {
   const themeFilter = useContext(ThemeContext)
 
   return (
@@ -23,7 +23,7 @@ function PluginButton({imgPath, envID, envText, callback, l2, description, remix
         data-id={'landingPageStart' + envText}
         onClick={() => callback()}
       >
-        <img className="px-2 mb-2 align-self-center remixui_home_envLogo" id={envID} src={imgPath} alt="" style={{filter: themeFilter.filter}} />
+        <img className="px-2 mb-2 align-self-center remixui_home_envLogo" id={envID} src={imgPath} alt="" style={{ filter: themeFilter.filter }} />
         <div className="mb-2 h-100 d-flex flex-column">
           <label className="text-uppercase text-dark remixui_home_cursorStyle">{envText}</label>
           <div className="remixui_home_envLogoDescription">{description}</div>

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {useContext} from 'react'
+import React, { useContext } from 'react'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
-import {ThemeContext} from '../themeContext'
+import { ThemeContext } from '../themeContext'
 
 interface WorkspaceTemplateProps {
   gsID: string
@@ -11,7 +11,7 @@ interface WorkspaceTemplateProps {
   description: string
 }
 
-function WorkspaceTemplate({gsID, workspaceTitle, description, projectLogo, callback}: WorkspaceTemplateProps) {
+function WorkspaceTemplate({ gsID, workspaceTitle, description, projectLogo, callback }: WorkspaceTemplateProps) {
   const themeFilter = useContext(ThemeContext)
 
   return (
@@ -24,8 +24,8 @@ function WorkspaceTemplate({gsID, workspaceTitle, description, projectLogo, call
         <div className="w-100 p-1 h-100 align-items-center d-flex flex-column">
           <CustomTooltip placement={'top'} tooltipClasses="text-wrap" tooltipId="etherscan-receipt-proxy-status" tooltipText={description}>
             <div className='d-flex flex-column align-items-center'>
-              <label className="h5 pb-1 mt-1 text-uppercase remixui_home_cursorStyle" style={{color: themeFilter.name == "dark" ? "var(--white)" : "var(--black)"}}>{workspaceTitle}</label>
+              <label className="h5 pb-1 mt-1 text-uppercase remixui_home_cursorStyle" style={{ color: themeFilter.name == "dark" ? "var(--white)" : "var(--black)" }}>{workspaceTitle}</label>
-              <img className="" src={projectLogo} alt="" style={{height: "20px", filter: themeFilter.name == "dark" ? "invert(1)" : "invert(0)"}} />
+              <img className="" src={projectLogo} alt="" style={{ height: "20px", filter: themeFilter.name == "dark" ? "invert(1)" : "invert(0)" }} />
             </div>
           </CustomTooltip>
         </div>

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

@@ -1,7 +1,7 @@
 import React, {useState, useEffect, useContext} from 'react' // eslint-disable-line
 
 import './remix-ui-home-tab.css'
-import {ThemeContext, themes} from './themeContext'
+import { ThemeContext, themes } from './themeContext'
 import HomeTabTitle from './components/homeTabTitle'
 import HomeTabFile from './components/homeTabFile'
 import HomeTabLearn from './components/homeTabLearn'
@@ -25,7 +25,7 @@ export interface RemixUiHomeTabProps {
 
 export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   const platform = useContext(platformContext)
-  const {plugin} = props
+  const { plugin } = props
 
   const [state, setState] = useState<{
     themeQuality: {filter: string; name: string}
@@ -58,14 +58,14 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     <div className="d-flex flex-column w-100" data-id="remixUIHTAll">
       <ThemeContext.Provider value={state.themeQuality}>
         <div className="d-flex flex-row w-100 custom_home_bg">
-          <div className="px-2 pl-3 justify-content-start d-flex border-right flex-column" id="remixUIHTLeft" style={{width: 'inherit'}}>
+          <div className="px-2 pl-3 justify-content-start d-flex border-right flex-column" id="remixUIHTLeft" style={{ width: 'inherit' }}>
             <HomeTabTitle />
             {!(platform === appPlatformTypes.desktop) ?
               <HomeTabFile plugin={plugin} />:
               <HomeTabFileElectron plugin={plugin}></HomeTabFileElectron>}
             <HomeTabLearn plugin={plugin} />
           </div>
-          <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{width: '65%'}} id="remixUIHTRight">
+          <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{ width: '65%' }} id="remixUIHTRight">
             <LanguageOptions plugin={plugin}/>
             <HomeTabFeatured></HomeTabFeatured>
             <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -57,12 +57,12 @@ export const ModalDialog = (props: ModalDialogProps) => {
     } else if (keyCode === 37) {
       // todo && footerIsActive) { // Arrow Left
       setState((prevState) => {
-        return {...prevState, toggleBtn: true}
+        return { ...prevState, toggleBtn: true }
       })
     } else if (keyCode === 39) {
       // todo && footerIsActive) { // Arrow Right
       setState((prevState) => {
-        return {...prevState, toggleBtn: false}
+        return { ...prevState, toggleBtn: false }
       })
     }
   }
@@ -82,7 +82,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
       data-backdrop="static"
       data-keyboard="false"
       className="modal"
-      style={{display: props.hide ? 'none' : 'block'}}
+      style={{ display: props.hide ? 'none' : 'block' }}
       role="dialog"
     >
       <div className="modal-dialog" role="document">
@@ -90,7 +90,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
           ref={modal}
           tabIndex={-1}
           className={'modal-content remixModalContent ' + (props.modalClass ? props.modalClass : '')}
-          onKeyDown={({keyCode}) => {
+          onKeyDown={({ keyCode }) => {
             modalKeyEvent(keyCode)
           }}
         >

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

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-use-before-define
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
 import Draggable from 'react-draggable'
 import './dragbar.css'
 
@@ -46,7 +46,7 @@ const DragBar = (props: IRemixDragBarUi) => {
   return (
     <>
       <div className={`overlay ${dragState ? '' : 'd-none'}`}></div>
-      <Draggable nodeRef={nodeRef} position={{x: 0, y: dragBarPosY}} onStart={startDrag} onStop={stopDrag} axis="y">
+      <Draggable nodeRef={nodeRef} position={{ x: 0, y: dragBarPosY }} onStart={startDrag} onStop={stopDrag} axis="y">
         <div ref={nodeRef} className={`dragbar_terminal ${dragState ? 'ondrag' : ''}`}></div>
       </Draggable>
     </>

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

@@ -2,7 +2,7 @@
 import React, {useContext, useEffect, useRef, useState} from 'react' // eslint-disable-line
 import DragBar from '../dragbar/dragbar'
 import RemixUIPanelPlugin from '../plugins/panel-plugin'
-import {PluginRecord} from '../types'
+import { PluginRecord } from '../types'
 import { appPlatformTypes, platformContext } from '@remix-ui/app'
 import './main-panel.css'
 
@@ -12,7 +12,7 @@ export type RemixUIMainPanelProps = {
 
 const RemixUIMainPanel = (props: RemixUIMainPanelProps) => {
   const platform = useContext(platformContext)
-  const {layout} = props
+  const { layout } = props
   const [plugins, setPlugins] = useState<PluginRecord[]>([])
   const editorRef = useRef<HTMLDivElement>(null)
   const mainPanelRef = useRef<HTMLDivElement>(null)

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -1,8 +1,8 @@
 import React, {useEffect, useRef, useState} from 'react' // eslint-disable-line
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
-import {PluginRecord} from '../types'
+import { PluginRecord } from '../types'
 import './panel.css'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export interface RemixPanelProps {
   plugins: Record<string, PluginRecord>

libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 import React, {forwardRef, useEffect, useRef, useState} from 'react' // eslint-disable-line
-import {PluginRecord} from '../types'
+import { PluginRecord } from '../types'
 import './panel.css'
 interface panelPLuginProps {
   pluginRecord: PluginRecord

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

@@ -2,7 +2,7 @@
 import React, {useEffect, useState} from 'react' // eslint-disable-line
 import './panel.css'
 import RemixUIPanelPlugin from './panel-plugin'
-import {PluginRecord} from '../types'
+import { PluginRecord } from '../types'
 
 /* eslint-disable-next-line */
 export interface RemixPanelProps {

libs/remix-ui/permission-handler/src/lib/permission-dialog.tsx

@@ -1,10 +1,10 @@
 import React, {ChangeEventHandler, useContext, useEffect, useRef, useState} from 'react' // eslint-disable-line
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
-import {PermissionHandlerProps} from '../interface'
+import { PermissionHandlerProps } from '../interface'
 import './permission-dialog.css'
 
 const PermissionHandlerDialog = (props: PermissionHandlerProps) => {
-  const {from, to, remember, method, message, sensitiveCall} = props.value
+  const { from, to, remember, method, message, sensitiveCall } = props.value
   const [feedback, setFeedback] = useState<string>('')
   const theme = props.theme
   const intl = useIntl()
@@ -15,7 +15,7 @@ const PermissionHandlerDialog = (props: PermissionHandlerProps) => {
 
   const reset = () => {
     props.plugin.clear()
-    setFeedback(intl.formatMessage({id: 'permissionHandler.allPermissionsReset'}))
+    setFeedback(intl.formatMessage({ id: 'permissionHandler.allPermissionsReset' }))
   }
 
   const imgFrom = () => {
@@ -44,7 +44,7 @@ const PermissionHandlerDialog = (props: PermissionHandlerProps) => {
           from: from.displayName,
           to: to.displayName,
           method,
-          rememberText: remember ? intl.formatMessage({id: 'permissionHandler.rememberText'}) : ''
+          rememberText: remember ? intl.formatMessage({ id: 'permissionHandler.rememberText' }) : ''
         }}
       />
     )

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

@@ -1,15 +1,15 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-use-before-define
 import React from 'react'
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
 import '../remix-ui-plugin-manager.css'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 interface PluginCardProps {
   profile: any
   buttonText: string
   deactivatePlugin: (pluginName: string) => void
 }
 
-function ActivePluginCard({profile, buttonText, deactivatePlugin}: PluginCardProps) {
+function ActivePluginCard({ profile, buttonText, deactivatePlugin }: PluginCardProps) {
   return (
     <div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
       <article className="list-group-item py-1 mb-1 plugins-list-group-item">
@@ -72,7 +72,7 @@ function ActivePluginCard({profile, buttonText, deactivatePlugin}: PluginCardPro
                 placement="right"
                 tooltipId={`pluginManagerInactiveActiveBtn${profile.name}`}
                 tooltipClasses="text-nowrap"
-                tooltipText={<FormattedMessage id="pluginManager.deactivatePlugin" values={{pluginName: profile.displayName || profile.name}} />}
+                tooltipText={<FormattedMessage id="pluginManager.deactivatePlugin" values={{ pluginName: profile.displayName || profile.name }} />}
               >
                 <button
                   onClick={() => {

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

@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {Profile} from '@remixproject/plugin-utils'
+import { Profile } from '@remixproject/plugin-utils'
 import React from 'react' // eslint-disable-line no-use-before-define
-import {useIntl} from 'react-intl'
+import { useIntl } from 'react-intl'
-import {PluginManagerComponent} from '../../types'
+import { PluginManagerComponent } from '../../types'
 import ActivePluginCard from './ActivePluginCard'
 import ModuleHeading from './moduleHeading'
 
 interface ActivePluginCardContainerProps {
   pluginComponent: PluginManagerComponent
 }
-function ActivePluginCardContainer({pluginComponent}: ActivePluginCardContainerProps) {
+function ActivePluginCardContainer({ pluginComponent }: ActivePluginCardContainerProps) {
   const deactivatePlugin = (pluginName: string) => {
     pluginComponent.deactivateP(pluginName)
   }
@@ -19,11 +19,11 @@ function ActivePluginCardContainer({pluginComponent}: ActivePluginCardContainerP
   return (
     <React.Fragment>
       {pluginComponent.activePlugins && pluginComponent.activePlugins.length ? (
-        <ModuleHeading headingLabel={intl.formatMessage({id: 'pluginManager.activeModules'})} count={pluginComponent.activePlugins.length} />
+        <ModuleHeading headingLabel={intl.formatMessage({ id: 'pluginManager.activeModules' })} count={pluginComponent.activePlugins.length} />
       ) : null}
       {pluginComponent.activePlugins &&
         pluginComponent.activePlugins.map((profile, idx) => {
-          return <ActivePluginCard buttonText={intl.formatMessage({id: 'pluginManager.deactivate'})} profile={profile} deactivatePlugin={deactivatePlugin} key={idx} />
+          return <ActivePluginCard buttonText={intl.formatMessage({ id: 'pluginManager.deactivate' })} profile={profile} deactivatePlugin={deactivatePlugin} key={idx} />
         })}
     </React.Fragment>
   )

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

@@ -1,9 +1,9 @@
-import {Profile} from '@remixproject/plugin-utils'
+import { Profile } from '@remixproject/plugin-utils'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-use-before-define
 import React, { useContext, useEffect, useState } from 'react'
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import '../remix-ui-plugin-manager.css'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 import { onLineContext } from '@remix-ui/app'
 interface PluginCardProps {
   profile: any
@@ -11,18 +11,18 @@ interface PluginCardProps {
   activatePlugin: (plugin: string) => void
 }
 
-function InactivePluginCard({profile, buttonText, activatePlugin}: PluginCardProps) {
+function InactivePluginCard({ profile, buttonText, activatePlugin }: PluginCardProps) {
   const online = useContext(onLineContext)
   const [canBeActivated, setCanBeActivated] = useState(false)
   const intl = useIntl()
   useEffect(() => {
-    if(!online) {
+    if (!online) {
-      if(profile.url && (!profile.url.includes('http') || profile.url.includes('localhost') || profile.url.includes('127.0.0.1'))) {
+      if (profile.url && (!profile.url.includes('http') || profile.url.includes('localhost') || profile.url.includes('127.0.0.1'))) {
         setCanBeActivated(true)
-      }else{
+      } else {
         setCanBeActivated(false)
       }
-    }else{
+    } else {
       setCanBeActivated(true)
     }
   },[online])
@@ -89,9 +89,9 @@ function InactivePluginCard({profile, buttonText, activatePlugin}: PluginCardPro
                 placement="right"
                 tooltipId={`pluginManagerInactiveActiveBtn${profile.name}`}
                 tooltipClasses="text-nowrap"
-                tooltipText={<FormattedMessage id="pluginManager.activatePlugin" values={{pluginName: profile.displayName || profile.name}} />}
+                tooltipText={<FormattedMessage id="pluginManager.activatePlugin" values={{ pluginName: profile.displayName || profile.name }} />}
               >
-                {!canBeActivated ? <button className="btn btn-secondary btn-sm">{intl.formatMessage({id: 'pluginManager.UnavailableOffline'})}</button> : (
+                {!canBeActivated ? <button className="btn btn-secondary btn-sm">{intl.formatMessage({ id: 'pluginManager.UnavailableOffline' })}</button> : (
                   <button
                     onClick={() => {
                       activatePlugin(profile.name)

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

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {Profile} from '@remixproject/plugin-utils'
+import { Profile } from '@remixproject/plugin-utils'
 import React from 'react' // eslint-disable-line no-use-before-define
-import {useIntl} from 'react-intl'
+import { useIntl } from 'react-intl'
-import {PluginManagerComponent} from '../../types'
+import { PluginManagerComponent } from '../../types'
 import InactivePluginCard from './InactivePluginCard'
 import ModuleHeading from './moduleHeading'
 
@@ -10,7 +10,7 @@ interface InactivePluginCardContainerProps {
   pluginComponent: PluginManagerComponent
 }
 
-function InactivePluginCardContainer({pluginComponent}: InactivePluginCardContainerProps) {
+function InactivePluginCardContainer({ pluginComponent }: InactivePluginCardContainerProps) {
   const activatePlugin = (pluginName: string) => {
     pluginComponent.activateP(pluginName)
   }
@@ -29,7 +29,7 @@ function InactivePluginCardContainer({pluginComponent}: InactivePluginCardContai
       ) : null}
       {pluginComponent.inactivePlugins &&
         pluginComponent.inactivePlugins.map((profile, idx) => {
-          return <InactivePluginCard buttonText={intl.formatMessage({id: 'pluginManager.activate'})} profile={profile} key={idx} activatePlugin={activatePlugin} />
+          return <InactivePluginCard buttonText={intl.formatMessage({ id: 'pluginManager.activate' })} profile={profile} key={idx} activatePlugin={activatePlugin} />
         })}
     </React.Fragment>
   )

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

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {useEffect, useReducer, useState} from 'react' // eslint-disable-line no-use-before-define
+import React, { useEffect, useReducer, useState } from 'react' // eslint-disable-line no-use-before-define
-import {ModalDialog} from '@remix-ui/modal-dialog'
+import { ModalDialog } from '@remix-ui/modal-dialog'
-import {Toaster} from '@remix-ui/toaster'
+import { Toaster } from '@remix-ui/toaster'
-import {IframePlugin, WebsocketPlugin} from '@remixproject/engine-web'
+import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web'
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
-import {localPluginReducerActionType, localPluginToastReducer} from '../reducers/pluginManagerReducer'
+import { localPluginReducerActionType, localPluginToastReducer } from '../reducers/pluginManagerReducer'
-import {canActivate, FormStateProps, PluginManagerComponent} from '../../types'
+import { canActivate, FormStateProps, PluginManagerComponent } from '../../types'
 
 interface LocalPluginFormProps {
   closeModal: () => void
@@ -34,7 +34,7 @@ const defaultProfile = {
   hash: ''
 }
 
-function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormProps) {
+function LocalPluginForm({ closeModal, visible, pluginManager }: LocalPluginFormProps) {
   const [errorMsg, dispatchToastMsg] = useReducer(localPluginToastReducer, '')
   const [name, setName] = useState<string>('')
   const [displayName, setDisplayName] = useState<string>('')
@@ -100,7 +100,7 @@ function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormPr
       targetPlugin.description = localPlugin.profile.description !== undefined ? localPlugin.profile.description : ''
       targetPlugin.events = localPlugin.profile.events !== undefined ? localPlugin.profile.events : []
       targetPlugin.kind = localPlugin.profile.kind !== undefined ? localPlugin.profile.kind : ''
-      localPlugin.profile = {...localPlugin.profile, ...targetPlugin}
+      localPlugin.profile = { ...localPlugin.profile, ...targetPlugin }
       pluginManager.activateAndRegisterLocalPlugin(localPlugin)
     } catch (error) {
       const action: localPluginReducerActionType = {
@@ -120,10 +120,10 @@ function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormPr
         handleHide={closeModal}
         id="pluginManagerLocalPluginModalDialog"
         hide={visible}
-        title={intl.formatMessage({id: 'pluginManager.localForm.title'})}
+        title={intl.formatMessage({ id: 'pluginManager.localForm.title' })}
-        okLabel={intl.formatMessage({id: 'pluginManager.localForm.ok'})}
+        okLabel={intl.formatMessage({ id: 'pluginManager.localForm.ok' })}
         okFn={handleModalOkClick}
-        cancelLabel={intl.formatMessage({id: 'pluginManager.localForm.cancel'})}
+        cancelLabel={intl.formatMessage({ id: 'pluginManager.localForm.cancel' })}
         cancelFn={closeModal}
       >
         <form id="local-plugin-form">
@@ -172,7 +172,7 @@ function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormPr
               value={methods || ''}
               id="plugin-methods"
               data-id="localPluginMethods"
-              placeholder={intl.formatMessage({id: 'pluginManager.localForm.methods'})}
+              placeholder={intl.formatMessage({ id: 'pluginManager.localForm.methods' })}
             />
           </div>
           <div className="form-group">
@@ -187,7 +187,7 @@ function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormPr
               value={canactivate || ''}
               id="plugin-canactivate"
               data-id="localPluginCanActivate"
-              placeholder={intl.formatMessage({id: 'pluginManager.localForm.pluginNames'})}
+              placeholder={intl.formatMessage({ id: 'pluginManager.localForm.pluginNames' })}
             />
           </div>
 

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

@@ -6,11 +6,11 @@ interface ModuleHeadingProps {
   count: number
 }
 
-function ModuleHeading({headingLabel, count}: ModuleHeadingProps) {
+function ModuleHeading({ headingLabel, count }: ModuleHeadingProps) {
   return (
     <nav className="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
       <span className="navbar-brand plugins-list-title h6 mb-0 mr-2">{headingLabel}</span>
-      <span className="badge badge-primary" style={{cursor: 'default'}} data-id="pluginManagerComponentInactiveTilesCount">
+      <span className="badge badge-primary" style={{ cursor: 'default' }} data-id="pluginManagerComponentInactiveTilesCount">
         {count}
       </span>
     </nav>

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

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {Fragment, useState} from 'react' // eslint-disable-line no-use-before-define
+import React, { Fragment, useState } from 'react' // eslint-disable-line no-use-before-define
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 /* eslint-disable-line */
-import {ModalDialog} from '@remix-ui/modal-dialog'
+import { ModalDialog } from '@remix-ui/modal-dialog'
 import useLocalStorage from '../custom-hooks/useLocalStorage'
-import {PluginPermissions} from '../../types'
+import { PluginPermissions } from '../../types'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 
 function PermisssionsSettings() {
   const [modalVisibility, setModalVisibility] = useState<boolean>(true)
@@ -51,7 +51,7 @@ function PermisssionsSettings() {
     })
   }
 
-  function RenderPluginHeader({headingName}) {
+  function RenderPluginHeader({ headingName }) {
     return (
       <div className="pb-2 remixui_permissionKey">
         <h3>
@@ -68,7 +68,7 @@ function PermisssionsSettings() {
     )
   }
 
-  function RenderPermissions({targetPlugin}) {
+  function RenderPermissions({ targetPlugin }) {
     return (
       <>
         {Object.keys(permissions[targetPlugin]).map((funcName) => {
@@ -120,8 +120,8 @@ function PermisssionsSettings() {
         title={intl.formatMessage({
           id: 'pluginManager.pluginManagerPermissions'
         })}
-        okLabel={intl.formatMessage({id: 'pluginManager.ok'})}
+        okLabel={intl.formatMessage({ id: 'pluginManager.ok' })}
-        cancelLabel={intl.formatMessage({id: 'pluginManager.cancel'})}
+        cancelLabel={intl.formatMessage({ id: 'pluginManager.cancel' })}
       >
         {permissions && Object.keys(permissions).length > 0 ? (
           <h4 className="text-center">

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

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {Fragment, ReactNode, useEffect, useState} from 'react' // eslint-disable-line no-use-before-define
+import React, { Fragment, ReactNode, useEffect, useState } from 'react' // eslint-disable-line no-use-before-define
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
-import {PluginManagerComponent, PluginManagerSettings} from '../../types'
+import { PluginManagerComponent, PluginManagerSettings } from '../../types'
 import PermisssionsSettings from './permissionsSettings'
-import {Profile} from '@remixproject/plugin-utils'
+import { Profile } from '@remixproject/plugin-utils'
 import LocalPluginForm from './LocalPluginForm'
 
 interface RootViewProps {
@@ -21,7 +21,7 @@ export interface pluginActivated {
   profile: Profile
 }
 
-function RootView({pluginComponent, children}: RootViewProps) {
+function RootView({ pluginComponent, children }: RootViewProps) {
   const intl = useIntl()
   const [visible, setVisible] = useState<boolean>(true)
   const [filterPlugins, setFilterPlugin] = useState<string>('')
@@ -45,7 +45,7 @@ function RootView({pluginComponent, children}: RootViewProps) {
             }}
             value={filterPlugins}
             className="mb-2 form-control"
-            placeholder={intl.formatMessage({id: 'pluginManager.search'})}
+            placeholder={intl.formatMessage({ id: 'pluginManager.search' })}
             data-id="pluginManagerComponentSearchInput"
           />
           <button onClick={openModal} className="py-1 btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">

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

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {Profile} from '@remixproject/plugin-utils'
+import { Profile } from '@remixproject/plugin-utils'
-import React, {useState} from 'react' // eslint-disable-line no-use-before-define
+import React, { useState } from 'react' // eslint-disable-line no-use-before-define
-import {RemixUiPluginManagerProps} from '../types'
+import { RemixUiPluginManagerProps } from '../types'
 import ActivePluginCardContainer from './components/ActivePluginCardContainer'
 import InactivePluginCardContainer from './components/InactivePluginCardContainer'
 import RootView from './components/rootView'
 import './remix-ui-plugin-manager.css'
 
-export const RemixUiPluginManager = ({pluginComponent}: RemixUiPluginManagerProps) => {
+export const RemixUiPluginManager = ({ pluginComponent }: RemixUiPluginManagerProps) => {
   return (
     <RootView pluginComponent={pluginComponent}>
       <section data-id="pluginManagerComponentPluginManagerSection">

libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx

@@ -1,13 +1,13 @@
 import React, {useEffect, useState} from 'react' // eslint-disable-line
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import {ModalDialog} from '@remix-ui/modal-dialog' // eslint-disable-line
 import {RemixUiPublishToStorageProps} from './types' // eslint-disable-line
-import {publishToIPFS} from './publishToIPFS'
+import { publishToIPFS } from './publishToIPFS'
-import {publishToSwarm} from './publishOnSwarm'
+import { publishToSwarm } from './publishOnSwarm'
 
 export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
   const intl = useIntl()
-  const {api, storage, contract, resetStorage} = props
+  const { api, storage, contract, resetStorage } = props
   const [modalShown, setModalShown] = useState(false)
   const [state, setState] = useState({
     modal: {
@@ -25,22 +25,22 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
     const storageService = async () => {
       if (contract.metadata === undefined || contract.metadata.length === 0) {
         modal(
-          intl.formatMessage({id: 'publishToStorage.title1'}),
+          intl.formatMessage({ id: 'publishToStorage.title1' }),
-          intl.formatMessage({id: 'publishToStorage.message1'})
+          intl.formatMessage({ id: 'publishToStorage.message1' })
         )
       } else {
         if (storage === 'swarm') {
           try {
             const result = await publishToSwarm(contract, api)
 
-            modal(intl.formatMessage({id: 'publishToStorage.title2'}, {name: contract.name}), publishMessage(result.uploaded))
+            modal(intl.formatMessage({ id: 'publishToStorage.title2' }, { name: contract.name }), publishMessage(result.uploaded))
           } catch (err) {
-            modal(intl.formatMessage({id: 'publishToStorage.title3'}), publishMessageFailed(storage, err.message))
+            modal(intl.formatMessage({ id: 'publishToStorage.title3' }), publishMessageFailed(storage, err.message))
           }
         } else {
           if (!api.config.get('settings/ipfs-url') && !modalShown) {
             modal(
-              intl.formatMessage({id: 'publishToStorage.title4'}),
+              intl.formatMessage({ id: 'publishToStorage.title4' }),
               <div>
                 <FormattedMessage id="publishToStorage.title4.message1" /><br></br>
                 <br></br>
@@ -84,9 +84,9 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
   const ipfs = async (contract, api) => {
     try {
       const result = await publishToIPFS(contract, api)
-      modal(intl.formatMessage({id: 'publishToStorage.title2'}, {name: contract.name}), publishMessage(result.uploaded))
+      modal(intl.formatMessage({ id: 'publishToStorage.title2' }, { name: contract.name }), publishMessage(result.uploaded))
     } catch (err) {
-      modal(intl.formatMessage({id: 'publishToStorage.title5'}), publishMessageFailed(storage, err.message))
+      modal(intl.formatMessage({ id: 'publishToStorage.title5' }), publishMessageFailed(storage, err.message))
     }
     setModalShown(true)
   }
@@ -94,7 +94,7 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
   const publishMessage = (uploaded) => (
     <span>
       {' '}
-      <FormattedMessage id="publishToStorage.title2.message" values={{name: contract.name.toLowerCase()}} /> <br />
+      <FormattedMessage id="publishToStorage.title2.message" values={{ name: contract.name.toLowerCase() }} /> <br />
       <pre>
         <div>
           {uploaded.map((value, index) => (
@@ -109,7 +109,7 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
 
   const publishMessageFailed = (storage, err) => (
     <span>
-      <FormattedMessage id="publishToStorage.title5.message" values={{storage}} /> <br />
+      <FormattedMessage id="publishToStorage.title5.message" values={{ storage }} /> <br />
       {err}
     </span>
   )
@@ -118,7 +118,7 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
     setState((prevState) => {
       return {
         ...prevState,
-        modal: {...prevState.modal, hide: true, message: null}
+        modal: { ...prevState.modal, hide: true, message: null }
       }
     })
     resetStorage()

libs/remix-ui/publish-to-storage/src/lib/publishOnSwarm.tsx

@@ -1,6 +1,6 @@
-import {Bee} from '@ethersphere/bee-js'
+import { Bee } from '@ethersphere/bee-js'
 // eslint-disable-next-line no-unused-vars
-import type {UploadResult} from '@ethersphere/bee-js'
+import type { UploadResult } from '@ethersphere/bee-js'
 
 // public gateway node address
 const publicBeeNode = new Bee('https://api.gateway.ethswarm.org/')
@@ -12,7 +12,7 @@ export const publishToSwarm = async (contract, api) => {
   // gather list of files to publish
   const sources = []
   let metadata
-  const item = {content: null, hash: null}
+  const item = { content: null, hash: null }
   const uploaded = []
 
   try {
@@ -123,7 +123,7 @@ export const publishToSwarm = async (contract, api) => {
     throw new Error(error)
   }
 
-  return {uploaded, item}
+  return { uploaded, item }
 }
 
 const swarmVerifiedPublish = async (beeNodes: Bee[], postageStampId: string, content, expectedHash, api): Promise<Record<string, any>> => {
@@ -139,7 +139,7 @@ const swarmVerifiedPublish = async (beeNodes: Bee[], postageStampId: string, con
       }
     } else {
       api.writeFile('swarm/' + hash, content)
-      return {message: 'ok', url: 'bzz-raw://' + hash, hash}
+      return { message: 'ok', url: 'bzz-raw://' + hash, hash }
     }
   } catch (error) {
     throw new Error(error)

libs/remix-ui/publish-to-storage/src/lib/publishToIPFS.tsx

@@ -3,7 +3,7 @@ import IpfsHttpClient from 'ipfs-http-client'
 let ipfsNodes = []
 
 export const publishToIPFS = async (contract, api) => {
-  ipfsNodes = [IpfsHttpClient({host: 'ipfs.infura.io', port: 5001, protocol: 'https'})]
+  ipfsNodes = [IpfsHttpClient({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' })]
   if (api.config.get('settings/ipfs-url')) {
     const auth = api.config.get('settings/ipfs-project-id')
       ? 'Basic ' + Buffer.from(api.config.get('settings/ipfs-project-id') + ':' + api.config.get('settings/ipfs-project-secret')).toString('base64')
@@ -22,7 +22,7 @@ export const publishToIPFS = async (contract, api) => {
   // gather list of files to publish
   const sources = []
   let metadata
-  const item = {content: null, hash: null}
+  const item = { content: null, hash: null }
   const uploaded = []
 
   try {
@@ -115,7 +115,7 @@ export const publishToIPFS = async (contract, api) => {
     throw new Error(error)
   }
 
-  return {uploaded, item}
+  return { uploaded, item }
 }
 
 const ipfsVerifiedPublish = async (content, expectedHash, api) => {
@@ -130,7 +130,7 @@ const ipfsVerifiedPublish = async (content, expectedHash, api) => {
       }
     } else {
       api.writeFile('ipfs/' + hash, content)
-      return {message: 'ok', url: 'dweb:/ipfs/' + hash, hash}
+      return { message: 'ok', url: 'dweb:/ipfs/' + hash, hash }
     }
   } catch (error) {
     throw new Error(error)

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

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react' //eslint-disable-line
-import {useIntl} from 'react-intl'
+import { useIntl } from 'react-intl'
-import {CopyToClipboard} from '@remix-ui/clipboard'
+import { CopyToClipboard } from '@remix-ui/clipboard'
-import {helper} from '@remix-project/remix-solidity'
+import { helper } from '@remix-project/remix-solidity'
 import './renderer.css'
 const _paq = (window._paq = window._paq || [])
 
@@ -11,7 +11,7 @@ interface RendererProps {
   plugin: any
 }
 
-export const Renderer = ({message, opt = {}, plugin}: RendererProps) => {
+export const Renderer = ({ message, opt = {}, plugin }: RendererProps) => {
   const intl = useIntl()
   const [messageText, setMessageText] = useState(null)
   const [editorOptions, setEditorOptions] = useState({
@@ -74,7 +74,7 @@ export const Renderer = ({message, opt = {}, plugin}: RendererProps) => {
   const askGtp = async () => {
     try {
       const content = await plugin.call('fileManager', 'readFile', editorOptions.errFile)
-      const message = intl.formatMessage({id: 'solidity.openaigptMessage'}, {content, messageText})
+      const message = intl.formatMessage({ id: 'solidity.openaigptMessage' }, { content, messageText })
       await plugin.call('openaigpt', 'message', message)
       _paq.push(['trackEvent', 'ai', 'openai', 'explainSolidityError'])
     } catch (err) {
@@ -103,13 +103,13 @@ export const Renderer = ({message, opt = {}, plugin}: RendererProps) => {
             </span>
             <span
               className="position-relative text-ai text-sm pl-0 pr-2"
-              style={{fontSize: "x-small", alignSelf: "end"}}
+              style={{ fontSize: "x-small", alignSelf: "end" }}
             >
             </span>
             <span
               className="button border text-ai btn-sm"
               onClick={() => { askGtp() }}
-              style={{borderColor: "var(--ai)"}}
+              style={{ borderColor: "var(--ai)" }}
             >
               ASK GPT
             </span>

libs/remix-ui/run-tab/src/lib/actions/account.ts

@@ -86,7 +86,6 @@ export const createNewBlockchainAccount = async (plugin: RunTab, dispatch: React
   )
 }
 
-
 export const signMessageWithAddress = (plugin: RunTab, dispatch: React.Dispatch<any>, account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => {
   plugin.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => {
     if (err) {

libs/remix-ui/run-tab/src/lib/actions/deploy.ts

@@ -253,7 +253,7 @@ export const loadAddress = (plugin: RunTab, dispatch: React.Dispatch<any>, contr
         return dispatch(displayNotification('Alert', error, 'OK', null))
       }
       if (loadType === 'abi') {
-        const contractData = { name: '<at address>', abi, contract: {file: plugin.REACT_API.contracts.currentFile}} as ContractData
+        const contractData = { name: '<at address>', abi, contract: { file: plugin.REACT_API.contracts.currentFile } } as ContractData
         return addInstance(dispatch, { contractData, address, name: '<at address>' })
       } else if (loadType === 'instance') {
         if (!contract) return dispatch(displayPopUp('No compiled contracts found.'))

libs/remix-ui/run-tab/src/lib/actions/events.ts

@@ -104,7 +104,7 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   })
 
   plugin.on('udapp', 'addPinnedInstanceReducer', (address, abi, name, pinnedAt, filePath) => {
-    addPinnedInstance(dispatch, { abi, address, name, pinnedAt, filePath})
+    addPinnedInstance(dispatch, { abi, address, name, pinnedAt, filePath })
   })
 
   plugin.on('filePanel', 'setWorkspace', async () => {
@@ -170,7 +170,6 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
     dispatch(clearRecorderCount())
   })
 
-
   setInterval(() => {
     fillAccountsList(plugin, dispatch)
     updateInstanceBalance(plugin, dispatch)
@@ -189,7 +188,7 @@ const loadPinnedContracts = async (plugin, dispatch, dirName) => {
         const pinnedContractObj = JSON.parse(pinnedContract)
         if (pinnedContractObj) addPinnedInstance(dispatch, pinnedContractObj)
       }
-    } catch(err) {
+    } catch (err) {
       console.log(err)
     }
   }

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

@@ -1,14 +1,14 @@
 // eslint-disable-next-line no-use-before-define
-import React, {useEffect, useState, useRef} from 'react'
+import React, { useEffect, useState, useRef } from 'react'
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
-import {CopyToClipboard} from '@remix-ui/clipboard'
+import { CopyToClipboard } from '@remix-ui/clipboard'
-import {AccountProps} from '../types'
+import { AccountProps } from '../types'
-import {PassphrasePrompt} from './passphrase'
+import { PassphrasePrompt } from './passphrase'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export function AccountUI(props: AccountProps) {
-  const {selectedAccount, loadedAccounts} = props.accounts
+  const { selectedAccount, loadedAccounts } = props.accounts
-  const {selectExEnv, personalMode} = props
+  const { selectExEnv, personalMode } = props
   const accounts = Object.keys(loadedAccounts)
   const [plusOpt, setPlusOpt] = useState({
     classList: '',
@@ -29,42 +29,42 @@ export function AccountUI(props: AccountProps) {
     if (selectExEnv && selectExEnv.startsWith('injected')) {
       setPlusOpt({
         classList: 'udapp_disableMouseEvents',
-        title: intl.formatMessage({id: 'udapp.injectedTitle'})
+        title: intl.formatMessage({ id: 'udapp.injectedTitle' })
       })
     } else {
       switch (selectExEnv) {
       case 'vm-cancun':
         setPlusOpt({
           classList: '',
-          title: intl.formatMessage({id: 'udapp.createNewAccount'})
+          title: intl.formatMessage({ id: 'udapp.createNewAccount' })
         })
         break
 
       case 'vm-paris':
         setPlusOpt({
           classList: '',
-          title: intl.formatMessage({id: 'udapp.createNewAccount'})
+          title: intl.formatMessage({ id: 'udapp.createNewAccount' })
         })
         break
 
       case 'vm-london':
         setPlusOpt({
           classList: '',
-          title: intl.formatMessage({id: 'udapp.createNewAccount'})
+          title: intl.formatMessage({ id: 'udapp.createNewAccount' })
         })
         break
 
       case 'vm-berlin':
         setPlusOpt({
           classList: '',
-          title: intl.formatMessage({id: 'udapp.createNewAccount'})
+          title: intl.formatMessage({ id: 'udapp.createNewAccount' })
         })
         break
 
       case 'vm-shanghai':
         setPlusOpt({
           classList: '',
-          title: intl.formatMessage({id: 'udapp.createNewAccount'})
+          title: intl.formatMessage({ id: 'udapp.createNewAccount' })
         })
         break
 
@@ -72,12 +72,12 @@ export function AccountUI(props: AccountProps) {
         if (!personalMode) {
           setPlusOpt({
             classList: 'disableMouseEvents',
-            title: intl.formatMessage({id: 'udapp.web3Title'})
+            title: intl.formatMessage({ id: 'udapp.web3Title' })
           })
         } else {
           setPlusOpt({
             classList: '',
-            title: intl.formatMessage({id: 'udapp.createNewAccount'})
+            title: intl.formatMessage({ id: 'udapp.createNewAccount' })
           })
         }
         break
@@ -85,7 +85,7 @@ export function AccountUI(props: AccountProps) {
       default:
         setPlusOpt({
           classList: 'disableMouseEvents',
-          title: intl.formatMessage({id: 'udapp.defaultTitle'}, {selectExEnv})
+          title: intl.formatMessage({ id: 'udapp.defaultTitle' }, { selectExEnv })
         })
       }
     }
@@ -97,28 +97,28 @@ export function AccountUI(props: AccountProps) {
 
   const signMessage = () => {
     if (!accounts[0]) {
-      return props.tooltip(intl.formatMessage({id: 'udapp.tooltipText1'}))
+      return props.tooltip(intl.formatMessage({ id: 'udapp.tooltipText1' }))
     }
 
     if (selectExEnv === 'web3') {
       return props.modal(
-        intl.formatMessage({id: 'udapp.modalTitle1'}),
+        intl.formatMessage({ id: 'udapp.modalTitle1' }),
-        <PassphrasePrompt message={intl.formatMessage({id: 'udapp.modalMessage1'})} setPassphrase={props.setPassphrase} />,
+        <PassphrasePrompt message={intl.formatMessage({ id: 'udapp.modalMessage1' })} setPassphrase={props.setPassphrase} />,
-        intl.formatMessage({id: 'udapp.ok'}),
+        intl.formatMessage({ id: 'udapp.ok' }),
         () => {
           props.modal(
-            intl.formatMessage({id: 'udapp.signAMessage'}),
+            intl.formatMessage({ id: 'udapp.signAMessage' }),
             signMessagePrompt(),
-            intl.formatMessage({id: 'udapp.ok'}),
+            intl.formatMessage({ id: 'udapp.ok' }),
             () => {
               props.signMessageWithAddress(selectedAccount, messageRef.current, signedMessagePrompt, props.passphrase)
               props.setPassphrase('')
             },
-            intl.formatMessage({id: 'udapp.cancel'}),
+            intl.formatMessage({ id: 'udapp.cancel' }),
             null
           )
         },
-        intl.formatMessage({id: 'udapp.cancel'}),
+        intl.formatMessage({ id: 'udapp.cancel' }),
         () => {
           props.setPassphrase('')
         }
@@ -126,13 +126,13 @@ export function AccountUI(props: AccountProps) {
     }
 
     props.modal(
-      intl.formatMessage({id: 'udapp.signAMessage'}),
+      intl.formatMessage({ id: 'udapp.signAMessage' }),
       signMessagePrompt(),
-      intl.formatMessage({id: 'udapp.ok'}),
+      intl.formatMessage({ id: 'udapp.ok' }),
       () => {
         props.signMessageWithAddress(selectedAccount, messageRef.current, signedMessagePrompt)
       },
-      intl.formatMessage({id: 'udapp.cancel'}),
+      intl.formatMessage({ id: 'udapp.cancel' }),
       null
     )
   }
@@ -167,7 +167,7 @@ export function AccountUI(props: AccountProps) {
           id="prompt_text"
           className="bg-light text-light"
           data-id="signMessageTextarea"
-          style={{width: '100%'}}
+          style={{ width: '100%' }}
           rows={4}
           cols={50}
           onInput={handleMessageInput}
@@ -224,8 +224,8 @@ export function AccountUI(props: AccountProps) {
             </option>
           ))}
         </select>
-        <div style={{marginLeft: -5}}>
+        <div style={{ marginLeft: -5 }}>
-          <CopyToClipboard tip={intl.formatMessage({id: 'udapp.copyAccount'})} content={selectedAccount} direction="top" />
+          <CopyToClipboard tip={intl.formatMessage({ id: 'udapp.copyAccount' })} content={selectedAccount} direction="top" />
         </div>
         <CustomTooltip placement={'top-start'} tooltipClasses="text-nowrap" tooltipId="remixSignMsgTooltip" tooltipText={<FormattedMessage id="udapp.signMsgUsingAccount" />}>
           <i id="remixRunSignMsg" data-id="settingsRemixRunSignMsg" className="mx-1 fas fa-edit udapp_icon" aria-hidden="true" onClick={signMessage}></i>

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

@@ -1,11 +1,11 @@
 // eslint-disable-next-line no-use-before-define
-import React, {useEffect, useRef, useState} from 'react'
+import React, { useEffect, useRef, useState } from 'react'
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import * as remixLib from '@remix-project/remix-lib'
-import {ContractGUIProps} from '../types'
+import { ContractGUIProps } from '../types'
-import {CopyToClipboard} from '@remix-ui/clipboard'
+import { CopyToClipboard } from '@remix-ui/clipboard'
-import {CustomTooltip, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress, unavailableProxyLayoutMsg, upgradeReportMsg} from '@remix-ui/helper'
+import { CustomTooltip, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress, unavailableProxyLayoutMsg, upgradeReportMsg } from '@remix-ui/helper'
-import {Dropdown} from 'react-bootstrap'
+import { Dropdown } from 'react-bootstrap'
 
 const txFormat = remixLib.execution.txFormat
 const txHelper = remixLib.execution.txHelper
@@ -18,13 +18,13 @@ export function ContractGUI(props: ContractGUIProps) {
     content: string
     classList: string
     dataId: string
-  }>({title: '', content: '', classList: '', dataId: ''})
+  }>({ title: '', content: '', classList: '', dataId: '' })
   const [toggleDeployProxy, setToggleDeployProxy] = useState<boolean>(false)
   const [toggleUpgradeImp, setToggleUpgradeImp] = useState<boolean>(false)
   const [deployState, setDeployState] = useState<{
     deploy: boolean
     upgrade: boolean
-  }>({deploy: false, upgrade: false})
+  }>({ deploy: false, upgrade: false })
   const [proxyAddress, setProxyAddress] = useState<string>('')
   const [proxyAddressError, setProxyAddressError] = useState<string>('')
   const [showDropdown, setShowDropdown] = useState<boolean>(false)
@@ -87,7 +87,7 @@ export function ContractGUI(props: ContractGUIProps) {
     const multiString = getMultiValsString(multiFields.current)
     // copy-to-clipboard icon is only visible for method requiring input params
     if (!multiString) {
-      return intl.formatMessage({id: 'udapp.getEncodedCallError'})
+      return intl.formatMessage({ id: 'udapp.getEncodedCallError' })
     }
     const multiJSON = JSON.parse('[' + multiString + ']')
 
@@ -106,7 +106,7 @@ export function ContractGUI(props: ContractGUIProps) {
       const multiString = getMultiValsString(multiFields.current)
       // copy-to-clipboard icon is only visible for method requiring input params
       if (!multiString) {
-        return intl.formatMessage({id: 'udapp.getEncodedCallError'})
+        return intl.formatMessage({ id: 'udapp.getEncodedCallError' })
       }
       const multiJSON = JSON.parse('[' + multiString + ']')
       return txHelper.encodeParams(props.funcABI, multiJSON)
@@ -178,7 +178,7 @@ export function ContractGUI(props: ContractGUIProps) {
       props.clickCallBack(props.initializerOptions.inputs.inputs, proxyInitializeString, ['Deploy with Proxy'])
     } else if (deployState.upgrade) {
       if (proxyAddress === '') {
-        setProxyAddressError(intl.formatMessage({id: 'udapp.proxyAddressError1'}))
+        setProxyAddressError(intl.formatMessage({ id: 'udapp.proxyAddressError1' }))
       } else {
         const isValidProxyAddress = await props.isValidProxyAddress(proxyAddress)
         if (isValidProxyAddress) {
@@ -216,7 +216,7 @@ export function ContractGUI(props: ContractGUIProps) {
             }
           }
         } else {
-          setProxyAddressError(intl.formatMessage({id: 'udapp.proxyAddressError2'}))
+          setProxyAddressError(intl.formatMessage({ id: 'udapp.proxyAddressError2' }))
         }
       }
     } else {
@@ -247,7 +247,7 @@ export function ContractGUI(props: ContractGUIProps) {
   const handleDeployProxySelect = (value: boolean) => {
     if (value) setToggleUpgradeImp(false)
     setToggleDeployProxy(value)
-    setDeployState({upgrade: false, deploy: value})
+    setDeployState({ upgrade: false, deploy: value })
   }
 
   const handleToggleUpgradeImp = () => {
@@ -259,7 +259,7 @@ export function ContractGUI(props: ContractGUIProps) {
     if (value) {
       setToggleDeployProxy(false)
     }
-    setDeployState({deploy: false, upgrade: value})
+    setDeployState({ deploy: false, upgrade: value })
   }
 
   const switchProxyAddress = (address: string) => {
@@ -282,7 +282,7 @@ export function ContractGUI(props: ContractGUIProps) {
         (props.funcABI.inputs && props.funcABI.inputs.length > 0) || props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? 'udapp_hasArgs' : ''
       }`}
     >
-      <div className="udapp_contractActionsContainerSingle pt-2" style={{display: toggleContainer ? 'none' : 'flex'}}>
+      <div className="udapp_contractActionsContainerSingle pt-2" style={{ display: toggleContainer ? 'none' : 'flex' }}>
         <CustomTooltip
           delay={0}
           placement={'right'}
@@ -290,9 +290,9 @@ export function ContractGUI(props: ContractGUIProps) {
           tooltipId="remixUdappInstanceButtonTooltip"
           tooltipText={
             toggleUpgradeImp && !proxyAddress
-              ? intl.formatMessage({id: 'udapp.tooltipText11'})
+              ? intl.formatMessage({ id: 'udapp.tooltipText11' })
               : props.inputs !== '' && basicInput === ''
-                ? intl.formatMessage({id: 'udapp.tooltipText12'})
+                ? intl.formatMessage({ id: 'udapp.tooltipText12' })
                 : buttonOptions.title
           }
         >
@@ -327,7 +327,7 @@ export function ContractGUI(props: ContractGUIProps) {
           }}
         ></i>
       </div>
-      <div className="udapp_contractActionsContainerMulti" style={{display: toggleContainer ? 'flex' : 'none'}}>
+      <div className="udapp_contractActionsContainerMulti" style={{ display: toggleContainer ? 'flex' : 'none' }}>
         <div className="udapp_contractActionsContainerMultiInner text-dark">
           <div onClick={switchMethodViewOff} className="udapp_multiHeader">
             <div className="udapp_multiTitle run-instance-multi-title pt-3">{title}</div>
@@ -354,13 +354,13 @@ export function ContractGUI(props: ContractGUIProps) {
             })}
           </div>
           <div className="d-flex udapp_group udapp_multiArg">
-            <CopyToClipboard tip={intl.formatMessage({id: 'udapp.copyCalldata'})} icon="fa-clipboard" direction={'bottom'} getContent={getEncodedCall}>
+            <CopyToClipboard tip={intl.formatMessage({ id: 'udapp.copyCalldata' })} icon="fa-clipboard" direction={'bottom'} getContent={getEncodedCall}>
               <button className="btn remixui_copyButton">
                 <i id="copyCalldata" className="m-0 remixui_copyIcon far fa-copy" aria-hidden="true"></i>
                 <label htmlFor="copyCalldata">Calldata</label>
               </button>
             </CopyToClipboard>
-            <CopyToClipboard tip={intl.formatMessage({id: 'udapp.copyParameters'})} icon="fa-clipboard" direction={'bottom'} getContent={getEncodedParams}>
+            <CopyToClipboard tip={intl.formatMessage({ id: 'udapp.copyParameters' })} icon="fa-clipboard" direction={'bottom'} getContent={getEncodedParams}>
               <button className="btn remixui_copyButton">
                 <i id="copyParameters" className="m-0 remixui_copyIcon far fa-copy" aria-hidden="true"></i>
                 <label htmlFor="copyParameters">
@@ -422,7 +422,7 @@ export function ContractGUI(props: ContractGUIProps) {
                         ref={(el) => {
                           initializeFields.current[index] = el
                         }}
-                        style={{height: 32}}
+                        style={{ height: 32 }}
                         className="form-control udapp_input"
                         placeholder={inp.type}
                       />
@@ -462,13 +462,13 @@ export function ContractGUI(props: ContractGUIProps) {
                 />
 
                 {props.proxy.deployments.length > 0 && (
-                  <Dropdown.Menu as={ProxyDropdownMenu} className="w-100 custom-dropdown-items" style={{overflow: 'hidden'}}>
+                  <Dropdown.Menu as={ProxyDropdownMenu} className="w-100 custom-dropdown-items" style={{ overflow: 'hidden' }}>
                     {props.proxy.deployments.map((deployment, index) => (
                       <CustomTooltip
                         placement={'right'}
                         tooltipClasses="text-nowrap"
                         tooltipId={`proxyAddressTooltip${index}`}
-                        tooltipText={<FormattedMessage id="udapp.tooltipText13" values={{date: shortenDate(deployment.date)}} />}
+                        tooltipText={<FormattedMessage id="udapp.tooltipText13" values={{ date: shortenDate(deployment.date) }} />}
                         key={index}
                       >
                         <Dropdown.Item
@@ -495,7 +495,7 @@ export function ContractGUI(props: ContractGUIProps) {
             <div className="d-flex">
               <div className="mb-2">
                 {proxyAddressError && (
-                  <span className="text-lowercase text-danger" data-id="errorMsgProxyAddress" style={{fontSize: '.8em'}}>
+                  <span className="text-lowercase text-danger" data-id="errorMsgProxyAddress" style={{ fontSize: '.8em' }}>
                     {proxyAddressError}
                   </span>
                 )}

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

@@ -1,8 +1,8 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
-import {FormattedMessage, useIntl} from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
-import {DeployButtonProps} from '../types'
+import { DeployButtonProps } from '../types'
-import {ButtonGroup, Dropdown} from 'react-bootstrap'
+import { ButtonGroup, Dropdown } from 'react-bootstrap'
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export function DeployButton(props: DeployButtonProps) {
   const intl = useIntl()
@@ -22,16 +22,16 @@ export function DeployButton(props: DeployButtonProps) {
             className={`udapp_instanceButton ${props.buttonOptions.widthClass} btn btn-sm ${props.buttonOptions.classList}`}
             data-id={props.buttonOptions.dataId}
           >
-            {props.deployOptions[props.selectedIndex] ? props.deployOptions[props.selectedIndex].title : intl.formatMessage({id: 'udapp.deploy'})}
+            {props.deployOptions[props.selectedIndex] ? props.deployOptions[props.selectedIndex].title : intl.formatMessage({ id: 'udapp.deploy' })}
           </button>
           <Dropdown.Toggle
             split
             id="dropdown-split-basic"
             className={`btn btn-sm dropdown-toggle dropdown-toggle-split ${props.buttonOptions.classList}`}
-            style={{maxWidth: 25, minWidth: 0, height: 32}}
+            style={{ maxWidth: 25, minWidth: 0, height: 32 }}
           />
           <Dropdown.Menu className="deploy-items border-0">
-            {props.deployOptions.map(({title, active}, index) => (
+            {props.deployOptions.map(({ title, active }, index) => (
               <Dropdown.Item
                 onClick={() => {
                   props.setSelectedIndex(index)

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

@@ -1,11 +1,11 @@
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 import React from 'react'
-import {DeployInputProps} from '../types'
+import { DeployInputProps } from '../types'
-import {DeployButton} from './deployButton'
+import { DeployButton } from './deployButton'
 
 export function DeployInput(props: DeployInputProps) {
   return (
-    <div className="udapp_contractActionsContainerSingle" style={{display: 'flex'}}>
+    <div className="udapp_contractActionsContainerSingle" style={{ display: 'flex' }}>
       <DeployButton
         buttonOptions={props.buttonOptions}
         selectedIndex={props.selectedIndex}

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

@@ -1,15 +1,15 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
-import {EnvironmentProps, Provider} from '../types'
+import { EnvironmentProps, Provider } from '../types'
-import {Dropdown} from 'react-bootstrap'
+import { Dropdown } from 'react-bootstrap'
-import {CustomMenu, CustomToggle, CustomTooltip} from '@remix-ui/helper'
+import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
 
 export function EnvironmentUI(props: EnvironmentProps) {
   const handleChangeExEnv = (env: string) => {
     const provider = props.providers.providerList.find((exEnv) => exEnv.name === env)
     const context = provider.name
-    props.setExecutionContext({context})
+    props.setExecutionContext({ context })
   }
 
   const currentProvider = props.providers.providerList.find((exEnv) => exEnv.name === props.selectedEnv)
@@ -26,7 +26,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
 
         <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText2" />}>
           <a href="https://chainlist.org/" target="_blank">
-            <i style={{fontSize: 'medium'}} className={'ml-2 fad fa-plug'} aria-hidden="true"></i>
+            <i style={{ fontSize: 'medium' }} className={'ml-2 fad fa-plug'} aria-hidden="true"></i>
           </a>
         </CustomTooltip>
       </label>
@@ -38,7 +38,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
             {currentProvider && bridges[currentProvider.name] && (
               <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
                 <i
-                  style={{fontSize: 'medium'}}
+                  style={{ fontSize: 'medium' }}
                   className={'ml-2 fa fa-rocket-launch'}
                   aria-hidden="true"
                   onClick={() => {
@@ -49,7 +49,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
             )}
           </Dropdown.Toggle>
           <Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
-            {props.providers.providerList.map(({displayName, name}, index) => (
+            {props.providers.providerList.map(({ displayName, name }, index) => (
               <Dropdown.Item
                 key={index}
                 onClick={() => {

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

@@ -1,8 +1,8 @@
 // eslint-disable-next-line no-use-before-define
-import {CustomTooltip} from '@remix-ui/helper'
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useEffect, useRef, useState } from 'react'
-import {FormattedMessage} from 'react-intl'
+import { FormattedMessage } from 'react-intl'
-import {GasPriceProps} from '../types'
+import { GasPriceProps } from '../types'
 
 const defaultGasLimit = 3000000
 export function GasLimitUI(props: GasPriceProps) {

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

@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import { CustomTooltip } from '@remix-ui/helper'
-import React, {useEffect, useRef} from 'react'
+import React, { useEffect, useRef } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { InstanceContainerProps } from '../types'
 import { UniversalDappUI } from './universalDappUI'
@@ -18,7 +18,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
         <CustomTooltip placement="top-start" tooltipClasses="text-nowrap" tooltipId="deployAndRunPinnedContractsTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextPinnedContracts" />}>
           <label className="udapp_deployedContracts" data-id="pinnedContracts">
             <FormattedMessage id="udapp.pinnedContracts" />
-            <span style={{fontSize: '0.75rem'}} data-id="pinnedContractsSublabel"> (network: {props.plugin.REACT_API.chainId}) </span>
+            <span style={{ fontSize: '0.75rem' }} data-id="pinnedContractsSublabel"> (network: {props.plugin.REACT_API.chainId}) </span>
           </label>
         </CustomTooltip>
       </div>