batch of updates 3

package-lock.json

@@ -53,6 +53,7 @@
         "react-frame-component": "^5.2.7",
         "react-infinite-scroller": "^1.2.6",
         "react-intersection-observer": "^9.13.0",
+        "react-json-view-lite": "^2.0.1",
         "react-qr-code": "^2.0.15",
         "react-quill": "^2.0.0",
         "react-redux": "^9.1.2",
@@ -9573,6 +9574,17 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-json-view-lite": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-2.0.1.tgz",
+      "integrity": "sha512-yElNMSzL7UJ9rMDQIbTiBemXbvfAoqpxM/0IQd3nr52CLLBC0HxOSKcta/bayct2QCq7ZVzLzI8CGfuf387hHw==",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",

package.json

@@ -57,6 +57,7 @@
     "react-frame-component": "^5.2.7",
     "react-infinite-scroller": "^1.2.6",
     "react-intersection-observer": "^9.13.0",
+    "react-json-view-lite": "^2.0.1",
     "react-qr-code": "^2.0.15",
     "react-quill": "^2.0.0",
     "react-redux": "^9.1.2",

src/App.tsx

@@ -43,7 +43,8 @@ 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 { JsonView, allExpanded, darkStyles } from 'react-json-view-lite';
+import 'react-json-view-lite/dist/index.css';
 import {
   createAccount,
   generateRandomSentence,
@@ -2797,6 +2798,15 @@ function App() {
             {messageQortalRequestExtension?.highlightedText}
           </TextP>
 
+          {messageQortalRequestExtension?.json && (
+              <>
+                          <Spacer height="15px" />
+
+                          <JsonView data={messageQortalRequestExtension?.json} shouldExpandNode={allExpanded} style={darkStyles} />
+                          <Spacer height="15px" />
+
+              </>
+            )}
           {messageQortalRequestExtension?.fee && (
             <>
                       <Spacer height="15px" />

src/components/Apps/AppRating.tsx

@@ -103,14 +103,15 @@ export const AppRating = ({ app, myName, ratingCountPosition = "right" }) => {
     getRating(app?.name, app?.service);
   }, [getRating, app?.name]);
 
-  const rateFunc = async (event, newValue) => {
+  const rateFunc = async (event, chosenValue, currentValue) => {
     try {
+      const newValue = chosenValue || currentValue
       if (!myName) throw new Error("You need a name to rate.");
       if (!app?.name) return;
-      const fee = await getFee("ARBITRARY");
+      const fee = await getFee("CREATE_POLL");
 
       await show({
-        message: `Would you like to rate this app a rating of ${newValue}?`,
+        message: `Would you like to rate this app a rating of ${newValue}?. It will create a POLL tx.`,
         publishFee: fee.fee + " QORT",
       });
 
@@ -212,7 +213,7 @@ export const AppRating = ({ app, myName, ratingCountPosition = "right" }) => {
 
         <Rating
           value={value}
-          onChange={rateFunc}
+          onChange={(event, rating)=> rateFunc(event, rating, value)}
           precision={1}
           readOnly={hasPublishedRating === null}
           size="small"

src/components/Apps/AppsDesktop.tsx

@@ -368,7 +368,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
         </ButtonBase>
         <Save isDesktop myName={myName} />
         {mode !== 'home' && (
-                 <AppsNavBarDesktop  />
+                 <AppsNavBarDesktop disableBack={isNewTabWindow && mode === 'viewer'}  />
 
         )}
 

src/components/Apps/AppsNavBarDesktop.tsx

@@ -64,7 +64,7 @@ export function saveToLocalStorage(key, subKey, newValue) {
   }
 }
 
-export const AppsNavBarDesktop = () => {
+export const AppsNavBarDesktop = ({disableBack}) => {
   const [tabs, setTabs] = useState([]);
   const [selectedTab, setSelectedTab] = useState(null);
   const [navigationController, setNavigationController] =  useRecoilState(navigationControllerAtom)
@@ -108,10 +108,11 @@ export const AppsNavBarDesktop = () => {
 
 
   const isDisableBackButton = useMemo(()=> {
+    if(disableBack) return true
     if(selectedTab && navigationController[selectedTab?.tabId]?.hasBack) return false
     if(selectedTab && !navigationController[selectedTab?.tabId]?.hasBack) return true
     return false
-  }, [navigationController, selectedTab])
+  }, [navigationController, selectedTab, disableBack])
 
 
 

src/components/Chat/ChatGroup.tsx

@@ -252,7 +252,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
                           const content = item?.content ||  item.decryptedData?.content;
                           const sender = item.sender;
                           const newTimestamp = item.timestamp;
-                          const contentState = item?.contentState || item.decryptedData?.contentState;
+                          const contentState = item?.contentState !== undefined ? item?.contentState :  item.decryptedData?.contentState;
           
                           if (!content || typeof content !== "string" || !sender || typeof sender !== "string" || !newTimestamp) {
                             console.warn("Invalid content, sender, or timestamp in reaction data", item);
@@ -344,7 +344,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
                         const content = item?.content || item.decryptedData?.content;
                         const sender = item.sender;
                         const newTimestamp = item.timestamp;
-                        const contentState = item?.contentState ||  item.decryptedData?.contentState;
+                        const contentState = item?.contentState !== undefined ? item?.contentState :   item.decryptedData?.contentState;
         
                         if (!content || typeof content !== "string" || !sender || typeof sender !== "string" || !newTimestamp) {
                           console.warn("Invalid content, sender, or timestamp in reaction data", item);
@@ -755,7 +755,7 @@ useEffect(() => {
       setIsSending(false)
       resumeAllQueues()
     }
-  }, [])
+  }, [isPrivate])
 
   console.log('isPrivate', isPrivate)
   

src/components/Embeds/PollEmbed.tsx

@@ -48,16 +48,17 @@ export const PollCard = ({
       });
       setIsLoadingSubmit(true);
   
-      window
+      chrome?.runtime?.sendMessage(
-        .sendMessage(
-          "voteOnPoll",
           {
-            pollName: poll?.info?.pollName,
+            action: "VOTE_ON_POLL",
+            type: "qortalRequest",
+            payload: {
+              pollName: poll?.info?.pollName,
             optionIndex: +selectedOption,
+            }
+            
           },
-          60000
+        (response) => {
-        )
-        .then((response) => {
           setIsLoadingSubmit(false);
           if (response.error) {
             setInfoSnack({
@@ -75,14 +76,6 @@ export const PollCard = ({
             setOpenSnack(true);
           }
         })
-        .catch((error) => {
-          setIsLoadingSubmit(false);
-          setInfoSnack({
-            type: "error",
-            message: error?.message || "Unable to vote.",
-          });
-          setOpenSnack(true);
-        });
     };
   
     const getName = async (owner) => {

src/components/Group/Group.tsx

@@ -96,6 +96,7 @@ import LockIcon from '@mui/icons-material/Lock';
 import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
 import { useSetRecoilState } from "recoil";
 import { selectedGroupIdAtom } from "../../atoms/global";
+import { sortArrayByTimestampAndGroupName } from "../../utils/time";
 
 // let touchStartY = 0;
 // let disablePullToRefresh = false;
@@ -976,7 +977,7 @@ export const Group = ({
     chrome?.runtime?.onMessage.addListener((message, sender, sendResponse) => {
       if (message.action === "SET_GROUPS") {
         // Update the component state with the received 'sendqort' state
-        setGroups(message.payload);
+        setGroups(sortArrayByTimestampAndGroupName(message.payload));
         getLatestRegularChat(message.payload)
         setMemberGroups(message.payload);
 
@@ -2632,6 +2633,10 @@ export const Group = ({
                           Wait until an admin re-encrypts the keys.
                         </Typography>
                         <Spacer height="25px" />
+                        <Typography>
+                          <strong>Only unencrypted messages will be displayed.</strong>
+                        </Typography>
+                        <Spacer height="25px" />
                         <Typography>
                           Try notifying an admin from the list of admins below:
                         </Typography>

src/components/Group/ListOfBans.tsx

@@ -12,7 +12,7 @@ export const getMemberInvites = async (groupNumber) => {
   return groupData;
 }
 
-const getNames = async (listOfMembers) => {
+const getNames = async (listOfMembers, includeNoNames) => {
   let members = [];
   if (listOfMembers && Array.isArray(listOfMembers)) {
     for (const member of listOfMembers) {
@@ -20,6 +20,8 @@ const getNames = async (listOfMembers) => {
         const name = await getNameInfo(member.offender);
         if (name) {
           members.push({ ...member, name });
+        } else if(includeNoNames){
+          members.push({ ...member, name: name || "" });
         }
       }
     }
@@ -42,7 +44,8 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
   const getInvites = async (groupId) => {
     try {
       const res = await getMemberInvites(groupId);
-      const resWithNames = await getNames(res);
+      const resWithNames = await getNames(res, true);
+
       setBans(resWithNames);
     } catch (error) {
       console.error(error);
@@ -151,9 +154,9 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
               </Popover>
               <ListItemButton onClick={(event) => handlePopoverOpen(event, index)}>
                 <ListItemAvatar>
-                  <Avatar
+                <Avatar
                     alt={member?.name}
-                    src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${member?.name}/qortal_avatar?async=true`}
+                    src={member?.name ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${member?.name}/qortal_avatar?async=true` : ''}
                   />
                 </ListItemAvatar>
                 <ListItemText primary={member?.name || member?.offender} />

src/components/Group/ListOfInvites.tsx

@@ -12,7 +12,7 @@ export const getMemberInvites = async (groupNumber) => {
   return groupData;
 }
 
-const getNames = async (listOfMembers) => {
+const getNames = async (listOfMembers, includeNoNames) => {
   let members = [];
   if (listOfMembers && Array.isArray(listOfMembers)) {
     for (const member of listOfMembers) {
@@ -20,6 +20,8 @@ const getNames = async (listOfMembers) => {
         const name = await getNameInfo(member.invitee);
         if (name) {
           members.push({ ...member, name });
+        } else if(includeNoNames){
+          members.push({ ...member, name: name || "" });
         }
       }
     }
@@ -43,7 +45,7 @@ export const ListOfInvites = ({ groupId, setInfoSnack, setOpenSnack, show }) =>
   const getInvites = async (groupId) => {
     try {
       const res = await getMemberInvites(groupId);
-      const resWithNames = await getNames(res);
+      const resWithNames = await getNames(res, true);
       setInvites(resWithNames);
     } catch (error) {
       console.error(error);
@@ -152,9 +154,9 @@ export const ListOfInvites = ({ groupId, setInfoSnack, setOpenSnack, show }) =>
               </Popover>
               <ListItemButton onClick={(event) => handlePopoverOpen(event, index)}>
                 <ListItemAvatar>
-                  <Avatar
+                <Avatar
                     alt={member?.name}
-                    src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${member?.name}/qortal_avatar?async=true`}
+                    src={member?.name ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${member?.name}/qortal_avatar?async=true` : ''}
                   />
                 </ListItemAvatar>
                 <ListItemText primary={member?.name || member?.invitee} />

src/components/Group/ListOfJoinRequests.tsx

@@ -12,14 +12,16 @@ export const getMemberInvites = async (groupNumber) => {
   return groupData;
 }
 
-const getNames = async (listOfMembers) => {
+const getNames = async (listOfMembers, includeNoNames) => {
   let members = [];
   if (listOfMembers && Array.isArray(listOfMembers)) {
     for (const member of listOfMembers) {
       if (member.joiner) {
         const name = await getNameInfo(member.joiner);
         if (name) {
-          members.push({ ...member, name });
+          members.push({ ...member, name: name || "" });
+        } else if(includeNoNames){
+          members.push({ ...member, name: name || "" });
         }
       }
     }
@@ -27,6 +29,7 @@ const getNames = async (listOfMembers) => {
   return members;
 }
 
+
 const cache = new CellMeasurerCache({
   fixedWidth: true,
   defaultHeight: 50,
@@ -44,7 +47,7 @@ export const ListOfJoinRequests = ({ groupId, setInfoSnack, setOpenSnack, show }
   const getInvites = async (groupId) => {
     try {
       const res = await getMemberInvites(groupId);
-      const resWithNames = await getNames(res);
+      const resWithNames = await getNames(res, true);
       setInvites(resWithNames);
     } catch (error) {
       console.error(error);
@@ -165,9 +168,9 @@ export const ListOfJoinRequests = ({ groupId, setInfoSnack, setOpenSnack, show }
               </Popover>
               <ListItemButton onClick={(event) => handlePopoverOpen(event, index)}>
                 <ListItemAvatar>
-                  <Avatar
+                <Avatar
                     alt={member?.name}
-                    src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${member?.name}/qortal_avatar?async=true`}
+                    src={member?.name ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${member?.name}/qortal_avatar?async=true` : ''}
                   />
                 </ListItemAvatar>
                 <ListItemText primary={member?.name || member?.joiner} />

src/components/Group/ListOfMembers.tsx

@@ -328,7 +328,7 @@ const ListOfMembers = ({
                 <ListItemAvatar>
                   <Avatar
                     alt={member?.name || member?.member}
-                    src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${member?.name}/qortal_avatar?async=true`}
+                    src={member?.name ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${member?.name}/qortal_avatar?async=true` : ''}
                   />
                 </ListItemAvatar>
                 <ListItemText

src/components/Group/ManageMembers.tsx

@@ -25,6 +25,7 @@ import { LoadingSnackbar } from "../Snackbar/LoadingSnackbar";
 import { getFee } from "../../background";
 import { LoadingButton } from "@mui/lab";
 import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
+import { Spacer } from "../../common/Spacer";
 
 function a11yProps(index: number) {
   return {
@@ -113,7 +114,7 @@ export const ManageMembers = ({
     }
   };
 
-  const getMembers = async (groupId) => {
+  const getMembersWithNames =  React.useCallback(async (groupId) => {
     try {
       setIsLoadingMembers(true)
       const res = await getGroupMembers(groupId);
@@ -121,6 +122,13 @@ export const ManageMembers = ({
       setMembersWithNames(resWithNames);
       setIsLoadingMembers(false)
     } catch (error) {}
+  }, []);
+
+  const getMembers = async (groupId) => {
+    try {
+      const res = await getGroupMembers(groupId);
+      setMembersWithNames(res?.members || []);
+    } catch (error) {}
   };
 
   React.useEffect(()=> {
@@ -256,6 +264,8 @@ export const ManageMembers = ({
                 maxWidth: '750px'
               }}
             >
+               <Button variant="contained" onClick={()=> getMembersWithNames(selectedGroup?.groupId)}>Load members with names</Button>
+              <Spacer height="10px" />
               <ListOfMembers
                 members={membersWithNames || []}
                 groupId={selectedGroup?.groupId}

src/components/TaskManager/TaskManger.tsx

@@ -1,77 +1,69 @@
-import { List, ListItemButton, ListItemIcon } from "@mui/material";
+import {
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Collapse,
+  IconButton,
+} from "@mui/material";
 import React, { useContext, useEffect, useRef } from "react";
-
-import ListItemText from "@mui/material/ListItemText";
-import Collapse from "@mui/material/Collapse";
-import InboxIcon from "@mui/icons-material/MoveToInbox";
-
-import ExpandLess from "@mui/icons-material/ExpandLess";
-import ExpandMore from "@mui/icons-material/ExpandMore";
-import StarBorder from "@mui/icons-material/StarBorder";
 import PendingIcon from "@mui/icons-material/Pending";
 import TaskAltIcon from "@mui/icons-material/TaskAlt";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
 import { MyContext, getBaseApiReact, isMobile } from "../../App";
-import { getBaseApi } from "../../background";
 
-
+export const TaskManger = ({ getUserInfo }) => {
-
-export const TaskManger = ({getUserInfo}) => {
   const { txList, setTxList, memberGroups } = useContext(MyContext);
-  const [open, setOpen] = React.useState(true);
+  const [open, setOpen] = React.useState(false);
-   
+  const intervals = useRef({});
+
   const handleClick = () => {
-    setOpen(!open);
+    setOpen((prev) => !prev);
   };
 
-  const intervals = useRef({})
+  const getStatus = ({ signature }, callback) => {
+    let stop = false;
+    const getAnswer = async () => {
+      const getTx = async () => {
+        const url = `${getBaseApiReact()}/transactions/signature/${signature}`;
+        const res = await fetch(url);
+        return await res.json();
+      };
 
-  const getStatus = ({signature}, callback?: any) =>{
+      if (!stop) {
-   
+        stop = true;
-		let stop = false
+        try {
-
+          const txTransaction = await getTx();
-		const getAnswer = async () => {
+          if (!txTransaction.error && txTransaction.signature) {
-			const getTx = async () => {
+            await new Promise((res) =>
-				const url = `${getBaseApiReact()}/transactions/signature/${signature}`
-				const res = await fetch(url)
-
-				return await res.json()
-			}
-
-			if (!stop) {
-				stop = true
-
-				try {
-					const txTransaction = await getTx()
-          
-					if (!txTransaction.error && txTransaction.signature) {
-            await new Promise((res)=> {
               setTimeout(() => {
-                  res(null)
+                res(null);
-              }, 300000);
+              }, 300000)
-            })
+            );
-						setTxList((prev)=> {
+            setTxList((prev) => {
               let previousData = [...prev];
-              const findTxWithSignature = previousData.findIndex((tx)=> tx.signature === signature)
+              const findTxWithSignature = previousData.findIndex(
-              if(findTxWithSignature !== -1){
+                (tx) => tx.signature === signature
+              );
+              if (findTxWithSignature !== -1) {
                 previousData[findTxWithSignature].done = true;
-                return previousData
+                return previousData;
               }
-              return previousData
+              return previousData;
-            })
+            });
-            if(callback){
+            if (callback) {
-              callback(true)
+              callback(true);
             }
-            clearInterval(intervals.current[signature])
+            clearInterval(intervals.current[signature]);
+          }
+        } catch (error) {}
+        stop = false;
+      }
+    };
 
-					}
+    intervals.current[signature] = setInterval(getAnswer, 120000);
-				} catch (error) { }
+  };
-
-				stop = false
-			}
-		}
-
-		intervals.current[signature] = setInterval(getAnswer, 120000)
-	}
 
   useEffect(() => {
     setTxList((prev) => {
@@ -80,111 +72,117 @@ export const TaskManger = ({getUserInfo}) => {
         const findGroup = txList.findIndex(
           (tx) => tx?.type === "joined-group" && tx?.groupId === group.groupId
         );
-        if (findGroup !== -1 && !previousData[findGroup]?.done ) {
+        if (findGroup !== -1 && !previousData[findGroup]?.done) {
-          // add notification
           previousData[findGroup].done = true;
         }
-        
       });
+
       memberGroups.forEach((group) => {
         const findGroup = txList.findIndex(
-          (tx) => tx?.type === "created-group" && tx?.groupName === group.groupName
+          (tx) =>
+            tx?.type === "created-group" && tx?.groupName === group.groupName
         );
-        if (findGroup !== -1 && !previousData[findGroup]?.done ) {
+        if (findGroup !== -1 && !previousData[findGroup]?.done) {
-          // add notification
           previousData[findGroup].done = true;
         }
-        
       });
-      prev.forEach((tx, index)=> {
+
-        if(tx?.type === "leave-group" && memberGroups.findIndex(
+      prev.forEach((tx, index) => {
-          (group) => tx?.groupId  === group.groupId
+        if (
-        ) === -1){
+          tx?.type === "leave-group" &&
+          memberGroups.findIndex((group) => tx?.groupId === group.groupId) === -1
+        ) {
           previousData[index].done = true;
         }
+      });
 
-      })
+      prev.forEach((tx) => {
-      prev.forEach((tx, index)=> {
+        if (
-      
+          ["created-common-secret", "joined-group-request", "join-request-accept"].includes(
-        if(tx?.type === "created-common-secret" && tx?.signature && !tx.done){
+            tx?.type
-          if(intervals.current[tx.signature]) return
+          ) &&
-
+          tx?.signature &&
-          getStatus({signature: tx.signature})
+          !tx.done
+        ) {
+          if (!intervals.current[tx.signature]) {
+            getStatus({ signature: tx.signature });
+          }
         }
-
+        if (tx?.type === "register-name" && tx?.signature && !tx.done) {
-      })
+          if (!intervals.current[tx.signature]) {
-      prev.forEach((tx, index)=> {
+            getStatus({ signature: tx.signature }, getUserInfo);
-      
+          }
-        if(tx?.type === "joined-group-request" && tx?.signature && !tx.done){
-          if(intervals.current[tx.signature]) return
-
-          getStatus({signature: tx.signature})
         }
+      });
 
-      })
-      prev.forEach((tx, index)=> {
-      
-        if(tx?.type === "join-request-accept" && tx?.signature && !tx.done){
-          if(intervals.current[tx.signature]) return
-
-          getStatus({signature: tx.signature})
-        }
-
-      })
-      
-      prev.forEach((tx, index)=> {
-      
-        if(tx?.type === "register-name" && tx?.signature && !tx.done){
-          if(intervals.current[tx.signature]) return
-
-          getStatus({signature: tx.signature}, getUserInfo)
-        }
-
-      })
-     
       return previousData;
     });
   }, [memberGroups, getUserInfo]);
 
-  if(isMobile) return null
+  if (isMobile || txList?.length === 0 || txList.every((item) => item?.done))
+    return null;
 
-  if (txList?.length === 0 || txList.filter((item) => !item?.done).length === 0) return null;
   return (
-    <List
+    <>
-      sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
+      {!open && (
-      component="nav"
+        <IconButton
-      aria-labelledby="nested-list-subheader"
+          onClick={handleClick}
-    >
+          sx={{
-      <ListItemButton onClick={handleClick}>
+            position: "fixed",
-        <ListItemIcon>
+            bottom: 16,
-          {txList.find((item) => !item.done) ? (
+            right: 16,
-            <PendingIcon sx={{
+            bgcolor: "primary.main",
-              color: 'white'
+            color: "white",
-            }} />
+            ":hover": { bgcolor: "primary.dark" },
-          ) : (
+          }}
-            <TaskAltIcon sx={{
+        >
-              color: 'white'
+          {txList.some((item) => !item.done) ? <PendingIcon /> : <TaskAltIcon />}
-            }} />
+        </IconButton>
-          )}
+      )}
-        </ListItemIcon>
+      {open && (
-        <ListItemText primary="Ongoing Transactions" />
+        <List
-        {open ? <ExpandLess /> : <ExpandMore />}
+          sx={{
-      </ListItemButton>
+            position: "fixed",
-      <Collapse in={open} timeout="auto" unmountOnExit>
+            bottom: 16,
-        <List component="div" disablePadding sx={{
+            right: 16,
-          maxHeight: '400px',
+            width: "300px",
-          overflow: 'auto'
+            maxHeight: "400px",
-        }}>
+            bgcolor: "background.paper",
-          {txList.map((item) => {
+            boxShadow: 4,
-            return (
+            overflow: "auto",
-              <ListItemButton key={item?.signature} sx={{ pl: 4 }}>
+            zIndex: 10,
-                
+            padding: '0px'
-                <ListItemText primary={item?.done ? item.labelDone : item.label} />
+          }}
-              </ListItemButton>
+          component="nav"
-            );
+        >
-          })}
+          <ListItemButton  onClick={handleClick}>
+            <ListItemIcon>
+              {txList.some((item) => !item.done) ? (
+                <PendingIcon sx={{
+                  color:'white'
+                }} />
+              ) : (
+                <TaskAltIcon sx={{
+                  color:'white'
+                }} />
+              )}
+            </ListItemIcon>
+            <ListItemText primary="Ongoing Transactions" />
+            {open ? <ExpandLess /> : <ExpandMore />}
+          </ListItemButton>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <List component="div" disablePadding>
+              {txList.map((item) => (
+                <ListItemButton key={item?.signature} sx={{ pl: 4 }}>
+                  <ListItemText
+                    primary={item?.done ? item.labelDone : item.label}
+                  />
+                </ListItemButton>
+              ))}
+            </List>
+          </Collapse>
         </List>
-      </Collapse>
+      )}
-    </List>
+    </>
   );
 };

src/qortalRequests/get.ts

@@ -1638,6 +1638,10 @@ export const getWalletBalance = async (data, bypassPermission?: boolean, isFromE
     throw new Error(errorMsg);
   }
 
+  const  isGateway =  await isRunningGateway()
+
+  if(data?.coin === 'ARRR' && isGateway) throw new Error('Cannot view ARRR balance through the gateway. Please use your local node.')
+
   const value = (await getPermission(`qAPPAutoWalletBalance-${appInfo?.name}-${data.coin}`)) || false;
   let skip = false;
   if (value) {
@@ -1691,7 +1695,7 @@ export const getWalletBalance = async (data, bypassPermission?: boolean, isFromE
         case "BTC":
           _url = await createEndpoint(`/crosschain/btc/walletbalance`);
 
-          _body = parsedData.derivedMasterPublicKey;
+          _body = parsedData.btcPublicKey;
           break;
         case "LTC":
           _url = await createEndpoint(`/crosschain/ltc/walletbalance`);

src/utils/time.ts

@@ -35,4 +35,22 @@ export function formatTimestamp(timestamp: number): string {
     const date = moment(unixTimestamp, 'x').fromNow()
   
     return date
+  }
+
+  export function sortArrayByTimestampAndGroupName(array) {
+    return array.sort((a, b) => {
+      if (a.timestamp && b.timestamp) {
+        // Both have timestamp, sort by timestamp descending
+        return b.timestamp - a.timestamp;
+      } else if (a.timestamp) {
+        // Only `a` has timestamp, it comes first
+        return -1;
+      } else if (b.timestamp) {
+        // Only `b` has timestamp, it comes first
+        return 1;
+      } else {
+        // Neither has timestamp, sort alphabetically by groupName
+        return a.groupName.localeCompare(b.groupName);
+      }
+    });
   }