New mobile app

docs/header-menu-jsons/navigation.json

@@ -31,7 +31,7 @@
           "url": "/docs/lightning/"
         },
         {
-          "title": "<span class=\"side-bar-item\">&nbsp;&nbsp;<img id=\"side-icon-small\" src=\"/assets/vector/tor.svg\"/>TOR Network</span>",
+          "title": "<span class=\"side-bar-item\">&nbsp;&nbsp;<img id=\"side-icon-small\" src=\"/assets/vector/tor.svg\"/>Tor Network</span>",
           "url": "/docs/tor/"
         },
         {

docs/header-menu-jsons/navigation_es.json

@@ -31,7 +31,7 @@
           "url": "/docs/es/lightning/"
         },
         {
-          "title": "<span class=\"side-bar-item\">&nbsp;&nbsp;<img id=\"side-icon-small\" src=\"/assets/vector/tor.svg\"/>La red TOR</span>",
+          "title": "<span class=\"side-bar-item\">&nbsp;&nbsp;<img id=\"side-icon-small\" src=\"/assets/vector/tor.svg\"/>La red Tor</span>",
           "url": "/docs/es/tor/"
         },
         {

docs/header-menu-jsons/navigation_fr.json

@@ -31,7 +31,7 @@
           "url": "/docs/fr/lightning/"
         },
         {
-          "title": "<span class=\"side-bar-item\">&nbsp;&nbsp;<img id=\"side-icon-small\" src=\"/assets/vector/tor.svg\"/>TOR Network</span>",
+          "title": "<span class=\"side-bar-item\">&nbsp;&nbsp;<img id=\"side-icon-small\" src=\"/assets/vector/tor.svg\"/>Tor Network</span>",
           "url": "/docs/fr/tor/"
         },
         {

docs/header-menu-jsons/navigation_pt.json

@@ -31,7 +31,7 @@
           "url": "/docs/pt/lightning/"
         },
         {
-          "title": "<span class=\"side-bar-item\">&nbsp;&nbsp;<img id=\"side-icon-small\" src=\"/assets/vector/tor.svg\"/>A rede TOR</span>",
+          "title": "<span class=\"side-bar-item\">&nbsp;&nbsp;<img id=\"side-icon-small\" src=\"/assets/vector/tor.svg\"/>A rede Tor</span>",
           "url": "/docs/pt/tor/"
         },
         {

frontend/package.json

@@ -98,6 +98,7 @@
     "reconnecting-websocket": "^4.4.0",
     "robo-identities-wasm": "^0.1.0",
     "simple-plist": "^1.3.1",
+    "uuid": "^11.1.0",
     "webln": "^0.3.2",
     "websocket": "^1.0.35"
   }

frontend/src/App.tsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client';
 import Main from './basic/Main';
 import { CssBaseline } from '@mui/material';
 import HostAlert from './components/HostAlert';
-import TorConnectionBadge from './components/TorConnection';
 
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n/Web';
@@ -13,7 +12,6 @@ import ErrorBoundary from './components/ErrorBoundary';
 import { AppContextProvider } from './contexts/AppContext';
 import { GarageContextProvider } from './contexts/GarageContext';
 import { FederationContextProvider } from './contexts/FederationContext';
-import NotificationSwitchBadge from './components/NotificationSwitch';
 
 const App = (): React.JSX.Element => {
   const [client] = window.RobosatsSettings.split('-');
@@ -26,14 +24,7 @@ const App = (): React.JSX.Element => {
               <FederationContextProvider>
                 <GarageContextProvider>
                   <CssBaseline />
-                  {client === 'mobile' ? (
-                    <div style={{ display: 'inline-flex', position: 'fixed', top: '0.5em' }}>
-                      <TorConnectionBadge />
-                      <NotificationSwitchBadge />
-                    </div>
-                  ) : (
-                    <HostAlert />
-                  )}
+                  {client !== 'mobile' && <HostAlert />}
                   <Main />
                 </GarageContextProvider>
               </FederationContextProvider>

frontend/src/basic/Main.tsx

@@ -43,7 +43,7 @@ const MainBox = styled(Box)<MainBoxProps>((props) => ({
 
 const Main: React.FC = () => {
   const { t } = useTranslation();
-  const { settings, page, setOpen, windowSize, navbarHeight, client } =
+  const { settings, page, setOpen, windowSize, navbarHeight } =
     useContext<UseAppStoreType>(AppContext);
   const { garage } = useContext<UseGarageStoreType>(GarageContext);
 
@@ -65,7 +65,7 @@ const Main: React.FC = () => {
         <></>
       )}
       <NavBar />
-      <MainBox navbarHeight={navbarHeight} style={{ paddingTop: client === 'mobile' ? '25px' : 0 }}>
+      <MainBox navbarHeight={navbarHeight}>
         <Routes />
       </MainBox>
       <MainDialogs />

frontend/src/basic/NavBar/AppBar/index.tsx

@@ -15,6 +15,7 @@ import {
   Fab,
   Button,
   Collapse,
+  CircularProgress,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import {
@@ -36,7 +37,7 @@ import { UseGarageStoreType, GarageContext } from '../../../contexts/GarageConte
 import { Page } from '..';
 import RobotAvatar from '../../../components/RobotAvatar';
 import { AppContext, closeAll, UseAppStoreType } from '../../../contexts/AppContext';
-import { RoboSatsTextIcon } from '../../../components/Icons';
+import { RoboSatsTextIcon, TorIcon } from '../../../components/Icons';
 import { genBase62Token } from '../../../utils';
 import { UseFederationStoreType, FederationContext } from '../../../contexts/FederationContext';
 
@@ -48,13 +49,35 @@ const AppBar = ({ changePage }: AppBarProps): React.JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
   const { garage } = useContext<UseGarageStoreType>(GarageContext);
-  const { open, setOpen, page } = useContext<UseAppStoreType>(AppContext);
+  const { open, setOpen, page, torStatus, client } = useContext<UseAppStoreType>(AppContext);
   const { federation } = useContext<UseFederationStoreType>(FederationContext);
   const [show, setShow] = useState<boolean>(false);
   const [openGarage, setOpenGarage] = useState<boolean>(false);
 
+  const [torColor, setTorColor] = useState<
+    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit'
+  >('error');
+  const [torProgress, setTorProgress] = useState<boolean>(true);
+  const [torTitle, setTorTitle] = useState<string>(t('Connection error'));
+
   const slot = garage.getSlot();
 
+  useEffect(() => {
+    if (torStatus === 'OFF' || torStatus === 'STOPPING') {
+      setTorColor('primary');
+      setTorProgress(true);
+      setTorTitle(t('Initializing Tor daemon'));
+    } else if (torStatus === 'STARTING') {
+      setTorColor('warning');
+      setTorProgress(true);
+      setTorTitle(t('Connecting to Tor network'));
+    } else if (torStatus === 'ON') {
+      setTorColor('success');
+      setTorProgress(false);
+      setTorTitle(t('Connected to Tor network'));
+    }
+  }, [torStatus]);
+
   const onSectionClick = (newPage: Page) => {
     setShow(false);
     changePage(newPage);
@@ -274,6 +297,38 @@ const AppBar = ({ changePage }: AppBarProps): React.JSX.Element => {
               </ListItemButton>
             </ListItem>
             <div style={{ flexGrow: 1 }} />
+            {client === 'mobile' && (
+              <ListItem disablePadding sx={{ display: 'flex', flexDirection: 'column' }}>
+                <ListItemButton selected>
+                  <ListItemIcon>
+                    {torProgress ? (
+                      <>
+                        <CircularProgress color={torColor} thickness={6} size={22} />
+                        <Box
+                          sx={{
+                            top: 0,
+                            left: 0,
+                            bottom: 0,
+                            right: 0,
+                            position: 'absolute',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                          }}
+                        >
+                          <TorIcon color={torColor} sx={{ width: 20, height: 20 }} />
+                        </Box>
+                      </>
+                    ) : (
+                      <Box>
+                        <TorIcon color={torColor} sx={{ width: 20, height: 20 }} />
+                      </Box>
+                    )}
+                  </ListItemIcon>
+                  <ListItemText primary={torTitle} />
+                </ListItemButton>
+              </ListItem>
+            )}
             <ListItem disablePadding sx={{ display: 'flex', flexDirection: 'column' }}>
               <svg width={0} height={0}>
                 <linearGradient id='linearColors' x1={1} y1={0} x2={1} y2={1}>

frontend/src/basic/NavBar/index.tsx

@@ -21,14 +21,22 @@ const NavBar = (): React.JSX.Element => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const pagesPosition = {
-    robot: 1,
+  const pagesPositionWeb = {
+    garage: 1,
     offers: 2,
     create: 3,
     order: 4,
     settings: 5,
   };
 
+  const pagesPositionMobile = {
+    garage: 5,
+    offers: 4,
+    order: 3,
+    create: 2,
+    settings: 1,
+  };
+
   useEffect(() => {
     // change tab (page) into the current route
     const pathPage: Page | string = location.pathname.split('/')[1];
@@ -42,8 +50,9 @@ const NavBar = (): React.JSX.Element => {
   }, [location]);
 
   const handleSlideDirection = function (oldPage: Page, newPage: Page): void {
-    const oldPos: number = pagesPosition[oldPage];
-    const newPos: number = pagesPosition[newPage];
+    const position = mobileView ? pagesPositionMobile : pagesPositionWeb;
+    const oldPos: number = position[oldPage];
+    const newPos: number = position[newPage];
     setSlideDirection(
       newPos > oldPos ? { in: 'left', out: 'right' } : { in: 'right', out: 'left' },
     );