From 19cc6e93ca296d1e674490c24b2fde5fa83bb499 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Fri, 7 Oct 2022 12:33:22 -0700
Subject: [PATCH] Fix Tor connection icon in web

---
 frontend/src/components/TorConnection.tsx | 128 ++++++++++++----------
 frontend/static/locales/en.json           |   5 +-
 2 files changed, 76 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/TorConnection.tsx b/frontend/src/components/TorConnection.tsx
index 6b0ed2d5..96ae0e00 100644
--- a/frontend/src/components/TorConnection.tsx
+++ b/frontend/src/components/TorConnection.tsx
@@ -2,6 +2,52 @@ import React, { useEffect, useState } from 'react';
 import { Box, CircularProgress, Tooltip } from '@mui/material';
 import { TorIcon } from './Icons';
 import { useTranslation } from 'react-i18next';
+import { gridQuickFilterValuesSelector } from '@mui/x-data-grid';
+
+interface Props {
+  color: 'inherit' | 'error' | 'warning' | 'success' | 'primary' | 'secondary' | 'info' | undefined;
+  tooltipOpen?: boolean | undefined;
+  title: string;
+  progress: boolean;
+}
+
+const TorIndicator = ({ color, tooltipOpen = undefined, title, progress }: Props): JSX.Element => {
+  return (
+    <Tooltip
+      open={tooltipOpen}
+      enterTouchDelay={0}
+      enterDelay={1000}
+      placement='right'
+      title={title}
+    >
+      <Box sx={{ display: 'inline-flex', position: 'fixed', left: '0.5em', top: '0.5em' }}>
+        {progress ? (
+          <>
+            <CircularProgress color={color} thickness={6} size={22} />
+            <Box
+              sx={{
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <TorIcon color={color} sx={{ width: 20, height: 20 }} />
+            </Box>
+          </>
+        ) : (
+          <Box>
+            <TorIcon color={color} sx={{ width: 20, height: 20 }} />
+          </Box>
+        )}
+      </Box>
+    </Tooltip>
+  );
+};
 
 const TorConnection = (): JSX.Element => {
   const [torStatus, setTorStatus] = useState<string>('NOTINIT');
@@ -13,66 +59,38 @@ const TorConnection = (): JSX.Element => {
     });
   }, []);
 
-  if (window?.NativeRobosats && (torStatus === 'NOTINIT' || torStatus === 'STARTING')) {
+  if (!window?.NativeRobosats) {
+    return <></>;
+  }
+
+  if (torStatus === 'NOTINIT') {
     return (
-      <Box sx={{ display: 'inline-flex', position: 'fixed', left: '0.5em', top: '0.5em' }}>
-        <Tooltip open={true} placement='right' title={t('Connecting to TOR network')}>
-          <CircularProgress color='warning' thickness={6} size={23} />
-        </Tooltip>
-        <Box
-          sx={{
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            position: 'absolute',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <TorIcon color='warning' sx={{ width: 20, height: 20 }} />
-        </Box>
-      </Box>
+      <TorIndicator
+        color='primary'
+        progress={true}
+        tooltipOpen={true}
+        title={t('Initializing TOR daemon')}
+      />
     );
-  } else if (window?.NativeRobosats && (torStatus === '"Done"' || torStatus === 'DONE')) {
+  } else if (torStatus === 'STARTING') {
     return (
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'fixed',
-          left: '0.5em',
-          top: '0.5em',
-        }}
-      >
-        <Tooltip
-          enterTouchDelay={0}
-          enterDelay={1000}
-          placement='right'
-          title={t('Connected to TOR network')}
-        >
-          <TorIcon color='success' sx={{ width: 20, height: 20 }} />
-        </Tooltip>
-      </Box>
+      <TorIndicator
+        color='warning'
+        progress={true}
+        tooltipOpen={true}
+        title={t('Connecting to TOR network')}
+      />
     );
-  } else if (true) {
+  } else if (torStatus === '"Done"' || torStatus === 'DONE') {
+    return <TorIndicator color='success' progress={false} title={t('Connected to TOR network')} />;
+  } else {
     return (
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'fixed',
-          left: '0.5em',
-          top: '0.5em',
-        }}
-      >
-        <Tooltip open={true} placement='right' title={t('TOR connection error')}>
-          <TorIcon color='error' sx={{ width: 20, height: 20 }} />
-        </Tooltip>
-      </Box>
+      <TorIndicator
+        color='error'
+        progress={false}
+        tooltipOpen={true}
+        title={t('Connection error')}
+      />
     );
   }
 };
diff --git a/frontend/static/locales/en.json b/frontend/static/locales/en.json
index 1b1c7e74..ff8f9585 100644
--- a/frontend/static/locales/en.json
+++ b/frontend/static/locales/en.json
@@ -7,9 +7,10 @@
   "You are self-hosting RoboSats": "You are self-hosting RoboSats",
   "RoboSats client is served from your own node granting you the strongest security and privacy.": "RoboSats client is served from your own node granting you the strongest security and privacy.",
 
-  "Connected to TOR network": "Connected to TOR network",
-  "TOR connection error": "TOR connection error",
+  "Initializing TOR daemon": "Initializing TOR daemon",
   "Connecting to TOR network": "Connecting to TOR network",
+  "Connected to TOR network": "Connected to TOR network",
+  "Connection error": "Connection error",
 
   "USER GENERATION PAGE - UserGenPage.js": "Landing Page and User Generation",
   "Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange",