mirror of
https://github.com/RoboSats/robosats.git
synced 2025-01-20 21:21:36 +00:00
Fix Tor connection icon in web
This commit is contained in:
parent
9bda934ee5
commit
19cc6e93ca
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -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",
|
||||||
|
Loading…
Reference in New Issue
Block a user