ioedeveloper
1 month ago
committed by
Aniket
parent
17abed26a7
commit
30279d5d99
@ -1,9 +0,0 @@ |
||||
import { CompileBtn } from "./compileBtn" |
||||
|
||||
export function CircuitActions () { |
||||
return ( |
||||
<div className="pb-2"> |
||||
<CompileBtn /> |
||||
</div> |
||||
) |
||||
} |
||||
@ -1,49 +0,0 @@ |
||||
import { CustomTooltip, RenderIf, RenderIfNot, extractNameFromKey } from "@remix-ui/helper"; |
||||
import { useContext } from "react"; |
||||
import { CircuitAppContext } from "../contexts"; |
||||
import { FormattedMessage } from "react-intl"; |
||||
import { compileCircuit } from "../actions"; |
||||
|
||||
export function CompileBtn () { |
||||
const { plugin, appState } = useContext(CircuitAppContext) |
||||
|
||||
return ( |
||||
<CustomTooltip |
||||
placement="auto" |
||||
tooltipId="overlay-tooltip-compile" |
||||
tooltipText={ |
||||
<div className="text-left"> |
||||
<div> |
||||
<b>Ctrl+S</b> to compile {appState.filePath} |
||||
</div> |
||||
</div> |
||||
} |
||||
> |
||||
<button |
||||
className="btn btn-primary btn-block d-block w-100 text-break mb-1 mt-1" |
||||
onClick={() => { compileCircuit(plugin, appState) }} |
||||
disabled={(appState.filePath === "") || (appState.status === "compiling")} |
||||
data-id="compile_circuit_btn" |
||||
> |
||||
<div className="d-flex align-items-center justify-content-center"> |
||||
<RenderIf condition={appState.status === 'compiling'}> |
||||
<i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i> |
||||
</RenderIf> |
||||
<div className="text-truncate overflow-hidden text-nowrap"> |
||||
<span> |
||||
<FormattedMessage id="circuit.compile" /> |
||||
</span> |
||||
<span className="ml-1 text-nowrap"> |
||||
<RenderIf condition={appState.filePath === ""}> |
||||
<FormattedMessage id="circuit.noFileSelected" /> |
||||
</RenderIf> |
||||
<RenderIfNot condition={appState.filePath === ""}> |
||||
<>{extractNameFromKey(appState.filePath)}</> |
||||
</RenderIfNot> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</button> |
||||
</CustomTooltip> |
||||
) |
||||
} |
||||
@ -1,36 +0,0 @@ |
||||
import {FormattedMessage} from 'react-intl' |
||||
import { CompileOptionsProps } from '../types' |
||||
|
||||
export function CompileOptions ({autoCompile, hideWarnings, setCircuitAutoCompile, setCircuitHideWarnings}: CompileOptionsProps) { |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="mt-2 custom-control custom-checkbox"> |
||||
<input |
||||
className="custom-control-input" |
||||
type="checkbox" |
||||
onChange={(e) => setCircuitAutoCompile(e.target.checked)} |
||||
title="Auto compile" |
||||
checked={autoCompile} |
||||
id="autoCompileCircuit" |
||||
/> |
||||
<label className="form-check-label custom-control-label" htmlFor="autoCompileCircuit" data-id="auto_compile_circuit_checkbox_input"> |
||||
<FormattedMessage id="circuit.autoCompile" /> |
||||
</label> |
||||
</div> |
||||
<div className="mt-1 mb-2 circuit_warnings_box custom-control custom-checkbox"> |
||||
<input |
||||
className="custom-control-input" |
||||
onChange={(e) => setCircuitHideWarnings(e.target.checked)} |
||||
id="hideCircuitWarnings" |
||||
type="checkbox" |
||||
title="Hide warnings" |
||||
checked={hideWarnings} |
||||
/> |
||||
<label className="form-check-label custom-control-label" htmlFor="hideCircuitWarnings" data-id="hide_circuit_warnings_checkbox_input"> |
||||
<FormattedMessage id="solidity.hideWarnings" /> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import { NoirPluginClient } from "../services/noirPluginClient" |
||||
import { AppState } from "../types" |
||||
|
||||
export const compileNoirCircuit = async (plugin: NoirPluginClient, appState: AppState) => { |
||||
try { |
||||
if (appState.status !== "compiling") { |
||||
await plugin.compile(appState.filePath) |
||||
} else { |
||||
console.log('Existing noir compilation in progress') |
||||
} |
||||
} catch (e) { |
||||
plugin.emit('statusChanged', { key: 'error', title: e.message, type: 'error' }) |
||||
plugin.internalEvents.emit('noir_compiling_errored', e) |
||||
console.error(e) |
||||
} |
||||
} |
||||
@ -0,0 +1,34 @@ |
||||
import { Actions, AppState } from '../types' |
||||
|
||||
export interface ActionPayloadTypes { |
||||
SET_AUTO_COMPILE: boolean, |
||||
SET_HIDE_WARNINGS: boolean |
||||
} |
||||
|
||||
export const appInitialState: AppState = { |
||||
filePath: '', |
||||
filePathToId: {}, |
||||
autoCompile: false, |
||||
hideWarnings: false, |
||||
status: 'idle' |
||||
} |
||||
|
||||
export const appReducer = (state = appInitialState, action: Actions): AppState => { |
||||
switch (action.type) { |
||||
|
||||
case 'SET_AUTO_COMPILE': |
||||
return { |
||||
...state, |
||||
autoCompile: action.payload |
||||
} |
||||
|
||||
case 'SET_HIDE_WARNINGS': |
||||
return { |
||||
...state, |
||||
hideWarnings: action.payload |
||||
} |
||||
|
||||
default: |
||||
throw new Error() |
||||
} |
||||
} |
||||
@ -1,18 +1,26 @@ |
||||
import { compiler_list } from 'circom_wasm' |
||||
import { Dispatch } from 'react' |
||||
import type { NoirPluginClient } from '../services/noirPluginClient' |
||||
import { ActionPayloadTypes } from '../reducers/state' |
||||
|
||||
export type CompilerStatus = "compiling" | "idle" | "errored" | "warning" |
||||
export interface INoirAppContext { |
||||
// appState: AppState
|
||||
// dispatch: Dispatch<Actions>,
|
||||
appState: AppState |
||||
dispatch: Dispatch<Actions>, |
||||
plugin: NoirPluginClient |
||||
} |
||||
|
||||
export interface AppState { |
||||
version: string, |
||||
versionList: typeof compiler_list.wasm_builds, |
||||
filePath: string, |
||||
filePathToId: Record<string, string>, |
||||
autoCompile: boolean, |
||||
hideWarnings: boolean |
||||
hideWarnings: boolean, |
||||
status: CompilerStatus |
||||
} |
||||
|
||||
export interface Action<T extends keyof ActionPayloadTypes> { |
||||
type: T |
||||
payload: ActionPayloadTypes[T] |
||||
} |
||||
|
||||
export type Actions = {[A in keyof ActionPayloadTypes]: Action<A>}[keyof ActionPayloadTypes] |
||||
|
||||
@ -0,0 +1,101 @@ |
||||
body { |
||||
font-size : .8rem; |
||||
} |
||||
.noir_section { |
||||
padding: 12px 24px 16px; |
||||
} |
||||
.noir_label { |
||||
margin-bottom: 2px; |
||||
font-size: 11px; |
||||
line-height: 12px; |
||||
text-transform: uppercase; |
||||
} |
||||
.noir_warnings_box { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.noir_warnings_box label { |
||||
margin: 0; |
||||
} |
||||
.noir_config_section:hover { |
||||
cursor: pointer; |
||||
} |
||||
.noir_config_section { |
||||
font-size: 1rem; |
||||
} |
||||
.noir_config { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.noir_config label { |
||||
margin: 0; |
||||
} |
||||
.noir_inner_label { |
||||
margin-bottom: 2px; |
||||
font-size: 11px; |
||||
line-height: 12px; |
||||
text-transform: uppercase; |
||||
} |
||||
.noir_errors_box { |
||||
word-break: break-word; |
||||
} |
||||
.noir_feedback.success, |
||||
.noir_feedback.error, |
||||
.noir_feedback.warning { |
||||
white-space: pre-line; |
||||
word-wrap: break-word; |
||||
cursor: pointer; |
||||
position: relative; |
||||
margin: 0.5em 0 1em 0; |
||||
border-radius: 5px; |
||||
line-height: 20px; |
||||
padding: 8px 15px; |
||||
} |
||||
|
||||
.noir_feedback.success pre, |
||||
.noir_feedback.error pre, |
||||
.noir_feedback.warning pre { |
||||
white-space: pre-line; |
||||
overflow-y: hidden; |
||||
background-color: transparent; |
||||
margin: 0; |
||||
font-size: 12px; |
||||
border: 0 none; |
||||
padding: 0; |
||||
border-radius: 0; |
||||
} |
||||
|
||||
.noir_feedback.success .close, |
||||
.noir_feedback.error .close, |
||||
.noir_feedback.warning .close { |
||||
visibility: hidden; |
||||
white-space: pre-line; |
||||
font-weight: bold; |
||||
position: absolute; |
||||
color: hsl(0, 0%, 0%); /* black in style-guide.js */ |
||||
top: 0; |
||||
right: 0; |
||||
padding: 0.5em; |
||||
} |
||||
|
||||
.noir_feedback.success a, |
||||
.noir_feedback.error a, |
||||
.noir_feedback.warning a { |
||||
bottom: 0; |
||||
right: 0; |
||||
} |
||||
.custom-dropdown-items { |
||||
padding: 0.25rem 0.25rem; |
||||
border-radius: .25rem; |
||||
background: var(--custom-select); |
||||
} |
||||
.custom-dropdown-items a { |
||||
border-radius: .25rem; |
||||
text-transform: none; |
||||
text-decoration: none; |
||||
font-weight: normal; |
||||
font-size: 0.875rem; |
||||
padding: 0.25rem 0.25rem; |
||||
width: auto; |
||||
color: var(--text); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
export type CompileOptionsProps = { |
||||
setCircuitAutoCompile: (value: boolean) => void, |
||||
setCircuitHideWarnings: (value: boolean) => void, |
||||
autoCompile: boolean, |
||||
hideWarnings: boolean |
||||
} |
||||
Loading…
Reference in new issue