ioedeveloper
4 years ago
parent
d50881e797
commit
b59895c966
@ -1,11 +0,0 @@ |
||||
import React from 'react'; |
||||
import { render } from '@testing-library/react'; |
||||
|
||||
import ButtonNavigation from './button-navigator'; |
||||
|
||||
describe(' ButtonNavigation', () => { |
||||
it('should render successfully', () => { |
||||
const { baseElement } = render(<ButtonNavigation />); |
||||
expect(baseElement).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,11 +0,0 @@ |
||||
import React from 'react'; |
||||
import { render } from '@testing-library/react'; |
||||
|
||||
import Slider from './slider'; |
||||
|
||||
describe(' Slider', () => { |
||||
it('should render successfully', () => { |
||||
const { baseElement } = render(<Slider />); |
||||
expect(baseElement).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,11 +0,0 @@ |
||||
import React from 'react'; |
||||
import { render } from '@testing-library/react'; |
||||
|
||||
import StepManager from './step-manager'; |
||||
|
||||
describe(' StepManager', () => { |
||||
it('should render successfully', () => { |
||||
const { baseElement } = render(<StepManager />); |
||||
expect(baseElement).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,24 @@ |
||||
.container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.txContainer { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.txinput { |
||||
width: inherit; |
||||
font-size: small; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.txbutton { |
||||
width: inherit; |
||||
} |
||||
.txbutton:hover { |
||||
} |
||||
.vmargin { |
||||
margin-top: 10px; |
||||
margin-bottom: 10px; |
||||
} |
||||
@ -0,0 +1,82 @@ |
||||
import React, { useState } from 'react' |
||||
import './tx-browser.css' |
||||
import EventManager from '../../../../../apps/remix-ide/src/lib/events' |
||||
|
||||
export const TxBrowser = () => { |
||||
const event = new EventManager() |
||||
const [state, setState] = useState({ |
||||
txNumber: undefined, |
||||
debugging: false |
||||
}) |
||||
|
||||
const handleSubmit = () => { |
||||
if (state.debugging) { |
||||
unload() |
||||
} else { |
||||
event.trigger('requestDebug', [undefined, state.txNumber]) |
||||
} |
||||
} |
||||
|
||||
const unload = () => { |
||||
event.trigger('unloadRequested', []) |
||||
} |
||||
|
||||
const updateTxN = (ev) => { |
||||
setState(prevState => { |
||||
return { |
||||
...prevState, |
||||
txNumber: ev.target.value |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const txInputChanged = (e) => { |
||||
// todo check validation of txnumber in the input element, use
|
||||
// required
|
||||
// oninvalid="setCustomValidity('Please provide a valid transaction number, must start with 0x and have length of 22')"
|
||||
// pattern="^0[x,X]+[0-9a-fA-F]{22}"
|
||||
// this.state.txNumberInput.setCustomValidity('')
|
||||
|
||||
setState(prevState => { |
||||
return { |
||||
...prevState, |
||||
txNumber: e.target.value |
||||
} |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<div className="container"> |
||||
<div className="txContainer"> |
||||
<div className="py-1 d-flex justify-content-center w-100 input-group"> |
||||
<input |
||||
value={state.txNumber || ''} |
||||
className="form-control m-0 css.txinput" |
||||
id='txinput' |
||||
onKeyUp={updateTxN} |
||||
type='text' |
||||
onInput={txInputChanged} |
||||
placeholder={'Transaction hash, should start with 0x'} |
||||
data-id="debuggerTransactionInput" |
||||
disabled={state.debugging} |
||||
/> |
||||
</div> |
||||
<div className="d-flex justify-content-center w-100 btn-group py-1"> |
||||
<button |
||||
className="btn btn-primary btn-sm txbutton" |
||||
id="load" |
||||
title={state.debugging ? 'Stop debugging' : 'Start debugging'} |
||||
onClick={handleSubmit} |
||||
data-id="debuggerTransactionStartButton" |
||||
disabled={!state.txNumber ? true : !state.debugging ? false : true } |
||||
> |
||||
{ state.debugging ? 'Stop' : 'Start' } debugging |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<span id='error'></span> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default TxBrowser |
||||
@ -0,0 +1,21 @@ |
||||
import React, { useState } from 'react' |
||||
import './styles/code-list-view.css' |
||||
import EventManager from '../../../../../apps/remix-ide/src/lib/events' |
||||
|
||||
export const VmDebugger = ({ vmDebuggerLogic }) => { |
||||
const event = new EventManager() |
||||
const [state, setState] = useState({ |
||||
code: '', |
||||
address: '', |
||||
itemSelected: null, |
||||
|
||||
}) |
||||
|
||||
return ( |
||||
<div> |
||||
<h1>Welcome to vmDebugger!</h1> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default VmDebugger |
||||
@ -0,0 +1,178 @@ |
||||
import React, { useState, useRef } from 'react' |
||||
import './styles/dropdown-panel.css' |
||||
import EventManager from '../../../../../apps/remix-ide/src/lib/events' |
||||
import TreeView from '../../../../../apps/remix-ide/src/app/ui/TreeView' |
||||
import copyToClipboard from '../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard' |
||||
|
||||
export const DropdownPanel = ({ name, opts, node }) => { |
||||
const event = new EventManager() |
||||
const treeView = new TreeView(opts) |
||||
const [state, setState] = useState({ |
||||
header: '', |
||||
json: opts.json, |
||||
displayContentOnly: opts.displayContentOnly, |
||||
toggleDropdown: false, |
||||
message: { |
||||
innerText: '', |
||||
display: 'none' |
||||
}, |
||||
dropdownContent: { |
||||
innerText: '', |
||||
display: 'none' |
||||
}, |
||||
dropdownRawContent: { |
||||
innerText: '', |
||||
display: 'none' |
||||
}, |
||||
title: { |
||||
innerText: '', |
||||
display: 'none' |
||||
}, |
||||
showRefreshIcon: false |
||||
}) |
||||
const dropdownRawEl = useRef(null) |
||||
|
||||
const handleToggle = () => { |
||||
setState(prevState => { |
||||
if (prevState.toggleDropdown) event.trigger('hide', []) |
||||
else event.trigger('show', []) |
||||
return { |
||||
...prevState, |
||||
toggleDropdown: !prevState.toggleDropdown |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const copyClipboard = () => { |
||||
return dropdownRawEl.current.innerText ? dropdownRawEl.current.innerText : dropdownRawEl.current.textContent |
||||
} |
||||
|
||||
const message = (message) => { |
||||
setState(state => { |
||||
return { |
||||
...state, |
||||
message: { |
||||
innerText: message, |
||||
display: message ? 'block' : '' |
||||
}, |
||||
dropdownRawContent: { |
||||
...state.dropdownRawContent, |
||||
display: 'none' |
||||
}, |
||||
dropdownContent: { |
||||
...state.dropdownContent, |
||||
display: 'none' |
||||
}, |
||||
showRefreshIcon: false |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const setLoading = () => { |
||||
setState(prevState => { |
||||
return { |
||||
...prevState, |
||||
message: { |
||||
innerText: '', |
||||
display: 'none' |
||||
}, |
||||
dropdownRawContent: { |
||||
...prevState.dropdownRawContent, |
||||
display: 'none' |
||||
}, |
||||
dropdownContent: { |
||||
...prevState.dropdownContent, |
||||
display: 'none' |
||||
}, |
||||
showRefreshIcon: true |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const update = function (data, header) { |
||||
setState(prevState => { |
||||
return { |
||||
...prevState, |
||||
showRefreshIcon: false, |
||||
dropdownContent: { |
||||
...prevState.dropdownContent, |
||||
display: 'none' |
||||
}, |
||||
dropdownRawContent: { |
||||
innerText: JSON.stringify(data, null, '\t'), |
||||
display: 'block' |
||||
} |
||||
} |
||||
}) |
||||
if (!this.displayContentOnly) { |
||||
// this.view.querySelector('.title i.fa-copy').style.display = 'block'
|
||||
setState(prevState => { |
||||
return { |
||||
...prevState, |
||||
title: { |
||||
innerText: header || '', |
||||
display: 'block' |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
message('') |
||||
if (state.json) { |
||||
treeView.update(data) |
||||
} |
||||
} |
||||
|
||||
const hide = () => { |
||||
setState(prevState => { |
||||
return { |
||||
...prevState, |
||||
toggleDropdown: false |
||||
} |
||||
}) |
||||
event.trigger('hide', []) |
||||
}
|
||||
|
||||
const show = () => { |
||||
setState(prevState => { |
||||
return { |
||||
...prevState, |
||||
toggleDropdown: true |
||||
} |
||||
}) |
||||
event.trigger('show', []) |
||||
} |
||||
|
||||
let content = <div>Empty</div> |
||||
if (state.json) { |
||||
content = treeView.render({}, null) |
||||
} |
||||
const title = !state.displayContentOnly ?
|
||||
<div className="py-0 px-1 title"> |
||||
<div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div> |
||||
<div className="name" onClick={handleToggle}>{name}</div><span className="nameDetail" onClick={handleToggle}></span> |
||||
{copyToClipboard(() => copyClipboard())} |
||||
</div> : <div></div> |
||||
|
||||
if (state.displayContentOnly) { |
||||
setState(prevState => { |
||||
return { |
||||
...prevState, |
||||
toggleDropdown: true |
||||
} |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<div className="border rounded px-1 mt-1 bg-light"> |
||||
{ title } |
||||
<div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}> |
||||
<i className="refresh fas fa-sync" style={{ display: state.showRefreshIcon ? 'inline-block' : 'none' }} aria-hidden="true"></i> |
||||
<div className='dropdowncontent' style={{ display: state.dropdownContent.display }}>{node || content }</div> |
||||
<div className='dropdownrawcontent' style={{ display: state.dropdownRawContent.display }} ref={ dropdownRawEl }></div> |
||||
<div className='message' style={{ display: state.message.display }}></div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default DropdownPanel |
||||
@ -0,0 +1,4 @@ |
||||
.instructions { |
||||
overflow-y: scroll; |
||||
max-height: 130px; |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
.title { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.name { |
||||
font-weight: bold; |
||||
} |
||||
.nameDetail { |
||||
font-weight: bold; |
||||
margin-left: 3px; |
||||
} |
||||
.icon { |
||||
margin-right: 5%; |
||||
} |
||||
.eyeButton { |
||||
margin: 3px; |
||||
} |
||||
.dropdownpanel { |
||||
width: 100%; |
||||
word-break: break-word; |
||||
} |
||||
.dropdownrawcontent { |
||||
padding: 2px; |
||||
word-break: break-word; |
||||
} |
||||
.message { |
||||
padding: 2px; |
||||
word-break: break-word; |
||||
} |
||||
.refresh { |
||||
display: none; |
||||
margin-left: 4px; |
||||
margin-top: 4px; |
||||
animation: spin 2s linear infinite; |
||||
} |
||||
@-moz-keyframes spin { |
||||
to { -moz-transform: rotate(359deg); } |
||||
} |
||||
@-webkit-keyframes spin { |
||||
to { -webkit-transform: rotate(359deg); } |
||||
} |
||||
@keyframes spin { |
||||
to {transform:rotate(359deg);} |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import React, { useState } from 'react'; |
||||
import './vm-debugger.css'; |
||||
|
||||
export const VmDebugger = ({ vmDebuggerLogic }) => { |
||||
const [state, setState] = useState({ |
||||
asmCode
|
||||
}) |
||||
|
||||
return ( |
||||
<div> |
||||
<h1>Welcome to vmDebugger!</h1> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default VmDebugger; |
||||
Loading…
Reference in new issue