reuterShawn/remnantchat
1
0
Fork 0
forked from Shiloh/remnantchat
Code Pull Requests Activity

feat(ConnectionTestResults): [closes #124] explain connection types

Browse Source
This commit is contained in:
Jeremy Kahn 2023-06-17 14:51:54 -05:00
parent 6c5c4129f1
commit ec9c9f61ce
1 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/Shell/ConnectionTestResults.tsx
View File

@ -1,4 +1,4 @@
import { Typography } from '@mui/material'
import { Tooltip, Typography } from '@mui/material'
import Circle from '@mui/icons-material/FiberManualRecord'
import { ConnectionTestResults as IConnectionTestResults } from './useConnectionTest'
@ -11,39 +11,45 @@ export const ConnectionTestResults = ({
}: ConnectionTestResultsProps) => {
if (hasHost && hasRelay) {
return (
<Typography variant="subtitle2">
<Typography
component="span"
sx={theme => ({ color: theme.palette.success.main })}
>
<Circle sx={{ fontSize: 'small' }} />
</Typography>{' '}
Full network connection
</Typography>
<Tooltip title="Connections can be established with all peers that also have a full network connection.">
<Typography variant="subtitle2">
<Typography
component="span"
sx={theme => ({ color: theme.palette.success.main })}
>
<Circle sx={{ fontSize: 'small' }} />
</Typography>{' '}
Full network connection
</Typography>
</Tooltip>
)
} else if (hasHost) {
return (
<Typography variant="subtitle2">
<Typography
component="span"
sx={theme => ({ color: theme.palette.warning.main })}
>
<Circle sx={{ fontSize: 'small' }} />
</Typography>{' '}
Partial network connection
</Typography>
<Tooltip title="Relay server is unavailable. Connections can only be established when a relay server is not needed for either peer.">
<Typography variant="subtitle2">
<Typography
component="span"
sx={theme => ({ color: theme.palette.warning.main })}
>
<Circle sx={{ fontSize: 'small' }} />
</Typography>{' '}
Partial network connection
</Typography>
</Tooltip>
)
} else {
return (
<Typography variant="subtitle2">
<Typography
component="span"
sx={theme => ({ color: theme.palette.error.main })}
>
<Circle sx={{ fontSize: 'small' }} />
</Typography>{' '}
No network connection
</Typography>
<Tooltip title="Pairing server is unavailable. Peer connections cannot be established.">
<Typography variant="subtitle2">
<Typography
component="span"
sx={theme => ({ color: theme.palette.error.main })}
>
<Circle sx={{ fontSize: 'small' }} />
</Typography>{' '}
No network connection
</Typography>
</Tooltip>
)
}
}