Initialize circom UI

apps/circuit-compiler/src/app/actions/dispatch.ts

@@ -0,0 +1,6 @@
+import {Dispatch} from 'react'
+import {Action} from '../types'
+
+export const dispatchCheckRemixd = (status: boolean) => (dispatch: Dispatch<Action<'SET_REMIXD_CONNECTION_STATUS'>>) => {
+  dispatch({type: 'SET_REMIXD_CONNECTION_STATUS', payload: status})
+}

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

@@ -0,0 +1 @@
+import {Dispatch} from 'react'

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

@@ -1,16 +1,30 @@
-import React, { useEffect } from 'react'
+import React, {useEffect, useReducer, useState} from 'react'
+import {RenderIf, RenderIfNot} from '@remix-ui/helper'
+import {Alert, Button, Tabs, Tab} from 'react-bootstrap'
 
-import { CircomPluginClient } from './services/circomPluginClient'
+import {AppContext} from './contexts'
+import {appInitialState, appReducer} from './reducers'
+import {CircomPluginClient} from './services/circomPluginClient'
 
 function App() {
+  const [appState, dispatch] = useReducer(appReducer, appInitialState)
+  const [plugin, setPlugin] = useState<CircomPluginClient>(null)
 
   useEffect(() => {
-    new CircomPluginClient()
+    const plugin = new CircomPluginClient()
+
+    setPlugin(plugin)
   }, [])
 
+  const value = {
+    appState,
+    dispatch
+  }
+
   return (
-    <div className="App">
+    <AppContext.Provider value={value}>
-    </div>
+      <div className="App"></div>
+    </AppContext.Provider>
   )
 }
 

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

@@ -0,0 +1,4 @@
+import {createContext} from 'react'
+import {IAppContext} from '../types'
+
+export const AppContext = createContext<IAppContext>({} as IAppContext)

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

@@ -0,0 +1,18 @@
+import {Actions, AppState} from '../types'
+
+export const appInitialState: AppState = {
+  isRemixdConnected: null
+}
+
+export const appReducer = (state = appInitialState, action: Actions): AppState => {
+  switch (action.type) {
+  case 'SET_REMIXD_CONNECTION_STATUS':
+    return {
+      ...state,
+      isRemixdConnected: action.payload
+    }
+
+  default:
+    throw new Error()
+  }
+}

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

@@ -0,0 +1,21 @@
+import {Dispatch} from 'react'
+
+export interface IAppContext {
+  appState: AppState
+  dispatch: Dispatch<any>
+}
+
+export interface ActionPayloadTypes {
+  SET_REMIXD_CONNECTION_STATUS: boolean
+}
+
+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 {
+  isRemixdConnected: boolean
+}