From 6e26f582d0f2c51570027d807809cbd2a5ae0c4f Mon Sep 17 00:00:00 2001
From: Nicola Benaglia <nico.benaz@gmail.com>
Date: Sun, 20 Apr 2025 09:39:51 +0200
Subject: [PATCH] Format code

---
 src/components/Group/WalletsAppWrapper.tsx | 131 ++++++++++-----------
 1 file changed, 63 insertions(+), 68 deletions(-)

diff --git a/src/components/Group/WalletsAppWrapper.tsx b/src/components/Group/WalletsAppWrapper.tsx
index 788a36a..64b89be 100644
--- a/src/components/Group/WalletsAppWrapper.tsx
+++ b/src/components/Group/WalletsAppWrapper.tsx
@@ -1,23 +1,17 @@
-import { Box, ButtonBase, Divider, Typography } from "@mui/material";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import CloseIcon from "@mui/icons-material/Close";
-import AppViewerContainer from "../Apps/AppViewerContainer";
+import { Box, ButtonBase, Divider, Typography } from '@mui/material';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import AppViewerContainer from '../Apps/AppViewerContainer';
 import {
   executeEvent,
   subscribeToEvent,
   unsubscribeFromEvent,
-} from "../../utils/events";
-import { useRecoilState } from "recoil";
-import { navigationControllerAtom } from "../../atoms/global";
-import { AppsNavBarLeft, AppsNavBarParent } from "../Apps/Apps-styles";
-import NavBack from "../../assets/svgs/NavBack.svg";
-import RefreshIcon from "@mui/icons-material/Refresh";
+} from '../../utils/events';
+import { useRecoilState } from 'recoil';
+import { navigationControllerAtom } from '../../atoms/global';
+import { AppsNavBarLeft, AppsNavBarParent } from '../Apps/Apps-styles';
+import { NavBack } from '../../assets/svgs/NavBack.tsx';
+import RefreshIcon from '@mui/icons-material/Refresh';
 
 export const WalletsAppWrapper = () => {
   const iframeRef = useRef(null);
@@ -26,10 +20,10 @@ export const WalletsAppWrapper = () => {
     navigationControllerAtom
   );
   const [selectedTab, setSelectedTab] = useState({
-    tabId: "5558589",
-    name: "Q-Wallets",
-    service: "APP",
-    path: 'qortal?authOnMount=true'
+    tabId: '5558589',
+    name: 'Q-Wallets',
+    service: 'APP',
+    path: 'qortal?authOnMount=true',
   });
 
   const isDisableBackButton = useMemo(() => {
@@ -48,64 +42,64 @@ export const WalletsAppWrapper = () => {
   );
 
   useEffect(() => {
-    subscribeToEvent("openWalletsApp", openWalletsAppFunc);
+    subscribeToEvent('openWalletsApp', openWalletsAppFunc);
 
     return () => {
-      unsubscribeFromEvent("openWalletsApp", openWalletsAppFunc);
+      unsubscribeFromEvent('openWalletsApp', openWalletsAppFunc);
     };
   }, [openWalletsAppFunc]);
 
-  const handleClose = ()=> {
+  const handleClose = () => {
     setIsOpen(false);
-    iframeRef.current = null
-  }
+    iframeRef.current = null;
+  };
 
   return (
     <>
       {isOpen && (
         <Box
           sx={{
-            position: "fixed",
-            height: "100vh",
-            width: "100vw",
-            backgroundColor: "#27282c",
+            position: 'fixed',
+            height: '100vh',
+            width: '100vw',
+            backgroundColor: '#27282c', // TODO: set color theme
             zIndex: 100,
             bottom: 0,
             right: 0,
-            overflow: "hidden",
-            borderTopLeftRadius: "10px",
-            borderTopRightRadius: "10px",
+            overflow: 'hidden',
+            borderTopLeftRadius: '10px',
+            borderTopRightRadius: '10px',
             boxShadow: 4,
           }}
         >
           <Box
             sx={{
-              height: "100%",
-              width: "100%",
+              height: '100%',
+              width: '100%',
             }}
           >
             <Box
               sx={{
-                height: "40px",
-                display: "flex",
-                alignItems: "center",
-                padding: "5px",
+                height: '40px',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '5px',
 
-                justifyContent: "space-between",
+                justifyContent: 'space-between',
               }}
             >
               <Typography>Q-Wallets</Typography>
-              <ButtonBase
-                onClick={handleClose}
-              >
+              <ButtonBase onClick={handleClose}>
                 <CloseIcon
                   sx={{
-                    color: "white",
+                    color: 'white',
                   }}
                 />
               </ButtonBase>
             </Box>
+
             <Divider />
+
             <AppViewerContainer
               customHeight="calc(100% - 40px - 60px)"
               app={selectedTab}
@@ -114,9 +108,11 @@ export const WalletsAppWrapper = () => {
               skipAuth={true}
             />
             <AppsNavBarParent>
-              <AppsNavBarLeft sx={{
-                gap: '25px'
-              }}>
+              <AppsNavBarLeft
+                sx={{
+                  gap: '25px',
+                }}
+              >
                 <ButtonBase
                   onClick={() => {
                     executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
@@ -124,31 +120,30 @@ export const WalletsAppWrapper = () => {
                   disabled={isDisableBackButton}
                   sx={{
                     opacity: !isDisableBackButton ? 1 : 0.1,
-                    cursor: !isDisableBackButton ? "pointer" : "default",
+                    cursor: !isDisableBackButton ? 'pointer' : 'default',
                   }}
                 >
-                  <img src={NavBack} />
+                  <NavBack />
                 </ButtonBase>
-                <ButtonBase  onClick={() => {
-            if (selectedTab?.refreshFunc) {
-              selectedTab.refreshFunc(selectedTab?.tabId);
-            
-            } else {
-              executeEvent("refreshApp", {
-                tabId: selectedTab?.tabId,
-              });
-            }
-            
-            
-          }}>
-                <RefreshIcon
-              height={20}
-              sx={{
-                color: "rgba(250, 250, 250, 0.5)",
-                height: '30px',
-                width: 'auto'
-              }}
-            />
+                <ButtonBase
+                  onClick={() => {
+                    if (selectedTab?.refreshFunc) {
+                      selectedTab.refreshFunc(selectedTab?.tabId);
+                    } else {
+                      executeEvent('refreshApp', {
+                        tabId: selectedTab?.tabId,
+                      });
+                    }
+                  }}
+                >
+                  <RefreshIcon
+                    height={20}
+                    sx={{
+                      color: 'rgba(250, 250, 250, 0.5)',
+                      height: '30px',
+                      width: 'auto',
+                    }}
+                  />
                 </ButtonBase>
               </AppsNavBarLeft>
             </AppsNavBarParent>