David Disu
1 year ago
committed by
GitHub
commit
50d745de2b
@ -0,0 +1,43 @@ |
||||
import type { CircomPluginClient } from "../services/circomPluginClient" |
||||
import { Actions, AppState } from "../types" |
||||
|
||||
export const compileCircuit = async (plugin: CircomPluginClient, appState: AppState) => { |
||||
try { |
||||
if (appState.status !== "compiling") { |
||||
await plugin.compile(appState.filePath, { version: appState.version, prime: appState.primeValue }) |
||||
} else { |
||||
console.log('Exisiting circuit compilation in progress') |
||||
} |
||||
} catch (e) { |
||||
plugin.internalEvents.emit('circuit_compiling_errored', e) |
||||
console.error(e) |
||||
} |
||||
} |
||||
|
||||
export const generateR1cs = async (plugin: CircomPluginClient, appState: AppState) => { |
||||
try { |
||||
if (appState.status !== "generating") { |
||||
await plugin.generateR1cs(appState.filePath, { version: appState.version, prime: appState.primeValue }) |
||||
} else { |
||||
console.log('Exisiting r1cs generation in progress') |
||||
} |
||||
} catch (e) { |
||||
plugin.internalEvents.emit('circuit_generating_r1cs_errored', e) |
||||
console.error('Generating R1CS failed: ', e) |
||||
} |
||||
} |
||||
|
||||
export const computeWitness = async (plugin: CircomPluginClient, status: string, witnessValues: Record<string, string>) => { |
||||
try { |
||||
if (status !== "computing") { |
||||
const input = JSON.stringify(witnessValues) |
||||
|
||||
await plugin.computeWitness(input) |
||||
} else { |
||||
console.log('Exisiting witness computation in progress') |
||||
} |
||||
} catch (e) { |
||||
plugin.internalEvents.emit('circuit_computing_witness_errored', e) |
||||
console.error('Computing witness failed: ', e) |
||||
} |
||||
} |
||||
@ -1,17 +1,143 @@ |
||||
import React, { useEffect } from 'react' |
||||
import React, {useEffect, useReducer, useState} from 'react' |
||||
import {RenderIf} from '@remix-ui/helper' |
||||
import {IntlProvider} from 'react-intl' |
||||
|
||||
import { CircomPluginClient } from './services/circomPluginClient' |
||||
import { Container } from './components/container' |
||||
import {CircuitAppContext} from './contexts' |
||||
import {appInitialState, appReducer} from './reducers/state' |
||||
import {CircomPluginClient} from './services/circomPluginClient' |
||||
import { compileCircuit } from './actions' |
||||
|
||||
const plugin = new CircomPluginClient() |
||||
|
||||
function App() { |
||||
const [appState, dispatch] = useReducer(appReducer, appInitialState) |
||||
const [locale, setLocale] = useState<{code: string; messages: any}>({ |
||||
code: 'en', |
||||
messages: null |
||||
}) |
||||
const [isContentChanged, setIsContentChanged] = useState<boolean>(false) |
||||
const [isPluginActivated, setIsPluginActivated] = useState<boolean>(false) |
||||
|
||||
useEffect(() => { |
||||
new CircomPluginClient() |
||||
plugin.internalEvents.on('circom_activated', () => { |
||||
// @ts-ignore
|
||||
plugin.on('locale', 'localeChanged', (locale: any) => { |
||||
setLocale(locale) |
||||
}) |
||||
plugin.on('fileManager', 'currentFileChanged', (filePath) => { |
||||
if (filePath.endsWith('.circom')) { |
||||
dispatch({ type: 'SET_FILE_PATH', payload: filePath }) |
||||
plugin.parse(filePath) |
||||
} else { |
||||
dispatch({ type: 'SET_FILE_PATH', payload: '' }) |
||||
} |
||||
}) |
||||
// @ts-ignore
|
||||
plugin.on('editor', 'contentChanged', async (path: string, content: string) => { |
||||
setIsContentChanged(true) |
||||
if (path.endsWith('.circom')) { |
||||
plugin.parse(path, content) |
||||
} |
||||
}) |
||||
setIsPluginActivated(true) |
||||
}) |
||||
|
||||
// compiling events
|
||||
plugin.internalEvents.on('circuit_compiling_start', () => dispatch({ type: 'SET_COMPILER_STATUS', payload: 'compiling' })) |
||||
plugin.internalEvents.on('circuit_compiling_done', (signalInputs: string[]) => { |
||||
signalInputs = (signalInputs || []).filter(input => input) |
||||
dispatch({ type: 'SET_SIGNAL_INPUTS', payload: signalInputs }) |
||||
dispatch({ type: 'SET_COMPILER_STATUS', payload: 'idle' }) |
||||
}) |
||||
plugin.internalEvents.on('circuit_compiling_errored', compilerErrored) |
||||
|
||||
// r1cs events
|
||||
plugin.internalEvents.on('circuit_generating_r1cs_start', () => dispatch({ type: 'SET_COMPILER_STATUS', payload: 'generating' })) |
||||
plugin.internalEvents.on('circuit_generating_r1cs_done', () => dispatch({ type: 'SET_COMPILER_STATUS', payload: 'idle' })) |
||||
plugin.internalEvents.on('circuit_generating_r1cs_errored', compilerErrored) |
||||
|
||||
// witness events
|
||||
plugin.internalEvents.on('circuit_computing_witness_start', () => dispatch({ type: 'SET_COMPILER_STATUS', payload: 'computing' })) |
||||
plugin.internalEvents.on('circuit_computing_witness_done', () => { |
||||
dispatch({ type: 'SET_COMPILER_STATUS', payload: 'idle' }) |
||||
dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: null }) |
||||
}) |
||||
plugin.internalEvents.on('circuit_computing_witness_errored', compilerErrored) |
||||
|
||||
// parsing events
|
||||
plugin.internalEvents.on('circuit_parsing_done', (_, filePathToId) => { |
||||
dispatch({ type: 'SET_FILE_PATH_TO_ID', payload: filePathToId }) |
||||
dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: null }) |
||||
}) |
||||
plugin.internalEvents.on('circuit_parsing_errored', (report) => { |
||||
dispatch({ type: 'SET_COMPILER_STATUS', payload: 'errored' }) |
||||
dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: report }) |
||||
}) |
||||
plugin.internalEvents.on('circuit_parsing_warning', (report) => { |
||||
dispatch({ type: 'SET_COMPILER_STATUS', payload: 'warning' }) |
||||
dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: report }) |
||||
}) |
||||
}, []) |
||||
|
||||
|
||||
useEffect(() => { |
||||
if (isContentChanged) { |
||||
(async () => { |
||||
if (appState.autoCompile) await compileCircuit(plugin, appState) |
||||
})() |
||||
setIsContentChanged(false) |
||||
} |
||||
}, [appState.autoCompile, isContentChanged]) |
||||
|
||||
useEffect(() => { |
||||
if (isPluginActivated) { |
||||
setCurrentLocale() |
||||
} |
||||
}, [isPluginActivated]) |
||||
|
||||
useEffect(() => { |
||||
if (appState.filePath) { |
||||
(async () => { |
||||
if (appState.autoCompile) await compileCircuit(plugin, appState) |
||||
})() |
||||
} |
||||
}, [appState.filePath]) |
||||
|
||||
const setCurrentLocale = async () => { |
||||
// @ts-ignore
|
||||
const currentLocale = await plugin.call('locale', 'currentLocale') |
||||
|
||||
setLocale(currentLocale) |
||||
} |
||||
|
||||
const compilerErrored = (err: ErrorEvent) => { |
||||
dispatch({ type: 'SET_COMPILER_STATUS', payload: 'errored' }) |
||||
try { |
||||
const report = JSON.parse(err.message) |
||||
|
||||
dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: report }) |
||||
} catch (e) { |
||||
dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: err.message }) |
||||
} |
||||
} |
||||
|
||||
const value = { |
||||
appState, |
||||
dispatch, |
||||
plugin |
||||
} |
||||
|
||||
return ( |
||||
<div className="App"> |
||||
<div className="circuit_compiler_app"> |
||||
<RenderIf condition={locale.messages}> |
||||
<IntlProvider locale={locale.code} messages={locale.messages}> |
||||
<CircuitAppContext.Provider value={value}> |
||||
<Container /> |
||||
</CircuitAppContext.Provider> |
||||
</IntlProvider> |
||||
</RenderIf> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default App |
||||
export default App |
||||
|
||||
@ -0,0 +1,11 @@ |
||||
import { CompileBtn } from "./compileBtn"; |
||||
import { R1CSBtn } from "./r1csBtn"; |
||||
|
||||
export function CircuitActions () { |
||||
return ( |
||||
<div className="pb-3"> |
||||
<CompileBtn /> |
||||
<R1CSBtn /> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,51 @@ |
||||
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 ( |
||||
<button |
||||
className="btn btn-primary btn-block d-block w-100 text-break mb-1 mt-3" |
||||
onClick={() => { compileCircuit(plugin, appState) }} |
||||
disabled={(appState.filePath === "") || (appState.status === "compiling") || (appState.status === "generating")} |
||||
> |
||||
<CustomTooltip |
||||
placement="auto" |
||||
tooltipId="overlay-tooltip-compile" |
||||
tooltipText={ |
||||
<div className="text-left"> |
||||
<div> |
||||
<b>Ctrl+S</b> to compile {appState.filePath} |
||||
</div> |
||||
</div> |
||||
} |
||||
> |
||||
<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> |
||||
<RenderIfNot condition={appState.status === 'compiling'}> |
||||
<i className="fas fa-sync mr-2" aria-hidden="true"></i> |
||||
</RenderIfNot> |
||||
<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> |
||||
</CustomTooltip> |
||||
</button> |
||||
) |
||||
} |
||||
@ -0,0 +1,36 @@ |
||||
import { useState } from "react" |
||||
import { FormattedMessage } from "react-intl" |
||||
import { RenderIf, RenderIfNot } from "@remix-ui/helper" |
||||
|
||||
export function ConfigToggler ({ children }: { children: JSX.Element }) { |
||||
const [toggleExpander, setToggleExpander] = useState<boolean>(false) |
||||
|
||||
const toggleConfigurations = () => { |
||||
setToggleExpander(!toggleExpander) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="d-flex circuit_config_section justify-content-between" onClick={toggleConfigurations}> |
||||
<div className="d-flex"> |
||||
<label className="mt-1 circuit_config_section"> |
||||
<FormattedMessage id="circuit.advancedConfigurations" /> |
||||
</label> |
||||
</div> |
||||
<div> |
||||
<span data-id="scConfigExpander" onClick={toggleConfigurations}> |
||||
<RenderIf condition={toggleExpander}> |
||||
<i className="fas fa-angle-down" aria-hidden="true"></i> |
||||
</RenderIf> |
||||
<RenderIfNot condition={toggleExpander}> |
||||
<i className="fas fa-angle-right" aria-hidden="true"></i> |
||||
</RenderIfNot> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<RenderIf condition={toggleExpander}> |
||||
{ children } |
||||
</RenderIf> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,38 @@ |
||||
import { CustomTooltip } from "@remix-ui/helper" |
||||
import { FormattedMessage } from "react-intl" |
||||
import { ConfigurationsProps, PrimeValue } from "../types" |
||||
|
||||
export function Configurations ({primeValue, setPrimeValue}: ConfigurationsProps) { |
||||
return ( |
||||
<div className="pb-2 border-bottom flex-column"> |
||||
<div className="flex-column d-flex"> |
||||
<div className="mb-2 ml-0"> |
||||
<label className="circuit_inner_label form-check-label" htmlFor="circuitPrimeSelector"> |
||||
<FormattedMessage id="circuit.prime" /> |
||||
</label> |
||||
<CustomTooltip |
||||
placement={"auto"} |
||||
tooltipId="circuitPrimeLabelTooltip" |
||||
tooltipClasses="text-nowrap" |
||||
tooltipText={<span>{'To choose the prime number to use to generate the circuit. Receives the name of the curve (bn128, bls12381, goldilocks) [default: bn128]'}</span>} |
||||
> |
||||
<div> |
||||
<select |
||||
onChange={(e) => setPrimeValue(e.target.value as PrimeValue)} |
||||
value={primeValue} |
||||
className="custom-select" |
||||
style={{ |
||||
pointerEvents: 'auto' |
||||
}} |
||||
> |
||||
<option value="bn128">bn128</option> |
||||
<option value="bls12381">bls12381</option> |
||||
<option value="goldilocks">goldilocks</option> |
||||
</select> |
||||
</div> |
||||
</CustomTooltip> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,81 @@ |
||||
import { useContext } from 'react' |
||||
import { CustomTooltip, RenderIf } from '@remix-ui/helper' |
||||
import {FormattedMessage} from 'react-intl' |
||||
import { CircuitAppContext } from '../contexts' |
||||
import { CompileOptions } from './options' |
||||
import { VersionList } from './versions' |
||||
import { ConfigToggler } from './configToggler' |
||||
import { Configurations } from './configurations' |
||||
import { CircuitActions } from './actions' |
||||
import { WitnessToggler } from './witnessToggler' |
||||
import { WitnessSection } from './witness' |
||||
import { CompilerFeedback } from './feedback' |
||||
import { PrimeValue } from '../types' |
||||
|
||||
export function Container () { |
||||
const circuitApp = useContext(CircuitAppContext) |
||||
|
||||
const showCompilerLicense = (message = 'License not available') => { |
||||
// @ts-ignore
|
||||
circuitApp.plugin.call('notification', 'modal', { id: 'modal_circuit_compiler_license', title: 'Compiler License', message }) |
||||
} |
||||
|
||||
const handleVersionSelect = (version: string) => { |
||||
circuitApp.dispatch({ type: 'SET_COMPILER_VERSION', payload: version }) |
||||
} |
||||
|
||||
const handleOpenErrorLocation = async (location: string, startRange: string) => { |
||||
if (location) { |
||||
const fullPathLocation = await circuitApp.plugin.resolveReportPath(location) |
||||
|
||||
await circuitApp.plugin.call('fileManager', 'open', fullPathLocation) |
||||
// @ts-ignore
|
||||
const startPosition: { lineNumber: number; column: number } = await circuitApp.plugin.call('editor', 'getPositionAt', startRange) |
||||
// @ts-ignore
|
||||
await circuitApp.plugin.call('editor', 'gotoLine', startPosition.lineNumber - 1, startPosition.column) |
||||
} |
||||
} |
||||
|
||||
const handlePrimeChange = (value: string) => { |
||||
circuitApp.dispatch({ type: 'SET_PRIME_VALUE', payload: value as PrimeValue }) |
||||
} |
||||
|
||||
const handleCircuitAutoCompile = (value: boolean) => { |
||||
circuitApp.dispatch({ type: 'SET_AUTO_COMPILE', payload: value }) |
||||
} |
||||
|
||||
const handleCircuitHideWarnings = (value: boolean) => { |
||||
circuitApp.dispatch({ type: 'SET_HIDE_WARNINGS', payload: value }) |
||||
} |
||||
|
||||
return ( |
||||
<section> |
||||
<article> |
||||
<div className="pt-0 circuit_section"> |
||||
<div className="mb-1"> |
||||
<label className="circuit_label form-check-label" htmlFor="versionSelector"> |
||||
<FormattedMessage id="circuit.compiler" /> |
||||
</label> |
||||
<CustomTooltip placement="top" tooltipId="showCompilerTooltip" tooltipClasses="text-nowrap" tooltipText={'See compiler license'}> |
||||
<span className="fa fa-file-text-o border-0 p-0 ml-2" onClick={() => showCompilerLicense()}></span> |
||||
</CustomTooltip> |
||||
<VersionList setVersion={handleVersionSelect} versionList={circuitApp.appState.versionList} currentVersion={circuitApp.appState.version} /> |
||||
<CompileOptions setCircuitAutoCompile={handleCircuitAutoCompile} setCircuitHideWarnings={handleCircuitHideWarnings} autoCompile={circuitApp.appState.autoCompile} hideWarnings={circuitApp.appState.hideWarnings} /> |
||||
<ConfigToggler> |
||||
<Configurations setPrimeValue={handlePrimeChange} primeValue={circuitApp.appState.primeValue} /> |
||||
</ConfigToggler> |
||||
<CircuitActions /> |
||||
<RenderIf condition={circuitApp.appState.signalInputs.length > 0}> |
||||
<WitnessToggler> |
||||
<WitnessSection plugin={circuitApp.plugin} signalInputs={circuitApp.appState.signalInputs} status={circuitApp.appState.status} /> |
||||
</WitnessToggler> |
||||
</RenderIf> |
||||
<RenderIf condition={circuitApp.appState.status !== 'compiling' && circuitApp.appState.status !== 'computing' && circuitApp.appState.status !== 'generating'}> |
||||
<CompilerFeedback feedback={circuitApp.appState.feedback} filePathToId={circuitApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={circuitApp.appState.hideWarnings} /> |
||||
</RenderIf> |
||||
</div> |
||||
</div> |
||||
</article> |
||||
</section> |
||||
) |
||||
} |
||||
@ -0,0 +1,60 @@ |
||||
import { useState } from 'react' |
||||
import { CompilerFeedbackProps, CompilerReport } from '../types' |
||||
import { RenderIf } from '@remix-ui/helper' |
||||
import {CopyToClipboard} from '@remix-ui/clipboard' |
||||
import { FeedbackAlert } from './feedbackAlert' |
||||
|
||||
export function CompilerFeedback ({ feedback, filePathToId, hideWarnings, openErrorLocation }: CompilerFeedbackProps) { |
||||
const [ showException, setShowException ] = useState<boolean>(true) |
||||
|
||||
const handleCloseException = () => { |
||||
setShowException(false) |
||||
} |
||||
|
||||
const handleOpenError = (report: CompilerReport) => { |
||||
if (report.labels.length > 0) { |
||||
openErrorLocation(filePathToId[report.labels[0].file_id], report.labels[0].range.start) |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="circuit_errors_box py-4"> |
||||
<RenderIf condition={ (typeof feedback === "string") && showException }> |
||||
<div className="circuit_feedback error alert alert-danger"> |
||||
<span> { feedback } </span> |
||||
<div className="close" data-id="renderer" onClick={handleCloseException}> |
||||
<i className="fas fa-times"></i> |
||||
</div> |
||||
<div className="d-flex pt-1 flex-row-reverse"> |
||||
<span className="ml-3 pt-1 py-1" > |
||||
<CopyToClipboard content={feedback} className="p-0 m-0 far fa-copy error" direction={'top'} /> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</RenderIf> |
||||
<RenderIf condition={ Array.isArray(feedback) }> |
||||
<> |
||||
{ |
||||
Array.isArray(feedback) && feedback.map((response, index) => ( |
||||
<div key={index} onClick={() => handleOpenError(response)}> |
||||
<RenderIf condition={response.type === 'Error'}> |
||||
<div className={`circuit_feedback ${response.type.toLowerCase()} alert alert-danger`}> |
||||
<FeedbackAlert message={response.message} location={ response.labels[0] ? response.labels[0].message + ` ${filePathToId[response.labels[0].file_id]}:${response.labels[0].range.start}:${response.labels[0].range.end}` : null} /> |
||||
</div> |
||||
</RenderIf> |
||||
<RenderIf condition={(response.type === 'Warning') && !hideWarnings}> |
||||
<div className={`circuit_feedback ${response.type.toLowerCase()} alert alert-warning`}> |
||||
<FeedbackAlert message={response.message} location={null} /> |
||||
</div> |
||||
</RenderIf> |
||||
</div> |
||||
) |
||||
) |
||||
} |
||||
</> |
||||
</RenderIf> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,31 @@ |
||||
import { useState } from 'react' |
||||
import { FeedbackAlertProps } from '../types' |
||||
import { RenderIf } from '@remix-ui/helper' |
||||
import {CopyToClipboard} from '@remix-ui/clipboard' |
||||
|
||||
export function FeedbackAlert ({ message, location }: FeedbackAlertProps) { |
||||
const [ showAlert, setShowAlert] = useState<boolean>(true) |
||||
|
||||
const handleCloseAlert = () => { |
||||
setShowAlert(false) |
||||
} |
||||
|
||||
return ( |
||||
<RenderIf condition={showAlert}> |
||||
<> |
||||
<span> { message } </span> |
||||
<RenderIf condition={location !== null}> |
||||
<span> { location }</span> |
||||
</RenderIf> |
||||
<div className="close" data-id="renderer" onClick={handleCloseAlert}> |
||||
<i className="fas fa-times"></i> |
||||
</div> |
||||
<div className="d-flex pt-1 flex-row-reverse"> |
||||
<span className="ml-3 pt-1 py-1" > |
||||
<CopyToClipboard content={message} className="p-0 m-0 far fa-copy error" direction={'top'} /> |
||||
</span> |
||||
</div> |
||||
</> |
||||
</RenderIf> |
||||
) |
||||
} |
||||
@ -0,0 +1,36 @@ |
||||
import {FormattedMessage} from 'react-intl' |
||||
import { CompileOptionsProps } from '../types' |
||||
|
||||
export function CompileOptions ({autoCompile, hideWarnings, setCircuitAutoCompile, setCircuitHideWarnings}: CompileOptionsProps) { |
||||
|
||||
return ( |
||||
<div className='pb-2'> |
||||
<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"> |
||||
<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"> |
||||
<FormattedMessage id="solidity.hideWarnings" /> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,43 @@ |
||||
import { CustomTooltip, RenderIf, RenderIfNot } from "@remix-ui/helper"; |
||||
import { useContext } from "react"; |
||||
import { CircuitAppContext } from "../contexts"; |
||||
import { FormattedMessage } from "react-intl"; |
||||
import { generateR1cs } from "../actions"; |
||||
|
||||
export function R1CSBtn () { |
||||
const { plugin, appState } = useContext(CircuitAppContext) |
||||
|
||||
return ( |
||||
<button |
||||
className="btn btn-secondary btn-block d-block w-100 text-break mb-1 mt-2" |
||||
onClick={() => { generateR1cs(plugin, appState) }} |
||||
disabled={(appState.filePath === "") || (appState.status === "compiling") || (appState.status === "generating") || (appState.status === "computing")} |
||||
> |
||||
<CustomTooltip |
||||
placement="auto" |
||||
tooltipId="overlay-tooltip-compile" |
||||
tooltipText={ |
||||
<div className="text-left"> |
||||
<div> |
||||
Outputs the constraints in r1cs format |
||||
</div> |
||||
</div> |
||||
} |
||||
> |
||||
<div className="d-flex align-items-center justify-content-center"> |
||||
<RenderIf condition={appState.status === 'generating'}> |
||||
<i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i> |
||||
</RenderIf> |
||||
<RenderIfNot condition={appState.status === 'generating'}> |
||||
<i className="fas fa-sync mr-2" aria-hidden="true"></i> |
||||
</RenderIfNot> |
||||
<div className="text-truncate overflow-hidden text-nowrap"> |
||||
<span> |
||||
<FormattedMessage id="circuit.generateR1cs" /> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</CustomTooltip> |
||||
</button> |
||||
) |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
import { RenderIf } from "@remix-ui/helper"; |
||||
import { AppState } from "../types"; |
||||
|
||||
export function VersionList ({ currentVersion, versionList, setVersion }: { versionList: AppState['versionList'], currentVersion: string, setVersion: (version: string) => void }) { |
||||
const versionListKeys = Object.keys(versionList) |
||||
|
||||
return ( |
||||
<select |
||||
value={currentVersion} |
||||
onChange={(e) => setVersion(e.target.value)} |
||||
className="custom-select" |
||||
> |
||||
<RenderIf condition={versionListKeys.length > 0}> |
||||
<> |
||||
{ |
||||
versionListKeys.map((version, index) => ( |
||||
<option value={version} key={index}> |
||||
{ versionList[version].name } |
||||
</option> |
||||
)) |
||||
} |
||||
</> |
||||
</RenderIf> |
||||
</select> |
||||
) |
||||
} |
||||
@ -0,0 +1,50 @@ |
||||
import { RenderIf, RenderIfNot } from "@remix-ui/helper"; |
||||
import { FormattedMessage } from "react-intl"; |
||||
import { CompilerStatus } from "../types"; |
||||
import { computeWitness } from "../actions"; |
||||
import { useState } from "react"; |
||||
import type { CircomPluginClient } from "../services/circomPluginClient"; |
||||
|
||||
export function WitnessSection ({ plugin, signalInputs, status }: {plugin: CircomPluginClient, signalInputs: string[], status: CompilerStatus}) { |
||||
const [witnessValues, setWitnessValues] = useState<Record<string, string>>({}) |
||||
|
||||
const handleSignalInput = (e: any) => { |
||||
setWitnessValues({ |
||||
...witnessValues, |
||||
[e.target.name]: e.target.value |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<div className="pb-2 border-bottom flex-column"> |
||||
<div className="flex-column d-flex"> |
||||
<RenderIf condition={signalInputs.length > 0}> |
||||
<> |
||||
{ |
||||
signalInputs.map((input, index) => ( |
||||
<div className="mb-2 ml-0" key={index}> |
||||
<label className="circuit_inner_label form-check-label" htmlFor="circuitPrimeSelector"> |
||||
<FormattedMessage id="circuit.signalInput" /> { input } |
||||
</label> |
||||
<input className="form-control m-0 txinput" placeholder={input} name={input} onChange={handleSignalInput} /> |
||||
</div> |
||||
)) |
||||
} |
||||
<button |
||||
className="btn btn-sm btn-secondary" |
||||
onClick={() => { computeWitness(plugin, status, witnessValues) }} |
||||
disabled={(status === "compiling") || (status === "generating") || (status === "computing")}> |
||||
<RenderIf condition={status === 'computing'}> |
||||
<i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i> |
||||
</RenderIf> |
||||
<RenderIfNot condition={status === 'computing'}> |
||||
<i className="fas fa-sync mr-2" aria-hidden="true"></i> |
||||
</RenderIfNot> |
||||
<FormattedMessage id="circuit.compute" /> |
||||
</button> |
||||
</> |
||||
</RenderIf> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,36 @@ |
||||
import { useState } from "react" |
||||
import { FormattedMessage } from "react-intl" |
||||
import { RenderIf, RenderIfNot } from "@remix-ui/helper" |
||||
|
||||
export function WitnessToggler ({ children }: { children: JSX.Element }) { |
||||
const [toggleExpander, setToggleExpander] = useState<boolean>(false) |
||||
|
||||
const toggleConfigurations = () => { |
||||
setToggleExpander(!toggleExpander) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="d-flex circuit_config_section justify-content-between" onClick={toggleConfigurations}> |
||||
<div className="d-flex"> |
||||
<label className="mt-1 circuit_config_section"> |
||||
<FormattedMessage id="circuit.computeWitness" /> |
||||
</label> |
||||
</div> |
||||
<div> |
||||
<span data-id="scConfigExpander" onClick={toggleConfigurations}> |
||||
<RenderIf condition={toggleExpander}> |
||||
<i className="fas fa-angle-down" aria-hidden="true"></i> |
||||
</RenderIf> |
||||
<RenderIfNot condition={toggleExpander}> |
||||
<i className="fas fa-angle-right" aria-hidden="true"></i> |
||||
</RenderIfNot> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<RenderIf condition={toggleExpander}> |
||||
{ children } |
||||
</RenderIf> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
import {createContext} from 'react' |
||||
import {ICircuitAppContext} from '../types' |
||||
|
||||
export const CircuitAppContext = createContext<ICircuitAppContext>({} as ICircuitAppContext) |
||||
@ -0,0 +1,77 @@ |
||||
import {Actions, AppState} from '../types' |
||||
import { compiler_list } from 'circom_wasm' |
||||
|
||||
export const appInitialState: AppState = { |
||||
version: compiler_list.latest, |
||||
versionList: compiler_list.wasm_builds, |
||||
filePath: "", |
||||
filePathToId: {}, |
||||
status: "idle", |
||||
primeValue: "bn128", |
||||
autoCompile: false, |
||||
hideWarnings: false, |
||||
signalInputs: [], |
||||
feedback: null |
||||
} |
||||
|
||||
export const appReducer = (state = appInitialState, action: Actions): AppState => { |
||||
switch (action.type) { |
||||
|
||||
case 'SET_COMPILER_VERSION': |
||||
return { |
||||
...state, |
||||
version: action.payload |
||||
} |
||||
|
||||
case 'SET_FILE_PATH': |
||||
return { |
||||
...state, |
||||
filePath: action.payload |
||||
} |
||||
|
||||
case 'SET_COMPILER_STATUS': |
||||
return { |
||||
...state, |
||||
status: action.payload |
||||
} |
||||
|
||||
case 'SET_PRIME_VALUE': |
||||
return { |
||||
...state, |
||||
primeValue: action.payload |
||||
} |
||||
|
||||
case 'SET_AUTO_COMPILE': |
||||
return { |
||||
...state, |
||||
autoCompile: action.payload |
||||
} |
||||
|
||||
case 'SET_HIDE_WARNINGS': |
||||
return { |
||||
...state, |
||||
hideWarnings: action.payload |
||||
} |
||||
|
||||
case 'SET_SIGNAL_INPUTS': |
||||
return { |
||||
...state, |
||||
signalInputs: action.payload |
||||
} |
||||
|
||||
case 'SET_COMPILER_FEEDBACK': |
||||
return { |
||||
...state, |
||||
feedback: action.payload |
||||
} |
||||
|
||||
case 'SET_FILE_PATH_TO_ID': |
||||
return { |
||||
...state, |
||||
filePathToId: action.payload |
||||
} |
||||
|
||||
default: |
||||
throw new Error() |
||||
} |
||||
} |
||||
@ -0,0 +1,87 @@ |
||||
import { compiler_list } from 'circom_wasm' |
||||
import {Dispatch} from 'react' |
||||
import { CircomPluginClient } from '../services/circomPluginClient' |
||||
|
||||
export type CompilerStatus = "compiling" | "generating" | "computing" | "idle" | "errored" | "warning" |
||||
export interface ICircuitAppContext { |
||||
appState: AppState |
||||
dispatch: Dispatch<Actions>, |
||||
plugin: CircomPluginClient |
||||
} |
||||
|
||||
export interface ActionPayloadTypes { |
||||
SET_COMPILER_VERSION: string, |
||||
SET_FILE_PATH: string, |
||||
SET_COMPILER_STATUS: CompilerStatus, |
||||
SET_PRIME_VALUE: PrimeValue, |
||||
SET_AUTO_COMPILE: boolean, |
||||
SET_HIDE_WARNINGS: boolean, |
||||
SET_SIGNAL_INPUTS: string[], |
||||
SET_COMPILER_FEEDBACK: string | CompilerReport[] |
||||
SET_FILE_PATH_TO_ID: Record<number, string> |
||||
} |
||||
export interface Action<T extends keyof ActionPayloadTypes> { |
||||
type: T |
||||
payload: ActionPayloadTypes[T] |
||||
} |
||||
|
||||
export type Actions = {[A in keyof ActionPayloadTypes]: Action<A>}[keyof ActionPayloadTypes] |
||||
|
||||
export interface AppState { |
||||
version: string, |
||||
versionList: typeof compiler_list.wasm_builds, |
||||
filePath: string, |
||||
filePathToId: Record<string, string>, |
||||
status: CompilerStatus, |
||||
primeValue: PrimeValue, |
||||
autoCompile: boolean, |
||||
hideWarnings: boolean, |
||||
signalInputs: string[], |
||||
feedback: string | CompilerReport[] |
||||
} |
||||
|
||||
export type CompilationConfig = { |
||||
prime: PrimeValue, |
||||
version: string |
||||
} |
||||
|
||||
export type PrimeValue = "bn128" | "bls12381" | "goldilocks" |
||||
|
||||
export type CompilerFeedbackProps = { |
||||
feedback: string | CompilerReport[], |
||||
filePathToId: Record<string, string>, |
||||
openErrorLocation: (location: string, startRange: string) => void, |
||||
hideWarnings: boolean |
||||
} |
||||
|
||||
export type CompilerReport = { |
||||
type: "Error" | "Bug" | "Help" | "Note" | "Warning" | "Unknown", |
||||
message: string, |
||||
labels: { |
||||
style: "Primary" | "Secondary" | "Unknown", |
||||
file_id: string, |
||||
range: { |
||||
start: string, |
||||
end: string |
||||
}, |
||||
message: string |
||||
}[], |
||||
notes: string[] |
||||
} |
||||
|
||||
export type FeedbackAlertProps = { |
||||
message: string, |
||||
location: string |
||||
} |
||||
|
||||
export type ConfigurationsProps = { |
||||
setPrimeValue: (prime: PrimeValue) => void, |
||||
primeValue: PrimeValue |
||||
} |
||||
|
||||
export type CompileOptionsProps = { |
||||
setCircuitAutoCompile: (value: boolean) => void, |
||||
setCircuitHideWarnings: (value: boolean) => void, |
||||
autoCompile: boolean, |
||||
hideWarnings: boolean |
||||
} |
||||
@ -0,0 +1,88 @@ |
||||
body { |
||||
font-size : .8rem; |
||||
} |
||||
.circuit_section { |
||||
padding: 12px 24px 16px; |
||||
} |
||||
.circuit_label { |
||||
margin-bottom: 2px; |
||||
font-size: 11px; |
||||
line-height: 12px; |
||||
text-transform: uppercase; |
||||
} |
||||
.circuit_warnings_box { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.circuit_warnings_box label { |
||||
margin: 0; |
||||
} |
||||
.circuit_config_section:hover { |
||||
cursor: pointer; |
||||
} |
||||
.circuit_config_section { |
||||
font-size: 1rem; |
||||
} |
||||
.circuit_config { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.circuit_config label { |
||||
margin: 0; |
||||
} |
||||
.circuit_inner_label { |
||||
margin-bottom: 2px; |
||||
font-size: 11px; |
||||
line-height: 12px; |
||||
text-transform: uppercase; |
||||
} |
||||
.circuit_errors_box { |
||||
padding-left: 5px; |
||||
padding-right: 5px; |
||||
word-break: break-word; |
||||
} |
||||
.circuit_feedback.success, |
||||
.circuit_feedback.error, |
||||
.circuit_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; |
||||
} |
||||
|
||||
.circuit_feedback.success pre, |
||||
.circuit_feedback.error pre, |
||||
.circuit_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; |
||||
} |
||||
|
||||
.circuit_feedback.success .close, |
||||
.circuit_feedback.error .close, |
||||
.circuit_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; |
||||
} |
||||
|
||||
.circuit_feedback.success a, |
||||
.circuit_feedback.error a, |
||||
.circuit_feedback.warning a { |
||||
bottom: 0; |
||||
right: 0; |
||||
} |
||||
@ -0,0 +1,27 @@ |
||||
pragma circom 2.1.4; |
||||
|
||||
include "circomlib/poseidon.circom"; |
||||
// include "https://github.com/0xPARC/circom-secp256k1/blob/master/circuits/bigint.circom"; |
||||
|
||||
template Example () { |
||||
signal input a; |
||||
signal input b; |
||||
signal output c; |
||||
|
||||
var unused = 4; |
||||
c <== a * b; |
||||
assert(a > 2); |
||||
|
||||
component hash = Poseidon(2); |
||||
hash.inputs[0] <== a; |
||||
hash.inputs[1] <== b; |
||||
|
||||
log("hash", hash.out); |
||||
} |
||||
|
||||
component main { public [ a ] } = Example(); |
||||
|
||||
/* INPUT = { |
||||
"a": "5", |
||||
"b": "77" |
||||
} */ |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,15 @@ |
||||
{ |
||||
"circuit.compiler": "Compiler", |
||||
"circuit.autoCompile": "Auto compile", |
||||
"circuit.hideWarnings": "Hide warnings", |
||||
"circuit.advancedConfigurations": "Advanced Configurations", |
||||
"circuit.compilerConfiguration": "Compiler configuration", |
||||
"circuit.prime": "Prime", |
||||
"circuit.useConfigurationFile": "Use configuration file", |
||||
"circuit.compile": "Compile", |
||||
"circuit.noFileSelected": "no file selected", |
||||
"circuit.generateR1cs": "Generate R1CS", |
||||
"circuit.computeWitness": "Compute Witness", |
||||
"circuit.signalInput": "Signal Input", |
||||
"circuit.compute": "Compute" |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
{ |
||||
"circuit.compiler": "Compiler", |
||||
"circuit.autoCompile": "Auto compile", |
||||
"circuit.hideWarnings": "Hide warnings", |
||||
"circuit.advancedConfigurations": "Advanced Configurations", |
||||
"circuit.compilerConfiguration": "Compiler configuration", |
||||
"circuit.prime": "Prime", |
||||
"circuit.useConfigurationFile": "Use configuration file", |
||||
"circuit.compile": "Compile", |
||||
"circuit.noFileSelected": "no file selected", |
||||
"circuit.generateR1cs": "Generate R1CS", |
||||
"circuit.computeWitness": "Compute Witness", |
||||
"circuit.signalInput": "Signal Input", |
||||
"circuit.compute": "Compute" |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
{ |
||||
"circuit.compiler": "Compiler", |
||||
"circuit.autoCompile": "Auto compile", |
||||
"circuit.hideWarnings": "Hide warnings", |
||||
"circuit.advancedConfigurations": "Advanced Configurations", |
||||
"circuit.compilerConfiguration": "Compiler configuration", |
||||
"circuit.prime": "Prime", |
||||
"circuit.useConfigurationFile": "Use configuration file", |
||||
"circuit.compile": "Compile", |
||||
"circuit.noFileSelected": "no file selected", |
||||
"circuit.generateR1cs": "Generate R1CS", |
||||
"circuit.computeWitness": "Compute Witness", |
||||
"circuit.signalInput": "Signal Input", |
||||
"circuit.compute": "Compute" |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
{ |
||||
"circuit-compiler.displayName": "Circuit 编译器", |
||||
"circuit.compiler": "Compiler", |
||||
"circuit.autoCompile": "自动编译", |
||||
"circuit.hideWarnings": "隐藏警告", |
||||
"circuit.advancedConfigurations": "高级配置", |
||||
"circuit.compilerConfiguration": "编译器配置", |
||||
"circuit.prime": "质数", |
||||
"circuit.useConfigurationFile": "使用配置文件", |
||||
"circuit.compile": "编译", |
||||
"circuit.noFileSelected": "未选中文件", |
||||
"circuit.generateR1cs": "生成R1CS", |
||||
"circuit.computeWitness": "证人计算器", |
||||
"circuit.signalInput": "输入信号", |
||||
"circuit.compute": "计算" |
||||
} |
||||
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 500 B |
Loading…
Reference in new issue