style fixes

pull/749/head
LianaHus 4 years ago committed by ioedeveloper
parent 272c905710
commit f0dbdb9eed
  1. 10
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx
  2. 10
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx
  3. 10
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx
  4. 18
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx
  5. 8
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx
  6. 96
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx
  7. 12
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx
  8. 12
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
  9. 12
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx
  10. 16
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx
  11. 4
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx

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

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

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

@ -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(() => {
if (!deepequal(calldata, data)) setCalldata(data)
}, [data])
useEffect(() => {
if (!deepequal(calldata, data)) setCalldata(data)
}, [data])
return (
<div id="FunctionPanel">
<DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />
</div>
)
return (
<div id='FunctionPanel'>
<DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />
</div>
)
}
export default FunctionPanel

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

@ -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(() => {
data && setCalldata(data)
}, [data])
useEffect(() => {
data && setCalldata(data)
}, [data])
const formatSelf = (key: string, data: ExtractData) => {
let color = 'var(--primary)'
if (data.isArray || data.isStruct || data.isMapping) {
color = 'var(--info)'
} else if (
data.type.indexOf('uint') === 0 ||
data.type.indexOf('int') === 0 ||
data.type.indexOf('bool') === 0 ||
data.type.indexOf('enum') === 0
) {
color = 'var(--green)'
} else if (data.type === 'string') {
color = 'var(--teal)'
} else if (data.self == 0x0) { // eslint-disable-line
color = 'var(--gray)'
}
if (data.type === 'string') {
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>
)
const formatSelf = (key: string, data: ExtractData) => {
let color = 'var(--primary)'
if (data.isArray || data.isStruct || data.isMapping) {
color = 'var(--info)'
} else if (
data.type.indexOf('uint') === 0 ||
data.type.indexOf('int') === 0 ||
data.type.indexOf('bool') === 0 ||
data.type.indexOf('enum') === 0
) {
color = 'var(--green)'
} else if (data.type === 'string') {
color = 'var(--teal)'
} else if (data.self == 0x0) { // eslint-disable-line
color = 'var(--gray)'
}
if (data.type === 'string') {
data.self = JSON.stringify(data.self)
}
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>
<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">
<DropdownPanel
dropdownName='Solidity Locals'
dropdownMessage={message}
calldata={calldata || {}}
extractFunc={extractData}
formatSelfFunc={formatSelf}
registerEvent={registerEvent}
triggerEvent={triggerEvent}
loadMoreEvent='solidityLocalsLoadMore'
loadMoreCompletedEvent='solidityLocalsLoadMoreCompleted'
/>
</div>
)
}
export default SolidityLocals

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

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

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

@ -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 className="d-flex flex-column">
<div className="w-100">
<div id='vmheadView' className="mt-1 px-0">
<div className='d-flex flex-column'>
<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"><StepDetail stepDetail={stepDetail} /></div>
<div className='w-100'><CodeListView registerEvent={registerEvent} /></div>
<div className='w-100'><StepDetail stepDetail={stepDetail} /></div>
</div>
</div>
)

@ -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>

Loading…
Cancel
Save