feat: lit signature modal (#266)

Co-authored-by: MantisClone <david.huntmateo@request.network>

Author: rodrigopavezi

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

@@ -16,6 +16,7 @@
   import TxType from "@requestnetwork/shared-components/tx-type.svelte";
   import DashboardSkeleton from "@requestnetwork/shared-components/dashboard-skeleton.svelte";
   import { toast } from "svelte-sonner";
+  import Modal from "@requestnetwork/shared-components/modal.svelte";
   // Icons
   import ChevronDown from "@requestnetwork/shared-icons/chevron-down.svelte";
   import ChevronLeft from "@requestnetwork/shared-icons/chevron-left.svelte";
@@ -90,6 +91,7 @@
       })
     | undefined;
   let currencyManager: CurrencyManager;
+  let loadSessionSignatures = false;
 
   let columns = {
     issuedAt: false,
@@ -383,14 +385,15 @@
     activeRequest = undefined;
   };
 
-  const loadRequests = async (sliderValue: string, currentAccount: GetAccountReturnType, currentRequestNetwork: RequestNetwork | undefined | null) => {
+  const loadRequests = async (sliderValue: string, currentAccount: GetAccountReturnType | undefined, currentRequestNetwork: RequestNetwork | undefined | null) => {
     if (!currentAccount?.address || !currentRequestNetwork || !cipherProvider) return;
 
     loading = true;
     if (sliderValue === "on") {
       try {
         const signer = await getEthersSigner(wagmiConfig);
         if (signer && currentAccount?.address) {
+          loadSessionSignatures = localStorage?.getItem("lit-wallet-sig") === null;
           await cipherProvider?.getSessionSignatures(signer, currentAccount.address, window.location.host, "Sign in to Lit Protocol through Request Network");
           cipherProvider?.enableDecryption(true);
           localStorage?.setItem("isDecryptionEnabled", JSON.stringify(true));
@@ -400,6 +403,8 @@
         toast.error("Failed to enable decryption.");
         loading = false;
         return;
+      } finally {
+        loadSessionSignatures = false;
       }
     } else {
       cipherProvider?.enableDecryption(false);
@@ -415,6 +420,20 @@
   class="main-table"
   style="--mainColor: {mainColor}; --secondaryColor: {secondaryColor}; "
 >
+  {#if loadSessionSignatures}
+    <Modal
+      config={config}
+      isOpen={true}
+      title="Lit Protocol Signature Required"
+    >
+      <div class="modal-content">
+        <p>This signature is required only once per session and will allow you to:</p>
+        <ul>
+          <li>Access encrypted invoice details</li>
+        </ul>
+      </div>
+    </Modal>
+  {/if}
   <div class="tabs">
     <ul>
       <li
@@ -1036,4 +1055,19 @@
     font-size: 20px;
     margin-bottom: 0;
   }
+
+  .modal-content {
+    padding: 1rem;
+  }
+
+  .modal-content ul {
+    list-style-type: disc;
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+  }
+
+  .modal-content li {
+    margin-bottom: 0.5rem;
+    color: #4B5563;
+  }
 </style>