Fix Tor connection icon in web

This commit is contained in:
Reckless_Satoshi 2022-10-07 12:33:22 -07:00
parent 9bda934ee5
commit 19cc6e93ca
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
2 changed files with 76 additions and 57 deletions

View File

@ -2,6 +2,52 @@ import React, { useEffect, useState } from 'react';
import { Box, CircularProgress, Tooltip } from '@mui/material'; import { Box, CircularProgress, Tooltip } from '@mui/material';
import { TorIcon } from './Icons'; import { TorIcon } from './Icons';
import { useTranslation } from 'react-i18next'; 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 TorConnection = (): JSX.Element => {
const [torStatus, setTorStatus] = useState<string>('NOTINIT'); 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 ( return (
<Box sx={{ display: 'inline-flex', position: 'fixed', left: '0.5em', top: '0.5em' }}> <TorIndicator
<Tooltip open={true} placement='right' title={t('Connecting to TOR network')}> color='primary'
<CircularProgress color='warning' thickness={6} size={23} /> progress={true}
</Tooltip> tooltipOpen={true}
<Box title={t('Initializing TOR daemon')}
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>
); );
} else if (window?.NativeRobosats && (torStatus === '"Done"' || torStatus === 'DONE')) { } else if (torStatus === 'STARTING') {
return ( return (
<Box <TorIndicator
sx={{ color='warning'
display: 'flex', progress={true}
alignItems: 'center', tooltipOpen={true}
justifyContent: 'center', title={t('Connecting to TOR network')}
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>
); );
} else if (true) { } else if (torStatus === '"Done"' || torStatus === 'DONE') {
return <TorIndicator color='success' progress={false} title={t('Connected to TOR network')} />;
} else {
return ( return (
<Box <TorIndicator
sx={{ color='error'
display: 'flex', progress={false}
alignItems: 'center', tooltipOpen={true}
justifyContent: 'center', title={t('Connection error')}
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>
); );
} }
}; };

View File

@ -7,9 +7,10 @@
"You are self-hosting RoboSats": "You are self-hosting RoboSats", "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.", "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", "Initializing TOR daemon": "Initializing TOR daemon",
"TOR connection error": "TOR connection error",
"Connecting to TOR network": "Connecting to TOR network", "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", "USER GENERATION PAGE - UserGenPage.js": "Landing Page and User Generation",
"Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange", "Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange",