From 2c71e74919b6ecccb129515d346a453393b36beb Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Tue, 22 Aug 2023 16:59:02 +0100
Subject: [PATCH] Initialize circom UI

---
 .../src/app/actions/dispatch.ts               |  6 ++++
 .../circuit-compiler/src/app/actions/index.ts |  1 +
 apps/circuit-compiler/src/app/app.tsx         | 28 ++++++++++++++-----
 .../src/app/contexts/index.ts                 |  4 +++
 .../src/app/reducers/index.ts                 | 18 ++++++++++++
 apps/circuit-compiler/src/app/types/index.ts  | 21 ++++++++++++++
 6 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 apps/circuit-compiler/src/app/actions/dispatch.ts
 create mode 100644 apps/circuit-compiler/src/app/actions/index.ts
 create mode 100644 apps/circuit-compiler/src/app/contexts/index.ts
 create mode 100644 apps/circuit-compiler/src/app/reducers/index.ts
 create mode 100644 apps/circuit-compiler/src/app/types/index.ts

diff --git a/apps/circuit-compiler/src/app/actions/dispatch.ts b/apps/circuit-compiler/src/app/actions/dispatch.ts
new file mode 100644
index 0000000000..a13bf90c8a
--- /dev/null
+++ b/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})
+}
diff --git a/apps/circuit-compiler/src/app/actions/index.ts b/apps/circuit-compiler/src/app/actions/index.ts
new file mode 100644
index 0000000000..fd98d7d8ae
--- /dev/null
+++ b/apps/circuit-compiler/src/app/actions/index.ts
@@ -0,0 +1 @@
+import {Dispatch} from 'react'
diff --git a/apps/circuit-compiler/src/app/app.tsx b/apps/circuit-compiler/src/app/app.tsx
index e922fb0bf9..5d3226e0e9 100644
--- a/apps/circuit-compiler/src/app/app.tsx
+++ b/apps/circuit-compiler/src/app/app.tsx
@@ -1,17 +1,31 @@
-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">
-    </div>
+    <AppContext.Provider value={value}>
+      <div className="App"></div>
+    </AppContext.Provider>
   )
 }
 
-export default App
\ No newline at end of file
+export default App
diff --git a/apps/circuit-compiler/src/app/contexts/index.ts b/apps/circuit-compiler/src/app/contexts/index.ts
new file mode 100644
index 0000000000..c551d39cc1
--- /dev/null
+++ b/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)
diff --git a/apps/circuit-compiler/src/app/reducers/index.ts b/apps/circuit-compiler/src/app/reducers/index.ts
new file mode 100644
index 0000000000..7046c976f4
--- /dev/null
+++ b/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()
+  }
+}
diff --git a/apps/circuit-compiler/src/app/types/index.ts b/apps/circuit-compiler/src/app/types/index.ts
new file mode 100644
index 0000000000..b77a266838
--- /dev/null
+++ b/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
+}