Added prove mode

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<HTMLInputElement>(null)
 
@@ -117,14 +124,30 @@ const EditorControls = ({
           </Button>
 
           <div className="xl:block hidden max-w-36 2xl:max-w-full">
-            <ExampleSelector onExampleChange={onExampleChange} />
+            <ExampleSelector
+              isProveMode={isProveMode}
+              onExampleChange={onExampleChange}
+              exampleOption={exampleOption}
+            />
           </div>
           <div className="xl:hidden block">
-            <MobileExampleSelector onExampleChange={onExampleChange} />
+            <MobileExampleSelector
+              isProveMode={isProveMode}
+              onExampleChange={onExampleChange}
+              exampleOption={exampleOption}
+            />
           </div>
         </div>
 
         <div className="flex flex-row grow gap-x-2 items-center justify-end">
+          <div className="flex items-center">
+            <Checkbox
+              text="Prove & Verify"
+              value={'Prove mode'}
+              isChecked={isProveMode}
+              onChange={() => setProveMode(!isProveMode)}
+            />
+          </div>
           <Input
             ref={inputRef}
             rightIcon={
@@ -152,27 +175,7 @@ const EditorControls = ({
               'text-red-500': !areProgramArgumentsValid,
             })}
           />
-
-          {/* <div> */}
           <MultiButton onCompileRun={onCompileRun} />
-          {/* <div className="flex flex-row gap-x-2"> */}
-          {/* <Button
-      onClick={onCompileRun}
-      disabled={isCompileDisabled || !areProgramArgumentsValid}
-      size="sm"
-      contentClassName="justify-center"
-    >
-      Run
-    </Button>
-    <Button
-      onClick={onProveAndVerify}
-      disabled={isCompileDisabled || !areProgramArgumentsValid}
-      size="sm"
-      contentClassName="justify-center"
-    >
-      Prove & Verify
-    </Button> */}
-          {/* </div> */}
         </div>
       </div>
     </>

components/Editor/ExampleSelector.tsx

@@ -11,28 +11,52 @@ 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
 }
 
 type Props = {
   onExampleChange: (option: SelectOption | null) => void
+  isProveMode: boolean
+  exampleOption: number
 }
 
 const examplesOptions = Examples.Cairo.map((_, i) => ({
   value: 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 (
     <Select
       onChange={onExampleChange}
-      options={examplesOptions}
-      defaultValue={examplesOptions[0]}
+      options={isProveMode ? proveExamplesOptions : examplesOptions}
+      value={
+        isProveMode
+          ? exampleOption > proveExamplesOptions.length - 1
+            ? proveExamplesOptions[0]
+            : proveExamplesOptions[exampleOption]
+          : exampleOption > examplesOptions.length - 1
+          ? examplesOptions[0]
+          : examplesOptions[exampleOption]
+      }
+      defaultValue={isProveMode ? proveExamplesOptions[0] : examplesOptions[0]}
       components={{
         DropdownIndicator,
       }}
@@ -46,12 +70,25 @@ export function MobileExampleSelector({ onExampleChange }: Props) {
   )
 }
 
-export function ExampleSelector({ onExampleChange }: Props) {
+export function ExampleSelector({
+  onExampleChange,
+  isProveMode,
+  exampleOption,
+}: Props) {
   return (
     <Select
       onChange={onExampleChange}
-      options={examplesOptions}
-      defaultValue={examplesOptions[0]}
+      options={isProveMode ? proveExamplesOptions : examplesOptions}
+      value={
+        isProveMode
+          ? exampleOption > 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"

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<any, any>) => void
@@ -45,17 +44,16 @@ const EditorHeader = ({
               <span className="pl-2">codes</span>
             </div>
           ) : (
-            <>
+            <div className="flex items-center gap-4">
               <h3
                 className={`${
                   !anotherTitle && 'font-semibold hidden xl:inline-flex'
                 } text-md items-center`}
               >
                 <span>{!anotherTitle && 'Cairo VM'}Playground</span>
               </h3>
-            </>
+            </div>
           ))}
-
         <div className="flex items-center ">
           <Select
             className="z-40"