Merge pull request #1937 from Bilb/hover-ip-o-onion-dialog

show ip of onion path on hover of country name

package.json

@@ -2,7 +2,7 @@
   "name": "session-desktop",
   "productName": "Session",
   "description": "Private messaging from your desktop",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "license": "GPL-3.0",
   "author": {
     "name": "Loki Project",

stylesheets/_session.scss

@@ -1094,7 +1094,8 @@ input {
   display: flex;
   flex-direction: column;
   margin: $session-margin-sm;
-  align-items: flex-start;
+  align-items: center;
+  min-width: 10vw;
   position: relative;
 
   .onion__node {
@@ -1121,6 +1122,7 @@ input {
   }
   .onion__node__country {
     margin: $session-margin-sm;
+    min-width: 150px;
   }
 
   .onion__growing-icon {

ts/components/dialog/OnionStatusPathDialog.tsx

@@ -19,13 +19,34 @@ import { Flex } from '../basic/Flex';
 import { SessionIcon, SessionIconButton } from '../session/icon';
 import { SessionSpinner } from '../session/SessionSpinner';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
+// tslint:disable-next-line: no-submodule-imports
+import useHover from 'react-use/lib/useHover';
 
 export type StatusLightType = {
   glowStartDelay: number;
   glowDuration: number;
   color?: string;
 };
 
+const OnionCountryDisplay = ({
+  index,
+  labelText,
+  snodeIp,
+}: {
+  snodeIp?: string;
+  labelText: string;
+  index: number;
+}) => {
+  const element = (hovered: boolean) => (
+    <div className="onion__node__country" key={`country-${index}`}>
+      {hovered && snodeIp ? snodeIp : labelText}
+    </div>
+  );
+  const [hoverable] = useHover(element);
+
+  return hoverable;
+};
+
 const OnionPathModalInner = () => {
   const onionPath = useSelector(getFirstOnionPath);
   const isOnline = useSelector(getIsOnline);
@@ -69,14 +90,12 @@ const OnionPathModalInner = () => {
             {nodes.map((snode: Snode | any, index: number) => {
               let labelText = snode.label
                 ? snode.label
-                : `${countryLookup.byIso(ip2country(snode.ip))?.country} [${snode.ip}]`;
+                : `${countryLookup.byIso(ip2country(snode.ip))?.country}`;
               if (!labelText) {
                 labelText = window.i18n('unknownCountry');
               }
               return labelText ? (
-                <div className="onion__node__country" key={`country-${index}`}>
-                  {labelText}
-                </div>
+                <OnionCountryDisplay index={index} labelText={labelText} snodeIp={snode.ip} />
               ) : null;
             })}
           </Flex>