diff --git a/components/Editor/EditorControls.tsx b/components/Editor/EditorControls.tsx index fe80bb2..33113d3 100644 --- a/components/Editor/EditorControls.tsx +++ b/components/Editor/EditorControls.tsx @@ -10,6 +10,7 @@ import MultiButton from 'components/ui/MultiButton' import { cn } from '../../util/styles' import ExampleSelector, { MobileExampleSelector } from './ExampleSelector' +import { Checkbox } from 'components/ui/Checkbox' type SelectOption = { value: number @@ -27,6 +28,9 @@ type EditorControlsProps = { onCompileRun: (variant: 'run' | 'run-prove-verify') => void onProgramArgumentsUpdate: (args: string) => void onShowArgumentsHelper: () => void + isProveMode: boolean + exampleOption: number + setProveMode: (proveMode: boolean) => void } const EditorControls = ({ @@ -38,6 +42,9 @@ const EditorControls = ({ onCompileRun, onProgramArgumentsUpdate, onShowArgumentsHelper, + isProveMode, + exampleOption, + setProveMode, }: EditorControlsProps) => { const inputRef = useRef(null) @@ -117,14 +124,30 @@ const EditorControls = ({
- +
- +
+
+ setProveMode(!isProveMode)} + /> +
- - {/*
*/} - {/*
*/} - {/* - */} - {/*
*/}
diff --git a/components/Editor/ExampleSelector.tsx b/components/Editor/ExampleSelector.tsx index 7d3d330..e340552 100644 --- a/components/Editor/ExampleSelector.tsx +++ b/components/Editor/ExampleSelector.tsx @@ -11,8 +11,12 @@ import Select, { import { cn } from '../../util/styles' import { Button } from '../ui' -import { CairoExampleNames, Examples } from './examples' - +import { + CairoExampleNames, + CairoExampleNamesProveMode, + Examples, + ProveExamples, +} from './examples' type SelectOption = { value: number label: string @@ -20,6 +24,8 @@ type SelectOption = { type Props = { onExampleChange: (option: SelectOption | null) => void + isProveMode: boolean + exampleOption: number } const examplesOptions = Examples.Cairo.map((_, i) => ({ @@ -27,12 +33,30 @@ const examplesOptions = Examples.Cairo.map((_, i) => ({ label: CairoExampleNames[i], })) -export function MobileExampleSelector({ onExampleChange }: Props) { +const proveExamplesOptions = ProveExamples.Cairo.map((_, i) => ({ + value: i, + label: CairoExampleNamesProveMode[i], +})) + +export function MobileExampleSelector({ + onExampleChange, + isProveMode, + exampleOption, +}: Props) { return ( proveExamplesOptions.length - 1 + ? proveExamplesOptions[0] + : proveExamplesOptions[exampleOption] + : exampleOption > examplesOptions.length - 1 + ? examplesOptions[0] + : examplesOptions[exampleOption] + } + defaultValue={isProveMode ? proveExamplesOptions[0] : examplesOptions[0]} classNamePrefix="select" placeholder={'Choose Cairo Example'} menuPlacement="top" diff --git a/components/Editor/Header.tsx b/components/Editor/Header.tsx index 2955cb4..ff452c8 100644 --- a/components/Editor/Header.tsx +++ b/components/Editor/Header.tsx @@ -1,11 +1,10 @@ -import { useMemo, useId } from 'react' +import { useMemo, useId, useContext } from 'react' import Image from 'next/image' import cairoLogo from 'public/cairo_logo.png' import Select, { OnChangeValue } from 'react-select' import { CodeType } from '../../context/appUiContext' - type Props = { codeType: string | undefined onCodeTypeChange: (option: OnChangeValue) => void @@ -45,7 +44,7 @@ const EditorHeader = ({ codes ) : ( - <> +
- +
))} -
+
+ {isChecked && ( + + + + )} +
+ {text} + + ) +} diff --git a/components/ui/MultiButton.tsx b/components/ui/MultiButton.tsx index efe5589..b982b3b 100644 --- a/components/ui/MultiButton.tsx +++ b/components/ui/MultiButton.tsx @@ -1,7 +1,5 @@ -import { useContext, useEffect, useState } from 'react' +import { useContext, useEffect } from 'react' -import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react' -import { ChevronDownIcon } from '@heroicons/react/20/solid' import { ReadyState } from 'react-use-websocket' import { AppUiContext, LogType } from 'context/appUiContext' @@ -20,7 +18,6 @@ interface MultiButtonProps { } const MultiButton = ({ onCompileRun }: MultiButtonProps) => { - const [selected, setSelected] = useState('run') const { addToConsoleLog, consoleLog } = useContext(AppUiContext) const { compilationState, @@ -30,6 +27,7 @@ const MultiButton = ({ onCompileRun }: MultiButtonProps) => { executionState, proofRequired, provingIsNotSupported, + isProveMode, } = useContext(CairoVMApiContext) useEffect(() => { @@ -68,18 +66,12 @@ const MultiButton = ({ onCompileRun }: MultiButtonProps) => { }, [readyState, consoleLog, addToConsoleLog]) const handleMainButtonClick = () => { - switch (selected) { - case 'run-prove-verify': - onCompileRun('run-prove-verify') - setDebugMode(ProgramDebugMode.Execution) - break - case 'run': - onCompileRun('run') - setDebugMode(ProgramDebugMode.Execution) - break - default: - break + if (isProveMode) { + onCompileRun('run-prove-verify') + } else { + onCompileRun('run') } + setDebugMode(ProgramDebugMode.Execution) } return ( @@ -95,52 +87,11 @@ const MultiButton = ({ onCompileRun }: MultiButtonProps) => { executionState === ProgramExecutionState.Success)) } size="sm" - className="rounded-r-none px-3 py-2 text-xs md:text-sm min-w-[130px] flex items-center whitespace-nowrap justify-left flex-1" + className="px-3 py-2 text-xs md:text-sm flex items-center whitespace-nowrap justify-center flex-1" onClick={handleMainButtonClick} > - {selected === 'run-prove-verify' - ? 'Run, Prove and Debug' - : 'Run and Debug'} + Run - - - - Open options - - -
- - - - - - -
-
-
) } diff --git a/context/cairoVMApiContext.tsx b/context/cairoVMApiContext.tsx index b363db9..83e0a2f 100644 --- a/context/cairoVMApiContext.tsx +++ b/context/cairoVMApiContext.tsx @@ -95,6 +95,8 @@ type ContextProps = { onContinueExecution: () => void addBreakPoint: (addr: string) => void removeBreakPoint: (addr: string) => void + isProveMode: boolean + setProveMode: (proveMode: boolean) => void } export const CairoVMApiContext = createContext({ @@ -121,6 +123,7 @@ export const CairoVMApiContext = createContext({ readyState: 0, provingIsNotSupported: false, proofRequired: false, + isProveMode: false, proof: undefined, proofTime: undefined, @@ -132,6 +135,7 @@ export const CairoVMApiContext = createContext({ addBreakPoint: noOp, removeBreakPoint: noOp, setDebugMode: noOp, + setProveMode: noOp, }) export const CairoVMApiProvider: React.FC = ({ @@ -140,6 +144,7 @@ export const CairoVMApiProvider: React.FC = ({ const [debugMode, setDebugMode] = useState( ProgramDebugMode.Execution, ) + const [isProveMode, setProveMode] = useState(false) const [sierraCode, setSierraCode] = useState('') const [casmCode, setCasmCode] = useState('') const [casmInstructions, setCasmInstructions] = useState([]) @@ -499,6 +504,8 @@ export const CairoVMApiProvider: React.FC = ({ onContinueExecution, addBreakPoint, removeBreakPoint, + isProveMode, + setProveMode, }} > {children}