@ -13,7 +13,9 @@ import ToggleButton from 'react-bootstrap/ToggleButton'
import Button from 'react-bootstrap/Button'
import './app.css'
import { CustomTooltip } from '@remix-ui/helper'
import { CustomTooltip } from '@remix-ui/helper'
import { Form } from 'react-bootstrap'
import { CompileErrorCard } from './components/CompileErrorCard'
interface AppState {
status : 'idle' | 'inProgress'
@ -32,10 +34,9 @@ const App = () => {
const [ state , setState ] = useState < AppState > ( {
status : 'idle' ,
environment : 'remote' ,
localUrl : 'http://localhost:8000/'
localUrl : 'http://localhost:8000/' ,
} )
useEffect ( ( ) = > {
async function start() {
try {
@ -67,6 +68,9 @@ const App = () => {
useEffect ( ( ) = > {
remixClient . eventEmitter . on ( 'setOutput' , ( payload ) = > {
if ( payload . status === 'failed' ) {
console . error ( 'Error in the compiler' , payload )
}
setOutput ( payload )
} )
@ -96,43 +100,43 @@ const App = () => {
return (
< main id = "vyper-plugin" >
< header >
< div className = "title" >
< img src = { 'assets/vyperLogo_v2.webp' } alt = "Vyper logo" / >
< h4 className = "pl-1" > yper Compiler < / h4 >
< / div >
< a rel = "noopener noreferrer" href = "https://github.com/ethereum/remix-project/tree/master/apps/vyper" target = "_blank" >
< i className = "fab fa-github" > < / i >
< / a >
< / header >
< section >
< div className = "px-3 pt-3 mb-3 w-100" >
< CustomTooltip
placement = "bottom"
tooltipText = "Clone Vyper examples. Switch to the File Explorer to see the examples."
>
< Button data - id = "add-repository" className = "w-100 text-dark bg-light btn-outline-primary " onClick = { ( ) = > remixClient . cloneVyperRepo ( ) } >
Clone Vyper examples repository
< CustomTooltip placement = "bottom" tooltipText = "Clone Vyper examples. Switch to the File Explorer to see the examples." >
< Button data - id = "add-repository" className = "w-100 btn btn-secondary" onClick = { ( ) = > remixClient . cloneVyperRepo ( ) } >
Clone Vyper examples repository
< / Button >
< / CustomTooltip >
< / div >
< ToggleButtonGroup name = "remote" className = "mb-3" onChange = { setEnvironment } type = "radio" value = { state . environment } >
< ToggleButton data - id = "remote-compiler" variant = "secondary" name = "remote" value = "remote" >
Remote Compiler
< / ToggleButton >
< ToggleButton id = "local-compiler" data - id = "local-compiler" variant = "secondary" name = "local" value = "local" >
Local Compiler
< / ToggleButton >
< / ToggleButtonGroup >
< Form >
< div className = "d-flex flex-row gap-5 mb-3 mt-2" >
< Form.Check inline data - id = "remote-compiler" type = "radio" value = { state . environment } checked = { state . environment === 'remote' } onChange = { ( ) = > setEnvironment ( 'remote' ) } label = "Remote Compiler" style = { { cursor : state.environment === 'remote' ? 'default' : 'pointer' } } className = "d-flex mr-4" / >
< Form.Check inline id = "local-compiler" data - id = "local-compiler" checked = { state . environment === 'local' } type = "radio" name = "local" value = { state . environment } onChange = { ( ) = > setEnvironment ( 'local' ) } label = "Local Compiler" style = { { cursor : state.environment === 'local' ? 'default' : 'pointer' } } / >
< / div >
< / Form >
< span className = "px-3 mt-1 mb-1 small text-warning" > Specify the compiler version & EVM version in the . vy file < / span >
< LocalUrlInput url = { state . localUrl } setUrl = { setLocalUrl } environment = { state . environment } / >
< div className = "px-3 w-100 mb-3 mt-1" id = "compile-btn" >
< CompilerButton
compilerUrl = { compilerUrl ( ) }
contract = { contract }
setOutput = { ( name , update ) = > setOutput ( { . . . output , [ name ] : update } ) }
resetCompilerState = { resetCompilerResultState }
/ >
< CompilerButton compilerUrl = { compilerUrl ( ) } contract = { contract } setOutput = { ( name , update ) = > setOutput ( { . . . output , [ name ] : update } ) } resetCompilerState = { resetCompilerResultState } / >
< / div >
< article id = "result" className = "px-2 mx-2 border-top mt-3" >
{
output && Object . keys ( output ) . length > 0 && output . status !== 'failed' ? (
< >
< VyperResult output = { output } plugin = { remixClient } / >
< / >
) : null
}
{ output && Object . keys ( output ) . length > 0 && output . status !== 'failed' ? (
< >
< VyperResult output = { output } plugin = { remixClient } / >
< / >
) : output . status === 'failed' ? (
< CompileErrorCard output = { output } / >
) : null }
< / article >
< / section >
< / main >
yann300
9 months ago
committed by
GitHub
