Merge pull request #2704 from nymtech/feature/nym-connect-display-info

NymConnect - Display service info in tooltip **1.1.5 Release**

nym-connect/src/components/ConnectionStatus.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Box, CircularProgress, Typography } from '@mui/material';
+import { Box, CircularProgress, Divider, Stack, Tooltip, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
 import { ConnectionStatusKind } from '../types';
 import { ServiceProvider } from '../types/directory';
+import { ServiceProviderInfo } from './ServiceProviderInfo';
 
 const FONT_SIZE = '10px';
 const FONT_WEIGHT = '600';
@@ -14,8 +15,8 @@ const ConnectionStatusContent: React.FC<{
   switch (status) {
     case ConnectionStatusKind.connected:
       return (
-        <Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} textAlign="center">
-          Connected
+        <Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} fontSize="14px">
+          Connected to
         </Typography>
       );
     case ConnectionStatusKind.disconnecting:
@@ -44,7 +45,7 @@ const ConnectionStatusContent: React.FC<{
           ml={1}
           textTransform="uppercase"
           textAlign="center"
-          fontSize="10px"
+          fontSize={FONT_SIZE}
           sx={{ wordSpacing: 3, letterSpacing: 2 }}
         >
           You are not protected
@@ -59,7 +60,7 @@ export const ConnectionStatus: React.FC<{
   status: ConnectionStatusKind;
   connectedSince?: DateTime;
   serviceProvider?: ServiceProvider;
-}> = ({ status, connectedSince, serviceProvider }) => {
+}> = ({ status, serviceProvider }) => {
   const color =
     status === ConnectionStatusKind.connected || status === ConnectionStatusKind.disconnecting
       ? '#21D072'
@@ -70,13 +71,13 @@ export const ConnectionStatus: React.FC<{
       <Box color={color} fontSize={FONT_SIZE} sx={{ mb: 1 }}>
         <ConnectionStatusContent status={status} />
       </Box>
-      <Box>
-        {serviceProvider && (
-          <Typography fontSize={12} textAlign="center">
-            To {serviceProvider.description}
-          </Typography>
-        )}
-      </Box>
+      {serviceProvider ? (
+        <Tooltip title={<ServiceProviderInfo serviceProvider={serviceProvider} />}>
+          <Box sx={{ cursor: 'pointer' }}>
+            {serviceProvider && <Typography>{serviceProvider.description}</Typography>}
+          </Box>
+        </Tooltip>
+      ) : null}
     </>
   );
 };

nym-connect/src/components/ServiceProviderInfo.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Divider, Stack, Typography } from '@mui/material';
+import { ServiceProvider } from 'src/types/directory';
+
+export const ServiceProviderInfo = ({ serviceProvider }: { serviceProvider: ServiceProvider }) => (
+  <Stack gap={1} sx={{ wordWrap: 'break-word', maxWidth: 150, p: 1 }}>
+    <Typography variant="body2" fontWeight="bold">
+      Connection info
+    </Typography>
+    <Typography variant="caption">{serviceProvider.description}</Typography>
+    <Divider />
+    <Typography variant="caption" fontWeight="bold">
+      Gateway <Typography variant="caption">{serviceProvider.gateway}</Typography>
+    </Typography>
+    <Divider />
+    <Typography variant="caption" fontWeight="bold">
+      Provider <Typography variant="caption">{serviceProvider.address.slice(0, 35)}...</Typography>
+    </Typography>
+  </Stack>
+);

nym-connect/src/context/main.tsx

@@ -86,6 +86,8 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
       .catch((e) => console.log(e));
 
     listen('socks5-event', (e: TauriEvent) => {
+      console.log(e);
+
       setError(e.payload);
     }).then((result) => {
       unlisten.push(result);

nym-connect/src/layouts/ConnectedLayout.tsx

@@ -37,11 +37,13 @@ export const ConnectedLayout: React.FC<{
 }) => (
   <>
     <IpAddressAndPortModal show={showInfoModal} onClose={handleCloseInfoModal} ipAddress={ipAddress} port={port} />
-    <Box pb={4}>
+    <Box>
       <ConnectionStatus status={ConnectionStatusKind.connected} serviceProvider={serviceProvider} />
     </Box>
-    <IpAddressAndPort label="Socks5 address" ipAddress={ipAddress} port={port} />
-    <Divider sx={{ my: 3 }} />
+    <Divider sx={{ my: 2 }} />
+    <Box sx={{ mb: 3 }}>
+      <IpAddressAndPort label="Socks5 address" ipAddress={ipAddress} port={port} />
+    </Box>
     {/* <ConnectionStats stats={stats} /> */}
     <ConnectionTimer connectedSince={connectedSince} />
     <ConnectionButton status={status} busy={busy} onClick={onConnectClick} isError={isError} />