Feat/lit protocol

packages/create-invoice-form/package.json

@@ -33,8 +33,8 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
-    "@requestnetwork/data-format": "0.19.1",
-    "@requestnetwork/request-client.js": "0.50.0",
+    "@requestnetwork/data-format": "0.19.2",
+    "@requestnetwork/request-client.js": "0.51.0",
     "@wagmi/core": "^2.13.8",
     "validator": "^13.12.0",
     "viem": "^2.21.27"

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

@@ -23,6 +23,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;
@@ -183,19 +184,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 payeeEncryptionParams = {
+            key: requestCreateParameters.requestInfo.payee?.value!,
+            method: EncryptionTypes.METHOD.KMS,
+          };
+          const payerEncryptionParams = {
+            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

@@ -453,6 +453,13 @@
           }))}
           onchange={handleCurrencyChange}
         />
+
+        <Input
+          type="checkbox"
+          id="isEncrypted"
+          label="Encrypt invoice"
+          bind:checked={formData.isEncrypted}
+          />
       </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/package.json

@@ -37,9 +37,9 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@requestnetwork/payment-detection": "0.45.1",
-    "@requestnetwork/payment-processor": "0.48.0",
-    "@requestnetwork/request-client.js": "0.50.0",
+    "@requestnetwork/payment-detection": "0.46.0",
+    "@requestnetwork/payment-processor": "0.49.0",
+    "@requestnetwork/request-client.js": "0.51.0",
     "@wagmi/connectors": "^5.2.0",
     "@wagmi/core": "^2.13.8",
     "ethers": "^5.7.2",

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

@@ -122,8 +122,8 @@
   }
 
   $: {
-    sellerInfo = generateDetailParagraphs(request?.contentData.sellerInfo);
-    buyerInfo = generateDetailParagraphs(request?.contentData.buyerInfo);
+    sellerInfo = generateDetailParagraphs(request?.contentData?.sellerInfo);
+    buyerInfo = generateDetailParagraphs(request?.contentData?.buyerInfo);
   }
 
   onMount(() => {
@@ -555,11 +555,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

@@ -7,6 +7,7 @@
   // Components
   import Copy from "@requestnetwork/shared-components/copy.svelte";
   import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
+  import Switch from "@requestnetwork/shared-components/switch.svelte";
   import Input from "@requestnetwork/shared-components/input.svelte";
   import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
   import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
@@ -35,7 +36,6 @@
   // Utils
   import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
   import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
-  import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
   import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
   import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
   import { CurrencyManager } from "@requestnetwork/currency";
@@ -45,11 +45,16 @@
   import { Drawer, InvoiceView } from "./dashboard";
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   import { CurrencyTypes } from "@requestnetwork/types";
+    import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
 
   export let config: IConfig;
   export let wagmiConfig: WagmiConfig;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let currencies: CurrencyTypes.CurrencyInput[] = [];
+  export let isDecryptionEnabled: boolean;
+  export let enableDecryption: (option: boolean) => void | undefined;
+
+  let sliderValueForDecryption = isDecryptionEnabled ? "on" : "off";
 
   let signer: `0x${string}` | undefined;
   let activeConfig = config ? config : defaultConfig;
@@ -384,6 +389,18 @@
   const handleRemoveSelectedRequest = () => {
     activeRequest = undefined;
   };
+
+
+  $: sliderValueForDecryption, getRequests(); 
+
+  $: {
+    if(sliderValueForDecryption === 'on') {
+      enableDecryption(true);
+    } else {
+      enableDecryption(false);
+    }
+  }
+
 </script>
 
 <div
@@ -412,17 +429,23 @@
       </li>
     </ul>
   </div>
-  <div style="display: flex; flex-direction: column; gap: 10px;">
+  <div style="display: flex; flex-direction: column;">
     <div class="search-wrapper">
-      <Input
-        placeholder="Search..."
-        width="w-[300px]"
-        handleInput={handleSearchChange}
-      >
-        <div slot="icon">
-          <Search />
+      <div class="search-wrapper" style="gap: 10px;">
+        <Input
+          placeholder="Search..."
+          width="w-[300px]"
+          handleInput={handleSearchChange}
+        >
+          <div slot="icon">
+            <Search />
+          </div>
+        </Input>
+        <div class="width: fit-content;">
+          <Switch bind:value={sliderValueForDecryption} label="Show encrypted requests" fontSize={14} design="slider" />
         </div>
-      </Input>
+      </div>
+
       <Dropdown
         config={activeConfig}
         type="checkbox"
@@ -579,7 +602,7 @@
           </tr>
         </thead>
         <tbody>
-          {#if processedRequests.length > 0}
+          {#if !loading && processedRequests.length > 0}
             {#each processedRequests as request}
               <tr class="row" on:click={(e) => handleRequestSelect(e, request)}>
                 {#if columns.issuedAt}
@@ -687,7 +710,9 @@
               </tr>
             {/each}
           {:else}
-            <DashboardSkeleton />
+            {#if loading}
+              <DashboardSkeleton />
+            {/if}
           {/if}
         </tbody>
       </table>

packages/payment-widget/package.json

@@ -56,9 +56,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@requestnetwork/payment-processor": "0.48.0",
-    "@requestnetwork/request-client.js": "0.50.0",
-    "@requestnetwork/web3-signature": "0.8.1",
+    "@requestnetwork/payment-processor": "0.49.0",
+    "@requestnetwork/request-client.js": "0.51.0",
+    "@requestnetwork/web3-signature": "0.8.2",
     "@web3modal/ethers5": "^5.0.11",
     "ethers": "^5.7.2",
     "vite-plugin-node-polyfills": "^0.22.0"

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"
+        bind: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;
   }