@welshare/react 0.0.1-alpha.2 → 0.2.0

package/dist/node_modules/@welshare/react/src/hooks/use-welshare.ts

@@ -1,10 +1,15 @@
 import {
+  BinaryFileSubmissionPayload,
   DialogMessage,
+  RequestUploadCredentialsPayload,
+  RunningFileUpload,
   SubmissionPayload,
   SubmissionSchemaId,
+  UploadCredentials,
   WelshareConnectionOptions,
 } from "@/types.js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { encryptAndUploadFile } from "../lib/uploads.js";
 
 export const useWelshare = (props: WelshareConnectionOptions) => {
   const [storageKey, setStorageKey] = useState<string>();
@@ -12,9 +17,14 @@ export const useWelshare = (props: WelshareConnectionOptions) => {
   const [dialogWindow, setDialogWindow] = useState<Window | null>(null);
   const [messageIdCounter, setMessageIdCounter] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [uploadState, setUploadState] = useState<
+    "preparing" | "uploading" | "anchoring" | "finished" | "error"
+  >();
+
+  // (claude opus) Use ref to control current upload in effect without triggering re-renders
+  const currentUploadRef = useRef<RunningFileUpload>(null);
 
   const options: WelshareConnectionOptions = {
-    environment: "development",
     apiBaseUrl: "https://wallet.welshare.app",
     ...props,
   };
@@ -22,7 +32,7 @@ export const useWelshare = (props: WelshareConnectionOptions) => {
   const WELSHARE_WALLET_URL = `${options.apiBaseUrl}/wallet-external`;
 
   useEffect(() => {
-    const handleMessage = (event: MessageEvent<DialogMessage>) => {
+    const handleMessage = async (event: MessageEvent<DialogMessage>) => {
       // Verify origin for security
       if (event.origin !== new URL(WELSHARE_WALLET_URL).origin) {
         return;
@@ -35,6 +45,14 @@ export const useWelshare = (props: WelshareConnectionOptions) => {
           errorMessage = message.payload.error || "An unknown error occurred";
           console.error("Welshare Wallet sent an error:", errorMessage);
           setIsSubmitting(false);
+
+          // Reject the promise if there's an ongoing upload
+          if (currentUploadRef.current?.uploadPromise) {
+            currentUploadRef.current.uploadPromise.reject(
+              new Error(errorMessage)
+            );
+          }
+
           options.callbacks.onError?.(errorMessage);
           break;
         case "DIALOG_READY":
@@ -61,6 +79,14 @@ export const useWelshare = (props: WelshareConnectionOptions) => {
           console.debug("Welshare Wallet Dialog is closing");
           setStorageKey(undefined);
           setIsDialogOpen(false);
+
+          // Reject any pending upload promises
+          if (currentUploadRef.current?.uploadPromise) {
+            currentUploadRef.current.uploadPromise.reject(
+              new Error("Dialog closed before upload completed")
+            );
+          }
+
           options.callbacks.onDialogClosing?.();
           break;
 
@@ -69,6 +95,79 @@ export const useWelshare = (props: WelshareConnectionOptions) => {
           setIsSubmitting(false);
           options.callbacks.onUploaded?.(message.payload);
           break;
+
+        //todo: make this work for batches, too
+        case "UPLOAD_CREDENTIALS_CREATED":
+          const credentials: UploadCredentials = message.payload;
+          console.debug("upload credentials created", credentials);
+
+          if (!currentUploadRef.current) {
+            throw new Error("No upload in progress");
+          }
+
+          if (!dialogWindow) {
+            currentUploadRef.current.uploadPromise.reject(
+              new Error("(UPLOAD_CREDENTIALS_CREATED) Dialog window not open")
+            );
+            return;
+          }
+          try {
+            setUploadState("uploading");
+            const encodedEncryptionKey = await encryptAndUploadFile(
+              currentUploadRef.current.file,
+              credentials.presignedUrl
+            );
+
+            setUploadState("anchoring");
+            const binarySubmissionPayload: BinaryFileSubmissionPayload = {
+              timestamp: currentUploadRef.current.timestamp,
+              applicationId: options.applicationId,
+              reference: currentUploadRef.current.reference,
+              fileName: currentUploadRef.current.fileName,
+              fileType: currentUploadRef.current.fileType,
+              encryptionKey: encodedEncryptionKey,
+              fileSize: currentUploadRef.current.file.size,
+              url: `welshare://${credentials.uploadKey}`,
+            };
+
+            //write to Nillion
+            const message: DialogMessage = {
+              type: "SUBMIT_BINARY_DATA",
+              id: String(messageIdCounter),
+              payload: binarySubmissionPayload,
+            };
+
+            dialogWindow.postMessage(message, WELSHARE_WALLET_URL);
+            setMessageIdCounter((prev) => prev + 1);
+          } catch (error) {
+            console.error("error uploading file", error);
+            // Update status to error
+            currentUploadRef.current.uploadPromise.reject(error as Error);
+            setUploadState("error");
+
+            // Call error callback
+            const errorMsg =
+              error instanceof Error ? error.message : "Upload failed";
+            options.callbacks.onError?.(errorMsg);
+          }
+          break;
+        //{insertetUid, errors}
+        case "BINARY_DATA_SUBMITTED":
+          if (!currentUploadRef.current) {
+            throw new Error("No upload in progress");
+          }
+          currentUploadRef.current.uploadPromise.resolve({
+            url: message.payload.url,
+            binaryFileUid: message.payload.insertedUid,
+          });
+
+          setUploadState("finished");
+          options.callbacks.onFileUploaded?.(
+            message.payload.insertedUid,
+            message.payload.url
+          );
+          break;
+
         default:
           console.log(
             "Received unexpected message from Welshare Wallet:",
@@ -82,7 +181,54 @@ export const useWelshare = (props: WelshareConnectionOptions) => {
     return () => {
       window.removeEventListener("message", handleMessage);
     };
-  }, [WELSHARE_WALLET_URL, options.callbacks]);
+  }, [WELSHARE_WALLET_URL, dialogWindow, messageIdCounter, options.applicationId, options.callbacks]);
+
+  /**
+   * Starts a file upload and returns a promise that resolves with the uploaded file URL
+   * @param file The file to upload
+   * @param reference string A reference identifier for the upload
+   * @returns Promise<{ url: string; binaryFileUid: string }> url usually starts with welshare:// and resolves to an encrypted storage location
+   */
+  const uploadFile = (
+    file: File,
+    reference: string
+  ): Promise<{ url: string; binaryFileUid: string }> => {
+    return new Promise((resolve, reject) => {
+      if (!dialogWindow) {
+        reject(new Error("(uploadFile) Dialog window not open"));
+        return;
+      }
+
+      const payload: RequestUploadCredentialsPayload = {
+        timestamp: new Date(),
+        applicationId: options.applicationId,
+        reference: reference,
+        fileName: file.name,
+        fileType: file.type,
+      };
+
+      setUploadState("preparing");
+      // (claude opus) Store the upload with the file and promise handlers on a ref
+      currentUploadRef.current = {
+        ...payload,
+        file,
+        reference,
+        uploadPromise: { resolve, reject },
+      };
+
+      const message: DialogMessage = {
+        type: "REQUEST_UPLOAD_CREDENTIALS",
+        id: String(messageIdCounter),
+        payload: {
+          ...payload,
+          applicationId: options.applicationId,
+        },
+      };
+
+      dialogWindow.postMessage(message, WELSHARE_WALLET_URL);
+      setMessageIdCounter((prev) => prev + 1);
+    });
+  };
 
   /**
    * @param schemaType a welshare schema type uid
@@ -93,7 +239,7 @@ export const useWelshare = (props: WelshareConnectionOptions) => {
     submission: SubmissionPayload<T>
   ) => {
     if (!dialogWindow) {
-      throw new Error("Dialog window not open");
+      throw new Error("(submitData) Dialog window not open");
     }
 
     const submissionPayload = {
@@ -122,12 +268,24 @@ export const useWelshare = (props: WelshareConnectionOptions) => {
 
   const openWallet = () => {
     const width = 800;
-    const height = 600;
+    const height = 700;
     const left = window.screenX + (window.outerWidth - width) / 2;
     const top = window.screenY + (window.outerHeight - height) / 2;
 
+    let socialParams = "";
+    if (options.interpolateSocials) {
+      const socialEntries = Object.entries(options.interpolateSocials)
+        .filter(([_, value]) => value !== undefined && value !== null)
+        .map(([key, value]) => `social.${key}=${encodeURIComponent(String(value))}`);
+      
+      if (socialEntries.length > 0) {
+        socialParams = `&${socialEntries.join('&')}`;
+      }
+    }
+
+    const walletUrl = `${WELSHARE_WALLET_URL}?applicationId=${options.applicationId}${socialParams}`;
     const newWindow = window.open(
-      WELSHARE_WALLET_URL,
+      walletUrl,
       "Welshare Wallet",
       `width=${width},height=${height},left=${left},top=${top}`
     );
@@ -142,7 +300,9 @@ export const useWelshare = (props: WelshareConnectionOptions) => {
     storageKey,
     openWallet,
     isDialogOpen,
+    uploadFile,
     submitData,
+    uploadState,
     isSubmitting,
   };
 };

package/dist/node_modules/@welshare/react/src/index.ts

@@ -2,12 +2,20 @@
 //import { QuestionnaireResponseSchema, ReflexSubmissionSchema } from "@welshare/sdk";
 export { ConnectWelshareButton } from "./components/connect-button.js";
 // ---- hooks ----
-export {
-  useWelshare
-} from "./hooks/use-welshare.js";
+export { useWelshare } from "./hooks/use-welshare.js";
 
+export {
+  decodeEncryptionKey,
+  decrypt,
+  encodeEncryptionKey,
+  encryptFile,
+  generateRandomAESKey,
+  type EncryptionKey
+} from "./lib/encryption.js";
+export { encryptAndUploadFile } from "./lib/uploads.js";
 //todo: import them from the SDK or a dedicated SDK constants export
 export const Schemas = {
   QuestionnaireResponse: "b14b538f-7de3-4767-ad77-464d755d78bd", //QuestionnaireResponseSchema.schemaUid,
-  ReflexSubmission: "f5cf2d8a-1f78-4f21-b4bd-082e983b830c" //ReflexSubmissionSchema.schemaUid,
-};
+  ReflexSubmission: "f5cf2d8a-1f78-4f21-b4bd-082e983b830c", //ReflexSubmissionSchema.schemaUid,
+  BinaryFile: "9d696baf-483f-4cc0-b748-23a22c1705f5" //BinaryFilesSchema.schemaUid,
+};

package/dist/node_modules/@welshare/react/src/lib/encryption.ts

@@ -0,0 +1,110 @@
+export const ALGORITHM = "AES-GCM";
+export type Algorithm = "AES-GCM";
+
+export const generateRandomAESKey = async (): Promise<CryptoKey> => {
+  // Generate a 256-bit AES-GCM key for file encryption
+  return window.crypto.subtle.generateKey(
+    {
+      name: ALGORITHM,
+      length: 256, // 256-bit key
+    },
+    true, // Key is extractable (needed for storage/transmission)
+    ["encrypt", "decrypt"] // Key usage
+  );
+};
+
+/// also Generates random IV (12 bytes for AES-GCM)
+/// @return {arraybuffer ciphertext, uint8array iv}
+export const encryptFile = async (
+  file: File,
+  key: CryptoKey
+): Promise<{ encryptedData: ArrayBuffer; iv: Uint8Array }> => {
+  // Read file as ArrayBuffer
+  const fileData = await file.arrayBuffer();
+  const iv = window.crypto.getRandomValues(new Uint8Array(12));
+
+  // Encrypt the file data
+  const encryptedData = await window.crypto.subtle.encrypt(
+    {
+      name: ALGORITHM,
+      iv: iv,
+    },
+    key,
+    fileData
+  );
+
+  return { encryptedData, iv };
+};
+
+export type EncryptionKey = {
+  algorithm: Algorithm;
+  key: string;
+  iv: string;
+};
+
+export const encodeEncryptionKey = async (
+  key: CryptoKey,
+  iv: Uint8Array
+): Promise<EncryptionKey> => {
+  // Export the key as raw bytes
+  const exportedKey = await window.crypto.subtle.exportKey("raw", key);
+  const keyHex = Array.from(new Uint8Array(exportedKey))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+
+  const ivHex = Array.from(iv)
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+
+  return {
+    algorithm: ALGORITHM,
+    key: keyHex,
+    iv: ivHex,
+  };
+};
+
+export const decodeEncryptionKey = (
+  encryptionKey: EncryptionKey
+): { key: Uint8Array<ArrayBuffer>; iv: Uint8Array<ArrayBuffer> } => {
+  const keyBytes = new Uint8Array(
+    encryptionKey.key
+      .match(/.{1,2}/g)!
+      .map((byte: string) => parseInt(byte, 16))
+  );
+  const ivBytes = new Uint8Array(
+    encryptionKey.iv.match(/.{1,2}/g)!.map((byte: string) => parseInt(byte, 16))
+  );
+  return { key: keyBytes, iv: ivBytes };
+};
+
+// Helper function to decrypt a file using encoded encryption key
+export const decrypt = async (
+  encryptedData: ArrayBuffer,
+  encryptionKey: EncryptionKey
+): Promise<ArrayBuffer | null> => {
+  try {
+    const { key: keyBytes, iv } = decodeEncryptionKey(encryptionKey);
+
+    const key = await window.crypto.subtle.importKey(
+      "raw",
+      keyBytes,
+      { name: ALGORITHM },
+      false,
+      ["decrypt"]
+    );
+
+    const decryptedData = await window.crypto.subtle.decrypt(
+      {
+        name: ALGORITHM,
+        iv,
+      },
+      key,
+      encryptedData
+    );
+
+    return decryptedData;
+  } catch (error) {
+    console.error("Failed to decrypt file:", error);
+    return null;
+  }
+};

package/dist/node_modules/@welshare/react/src/lib/uploads.ts

@@ -0,0 +1,29 @@
+import {
+  encodeEncryptionKey,
+  encryptFile,
+  EncryptionKey,
+  generateRandomAESKey,
+} from "./encryption.js";
+
+export const encryptAndUploadFile = async (
+  file: File,
+  presignedUrl: string
+): Promise<EncryptionKey> => {
+  const encryptionKey = await generateRandomAESKey();
+  const { encryptedData, iv } = await encryptFile(file, encryptionKey);
+
+  // Upload encrypted file to S3
+  const uploadResponse = await fetch(presignedUrl, {
+    method: "PUT",
+    body: encryptedData,
+    headers: {
+      "Content-Type": file.type,
+    },
+  });
+
+  if (!uploadResponse.ok) {
+    throw new Error(`Failed to upload file ${uploadResponse.status}`);
+  }
+
+  return encodeEncryptionKey(encryptionKey, iv);
+};

package/dist/node_modules/@welshare/react/src/types.ts

@@ -1,11 +1,11 @@
+import { EncryptionKey } from "./lib/encryption.js";
+
 export interface DialogMessage {
   type: string;
   payload?: any;
   id?: string;
 }
 
-export type WelshareEnvironment = "development" | "production";
-
 /**
  * a welshare schema type uid
  */
@@ -18,16 +18,53 @@ export interface SubmissionPayload<T> {
   submission: T;
 }
 
+export type UploadCredentials = {
+  presignedUrl: string;
+  uploadKey: string;
+}
+
+export interface RequestUploadCredentialsPayload {
+  timestamp?: Date;
+  applicationId: string;
+  reference: string;
+  fileName: string;
+  fileType: string;
+}
+
+export interface BinaryFileSubmissionPayload extends RequestUploadCredentialsPayload {
+  encryptionKey: EncryptionKey;
+  /// in bytes
+  fileSize: number;
+  url: string;
+}
+
+export interface RunningFileUpload extends RequestUploadCredentialsPayload {
+  credentials?: UploadCredentials;
+  file: File;
+  reference: string;
+  uploadPromise: {
+    resolve: (result: { url: string; binaryFileUid: string }) => void;
+    reject: (error: Error) => void;
+  };
+}
+
 export interface DataSubmissionDialogMessage extends DialogMessage {
-  payload: SubmissionPayload<unknown>;
+  payload: 
+    | SubmissionPayload<unknown> 
+    | BinaryFileSubmissionPayload
+    | RequestUploadCredentialsPayload;
 }
 
 export interface WelshareConnectionOptions {
   applicationId: string;
+  interpolateSocials?: {
+    emailAddress?: string;
+    privy?: string;
+  }
   //todo: must go into build config, not supposed to be used by users
   apiBaseUrl?: string;
-  environment?: WelshareEnvironment;
   callbacks: {
+    onFileUploaded?: (insertedUid: string, url: string) => void;
     onUploaded?: (payload: SubmissionPayload<unknown>) => void;
     onError?: (error: string) => void;
     onSessionReady?: (sessionPubKey: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welshare/react",
-  "version": "0.0.1-alpha.2",
+  "version": "0.2.0",
   "description": "React library for integrating with Welshare's sovereign data sharing platform",
   "keywords": [
     "react",
@@ -77,7 +77,7 @@
     "node": ">=20.0.0"
   },
   "scripts": {
-    "lint": "eslint . --max-warnings 10",
+    "lint": "eslint . --max-warnings 25",
     "build": "tshy",
     "build:clean": "rm -rf ./dist",
     "test": "vitest",