lint remix-ui

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

@@ -22,7 +22,7 @@ export const enum modalActionTypes {
 type ModalPayload = {
   [modalActionTypes.setModal]: AppModal
   [modalActionTypes.handleHideModal]: any
-  [modalActionTypes.setToast]: { message: string | JSX.Element, timestamp:  number }
+  [modalActionTypes.setToast]: { message: string | JSX.Element, timestamp: number }
   [modalActionTypes.handleToaster]: any,
   [modalActionTypes.processQueue]: any
 }

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,
@@ -10,7 +10,7 @@ export type appProviderContextType = {
   modal: any
 }
 
-export enum appPlatformTypes  {
+export enum appPlatformTypes {
   web = 'web',
   desktop = 'desktop'
 }

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/interface/index.ts

@@ -35,7 +35,7 @@ export interface ModalState {
     modals: AppModal[],
     toasters: {message: (string | JSX.Element), timestamp: number }[],
     focusModal: AppModal,
-    focusToaster:  {message: (string | JSX.Element), timestamp: number }
+    focusToaster: {message: (string | JSX.Element), timestamp: number }
 }
 
 export interface forceChoiceModal {

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})
@@ -56,7 +56,7 @@ export const Draggable = (props: DraggableType) => {
   const handleDragover = (event: React.DragEvent<HTMLSpanElement>) => {
     //Checks if the folder is opened
     event.preventDefault()
-    if (destination.isDirectory && !props.expandedPath.includes(destination.path) && folderToOpen !== destination.path &&  props.handleClickFolder) {
+    if (destination.isDirectory && !props.expandedPath.includes(destination.path) && folderToOpen !== destination.path && props.handleClickFolder) {
       setFolderToOpen(destination.path)
       timer && clearTimeout(timer)
       setTimer(

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/definitionProvider.ts

@@ -77,7 +77,7 @@ export class RemixDefinitionProvider implements monaco.languages.DefinitionProvi
         return pos
       }
     }
-    const lastCompilationResult = await this.props.plugin.call('codeParser', 'getLastCompilationResult')  // await this.props.plugin.call('compilerArtefacts', 'getLastCompilationResult')
+    const lastCompilationResult = await this.props.plugin.call('codeParser', 'getLastCompilationResult') // await this.props.plugin.call('compilerArtefacts', 'getLastCompilationResult')
     if (lastCompilationResult && lastCompilationResult.languageversion.indexOf('soljson') === 0 && lastCompilationResult.data) {
 
       const lineColumn = await this.props.plugin.call('codeParser', 'getLineColumnOfPosition', position)

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 = []
@@ -179,7 +177,7 @@ export class RemixHoverProvider implements monacoTypes.languages.HoverProvider {
 
       try {
         const decodedVar = await this.props.plugin.call('debugger', 'decodeStateVariable', nodeAtPosition.id)
-        if (decodedVar !== null  && decodedVar.type) {
+        if (decodedVar !== null && decodedVar.type) {
           contents.push({
             value: `STATE VARIABLE ${nodeAtPosition.name}:  ${typeof(decodedVar.value) === 'string' ? decodedVar.value : JSON.stringify(decodedVar.value, null, '\t')}`
           })

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;
@@ -52,7 +51,7 @@ export class RemixInLineCompletionProvider implements monacoTypes.languages.Inli
     }
 
     try {
-      const isActivate = await  await this.props.plugin.call('settings', 'get', 'settings/copilot/suggest/activate')
+      const isActivate = await await this.props.plugin.call('settings', 'get', 'settings/copilot/suggest/activate')
       if (!isActivate) return
     } catch (err) {
       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

@@ -7,50 +7,50 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { syncStateContext } from "./sourceControlBase";
 
 export const CommitMessage = () => {
-    const context = React.useContext(gitPluginContext)
+  const context = React.useContext(gitPluginContext)
-    const actions = React.useContext(gitActionsContext)
+  const actions = React.useContext(gitActionsContext)
-    const syncState = React.useContext(syncStateContext)
+  const syncState = React.useContext(syncStateContext)
 
-    const [message, setMessage] = useState({ value: '' })
+  const [message, setMessage] = useState({ value: '' })
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setMessage({ value: e.currentTarget.value })
+    setMessage({ value: e.currentTarget.value })
-    }
+  }
-
-    useEffect(() => {
-        if (context.fileStatusResult) {
-           console.log(context.staged.length + ' staged')
-        }
-    }, [context.fileStatusResult])
-
-    const commit = async() => {
-        if(context.staged.length === 0 && context.allchangesnotstaged.length == 0) return
-        if(context.staged.length === 0)
-            await actions.addall()
-        await actions.commit(message.value)
-    }
 
-    const commitAllowed = () => {
+  useEffect(() => {
-        return context.canCommit === false || message.value === "" || ( context.staged.length === 0 && context.allchangesnotstaged.length == 0 )
+    if (context.fileStatusResult) {
+      console.log(context.staged.length + ' staged')
     }
-
+  }, [context.fileStatusResult])
-    const commitMessagePlaceholder = () => {
+
-        if(context.currentBranch === undefined || context.currentBranch.name === "")
+  const commit = async() => {
-            return `message`
+    if (context.staged.length === 0 && context.allchangesnotstaged.length == 0) return
-        return `message ( commit on ${context.currentBranch.name} )`
+    if (context.staged.length === 0)
-    }
+      await actions.addall()
-
+    await actions.commit(message.value)
-    return (
+  }
-        <>
+
-            <div className="form-group">
+  const commitAllowed = () => {
-                <input placeholder={commitMessagePlaceholder()} data-id='commitMessage' className="form-control" type="text" onChange={handleChange} value={message.value} />
+    return context.canCommit === false || message.value === "" || ( context.staged.length === 0 && context.allchangesnotstaged.length == 0 )
-            </div>
+  }
-            {context.canCommit ? <></> : <div className='alert alert-warning'>Cannot commit in detached state! Create a new branch and check it out first or checkout main.<br></br></div>}
+
-            <button data-id='commitButton' className="btn btn-primary w-100" disabled={commitAllowed()} onClick={async () => await commit()} >
+  const commitMessagePlaceholder = () => {
-                <FontAwesomeIcon icon={faCheck} className="mr-1" />
+    if (context.currentBranch === undefined || context.currentBranch.name === "")
+      return `message`
+    return `message ( commit on ${context.currentBranch.name} )`
+  }
+
+  return (
+    <>
+      <div className="form-group">
+        <input placeholder={commitMessagePlaceholder()} data-id='commitMessage' className="form-control" type="text" onChange={handleChange} value={message.value} />
+      </div>
+      {context.canCommit ? <></> : <div className='alert alert-warning'>Cannot commit in detached state! Create a new branch and check it out first or checkout main.<br></br></div>}
+      <button data-id='commitButton' className="btn btn-primary w-100" disabled={commitAllowed()} onClick={async () => await commit()} >
+        <FontAwesomeIcon icon={faCheck} className="mr-1" />
                 Commit {syncState.commitsAhead? `+${syncState.commitsAhead.length}` : ''} {syncState.commitsBehind? `-${syncState.commitsBehind.length}` : ''}
-            </button>
+      </button>
-            <hr></hr>
+      <hr></hr>
-        </>
+    </>
-    );
+  );
 }

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
     }
@@ -67,19 +67,19 @@ const RepositorySelect = (props: RepositorySelectProps) => {
     <><Button onClick={fetchRepositories} className="w-100 mt-1">
       <i className="fab fa-github mr-1"></i>Fetch Repositories from GitHub
     </Button>
-      {
+    {
-        show ?
+      show ?
-          <Select
+        <Select
-            options={repoOtions}
+          options={repoOtions}
-            className="mt-1"
+          className="mt-1"
-            onChange={(e: any) => selectRepo(e)}
+          onChange={(e: any) => selectRepo(e)}
-            theme={selectTheme}
+          theme={selectTheme}
-            styles={selectStyles}
+          styles={selectStyles}
-            isClearable={true}
+          isClearable={true}
-            placeholder="Type to search for a repository..."
+          placeholder="Type to search for a repository..."
-            isLoading={loading}
+          isLoading={loading}
-          /> : null
+        /> : null
-      }</>
+    }</>
   );
 };
 

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,
@@ -131,73 +127,72 @@ export const GitUI = (props: IGitUi) => {
 
   return (
     <div className="m-1">
-        <gitPluginContext.Provider value={gitState}>
+      <gitPluginContext.Provider value={gitState}>
-          <loaderContext.Provider value={loaderState}>
+        <loaderContext.Provider value={loaderState}>
-            <gitActionsContext.Provider value={gitActionsProviderValue}>
+          <gitActionsContext.Provider value={gitActionsProviderValue}>
-              <pluginActionsContext.Provider value={pluginActionsProviderValue}>
+            <pluginActionsContext.Provider value={pluginActionsProviderValue}>
-                  <Accordion activeKey={activePanel} defaultActiveKey="0">
+              <Accordion activeKey={activePanel} defaultActiveKey="0">
-                    <SourceControlNavigation eventKey="0" activePanel={activePanel} callback={setActivePanel} />
+                <SourceControlNavigation eventKey="0" activePanel={activePanel} callback={setActivePanel} />
-
+
-                    <Accordion.Collapse className='bg-light' eventKey="0">
+                <Accordion.Collapse className='bg-light' eventKey="0">
-                      <>
+                  <>
-                        <SourceControlBase children={<CommitMessage/>} />
+                    <SourceControlBase children={<CommitMessage/>} />
-                        <SourceControl />
+                    <SourceControl />
-                      </>
+                  </>
-                    </Accordion.Collapse>
+                </Accordion.Collapse>
-                    <hr></hr>
+                <hr></hr>
-                    <CommandsNavigation eventKey="1" activePanel={activePanel} callback={setActivePanel} />
+                <CommandsNavigation eventKey="1" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="1">
+                <Accordion.Collapse className='bg-light' eventKey="1">
-                      <>
+                  <>
-                        <Commands></Commands>
+                    <Commands></Commands>
-                      </>
+                  </>
-                    </Accordion.Collapse>
+                </Accordion.Collapse>
-                    <hr></hr>
+                <hr></hr>
-                    <CommitsNavigation title={`COMMITS`} eventKey="3" activePanel={activePanel} callback={setActivePanel} />
+                <CommitsNavigation title={`COMMITS`} eventKey="3" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="3">
+                <Accordion.Collapse className='bg-light' eventKey="3">
-                      <>
+                  <>
-                        <Commits />
+                    <Commits />
-                      </>
+                  </>
-                    </Accordion.Collapse>
+                </Accordion.Collapse>
-                    <hr></hr>
+                <hr></hr>
-                    <BranchesNavigation eventKey="2" activePanel={activePanel} callback={setActivePanel} />
+                <BranchesNavigation eventKey="2" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="2">
+                <Accordion.Collapse className='bg-light' eventKey="2">
-                      <>
+                  <>
-                        <Branches /></>
+                    <Branches /></>
-                    </Accordion.Collapse>
+                </Accordion.Collapse>
-                    <hr></hr>
+                <hr></hr>
-                    <RemotesNavigation eventKey="5" activePanel={activePanel} callback={setActivePanel} />
+                <RemotesNavigation eventKey="5" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="5">
+                <Accordion.Collapse className='bg-light' eventKey="5">
-                      <>
+                  <>
-                        <Remotes></Remotes>
+                    <Remotes></Remotes>
-                      </>
+                  </>
-                    </Accordion.Collapse>
+                </Accordion.Collapse>
-                    <hr></hr>
+                <hr></hr>
-                    <CloneNavigation eventKey="4" activePanel={activePanel} callback={setActivePanel} />
+                <CloneNavigation eventKey="4" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="4">
+                <Accordion.Collapse className='bg-light' eventKey="4">
-                      <>
+                  <>
-                        <Clone /></>
+                    <Clone /></>
-                    </Accordion.Collapse>
+                </Accordion.Collapse>
-                    <hr></hr>
+                <hr></hr>
-                    <GitHubNavigation eventKey="7" activePanel={activePanel} callback={setActivePanel} />
+                <GitHubNavigation eventKey="7" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="7">
+                <Accordion.Collapse className='bg-light' eventKey="7">
-                      <>
+                  <>
-                        <GetDeviceCode></GetDeviceCode>
+                    <GetDeviceCode></GetDeviceCode>
-                      </>
+                  </>
-                    </Accordion.Collapse>
+                </Accordion.Collapse>
-                    <hr></hr>
+                <hr></hr>
-                    <LogNavigation eventKey="6" activePanel={activePanel} callback={setActivePanel} />
+                <LogNavigation eventKey="6" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="6">
+                <Accordion.Collapse className='bg-light' eventKey="6">
-                      <>
+                  <>
-                        <LogViewer/>
+                    <LogViewer/>
-                      </>
+                  </>
-                    </Accordion.Collapse>
+                </Accordion.Collapse>
-
+
-
+              </Accordion>
-                  </Accordion>
+            </pluginActionsContext.Provider>
-              </pluginActionsContext.Provider>
+          </gitActionsContext.Provider>
-            </gitActionsContext.Provider>
+        </loaderContext.Provider>
-          </loaderContext.Provider>
+      </gitPluginContext.Provider>
-        </gitPluginContext.Provider>
     </div>
   )
 }

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

@@ -1,32 +1,32 @@
 import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, {  } from "react";
+import React, { } from "react";
 import { gitActionsContext, pluginActionsContext } from "../../state/context";
 import LoaderIndicator from "./loaderindicator";
 
-export const BranchesNavigation = ({ eventKey, activePanel, callback  }) => {
+export const BranchesNavigation = ({ eventKey, activePanel, callback }) => {
-    const pluginactions = React.useContext(pluginActionsContext)
+  const pluginactions = React.useContext(pluginActionsContext)
-    const context = React.useContext(gitActionsContext)
+  const context = React.useContext(gitActionsContext)
 
-    const handleClick = () => {
+  const handleClick = () => {
-        if (!callback) return
+    if (!callback) return
-        if (activePanel === eventKey) {
+    if (activePanel === eventKey) {
-            callback('')
+      callback('')
-        } else {
+    } else {
-            callback(eventKey)
+      callback(eventKey)
-        }
     }
-    return (
+  }
-        <>
+  return (
-            <div className={'d-flex justify-content-between pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
+    <>
-                <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+      <div className={'d-flex justify-content-between pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-                    {
+        <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-                        activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          {
-                    }
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-                    <label className="pl-1 nav form-check-label">BRANCHES</label>
+          }
-                    <LoaderIndicator></LoaderIndicator>
+          <label className="pl-1 nav form-check-label">BRANCHES</label>
-                </span>
+          <LoaderIndicator></LoaderIndicator>
-            </div>
+        </span>
-        </>
+      </div>
-    );
+    </>
+  );
 }

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

@@ -3,27 +3,27 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useContext, useEffect } from "react";
 import LoaderIndicator from "./loaderindicator";
 
-export const CloneNavigation = ({ eventKey, activePanel, callback  }) => {
+export const CloneNavigation = ({ eventKey, activePanel, callback }) => {
 
-    const handleClick = () => {
+  const handleClick = () => {
-        if (!callback) return
+    if (!callback) return
-        if (activePanel === eventKey) {
+    if (activePanel === eventKey) {
-            callback('')
+      callback('')
-        } else {
+    } else {
-            callback(eventKey)
+      callback(eventKey)
-        }
     }
-    return (
+  }
-        <>
+  return (
-            <div className={'d-flex justify-content-between pb-1  pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
+    <>
-                <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+      <div className={'d-flex justify-content-between pb-1  pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-                    {
+        <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-                        activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          {
-                    }
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-                    <label className="pl-1 nav form-check-label">CLONE</label>
+          }
-                    <LoaderIndicator></LoaderIndicator>
+          <label className="pl-1 nav form-check-label">CLONE</label>
-                </span>
+          <LoaderIndicator></LoaderIndicator>
-            </div>
+        </span>
-        </>
+      </div>
-    );
+    </>
+  );
 }

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

@@ -7,29 +7,29 @@ import { SourceControlButtons } from "../buttons/sourcecontrolbuttons";
 import LoaderIndicator from "./loaderindicator";
 
 export const CommandsNavigation = ({ eventKey, activePanel, callback }) => {
-    const pluginactions = React.useContext(pluginActionsContext)
+  const pluginactions = React.useContext(pluginActionsContext)
 
-    const handleClick = () => {
+  const handleClick = () => {
-        if (!callback) return
+    if (!callback) return
-        if (activePanel === eventKey) {
+    if (activePanel === eventKey) {
-            callback('')
+      callback('')
-        } else {
+    } else {
-            callback(eventKey)
+      callback(eventKey)
-        }
     }
+  }
 
-    return (
+  return (
-        <>
+    <>
-            <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
+      <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
-                <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-                    {
+          {
-                        activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-                    }
+          }
-                    <label className="pl-1 nav form-check-label">COMMANDS</label>
+          <label className="pl-1 nav form-check-label">COMMANDS</label>
-                    <LoaderIndicator></LoaderIndicator>
+          <LoaderIndicator></LoaderIndicator>
 
-                </span>
+        </span>
-            </div>
+      </div>
-        </>
+    </>
-    );
+  );
 }

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

@@ -4,7 +4,7 @@ import React, { useContext, useEffect } from "react";
 import { CommitSummary } from "../panels/commits/commitsummary";
 import { ReadCommitResult } from "isomorphic-git"
 
-interface CommitDetailsNavigationProps  {
+interface CommitDetailsNavigationProps {
     commit: ReadCommitResult,
     checkout: (oid: string) => void
     eventKey: string
@@ -13,24 +13,24 @@ interface CommitDetailsNavigationProps  {
 }
 
 export const CommitDetailsNavigation = (props: CommitDetailsNavigationProps) => {
-    const { commit, checkout, eventKey, activePanel, callback } = props;
+  const { commit, checkout, eventKey, activePanel, callback } = props;
-    const handleClick = () => {
+  const handleClick = () => {
-        if (!callback) return
+    if (!callback) return
-        if (activePanel === eventKey) {
+    if (activePanel === eventKey) {
-            callback('')
+      callback('')
-        } else {
+    } else {
-            callback(eventKey)
+      callback(eventKey)
-        }
     }
-    return (
+  }
-        <>
+  return (
-            <div onClick={() => handleClick()} role={'button'} className='pointer mb-2 mt-2 w-100 d-flex flex-row commit-navigation'>
+    <>
-                {
+      <div onClick={() => handleClick()} role={'button'} className='pointer mb-2 mt-2 w-100 d-flex flex-row commit-navigation'>
-                    activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+        {
-                }
+          activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+        }
 
-                <CommitSummary commit={commit} checkout={checkout}></CommitSummary>
+        <CommitSummary commit={commit} checkout={checkout}></CommitSummary>
-            </div>
+      </div>
-        </>
+    </>
-    );
+  );
 }

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

@@ -19,38 +19,37 @@ export interface CommitsNavigationProps {
 }
 
 export const CommitsNavigation = ({ eventKey, activePanel, callback, title, branch, remote }: CommitsNavigationProps) => {
-    const pluginactions = React.useContext(pluginActionsContext)
+  const pluginactions = React.useContext(pluginActionsContext)
-    const [pullEnabled, setPullEnabled] = React.useState(true)
+  const [pullEnabled, setPullEnabled] = React.useState(true)
-    const [pushEnabled, setPushEnabled] = React.useState(true)
+  const [pushEnabled, setPushEnabled] = React.useState(true)
-    const [syncEnabled, setSyncEnabled] = React.useState(false)
+  const [syncEnabled, setSyncEnabled] = React.useState(false)
-    const [fetchEnabled, setFetchEnabled] = React.useState(true)
+  const [fetchEnabled, setFetchEnabled] = React.useState(true)
-    const context = React.useContext(gitPluginContext)
+  const context = React.useContext(gitPluginContext)
-
+
-    const handleClick = () => {
+  const handleClick = () => {
-        if (!callback) return
+    if (!callback) return
-        if (activePanel === eventKey) {
+    if (activePanel === eventKey) {
-            callback('')
+      callback('')
-        } else {
+    } else {
-            callback(eventKey)
+      callback(eventKey)
-        }
     }
+  }
 
-    return (
+  return (
-        <>
+    <>
-            <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
+      <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
-                <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-                    {
+          {
-                        activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-                    }
+          }
-                    <label className="pl-1 nav form-check-label">{title}</label>
+          <label className="pl-1 nav form-check-label">{title}</label>
-                    <LoaderIndicator></LoaderIndicator>
+          <LoaderIndicator></LoaderIndicator>
-
-                </span>
 
-                <SourceControlButtons branch={branch} remote={remote}></SourceControlButtons>
+        </span>
 
+        <SourceControlButtons branch={branch} remote={remote}></SourceControlButtons>
 
-            </div>
+      </div>
-        </>
+    </>
-    );
+  );
 }

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

@@ -1,29 +1,29 @@
 import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, {  } from "react";
+import React, { } from "react";
 import { pluginActionsContext } from "../../state/context";
 
-export const GitHubNavigation = ({ eventKey, activePanel, callback  }) => {
+export const GitHubNavigation = ({ eventKey, activePanel, callback }) => {
-    const pluginactions = React.useContext(pluginActionsContext)
+  const pluginactions = React.useContext(pluginActionsContext)
 
-    const handleClick = () => {
+  const handleClick = () => {
-        if (!callback) return
+    if (!callback) return
-        if (activePanel === eventKey) {
+    if (activePanel === eventKey) {
-            callback('')
+      callback('')
-        } else {
+    } else {
-            callback(eventKey)
+      callback(eventKey)
-        }
     }
-    return (
+  }
-        <>
+  return (
-            <div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey? 'bg-light': '')}>
+    <>
-                <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+      <div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-                    {
+        <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-                        activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          {
-                    }
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-                    <label className="pl-1 nav form-check-label">GITHUB</label>
+          }
-                </span>
+          <label className="pl-1 nav form-check-label">GITHUB</label>
-            </div>
+        </span>
-        </>
+      </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
@@ -80,7 +80,7 @@ export const LogNavigation = ({ eventKey, activePanel, callback }) => {
           )}
         </span>
         {context.log && context.log.length > 0 && (
-        <FontAwesomeIcon onClick={clearLogs} className='btn btn-sm' icon={faBan}></FontAwesomeIcon>)}
+          <FontAwesomeIcon onClick={clearLogs} className='btn btn-sm' icon={faBan}></FontAwesomeIcon>)}
       </div>
     </>
   );

libs/remix-ui/git/src/components/navigation/menu/sourcecontrolmenu.tsx

@@ -5,45 +5,45 @@ import { Dropdown } from "react-bootstrap"
 import { FormattedMessage } from "react-intl"
 
 export const SourceControlMenu = () => {
-    const [showIconsMenu, hideIconsMenu] = useState<boolean>(false)
+  const [showIconsMenu, hideIconsMenu] = useState<boolean>(false)
-    return (
+  return (
-        <Dropdown id="workspacesMenuDropdown" data-id="sourceControlMenuDropdown" onToggle={() => hideIconsMenu(!showIconsMenu)} show={showIconsMenu}>
+    <Dropdown id="workspacesMenuDropdown" data-id="sourceControlMenuDropdown" onToggle={() => hideIconsMenu(!showIconsMenu)} show={showIconsMenu}>
-            <Dropdown.Toggle
+      <Dropdown.Toggle
+        onClick={() => {
+          hideIconsMenu(!showIconsMenu)
+        }}
+        as={CustomIconsToggle}
+        icon={'fas fa-bars'}
+      ></Dropdown.Toggle>
+      <Dropdown.Menu as={CustomMenu} data-id="wsdropdownMenu" className='custom-dropdown-items remixui_menuwidth' rootCloseEvent="click">
+        <Dropdown.Item key={0}>
+          <CustomTooltip
+            placement="right-start"
+            tooltipId="cloneWorkspaceTooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText={<FormattedMessage id='filePanel.workspace.clone' defaultMessage='Clone Git Repository' />}
+          >
+            <div
+              data-id='cloneGitRepository'
+              onClick={() => {
+                hideIconsMenu(!showIconsMenu)
+              }}
+              key={`cloneGitRepository-fe-ws`}
+            >
+              <span
+                id='cloneGitRepository'
+                data-id='cloneGitRepository'
                 onClick={() => {
-                    hideIconsMenu(!showIconsMenu)
+                  hideIconsMenu(!showIconsMenu)
                 }}
-                as={CustomIconsToggle}
+                className='fab fa-github pl-2'
-                icon={'fas fa-bars'}
+              >
-            ></Dropdown.Toggle>
+              </span>
-            <Dropdown.Menu as={CustomMenu} data-id="wsdropdownMenu" className='custom-dropdown-items remixui_menuwidth' rootCloseEvent="click">
+              <span className="pl-3"><FormattedMessage id='filePanel.clone' defaultMessage='Clone' /></span>
-                <Dropdown.Item key={0}>
+            </div>
-                    <CustomTooltip
+          </CustomTooltip>
-                        placement="right-start"
+        </Dropdown.Item>
-                        tooltipId="cloneWorkspaceTooltip"
+      </Dropdown.Menu>
-                        tooltipClasses="text-nowrap"
+    </Dropdown>
-                        tooltipText={<FormattedMessage id='filePanel.workspace.clone' defaultMessage='Clone Git Repository' />}
+  )
-                    >
-                        <div
-                            data-id='cloneGitRepository'
-                            onClick={() => {
-                                hideIconsMenu(!showIconsMenu)
-                            }}
-                            key={`cloneGitRepository-fe-ws`}
-                        >
-                            <span
-                                id='cloneGitRepository'
-                                data-id='cloneGitRepository'
-                                onClick={() => {
-                                    hideIconsMenu(!showIconsMenu)
-                                }}
-                                className='fab fa-github pl-2'
-                            >
-                            </span>
-                            <span className="pl-3"><FormattedMessage id='filePanel.clone' defaultMessage='Clone' /></span>
-                        </div>
-                    </CustomTooltip>
-                </Dropdown.Item>
-            </Dropdown.Menu>
-        </Dropdown>
-    )
 }

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

@@ -1,32 +1,32 @@
 import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, {  } from "react";
+import React, { } from "react";
 import { gitActionsContext, pluginActionsContext } from "../../state/context";
 import LoaderIndicator from "./loaderindicator";
 
-export const RemotesNavigation = ({ eventKey, activePanel, callback  }) => {
+export const RemotesNavigation = ({ eventKey, activePanel, callback }) => {
-    const pluginactions = React.useContext(pluginActionsContext)
+  const pluginactions = React.useContext(pluginActionsContext)
-    const context = React.useContext(gitActionsContext)
+  const context = React.useContext(gitActionsContext)
 
-    const handleClick = () => {
+  const handleClick = () => {
-        if (!callback) return
+    if (!callback) return
-        if (activePanel === eventKey) {
+    if (activePanel === eventKey) {
-            callback('')
+      callback('')
-        } else {
+    } else {
-            callback(eventKey)
+      callback(eventKey)
-        }
     }
-    return (
+  }
-        <>
+  return (
-            <div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey? 'bg-light': '')}>
+    <>
-                <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+      <div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-                    {
+        <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-                        activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          {
-                    }
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-                    <label className="pl-1 nav form-check-label">REMOTES</label>
+          }
-                    <LoaderIndicator></LoaderIndicator>
+          <label className="pl-1 nav form-check-label">REMOTES</label>
-                </span>
+          <LoaderIndicator></LoaderIndicator>
-            </div>
+        </span>
-        </>
+      </div>
-    );
+    </>
+  );
 }

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

@@ -10,33 +10,32 @@ import LoaderIndicator from "./loaderindicator";
 import { SourceControlMenu } from "./menu/sourcecontrolmenu";
 
 export const SourceControlNavigation = ({ eventKey, activePanel, callback }) => {
-    const pluginactions = React.useContext(pluginActionsContext)
+  const pluginactions = React.useContext(pluginActionsContext)
-    const context = React.useContext(gitPluginContext)
+  const context = React.useContext(gitPluginContext)
-    const handleClick = () => {
+  const handleClick = () => {
-        if (!callback) return
+    if (!callback) return
-        if (activePanel === eventKey) {
+    if (activePanel === eventKey) {
-            callback('')
+      callback('')
-        } else {
+    } else {
-            callback(eventKey)
+      callback(eventKey)
-        }
     }
+  }
 
-    return (
+  return (
-        <>
+    <>
-            <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
+      <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
-                <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-                    {
+          {
-                        activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-                    }
+          }
-                    <label className="nav pl-1 form-check-label">SOURCE CONTROL</label>
+          <label className="nav pl-1 form-check-label">SOURCE CONTROL</label>
-                    <LoaderIndicator></LoaderIndicator>
+          <LoaderIndicator></LoaderIndicator>
 
-                </span>
+        </span>
 
-                <SourceControlButtons/>
+        <SourceControlButtons/>
 
-
+      </div>
-            </div>
+    </>
-        </>
+  );
-    );
 }

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

@@ -13,43 +13,42 @@ interface SourceControlGroupNavigationProps {
     group: sourceControlGroup
 }
 
-
 export const SourceControlGroupNavigation = (props: SourceControlGroupNavigationProps) => {
-    const { eventKey, activePanel, callback, group } = props;
+  const { eventKey, activePanel, callback, group } = props;
-    const actions = React.useContext(gitActionsContext)
+  const actions = React.useContext(gitActionsContext)
-    const pluginActions = React.useContext(pluginActionsContext)
+  const pluginActions = React.useContext(pluginActionsContext)
-    const handleClick = () => {
+  const handleClick = () => {
-        if (!callback) return
+    if (!callback) return
-        if (activePanel === eventKey) {
+    if (activePanel === eventKey) {
-            callback('')
+      callback('')
-        } else {
+    } else {
-            callback(eventKey)
+      callback(eventKey)
-        }
     }
-    return (
+  }
-        <>
+  return (
-            <div className={'d-flex justify-content-between  pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
+    <>
-                <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+      <div className={'d-flex justify-content-between  pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-                    {
+        <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-                        activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          {
-                    }
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-                    <label className="pl-1 nav form-check-label">{group.name}</label>
+          }
-                </span>
+          <label className="pl-1 nav form-check-label">{group.name}</label>
-                {
+        </span>
-                    activePanel === eventKey ?
+        {
-                        <span className='d-flex justify-content-end align-items-center w-25'>
+          activePanel === eventKey ?
-                          {group.name === 'Changes' ?
+            <span className='d-flex justify-content-end align-items-center w-25'>
-                            <CustomTooltip tooltipText={<FormattedMessage id="Stage All Changes" />}>
+              {group.name === 'Changes' ?
-                                <button onClick={async () => { await actions.addall() }} className='btn btn-sm'><FontAwesomeIcon icon={faPlus} className="" /></button>
+                <CustomTooltip tooltipText={<FormattedMessage id="Stage All Changes" />}>
-                            </CustomTooltip>: null}
+                  <button onClick={async () => { await actions.addall() }} className='btn btn-sm'><FontAwesomeIcon icon={faPlus} className="" /></button>
-                            {group.name === 'Staged' ?
+                </CustomTooltip>: null}
-                            <CustomTooltip tooltipText={<FormattedMessage id="Unstage All Changes" />}>
+              {group.name === 'Staged' ?
-                                <button onClick={async () => { await pluginActions.loadFiles() }} className='btn btn-sm'><FontAwesomeIcon icon={faMinus} className="" /></button>
+                <CustomTooltip tooltipText={<FormattedMessage id="Unstage All Changes" />}>
-                            </CustomTooltip>: null}
+                  <button onClick={async () => { await pluginActions.loadFiles() }} className='btn btn-sm'><FontAwesomeIcon icon={faMinus} className="" /></button>
+                </CustomTooltip>: null}
 
-                        </span> : null
+            </span> : null
-                }
+        }
-            </div>
+      </div>
-        </>
+    </>
-    );
+  );
 }

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

@@ -8,52 +8,52 @@ import { LocalBranchDetails } from "./branches/localbranchdetails";
 import { RemoteBranchDetails } from "./branches/remotebranchedetails";
 
 export const Branches = () => {
-    const context = React.useContext(gitPluginContext)
+  const context = React.useContext(gitPluginContext)
-    const actions = React.useContext(gitActionsContext)
+  const actions = React.useContext(gitActionsContext)
-    const [newBranch, setNewBranch] = useState({ value: "" });
+  const [newBranch, setNewBranch] = useState({ value: "" });
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setNewBranch({ value: e.currentTarget.value });
+    setNewBranch({ value: e.currentTarget.value });
-    };
+  };
 
-    const checkout = async (oid: string, remote: remote) => {
+  const checkout = async (oid: string, remote: remote) => {
-        try {
+    try {
-            actions.checkout({ ref: oid, remote: remote.remote });
+      actions.checkout({ ref: oid, remote: remote.remote });
-        } catch (e) {
+    } catch (e) {
-            // do nothing
+      // do nothing
-        }
+    }
-    };
+  };
-    return (
+  return (
-        <>
+    <>
-            <div className="pt-1">
+      <div className="pt-1">
-                {context.branches && context.branches.length ?
+        {context.branches && context.branches.length ?
-                    <div>
+          <div>
-                        {context.branches && context.branches.filter((branch, index) => !branch.remote).map((branch, index) => {
+            {context.branches && context.branches.filter((branch, index) => !branch.remote).map((branch, index) => {
-                            return (
+              return (
-                                <LocalBranchDetails key={index} branch={branch}></LocalBranchDetails>
+                <LocalBranchDetails key={index} branch={branch}></LocalBranchDetails>
-                            );
+              );
-                        })}
+            })}
-                        <hr />
+            <hr />
-                        <label>create branch</label>
+            <label>create branch</label>
-                        <div className="form-group">
+            <div className="form-group">
 
-                            <input
+              <input
-                                placeholder="branch name"
+                placeholder="branch name"
-                                onChange={handleChange}
+                onChange={handleChange}
-                                className="form-control w-md-25 w-100"
+                className="form-control w-md-25 w-100"
-                                type="text"
+                type="text"
-                                id="newbranchname"
+                id="newbranchname"
-                            />
+              />
-                        </div>
-                        <GitUIButton
-                            onClick={async () => actions.createBranch(newBranch.value)}
-                            className="btn w-md-25 w-100 btn-primary"
-                            id="createbranch-btn"
-                        >
-                            create new branch
-                        </GitUIButton>
-                    </div> : <div className="text-muted">No branches</div>}
             </div>
-        </>
+            <GitUIButton
-    );
+              onClick={async () => actions.createBranch(newBranch.value)}
+              className="btn w-md-25 w-100 btn-primary"
+              id="createbranch-btn"
+            >
+                            create new branch
+            </GitUIButton>
+          </div> : <div className="text-muted">No branches</div>}
+      </div>
+    </>
+  );
 }

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

@@ -25,16 +25,16 @@ export const BranchDifferenceDetails = (props: BrancheDifferenceProps) => {
   }
 
   return (
-  <Accordion activeKey={activePanel} defaultActiveKey="">
+    <Accordion activeKey={activePanel} defaultActiveKey="">
-    <CommitsNavigation branch={branch} remote={remote} title={title} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
+      <CommitsNavigation branch={branch} remote={remote} title={title} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
-    <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
+      <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
-    <div className="ml-1">
+        <div className="ml-1">
-      {commits && commits.map((commit, index) => {
+          {commits && commits.map((commit, index) => {
-        return (
+            return (
-          <CommitDetails getCommitChanges={getCommitChanges} key={index} checkout={()=>{}} commit={commit}></CommitDetails>
+              <CommitDetails getCommitChanges={getCommitChanges} key={index} checkout={()=>{}} commit={commit}></CommitDetails>
-        );
+            );
-      })}
+          })}
-    </div>
+        </div>
-    </Accordion.Collapse>
+      </Accordion.Collapse>
-  </Accordion>)
+    </Accordion>)
 }

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

@@ -32,16 +32,16 @@ export const BranchDifferences = (props: BrancheDetailsProps) => {
 
   return (
     <>
-        {!showSummary && context.remotes.map((remote, index) => {
+      {!showSummary && context.remotes.map((remote, index) => {
-          return (
+        return (
-            <div key={index}>
+          <div key={index}>
-                <BranchDifferenceDetails branch={branch} remote={remote} title={`ahead of ${remote.remote} by ${commitsAhead(remote).length} commit(s)`} commits={commitsAhead(remote)}></BranchDifferenceDetails>
+            <BranchDifferenceDetails branch={branch} remote={remote} title={`ahead of ${remote.remote} by ${commitsAhead(remote).length} commit(s)`} commits={commitsAhead(remote)}></BranchDifferenceDetails>
-                <BranchDifferenceDetails branch={branch} remote={remote} title={`behind ${remote.remote} by ${commitsBehind(remote).length} commit(s)`} commits={commitsBehind(remote)}></BranchDifferenceDetails>
+            <BranchDifferenceDetails branch={branch} remote={remote} title={`behind ${remote.remote} by ${commitsBehind(remote).length} commit(s)`} commits={commitsBehind(remote)}></BranchDifferenceDetails>
-                {commitsAhead(remote).length === 0 && commitsBehind(remote).length === 0? null: <hr></hr>}
+            {commitsAhead(remote).length === 0 && commitsBehind(remote).length === 0? null: <hr></hr>}
-            </div>
+          </div>
-          );
+        );
-        })}
+      })}
-        {showSummary && <div>summary</div>}
+      {showSummary && <div>summary</div>}
 
     </>
   );

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

@@ -28,12 +28,10 @@ export const LocalBranchDetails = (props: BrancheDetailsProps) => {
       console.log('GET BRANCH COMMITS', branch)
       if (lastPageNumber === 0)
         actions.getBranchCommits(branch, 1)
-        actions.getBranchDifferences(branch, null, context)
+      actions.getBranchDifferences(branch, null, context)
     }
   }, [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

@@ -9,89 +9,86 @@ import { RemixUiCheckbox } from "@remix-ui/checkbox";
 import GitUIButton from "../buttons/gituibutton";
 
 export const Clone = () => {
-    const context = React.useContext(gitPluginContext)
+  const context = React.useContext(gitPluginContext)
-    const actions = React.useContext(gitActionsContext)
+  const actions = React.useContext(gitActionsContext)
-    const [cloneUrl, setCloneUrl] = useLocalStorage(
+  const [cloneUrl, setCloneUrl] = useLocalStorage(
-        "CLONE_URL",
+    "CLONE_URL",
-        ''
+    ''
-    );
+  );
-
+
-    const [cloneDepth, setCloneDepth] = useLocalStorage(
+  const [cloneDepth, setCloneDepth] = useLocalStorage(
-        "CLONE_DEPTH",
+    "CLONE_DEPTH",
-        1
+    1
-    );
+  );
-
+
-    const [cloneBranch, setCloneBranch] = useLocalStorage(
+  const [cloneBranch, setCloneBranch] = useLocalStorage(
-        "CLONE_BRANCH",
+    "CLONE_BRANCH",
-        ''
+    ''
-    );
+  );
-
+
-    const [url, setUrl] = useLocalStorage(
+  const [url, setUrl] = useLocalStorage(
-        "GITHUB_URL",
+    "GITHUB_URL",
-        ''
+    ''
-    );
+  );
-
+
-
+  const clone = async () => {
-    const clone = async () => {
+    await actions.clone(cloneUrl, cloneBranch, cloneDepth, !cloneAllBranches)
-        await actions.clone(cloneUrl, cloneBranch, cloneDepth, !cloneAllBranches)
+  }
-    }
+
-
+  const onCloneBranchChange = (value: string) => {
-    const onCloneBranchChange = (value: string) => {
+    setCloneBranch(value)
-        setCloneBranch(value)
+  }
-    }
+
-
+  const onGitHubCloneUrlChange = (value: string) => {
-    const onGitHubCloneUrlChange = (value: string) => {
+    setCloneUrl(value)
-        setCloneUrl(value)
+  }
-    }
+
-
+  const onDepthChange = (value: number) => {
-    const onDepthChange = (value: number) => {
+    setCloneDepth(value)
-        setCloneDepth(value)
+  }
-    }
+
-
+  const [cloneAllBranches, setcloneAllBranches] = useLocalStorage(
-    const [cloneAllBranches, setcloneAllBranches] = useLocalStorage(
+    "GITHUB_CLONE_ALL_BRANCES",
-        "GITHUB_CLONE_ALL_BRANCES",
+    false
-        false
+  );
-    );
+
-
+  const onAllBranchChange = () => {
-    const onAllBranchChange = () => {
+    setcloneAllBranches((e: any) => !e)
-        setcloneAllBranches((e: any) => !e)
+  }
-    }
+
-
+  return (
-    return (
+    <>
-        <>
+      <InputGroup className="mb-1">
-            <InputGroup className="mb-1">
+        <FormControl id="cloneulr" placeholder="url" name='cloneurl' value={cloneUrl} onChange={e => onGitHubCloneUrlChange(e.target.value)} aria-describedby="urlprepend" />
-                <FormControl id="cloneulr" placeholder="url" name='cloneurl' value={cloneUrl} onChange={e => onGitHubCloneUrlChange(e.target.value)} aria-describedby="urlprepend" />
+      </InputGroup>
-            </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 () => {
-            <input name='clonebranch' onChange={e => onCloneBranchChange(e.target.value)} value={cloneBranch} className="form-control mb-1 mt-2" placeholder="branch" type="text" id="clonebranch" />
+        clone()
-            <GitUIButton disabledCondition={!cloneUrl || !cloneBranch} data-id='clonebtn' className='btn btn-primary mt-1 w-100' onClick={async () => {
+      }}>clone</GitUIButton>
-                clone()
+      <hr />
-            }}>clone</GitUIButton>
+      <SelectAndCloneRepositories cloneAllBranches={cloneAllBranches} cloneDepth={cloneDepth} />
-            <hr />
+      <hr />
-            <SelectAndCloneRepositories cloneAllBranches={cloneAllBranches} cloneDepth={cloneDepth} />
+      <label>options</label>
-            <hr />
+      <InputGroup className="mt-1 mb-1">
-            <label>options</label>
+        <InputGroup.Prepend>
-            <InputGroup className="mt-1 mb-1">
+          <InputGroup.Text id="clonedepthprepend">
-                <InputGroup.Prepend>
-                    <InputGroup.Text id="clonedepthprepend">
                         --depth
-                    </InputGroup.Text>
+          </InputGroup.Text>
-                </InputGroup.Prepend>
+        </InputGroup.Prepend>
-                <FormControl id="clonedepth" type="number" value={cloneDepth} onChange={e => onDepthChange(parseInt(e.target.value))} aria-describedby="clonedepthprepend" />
+        <FormControl id="clonedepth" type="number" value={cloneDepth} onChange={e => onDepthChange(parseInt(e.target.value))} aria-describedby="clonedepthprepend" />
-            </InputGroup>
+      </InputGroup>
-
+
-            <RemixUiCheckbox
+      <RemixUiCheckbox
-                id={`cloneAllBranches`}
+        id={`cloneAllBranches`}
-                inputType="checkbox"
+        inputType="checkbox"
-                name="cloneAllBranches"
+        name="cloneAllBranches"
-                label={`Clone all branches`}
+        label={`Clone all branches`}
-                onClick={() => onAllBranchChange()}
+        onClick={() => onAllBranchChange()}
-                checked={cloneAllBranches}
+        checked={cloneAllBranches}
-                onChange={() => { }}
+        onChange={() => { }}
-            />
+      />
-
+
-
+      <hr></hr>
-            <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,51 +8,50 @@ 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 [hasNextPage, setHasNextPage] = React.useState(true)
-    const context = React.useContext(gitPluginContext)
+  const context = React.useContext(gitPluginContext)
-    const actions = React.useContext(gitActionsContext)
+  const actions = React.useContext(gitActionsContext)
-
-    const checkout = async (oid: string) => {
-        try {
-            //await ModalRef.current?.show();
-            actions.checkout({ ref: oid })
-            //Utils.log("yes");
-        } catch (e) {
-            //Utils.log("no");
-        }
-    };
 
-    const loadNextPage = () => {
+  const checkout = async (oid: string) => {
-        console.log('LOAD NEXT PAGE', context.commits.length)
+    try {
-        actions.fetch(null, context.currentBranch.name, null, 5, true, true)
+      //await ModalRef.current?.show();
-        //actions.getBranchCommits(branch, lastPageNumber+1)
+      actions.checkout({ ref: oid })
+      //Utils.log("yes");
+    } catch (e) {
+      //Utils.log("no");
     }
+  };
 
-    const getCommitChanges = async (commit: ReadCommitResult) => {
+  const loadNextPage = () => {
-        await actions.getCommitChanges(commit.oid, commit.commit.parent[0])
+    console.log('LOAD NEXT PAGE', context.commits.length)
-    }
+    actions.fetch(null, context.currentBranch.name, null, 5, true, true)
+    //actions.getBranchCommits(branch, lastPageNumber+1)
+  }
 
-    const fetchIsDisabled = () => {
+  const getCommitChanges = async (commit: ReadCommitResult) => {
-        return (!context.upstream)|| context.remotes.length === 0
+    await actions.getCommitChanges(commit.oid, commit.commit.parent[0])
-    }
+  }
+
+  const fetchIsDisabled = () => {
+    return (!context.upstream)|| context.remotes.length === 0
+  }
 
-    return (
+  return (
-        <>
+    <>
-            {context.commits && context.commits.length ?
+      {context.commits && context.commits.length ?
-                <><BranchDifferences branch={context.currentBranch}></BranchDifferences><div>
+        <><BranchDifferences branch={context.currentBranch}></BranchDifferences><div>
-                    <div className="pt-1">
+          <div className="pt-1">
-                        {context.commits && context.commits.map((commit, index) => {
+            {context.commits && context.commits.map((commit, index) => {
-                            return (
+              return (
-                                <CommitDetails getCommitChanges={getCommitChanges} key={index} checkout={checkout} commit={commit}></CommitDetails>
+                <CommitDetails getCommitChanges={getCommitChanges} key={index} checkout={checkout} commit={commit}></CommitDetails>
-                            );
+              );
-                        })}
+            })}
-                    </div>
+          </div>
-                </div>
+        </div>
-                    {hasNextPage && <GitUIButton disabledCondition={fetchIsDisabled()} className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
+        {hasNextPage && <GitUIButton disabledCondition={fetchIsDisabled()} className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
-                </>
-                : <div className="text-muted">No commits</div>}
         </>
-    )
+        : <div className="text-muted">No commits</div>}
+    </>
+  )
 }

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

@@ -25,10 +25,9 @@ export const CommitDetailsItems = (props: CCommitDetailsItemsProps) => {
     const status = commitChange.type
     return (<>
 
-        {status && status.indexOf("modified") === -1 ? <></> : <span>M</span>}
+      {status && status.indexOf("modified") === -1 ? <></> : <span>M</span>}
-        {status && status.indexOf("deleted") === -1 ? <></> : <span>D</span>}
+      {status && status.indexOf("deleted") === -1 ? <></> : <span>D</span>}
-        {status && status.indexOf("added") === -1 ? <></> : <span>A</span>}
+      {status && status.indexOf("added") === -1 ? <></> : <span>A</span>}
-
 
     </>)
   }

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

@@ -21,10 +21,10 @@ export const CommitSummary = (props: CommitSummaryProps) => {
         return "today at " + dateFormat(timestamp * 1000, "HH:MM");
       } else
 
-        if (diff < 1) {
+      if (diff < 1) {
-          // return how many hours ago
+        // return how many hours ago
-          return `${Math.floor(diff * 24)} hour(s) ago`;
+        return `${Math.floor(diff * 24)} hour(s) ago`;
-        }
+      }
 
       if (diff < 7) {
         // return how many days ago
@@ -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 :
@@ -36,19 +34,18 @@ export const GitHubAuth = () => {
       }
       {
         (context.gitHubUser && context.gitHubUser.login) ?
-        <div className="pt-2">
+          <div className="pt-2">
-          <Card>
+            <Card>
-            <Card.Body>
+              <Card.Body>
-              <Card.Title>Connected as {context.gitHubUser.login}</Card.Title>
+                <Card.Title>Connected as {context.gitHubUser.login}</Card.Title>
-              <Card.Text>
+                <Card.Text>
-                <img src={context.gitHubUser.avatar_url} className="w-100" />
+                  <img src={context.gitHubUser.avatar_url} className="w-100" />
-                <a target="_blank" href={context.gitHubUser.html_url}>{context.gitHubUser.html_url}</a>
+                  <a target="_blank" href={context.gitHubUser.html_url}>{context.gitHubUser.html_url}</a>
-              </Card.Text>
+                </Card.Text>
-            </Card.Body>
+              </Card.Body>
-          </Card>
+            </Card>
-        </div>: null
+          </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/log.tsx

@@ -7,16 +7,16 @@ const LogViewer = () => {
 
   const typeToCssClass = (type: string) => {
     switch (type) {
-      case 'error':
+    case 'error':
-        return 'text-danger';
+      return 'text-danger';
-      case 'warning':
+    case 'warning':
-        return 'text-warning';
+      return 'text-warning';
-      case 'info':
+    case 'info':
-        return 'text-info';
+      return 'text-info';
-      case 'debug':
+    case 'debug':
-        return 'text-secondary';
+      return 'text-secondary';
-      default:
+    default:
-        return 'text-success';
+      return 'text-success';
     }
   };
 

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/sourcecontrol/sourcecontrolitem.tsx

@@ -45,10 +45,10 @@ export const SourceControlItem = (props: SourceControlItemProps) => {
 
     return (<>
 
-        {status && status.indexOf("modified") === -1 ? <></> : <div>M</div>}
+      {status && status.indexOf("modified") === -1 ? <></> : <div>M</div>}
-        {status && status.indexOf("deleted") === -1 ? <></> : <span>D</span>}
+      {status && status.indexOf("deleted") === -1 ? <></> : <span>D</span>}
-        {status && status.indexOf("added") === -1 ? <></> : <span>A</span>}
+      {status && status.indexOf("added") === -1 ? <></> : <span>A</span>}
-        {status && status.indexOf("untracked") === -1 ? <></> : <span>U</span>}
+      {status && status.indexOf("untracked") === -1 ? <></> : <span>U</span>}
     </>)
 
   }

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

@@ -5,54 +5,53 @@ import { sourceControlGroup } from '../../types'
 import { SourceControGroup } from './sourcecontrol/sourcecontrolgroup'
 
 export const SourceControl = () => {
-    const context = React.useContext(gitPluginContext)
+  const context = React.useContext(gitPluginContext)
-    const actions = React.useContext(gitActionsContext)
+  const actions = React.useContext(gitActionsContext)
-    const pluginactions = React.useContext(pluginActionsContext)
+  const pluginactions = React.useContext(pluginActionsContext)
-    const [show, setShow] = useState(false)
+  const [show, setShow] = useState(false)
-
+
-
+  useEffect(() => {
-    useEffect(() => {
+    if (context.fileStatusResult) {
-        if (context.fileStatusResult) {
+      console.log(context)
-            console.log(context)
+      const total = context.allchangesnotstaged.length
-            const total = context.allchangesnotstaged.length
+      const badges = total + context.staged.length
-            const badges = total + context.staged.length
+      pluginactions.statusChanged(badges)
-            pluginactions.statusChanged(badges)
+      //console.log("allchangesnotstaged", context.allchangesnotstaged, context.fileStatusResult)
-            //console.log("allchangesnotstaged", context.allchangesnotstaged, context.fileStatusResult)
+      setShow((context.deleted.length > 0 || context.staged.length > 0 || context.untracked.length > 0 || context.modified.length > 0))
-            setShow((context.deleted.length > 0 || context.staged.length > 0 || context.untracked.length > 0 || context.modified.length > 0))
-        }
-    }, [context.fileStatusResult, context.modified, context.allchangesnotstaged, context.untracked, context.deleted])
-
-    useEffect(() => {
-        if (context.commits) {
-            console.log("SC commits", context.localCommitCount, context.currentBranch)
-        }
-    }, [context.localCommitCount, context.currentBranch])
-
-    function RenderGroups() {
-        const groups: sourceControlGroup[] = [{ name: 'Staged', group: context.staged }, { name: 'Changes', group: context.allchangesnotstaged }]
-        return (<>
-            {
-                groups.map((ob: sourceControlGroup, index: number) => {
-                    return (
-                        <SourceControGroup key={index} group={ob}></SourceControGroup>
-                    )
-                })
-            }
-
-        </>)
     }
+  }, [context.fileStatusResult, context.modified, context.allchangesnotstaged, context.untracked, context.deleted])
 
-    return (
+  useEffect(() => {
+    if (context.commits) {
+      console.log("SC commits", context.localCommitCount, context.currentBranch)
+    }
+  }, [context.localCommitCount, context.currentBranch])
+
+  function RenderGroups() {
+    const groups: sourceControlGroup[] = [{ name: 'Staged', group: context.staged }, { name: 'Changes', group: context.allchangesnotstaged }]
+    return (<>
+      {
+        groups.map((ob: sourceControlGroup, index: number) => {
+          return (
+            <SourceControGroup key={index} group={ob}></SourceControGroup>
+          )
+        })
+      }
+
+    </>)
+  }
+
+  return (
+    <>
+      {show ?
         <>
-            {show ?
+          <div>
-                <>
+            <RenderGroups></RenderGroups>
-                    <div>
+          </div></>
-                        <RenderGroups></RenderGroups>
+        : <>
-                    </div></>
+
-                : <>
+        </>}
-
+    </>
-                </>}
+  );
-        </>
-    );
 
 }

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

@@ -1,59 +1,56 @@
 import { fileStatusResult, gitState } from "../types";
 
 export const getFilesCountByStatus = (status: string, files: fileStatusResult[]) => {
-    let count = 0;
+  let count = 0;
-
+
-    files.map((m) => {
+  files.map((m) => {
-        if (m.statusNames !== undefined) {
+    if (m.statusNames !== undefined) {
-            if (m.statusNames && m.statusNames.indexOf(status) > -1) {
+      if (m.statusNames && m.statusNames.indexOf(status) > -1) {
-                count++;
+        count++;
-            }
+      }
-        }
+    }
-    });
+  });
-    return count;
+  return count;
 }
 
 export const getFilesByStatus = (status: string, files: fileStatusResult[]): fileStatusResult[] => {
-    const result: fileStatusResult[] = []
+  const result: fileStatusResult[] = []
-    files.map((m) => {
+  files.map((m) => {
-        if (m.statusNames !== undefined) {
+    if (m.statusNames !== undefined) {
-            if (m.statusNames && m.statusNames.indexOf(status) > -1) {
+      if (m.statusNames && m.statusNames.indexOf(status) > -1) {
-                result.push(m)
+        result.push(m)
-            }
+      }
-        }
+    }
-    });
+  });
-    return result;
+  return result;
 }
 
 export const getFilesWithNotModifiedStatus = (files: fileStatusResult[]): fileStatusResult[] => {
-    const result: fileStatusResult[] = []
+  const result: fileStatusResult[] = []
-
 
-    files.map((m) => {
+  files.map((m) => {
 
-
+    if (m.statusNames !== undefined) {
-        if (m.statusNames !== undefined) {
+      if (m.statusNames && m.statusNames.indexOf("unmodified") === -1) {
-            if (m.statusNames && m.statusNames.indexOf("unmodified") === -1) {
+        result.push(m)
-                result.push(m)
+      }
-            }
+    }
-        }
+  });
-    });
+  return result;
-    return result;
 }
 
 export const allChangedButNotStagedFiles = (files: fileStatusResult[]): fileStatusResult[] => {
-    let allfiles = getFilesWithNotModifiedStatus(files)
+  let allfiles = getFilesWithNotModifiedStatus(files)
-    const staged = getFilesByStatus("staged", files)
+  const staged = getFilesByStatus("staged", files)
-    allfiles = allfiles.filter((trackedFile) => {
+  allfiles = allfiles.filter((trackedFile) => {
-        return staged.findIndex((stagedFile) => stagedFile.filename === trackedFile.filename) === -1
+    return staged.findIndex((stagedFile) => stagedFile.filename === trackedFile.filename) === -1
-    })
+  })
-    return allfiles;
+  return allfiles;
 }
 
-
 export const getFileStatusForFile = (filename: string, files: fileStatusResult[]) => {
-    for (let i: number = 0; i < files.length; i++) {
+  for (let i: number = 0; i < files.length; i++) {
-        if (files[i].filename === filename)
+    if (files[i].filename === filename)
-            return files[i].statusNames;
+      return files[i].statusNames;
-    }
+  }
 }

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

@@ -10,196 +10,193 @@ let callBackEnabled: boolean = false
 let syncTimer: NodeJS.Timer = null
 
 export const setCallBacks = (viewPlugin: ViewPlugin, gitDispatcher: React.Dispatch<gitActionDispatch>, loaderDispatcher: React.Dispatch<any>) => {
-    plugin = viewPlugin
+  plugin = viewPlugin
-    gitDispatch = gitDispatcher
+  gitDispatch = gitDispatcher
-    loaderDispatch = loaderDispatcher
+  loaderDispatch = loaderDispatcher
-
+
-    setPlugin(viewPlugin, gitDispatcher)
+  setPlugin(viewPlugin, gitDispatcher)
-
+
-    plugin.on("fileManager", "fileSaved", async (file: string) => {
+  plugin.on("fileManager", "fileSaved", async (file: string) => {
-        console.log(file)
+    console.log(file)
-        loadFiles([file])
+    loadFiles([file])
-        //await synTimerStart();
+    //await synTimerStart();
-    });
+  });
-
+
-    plugin.on('dGitProvider', 'checkout' as any, async () => {
+  plugin.on('dGitProvider', 'checkout' as any, async () => {
-        await synTimerStart();
+    await synTimerStart();
-    })
+  })
-    plugin.on('dGitProvider', 'branch' as any, async () => {
+  plugin.on('dGitProvider', 'branch' as any, async () => {
-        await synTimerStart();
+    await synTimerStart();
-    })
+  })
-
+
-    plugin.on("fileManager", "fileAdded", async (e) => {
+  plugin.on("fileManager", "fileAdded", async (e) => {
-        await synTimerStart();
+    await synTimerStart();
-    });
+  });
-
+
-    plugin.on("fileManager", "fileRemoved", async (e) => {
+  plugin.on("fileManager", "fileRemoved", async (e) => {
-        await synTimerStart();
+    await synTimerStart();
-    });
+  });
-
+
-    plugin.on("fileManager", "currentFileChanged", async (e) => {
+  plugin.on("fileManager", "currentFileChanged", async (e) => {
-        console.log('current file change', e)
+    console.log('current file change', e)
-        //await synTimerStart();
+    //await synTimerStart();
-    });
+  });
-
+
-    plugin.on("fileManager", "fileRenamed", async (oldfile, newfile) => {
+  plugin.on("fileManager", "fileRenamed", async (oldfile, newfile) => {
-        await synTimerStart();
+    await synTimerStart();
-    });
+  });
-
+
-    plugin.on("filePanel", "setWorkspace", async (x: any) => {
+  plugin.on("filePanel", "setWorkspace", async (x: any) => {
-        await synTimerStart();
+    await synTimerStart();
-    });
+  });
-
+
-    plugin.on("filePanel", "deleteWorkspace" as any, async (x: any) => {
+  plugin.on("filePanel", "deleteWorkspace" as any, async (x: any) => {
-        await synTimerStart();
+    await synTimerStart();
-    });
+  });
-
+
-    plugin.on("filePanel", "renameWorkspace" as any, async (x: any) => {
+  plugin.on("filePanel", "renameWorkspace" as any, async (x: any) => {
-        await synTimerStart();
+    await synTimerStart();
-    });
+  });
-
+
-    plugin.on('dGitProvider', 'checkout', async () => {
+  plugin.on('dGitProvider', 'checkout', async () => {
-        await loadFiles();
+    await loadFiles();
-    })
+  })
-    plugin.on('dGitProvider', 'init', async () => {
+  plugin.on('dGitProvider', 'init', async () => {
-        await loadFiles();
+    await loadFiles();
-    })
+  })
-    plugin.on('dGitProvider', 'add', async () => {
+  plugin.on('dGitProvider', 'add', async () => {
-        await loadFiles();
+    await loadFiles();
-    })
+  })
-    plugin.on('dGitProvider', 'rm', async () => {
+  plugin.on('dGitProvider', 'rm', async () => {
-        await loadFiles();
+    await loadFiles();
-    })
+  })
-    plugin.on('dGitProvider', 'commit', async () => {
+  plugin.on('dGitProvider', 'commit', async () => {
-        gitDispatch(setLog({
+    gitDispatch(setLog({
-            message: 'Committed changes...',
+      message: 'Committed changes...',
-            type: 'success'
+      type: 'success'
-        }))
+    }))
-        await loadFiles();
+    await loadFiles();
-    })
+  })
-    plugin.on('dGitProvider', 'branch', async () => {
+  plugin.on('dGitProvider', 'branch', async () => {
-        gitDispatch(setLog({
+    gitDispatch(setLog({
-            message: "Created Branch",
+      message: "Created Branch",
-            type: "success"
+      type: "success"
-        }))
+    }))
-        await loadFiles();
+    await loadFiles();
-    })
+  })
-    plugin.on('dGitProvider', 'clone', async () => {
+  plugin.on('dGitProvider', 'clone', async () => {
-        gitDispatch(setLog({
+    gitDispatch(setLog({
-            message: "Cloned Repository",
+      message: "Cloned Repository",
-            type: "success"
+      type: "success"
-        }))
+    }))
-        await loadFiles();
+    await loadFiles();
-    })
+  })
-    plugin.on('manager', 'pluginActivated', async (p: Plugin) => {
+  plugin.on('manager', 'pluginActivated', async (p: Plugin) => {
-        if (p.name === 'dGitProvider') {
+    if (p.name === 'dGitProvider') {
-            getGitHubUser();
+      getGitHubUser();
-            plugin.off('manager', 'pluginActivated');
+      plugin.off('manager', 'pluginActivated');
-        }
+    }
-    })
+  })
-
+
-    plugin.on('config', 'configChanged', async () => {
+  plugin.on('config', 'configChanged', async () => {
-        await getGitConfig()
+    await getGitConfig()
-    })
+  })
-    plugin.on('settings', 'configChanged', async () => {
+  plugin.on('settings', 'configChanged', async () => {
-        await getGitConfig()
+    await getGitConfig()
-    })
+  })
-
+
-
+  callBackEnabled = true;
-    callBackEnabled = true;
 }
 
 export const getGitConfig = async () => {
-    const username = await plugin.call('settings', 'get', 'settings/github-user-name')
+  const username = await plugin.call('settings', 'get', 'settings/github-user-name')
-    const email = await plugin.call('settings', 'get', 'settings/github-email')
+  const email = await plugin.call('settings', 'get', 'settings/github-email')
-    const token = await plugin.call('settings', 'get', 'settings/gist-access-token')
+  const token = await plugin.call('settings', 'get', 'settings/gist-access-token')
-    const config = { username, email, token }
+  const config = { username, email, token }
-    gitDispatch(setGItHubToken(config.token))
+  gitDispatch(setGItHubToken(config.token))
-    return config
+  return config
 }
 
 const syncFromWorkspace = async (isLocalhost = false) => {
-    //gitDispatch(setLoading(true));
+  //gitDispatch(setLoading(true));
-    await disableCallBacks();
+  await disableCallBacks();
-    if (isLocalhost) {
+  if (isLocalhost) {
-        gitDispatch(setCanUseApp(false));
+    gitDispatch(setCanUseApp(false));
-        gitDispatch(setLoading(false));
+    gitDispatch(setLoading(false));
-        await enableCallBacks();
-        return;
-    }
-    try {
-        const workspace = await plugin.call(
-            "filePanel",
-            "getCurrentWorkspace"
-        );
-        if (workspace.isLocalhost) {
-            gitDispatch(setCanUseApp(false));
-            await enableCallBacks();
-            return
-        }
-
-        gitDispatch(setRepoName(workspace.name));
-        gitDispatch(setCanUseApp(true));
-    } catch (e) {
-        gitDispatch(setCanUseApp(false));
-    }
-    await loadFiles();
     await enableCallBacks();
+    return;
+  }
+  try {
+    const workspace = await plugin.call(
+      "filePanel",
+      "getCurrentWorkspace"
+    );
+    if (workspace.isLocalhost) {
+      gitDispatch(setCanUseApp(false));
+      await enableCallBacks();
+      return
+    }
+
+    gitDispatch(setRepoName(workspace.name));
+    gitDispatch(setCanUseApp(true));
+  } catch (e) {
+    gitDispatch(setCanUseApp(false));
+  }
+  await loadFiles();
+  await enableCallBacks();
 }
 
 export const loadFiles = async (filepaths: string[] = null) => {
-    //gitDispatch(setLoading(true));
+  //gitDispatch(setLoading(true));
-
+
-    try {
+  try {
-        await getFileStatusMatrix(filepaths);
+    await getFileStatusMatrix(filepaths);
-    } catch (e) {
+  } catch (e) {
-        // TODO: handle error
+    // TODO: handle error
-        console.error(e);
+    console.error(e);
-    }
+  }
-    try {
+  try {
-        await gitlog();
+    await gitlog();
-    } catch (e) { }
+  } catch (e) { }
-    try {
+  try {
-        await getBranches();
+    await getBranches();
-    } catch (e) { }
+  } catch (e) { }
-    try {
+  try {
-        await getRemotes();
+    await getRemotes();
-    } catch (e) { }
+  } catch (e) { }
-    try {
+  try {
-        //await getStorageUsed();
+    //await getStorageUsed();
-    } catch (e) { }
+  } catch (e) { }
-    try {
+  try {
-        //await diffFiles('');
+    //await diffFiles('');
-    } catch (e) { }
+  } catch (e) { }
-    //gitDispatch(setLoading(false));
+  //gitDispatch(setLoading(false));
 }
 
 const getStorageUsed = async () => {
-    try {
+  try {
-        const storageUsed = await plugin.call("storage" as any, "getStorage" as any);
+    const storageUsed = await plugin.call("storage" as any, "getStorage" as any);
-    } catch (e) {
+  } catch (e) {
-        const storage: string = await plugin.call("dGitProvider", "localStorageUsed" as any);
+    const storage: string = await plugin.call("dGitProvider", "localStorageUsed" as any);
-        const storageUsed = {
+    const storageUsed = {
-            usage: parseFloat(storage) * 1000,
+      usage: parseFloat(storage) * 1000,
-            quota: 10000000,
+      quota: 10000000,
-        };
+    };
-    }
+  }
 }
 
-
-
 export const disableCallBacks = async () => {
-    callBackEnabled = false;
+  callBackEnabled = false;
 }
 export const enableCallBacks = async () => {
-    callBackEnabled = true;
+  callBackEnabled = true;
 }
 
 const synTimerStart = async () => {
-    //console.trace('synTimerStart')
+  //console.trace('synTimerStart')
-    if (!callBackEnabled) return
+  if (!callBackEnabled) return
-    clearTimeout(syncTimer)
+  clearTimeout(syncTimer)
-    syncTimer = setTimeout(async () => {
+  syncTimer = setTimeout(async () => {
-        await syncFromWorkspace();
+    await syncFromWorkspace();
-    }, 1000)
+  }, 1000)
 }

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

@@ -8,97 +8,93 @@ import { getFilesByStatus, getFilesWithNotModifiedStatus } from "./fileHelpers"
 let plugin: ViewPlugin, gitDispatch: React.Dispatch<gitActionDispatch>, loaderDispatch: React.Dispatch<any>
 
 export const setPlugin = (p: ViewPlugin, gitDispatcher: React.Dispatch<gitActionDispatch>, loaderDispatcher: React.Dispatch<any>) => {
-    plugin = p
+  plugin = p
-    gitDispatch = gitDispatcher
+  gitDispatch = gitDispatcher
-    loaderDispatch = loaderDispatcher
+  loaderDispatch = loaderDispatcher
 }
 
 export const statusChanged = (badges: number) => {
-    if(!plugin) return
+  if (!plugin) return
-    plugin.emit('statusChanged', {
+  plugin.emit('statusChanged', {
-        key: badges === 0 ? 'none' : badges,
+    key: badges === 0 ? 'none' : badges,
-        type: badges === 0 ? '' : 'success',
+    type: badges === 0 ? '' : 'success',
-        title: 'Git changes'
+    title: 'Git changes'
-    })
+  })
 }
 
 export const openFile = async (path: string) => {
-    if(!plugin) return
+  if (!plugin) return
-    await plugin.call('fileManager', 'open', path)
+  await plugin.call('fileManager', 'open', path)
 }
 
 export const openDiff = async (change: commitChange) => {
-    console.log('openDiff', change)
+  console.log('openDiff', change)
-    if(!plugin) return
+  if (!plugin) return
-    plugin.call('fileManager', 'diff', change)
+  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)
+  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 modified = getFilesByStatus('modified', files)
-    const untracked = getFilesByStatus('untracked', files)
+  const untracked = getFilesByStatus('untracked', files)
-    const unmodified = getFilesByStatus('unmodified', files)
+  const unmodified = getFilesByStatus('unmodified', files)
-
 
-    await setModifiedDecorator(modified)
+  await setModifiedDecorator(modified)
-    await setUntrackedDecorator(untracked)
+  await setUntrackedDecorator(untracked)
-    unmodified.forEach((file) => {
+  unmodified.forEach((file) => {
-        clearFileDecorator(removeSlash(file.filename))
+    clearFileDecorator(removeSlash(file.filename))
-    })
+  })
 }
 
-
 export const setModifiedDecorator = async (files: fileStatusResult[]) => {
-    const decorators: fileDecoration[] = []
+  const decorators: fileDecoration[] = []
-    for (const file of files) {
+  for (const file of files) {
-        const decorator: fileDecoration = {
+    const decorator: fileDecoration = {
-            path: removeSlash(file.filename),
+      path: removeSlash(file.filename),
-            isDirectory: false,
+      isDirectory: false,
-            fileStateType: fileDecorationType.Custom,
+      fileStateType: fileDecorationType.Custom,
-            fileStateLabelClass: 'text-warning',
+      fileStateLabelClass: 'text-warning',
-            fileStateIconClass: 'text-warning',
+      fileStateIconClass: 'text-warning',
-            fileStateIcon: '',
+      fileStateIcon: '',
-            text: 'M',
+      text: 'M',
-            owner: 'git',
+      owner: 'git',
-            bubble: true,
+      bubble: true,
-            comment: 'Modified'
+      comment: 'Modified'
-        }
-        decorators.push(decorator)
     }
+    decorators.push(decorator)
+  }
 
-    await plugin.call('fileDecorator', 'setFileDecorators', decorators)
+  await plugin.call('fileDecorator', 'setFileDecorators', decorators)
 }
 
 export const setUntrackedDecorator = async (files: fileStatusResult[]) => {
-    const decorators: fileDecoration[] = []
+  const decorators: fileDecoration[] = []
-    for (const file of files) {
+  for (const file of files) {
-        const decorator: fileDecoration = {
+    const decorator: fileDecoration = {
-            path: removeSlash(file.filename),
+      path: removeSlash(file.filename),
-            isDirectory: false,
+      isDirectory: false,
-            fileStateType: fileDecorationType.Custom,
+      fileStateType: fileDecorationType.Custom,
-            fileStateLabelClass: 'text-success',
+      fileStateLabelClass: 'text-success',
-            fileStateIconClass: 'text-success',
+      fileStateIconClass: 'text-success',
-            fileStateIcon: '',
+      fileStateIcon: '',
-            text: 'U',
+      text: 'U',
-            owner: 'git',
+      owner: 'git',
-            bubble: true,
+      bubble: true,
-            comment: 'Untracked'
+      comment: 'Untracked'
-        }
-        decorators.push(decorator)
     }
+    decorators.push(decorator)
+  }
 
-    await plugin.call('fileDecorator', 'setFileDecorators', decorators)
+  await plugin.call('fileDecorator', 'setFileDecorators', decorators)
 }
 
 export const clearFileDecorator = async(path: string) => {
-    await plugin.call('fileDecorator', 'clearFileDecorators', path)
+  await plugin.call('fileDecorator', 'clearFileDecorators', path)
 }
 
-

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

@@ -2,7 +2,7 @@ import { ReadCommitResult } from "isomorphic-git"
 import React from "react"
 import { branch, commitChange, gitLog, gitState, remote } from "../types"
 
-export interface gitActions  {
+export interface gitActions {
     removeRemote(remote: remote): void
     clone(url: string, path: string, depth: number, singleBranch: boolean): Promise<void>
     add(path: string): Promise<void>
@@ -41,9 +41,9 @@ export interface pluginActions {
     openDiff(change: commitChange): Promise<void>
     saveToken(token: string): Promise<void>
     saveGitHubCredentials({
-        username,
+      username,
-        email,
+      email,
-        token
+      token
     }): Promise<void>
     getGitHubCredentials(): Promise<{
         username: string