feat: add DownloadResult component for downloading task results from IPFS

Author: ErwanDecoster

src/config.ts

@@ -7,6 +7,9 @@ export const DETAIL_TABLE_LENGTH = 8;
 export const TABLE_LENGTH = 16;
 export const PREVIEW_TABLE_REFETCH_INTERVAL = 10_000;
 export const TABLE_REFETCH_INTERVAL = 10_000;
+
+export const IPFS_GATEWAY_URL = 'https://ipfs.iex.ec';
+
 export const SUPPORTED_CHAINS = [
   {
     id: 134,

src/modules/deals/deal/buildDealDetails.tsx

@@ -172,8 +172,6 @@ export function buildDealDetails({
               </span>
             )}
           </span>
-
-          {/* {isClaimable && <ClaimFailedDeal taskId="" />} // TODO  */}
         </span>
       ),
     }),

src/modules/tasks/DownloadResult.tsx

@@ -0,0 +1,78 @@
+import { IPFS_GATEWAY_URL } from '@/config';
+import { cn } from '@/lib/utils';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { LoaderCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { taskResultToObject } from '@/utils/format';
+
+async function fetchZipFromIpfs(taskid: string, location: string) {
+  const url = `${IPFS_GATEWAY_URL}${location}`;
+
+  const res = await fetch(url, {
+    headers: {
+      Accept: 'application/zip',
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error('Download error');
+  }
+
+  const blob = await res.blob();
+  const downloadUrl = URL.createObjectURL(blob);
+
+  const link = document.createElement('a');
+  link.href = downloadUrl;
+  link.download = `${taskid}.zip`;
+  link.click();
+
+  URL.revokeObjectURL(downloadUrl);
+}
+
+export function DownloadResult({
+  taskid,
+  taskResults,
+  className,
+}: {
+  taskid: string;
+  taskResults?: string | null;
+  className?: string;
+}) {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: downloadTaskResult,
+    isPending,
+    isError,
+  } = useMutation({
+    mutationFn: async () => {
+      const { location } = taskResultToObject(taskResults);
+
+      if (!location) throw new Error('Invalid location');
+      await fetchZipFromIpfs(taskid, location);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['task', taskid] });
+    },
+  });
+
+  if (!taskid || !taskResults) return null;
+
+  return (
+    <>
+      <Button
+        variant="link"
+        className={cn('text-white underline', className)}
+        onClick={() => downloadTaskResult()}
+      >
+        Download task result
+        {isPending && <LoaderCircle className="ml-2 animate-spin" />}
+      </Button>
+      {isError && (
+        <p className="text-danger-foreground content-center">
+          An error occurred please try again
+        </p>
+      )}
+    </>
+  );
+}

src/modules/tasks/task/buildTaskDetails.tsx

@@ -11,6 +11,7 @@ import {
 } from '@/utils/formatElapsedTime';
 import { truncateAddress } from '@/utils/truncateAddress';
 import { ClaimButton } from '../ClaimButton';
+import { DownloadResult } from '../DownloadResult';
 import StatusCell from '../StatusCell';
 
 export function buildTaskDetails({ task }: { task: TaskQuery['task'] }) {
@@ -119,10 +120,7 @@ export function buildTaskDetails({ task }: { task: TaskQuery['task'] }) {
         <div>
           <StatusCell statusEnum={task.status} />
           <ClaimButton tasks={[task]} className="text-white underline" />
-          {/* {task.results &&
-            taskResultToObject(task.results)?.storage === 'ipfs' && (
-               TODO add Download result archive button
-            )} */}
+          <DownloadResult taskid={task.taskid} taskResults={task.results} />
         </div>
       ),
     }),