Implement payout justification upload

Author: carina-akaia

package.json

@@ -85,7 +85,6 @@
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.3.0",
-    "formidable": "^3.5.2",
     "immer": "^9.0.21",
     "lucide-react": "^0.378.0",
     "markdown-truncate": "^1.1.1",
@@ -110,7 +109,6 @@
     "remark-gfm": "^4.0.0",
     "remeda": "^2.10.1",
     "sass": "^1.77.2",
-    "server-only": "^0.0.1",
     "styled-components": "^6.1.11",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.3.0",
@@ -161,4 +159,4 @@
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"
   }
-}
+}

src/app/api/files/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+
+import { pinataClient } from "@/common/services/pinata";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * @link https://docs.pinata.cloud/frameworks/next-js-ipfs#create-api-route-2
+ */
+export async function GET() {
+  try {
+    const uuid = crypto.randomUUID();
+
+    const keyData = await pinataClient.sdk.keys.create({
+      keyName: uuid.toString(),
+      maxUses: 1,
+      permissions: { endpoints: { pinning: { pinFileToIPFS: true } } },
+    });
+
+    return NextResponse.json(keyData, { status: 200 });
+  } catch (error) {
+    console.log(error);
+    return NextResponse.json({ text: "Error creating API Key:" }, { status: 500 });
+  }
+}

src/app/api/pinata/get-auth-key/route.ts

@@ -0,0 +1,23 @@
+"server-only";
+
+import { type KeyResponse, type PinResponse, PinataSDK } from "pinata-web3";
+import { identity } from "remeda";
+
+import { IPFS_GATEWAY_URL } from "@/common/_config";
+
+export const sdk = new PinataSDK({
+  pinataJwt: process.env.PINATA_JWT,
+  pinataGateway: IPFS_GATEWAY_URL,
+});
+
+export type FileUploadParams = {
+  file: File;
+};
+
+export const upload = ({ file }: FileUploadParams): Promise<PinResponse> =>
+  fetch("/api/pinata/get-auth-key")
+    .then((response) => response.json())
+    .then(({ JWT }: KeyResponse) => sdk.upload.file(file).key(JWT).then(identity()))
+    .catch((error) => {
+      throw new Error(error.message || "Unable to retrieve Pinata auth key");
+    });

src/common/services/pinata/client.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+import type { PinResponse } from "pinata-web3";
+
+import * as client from "./client";
+
+// TODO: QA, built-in `const ipfsUrl = await pinata.gateways.convert(upload.IpfsHash)`
+export const useFileUpload = () => {
+  const [file, setFile] = useState<File>();
+  const [isPending, setIsPending] = useState(false);
+  const [response, setResponse] = useState<PinResponse | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  const upload = useCallback(() => {
+    if (file) {
+      setIsPending(true);
+
+      client
+        .upload({ file })
+        .then(setResponse)
+        .catch(setError)
+        .finally(() => setIsPending(false));
+    } else setError(new Error("No file selected"));
+  }, [file]);
+
+  const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setFile(e.target?.files?.[0]);
+  }, []);
+
+  return {
+    isPending,
+    handleFileInputChange,
+    upload,
+    data: response ?? undefined,
+    error: error ?? undefined,
+  };
+};

src/common/services/pinata/hooks.ts

@@ -1 +1,6 @@
-export { pinataClient as pinata } from "./singleton.client";
+import * as pinataClient from "./client";
+import * as pinataHooks from "./hooks";
+
+export type * from "./hooks";
+
+export { pinataClient, pinataHooks };

src/common/services/pinata/index.ts

@@ -5,8 +5,10 @@ import type { ByPotId } from "@/common/api/indexer";
 import { FULL_TGAS } from "@/common/constants";
 import { potContractClient } from "@/common/contracts/core/pot";
 import { parseNearAmount } from "@/common/lib";
-import type { AccountId } from "@/common/types";
-import type { VotingRoundElectionResult, VotingRoundParticipants } from "@/entities/voting-round";
+import { pinataClient } from "@/common/services/pinata";
+import type { VotingRoundParticipants } from "@/entities/voting-round";
+
+import type { PFPayoutJustificationInputs } from "./types";
 
 export type PayoutSubmitInputs = ByPotId & {
   recipients: VotingRoundParticipants["winners"];
@@ -30,51 +32,47 @@ export const publishPayoutJustification = async ({
   potId,
   votingRoundResult,
   challengerAccountId,
-}: ByPotId & { votingRoundResult: VotingRoundElectionResult; challengerAccountId: AccountId }) => {
-  const uploadRequestBody = new FormData();
-
-  uploadRequestBody.set(
-    "file",
-
-    new File(
-      [new Blob([JSON.stringify(votingRoundResult)], { type: "application/json" })],
-      `${potId}_payout-justification.json`,
-    ),
-  );
-
-  const uploadRequest = await fetch("/api/files", { method: "POST", body: uploadRequestBody });
-
-  console.log(uploadRequest);
-
-  const args = {
-    challenge_payouts: {
-      reason: JSON.stringify({
-        PayoutJustification: "", // TODO: Pass URL from the upload request response
+}: PFPayoutJustificationInputs) =>
+  pinataClient
+    .upload({
+      file: new File(
+        [new Blob([JSON.stringify(votingRoundResult)], { type: "application/json" })],
+        `${potId}_payout-justification.json`,
+      ),
+    })
+    .then(({ IpfsHash }) =>
+      pinataClient.sdk.gateways.convert(IpfsHash).then((ipfsUrl) => {
+        const args = {
+          challenge_payouts: {
+            reason: JSON.stringify({
+              PayoutJustification: ipfsUrl,
+            }),
+          },
+
+          admin_update_payouts_challenge: {
+            challenger_id: challengerAccountId,
+            resolve_challenge: true,
+          },
+        };
+
+        return potContractClient.contractApi(potId).callMultiple([
+          {
+            method: "challenge_payouts",
+            args: args.challenge_payouts,
+            gas: FULL_TGAS,
+
+            deposit: parseNearAmount(calculateDepositByDataSize(args.challenge_payouts)) ?? "0",
+          } as Transaction<potContractClient.ChallengePayoutsArgs>,
+
+          {
+            method: "admin_update_payouts_challenge",
+            args: args.admin_update_payouts_challenge,
+            gas: FULL_TGAS,
+
+            deposit:
+              parseNearAmount(calculateDepositByDataSize(args.admin_update_payouts_challenge)) ??
+              "0",
+          } as Transaction<potContractClient.PayoutChallengeUpdateArgs>,
+        ] as Transaction<object>[]);
       }),
-    },
-
-    admin_update_payouts_challenge: {
-      challenger_id: challengerAccountId,
-      resolve_challenge: true,
-    },
-  };
-
-  return potContractClient.contractApi(potId).callMultiple([
-    {
-      method: "challenge_payouts",
-      args: args.challenge_payouts,
-      gas: FULL_TGAS,
-
-      deposit: parseNearAmount(calculateDepositByDataSize(args.challenge_payouts)) ?? "0",
-    } as Transaction<potContractClient.ChallengePayoutsArgs>,
-
-    {
-      method: "admin_update_payouts_challenge",
-      args: args.admin_update_payouts_challenge,
-      gas: FULL_TGAS,
-
-      deposit:
-        parseNearAmount(calculateDepositByDataSize(args.admin_update_payouts_challenge)) ?? "0",
-    } as Transaction<potContractClient.PayoutChallengeUpdateArgs>,
-  ] as Transaction<object>[]);
-};
+    );

src/common/services/pinata/singleton.client.ts

@@ -0,0 +1,8 @@
+import type { ByPotId } from "@/common/api/indexer";
+import type { AccountId } from "@/common/types";
+import type { VotingRoundElectionResult } from "@/entities/voting-round";
+
+export type PFPayoutJustificationInputs = ByPotId & {
+  votingRoundResult: VotingRoundElectionResult;
+  challengerAccountId: AccountId;
+};