lint 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

@@ -92,7 +92,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

@@ -156,16 +156,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
@@ -487,7 +487,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]),
@@ -652,7 +652,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>
               {' '}
@@ -661,7 +661,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" />
@@ -693,7 +693,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: [
@@ -706,7 +706,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: [
@@ -719,7 +719,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: [
@@ -735,14 +735,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'])
       },
@@ -751,14 +751,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'])
       },
@@ -767,7 +767,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: [],
@@ -781,12 +781,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',
@@ -803,10 +802,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' }))
         }
       },
     }
@@ -847,27 +846,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)
@@ -915,7 +913,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/git/src/components/buttons/commitmessage.tsx

@@ -24,8 +24,8 @@ export const CommitMessage = () => {
   }, [context.fileStatusResult])
 
   const commit = async() => {
-        if(context.staged.length === 0 && context.allchangesnotstaged.length == 0) return
+    if (context.staged.length === 0 && context.allchangesnotstaged.length == 0) return
-        if(context.staged.length === 0)
+    if (context.staged.length === 0)
       await actions.addall()
     await actions.commit(message.value)
   }
@@ -35,7 +35,7 @@ export const CommitMessage = () => {
   }
 
   const commitMessagePlaceholder = () => {
-        if(context.currentBranch === undefined || context.currentBranch.name === "")
+    if (context.currentBranch === undefined || context.currentBranch.name === "")
       return `message`
     return `message ( commit on ${context.currentBranch.name} )`
   }

libs/remix-ui/git/src/components/buttons/gituibutton.tsx

@@ -10,7 +10,7 @@ interface ButtonWithContextProps {
 }
 
 // This component extends a button, disabling it when loading is true
-const GitUIButton = ({children, disabledCondition = false, ...rest }:ButtonWithContextProps) => {
+const GitUIButton = ({ children, disabledCondition = false, ...rest }:ButtonWithContextProps) => {
   const { loading } = React.useContext(gitPluginContext)
 
   const isDisabled = loading || disabledCondition

libs/remix-ui/git/src/components/buttons/sourceControlBase.tsx

@@ -15,7 +15,7 @@ interface SourceControlButtonsProps {
   children: React.ReactNode
 }
 
-export const syncStateContext = createContext<{commitsAhead: ReadCommitResult[], commitsBehind: ReadCommitResult[]}>({commitsAhead: [], commitsBehind: []})
+export const syncStateContext = createContext<{commitsAhead: ReadCommitResult[], commitsBehind: ReadCommitResult[]}>({ commitsAhead: [], commitsBehind: []})
 
 export const SourceControlBase = (props: SourceControlButtonsProps) => {
   const [branch, setBranch] = useState(props.branch)
@@ -32,13 +32,12 @@ export const SourceControlBase = (props: SourceControlButtonsProps) => {
       console.log('BRANCH DIFF found SourceControlButtons', context.branchDifferences[`${remote.remote}/${branch.name}`])
       setCommitsAhead(context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueHeadCommits)
       setCommitsBehind(context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueRemoteCommits)
-    }else{
+    } else {
       setCommitsAhead([])
       setCommitsBehind([])
     }
   }, [context.branchDifferences, context.currentBranch, branch, remote])
 
-
   const setDefaultRemote = () => {
 
     if (context.remotes.length > 0) {
@@ -79,7 +78,7 @@ export const SourceControlBase = (props: SourceControlButtonsProps) => {
   }, [context.defaultRemote, context.currentBranch])
 
   return (<>
-    <syncStateContext.Provider value={{commitsAhead, commitsBehind}}>
+    <syncStateContext.Provider value={{ commitsAhead, commitsBehind }}>
       {props.children}
     </syncStateContext.Provider>
   </>)

libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx

@@ -28,13 +28,12 @@ export const SourceControlButtons = (props: SourceControlButtonsProps) => {
       console.log('BRANCH DIFF found SourceControlButtons', context.branchDifferences[`${remote.remote}/${branch.name}`])
       setCommitsAhead(context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueHeadCommits)
       setCommitsBehind(context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueRemoteCommits)
-    }else{
+    } else {
       setCommitsAhead([])
       setCommitsBehind([])
     }
   }, [context.branchDifferences, context.currentBranch, branch, remote])
 
-
   const setDefaultRemote = () => {
 
     if (context.remotes.length > 0) {
@@ -78,8 +77,6 @@ export const SourceControlButtons = (props: SourceControlButtonsProps) => {
     console.log('SC BUTTONS', branch, remote)
   }, [])
 
-
-
   const pull = async () => {
     await actions.pull(remote.remote, branch.name)
   }
@@ -97,7 +94,6 @@ export const SourceControlButtons = (props: SourceControlButtonsProps) => {
     return (!context.upstream) || context.remotes.length === 0
   }
 
-
   return (
     <span className='d-flex justify-content-end align-items-center'>
       <CustomTooltip tooltipText={<FormattedMessage id="git.pull" />}>

libs/remix-ui/git/src/components/github/branchselect.tsx

@@ -26,7 +26,7 @@ export const BranchSelect = (props: BranchySelectProps) => {
   }, [context.remoteBranches])
 
   const selectRemoteBranch = async (e: any) => {
-    if(!e || !e.value) {
+    if (!e || !e.value) {
       props.select(null)
       return
     }

libs/remix-ui/git/src/components/github/devicecode.tsx

@@ -5,7 +5,6 @@ import axios from "axios";
 import { CopyToClipboard } from "@remix-ui/clipboard";
 import { Card } from "react-bootstrap";
 
-
 export const GetDeviceCode = () => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
@@ -13,8 +12,6 @@ export const GetDeviceCode = () => {
   const [gitHubResponse, setGitHubResponse] = React.useState<any>(null)
   const [authorized, setAuthorized] = React.useState<boolean>(false)
 
-
-
   const getDeviceCodeFromGitHub = async () => {
 
     setAuthorized(false)
@@ -90,7 +87,6 @@ export const GetDeviceCode = () => {
     console.log('context.rateLimit', context.rateLimit)
   }, [context.rateLimit])
 
-
   return (
     <>
       {(context.gitHubUser && context.gitHubUser.login) ? null :
@@ -142,6 +138,5 @@ export const GetDeviceCode = () => {
           </div> : null
       }
 
-
     </>)
 }

libs/remix-ui/git/src/components/github/repositoryselect.tsx

@@ -36,7 +36,7 @@ const RepositorySelect = (props: RepositorySelectProps) => {
   }, [context.repositories])
 
   const selectRepo = async (e: any) => {
-    if(!e || !e.value) {
+    if (!e || !e.value) {
       props.select(null)
       return
     }

libs/remix-ui/git/src/components/github/selectandclonerepositories.tsx

@@ -35,7 +35,6 @@ export const SelectAndCloneRepositories = (props: RepositoriesProps) => {
     }
   };
 
-  
   return (
     <>
       <TokenWarning />
@@ -52,4 +51,3 @@ export const SelectAndCloneRepositories = (props: RepositoriesProps) => {
   )
 }
 
-

libs/remix-ui/git/src/components/gitui.tsx

@@ -57,7 +57,6 @@ export const GitUI = (props: IGitUi) => {
 
   useEffect(() => {
 
-
     async function setDecorators(gitState: gitState) {
       await plugin.call('fileDecorator', 'clearFileDecorators')
       await setModifiedDecorator(gitState.modified)
@@ -70,12 +69,10 @@ export const GitUI = (props: IGitUi) => {
       setDecorators(gitState)
     })
 
-
   }, [gitState.fileStatusResult])
 
   useEffect(() => {
 
-
     async function updatestate() {
       console.log('updatestate', gitState)
       if (gitState.currentBranch && gitState.currentBranch.remote && gitState.currentBranch.remote.url) {
@@ -88,7 +85,6 @@ export const GitUI = (props: IGitUi) => {
 
   }, [gitState.gitHubUser, gitState.currentBranch, gitState.remotes, gitState.gitHubAccessToken])
 
-
   const gitActionsProviderValue = {
     commit,
     addall,
@@ -192,7 +188,6 @@ export const GitUI = (props: IGitUi) => {
                   </>
                 </Accordion.Collapse>
 
-
               </Accordion>
             </pluginActionsContext.Provider>
           </gitActionsContext.Provider>

libs/remix-ui/git/src/components/navigation/commits.tsx

@@ -49,7 +49,6 @@ export const CommitsNavigation = ({ eventKey, activePanel, callback, title, bran
 
         <SourceControlButtons branch={branch} remote={remote}></SourceControlButtons>
 
-
       </div>
     </>
   );

libs/remix-ui/git/src/components/navigation/log.tsx

@@ -24,7 +24,7 @@ export const LogNavigation = ({ eventKey, activePanel, callback }) => {
   }
 
   useEffect(() => {
-    if(!context.log) return
+    if (!context.log) return
     // count different types of logs
     const errorCount = context.log.filter(log => log.type === 'error').length
     const warningCount = context.log.filter(log => log.type === 'warning').length

libs/remix-ui/git/src/components/navigation/settings.tsx

@@ -26,7 +26,6 @@ export const SettingsNavigation = ({ eventKey, activePanel, callback }) => {
           }
           <label className="nav pl-1 form-check-label">SETTINGS</label>
 
-
         </span>
 
         <span className='d-flex justify-content-end align-items-center w-25'>
@@ -36,7 +35,6 @@ export const SettingsNavigation = ({ eventKey, activePanel, callback }) => {
 
         </span>
 
-
       </div>
     </>
   );

libs/remix-ui/git/src/components/navigation/sourcecontrol.tsx

@@ -35,7 +35,6 @@ export const SourceControlNavigation = ({ eventKey, activePanel, callback }) =>
 
         <SourceControlButtons/>
 
-
       </div>
     </>
   );

libs/remix-ui/git/src/components/navigation/sourcecontrolgroup.tsx

@@ -13,7 +13,6 @@ interface SourceControlGroupNavigationProps {
     group: sourceControlGroup
 }
 
-
 export const SourceControlGroupNavigation = (props: SourceControlGroupNavigationProps) => {
   const { eventKey, activePanel, callback, group } = props;
   const actions = React.useContext(gitActionsContext)

libs/remix-ui/git/src/components/panels/branches/localbranchdetails.tsx

@@ -32,8 +32,6 @@ export const LocalBranchDetails = (props: BrancheDetailsProps) => {
     }
   }, [activePanel])
 
-
-
   const checkout = (branch: branch) => {
     actions.checkout({
       ref: branch.name,
@@ -74,7 +72,6 @@ export const LocalBranchDetails = (props: BrancheDetailsProps) => {
             }
           })}
 
-
         </div>
         {hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
       </>

libs/remix-ui/git/src/components/panels/branches/remotebranchedetails.tsx

@@ -71,7 +71,7 @@ export const RemoteBranchDetails = (props: BrancheDetailsProps) => {
   const getCommitChanges = async (commit: ReadCommitResult) => {
     const changes = await actions.getCommitChanges(commit.oid, commit.commit.parent[0], branch, branch.remote)
     console.log('CHANGES', changes)
-    if(!changes) {
+    if (!changes) {
       // try to fetch the data
       await actions.fetch(branch.remote.remote, branch.name,null,20, true, false, true)
     }
@@ -92,7 +92,6 @@ export const RemoteBranchDetails = (props: BrancheDetailsProps) => {
             }
           })}
 
-
         </div>
         {hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
       </>

libs/remix-ui/git/src/components/panels/clone.tsx

@@ -31,7 +31,6 @@ export const Clone = () => {
     ''
   );
 
-
   const clone = async () => {
     await actions.clone(cloneUrl, cloneBranch, cloneDepth, !cloneAllBranches)
   }
@@ -63,7 +62,6 @@ export const Clone = () => {
         <FormControl id="cloneulr" placeholder="url" name='cloneurl' value={cloneUrl} onChange={e => onGitHubCloneUrlChange(e.target.value)} aria-describedby="urlprepend" />
       </InputGroup>
 
-
       <input name='clonebranch' onChange={e => onCloneBranchChange(e.target.value)} value={cloneBranch} className="form-control mb-1 mt-2" placeholder="branch" type="text" id="clonebranch" />
       <GitUIButton disabledCondition={!cloneUrl || !cloneBranch} data-id='clonebtn' className='btn btn-primary mt-1 w-100' onClick={async () => {
         clone()
@@ -91,7 +89,6 @@ export const Clone = () => {
         onChange={() => { }}
       />
 
-
       <hr></hr>
     </>)
 }

libs/remix-ui/git/src/components/panels/commands/fetch.tsx

@@ -3,7 +3,6 @@ import { gitActionsContext } from "../../../state/context";
 import GitUIButton from "../../buttons/gituibutton";
 import { gitPluginContext } from "../../gitui";
 
-
 export const Fetch = () => {
   const actions = React.useContext(gitActionsContext)
   const context = React.useContext(gitPluginContext)

libs/remix-ui/git/src/components/panels/commands/merge.tsx

@@ -15,8 +15,6 @@ export const Merge = () => {
     setLocalBranch(context.currentBranch.name)
   }, [context.currentBranch])
 
-
-
   const onLocalBranchChange = (value: any) => {
     console.log('onLocalBranchChange', value)
     setLocalBranch(value)
@@ -35,21 +33,15 @@ export const Merge = () => {
       })
     setLocalBranchOptions(localBranches)
 
-
   }, [context.branches])
 
-
-
   return (
     <>
 
-
-
       <div className="btn-group w-100" role="group" aria-label="Basic example">
         <GitUIButton type="button" onClick={async () => merge()} className="btn btn-primary mr-1">Merge</GitUIButton>
       </div>
 
-
       <label>Merge from Branch</label>
       <Select
         options={localBranchOptions}
@@ -62,6 +54,5 @@ export const Merge = () => {
         placeholder="Type to search for a branch..."
       />
 
-
     </>)
 }

libs/remix-ui/git/src/components/panels/commands/pushpull.tsx

@@ -24,8 +24,6 @@ export const PushPull = () => {
     }
   }, [context.currentBranch])
 
-
-
   const onRemoteBranchChange = (value: string) => {
     setRemoteBranch(value)
   }
@@ -36,7 +34,7 @@ export const PushPull = () => {
 
   const onRemoteChange = (value: string) => {
     const remote: remote = context.remotes.find(r => r.remote === value)
-    if(remote) {
+    if (remote) {
       actions.setUpstreamRemote(remote)
     }
   }
@@ -56,7 +54,6 @@ export const PushPull = () => {
     actions.pull(context.upstream.remote, localBranch, remoteBranch)
   }
 
-
   useEffect(() => {
     console.log('context branches', context.branches)
     // map context.repositories to options
@@ -89,24 +86,19 @@ export const PushPull = () => {
 
   }, [context.remotes])
 
-
   const pushPullIsDisabled = () => {
     return localBranch === '' || remoteBranch === '' || !context.upstream || context.remotes.length === 0
   }
 
-
   return (
     <>
 
-
-
       <div className="btn-group w-100" role="group">
 
         <GitUIButton disabledCondition={pushPullIsDisabled()} type="button" onClick={async () => pull()} className="btn btn-primary mr-1">Pull</GitUIButton>
         <GitUIButton disabledCondition={pushPullIsDisabled()} type="button" onClick={async () => push()} className="btn btn-primary">Push</GitUIButton>
       </div>
 
-
       <label>Local Branch</label>
       <Select
         options={localBranchOptions}
@@ -143,7 +135,6 @@ export const PushPull = () => {
         placeholder="Type to search for a branch..."
       />
 
-
       <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox">
         <input checked={force} onChange={e => onForceChange(e)} className="remixui_autocompile custom-control-input" type="checkbox" data-id="compilerContainerAutoCompile" id="forcepush" title="Force Push" />
         <label className="form-check-label custom-control-label" htmlFor="forcepush">Force push</label>

libs/remix-ui/git/src/components/panels/commits.tsx

@@ -8,7 +8,6 @@ import { BranchDifferences } from "./branches/branchdifferences";
 import { CommitDetails } from "./commits/commitdetails";
 import { CommitSummary } from "./commits/commitsummary";
 
-
 export const Commits = () => {
   const [hasNextPage, setHasNextPage] = React.useState(true)
   const context = React.useContext(gitPluginContext)

libs/remix-ui/git/src/components/panels/commits/commitdetails.tsx

@@ -32,7 +32,7 @@ export const CommitDetails = (props: CommitDetailsProps) => {
         {context.commitChanges && context.commitChanges.filter(
           (change) => change.hashModified === commit.oid && change.hashOriginal === commit.commit.parent[0]
         ).map((change, index) => {
-          return(<CommitDetailsItems key={index} commitChange={change}></CommitDetailsItems>)
+          return (<CommitDetailsItems key={index} commitChange={change}></CommitDetailsItems>)
         })}
 
       </>

libs/remix-ui/git/src/components/panels/commits/commitdetailsitem.tsx

@@ -29,7 +29,6 @@ export const CommitDetailsItems = (props: CCommitDetailsItemsProps) => {
       {status && status.indexOf("deleted") === -1 ? <></> : <span>D</span>}
       {status && status.indexOf("added") === -1 ? <></> : <span>A</span>}
 
-
     </>)
   }
   return (<>

libs/remix-ui/git/src/components/panels/commits/commitsummary.tsx

@@ -46,8 +46,6 @@ export const CommitSummary = (props: CommitSummaryProps) => {
       {commit.commit.author.name || ""}
       <span className="ml-1">{getDate(commit)}</span>
 
-
-
     </>
   )
 }

libs/remix-ui/git/src/components/panels/github.tsx

@@ -5,7 +5,6 @@ import axios from "axios";
 import { CopyToClipboard } from "@remix-ui/clipboard";
 import { Card } from "react-bootstrap";
 
-
 export const GitHubAuth = () => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
@@ -27,7 +26,6 @@ export const GitHubAuth = () => {
     console.log('context.rateLimit', context.rateLimit)
   }, [context.rateLimit])
 
-
   return (
     <>
       {(context.gitHubUser && context.gitHubUser.login) ? null :
@@ -49,6 +47,5 @@ export const GitHubAuth = () => {
           </div>: null
       }
 
-
     </>)
 }

libs/remix-ui/git/src/components/panels/githubcredentials.tsx

@@ -8,7 +8,6 @@ import { useIntl, FormattedMessage } from "react-intl";
 import { CopyToClipboard } from "@remix-ui/clipboard";
 import { FormControl, InputGroup } from "react-bootstrap";
 
-
 export const GitHubCredentials = () => {
   const context = React.useContext(gitPluginContext)
   const pluginactions = React.useContext(pluginActionsContext)
@@ -44,7 +43,7 @@ export const GitHubCredentials = () => {
 
   async function refresh() {
     const credentials = await pluginactions.getGitHubCredentials()
-    if(!credentials) return
+    if (!credentials) return
     console.log('credentials', credentials)
     setGithubToken(credentials.token || '')
     setGithubUsername(credentials.username || '')
@@ -62,7 +61,6 @@ export const GitHubCredentials = () => {
     })
   }
 
-
   return (
     <>
       <div className="input-group text-secondary mb-1 h6">

libs/remix-ui/git/src/components/panels/remotes.tsx

@@ -24,7 +24,6 @@ export const Remotes = () => {
     })
   }
 
-
   useEffect(() => {
     console.log('SHOW REMOTES', context.remotes)
   }, [context.remotes])
@@ -32,7 +31,6 @@ export const Remotes = () => {
   return (
     <>
 
-
       {context.remotes && context.remotes.length ?
         <>
 

libs/remix-ui/git/src/components/panels/remotesimport.tsx

@@ -8,7 +8,6 @@ import { selectStyles, selectTheme } from "../../types/styles";
 import { TokenWarning } from "./tokenWarning";
 import RepositorySelect from "../github/repositoryselect";
 
-
 export const RemotesImport = () => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
@@ -48,7 +47,6 @@ export const RemotesImport = () => {
     setRepo(repo)
   }
 
-
   useEffect(() => {
     console.log('OTIONS', repoOtions)
   },[repoOtions])
@@ -77,8 +75,6 @@ export const RemotesImport = () => {
         <input placeholder="remote name" name='remotename' onChange={e => onRemoteNameChange(e.target.value)} value={remoteName} className="form-control mb-2" type="text" id="remotename" />
         : null}
 
-
-
       {repo && remoteName ?
         <button data-id='clonebtn' className='btn btn-primary mt-1 w-100' onClick={async () => {
           await addRemote()
@@ -88,4 +84,3 @@ export const RemotesImport = () => {
   )
 }
 
-

libs/remix-ui/git/src/components/panels/settings.tsx

@@ -8,7 +8,6 @@ import { useIntl, FormattedMessage } from "react-intl";
 import { CopyToClipboard } from "@remix-ui/clipboard";
 import { FormControl, InputGroup } from "react-bootstrap";
 
-
 export const Settings = () => {
 
   const [githubToken, setGithubToken] = React.useState('')
@@ -18,8 +17,6 @@ export const Settings = () => {
 
   const gitAccessTokenLink = 'https://github.com/settings/tokens/new?scopes=gist,repo&description=Remix%20IDE%20Token'
 
-
-
   function handleChangeTokenState(e: string): void {
     throw new Error("Function not implemented.");
   }
@@ -40,7 +37,6 @@ export const Settings = () => {
     throw new Error("Function not implemented.");
   }
 
-
   return (
     <>
       <input name='githubToken' onChange={e => handleChangeUserNameState(e.target.value)} value={githubToken} className="form-control mb-2" placeholder="GitHub token" type="text" id="githubToken" />

libs/remix-ui/git/src/components/panels/sourcontrol.tsx

@@ -10,7 +10,6 @@ export const SourceControl = () => {
   const pluginactions = React.useContext(pluginActionsContext)
   const [show, setShow] = useState(false)
 
-
   useEffect(() => {
     if (context.fileStatusResult) {
       console.log(context)

libs/remix-ui/git/src/lib/fileHelpers.ts

@@ -28,10 +28,8 @@ export const getFilesByStatus = (status: string, files: fileStatusResult[]): fil
 export const getFilesWithNotModifiedStatus = (files: fileStatusResult[]): fileStatusResult[] => {
   const result: fileStatusResult[] = []
 
-
   files.map((m) => {
 
-
     if (m.statusNames !== undefined) {
       if (m.statusNames && m.statusNames.indexOf("unmodified") === -1) {
         result.push(m)
@@ -50,7 +48,6 @@ export const allChangedButNotStagedFiles = (files: fileStatusResult[]): fileStat
   return allfiles;
 }
 
-
 export const getFileStatusForFile = (filename: string, files: fileStatusResult[]) => {
   for (let i: number = 0; i < files.length; i++) {
     if (files[i].filename === filename)

libs/remix-ui/git/src/lib/gitactions.ts

@@ -147,7 +147,6 @@ export const showCurrentBranch = async () => {
     const branch = await currentBranch();
     const currentcommitoid = await getCommitFromRef("HEAD");
 
-
     if (typeof branch === "undefined" || branch.name === "") {
       //toast.warn(`You are in a detached state`);
       plugin.call('notification', 'alert', {
@@ -288,7 +287,6 @@ export const add = async (args: string | undefined) => {
   }
 }
 
-
 const getLastCommmit = async () => {
   try {
     let currentcommitoid = "";
@@ -299,7 +297,6 @@ const getLastCommmit = async () => {
   }
 }
 
-
 export const rm = async (args: any) => {
   const filename = args;
   await plugin.call("dGitProvider", "rm", {
@@ -308,7 +305,6 @@ export const rm = async (args: any) => {
   plugin.call('notification', 'toast', `Removed ${filename} from git`)
 }
 
-
 export const checkoutfile = async (filename: string) => {
   const oid = await getLastCommmit();
   if (oid)
@@ -426,7 +422,6 @@ const tokenWarning = async () => {
   }
 }
 
-
 const parseError = async (e: any) => {
   console.log(e)
   // if message conttains 401 Unauthorized, show token warning
@@ -462,7 +457,7 @@ const parseError = async (e: any) => {
   } else if (e.toString().includes('NotFoundError') && !e.toString().includes('fetch')) {
     await plugin.call('notification', 'modal', {
       title: 'Remote branch not found',
-      message: 'The branch you are trying to fetch does not exist on the remote.\ If you have forked this branch from another branch, you may need to fetch the original branch first or publish this branch on the remote.',
+      message: 'The branch you are trying to fetch does not exist on the remote. If you have forked this branch from another branch, you may need to fetch the original branch first or publish this branch on the remote.',
       okLabel: 'OK',
       type: ModalTypes.alert
     })
@@ -484,7 +479,7 @@ export const repositories = async () => {
       let hasMoreData = true
       const per_page = 100
       while (hasMoreData) {
-        let pagedResponse = await plugin.call('dGitProvider' as any, 'repositories', { token, page: page, per_page: per_page })
+        const pagedResponse = await plugin.call('dGitProvider' as any, 'repositories', { token, page: page, per_page: per_page })
         if (pagedResponse.length < per_page) {
           hasMoreData = false
         }
@@ -520,7 +515,7 @@ export const remoteBranches = async (owner: string, repo: string) => {
       let hasMoreData = true
       const per_page = 100
       while (hasMoreData) {
-        let pagedResponse = await plugin.call('dGitProvider' as any, 'remotebranches', { token, owner, repo, page: page, per_page: per_page })
+        const pagedResponse = await plugin.call('dGitProvider' as any, 'remotebranches', { token, owner, repo, page: page, per_page: per_page })
         if (pagedResponse.length < per_page) {
           hasMoreData = false
         }
@@ -628,10 +623,8 @@ export const getGitHubUser = async () => {
   }
 }
 
-
-
 export const statusMatrix = async (filepaths: string[]) => {
-  const matrix = await plugin.call("dGitProvider", "status", { ref: "HEAD", filepaths: filepaths || ['.'] });
+  const matrix = await plugin.call("dGitProvider", "status", { ref: "HEAD", filepaths: filepaths || ['.']});
   const result = (matrix || []).map((x) => {
     return {
       filename: `/${x.shift()}`,
@@ -734,7 +727,6 @@ async function getRepoDetails(url: string) {
   return { owner, repo };
 }
 
-
 export const fetchBranch = async (branch: branch, page: number) => {
   if (!branch.remote || !branch.remote.url) return
   const token = await tokenWarning();
@@ -750,17 +742,17 @@ export const fetchBranch = async (branch: branch, page: number) => {
 }
 
 export const getBranchDifferences = async (branch: branch, remote: remote, state: gitState) => {
-  if(!remote && state){
+  if (!remote && state){
-    if(state.defaultRemote){
+    if (state.defaultRemote){
       remote = state.defaultRemote
-    }else{
+    } else {
       remote = state.remotes.find((remote: remote) => remote.remote === 'origin')
     }
-    if(!remote && state.remotes[0]){
+    if (!remote && state.remotes[0]){
       remote = state.remotes[0]
     }
   }
-  if(!remote) return
+  if (!remote) return
   try {
     console.log('compare', branch, remote)
     const branchDifference: branchDifference = await plugin.call('dGitProvider', 'compareBranches', {

libs/remix-ui/git/src/lib/listeners.ts

@@ -105,7 +105,6 @@ export const setCallBacks = (viewPlugin: ViewPlugin, gitDispatcher: React.Dispat
     await getGitConfig()
   })
 
-
   callBackEnabled = true;
 }
 
@@ -186,8 +185,6 @@ const getStorageUsed = async () => {
   }
 }
 
-
-
 export const disableCallBacks = async () => {
   callBackEnabled = false;
 }

libs/remix-ui/git/src/lib/pluginActions.ts

@@ -14,7 +14,7 @@ export const setPlugin = (p: ViewPlugin, gitDispatcher: React.Dispatch<gitAction
 }
 
 export const statusChanged = (badges: number) => {
-    if(!plugin) return
+  if (!plugin) return
   plugin.emit('statusChanged', {
     key: badges === 0 ? 'none' : badges,
     type: badges === 0 ? '' : 'success',
@@ -23,30 +23,28 @@ export const statusChanged = (badges: number) => {
 }
 
 export const openFile = async (path: string) => {
-    if(!plugin) return
+  if (!plugin) return
   await plugin.call('fileManager', 'open', path)
 }
 
 export const openDiff = async (change: commitChange) => {
   console.log('openDiff', change)
-    if(!plugin) return
+  if (!plugin) return
   plugin.call('fileManager', 'diff', change)
 }
 
 export const saveToken = async (token: string) => {
-    if(!plugin) return
+  if (!plugin) return
   await plugin.call('config', 'setAppParameter', 'settings/gist-access-token', token)
 }
 
-
 export const setFileDecorators = async (files: fileStatusResult[]) => {
 
-    if(!plugin) return
+  if (!plugin) return
   const modified = getFilesByStatus('modified', files)
   const untracked = getFilesByStatus('untracked', files)
   const unmodified = getFilesByStatus('unmodified', files)
 
-
   await setModifiedDecorator(modified)
   await setUntrackedDecorator(untracked)
   unmodified.forEach((file) => {
@@ -54,7 +52,6 @@ export const setFileDecorators = async (files: fileStatusResult[]) => {
   })
 }
 
-
 export const setModifiedDecorator = async (files: fileStatusResult[]) => {
   const decorators: fileDecoration[] = []
   for (const file of files) {
@@ -101,4 +98,3 @@ export const clearFileDecorator = async(path: string) => {
   await plugin.call('fileDecorator', 'clearFileDecorators', path)
 }
 
-

libs/remix-ui/git/src/state/gitpayload.ts

@@ -72,7 +72,6 @@ export const setGitHubAccessToken = (token: string) => {
   }
 }
 
-
 export const setLoading = (loading: boolean) => {
   return {
     type: 'SET_LOADING',

libs/remix-ui/git/src/state/gitreducer.tsx

@@ -23,8 +23,7 @@ export const gitReducer = (state: gitState = defaultGitState, action: Action): g
     }
 
   case 'FILE_STATUS_MERGE':
-            const filesStatusResults: fileStatusResult[] = action.payload
+    action.payload.map((fileStatusResult: fileStatusResult) => {
-            filesStatusResults.map((fileStatusResult: fileStatusResult) => {
       const file = state.fileStatusResult.find(stateFile => {
         return stateFile.filename === fileStatusResult.filename
       })
@@ -149,7 +148,6 @@ export const gitReducer = (state: gitState = defaultGitState, action: Action): g
 
   case 'SET_BRANCH_DIFFERENCES':
 
-
     state.branchDifferences[`${(action as setBranchDifferencesAction).payload.remote.remote}/${(action as setBranchDifferencesAction).payload.branch.name}`] = (action as setBranchDifferencesAction).payload.branchDifference
 
     return {
@@ -157,8 +155,6 @@ export const gitReducer = (state: gitState = defaultGitState, action: Action): g
       branchDifferences: { ...state.branchDifferences }
     }
 
-        case 'SET_GITHUB_ACCESS_TOKEN':
-
   case 'SET_GITHUB_USER':
     return {
       ...state,
@@ -191,26 +187,22 @@ export const gitReducer = (state: gitState = defaultGitState, action: Action): g
     }
 
   case 'SET_LOG':
-            const previousLog = [...state.log]
+    if (state.log.length > 0 && state.log[[...state.log].length - 1].message === action.payload.message) {
-            // check if the new message is the same as the last
-            if (previousLog.length > 0 && previousLog[previousLog.length - 1].message === action.payload.message) {
       return {
         ...state,
-                    log: previousLog
+        log: [...state.log]
       }
     }
     return {
       ...state,
-                log: [...previousLog, action.payload]
+      log: [...state.log, action.payload]
     }
 
-
   case 'CLEAR_LOG':
     return {
       ...state,
       log: []
     }
 
-
   }
 }

libs/remix-ui/git/src/utils/index.ts

@@ -1,3 +1,3 @@
 export const removeSlash = (s: string) => {
   return s.replace(/^\/+/, "");
-  };
+};

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