fix: fileupload toast and types

apps/storybook/package.json

@@ -79,7 +79,7 @@
 		"ethers": "^6.13.2",
 		"happy-dom": "^15.11.6",
 		"jsdom": "^25.0.1",
-		"ky": "^1.7.2",
+		"ky": "^1.8.1",
 		"lodash": "^4.17.21",
 		"lucide-react": "^0.446.0",
 		"micro-packed": "^0.6.3",

apps/storybook/src/stories/filecoin/UploadDropzone.stories.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import config from "@geist/domain/config";
+import UploadDropzone from "@geist/ui-react/components/filecoin/upload-dropzone";
 import { uploadFiles } from "@geist/ui-react/lib/filecoin/lighthouse/browser";
 import { withToaster } from "../decorators/toaster";
-import UploadDropzone from "./UploadDropzone";
+
 import { uploadSuccessToast } from "./upload-toast";
 
 const meta = {

apps/storybook/src/stories/filecoin/UploadForm.stories.tsx

@@ -11,12 +11,12 @@ import {
 	uploadFiles as uploadFilesStoracha,
 } from "@geist/ui-react/lib/filecoin/storacha/isomorphic";
 
-import { withToaster } from "../decorators/toaster";
 import {
 	type UploadFilesParams,
 	UploadForm,
 	UploadFormType,
-} from "./UploadForm";
+} from "@geist/ui-react/components/filecoin/upload-form";
+import { withToaster } from "../decorators/toaster";
 import { uploadSuccessToast } from "./upload-toast";
 
 import config from "@geist/domain/config";

packages/domain/package.json

@@ -53,7 +53,7 @@
 		"ethers": "^6.13.2",
 		"graphql-request": "^7.1.0",
 		"happy-dom": "^15.11.6",
-		"ky": "^1.7.2",
+		"ky": "^1.8.1",
 		"lodash": "^4.17.21",
 		"micro-eth-signer": "^0.12.0",
 		"micro-packed": "^0.6.3",

packages/ui-react/package.json

@@ -112,7 +112,7 @@
 		"happy-dom": "^15.11.6",
 		"jsdom": "^25.0.1",
 		"sonner": "^2.0.3",
-		"ky": "^1.7.2",
+		"ky": "^1.8.1",
 		"lodash": "^4.17.21",
 		"lucide-react": "^0.446.0",
 		"micro-eth-signer": "^0.12.0",

packages/ui-react/src/components/attestations/attestation-form.tsx

@@ -63,8 +63,7 @@ export const AttestationForm = ({
 				? getShortHex(uid)
 				: `attested ${txnReceipt?.transactionHash}`;
 
-			toast.success({
-				title: "Attestation success",
+			toast.success("Attestation success", {
 				description,
 				action: (
 					<ToastAction altText="View on EASSCAN">

apps/storybook/src/stories/filecoin/UploadDropzone.tsx → packages/ui-react/src/components/filecoin/upload-dropzone.tsx

@@ -1,10 +1,10 @@
 import { Upload, X } from "lucide-react";
 import type React from "react";
 import { useCallback, useRef, useState } from "react";
-import { Alert, AlertDescription } from "#components/ui/alert";
-import { Button } from "#components/ui/button";
-import { Card } from "#components/ui/card";
-import { Progress } from "#components/ui/progress";
+import { Alert, AlertDescription } from "#components/shadcn/alert";
+import { Button } from "#components/shadcn/button";
+import { Card } from "#components/shadcn/card";
+import { Progress } from "#components/shadcn/progress";
 
 type FileWithPreview = File & {
 	preview: string;

apps/storybook/src/stories/filecoin/UploadForm.tsx → packages/ui-react/src/components/filecoin/upload-form.tsx

@@ -2,11 +2,11 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { type ZodType, z } from "zod";
 
-import { FileInputField } from "@geist/ui-react/components/file/file-input-field";
-import type { DownloadProgress } from "ky";
+import ky, { type Progress as UploadProgress } from "ky";
 import React from "react";
 import { toast } from "sonner";
-import { Button } from "#components/ui/button";
+import { FileInputField } from "#components/file/file-input-field";
+import { Button } from "#components/shadcn/button";
 import {
 	Form,
 	FormControl,
@@ -15,9 +15,9 @@ import {
 	FormItem,
 	FormLabel,
 	FormMessage,
-} from "#components/ui/form";
-import { Progress } from "#components/ui/progress";
-import { Textarea } from "#components/ui/textarea";
+} from "#components/shadcn/form";
+import { Progress } from "#components/shadcn/progress";
+import { Textarea } from "#components/shadcn/textarea";
 
 const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper porttitor massa, non placerat dolor rutrum vel. Morbi eu elit vitae odio hendrerit mollis. Proin at nibh auctor, laoreet ante vel, commodo leo. Sed viverra neque id lectus dictum, non accumsan tortor rhoncus. Fusce consectetur est vitae viverra pellentesque. Nunc pharetra felis libero, at rhoncus est euismod et. Morbi ac ultrices lectus, quis commodo eros. Etiam vestibulum finibus imperdiet. Nulla dictum tempor neque ac varius.
 Duis sed malesuada odio. Aenean fermentum tristique nunc a dictum. Donec posuere varius pharetra. Sed vitae nisi leo. Nam eget velit id erat sagittis molestie. Fusce feugiat turpis nec neque sodales, sit amet lobortis velit tempus. Curabitur nisi quam, consectetur in velit ac, gravida convallis ante. Etiam condimentum, ligula ut pharetra vehicula, odio ligula laoreet sem, et convallis metus mauris ut tellus. Fusce libero risus, vulputate a suscipit commodo, tincidunt vel ex. Duis quis ultrices ex, in feugiat dolor. Nullam ultrices lorem augue, ac pellentesque velit finibus vel.
@@ -30,7 +30,7 @@ Sed in faucibus ipsum. In in arcu ornare, maximus eros ac, volutpat turpis. Maec
 `;
 
 export type UploadFilesParams<T> = T & {
-	uploadProgressCallback?: (data: DownloadProgress) => void;
+	uploadProgressCallback?: (data: UploadProgress) => void;
 };
 
 export type UploadFormParams<T> = {
@@ -236,11 +236,10 @@ export const UploadFormWithFields = <S extends ZodType<any, any, any>>({
 			percent: 0.001,
 		});
 
-		const uploadProgressCallback = (data: DownloadProgress) => {
+		const uploadProgressCallback = (data: UploadProgress) => {
 			setProgress(data);
 		};
-		toast.success({
-			title: "You submitted the following values:",
+		toast.success("You submitted the following values:", {
 			description: (
 				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
 					<code className="text-white">{JSON.stringify(data, null, 2)}</code>

packages/ui-react/src/components/shadcn/alert.tsx

@@ -0,0 +1,59 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "#lib/shadcn/utils";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+	{
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+const Alert = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h5
+		ref={ref}
+		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+		{...props}
+	/>
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("text-sm [&_p]:leading-relaxed", className)}
+		{...props}
+	/>
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

packages/ui-react/src/hooks/eas/use-upload-attestation.ts

@@ -65,17 +65,15 @@ export const useUploadAttestationWithLighthouse = ({
 					accountAddress,
 					signedMessage,
 				);
-				toast.success({
-					title: `Encrypted Upload Successful for file : ${name}`,
+				toast.success(`Encrypted Upload Successful for file : ${name}`, {
 					description: getLighthouseGatewayUrl(cid),
 				});
 			} else {
 				const { name, cid } = await uploadText(
 					JSON.stringify(compiledPayload),
 					lighthouseApiKey,
 				);
-				toast.success({
-					title: `Upload Successful for file : ${name}`,
+				toast.success(`Upload Successful for file : ${name}`, {
 					description: getLighthouseGatewayUrl(cid),
 				});
 			}

packages/ui-react/src/lib/filecoin/lighthouse/browser.ts

@@ -5,7 +5,7 @@ import type {
 	DealParameters,
 	UploadFileReturnType,
 } from "@lighthouse-web3/sdk/dist/types";
-import ky, { type DownloadProgress } from "ky";
+import ky, { type Progress } from "ky";
 
 export const createLighthouseEndpoint = (isWrapWithDirectory = false) => {
 	const search = new URLSearchParams(
@@ -23,7 +23,7 @@ export type UploadLighthouseParams = {
 	files?: File[];
 	dealParameters?: DealParameters | undefined;
 	// use DownloadProgress over IUploadProgressCallback for more metadata
-	uploadProgressCallback?: (data: DownloadProgress) => void;
+	uploadProgressCallback?: (data: Progress) => void;
 };
 
 export const asFormData = (formData?: FormData, files?: File[]) => {
@@ -90,7 +90,7 @@ export const uploadFiles = async <T extends boolean>(
 	const results = await http
 		.post<UploadFileReturnType<T>>(endpoint, {
 			body: formData,
-			onDownloadProgress: (progress: DownloadProgress) => {
+			onUploadProgress: (progress: Progress) => {
 				if (uploadProgressCallback) {
 					uploadProgressCallback(progress);
 				}

packages/ui-react/src/lib/filecoin/lighthouse/isomorphic.ts

@@ -1,12 +1,17 @@
 import kavach from "@lighthouse-web3/kavach";
 import lighthouse from "@lighthouse-web3/sdk";
-import type { IUploadProgressCallback } from "@lighthouse-web3/sdk/dist/types";
-import ky, { type DownloadProgress } from "ky";
+import type {
+	IFileUploadedResponse,
+	IUploadProgressCallback,
+} from "@lighthouse-web3/sdk/dist/types";
+import ky, { type Progress } from "ky";
 import { http, type Account, createWalletClient } from "viem";
 import { sepolia } from "viem/chains";
-import type { GatewayStrategy } from "#lib/filecoin/gateway-strategy";
 import { uploadFiles as uploadFilesLighthouse } from "#lib/filecoin/lighthouse/browser";
-// import { CID } from 'multiformats/cid'
+
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
 
 // Supposedly lighthouse can be treeshake for node/browser, to be validated
 
@@ -43,7 +48,7 @@ export const signAuthMessage = async (account: any) => {
 
 	const { error, message } = authMessage;
 	if (error || !message) {
-		throw new Error("authMessage error" + error);
+		throw new Error(`authMessage error${error}`);
 	}
 
 	return client.signMessage({
@@ -60,23 +65,34 @@ export const signAuthMessage = async (account: any) => {
 export const uploadFiles = async (
 	files: File[],
 	apiKey: string,
-	uploadProgressCallback?: (data: DownloadProgress) => void,
+	uploadProgressCallback?: (data: Progress) => void,
 ): Promise<any> => {
-	let output;
+	let output: { data: IFileUploadedResponse };
+	if (files.length < 1) {
+		throw new Error("No files provided");
+	}
 
-	if (window) {
+	if (global.window) {
 		output = await uploadFilesLighthouse<false>({
-			files,
+			files: files as File[],
 			config: {
 				accessToken: apiKey,
 			},
 			uploadProgressCallback,
 		});
 	} else {
-		// currently accept first file as folder
-		const [file] = files;
+		// uploadBuffer do not support progress. write to temp dir for now
+		const [file] = files as [File];
+
+		const tempDir = os.tmpdir();
+		const uniqueId = `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+		const tempFilePath = path.join(tempDir, `${uniqueId}-${file.name}`);
+
+		// Write file to temp location
+		await fs.writeFile(tempFilePath, Buffer.from(await file.arrayBuffer()));
+
 		output = await lighthouse.upload(
-			file,
+			tempFilePath,
 			apiKey,
 			undefined,
 			(data: IUploadProgressCallback) => {
@@ -97,19 +113,18 @@ export const uploadFiles = async (
 	return {
 		name: output.data.Name,
 		cid: output.data.Hash,
-		size: parseInt(output.data.Size, 10),
+		size: Number.parseInt(output.data.Size, 10),
 	};
 };
 
 export const retrievePoDsi = async (cid: string) => {
-	let response = await ky.get(`${LIGHTHOUSE_API_ROOT}/get_proof`, {
+	const response = await ky.get(`${LIGHTHOUSE_API_ROOT}/get_proof`, {
 		searchParams: {
 			cid,
 			network: "testnet", // Change the network to mainnet when ready
 		},
 	});
-	const data = await response.json();
-	return JSON.parse(data);
+	return await response.json();
 };
 
 // .uploadText has no deal params options
@@ -126,7 +141,7 @@ export const uploadText = async (text: string, apiKey: string) => {
 	return {
 		name: data.Name,
 		cid: data.Hash,
-		size: parseInt(data.Size, 10),
+		size: Number.parseInt(data.Size, 10),
 	};
 };
 
@@ -151,8 +166,8 @@ export const uploadEncryptedFileWithText = async (
 	};
 };
 
-export const getLighthouseGatewayUrl: GatewayStrategy = (cid: string) => {
-	return "https://gateway.lighthouse.storage/ipfs/" + cid;
+export const getLighthouseGatewayUrl = (cid: string) => {
+	return `https://gateway.lighthouse.storage/ipfs/${cid}`;
 };
 
 export const retrieveFile = async (cid: string) => {