Keep disabled contract examples if 'Prove & Verify' is enabled

components/Editor/EditorControls.tsx

@@ -11,6 +11,7 @@ import { cn } from '../../util/styles'
 
 import ExampleSelector, { MobileExampleSelector } from './ExampleSelector'
 import { Checkbox } from 'components/ui/Checkbox'
+import { Examples, ProveExamples } from './examples'
 
 type SelectOption = {
   value: number
@@ -30,6 +31,8 @@ type EditorControlsProps = {
   onShowArgumentsHelper: () => void
   isProveMode: boolean
   setProveMode: (proveMode: boolean) => void
+  exampleOption: number
+  cairoCode: string
 }
 
 const EditorControls = ({
@@ -43,6 +46,8 @@ const EditorControls = ({
   onShowArgumentsHelper,
   isProveMode,
   setProveMode,
+  exampleOption,
+  cairoCode,
 }: EditorControlsProps) => {
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -78,7 +83,7 @@ const EditorControls = ({
   const onExampleChange = (option: SelectOption | null) => {
     handleChangeExampleOption(option)
   }
-
+  console.log(cairoCode.includes('#[starknet::contract]'))
   return (
     <>
       <Input
@@ -140,8 +145,35 @@ const EditorControls = ({
             <Checkbox
               text="Prove & Verify"
               value={'Prove mode'}
-              isChecked={isProveMode}
+              isChecked={
+                isProveMode &&
+                !cairoCode.includes('#[starknet::contract]') &&
+                cairoCode.includes('#[executable]')
+              }
+              tooltip={
+                ProveExamples.Cairo[exampleOption].includes(
+                  '#[starknet::contract]',
+                ) || cairoCode.includes('#[starknet::contract]')
+                  ? 'Proving is not supported for contracts'
+                  : !ProveExamples.Cairo[exampleOption].includes(
+                      '#[executable]',
+                    ) ||
+                    (!cairoCode.includes('#[executable]') &&
+                      cairoCode !== Examples.Cairo[exampleOption])
+                  ? 'Examples without #[executable] are not available for proving'
+                  : undefined
+              }
+              tooltipId="prove-and-verify"
               onChange={() => setProveMode(!isProveMode)}
+              isDisabled={
+                ProveExamples.Cairo[exampleOption].includes(
+                  '#[starknet::contract]',
+                ) ||
+                cairoCode.includes('#[starknet::contract]') ||
+                !ProveExamples.Cairo[exampleOption].includes('#[executable]') ||
+                (!cairoCode.includes('#[executable]') &&
+                  cairoCode !== Examples.Cairo[exampleOption])
+              }
             />
           </div>
           <Input

components/Editor/ExampleSelector.tsx

@@ -6,45 +6,78 @@ import Select, {
   DropdownIndicatorProps,
   GroupBase,
   StylesConfig,
+  OptionProps,
 } from 'react-select'
+import ReactTooltip from 'react-tooltip'
 
 import { cn } from '../../util/styles'
 import { Button } from '../ui'
 
-import {
-  CairoExampleNames,
-  CairoExampleNamesProveMode,
-  Examples,
-  ProveExamples,
-} from './examples'
+import { CairoExampleNames, Examples, ProveExamples } from './examples'
+
 type SelectOption = {
   value: number
   label: string
 }
+type OptionType = {
+  value: number
+  label: string
+  isDisabled?: boolean
+}
 
 type Props = {
   onExampleChange: (option: SelectOption | null) => void
   isProveMode: boolean
 }
 
-const examplesOptions = Examples.Cairo.map((_, i) => ({
-  value: i,
-  label: CairoExampleNames[i],
-}))
+const CustomOption = (props: OptionProps<OptionType, false>) => {
+  const { data, isDisabled } = props
+  const tooltipId = `tooltip-${data.value}`
 
-const proveExamplesOptions = ProveExamples.Cairo.map((_, i) => ({
-  value: i,
-  label: CairoExampleNamesProveMode[i],
-}))
+  return (
+    <>
+      <components.Option
+        {...props}
+        innerRef={props.innerRef}
+        innerProps={{
+          ...props.innerProps,
+          ...(isDisabled && {
+            'data-tip': 'Proving is not supported for contracts',
+            'data-for': tooltipId,
+          }),
+        }}
+      />
+      {isDisabled && (
+        <ReactTooltip
+          id={tooltipId}
+          place="right"
+          delayShow={200}
+          effect="solid"
+        />
+      )}
+    </>
+  )
+}
 
 export function MobileExampleSelector({ onExampleChange, isProveMode }: Props) {
+  const examplesArray = isProveMode ? ProveExamples : Examples
+  const examplesOptions = examplesArray.Cairo.map((code, i) => ({
+    value: i,
+    label: CairoExampleNames[i],
+    isDisabled:
+      isProveMode &&
+      (CairoExampleNames[i].includes('Contract') ||
+        !code.includes('#[executable]')),
+  }))
+
   return (
     <Select
       onChange={onExampleChange}
-      options={isProveMode ? proveExamplesOptions : examplesOptions}
-      defaultValue={isProveMode ? proveExamplesOptions[0] : examplesOptions[0]}
+      options={examplesOptions}
+      defaultValue={examplesOptions[0]}
       components={{
         DropdownIndicator,
+        Option: CustomOption,
       }}
       controlShouldRenderValue={false}
       classNamePrefix="select"
@@ -57,15 +90,28 @@ export function MobileExampleSelector({ onExampleChange, isProveMode }: Props) {
 }
 
 export function ExampleSelector({ onExampleChange, isProveMode }: Props) {
+  const examplesArray = isProveMode ? ProveExamples : Examples
+  const examplesOptions = examplesArray.Cairo.map((code, i) => ({
+    value: i,
+    label: CairoExampleNames[i],
+    isDisabled:
+      isProveMode &&
+      (CairoExampleNames[i].includes('Contract') ||
+        !code.includes('#[executable]')),
+  }))
+
   return (
-    <Select
+    <Select<OptionType, false>
       onChange={onExampleChange}
-      options={isProveMode ? proveExamplesOptions : examplesOptions}
-      defaultValue={isProveMode ? proveExamplesOptions[0] : examplesOptions[0]}
+      options={examplesOptions}
+      defaultValue={examplesOptions[0]}
       classNamePrefix="select"
       placeholder={'Choose Cairo Example'}
       menuPlacement="top"
       isSearchable={false}
+      components={{
+        Option: CustomOption,
+      }}
       instanceId={useId()}
     />
   )