started on background cases

src/App.tsx

@@ -101,10 +101,11 @@ import { Settings } from "./components/Group/Settings";
 import { MainAvatar } from "./components/MainAvatar";
 import { useRetrieveDataLocalStorage } from "./useRetrieveDataLocalStorage";
 import { useQortalGetSaveSettings } from "./useQortalGetSaveSettings";
-import { useRecoilState, useResetRecoilState } from "recoil";
+import { useRecoilState, useResetRecoilState, useSetRecoilState } from "recoil";
 import { canSaveSettingToQdnAtom, fullScreenAtom, hasSettingsChangedAtom, oldPinnedAppsAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global";
 import { useAppFullScreen } from "./useAppFullscreen";
 import { NotAuthenticated } from "./ExtStates/NotAuthenticated";
+import { sendMessageBackground, sendMessageState } from "./messaging/messagesToBackground";
 
 type extStates =
   | "not-authenticated"
@@ -343,6 +344,9 @@ function App() {
 
   const { toggleFullScreen } = useAppFullScreen(setFullScreen);
 
+
+
+
   useEffect(() => {
       // Attach a global event listener for double-click
       const handleDoubleClick = () => {
@@ -543,21 +547,33 @@ function App() {
 
   const getBalanceFunc = () => {
     setQortBalanceLoading(true);
-    chrome?.runtime?.sendMessage({ action: "balance" }, (response) => {
+    window.sendMessage("balance")
+    .then((response) => {
       if (!response?.error && !isNaN(+response)) {
         setBalance(response);
       }
       setQortBalanceLoading(false);
+    })
+    .catch((error) => {
+      console.error("Failed to get balance:", error);
+      setQortBalanceLoading(false);
     });
+  
   };
   const getLtcBalanceFunc = () => {
     setLtcBalanceLoading(true);
-    chrome?.runtime?.sendMessage({ action: "ltcBalance" }, (response) => {
+    window.sendMessage("ltcBalance")
-      if (!response?.error && !isNaN(+response)) {
+  .then((response) => {
-        setLtcBalance(response);
+    if (!response?.error && !isNaN(+response)) {
-      }
+      setLtcBalance(response);
-      setLtcBalanceLoading(false);
+    }
-    });
+    setLtcBalanceLoading(false);
+  })
+  .catch((error) => {
+    console.error("Failed to get LTC balance:", error);
+    setLtcBalanceLoading(false);
+  });
+
   };
   const sendCoinFunc = () => {
     setSendPaymentError("");
@@ -575,27 +591,25 @@ function App() {
       return;
     }
     setIsLoading(true);
-    chrome?.runtime?.sendMessage(
+    window.sendMessage("sendCoin", {
-      {
+      amount: Number(paymentAmount),
-        action: "sendCoin",
+      receiver: paymentTo.trim(),
-        payload: {
+      password: paymentPassword,
-          amount: Number(paymentAmount),
+    })
-          receiver: paymentTo.trim(),
+      .then((response) => {
-          password: paymentPassword,
-        },
-      },
-      (response) => {
         if (response?.error) {
           setSendPaymentError(response.error);
         } else {
           setIsOpenSendQort(false);
           setIsOpenSendQortSuccess(true);
-          // setExtstate("transfer-success-regular");
-          // setSendPaymentSuccess("Payment successfully sent");
         }
         setIsLoading(false);
-      }
+      })
-    );
+      .catch((error) => {
+        console.error("Failed to send coin:", error);
+        setIsLoading(false);
+      });
+    
   };
 
   const clearAllStates = () => {
@@ -883,11 +897,16 @@ function App() {
           }, 10000);
         });
       }
-      chrome?.runtime?.sendMessage({ action: "userInfo" }, (response) => {
+      window.sendMessage("userInfo")
+      .then((response) => {
         if (response && !response.error) {
           setUserInfo(response);
         }
+      })
+      .catch((error) => {
+        console.error("Failed to get user info:", error);
       });
+    
       getBalanceFunc();
     } catch (error) {}
   }, []);
@@ -974,37 +993,41 @@ function App() {
         crypto.kdfThreads,
         () => {}
       );
-      chrome?.runtime?.sendMessage(
+      window.sendMessage("decryptWallet", {
-        {
+        password: walletToBeDownloadedPassword,
-          action: "decryptWallet",
+        wallet,
-          payload: {
+      })
-            password: walletToBeDownloadedPassword,
+        .then((response) => {
-            wallet,
+          if (response && !response.error) {
-          },
-        },
-        (response) => {
-          if (response && !response?.error) {
             setRawWallet(wallet);
             setWalletToBeDownloaded({
               wallet,
               qortAddress: wallet.address0,
             });
-            chrome?.runtime?.sendMessage(
+      
-              { action: "userInfo" },
+            window.sendMessage("userInfo")
-              (response2) => {
+              .then((response2) => {
                 setIsLoading(false);
                 if (response2 && !response2.error) {
-                  setUserInfo(response);
+                  setUserInfo(response2);
                 }
-              }
+              })
-            );
+              .catch((error) => {
+                setIsLoading(false);
+                console.error("Failed to get user info:", error);
+              });
+      
             getBalanceFunc();
           } else if (response?.error) {
             setIsLoading(false);
             setWalletToBeDecryptedError(response.error);
           }
-        }
+        })
-      );
+        .catch((error) => {
+          setIsLoading(false);
+          console.error("Failed to decrypt wallet:", error);
+        });
+      
     } catch (error: any) {
       setWalletToBeDownloadedError(error?.message);
       setIsLoading(false);
@@ -1082,40 +1105,49 @@ function App() {
           res();
         }, 250);
       });
-      chrome?.runtime?.sendMessage(
+      window.sendMessage("decryptWallet", {
-        {
+        password: authenticatePassword,
-          action: "decryptWallet",
+        wallet: rawWallet,
-          payload: {
+      })
-            password: authenticatePassword,
+        .then((response) => {
-            wallet: rawWallet,
+          if (response && !response.error) {
-          },
-        },
-        (response) => {
-          if (response && !response?.error) {
             setAuthenticatePassword("");
             setExtstate("authenticated");
             setWalletToBeDecryptedError("");
-            chrome?.runtime?.sendMessage({ action: "userInfo" }, (response) => {
+      
-              setIsLoading(false);
+            window.sendMessage("userInfo")
-              if (response && !response.error) {
+              .then((response) => {
-                setUserInfo(response);
+                setIsLoading(false);
-              }
+                if (response && !response.error) {
-            });
+                  setUserInfo(response);
-            getBalanceFunc();
-            chrome?.runtime?.sendMessage(
-              { action: "getWalletInfo" },
-              (response) => {
-                if (response && response?.walletInfo) {
-                  setRawWallet(response?.walletInfo);
                 }
-              }
+              })
-            );
+              .catch((error) => {
+                setIsLoading(false);
+                console.error("Failed to get user info:", error);
+              });
+      
+            getBalanceFunc();
+      
+            window.sendMessage("getWalletInfo")
+              .then((response) => {
+                if (response && response.walletInfo) {
+                  setRawWallet(response.walletInfo);
+                }
+              })
+              .catch((error) => {
+                console.error("Failed to get wallet info:", error);
+              });
           } else if (response?.error) {
             setIsLoading(false);
             setWalletToBeDecryptedError(response.error);
           }
-        }
+        })
-      );
+        .catch((error) => {
+          setIsLoading(false);
+          console.error("Failed to decrypt wallet:", error);
+        });
+      
     } catch (error) {
       setWalletToBeDecryptedError("Unable to authenticate. Wrong password");
     }

src/background-cases.ts

@@ -0,0 +1,233 @@
+import {
+  decryptWallet,
+  findUsableApi,
+  getBalanceInfo,
+  getKeyPair,
+  getLTCBalance,
+  getNameInfo,
+  getUserInfo,
+  sendCoin,
+  walletVersion,
+} from "./background";
+
+export function versionCase(request, event) {
+  event.source.postMessage(
+    {
+      requestId: request.requestId,
+      action: "version",
+      payload: { version: "1.0" },
+      type: "backgroundMessageResponse",
+    },
+    event.origin
+  );
+}
+
+export async function getWalletInfoCase(request, event) {
+  try {
+    const response = await getKeyPair();
+
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: "getWalletInfo",
+        payload: { walletInfo: response },
+        type: "backgroundMessageResponse",
+      },
+      event.origin
+    );
+  } catch (error) {
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: "getWalletInfo",
+        error: error?.message,
+        type: "backgroundMessageResponse",
+      },
+      event.origin
+    );
+  }
+}
+
+export async function validApiCase(request, event) {
+  try {
+    const usableApi = await findUsableApi();
+
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: "validApi",
+        payload: usableApi,
+        type: "backgroundMessageResponse",
+      },
+      event.origin
+    );
+  } catch (error) {
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: "validApi",
+        error: error?.message,
+        type: "backgroundMessageResponse",
+      },
+      event.origin
+    );
+  }
+}
+
+export async function nameCase(request, event) {
+  try {
+    const response = await getNameInfo();
+
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: "name",
+        payload: response,
+        type: "backgroundMessageResponse",
+      },
+      event.origin
+    );
+  } catch (error) {
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: "name",
+        error: error?.message,
+        type: "backgroundMessageResponse",
+      },
+      event.origin
+    );
+  }
+}
+
+export async function userInfoCase(request, event) {
+  try {
+    const response = await getUserInfo();
+
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: "userInfo",
+        payload: response,
+        type: "backgroundMessageResponse",
+      },
+      event.origin
+    );
+  } catch (error) {
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: "userInfo",
+        error: "User not authenticated",
+        type: "backgroundMessageResponse",
+      },
+      event.origin
+    );
+  }
+}
+
+export async function decryptWalletCase(request, event) {
+  try {
+    const { password, wallet } = request.payload;
+    const response = await decryptWallet(password, wallet, walletVersion);
+
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: "decryptWallet",
+        payload: response,
+        type: "backgroundMessageResponse",
+      },
+      event.origin
+    );
+  } catch (error) {
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: "decryptWallet",
+        error: error?.message,
+        type: "backgroundMessageResponse",
+      },
+      event.origin
+    );
+  }
+}
+
+export async function balanceCase(request, event) {
+    try {
+      const response = await getBalanceInfo();
+  
+      event.source.postMessage(
+        { requestId: request.requestId, action: "balance", payload: response,  type: "backgroundMessageResponse" },
+        event.origin
+      );
+    } catch (error) {
+      event.source.postMessage(
+        {
+          requestId: request.requestId,
+          action: "balance",
+          error: error?.message,
+          type: "backgroundMessageResponse"
+        },
+        event.origin
+      );
+    }
+  }
+  export async function ltcBalanceCase(request, event) {
+    try {
+      const response = await getLTCBalance();
+  
+      event.source.postMessage(
+        { requestId: request.requestId, action: "ltcBalance", payload: response,  type: "backgroundMessageResponse" },
+        event.origin
+      );
+    } catch (error) {
+      event.source.postMessage(
+        {
+          requestId: request.requestId,
+          action: "ltcBalance",
+          error: error?.message,
+          type: "backgroundMessageResponse"
+        },
+        event.origin
+      );
+    }
+  }
+  
+  export async function sendCoinCase(request, event) {
+    try {
+      const { receiver, password, amount } = request.payload;
+      const { res } = await sendCoin({receiver, password, amount});
+      if (!res?.success) {
+        event.source.postMessage(
+            {
+              requestId: request.requestId,
+              action: "sendCoin",
+              error: res?.data?.message,
+              type: "backgroundMessageResponse",
+            },
+            event.origin
+          );
+        return;
+      }
+      event.source.postMessage(
+        {
+          requestId: request.requestId,
+          action: "sendCoin",
+          payload: true,
+          type: "backgroundMessageResponse",
+        },
+        event.origin
+      );
+    } catch (error) {
+      event.source.postMessage(
+        {
+          requestId: request.requestId,
+          action: "sendCoin",
+          error: error?.message,
+          type: "backgroundMessageResponse",
+        },
+        event.origin
+      );
+    }
+  }

src/messaging/messagesToBackground.tsx

@@ -0,0 +1,66 @@
+
+
+// Utility to generate unique request IDs
+function generateRequestId() {
+  return `msg-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+// Map to store callbacks by requestId
+const callbackMap = new Map();
+
+// Global listener for handling message responses
+window.addEventListener("message", (event) => {
+  const { type, requestId, payload, error, message } = event.data;
+
+  // Only process messages of type `backgroundMessageResponse`
+  if (type !== "backgroundMessageResponse") return;
+
+  // Check if there’s a callback stored for this requestId
+  if (callbackMap.has(requestId)) {
+    const { resolve, reject } = callbackMap.get(requestId);
+    callbackMap.delete(requestId); // Remove callback after use
+
+    if (error) {
+      reject({ error, message });
+    } else {
+      resolve({ payload });
+    }
+  }
+});
+
+// Define the sendMessage function
+export const sendMessageBackground = (action, data = {}, timeout = 60000) => {
+  return new Promise((resolve) => {
+    const requestId = generateRequestId(); // Unique ID for each request
+    callbackMap.set(requestId, { resolve }); // Store resolve callback only
+
+    // Send the message with `backgroundMessage` type
+    window.postMessage({ type: "backgroundMessage", action, requestId, payload: data }, "*");
+
+    // Set up a timeout to automatically resolve with an error if no response is received
+    const timeoutId = setTimeout(() => {
+      // Remove the callback to prevent memory leaks
+      callbackMap.delete(requestId);
+      resolve({ error: "timeout", message: `Request timed out after ${timeout} ms` });
+    }, timeout);
+
+    // Adjust resolve to clear the timeout when a response arrives
+    callbackMap.set(requestId, {
+      resolve: (response) => {
+        clearTimeout(timeoutId); // Clear the timeout if the response is received in time
+        resolve(response);
+      }
+    });
+  }).then((response) => {
+    // Return payload or error based on response content
+    if (response?.payload) {
+      return response.payload;
+    } else if (response?.error) {
+      return { error: response.error, message: response?.message || "An error occurred" };
+    }
+  });
+};
+
+
+
+window.sendMessage = sendMessageBackground;