|
|
|
@ -13,9 +13,9 @@ import ToggleButton from 'react-bootstrap/ToggleButton' |
|
|
|
|
import Button from 'react-bootstrap/Button' |
|
|
|
|
|
|
|
|
|
import './app.css' |
|
|
|
|
import { CustomTooltip } from '@remix-ui/helper' |
|
|
|
|
import { Form } from 'react-bootstrap' |
|
|
|
|
import { CompileErrorCard } from './components/CompileErrorCard' |
|
|
|
|
import {CustomTooltip} from '@remix-ui/helper' |
|
|
|
|
import {Form} from 'react-bootstrap' |
|
|
|
|
import {CompileErrorCard} from './components/CompileErrorCard' |
|
|
|
|
|
|
|
|
|
interface AppState { |
|
|
|
|
status: 'idle' | 'inProgress' |
|
|
|
@ -34,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 { |
|
|
|
@ -104,8 +103,8 @@ const App = () => { |
|
|
|
|
<main id="vyper-plugin"> |
|
|
|
|
<header> |
|
|
|
|
<div className="title"> |
|
|
|
|
<img src={'assets/logo.svg'} alt="Vyper logo" /> |
|
|
|
|
<h4>yper Compiler</h4> |
|
|
|
|
<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> |
|
|
|
@ -113,61 +112,32 @@ const App = () => { |
|
|
|
|
</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." |
|
|
|
|
> |
|
|
|
|
<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 |
|
|
|
|
Clone Vyper examples repository |
|
|
|
|
</Button> |
|
|
|
|
</CustomTooltip> |
|
|
|
|
</div> |
|
|
|
|
<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' }} |
|
|
|
|
/> |
|
|
|
|
<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} /> |
|
|
|
|
</> |
|
|
|
|
) : output.status === 'failed' ? <CompileErrorCard output={output} /> : 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> |
|
|
|
|