feat: add openzeppelin example code

Author: markjung96

src/components/project/index.tsx

@@ -337,19 +337,29 @@ const NewProject = () => {
 };
 
 const Template = () => {
-  const { client, template, setTemplate, templates, fetchProjects, compileLoading, deployLoading, activateLoading } =
-    useStore(
-      useShallow((state) => ({
-        client: state.global.client,
-        template: state.project.template.data,
-        setTemplate: state.project.setTemplate,
-        templates: state.project.templates.data,
-        fetchProjects: state.project.fetchProjects,
-        compileLoading: state.compile.loading,
-        deployLoading: state.deploy.loading,
-        activateLoading: state.activate.loading,
-      }))
-    );
+  const {
+    client,
+    template,
+    setTemplate,
+    templates,
+    openzeppelinTemplates,
+    fetchProjects,
+    compileLoading,
+    deployLoading,
+    activateLoading,
+  } = useStore(
+    useShallow((state) => ({
+      client: state.global.client,
+      template: state.project.template.data,
+      setTemplate: state.project.setTemplate,
+      templates: state.project.templates.data,
+      openzeppelinTemplates: state.project.openzeppelinTemplates.data,
+      fetchProjects: state.project.fetchProjects,
+      compileLoading: state.compile.loading,
+      deployLoading: state.deploy.loading,
+      activateLoading: state.activate.loading,
+    }))
+  );
   const isLoading = compileLoading || deployLoading || activateLoading;
 
   const createTemplate = async () => {
@@ -419,14 +429,26 @@ const Template = () => {
       <Form.Label>Select a Template</Form.Label>
       <InputGroup>
         <Form.Control className="custom-select" as="select" value={template ?? ""} onChange={handleTemplateOnChange}>
-          {templates &&
-            templates.map((temp, idx) => {
-              return (
-                <option value={temp} key={idx}>
-                  {temp}
-                </option>
-              );
-            })}
+          <optgroup label="OpenZeppelin Templates">
+            {openzeppelinTemplates &&
+              openzeppelinTemplates.map((temp: string, idx: number) => {
+                return (
+                  <option value={temp} key={`oz-${idx}`}>
+                    {temp}
+                  </option>
+                );
+              })}
+          </optgroup>
+          <optgroup label="Basic Templates">
+            {templates &&
+              templates.map((temp, idx) => {
+                return (
+                  <option value={temp} key={idx}>
+                    {temp}
+                  </option>
+                );
+              })}
+          </optgroup>
         </Form.Control>
         <Button
           className="relative border-0"

src/zustand/project.ts

@@ -14,13 +14,40 @@ const initial = {
   template: {
     loading: false,
     error: false,
-    data: "hello-world",
+    data: "erc20",
   },
   templates: {
     loading: false,
     error: false,
     data: ["hello-world", "single_call", "vending_machine"],
   },
+  openzeppelinTemplates: {
+    loading: false,
+    error: false,
+    data: [
+      "erc4626",
+      "safe-erc20",
+      "erc721",
+      "erc1155",
+      "erc20",
+      "erc1155-supply",
+      "vesting-wallet",
+      "erc20-flash-mint",
+      "erc721-wrapper",
+      "erc20-wrapper",
+      "access-control",
+      "ownable-two-step",
+      "erc721-metadata",
+      "erc721-consecutive",
+      "erc20-permit",
+      "ownable",
+      "ecdsa",
+      "poseidon",
+      "erc1155-metadata-uri",
+      "pedersen",
+      "merkle-proofs",
+    ],
+  },
   network: {
     loading: false,
     error: false,

src/zustand/project.types.ts

@@ -6,6 +6,7 @@ export interface ProjectState {
     errorMsg: string | null;
     name: DataType<string>;
     templates: DataType<string[]>;
+    openzeppelinTemplates: DataType<string[]>;
     template: DataType<string>;
     project: DataType<string>;
     projects: DataType<string[]>;