Reorder props

apps/circuit-compiler/src/app/components/configurations.tsx

@@ -1,16 +1,8 @@
 import { CustomTooltip } from "@remix-ui/helper"
-import { useContext } from "react"
 import { FormattedMessage } from "react-intl"
-import { CircuitAppContext } from "../contexts"
-import { PrimeValue } from "../types"
-
-export function Configurations () {
-  const { appState, dispatch } = useContext(CircuitAppContext)
-
-  const handlePrimeChange = (value: string) => {
-    dispatch({ type: 'SET_PRIME_VALUE', payload: value as PrimeValue })
-  }
+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">
@@ -26,8 +18,8 @@ export function Configurations () {
           >
             <div>
               <select
-                onChange={(e) => handlePrimeChange(e.target.value)}
-                value={appState.primeValue}
+                onChange={(e) => setPrimeValue(e.target.value as PrimeValue)}
+                value={primeValue}
                 className="custom-select"
                 style={{
                   pointerEvents: 'auto'

apps/circuit-compiler/src/app/components/container.tsx

@@ -10,6 +10,7 @@ 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)
@@ -35,6 +36,18 @@ export function Container () {
     }
   }
 
+  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>
@@ -47,9 +60,9 @@ export function Container () {
               <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 />
+            <CompileOptions setCircuitAutoCompile={handleCircuitAutoCompile} setCircuitHideWarnings={handleCircuitHideWarnings} autoCompile={circuitApp.appState.autoCompile} hideWarnings={circuitApp.appState.hideWarnings} />
             <ConfigToggler>
-              <Configurations />
+              <Configurations setPrimeValue={handlePrimeChange} primeValue={circuitApp.appState.primeValue} />
             </ConfigToggler>
             <CircuitActions />
             <RenderIf condition={circuitApp.appState.signalInputs.length > 0}>

apps/circuit-compiler/src/app/components/options.tsx

@@ -1,15 +1,7 @@
-import { useContext } from 'react'
 import {FormattedMessage} from 'react-intl'
-import { CircuitAppContext } from '../contexts'
+import { CompileOptionsProps } from '../types'
 
-export function CompileOptions () {
-  const { appState, dispatch } = useContext(CircuitAppContext)
-  const handleCircuitAutoCompile = (value: boolean) => {
-    dispatch({ type: 'SET_AUTO_COMPILE', payload: value })
-  }
-  const handleCircuitHideWarnings = (value: boolean) => {
-    dispatch({ type: 'SET_HIDE_WARNINGS', payload: value })
-  }
+export function CompileOptions ({autoCompile, hideWarnings, setCircuitAutoCompile, setCircuitHideWarnings}: CompileOptionsProps) {
 
   return (
     <div className='pb-2'>
@@ -17,9 +9,9 @@ export function CompileOptions () {
         <input
           className="custom-control-input"
           type="checkbox"
-          onChange={(e) => handleCircuitAutoCompile(e.target.checked)}
+          onChange={(e) => setCircuitAutoCompile(e.target.checked)}
           title="Auto compile"
-          checked={appState.autoCompile}
+          checked={autoCompile}
           id="autoCompileCircuit"
         />
         <label className="form-check-label custom-control-label" htmlFor="autoCompileCircuit">
@@ -29,11 +21,11 @@ export function CompileOptions () {
       <div className="mt-1 mb-2 circuit_warnings_box custom-control custom-checkbox">
         <input
           className="custom-control-input"
-          onChange={(e) => handleCircuitHideWarnings(e.target.checked)}
+          onChange={(e) => setCircuitHideWarnings(e.target.checked)}
           id="hideCircuitWarnings"
           type="checkbox"
           title="Hide warnings"
-          checked={appState.hideWarnings}
+          checked={hideWarnings}
         />
         <label className="form-check-label custom-control-label" htmlFor="hideCircuitWarnings">
           <FormattedMessage id="solidity.hideWarnings" />

apps/circuit-compiler/src/app/types/index.ts

@@ -73,3 +73,15 @@ 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
+}