added multi-publish

public/content-script.js

@@ -1,3 +1,61 @@
+class Semaphore {
+	constructor(count) {
+		this.count = count
+		this.waiting = []
+	}
+	acquire() {
+		return new Promise(resolve => {
+			if (this.count > 0) {
+				this.count--
+				resolve()
+			} else {
+				this.waiting.push(resolve)
+			}
+		})
+	}
+	release() {
+		if (this.waiting.length > 0) {
+			const resolve = this.waiting.shift()
+			resolve()
+		} else {
+			this.count++
+		}
+	}
+}
+let semaphore = new Semaphore(1)
+let reader = new FileReader()
+
+const fileToBase64 = (file) => new Promise(async (resolve, reject) => {
+	if (!reader) {
+		reader = new FileReader()
+	}
+	await semaphore.acquire()
+	reader.readAsDataURL(file)
+	reader.onload = () => {
+		const dataUrl = reader.result
+		if (typeof dataUrl === "string") {
+			const base64String = dataUrl.split(',')[1]
+			reader.onload = null
+			reader.onerror = null
+			resolve(base64String)
+		} else {
+			reader.onload = null
+			reader.onerror = null
+			reject(new Error('Invalid data URL'))
+		}
+		semaphore.release()
+	}
+	reader.onerror = (error) => {
+		reader.onload = null
+		reader.onerror = null
+		reject(error)
+		semaphore.release()
+	}
+})
+
+
+
+
 async function connection(hostname) {
   const isConnected = await chrome.storage.local.get([hostname]);
   let connected = false;
@@ -430,6 +488,69 @@ document.addEventListener("qortalExtensionRequests", async (event) => {
   // Handle other request types as needed...
 });
 
+async function handleGetFileFromIndexedDB(fileId, sendResponse) {
+  try {
+    const db = await openIndexedDB();
+    const transaction = db.transaction(["files"], "readonly");
+    const objectStore = transaction.objectStore("files");
+
+    const getRequest = objectStore.get(fileId);
+
+    getRequest.onsuccess = async function (event) {
+      if (getRequest.result) {
+        const file = getRequest.result.data;
+
+        try {
+          const base64String = await fileToBase64(file);
+
+          // Create a new transaction to delete the file
+          const deleteTransaction = db.transaction(["files"], "readwrite");
+          const deleteObjectStore = deleteTransaction.objectStore("files");
+          const deleteRequest = deleteObjectStore.delete(fileId);
+
+          deleteRequest.onsuccess = function () {
+            console.log(`File with ID ${fileId} has been removed from IndexedDB`);
+            try {
+              sendResponse({ result: base64String });
+
+            } catch (error) {
+              console.log('error', error)
+            }
+          };
+
+          deleteRequest.onerror = function () {
+            console.error(`Error deleting file with ID ${fileId} from IndexedDB`);
+            sendResponse({ result: null, error: "Failed to delete file from IndexedDB" });
+          };
+        } catch (error) {
+          console.error("Error converting file to Base64:", error);
+          sendResponse({ result: null, error: "Failed to convert file to Base64" });
+        }
+      } else {
+        console.error(`File with ID ${fileId} not found in IndexedDB`);
+        sendResponse({ result: null, error: "File not found in IndexedDB" });
+      }
+    };
+
+    getRequest.onerror = function () {
+      console.error(`Error retrieving file with ID ${fileId} from IndexedDB`);
+      sendResponse({ result: null, error: "Error retrieving file from IndexedDB" });
+    };
+  } catch (error) {
+    console.error("Error opening IndexedDB:", error);
+    sendResponse({ result: null, error: "Error opening IndexedDB" });
+  } 
+}
+
+const testAsync = async (sendResponse)=> {
+  await new Promise((res)=> {
+    setTimeout(() => {
+      res()
+    }, 2500);
+  })
+  sendResponse({ result: null, error: "Testing" });
+}
+
 chrome.runtime?.onMessage.addListener( function (message, sender, sendResponse) {
   if (message.type === "LOGOUT") {
     // Notify the web page
@@ -451,42 +572,232 @@ chrome.runtime?.onMessage.addListener(function (message, sender, sendResponse) {
       "*"
     );
   }
+
+  else  if (message.action === "getFileFromIndexedDB") {
+    handleGetFileFromIndexedDB(message.fileId, sendResponse);
+    return true; // Keep the message channel open for async response
+  }
 });
 
-const UIQortalRequests = ['GET_USER_ACCOUNT',  'ENCRYPT_DATA', 'DECRYPT_DATA', 'SEND_COIN', 'GET_LIST_ITEMS', 'ADD_LIST_ITEMS', 'DELETE_LIST_ITEM', 'PUBLISH_QDN_RESOURCE']
+function openIndexedDB() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open("fileStorageDB", 1);
+
+    request.onupgradeneeded = function (event) {
+      const db = event.target.result;
+      if (!db.objectStoreNames.contains("files")) {
+        db.createObjectStore("files", { keyPath: "id" });
+      }
+    };
+
+    request.onsuccess = function (event) {
+      resolve(event.target.result);
+    };
+
+    request.onerror = function () {
+      reject("Error opening IndexedDB");
+    };
+  });
+}
+
+
+async function retrieveFileFromIndexedDB(fileId) {
+  const db = await openIndexedDB();
+  const transaction = db.transaction(["files"], "readwrite");
+  const objectStore = transaction.objectStore("files");
+
+  return new Promise((resolve, reject) => {
+    const getRequest = objectStore.get(fileId);
+
+    getRequest.onsuccess = function (event) {
+      if (getRequest.result) {
+        // File found, resolve it and delete from IndexedDB
+        const file = getRequest.result.data;
+        objectStore.delete(fileId);
+        resolve(file);
+      } else {
+        reject("File not found in IndexedDB");
+      }
+    };
+
+    getRequest.onerror = function () {
+      reject("Error retrieving file from IndexedDB");
+    };
+  });
+}
+
+async function deleteQortalFilesFromIndexedDB() {
+  try {
+    console.log("Opening IndexedDB for deleting files...");
+    const db = await openIndexedDB();
+    const transaction = db.transaction(["files"], "readwrite");
+    const objectStore = transaction.objectStore("files");
+
+    // Create a request to get all keys
+    const getAllKeysRequest = objectStore.getAllKeys();
+
+    getAllKeysRequest.onsuccess = function (event) {
+      const keys = event.target.result;
+
+      // Iterate through keys to find and delete those containing '_qortalfile'
+      for (let key of keys) {
+        if (key.includes("_qortalfile")) {
+          const deleteRequest = objectStore.delete(key);
+
+          deleteRequest.onsuccess = function () {
+            console.log(`File with key '${key}' has been deleted from IndexedDB`);
+          };
+
+          deleteRequest.onerror = function () {
+            console.error(`Failed to delete file with key '${key}' from IndexedDB`);
+          };
+        }
+      }
+    };
+
+    getAllKeysRequest.onerror = function () {
+      console.error("Failed to retrieve keys from IndexedDB");
+    };
+
+    transaction.oncomplete = function () {
+      console.log("Transaction complete for deleting files from IndexedDB");
+    };
+
+    transaction.onerror = function () {
+      console.error("Error occurred during transaction for deleting files");
+    };
+  } catch (error) {
+    console.error("Error opening IndexedDB:", error);
+  }
+}
+
+
+async function storeFilesInIndexedDB(obj) {
+  // First delete any existing files in IndexedDB with '_qortalfile' in their ID
+  await deleteQortalFilesFromIndexedDB();
+
+  // Open the IndexedDB
+  const db = await openIndexedDB();
+  const transaction = db.transaction(["files"], "readwrite");
+  const objectStore = transaction.objectStore("files");
+
+  // Handle the obj.file if it exists and is a File instance
+  if (obj.file instanceof File) {
+    const fileId = "objFile_qortalfile";
+
+    // Store the file in IndexedDB
+    const fileData = {
+      id: fileId,
+      data: obj.file,
+    };
+    objectStore.put(fileData);
+
+    // Replace the file object with the file ID in the original object
+    obj.fileId = fileId;
+    delete obj.file;
+  }
+
+  // Iterate through resources to find files and save them to IndexedDB
+  for (let resource of obj.resources) {
+    if (resource.file instanceof File) {
+      const fileId = resource.identifier + "_qortalfile";
+
+      // Store the file in IndexedDB
+      const fileData = {
+        id: fileId,
+        data: resource.file,
+      };
+      objectStore.put(fileData);
+
+      // Replace the file object with the file ID in the original object
+      resource.fileId = fileId;
+      delete resource.file;
+    }
+  }
+
+  // Set transaction completion handlers
+  transaction.oncomplete = function () {
+    console.log("Files saved successfully to IndexedDB");
+  };
+
+  transaction.onerror = function () {
+    console.error("Error saving files to IndexedDB");
+  };
+
+  return obj; // Updated object with references to stored files
+}
+
+
+
+const UIQortalRequests = ['GET_USER_ACCOUNT',  'ENCRYPT_DATA', 'DECRYPT_DATA', 'SEND_COIN', 'GET_LIST_ITEMS', 'ADD_LIST_ITEMS', 'DELETE_LIST_ITEM']
 
 if (!window.hasAddedQortalListener) {
   console.log("Listener added");
   window.hasAddedQortalListener = true;
   //qortalRequests
-  const listener = (event) => {
+  const listener = async (event) => {
-
     event.preventDefault();  // Prevent default behavior
     event.stopImmediatePropagation();  // Stop other listeners from firing
+  
     // Verify that the message is from the web page and contains expected data
     if (event.source !== window || !event.data || !event.data.action) return;
   
-    if(event?.data?.requestedHandler !== 'UI') return
+    if (event?.data?.requestedHandler !== 'UI') return;
-    if (UIQortalRequests.includes(event.data.action)) {
   
-      chrome?.runtime?.sendMessage(
+    const sendMessageToRuntime = (message, eventPort) => {
-        { action: event.data.action, type: "qortalRequest", payload: event.data },
+      chrome?.runtime?.sendMessage(message, (response) => {
-        (response) => {
+        console.log('response', response);
-          console.log('response', response)
         if (response.error) {
-            event.ports[0].postMessage({
+          eventPort.postMessage({
             result: null,
             error: response.error,
           });
         } else {
-            event.ports[0].postMessage({
+          eventPort.postMessage({
             result: response,
             error: null,
           });
         }
-        }
+      });
+    };
+  
+    // Check if action is included in the predefined list of UI requests
+    if (UIQortalRequests.includes(event.data.action)) {
+      console.log('event?.data', event?.data);
+      sendMessageToRuntime(
+        { action: event.data.action, type: 'qortalRequest', payload: event.data },
+        event.ports[0]
       );
+    } else if (event?.data?.action === 'PUBLISH_MULTIPLE_QDN_RESOURCES' || event?.data?.action === 'PUBLISH_QDN_RESOURCE') {
+      let data;
+      try {
+        data = await storeFilesInIndexedDB(event.data);
+      } catch (error) {
+        console.error('Error storing files in IndexedDB:', error);
+        event.ports[0].postMessage({
+          result: null,
+          error: 'Failed to store files in IndexedDB',
+        });
+        return;
+      }
+  
+      if (data) {
+        sendMessageToRuntime(
+          { action: event.data.action, type: 'qortalRequest', payload: data },
+          event.ports[0]
+        );
+      } else {
+        event.ports[0].postMessage({
+          result: null,
+          error: 'Failed to prepare data for publishing',
+        });
+      }
     }
   };
-  window.addEventListener("message", listener);
+  
+  // Add the listener for messages coming from the window
+  window.addEventListener('message', listener);
+  
 }
+
+

src/App.tsx

@@ -42,7 +42,7 @@ import Logout from "./assets/svgs/Logout.svg";
 import Return from "./assets/svgs/Return.svg";
 import Success from "./assets/svgs/Success.svg";
 import Info from "./assets/svgs/Info.svg";
-import CloseIcon from '@mui/icons-material/Close';
+import CloseIcon from "@mui/icons-material/Close";
 
 import {
   createAccount,
@@ -76,7 +76,7 @@ import { useModal } from "./common/useModal";
 import { LoadingButton } from "@mui/lab";
 import { Label } from "./components/Group/AddGroup";
 import { CustomizedSnackbars } from "./components/Snackbar/Snackbar";
-import SettingsIcon from '@mui/icons-material/Settings';
+import SettingsIcon from "@mui/icons-material/Settings";
 import {
   getFee,
   groupApi,
@@ -84,8 +84,15 @@ import {
   groupApiSocket,
   groupApiSocketLocal,
 } from "./background";
-import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "./utils/events";
+import {
-import { requestQueueCommentCount, requestQueuePublishedAccouncements } from "./components/Chat/GroupAnnouncements";
+  executeEvent,
+  subscribeToEvent,
+  unsubscribeFromEvent,
+} from "./utils/events";
+import {
+  requestQueueCommentCount,
+  requestQueuePublishedAccouncements,
+} from "./components/Chat/GroupAnnouncements";
 import { requestQueueGroupJoinRequests } from "./components/Group/GroupJoinRequests";
 import { DrawerComponent } from "./components/Drawer/Drawer";
 import { AddressQRCode } from "./components/AddressQRCode";
@@ -134,7 +141,7 @@ const defaultValues: MyContextInterface = {
     message: "",
   },
 };
-export let isMobile = false
+export let isMobile = false;
 
 const isMobileDevice = () => {
   const userAgent = navigator.userAgent || navigator.vendor || window.opera;
@@ -151,7 +158,7 @@ const isMobileDevice = () => {
 };
 
 if (isMobileDevice()) {
-  isMobile = true
+  isMobile = true;
   console.log("Running on a mobile device");
 } else {
   console.log("Running on a desktop");
@@ -161,14 +168,14 @@ export const allQueues = {
   requestQueueCommentCount: requestQueueCommentCount,
   requestQueuePublishedAccouncements: requestQueuePublishedAccouncements,
   requestQueueMemberNames: requestQueueMemberNames,
-  requestQueueGroupJoinRequests: requestQueueGroupJoinRequests
+  requestQueueGroupJoinRequests: requestQueueGroupJoinRequests,
-}
+};
 
 const controlAllQueues = (action) => {
   Object.keys(allQueues).forEach((key) => {
     const val = allQueues[key];
     try {
-      if (typeof val[action] === 'function') {
+      if (typeof val[action] === "function") {
         val[action]();
       }
     } catch (error) {
@@ -186,38 +193,28 @@ export const clearAllQueues = () => {
       console.error(error);
     }
   });
-}
+};
 
 export const pauseAllQueues = () => {
-  controlAllQueues('pause');
+  controlAllQueues("pause");
-  chrome?.runtime?.sendMessage(
+  chrome?.runtime?.sendMessage({
-    {
     action: "pauseAllQueues",
-      payload: {
+    payload: {},
-      
+  });
-      },
+};
-    }
-  );
-} 
 export const resumeAllQueues = () => {
-  controlAllQueues('resume');
+  controlAllQueues("resume");
-  chrome?.runtime?.sendMessage(
+  chrome?.runtime?.sendMessage({
-    {
     action: "resumeAllQueues",
-      payload: {
+    payload: {},
-      
+  });
-      },
+};
-    }
-  );
-}
-
 
 export const MyContext = createContext<MyContextInterface>(defaultValues);
 
 export let globalApiKey: string | null = null;
 
 export const getBaseApiReact = (customApi?: string) => {
-  
   if (customApi) {
     return customApi;
   }
@@ -230,7 +227,6 @@ export const getBaseApiReact = (customApi?: string) => {
 };
 // export const getArbitraryEndpointReact = () => {
 
-
 //   if (globalApiKey) {
 //     return `/arbitrary/resources/search`;
 //   } else {
@@ -238,8 +234,6 @@ export const getBaseApiReact = (customApi?: string) => {
 //   }
 // };
 export const getArbitraryEndpointReact = () => {
-  
-
   if (globalApiKey) {
     return `/arbitrary/resources/search`;
   } else {
@@ -247,7 +241,6 @@ export const getArbitraryEndpointReact = () => {
   }
 };
 export const getBaseApiReactSocket = (customApi?: string) => {
-  
   if (customApi) {
     return customApi;
   }
@@ -304,7 +297,13 @@ function App() {
   const holdRefExtState = useRef<extStates>("not-authenticated");
   const isFocusedRef = useRef<boolean>(true);
   const { isShow, onCancel, onOk, show, message } = useModal();
-  const {  onCancel: onCancelQortalRequest, onOk: onOkQortalRequest, show: showQortalRequest, isShow: isShowQortalRequest, message: messageQortalRequest } = useModal();
+  const {
+    onCancel: onCancelQortalRequest,
+    onOk: onOkQortalRequest,
+    show: showQortalRequest,
+    isShow: isShowQortalRequest,
+    message: messageQortalRequest,
+  } = useModal();
 
   const [openRegisterName, setOpenRegisterName] = useState(false);
   const registerNamePopoverRef = useRef(null);
@@ -318,43 +317,44 @@ function App() {
   const [confirmUseOfLocal, setConfirmUseOfLocal] = useState(false);
   const [isOpenDrawerProfile, setIsOpenDrawerProfile] = useState(false);
   const [apiKey, setApiKey] = useState("");
-  const [isOpenSendQort, setIsOpenSendQort] = useState(false)
+  const [isOpenSendQort, setIsOpenSendQort] = useState(false);
-  const [isOpenSendQortSuccess, setIsOpenSendQortSuccess] = useState(false)
+  const [isOpenSendQortSuccess, setIsOpenSendQortSuccess] = useState(false);
-  const [rootHeight, setRootHeight] = useState('100%')
+  const [rootHeight, setRootHeight] = useState("100%");
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const qortalRequestCheckbox1Ref = useRef(null);
   useEffect(() => {
-    if(!isMobile) return
+    if (!isMobile) return;
     // Function to set the height of the app to the viewport height
     const resetHeight = () => {
-      const height = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+      const height = window.visualViewport
+        ? window.visualViewport.height
+        : window.innerHeight;
       // Set the height to the root element (usually #root)
-      document.getElementById('root').style.height = height + "px";
+      document.getElementById("root").style.height = height + "px";
-      setRootHeight(height + "px")
+      setRootHeight(height + "px");
     };
 
     // Set the initial height
     resetHeight();
 
     // Add event listeners for resize and visualViewport changes
-    window.addEventListener('resize', resetHeight);
+    window.addEventListener("resize", resetHeight);
-    window.visualViewport?.addEventListener('resize', resetHeight);
+    window.visualViewport?.addEventListener("resize", resetHeight);
 
     // Clean up the event listeners when the component unmounts
     return () => {
-      window.removeEventListener('resize', resetHeight);
+      window.removeEventListener("resize", resetHeight);
-      window.visualViewport?.removeEventListener('resize', resetHeight);
+      window.visualViewport?.removeEventListener("resize", resetHeight);
     };
   }, []);
   useEffect(() => {
     chrome?.runtime?.sendMessage({ action: "getApiKey" }, (response) => {
       if (response) {
-       
         globalApiKey = response;
         setApiKey(response);
-        setUseLocalNode(true)
+        setUseLocalNode(true);
-        setConfirmUseOfLocal(true)
+        setConfirmUseOfLocal(true);
-        setOpenAdvancedSettings(true)
+        setOpenAdvancedSettings(true);
       }
     });
   }, []);
@@ -549,8 +549,8 @@ function App() {
         if (response?.error) {
           setSendPaymentError(response.error);
         } else {
-          setIsOpenSendQort(false)
+          setIsOpenSendQort(false);
-          setIsOpenSendQortSuccess(true)
+          setIsOpenSendQortSuccess(true);
           // setExtstate("transfer-success-regular");
           // setSendPaymentSuccess("Payment successfully sent");
         }
@@ -565,48 +565,61 @@ function App() {
   };
 
   const qortalRequestPermisson = async (message, sender, sendResponse) => {
-    if (
+    if (message.action === "QORTAL_REQUEST_PERMISSION" && !isMainWindow) {
-      message.action === "QORTAL_REQUEST_PERMISSION" &&
-      !isMainWindow
-    ) {
       try {
-        console.log('payloadbefore', message.payload)
+        console.log("payloadbefore", message.payload);
 
-        await showQortalRequest(message?.payload)
+        await showQortalRequest(message?.payload);
-        console.log('payload', message.payload)
+        console.log("payload", message.payload);
         if (message?.payload?.checkbox1) {
-          console.log('qortalRequestCheckbox1Ref.current', qortalRequestCheckbox1Ref.current)
+          console.log(
-          sendResponse({accepted: true, 
+            "qortalRequestCheckbox1Ref.current",
-            checkbox1: qortalRequestCheckbox1Ref.current
+            qortalRequestCheckbox1Ref.current
-          })
+          );
-          return
+          sendResponse({
+            accepted: true,
+            checkbox1: qortalRequestCheckbox1Ref.current,
+          });
+          return;
         }
-        sendResponse({accepted: true})
+        sendResponse({ accepted: true });
       } catch (error) {
-        console.log('error', error)
+        console.log("error", error);
-        sendResponse({accepted: false})
+        sendResponse({ accepted: false });
       } finally {
         window.close();
       }
     }
-  }
+  };
 
   useEffect(() => {
     // Listen for messages from the background script
     const messageListener = (message, sender, sendResponse) => {
       // Handle various actions
-      if (message.action === "UPDATE_STATE_CONFIRM_SEND_QORT" && !isMainWindow) {
+      if (
+        message.action === "UPDATE_STATE_CONFIRM_SEND_QORT" &&
+        !isMainWindow
+      ) {
         setSendqortState(message.payload);
         setExtstate("web-app-request-payment");
       } else if (message.action === "closePopup" && !isMainWindow) {
         window.close();
-      } else if (message.action === "UPDATE_STATE_REQUEST_CONNECTION" && !isMainWindow) {
+      } else if (
+        message.action === "UPDATE_STATE_REQUEST_CONNECTION" &&
+        !isMainWindow
+      ) {
         setRequestConnection(message.payload);
         setExtstate("web-app-request-connection");
-      } else if (message.action === "UPDATE_STATE_REQUEST_BUY_ORDER" && !isMainWindow) {
+      } else if (
+        message.action === "UPDATE_STATE_REQUEST_BUY_ORDER" &&
+        !isMainWindow
+      ) {
         setRequestBuyOrder(message.payload);
         setExtstate("web-app-request-buy-order");
-      } else if (message.action === "UPDATE_STATE_REQUEST_AUTHENTICATION" && !isMainWindow) {
+      } else if (
+        message.action === "UPDATE_STATE_REQUEST_AUTHENTICATION" &&
+        !isMainWindow
+      ) {
         setRequestAuthentication(message.payload);
         setExtstate("web-app-request-authentication");
       } else if (message.action === "SET_COUNTDOWN" && !isMainWindow) {
@@ -617,7 +630,10 @@ function App() {
       } else if (message.action === "CHECK_FOCUS" && isMainWindow) {
         sendResponse(isFocusedRef.current); // Synchronous response
         return true; // Return true if you plan to send a response asynchronously
-      } else if (message.action === "NOTIFICATION_OPEN_DIRECT" && isMainWindow) {
+      } else if (
+        message.action === "NOTIFICATION_OPEN_DIRECT" &&
+        isMainWindow
+      ) {
         executeEvent("openDirectMessage", {
           from: message.payload.from,
         });
@@ -625,11 +641,17 @@ function App() {
         executeEvent("openGroupMessage", {
           from: message.payload.from,
         });
-      } else if (message.action === "NOTIFICATION_OPEN_ANNOUNCEMENT_GROUP" && isMainWindow) {
+      } else if (
+        message.action === "NOTIFICATION_OPEN_ANNOUNCEMENT_GROUP" &&
+        isMainWindow
+      ) {
         executeEvent("openGroupAnnouncement", {
           from: message.payload.from,
         });
-      } else if (message.action === "NOTIFICATION_OPEN_THREAD_NEW_POST" && isMainWindow) {
+      } else if (
+        message.action === "NOTIFICATION_OPEN_THREAD_NEW_POST" &&
+        isMainWindow
+      ) {
         executeEvent("openThreadNewPost", {
           data: message.payload.data,
         });
@@ -638,7 +660,7 @@ function App() {
       // Call the permission request handler for "QORTAL_REQUEST_PERMISSION"
       qortalRequestPermisson(message, sender, sendResponse);
       if (message.action === "QORTAL_REQUEST_PERMISSION" && !isMainWindow) {
-        console.log('isMainWindow', isMainWindow, window?.location?.href )
+        console.log("isMainWindow", isMainWindow, window?.location?.href);
         return true; // Return true to indicate an async response is coming
       }
       if (message.action === "QORTAL_REQUEST_PERMISSION" && isMainWindow) {
@@ -655,7 +677,6 @@ function App() {
     };
   }, []);
 
-
   //param = isDecline
   const confirmPayment = (isDecline: boolean) => {
     if (isDecline) {
@@ -716,7 +737,7 @@ function App() {
             crosschainAtInfo: requestBuyOrder?.crosschainAtInfo,
             interactionId: requestBuyOrder?.interactionId,
             isDecline: true,
-            useLocal: requestBuyOrder?.useLocal
+            useLocal: requestBuyOrder?.useLocal,
           },
         },
         (response) => {
@@ -734,7 +755,7 @@ function App() {
           crosschainAtInfo: requestBuyOrder?.crosschainAtInfo,
           interactionId: requestBuyOrder?.interactionId,
           isDecline: false,
-          useLocal: requestBuyOrder?.useLocal
+          useLocal: requestBuyOrder?.useLocal,
         },
       },
       (response) => {
@@ -787,7 +808,6 @@ function App() {
           )
             return;
 
-         
           setExtstate("authenticated");
         }
       });
@@ -912,12 +932,15 @@ function App() {
               wallet,
               qortAddress: wallet.address0,
             });
-            chrome?.runtime?.sendMessage({ action: "userInfo" }, (response2) => {
+            chrome?.runtime?.sendMessage(
+              { action: "userInfo" },
+              (response2) => {
                 setIsLoading(false);
                 if (response2 && !response2.error) {
                   setUserInfo(response);
                 }
-            });
+              }
+            );
             getBalanceFunc();
           } else if (response?.error) {
             setIsLoading(false);
@@ -952,8 +975,8 @@ function App() {
     setWalletToBeDownloaded(null);
     setWalletToBeDownloadedPassword("");
     setExtstate("authenticated");
-    setIsOpenSendQort(false)
+    setIsOpenSendQort(false);
-    setIsOpenSendQortSuccess(false)
+    setIsOpenSendQortSuccess(false);
   };
 
   const resetAllStates = () => {
@@ -984,9 +1007,9 @@ function App() {
     setUseLocalNode(false);
     setHasLocalNode(false);
     setOpenAdvancedSettings(false);
-    setConfirmUseOfLocal(false)
+    setConfirmUseOfLocal(false);
-    setTxList([])
+    setTxList([]);
-    setMemberGroups([])
+    setMemberGroups([]);
   };
 
   function roundUpToDecimals(number, decimals = 8) {
@@ -1086,14 +1109,10 @@ function App() {
     const handleFocus = () => {
       setIsFocused(true);
       if (isMobile) {
-        chrome?.runtime?.sendMessage(
+        chrome?.runtime?.sendMessage({
-          {
           action: "clearAllNotifications",
-            payload: {
+          payload: {},
-            
+        });
-            },
-          }
-        );
       }
 
       console.log("Webview is focused");
@@ -1114,14 +1133,10 @@ function App() {
       if (document.visibilityState === "visible") {
         setIsFocused(true);
         if (isMobile) {
-          chrome?.runtime?.sendMessage(
+          chrome?.runtime?.sendMessage({
-            {
             action: "clearAllNotifications",
-              payload: {
+            payload: {},
-              
+          });
-              },
-            }
-          );
         }
         console.log("Webview is visible");
       } else {
@@ -1140,12 +1155,11 @@ function App() {
     };
   }, []);
 
-
   const openPaymentInternal = (e) => {
     const directAddress = e.detail?.address;
-    const name = e.detail?.name
+    const name = e.detail?.name;
-    setIsOpenSendQort(true)
+    setIsOpenSendQort(true);
-    setPaymentTo(name || directAddress)
+    setPaymentTo(name || directAddress);
   };
 
   useEffect(() => {
@@ -1174,7 +1188,6 @@ function App() {
             },
           },
           (response) => {
-          
             if (!response?.error) {
               res(response);
               setIsLoadingRegisterName(false);
@@ -1221,23 +1234,38 @@ function App() {
 
   const renderProfile = () => {
     return (
-      <AuthenticatedContainer sx={{ width: isMobile ? '100vw' : "350px", display:  'flex', backgroundColor: 'var(--bg-2)' }}>
+      <AuthenticatedContainer
+        sx={{
+          width: isMobile ? "100vw" : "350px",
+          display: "flex",
+          backgroundColor: "var(--bg-2)",
+        }}
+      >
         {isMobile && (
-             <Box sx={{
+          <Box
-              padding: '10px',
+            sx={{
-              display: 'flex',
+              padding: "10px",
-              justifyContent: 'flex-end'
+              display: "flex",
-          }}><CloseIcon onClick={()=> {
+              justifyContent: "flex-end",
-              setIsOpenDrawerProfile(false)
+            }}
-          }} sx={{
+          >
-              cursor: 'pointer',
+            <CloseIcon
-              color: 'white'
+              onClick={() => {
-          }} /></Box>
+                setIsOpenDrawerProfile(false);
+              }}
+              sx={{
+                cursor: "pointer",
+                color: "white",
+              }}
+            />
+          </Box>
         )}
 
-      <AuthenticatedContainerInnerLeft sx={{
+        <AuthenticatedContainerInnerLeft
-        overflowY: isMobile && 'auto'
+          sx={{
-      }}>
+            overflowY: isMobile && "auto",
+          }}
+        >
           <Spacer height="48px" />
 
           {authenticatedMode === "ltc" ? (
@@ -1361,9 +1389,9 @@ function App() {
               <Spacer height="20px" />
               <CustomButton
                 onClick={() => {
-              setIsOpenSendQort(true)
+                  setIsOpenSendQort(true);
                   // setExtstate("send-qort");
-              setIsOpenDrawerProfile(false)
+                  setIsOpenDrawerProfile(false);
                 }}
               >
                 Transfer QORT
@@ -1393,7 +1421,7 @@ function App() {
           <img
             onClick={() => {
               setExtstate("download-wallet");
-          setIsOpenDrawerProfile(false)
+              setIsOpenDrawerProfile(false);
             }}
             src={Download}
             style={{
@@ -1406,8 +1434,8 @@ function App() {
               <img
                 src={Logout}
                 onClick={() => {
-          logoutFunc()
+                  logoutFunc();
-          setIsOpenDrawerProfile(false)
+                  setIsOpenDrawerProfile(false);
                 }}
                 style={{
                   cursor: "pointer",
@@ -1417,12 +1445,16 @@ function App() {
           )}
           <Spacer height="20px" />
 
-     <ButtonBase onClick={()=> {
+          <ButtonBase
-      setIsSettingsOpen(true)
+            onClick={() => {
-     }}>
+              setIsSettingsOpen(true);
-        <SettingsIcon sx={{
+            }}
-          color: 'rgba(255, 255, 255, 0.5)'
+          >
-        }} />
+            <SettingsIcon
+              sx={{
+                color: "rgba(255, 255, 255, 0.5)",
+              }}
+            />
           </ButtonBase>
           <Spacer height="20px" />
           {authenticatedMode === "qort" && (
@@ -1451,16 +1483,17 @@ function App() {
               }}
             />
           )}
-     
         </AuthenticatedContainerInnerRight>
       </AuthenticatedContainer>
-    )
+    );
-  }
+  };
 
   return (
-    <AppContainer sx={{
+    <AppContainer
-      height: isMobile ? '100%' : '100vh'
+      sx={{
-    }}>
+        height: isMobile ? "100%" : "100vh",
+      }}
+    >
       {/* {extState === 'group' && (
         <Group myAddress={userInfo?.address} />
       )} */}
@@ -1544,11 +1577,10 @@ function App() {
                 flexDirection: "column",
               }}
             >
-                
               <Typography
                 sx={{
-                    cursor: 'pointer',
+                  cursor: "pointer",
-                    fontSize: '14px'
+                  fontSize: "14px",
                 }}
                 onClick={() => {
                   setOpenAdvancedSettings(true);
@@ -1564,8 +1596,8 @@ function App() {
                       display: "flex",
                       gap: "10px",
                       alignItems: "center",
-                  justifyContent: 'center',
+                      justifyContent: "center",
-                  width: '100%'
+                      width: "100%",
                     }}
                   >
                     <Checkbox
@@ -1591,7 +1623,11 @@ function App() {
                   </Box>
                   {useLocalNode && (
                     <>
-                        <Button disabled={confirmUseOfLocal} variant="contained" component="label">
+                      <Button
+                        disabled={confirmUseOfLocal}
+                        variant="contained"
+                        component="label"
+                      >
                         Select apiKey.txt
                         <input
                           type="file"
@@ -1611,19 +1647,19 @@ function App() {
                       <Spacer height="5px" />
                       <Button
                         onClick={() => {
-                            const valueToSet = !confirmUseOfLocal
+                          const valueToSet = !confirmUseOfLocal;
-                            const payload = valueToSet ? apiKey : null
+                          const payload = valueToSet ? apiKey : null;
                           chrome?.runtime?.sendMessage(
                             { action: "setApiKey", payload },
                             (response) => {
                               if (response) {
                                 globalApiKey = payload;
 
-                                  setConfirmUseOfLocal(valueToSet)
+                                setConfirmUseOfLocal(valueToSet);
                                 if (!globalApiKey) {
-                                    setUseLocalNode(false)
+                                  setUseLocalNode(false);
-                                    setOpenAdvancedSettings(false)
+                                  setOpenAdvancedSettings(false);
-                                    setApiKey('')
+                                  setApiKey("");
                                 }
                               }
                             }
@@ -1634,8 +1670,9 @@ function App() {
                           color: "white",
                         }}
                       >
-                          {!confirmUseOfLocal ? 'Confirm use of local node' : 'Switch back to gateway'}
+                        {!confirmUseOfLocal
-                          
+                          ? "Confirm use of local node"
+                          : "Switch back to gateway"}
                       </Button>
                     </>
                   )}
@@ -1643,7 +1680,6 @@ function App() {
               )}
             </Box>
           </>
-        
         </>
       )}
       {/* {extState !== "not-authenticated" && (
@@ -1661,16 +1697,16 @@ function App() {
             onOk,
             show,
             message,
-            rootHeight
+            rootHeight,
           }}
         >
           <Box
             sx={{
               width: "100vw",
-              height: isMobile ? '100%' : "100vh",
+              height: isMobile ? "100%" : "100vh",
               display: "flex",
-              flexDirection: isMobile ? 'column' : 'row',
+              flexDirection: isMobile ? "column" : "row",
-              overflow: isMobile && 'hidden'
+              overflow: isMobile && "hidden",
             }}
           >
             <Group
@@ -1684,7 +1720,6 @@ function App() {
               setIsOpenDrawerProfile={setIsOpenDrawerProfile}
             />
             {!isMobile && renderProfile()}
-           
           </Box>
 
           <Box
@@ -1698,21 +1733,21 @@ function App() {
           >
             <TaskManger getUserInfo={getUserInfo} />
           </Box>
-          
-         
         </MyContext.Provider>
       )}
       {isOpenSendQort && isMainWindow && (
-         <Box sx={{
+        <Box
-          width: '100%',
+          sx={{
-          height: '100%',
+            width: "100%",
-          position: 'fixed',
+            height: "100%",
-          background: '#27282c',
+            position: "fixed",
-          display: 'flex',
+            background: "#27282c",
-          flexDirection: 'column',
+            display: "flex",
-          alignItems: 'center',
+            flexDirection: "column",
-          zIndex: 6
+            alignItems: "center",
-        }}>
+            zIndex: 6,
+          }}
+        >
           <Spacer height="22px" />
           <Box
             sx={{
@@ -1824,27 +1859,33 @@ function App() {
       {isShowQortalRequest && !isMainWindow && (
         <>
           <Spacer height="120px" />
-        <Box sx={{
+          <Box
-            display: 'flex',
+            sx={{
-            justifyContent: 'center',
+              display: "flex",
-            width: '100%'
+              justifyContent: "center",
-          }}>
+              width: "100%",
+            }}
+          >
             <TextP
               sx={{
                 lineHeight: 1.2,
-            maxWidth: '90%',
+                maxWidth: "90%",
-            textAlign: 'center'
+                textAlign: "center",
               }}
             >
               {messageQortalRequest?.text1}
             </TextP>
           </Box>
+          {messageQortalRequest?.text2 && (
+            <>
               <Spacer height="10px" />
-        <Box sx={{
+              <Box
-            display: 'flex',
+                sx={{
-            justifyContent: 'flex-start',
+                  display: "flex",
-            width: '90%'
+                  justifyContent: "flex-start",
-          }}>
+                  width: "90%",
+                }}
+              >
                 <TextP
                   sx={{
                     lineHeight: 1.2,
@@ -1855,13 +1896,17 @@ function App() {
                   {messageQortalRequest?.text2}
                 </TextP>
               </Box>
-        <Spacer height="15px" />
+            </>
+          )}
           {messageQortalRequest?.text3 && (
-          <Box sx={{
+            <>
-            display: 'flex',
+              <Box
-            justifyContent: 'flex-start',
+                sx={{
-            width: '90%'
+                  display: "flex",
-          }}>
+                  justifyContent: "flex-start",
+                  width: "90%",
+                }}
+              >
                 <TextP
                   sx={{
                     lineHeight: 1.2,
@@ -1873,54 +1918,79 @@ function App() {
                 </TextP>
                 <Spacer height="15px" />
               </Box>
+            </>
           )}
+
           {messageQortalRequest?.text4 && (
-          <Box sx={{
+            <Box
-            display: 'flex',
+              sx={{
-            justifyContent: 'flex-start',
+                display: "flex",
-            width: '90%'
+                justifyContent: "flex-start",
-          }}>
+                width: "90%",
+              }}
+            >
               <TextP
                 sx={{
                   textAlign: "center",
                   lineHeight: 1.2,
                   fontSize: "16px",
                   fontWeight: "normal",
-            maxWidth: '90%'
+                  maxWidth: "90%",
                 }}
               >
                 {messageQortalRequest?.text4}
               </TextP>
-       
             </Box>
           )}
+
+          {messageQortalRequest?.html && (
+            <div
+              dangerouslySetInnerHTML={{ __html: messageQortalRequest?.html }}
+            />
+          )}
           <Spacer height="15px" />
+          {messageQortalRequest?.fee && (
+            <>
+            <TextP
+    sx={{
+                  textAlign: "center",
+                  lineHeight: 1.2,
+                  fontSize: "16px",
+                  fontWeight: "normal",
+                  maxWidth: "90%",
+                }}
+              >
+                {'Fee: '}{messageQortalRequest?.fee}{' QORT'}
+              </TextP>
+<Spacer height="15px" />
+
+            </>
+          )}
           <TextP
             sx={{
               textAlign: "center",
               lineHeight: 1.2,
               fontSize: "16px",
               fontWeight: 700,
-            maxWidth: '90%'
+              maxWidth: "90%",
             }}
           >
             {messageQortalRequest?.highlightedText}
           </TextP>
-        {messageQortalRequest?.checkbox1 &&
+          {messageQortalRequest?.checkbox1 && (
-        (
             <Box
               sx={{
                 display: "flex",
                 gap: "10px",
                 alignItems: "center",
-            justifyContent: 'center',
+                justifyContent: "center",
-            width: '90%',
+                width: "90%",
-            marginTop: '20px'
+                marginTop: "20px",
               }}
             >
               <Checkbox
                 onChange={(e) => {
-                  qortalRequestCheckbox1Ref.current = e.target.checked
+                  qortalRequestCheckbox1Ref.current = e.target.checked;
                 }}
                 edge="start"
                 tabIndex={-1}
@@ -1936,9 +2006,13 @@ function App() {
                 }}
               />
 
-              <Typography sx={{
+              <Typography
-                fontSize: '14px'
+                sx={{
-              }}>{messageQortalRequest?.checkbox1?.label}</Typography>
+                  fontSize: "14px",
+                }}
+              >
+                {messageQortalRequest?.checkbox1?.label}
+              </Typography>
             </Box>
           )}
 
@@ -1982,7 +2056,12 @@ function App() {
           >
             The Application <br></br>{" "}
             <TextItalic>{requestBuyOrder?.hostname}</TextItalic> <br></br>
-            <TextSpan>is requesting {requestBuyOrder?.crosschainAtInfo?.length}  {`buy order${requestBuyOrder?.crosschainAtInfo.length === 1 ? '' : 's'}`}</TextSpan>
+            <TextSpan>
+              is requesting {requestBuyOrder?.crosschainAtInfo?.length}{" "}
+              {`buy order${
+                requestBuyOrder?.crosschainAtInfo.length === 1 ? "" : "s"
+              }`}
+            </TextSpan>
           </TextP>
           <Spacer height="10px" />
           <TextP
@@ -1994,8 +2073,9 @@ function App() {
             }}
           >
             {requestBuyOrder?.crosschainAtInfo?.reduce((latest, cur) => {
-              return latest + +cur?.qortAmount
+              return latest + +cur?.qortAmount;
-            }, 0)} QORT
+            }, 0)}{" "}
+            QORT
           </TextP>
           <Spacer height="15px" />
           <TextP
@@ -2016,9 +2096,11 @@ function App() {
               fontWeight: 700,
             }}
           >
-             {roundUpToDecimals(requestBuyOrder?.crosschainAtInfo?.reduce((latest, cur)=> {
+            {roundUpToDecimals(
-              return latest + +cur?.expectedForeignAmount
+              requestBuyOrder?.crosschainAtInfo?.reduce((latest, cur) => {
-            }, 0))}
+                return latest + +cur?.expectedForeignAmount;
+              }, 0)
+            )}
             {` ${requestBuyOrder?.crosschainAtInfo?.[0]?.foreignBlockchain}`}
           </TextP>
           {/* <Spacer height="29px" />
@@ -2508,16 +2590,18 @@ function App() {
         </>
       )}
       {isOpenSendQortSuccess && (
-        <Box sx={{
+        <Box
-          width: '100%',
+          sx={{
-          height: '100%',
+            width: "100%",
-          position: 'fixed',
+            height: "100%",
-          background: '#27282c',
+            position: "fixed",
-          display: 'flex',
+            background: "#27282c",
-          flexDirection: 'column',
+            display: "flex",
-          alignItems: 'center',
+            flexDirection: "column",
-          zIndex: 6
+            alignItems: "center",
-        }}>
+            zIndex: 6,
+          }}
+        >
           <Spacer height="48px" />
           <img src={Success} />
           <Spacer height="45px" />
@@ -2683,7 +2767,6 @@ function App() {
       </Popover>
       {isSettingsOpen && (
         <Settings open={isSettingsOpen} setOpen={setIsSettingsOpen} />
-
       )}
       <CustomizedSnackbars
         open={openSnack}
@@ -2691,7 +2774,12 @@ function App() {
         info={infoSnack}
         setInfo={setInfoSnack}
       />
-         <DrawerComponent open={isOpenDrawerProfile} setOpen={setIsOpenDrawerProfile} >{renderProfile()}</DrawerComponent>
+      <DrawerComponent
+        open={isOpenDrawerProfile}
+        setOpen={setIsOpenDrawerProfile}
+      >
+        {renderProfile()}
+      </DrawerComponent>
     </AppContainer>
   );
 }

src/qortalRequests.ts

@@ -1,4 +1,4 @@
-import { addListItems, decryptData, deleteListItems, encryptData, getListItems, getUserAccount, publishQDNResource, sendCoin } from "./qortalRequests/get";
+import { addListItems, decryptData, deleteListItems, encryptData, getListItems, getUserAccount, publishMultipleQDNResources, publishQDNResource, sendCoin } from "./qortalRequests/get";
 
 
 
@@ -143,7 +143,20 @@ chrome?.runtime?.onMessage.addListener((request, sender, sendResponse) => {
       case "PUBLISH_QDN_RESOURCE": {
         const data = request.payload;
         
-        publishQDNResource(data)
+        publishQDNResource(data, sender)
+          .then((res) => {
+            sendResponse(res);
+          })
+          .catch((error) => {
+            sendResponse({ error: error.message });
+          });
+
+        break;
+      }
+      case "PUBLISH_MULTIPLE_QDN_RESOURCES": {
+        const data = request.payload;
+        
+        publishMultipleQDNResources(data, sender)
           .then((res) => {
             sendResponse(res);
           })

src/qortalRequests/get.ts

@@ -19,6 +19,30 @@ import { publishData } from "../qdn/publish/pubish";
 import { getPermission, setPermission } from "../qortalRequests";
 import { fileToBase64 } from "../utils/fileReading";
 
+function getFileFromContentScript(fileId, sender) {
+    console.log('sender', sender)
+    return new Promise((resolve, reject) => {
+    
+       
+          chrome.tabs.sendMessage(
+            sender.tab.id,
+            { action: "getFileFromIndexedDB", fileId: fileId },
+            (response) => {
+                console.log('response2', response)
+              if (response && response.result) {
+                
+                resolve(response.result);
+              } else {
+                reject(response?.error || "Failed to retrieve file");
+              }
+            }
+          );
+       
+    
+    });
+  }
+  
+
 async function getUserPermission(payload: any) {
   function waitForWindowReady(windowId) {
     return new Promise((resolve) => {
@@ -369,7 +393,7 @@ export const deleteListItems = async (data) => {
   }
 };
 
-export const publishQDNResource = async (data: any) => {
+export const publishQDNResource = async (data: any, sender) => {
   const requiredFields = ["service"];
   const missingFields: string[] = [];
   requiredFields.forEach((field) => {
@@ -382,7 +406,7 @@ export const publishQDNResource = async (data: any) => {
     const errorMsg = `Missing fields: ${missingFieldsString}`;
     throw new Error(errorMsg);
   }
-  if (!data.file && !data.data64) {
+  if (!data.fileId && !data.data64) {
     throw new Error("No data or file was submitted");
   }
   // Use "default" if user hasn't specified an identifer
@@ -414,8 +438,8 @@ export const publishQDNResource = async (data: any) => {
   if (!data.encrypt && data.service.endsWith("_PRIVATE")) {
     throw new Error("Only encrypted data can go into private services");
   }
-  if (data.file) {
+  if (data.fileId) {
-    data64 = await fileToBase64(data.file);
+    data64 = await  getFileFromContentScript(data.fileId, sender);
   }
   if (data.encrypt) {
     try {
@@ -433,19 +457,19 @@ export const publishQDNResource = async (data: any) => {
     }
   }
 
-  const fee = await getFee('ARBITRARY')
+  const fee = await getFee("ARBITRARY");
 
   const resPermission = await getUserPermission({
     text1: "Do you give this application permission to publish to QDN?",
     text2: `service: ${service}`,
     text3: `identifier: ${identifier || null}`,
     highlightedText: `isEncrypted: ${!!data.encrypt}`,
-    fee: fee.fee
+    fee: fee.fee,
   });
   const { accepted } = resPermission;
   if (accepted) {
-    if (data.file && !data.encrypt) {
+    if (data.fileId && !data.encrypt) {
-      data64 = await fileToBase64(data.file);
+      data64 = await  getFileFromContentScript(data.fileId, sender);
     }
     try {
       const resPublish = await publishData({
@@ -476,6 +500,234 @@ export const publishQDNResource = async (data: any) => {
   }
 };
 
+export const publishMultipleQDNResources = async (data: any, sender) => {
+  const requiredFields = ["resources"];
+  const missingFields: string[] = [];
+  let feeAmount = null;
+  requiredFields.forEach((field) => {
+    if (!data[field]) {
+      missingFields.push(field);
+    }
+  });
+  if (missingFields.length > 0) {
+    const missingFieldsString = missingFields.join(", ");
+    const errorMsg = `Missing fields: ${missingFieldsString}`;
+    throw new Error(errorMsg);
+  }
+  const resources = data.resources;
+  if (!Array.isArray(resources)) {
+    throw new Error("Invalid data");
+  }
+  if (resources.length === 0) {
+    throw new Error("No resources to publish");
+  }
+  if (
+    data.encrypt &&
+    (!data.publicKeys ||
+      (Array.isArray(data.publicKeys) && data.publicKeys.length === 0))
+  ) {
+    throw new Error("Encrypting data requires public keys");
+  }
+  const fee = await getFee("ARBITRARY");
+  const registeredName = await getNameInfo();
+  const name = registeredName;
+  const resPermission = await getUserPermission({
+    text1: "Do you give this application permission to publish to QDN?",
+    html: `
+    <div style="max-height: 30vh; overflow-y: auto;">
+    <style>
+      body {
+        background-color: #121212;
+        color: #e0e0e0;
+      }
+  
+      .resource-container {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #444;
+        padding: 16px;
+        margin: 8px 0;
+        border-radius: 8px;
+        background-color: #1e1e1e;
+      }
+      
+      .resource-detail {
+        margin-bottom: 8px;
+      }
+      
+      .resource-detail span {
+        font-weight: bold;
+        color: #bb86fc;
+      }
+  
+      @media (min-width: 600px) {
+        .resource-container {
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+        .resource-detail {
+          flex: 1 1 45%;
+          margin-bottom: 0;
+          padding: 4px 0;
+        }
+      }
+    </style>
+  
+    ${data.resources
+      .map(
+        (resource) => `
+        <div class="resource-container">
+          <div class="resource-detail"><span>Service:</span> ${resource.service}</div>
+          <div class="resource-detail"><span>Name:</span> ${resource.name}</div>
+          <div class="resource-detail"><span>Identifier:</span> ${resource.identifier}</div>
+          ${
+            resource.filename
+              ? `<div class="resource-detail"><span>Filename:</span> ${resource.filename}</div>`
+              : ""
+          }
+        </div>`
+      )
+      .join("")}
+  </div>
+  
+      `,
+    highlightedText: `isEncrypted: ${!!data.encrypt}`,
+    fee: fee.fee * resources.length,
+  });
+  const { accepted } = resPermission;
+  console.log('accepted', accepted)
+  if (!accepted) {
+    throw new Error("User declined request");
+  }
+  let failedPublishesIdentifiers = [];
+  console.log('resources', resources)
+  for (const resource of resources) {
+    try {
+      const requiredFields = ["service"];
+      const missingFields: string[] = [];
+      requiredFields.forEach((field) => {
+        if (!resource[field]) {
+          missingFields.push(field);
+        }
+      });
+      if (missingFields.length > 0) {
+        const missingFieldsString = missingFields.join(", ");
+        const errorMsg = `Missing fields: ${missingFieldsString}`;
+        failedPublishesIdentifiers.push({
+          reason: errorMsg,
+          identifier: resource.identifier,
+        });
+        continue;
+      }
+      if (!resource.fileId && !resource.data64) {
+        const errorMsg = "No data or file was submitted";
+        failedPublishesIdentifiers.push({
+          reason: errorMsg,
+          identifier: resource.identifier,
+        });
+        continue;
+      }
+      const service = resource.service;
+      let identifier = resource.identifier;
+      let data64 = resource.data64;
+      const filename = resource.filename;
+      const title = resource.title;
+      const description = resource.description;
+      const category = resource.category;
+      const tag1 = resource.tag1;
+      const tag2 = resource.tag2;
+      const tag3 = resource.tag3;
+      const tag4 = resource.tag4;
+      const tag5 = resource.tag5;
+      if (resource.identifier == null) {
+        identifier = "default";
+      }
+      if (!data.encrypt && service.endsWith("_PRIVATE")) {
+        const errorMsg = "Only encrypted data can go into private services";
+        failedPublishesIdentifiers.push({
+          reason: errorMsg,
+          identifier: resource.identifier,
+        });
+        continue;
+      }
+    //   if (data.file) {
+    //     data64 = await getFileFromContentScript(resource.identifier + "_file");
+    //   }
+      if (data.encrypt) {
+        try {
+          const encryptDataResponse = encryptDataGroup({
+            data64,
+            publicKeys: data.publicKeys,
+          });
+          if (encryptDataResponse) {
+            data64 = encryptDataResponse;
+          }
+        } catch (error) {
+          const errorMsg =
+            error.message || "Upload failed due to failed encryption";
+          failedPublishesIdentifiers.push({
+            reason: errorMsg,
+            identifier: resource.identifier,
+          });
+          continue;
+        }
+      }
+      if (resource.fileId && !data.encrypt) {
+       
+            data64 = await getFileFromContentScript(resource.fileId, sender);
+
+      }
+      try {
+        
+        await publishData({
+          registeredName: encodeURIComponent(name),
+          file: data64,
+          service: service,
+          identifier: encodeURIComponent(identifier),
+          uploadType: "file",
+          isBase64: true,
+          filename: filename,
+          title,
+          description,
+          category,
+          tag1,
+          tag2,
+          tag3,
+          tag4,
+          tag5,
+          apiVersion: 2,
+          withFee: true,
+        });
+        await new Promise((res) => {
+          setTimeout(() => {
+            res();
+          }, 1000);
+        });
+      } catch (error) {
+        const errorMsg = error.message || "Upload failed";
+        failedPublishesIdentifiers.push({
+          reason: errorMsg,
+          identifier: resource.identifier,
+        });
+      }
+    } catch (error) {
+        console.log('error', error)
+      failedPublishesIdentifiers.push({
+        reason: "Unknown error",
+        identifier: resource.identifier,
+      });
+    }
+  }
+  if (failedPublishesIdentifiers.length > 0) {
+    const obj = {};
+    obj["error"] = {
+      unsuccessfulPublishes: failedPublishesIdentifiers,
+    };
+    return obj;
+  }
+  return true;
+};
+
 export const sendCoin = async () => {
   try {
     const wallet = await getSaveWallet();