Add Allo V2 SDK and Implement Project Creation with Common Interface

packages/builder/package.json

@@ -72,9 +72,10 @@
     "tailwindcss": "^3.0.24",
     "ts-debounce": "^4.0.0",
     "ts-jest": "^27.0",
-    "typescript": "^4.6.3",
+    "typescript": "^5.3.3",
     "url": "^0.11.0",
     "verify-env": "*",
+    "viem": "^1.5.3",
     "wagmi": "^0.12.19",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11",

packages/builder/src/__tests__/components/grants/List.test.tsx

@@ -73,7 +73,7 @@ describe("<List />", () => {
 
     test("should not be called if it's already loading", async () => {
       const store = setupStore();
-      store.dispatch({ type: "PROJECTS_LOADING", payload: 0 });
+      store.dispatch({ type: "PROJECTS_LOADING", payload: 10 });
 
       renderWrapped(<List />, store);
 
@@ -105,7 +105,7 @@ describe("<List />", () => {
       store.dispatch({
         type: "PROJECTS_LOADED",
         payload: {
-          chainID: 0,
+          chainID: 10,
           events: {
             "1:1:1": {
               createdAtBlock: 1111,
@@ -138,7 +138,7 @@ describe("<List />", () => {
       store.dispatch({
         type: "PROJECTS_LOADED",
         payload: {
-          chainID: 0,
+          chainID: 10,
           events: {
             "1:1:1": {
               createdAtBlock: 1111,
@@ -173,7 +173,7 @@ describe("<List />", () => {
       store.dispatch({
         type: "PROJECTS_LOADED",
         payload: {
-          chainID: 0,
+          chainID: 10,
           events: {
             "1:1:1": {
               createdAtBlock: 1111,
@@ -205,7 +205,7 @@ describe("<List />", () => {
 
       store.dispatch({
         type: "PROJECTS_LOADED",
-        payload: { chainID: 0, events: {} },
+        payload: { chainID: 10, events: {} },
       });
 
       renderWrapped(<List />, store);
@@ -218,7 +218,7 @@ describe("<List />", () => {
     describe("projects", () => {
       test("should show a loading element", async () => {
         const store = setupStore();
-        store.dispatch({ type: "PROJECTS_LOADING", payload: 0 });
+        store.dispatch({ type: "PROJECTS_LOADING", payload: 10 });
 
         renderWrapped(<List />, store);
 
@@ -230,7 +230,7 @@ describe("<List />", () => {
         const store = setupStore();
         store.dispatch({
           type: "PROJECTS_LOADED",
-          payload: { chainID: 0, events: {} },
+          payload: { chainID: 10, events: {} },
         });
 
         renderWrapped(<List />, store);
@@ -247,7 +247,7 @@ describe("<List />", () => {
 
         store.dispatch({
           type: "PROJECTS_LOADED",
-          payload: { chainID: 0, events: projectEventsMap },
+          payload: { chainID: 10, events: projectEventsMap },
         });
         store.dispatch({
           type: "GRANT_METADATA_FETCHED",
@@ -273,7 +273,7 @@ describe("<List />", () => {
 
         store.dispatch({
           type: "PROJECTS_LOADED",
-          payload: { chainID: 0, events: projectEventsMap },
+          payload: { chainID: 10, events: projectEventsMap },
         });
 
         store.dispatch({
@@ -366,7 +366,7 @@ describe("<List />", () => {
 
         store.dispatch({
           type: "PROJECTS_LOADED",
-          payload: { chainID: 0, events: projectEventsMap },
+          payload: { chainID: 10, events: projectEventsMap },
         });
 
         store.dispatch({
@@ -397,7 +397,7 @@ describe("<List />", () => {
           store.dispatch({
             type: "PROJECTS_LOADED",
             payload: {
-              chainID: 0,
+              chainID: 10,
               events: {
                 "1:1:1": {
                   createdAtBlock: 1111,

packages/builder/src/__tests__/components/rounds/Show.test.tsx

@@ -145,7 +145,7 @@ describe("<Show />", () => {
         (loadRound as jest.Mock).mockReturnValue({ type: "TEST" });
         (unloadRounds as jest.Mock).mockReturnValue({ type: "TEST" });
 
-        store.dispatch({ type: "PROJECTS_LOADING", payload: 0 });
+        store.dispatch({ type: "PROJECTS_LOADING", payload: 10 });
 
         renderWrapped(<Show />, store);
 
@@ -169,7 +169,7 @@ describe("<Show />", () => {
         store.dispatch({
           type: "PROJECTS_LOADED",
           payload: {
-            chainID: 0,
+            chainID: 10,
             events: {},
           },
         });
@@ -187,7 +187,7 @@ describe("<Show />", () => {
         store.dispatch({
           type: "PROJECTS_LOADED",
           payload: {
-            chainID: 0,
+            chainID: 10,
             events: {},
           },
         });
@@ -224,7 +224,7 @@ describe("<Show />", () => {
       store.dispatch({
         type: "PROJECTS_LOADED",
         payload: {
-          chainID: 0,
+          chainID: 10,
           events: {},
         },
       });
@@ -257,7 +257,7 @@ describe("<Show />", () => {
       store.dispatch({
         type: "PROJECTS_LOADED",
         payload: {
-          chainID: 0,
+          chainID: 10,
           events: {},
         },
       });

packages/builder/src/__tests__/reducers/projects.test.ts

@@ -219,7 +219,7 @@ describe("projects reducer", () => {
     // start loading chain 0
     const state1: ProjectsState = projectsReducer(state, {
       type: "PROJECTS_LOADING",
-      payload: 0,
+      payload: 10,
     });
 
     expect(state1.status).toEqual(Status.Loading);
@@ -250,7 +250,7 @@ describe("projects reducer", () => {
     const state4: ProjectsState = projectsReducer(state3, {
       type: "PROJECTS_LOADED",
       payload: {
-        chainID: 0,
+        chainID: 10,
         events: {},
       },
     });

packages/builder/src/actions/newGrant.ts

@@ -1,11 +1,9 @@
 import { datadogLogs } from "@datadog/browser-logs";
 import { datadogRum } from "@datadog/browser-rum";
-import { ethers } from "ethers";
 import { Dispatch } from "redux";
 import { getConfig } from "common/src/config";
-import ProjectRegistryABI from "../contracts/abis/ProjectRegistry.json";
-import { addressesByChainID } from "../contracts/deployments";
-import { global } from "../global";
+import { Allo, AnyJson } from "common";
+import { ethers } from "ethers";
 import { RootState } from "../reducers";
 import { NewGrant, Status } from "../reducers/newGrant";
 import PinataClient from "../services/pinata";
@@ -66,10 +64,12 @@ export const grantCreated = ({
   owner,
 });
 
+// todo: wire in metadata update
 export const publishGrant =
-  (fullId?: string) =>
+  (allo: Allo, fullId?: string) =>
   async (dispatch: Dispatch, getState: () => RootState) => {
     const state = getState();
+
     const { metadata: formMetaData, credentials: formCredentials } =
       state.projectForm;
 
@@ -114,67 +114,50 @@ export const publishGrant =
       : Date.now();
 
     dispatch(grantStatus(Status.UploadingJSON));
-    let resp;
-    try {
-      resp = await pinataClient.pinJSON(application);
-    } catch (e) {
-      datadogRum.addError(e);
-      datadogLogs.logger.error("ipfs: error uploading metadata");
-      console.error("ipfs: error uploading metadata", e);
-    }
 
-    const metadataCID = resp.IpfsHash;
-    const { chainID } = state.web3;
-    const addresses = addressesByChainID(chainID!);
-    const { signer } = global;
-    const projectRegistry = new ethers.Contract(
-      addresses.projectRegistry!,
-      ProjectRegistryABI,
-      signer
-    );
-
-    dispatch(grantStatus(Status.WaitingForSignature));
-    let projectTx;
-    try {
-      if (grantId !== undefined) {
-        try {
-          projectTx = await projectRegistry.updateProjectMetadata(grantId, {
-            protocol: 1,
-            pointer: metadataCID,
-          });
-        } catch (e) {
-          datadogRum.addError(e);
-          datadogLogs.logger.warn("transaction error");
-          dispatch(grantError("transaction error", Status.Error));
-          console.error("tx error", e);
-          return;
+    const result = grantId
+      ? allo.updateProjectMetadata({
+          projectId: ethers.utils.hexlify(Number(grantId)) as `0x${string}`,
+          metadata: application as unknown as AnyJson,
+        })
+      : allo.createProject({
+          name: application.title,
+          metadata: application as unknown as AnyJson,
+        });
+
+    await result
+      .on("ipfs", (res) => {
+        if (res.type === "success") {
+          console.log("IPFS CID", res.value);
+          dispatch(grantStatus(Status.WaitingForSignature));
+        } else {
+          console.error("IPFS Error", res.error);
+          datadogRum.addError(res.error);
+          datadogLogs.logger.error("ipfs: error uploading metadata");
         }
-      } else {
-        try {
-          projectTx = await projectRegistry.createProject({
-            protocol: 1,
-            pointer: metadataCID,
-          });
-        } catch (e) {
-          datadogRum.addError(e);
+      })
+      .on("transaction", (res) => {
+        if (res.type === "success") {
+          dispatch(grantStatus(Status.TransactionInitiated));
+          console.log("Transaction", res.value);
+        } else {
+          console.error("Transaction Error", res.error);
+          datadogRum.addError(res.error);
           datadogLogs.logger.warn("transaction error");
           dispatch(grantError("transaction error", Status.Error));
-          console.error("tx error", e);
-          return;
         }
-      }
-    } catch (e) {
-      datadogRum.addError(e);
-      datadogLogs.logger.warn("transaction error");
-      dispatch(grantError("transaction error", Status.Error));
-      console.error("tx error", e);
-      return;
-    }
-
-    dispatch(grantStatus(Status.TransactionInitiated));
-    const txStatus = await projectTx.wait();
+      })
+      .on("transactionStatus", (res) => {
+        if (res.type === "success") {
+          dispatch(grantStatus(Status.Completed));
+          console.log("Transaction Status", res.value);
+        } else {
+          dispatch(grantStatus(Status.Error));
+          console.log("Transaction Status Error", res.error);
+        }
+      })
+      .execute();
 
-    if (txStatus.status) {
-      dispatch(grantStatus(Status.Completed));
-    }
+    console.log("result");
+    console.log(result);
   };

packages/builder/src/components/AlloWrapper.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import {
+  Allo,
+  // AlloV2,
+  AlloProvider,
+  createPinataIpfsUploader,
+  waitForSubgraphSyncTo,
+  createEthersTransactionSender,
+  AlloV1,
+} from "common";
+import { useNetwork, useProvider, useSigner } from "wagmi";
+import { getConfig } from "common/src/config";
+import { addressesByChainID } from "../contracts/deployments";
+
+function AlloWrapper({ children }: { children: JSX.Element | JSX.Element[] }) {
+  const { chain } = useNetwork();
+  const web3Provider = useProvider();
+  const { data: signer } = useSigner();
+  const chainID = chain?.id;
+
+  const [backend, setBackend] = useState<Allo | null>(null);
+
+  useEffect(() => {
+    console.log("AlloWrapper: useEffect", web3Provider, signer, chainID);
+    if (!web3Provider || !signer || !chainID) {
+      setBackend(null);
+    } else {
+      // const alloBackend: Allo = new AlloV2({
+      //   chainId: chainID,
+      //   transactionSender: createEthersTransactionSender(signer, web3Provider),
+      //   projectRegistryAddress: "0x0000000000000000000000000000000000000000",
+      //   ipfsUploader: createPinataIpfsUploader({
+      //     token: getConfig().pinata.jwt,
+      //     endpoint: `${getConfig().pinata.baseUrl}/pinning/pinFileToIPFS`,
+      //   }),
+      //   waitUntilIndexerSynced: waitForSubgraphSyncTo,
+      // });
+
+      const addresses = addressesByChainID(chainID!);
+
+      const alloBackend: Allo = new AlloV1({
+        chainId: chainID,
+        transactionSender: createEthersTransactionSender(signer, web3Provider),
+        projectRegistryAddress: addresses?.projectRegistry! as `0x${string}`,
+        ipfsUploader: createPinataIpfsUploader({
+          token: getConfig().pinata.jwt,
+          endpoint: `${getConfig().pinata.baseUrl}/pinning/pinFileToIPFS`,
+        }),
+        waitUntilIndexerSynced: waitForSubgraphSyncTo,
+      });
+
+      setBackend(alloBackend);
+    }
+  }, [web3Provider, signer, chainID]);
+
+  return <AlloProvider backend={backend}>{children}</AlloProvider>;
+}
+
+export default AlloWrapper;

packages/builder/src/components/base/Preview.tsx

@@ -1,3 +1,4 @@
+import { useAllo } from "common";
 import { useEffect, useState } from "react";
 import { shallowEqual, useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
@@ -54,10 +55,12 @@ export default function Preview({
     dispatch(resetStatus());
   };
 
+  const allo = useAllo();
+
   const publishProject = async () => {
     setSubmitted(true);
     showModal(true);
-    dispatch(publishGrant(currentProjectId));
+    dispatch(publishGrant(allo, currentProjectId));
   };
 
   const navigate = useNavigate();