feat: select compiler version

src/components/project/index.tsx

@@ -25,6 +25,7 @@ export const Project = ({}: ProjectProps) => {
     <div className="flex flex-col gap-3">
       <Form className="flex flex-col gap-2">
         <Network />
+        <CompilerVersion />
         <Account />
         <Balance />
         <NewProject />
@@ -143,6 +144,43 @@ const Network = () => {
   );
 };
 
+const CompilerVersion = () => {
+  const { compilerVersion, setCompilerVersion, compilerVersions } = useStore(
+    useShallow((state) => ({
+      client: state.global.client,
+      compilerVersion: state.project.compilerVersion.data,
+      setCompilerVersion: state.project.setCompilerVersion,
+      compilerVersions: state.project.compilerVersions.data,
+    }))
+  );
+
+  const handleCompilerVersionOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setCompilerVersion(event.target.value);
+  };
+
+  return (
+    <Form.Group>
+      <Form.Label>Compiler Version</Form.Label>
+      <Form.Control
+        as="select"
+        className="disabled:!text-gray-400 disabled:cursor-not-allowed"
+        value={compilerVersion}
+        size="sm"
+        onChange={handleCompilerVersionOnChange}
+      >
+        {compilerVersions &&
+          compilerVersions.map((item, index) => {
+            return (
+              <option value={item} key={index}>
+                {item}
+              </option>
+            );
+          })}
+      </Form.Control>
+    </Form.Group>
+  );
+};
+
 const Account = () => {
   const { address } = useStore(useShallow((state) => ({ address: state.account.address.data })));
   return (

src/zustand/project.ts

@@ -31,6 +31,16 @@ const initial = {
     error: false,
     data: ARBITRUM_NETWORK,
   },
+  compilerVersion: {
+    loading: false,
+    error: false,
+    data: "v0.5.3",
+  },
+  compilerVersions: {
+    loading: false,
+    error: false,
+    data: ["v0.5.1", "v0.5.3"],
+  },
   projects: {
     loading: false,
     error: false,
@@ -75,6 +85,12 @@ export const createProjectStore: StateCreator<ProjectState & GlobalState, [], []
           state.project.project.data = project;
         })
       ),
+    setCompilerVersion: (compilerVersion: string) =>
+      set(
+        produce((state: ProjectState) => {
+          state.project.compilerVersion.data = compilerVersion;
+        })
+      ),
     fetchProjects: async () => {
       const client = get().global.client;
       if (!client) {

src/zustand/project.types.ts

@@ -11,6 +11,8 @@ export interface ProjectState {
     projects: DataType<string[]>;
     networks: NonNullableDataType<typeof ARBITRUM_NETWORK>;
     network: NonNullableDataType<typeof ARBITRUM_ONE>;
+    compilerVersion: NonNullableDataType<string>;
+    compilerVersions: NonNullableDataType<string[]>;
     upload: NonNullableDataType<boolean>;
     setErrorMsg: (msg: string | null) => void;
     setName: (name: string) => void;
@@ -19,6 +21,7 @@ export interface ProjectState {
     fetchProjects: () => Promise<void>;
     setProject: (project: string) => void;
     setNetwork: (network: typeof ARBITRUM_ONE) => void;
+    setCompilerVersion: (compilerVersion: string) => void;
     setUpload: (upload: boolean) => void;
     reset: () => void;
   };