diff --git a/packages/builder/package.json b/packages/builder/package.json
index 851b738af..04b836e53 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -2,7 +2,7 @@
"name": "builder",
"version": "0.1.0",
"private": true,
- "engines": {
+ "engines": {
"npm": ">=8.5.5",
"node": ">=20.1.0"
},
@@ -16,6 +16,7 @@
"@datadog/browser-rum": "^4.16.0",
"@ethersproject/address": "^5.7.0",
"@ethersproject/providers": "^5.7.2",
+ "gap": "file:../gap",
"@gitcoinco/passport-sdk-types": "^0.2.0",
"@headlessui/react": "^1.6.5",
"@heroicons/react": "^2.0.11",
diff --git a/packages/builder/src/components/application/Form.tsx b/packages/builder/src/components/application/Form.tsx
index 5c2875f96..f9e0f9252 100644
--- a/packages/builder/src/components/application/Form.tsx
+++ b/packages/builder/src/components/application/Form.tsx
@@ -1,3 +1,4 @@
+// Form.tsx
import { Stack } from "@chakra-ui/react";
import { datadogRum } from "@datadog/browser-rum";
import { getConfig } from "common/src/config";
@@ -16,6 +17,7 @@ import {
RoundApplicationMetadata,
} from "data-layer/dist/roundApplication.types";
import { getChainById, useValidateCredential } from "common";
+import { useGap } from "gap";
import { Fragment, useEffect, useState } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
@@ -373,6 +375,136 @@ export default function Form({
const needsProject = !schema.questions.find((q) => q.type === "project");
const now = new Date().getTime() / 1000;
+ const {
+ getProjectById,
+ createProject,
+ createGrant,
+ createMilestone,
+ project,
+ milestones,
+ isGapLoading,
+ error,
+ } = useGap(process.env.REACT_APP_KARMA_GAP_INDEXER_URL!);
+
+ const [newProjectData, setNewProjectData] = useState<{
+ title: string;
+ description: string;
+ imageURL: string;
+ links?: { type: string; url: string }[];
+ tags?: { name: string }[];
+ members?: `0x${string}`[];
+ }>({
+ title: "",
+ description: "",
+ imageURL: "",
+ links: [],
+ tags: [],
+ members: [],
+ });
+
+ const [newGrantData, setNewGrantData] = useState<{
+ communityUID: string;
+ title: string;
+ proposalURL: string;
+ description?: string;
+ cycle?: string;
+ season?: string;
+ milestones?: Array<{
+ title: string;
+ description: string;
+ endsAt: number;
+ }>;
+ }>({
+ communityUID: "",
+ title: "",
+ proposalURL: "",
+ description: "",
+ cycle: "",
+ season: "",
+ milestones: [],
+ });
+
+ const [newMilestoneData, setNewMilestoneData] = useState<{
+ title: string;
+ description: string;
+ endsAt: number;
+ }>({
+ title: "",
+ description: "",
+ endsAt: Date.now(),
+ });
+
+ const handleNewProjectInputChange = (e: ChangeHandlers) => {
+ const { name, value } = e.target;
+ setNewProjectData((prevData) => ({
+ ...prevData,
+ [name]: value,
+ }));
+ };
+
+ const handleNewGrantInputChange = (e: ChangeHandlers) => {
+ const { name, value } = e.target;
+ setNewGrantData((prevData) => ({
+ ...prevData,
+ [name]: value,
+ }));
+ };
+
+ const handleNewMilestoneInputChange = (
+ e: React.ChangeEvent<
+ HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+ >
+ ) => {
+ const { name, value } = e.target;
+ let updatedValue: string | number = value;
+
+ if (name === "endsAt") {
+ updatedValue = new Date(value).getTime();
+ }
+
+ setNewMilestoneData((prevData) => ({
+ ...prevData,
+ [name]: updatedValue,
+ }));
+ };
+
+ const handleCreateMilestone = async () => {
+ try {
+ setIsLoading(true);
+
+ // Step 1: Create Project
+ const projectResult = await createProject(newProjectData);
+
+ // Step 2: Create Grant
+ const grantResult = await createGrant(
+ newGrantData,
+ projectResult.projectUID
+ );
+
+ // Step 3: Create Milestone
+ await createMilestone(newMilestoneData, grantResult.grantUID);
+
+ // After creating everything, refresh the project data
+ getProjectById(projectResult.projectUID);
+ setIsLoading(false);
+ } catch (err) {
+ console.error("Error creating milestone:", err);
+ setIsLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ if (isValidProjectSelected && selectedProjectID) {
+ getProjectById(selectedProjectID);
+ }
+ }, [isValidProjectSelected, selectedProjectID, getProjectById]);
+
+ useEffect(() => {
+ if (project) {
+ console.log("Project found:", project);
+ }
+ }, [project]);
+
return (
<>
{preview && selectedProjectMetadata && (
@@ -455,6 +587,195 @@ export default function Form({
);
}
+ if (input.title === "Milestones") {
+ const renderMilestoneContent = () => {
+ if (isGapLoading) {
+ return Loading project information...
;
+ }
+ if (project) {
+ return (
+
+
Project Title: {project.title}
+ {/* Display existing milestones if any */}
+ {milestones && milestones.length > 0 ? (
+
+
Existing Milestones:
+
+ {milestones.map((milestone) => (
+ -
+ {milestone.title}:
+ {milestone.description}
+
+ ))}
+
+
+ ) : (
+
No milestones found for this project.
+ )}
+ {/* Form to create a new milestone */}
+
Create a New Milestone
+
+
+ {/* Date input for endsAt */}
+
+ {/* Create Milestone Button */}
+
+
+
No project found in Karma GAP for this application.
+
+ Please enter the project details to create a new
+ project, grant, and milestone.
+
+ {/* Form to create a new project */}
+
Create a New Project
+
+
+ {/* Form to create a new grant */}
+
Create a New Grant
+
+
+ {/* Form to create a new milestone */}
+
Create a New Milestone
+
+
+ {/* Date input for endsAt */}
+
+ {/* Create Milestone Button */}
+
+
Loading project information...
;
+ };
+ return (
+
+
+ {isValidProjectSelected && selectedProjectID ? (
+ renderMilestoneContent()
+ ) : (
+
Please select a project to view or create milestones.
+ )}
+