Merge pull request #193 from hackdays-io/feature/front-hooks-ipfs

Feature/front hooks ipfs

pkgs/frontend/.env.example

@@ -10,4 +10,6 @@ VITE_FRACTION_TOKEN_ADDRESS=0xb8f7ca7a5b1e457b8735884419e114f90d53e1d5
 
 VITE_SPLITS_CREATOR_ADDRESS=0x9c3648df4bb82fdf067a9b083900a986f9b27e9a
 
-VITE_PIMLICO_API_KEY=
+VITE_PIMLICO_API_KEY=
+
+VITE_PINATA_JWT=

pkgs/frontend/hooks/useIpfs.ts

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { PinataSDK } from "pinata-web3";
+import { Readable } from "stream";
+
+export const useUploadMetadataToIpfs = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const uploadMetadataToIpfs = async ({
+    name,
+    description,
+    responsibilities,
+    authorities,
+    eligibility,
+    toggle,
+  }: {
+    name: string;
+    description: string;
+    responsibilities: string;
+    authorities: string;
+    eligibility: boolean;
+    toggle: boolean;
+  }) => {
+    setIsLoading(true);
+
+    try {
+      const pinata = new PinataSDK({ pinataJwt: process.env.VITE_PINATA_JWT });
+
+      const upload = await pinata.upload.json({
+        type: "1.0",
+        data: {
+          name,
+          description,
+          responsibilities,
+          authorities,
+          eligibility,
+          toggle,
+        },
+      });
+
+      console.log("CID:", upload.IpfsHash);
+      console.log("URI:", `ipfs://${upload.IpfsHash}`);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { uploadMetadataToIpfs, isLoading };
+};
+
+export const useUploadImageToIpfs = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+
+  const uploadImageToIpfs = async () => {
+    if (!imageFile) return;
+
+    setIsLoading(true);
+
+    try {
+      const pinata = new PinataSDK({ pinataJwt: process.env.VITE_PINATA_JWT });
+
+      const buffer = await imageFile.arrayBuffer();
+      const stream = Readable.from(Buffer.from(buffer));
+
+      const upload = await pinata.upload.stream(stream, {
+        metadata: { name: `TobanFrontend_${new Date().getTime()}` },
+      });
+
+      console.log("CID:", upload.IpfsHash);
+      console.log("URI:", `ipfs://${upload.IpfsHash}`);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { uploadImageToIpfs, setImageFile, isLoading };
+};