Feat/lit protocol

packages/create-invoice-form/src/lib/create-invoice-form.svelte

@@ -18,6 +18,7 @@
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Status from "@requestnetwork/shared-components/status.svelte";
   import Modal from "@requestnetwork/shared-components/modal.svelte";
+  import { EncryptionTypes } from '@requestnetwork/types';
 
   export let config: IConfig;
   export let wagmiConfig: WagmiConfig;
@@ -139,19 +140,41 @@
     if (requestNetwork) {
       try {
         addToStatus(APP_STATUS.PERSISTING_TO_IPFS);
-        const request = await requestNetwork.createRequest({
-          requestInfo: requestCreateParameters.requestInfo,
-          paymentNetwork: requestCreateParameters.paymentNetwork,
-          contentData: requestCreateParameters.contentData,
-          signer: requestCreateParameters.signer,
-        });
+        let request;
+        if(formData.isEncrypted) {
+          const payeeEncryptionPublicKey = {
+            key: requestCreateParameters.requestInfo.payee?.value!,
+            method: EncryptionTypes.METHOD.KMS,
+          };
+          const payerEncryptionPublicKey = {
+            key: requestCreateParameters.requestInfo.payer?.value!,
+            method: EncryptionTypes.METHOD.KMS,
+          };
+
+          request = await requestNetwork._createEncryptedRequest(
+            {
+              requestInfo: requestCreateParameters.requestInfo,
+              signer: requestCreateParameters.signer,
+              paymentNetwork: requestCreateParameters.paymentNetwork,
+              contentData: requestCreateParameters.contentData,
+            },
+            [payeeEncryptionPublicKey, payerEncryptionPublicKey],
+          );
+        } else {
+          request = await requestNetwork.createRequest({
+            requestInfo: requestCreateParameters.requestInfo,
+            paymentNetwork: requestCreateParameters.paymentNetwork,
+            contentData: requestCreateParameters.contentData,
+            signer: requestCreateParameters.signer,
+          });
+        }
 
         activeRequest = request;
         addToStatus(APP_STATUS.PERSISTING_ON_CHAIN);
         await request.waitForConfirmation();
         addToStatus(APP_STATUS.REQUEST_CONFIRMED);
       } catch (error: any) {
-        if (error.message.includes("Transactioon confirmation not received")) {
+        if (error.message.includes("Transaction confirmation not received")) {
           isTimeout = true;
           removeAllStatuses();
         } else {

packages/create-invoice-form/src/lib/invoice/form.svelte

@@ -110,6 +110,11 @@
     }
   };
 
+  const handleCheckbox = (event: any) => {
+    formData.isEncrypted = !formData.isEncrypted;
+    setTimeout(() => event.target.checked = formData.isEncrypted, 0);
+  };
+
   const addInvoiceItem = () => {
     const newItem = {
       name: "",
@@ -129,6 +134,7 @@
   const removeInvoiceItem = (index: number) => {
     formData.invoiceItems = formData.invoiceItems.filter((_, i) => i !== index);
   };
+  
 </script>
 
 <form class="invoice-form">
@@ -366,6 +372,13 @@
             ? "Please enter a valid Ethereum address"
             : ""}
         />
+        <Input
+          type="checkbox"
+          id="isEncrypted"
+          label="Encrypt invoice"
+          checked={formData.isEncrypted}
+          {handleCheckbox}
+          />
       </div>
     </div>
     <div class="invoice-form-dates">

packages/create-invoice-form/src/lib/utils/resetForm.ts

@@ -53,5 +53,6 @@ export function getInitialFormData() {
       taxRegistration: "",
       email: "",
     },
+    isEncrypted: false,
   };
 }

packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte

@@ -85,8 +85,8 @@
   }
 
   $: {
-    sellerInfo = generateDetailParagraphs(request?.contentData.sellerInfo);
-    buyerInfo = generateDetailParagraphs(request?.contentData.buyerInfo);
+    sellerInfo = generateDetailParagraphs(request?.contentData?.sellerInfo);
+    buyerInfo = generateDetailParagraphs(request?.contentData?.buyerInfo);
   }
 
   onMount(() => {
@@ -399,11 +399,11 @@
       </Accordion>
     {/if}
   {/if}
-  {#if request?.contentData.note}
+  {#if request?.contentData?.note}
     <div class="note-container">
       <p class="note-content">
         <span class="note-title">Memo:</span> <br />
-        {request.contentData.note || "-"}
+        {request.contentData?.note || "-"}
       </p>
     </div>
   {/if}

packages/invoice-dashboard/src/lib/view-requests.svelte

@@ -530,7 +530,7 @@
                       request.timestamp * 1000
                     ).toLocaleDateString()}</td
                   >
-                  <td>{request.contentData.invoiceNumber || "-"}</td>
+                  <td>{request?.contentData?.invoiceNumber || "-"}</td>
                   {#if currentTab === "All"}
                     <td
                       ><div class="address">

shared/components/input.svelte

@@ -6,8 +6,10 @@
   export let type: HTMLInputTypeAttribute = "text";
   export let placeholder = "";
   export let value: string | number = "";
+  export let checked: boolean = false;
   export let className = "";
   export let handleInput: ((e: Event) => void) | undefined = undefined;
+  export let handleCheckbox: ((e: Event) => void) | undefined = undefined;
   export let onBlur: ((e: Event) => void) | undefined = undefined;
   export let disabled = false;
   export let min = "";
@@ -18,7 +20,7 @@
 </script>
 
 <div class="input-wrapper">
-  {#if label}
+  {#if label && type !== "checkbox"}
     <label for={id} class="input-label">{label}</label>
   {/if}
 
@@ -37,6 +39,18 @@
         on:input={handleInput}
         class={`textarea-input ${className} ${error ? "input-error" : ""}`}
       />
+    {:else if type === "checkbox"}
+    <label for={id} class="input-label">
+      <input
+        {id}
+        type="checkbox"
+        checked={checked}
+        {disabled}
+        class={`checkbox-input ${className} ${error ? "input-error" : ""}`}
+        on:click={handleCheckbox}
+      />
+      {label}
+    </label>  
     {:else}
       <input
         {id}
@@ -125,6 +139,11 @@
     box-sizing: border-box;
   }
 
+  .input-wrapper .checkbox-input {
+    appearance: auto;
+    accent-color: #0BB489;
+  }
+
   .input-wrapper .text-input-icon {
     margin-right: 10px;
   }

shared/types/index.ts

@@ -17,6 +17,7 @@ export interface CustomFormData extends Omit<Invoice, "meta" | "creationDate"> {
   invoiceItems: InvoiceItem[];
   buyerInfo?: ActorInfo;
   sellerInfo?: ActorInfo;
+  isEncrypted?: boolean;
 }
 
 export interface IConfig {