style fixes

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

@@ -2,11 +2,11 @@ import React from 'react'
 import DropdownPanel from './dropdown-panel'
 
 export const CalldataPanel = ({ calldata }) => {
-    return (
+  return (
-        <div id='calldatapanel'>
+    <div id='calldatapanel'>
-            <DropdownPanel dropdownName='Call Data' calldata={calldata || {}} />
+      <DropdownPanel dropdownName='Call Data' calldata={calldata || {}} />
-        </div>
+    </div>
-    )
+  )
 }
 
 export default CalldataPanel

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

@@ -2,11 +2,11 @@ import React from 'react'
 import DropdownPanel from './dropdown-panel'
 
 export const CallstackPanel = ({ calldata }) => {
-    return (
+  return (
-        <div id='callstackpanel'>
+    <div id='callstackpanel'>
-            <DropdownPanel dropdownName='Call Stack' calldata={calldata || {}} />
+      <DropdownPanel dropdownName='Call Stack' calldata={calldata || {}} />
-        </div>
+    </div>
-    )
+  )
 }
 
 export default CallstackPanel

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

@@ -2,11 +2,11 @@ import React from 'react'
 import { DropdownPanel } from './dropdown-panel'
 
 export const FullStoragesChanges = ({ calldata }) => {
-    return (
+  return (
-        <div id='fullstorageschangespanel'>
+    <div id='fullstorageschangespanel'>
-            <DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata || {}} />
+      <DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata || {}} />
-        </div>
+    </div>
-    )
+  )
 }
 
 export default FullStoragesChanges

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

@@ -3,17 +3,17 @@ import DropdownPanel from './dropdown-panel'
 import { default as deepequal } from 'deep-equal'
 
 export const FunctionPanel = ({ data }) => {
-    const [calldata, setCalldata] = useState(null)
+  const [calldata, setCalldata] = useState(null)
 
-    useEffect(() => {
+  useEffect(() => {
-        if (!deepequal(calldata, data)) setCalldata(data)
+    if (!deepequal(calldata, data)) setCalldata(data)
-    }, [data])
+  }, [data])
 
-    return (
+  return (
-        <div id="FunctionPanel">
+    <div id='FunctionPanel'>
-            <DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />
+      <DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />
-        </div>
+    </div>
-    )
+  )
 }
 
 export default FunctionPanel

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

@@ -2,9 +2,9 @@ import React from 'react'
 import DropdownPanel from './dropdown-panel'
 
 export const MemoryPanel = ({ calldata }) => {
-    return (
+  return (
-        <DropdownPanel  dropdownName='Memory' calldata={calldata || {}} />
+    <DropdownPanel dropdownName='Memory' calldata={calldata || {}} />
-    )
+  )
 }
 
-export default MemoryPanel
+export default MemoryPanel

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

@@ -4,59 +4,59 @@ import { extractData } from '../../utils/solidityTypeFormatter'
 import { ExtractData } from '../../types'
 
 export const SolidityLocals = ({ data, message, registerEvent, triggerEvent }) => {
-    const [calldata, setCalldata] = useState(null)
+  const [calldata, setCalldata] = useState(null)
 
-    useEffect(() => {
+  useEffect(() => {
-        data && setCalldata(data)
+    data && setCalldata(data)
-    }, [data])
+  }, [data])
 
-    const formatSelf = (key: string, data: ExtractData) => {
+  const formatSelf = (key: string, data: ExtractData) => {
-        let color = 'var(--primary)'
+    let color = 'var(--primary)'
-        if (data.isArray || data.isStruct || data.isMapping) {
+    if (data.isArray || data.isStruct || data.isMapping) {
-            color = 'var(--info)'
+      color = 'var(--info)'
-        } else if (
+    } else if (
-            data.type.indexOf('uint') === 0 ||
+      data.type.indexOf('uint') === 0 ||
-            data.type.indexOf('int') === 0 ||
+      data.type.indexOf('int') === 0 ||
-            data.type.indexOf('bool') === 0 ||
+      data.type.indexOf('bool') === 0 ||
-            data.type.indexOf('enum') === 0
+      data.type.indexOf('enum') === 0
-        ) {
+    ) {
-            color = 'var(--green)'
+      color = 'var(--green)'
-        } else if (data.type === 'string') {
+    } else if (data.type === 'string') {
-            color = 'var(--teal)'
+      color = 'var(--teal)'
-        } else if (data.self == 0x0) { // eslint-disable-line
+    } else if (data.self == 0x0) { // eslint-disable-line
-            color = 'var(--gray)'
+      color = 'var(--gray)'
-        }
+    }
-        if (data.type === 'string') {
+    if (data.type === 'string') {
-            data.self = JSON.stringify(data.self)
+      data.self = JSON.stringify(data.self)
-        }
-        return (
-            <label className='mb-0' style={{ color: data.isProperty ? 'var(--info)' : '', whiteSpace: 'pre-wrap' }}>
-                {' ' + key}:
-                <label className='mb-0' style={{ color }}>
-                    {' ' + data.self}
-                </label>
-                <label style={{ fontStyle: 'italic' }}>
-                    {data.isProperty || !data.type ? '' : ' ' + data.type}
-                </label>
-            </label>
-        )
     }
-
     return (
-        <div id='soliditylocals' data-id="solidityLocals">
+      <label className='mb-0' style={{ color: data.isProperty ? 'var(--info)' : '', whiteSpace: 'pre-wrap' }}>
-            <DropdownPanel 
+        {' ' + key}:
-                dropdownName='Solidity Locals'
+        <label className='mb-0' style={{ color }}>
-                dropdownMessage={message}
+          {' ' + data.self}
-                calldata={calldata || {}}
+        </label>
-                extractFunc={extractData}
+        <label style={{ fontStyle: 'italic' }}>
-                formatSelfFunc={formatSelf}
+          {data.isProperty || !data.type ? '' : ' ' + data.type}
-                registerEvent={registerEvent}
+        </label>
-                triggerEvent={triggerEvent}
+      </label>
-                loadMoreEvent='solidityLocalsLoadMore'
-                loadMoreCompletedEvent='solidityLocalsLoadMoreCompleted'
-            />
-        </div>
     )
+  }
+
+  return (
+    <div id='soliditylocals' data-id="solidityLocals">
+      <DropdownPanel 
+        dropdownName='Solidity Locals'
+        dropdownMessage={message}
+        calldata={calldata || {}}
+        extractFunc={extractData}
+        formatSelfFunc={formatSelf}
+        registerEvent={registerEvent}
+        triggerEvent={triggerEvent}
+        loadMoreEvent='solidityLocalsLoadMore'
+        loadMoreCompletedEvent='solidityLocalsLoadMoreCompleted'
+      />
+    </div>
+  )
 }
 
 export default SolidityLocals

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

@@ -2,11 +2,11 @@ import React from 'react'
 import DropdownPanel from './dropdown-panel'
 
 export const StackPanel = ({ calldata }) => {
-    return (
+  return (
-        <div id="stackpanel">
+    <div id='stackpanel'>
-            <DropdownPanel dropdownName='Stack' calldata={calldata || {}} />
+      <DropdownPanel dropdownName='Stack' calldata={calldata || {}} />
-        </div>
+    </div>
-    )
+  )
 }
 
-export default StackPanel
+export default StackPanel

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

@@ -2,11 +2,11 @@ import React from 'react'
 import DropdownPanel from './dropdown-panel'
 
 export const StepDetail = ({ stepDetail }) => {
-    return (
+  return (
-        <div id='stepdetail' data-id="stepdetail">
+    <div id='stepdetail' data-id='stepdetail'>
-            <DropdownPanel dropdownName='Step details' calldata={stepDetail || {}} />
+      <DropdownPanel dropdownName='Step details' calldata={stepDetail || {}} />
-        </div>
+    </div>
-    )
+  )
 }
 
-export default StepDetail
+export default StepDetail

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

@@ -2,11 +2,11 @@ import React from 'react'
 import DropdownPanel from './dropdown-panel'
 
 export const StoragePanel = ({ calldata, header }) => {
-    return (
+  return (
-        <div id='storagepanel'>
+    <div id='storagepanel'>
-            <DropdownPanel dropdownName='Storage' calldata={calldata || {}} header={header} />
+      <DropdownPanel dropdownName='Storage' calldata={calldata || {}} header={header} />
-        </div>
+    </div>
-    )
+  )
 }
 
-export default StoragePanel
+export default StoragePanel

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

@@ -17,18 +17,18 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
   })
   const [solidityState, setSolidityState] = useState({
     calldata: null,
-    message: null,
+    message: null
   })
   const [solidityLocals, setSolidityLocals] = useState({
     calldata: null,
-    message: null,
+    message: null
   })
 
   useEffect(() => {
     registerEvent && registerEvent('functionsStackUpdate', (stack) => {
       if (stack === null || stack.length === 0) return
       const functions = []
-  
+
       for (const func of stack) {
         functions.push(func.functionDefinition.name + '(' + func.inputs.join(', ') + ')')
       }
@@ -97,15 +97,15 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
   }, [registerEvent])
 
   return (
-    <div id="vmheadView" className="mt-1 px-0">
+    <div id='vmheadView' className="mt-1 px-0">
-      <div className="d-flex flex-column">
+      <div className='d-flex flex-column'>
-        <div className="w-100">
+        <div className='w-100'>
           <FunctionPanel data={functionPanel} />
           <SolidityLocals data={solidityLocals.calldata} message={solidityLocals.message} registerEvent={registerEvent} triggerEvent={triggerEvent} />
           <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
         </div>
-        <div className="w-100"><CodeListView registerEvent={registerEvent} /></div>
+        <div className='w-100'><CodeListView registerEvent={registerEvent} /></div>
-        <div className="w-100"><StepDetail stepDetail={stepDetail} /></div>
+        <div className='w-100'><StepDetail stepDetail={stepDetail} /></div>
       </div>
     </div>
   )

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

@@ -51,14 +51,14 @@ export const VmDebugger = ({ vmDebugger: { registerEvent } }) => {
   }, [registerEvent])
 
   return (
-    <div id="vmdebugger" className="px-2">
+    <div id='vmdebugger' className="px-2">
       <div>
         <StackPanel calldata={stackPanel} />
         <MemoryPanel calldata={memoryPanel} />
         <StoragePanel calldata={storagePanel.calldata} header={storagePanel.header} />
         <CallstackPanel calldata={callStackPanel} />
         <CalldataPanel calldata={calldataPanel} />
-        <ReturnValuesPanel dropdownName="Return Value" calldata={returnValuesPanel || {}} />
+        <ReturnValuesPanel dropdownName='Return Value' calldata={returnValuesPanel || {}} />
         <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
       </div>
     </div>