Display actual IP address on onion path dialog

ts/components/OnionStatusDialog.tsx

@@ -1,7 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './session/SessionButton';
 import { SessionModal } from './session/SessionModal';
 import { DefaultTheme } from 'styled-components';
+import { getPathNodesIPAddresses } from '../session/onions/onionSend';
+import { useInterval } from '../hooks/useInterval';
+
 import electron from 'electron';
 const { shell } = electron;
 
@@ -46,33 +49,61 @@ const OnionPath = (props: { nodes: IPathNode[] }) => {
 export const OnionStatusDialog = (props: Props) => {
   const { theme, onClose } = props;
 
+  const [onionPathAddresses, setOnionPathAddresses] = useState<string[]>([])
+  const [pathNodes, setPathNodes] = useState<IPathNode[]>([])
+
+  const getOnionPathAddresses = () => {
+    const onionPathAddresses = getPathNodesIPAddresses();
+    console.log("Current Onion Path - ", onionPathAddresses);
+    setOnionPathAddresses(onionPathAddresses)
+  }
+
+  const buildOnionPath = () => {
+    // Default path values
+    let path = [
+      {
+        label: 'You'
+      },
+      {
+        ip: 'Connecting...',
+        label: 'Entry Node'
+      },
+      {
+        ip: 'Connecting...',
+        label: 'Service Node'
+      },
+      {
+        ip: 'Connecting...',
+        label: 'Service Node'
+      },
+      {
+        label: 'Destination'
+      },
+    ]
+
+    // if there is a onion path, update the addresses
+    if (onionPathAddresses.length) {
+      onionPathAddresses.forEach((ipAddress, index) => {
+        const pathIndex = index + 1;
+        path[pathIndex].ip = ipAddress;
+      })
+    }
+    setPathNodes(path);
+  }
+
+  useInterval(() => {
+    getOnionPathAddresses()
+  }, 1000)
+
+  useEffect(() => {
+    buildOnionPath()
+  }, [onionPathAddresses])
+
   const openFAQPage = () => {
     console.log("Opening FAQ Page")
     shell.openExternal('https://getsession.org/faq/#onion-routing');
   }
-
+  
-  const nodes: IPathNode[] = [
-    {
-      label: 'You'
-    },
-    {
-      ip: '100',
-      label: 'Entry Node'
-    },
-    {
-      ip: '100',
-      label: 'Service Node'
-    },
-    {
-      ip: '100',
-      label: 'Service Node'
-    },
-    {
-      ip: '100',
-      label: 'Destination'
-    },
-  ]
-
   return (
     <SessionModal
       title={window.i18n('onionPathIndicatorTitle')}
@@ -84,7 +115,7 @@ export const OnionStatusDialog = (props: Props) => {
         <p>{window.i18n('onionPathIndicatorDescription')}</p>
       </div>
 
-      <OnionPath nodes={nodes} />
+      <OnionPath nodes={pathNodes} />
 
       <SessionButton
         text={window.i18n('learnMore')}

ts/session/onions/index.ts

@@ -104,11 +104,15 @@ export class OnionPaths {
     return otherPaths[0].path;
   }
 
-  public hasOnionPath() :boolean {
+  public hasOnionPath(): boolean {
     // returns true if there exists a valid onion path
     return this.onionPaths.length !== 0 && this.onionPaths[0].path.length !== 0;
   }
 
+  public getOnionPathNoRebuild() {
+    return this.onionPaths ? this.onionPaths[0].path : [];
+  }
+
   public markPathAsBad(path: Array<Snode>) {
     // TODO: we might want to remove the nodes from the
     // node pool (but we don't know which node on the path

ts/session/onions/onionSend.ts

@@ -124,12 +124,24 @@ export const getOnionPathForSending = async (requestNumber: number) => {
 export const getOnionPathStatus = () => {
   let hasOnionPath: boolean = false;
   try {
-    hasOnionPath =  OnionPaths.getInstance().hasOnionPath();
+    hasOnionPath = OnionPaths.getInstance().hasOnionPath();
   } catch (e) {
     window.log.error(`getOnionPathStatus Error ${e.code} ${e.message}`);
   }
   return hasOnionPath;
-}
+};
+
+export const getPathNodesIPAddresses = () => {
+  let pathNodes: Array<Snode> = [];
+  let displayNode: Array<string> = []
+  try {
+    pathNodes = OnionPaths.getInstance().getOnionPathNoRebuild();
+    displayNode = pathNodes.map(node => node.ip);
+  } catch (e) {
+    window.log.error(`getPathNodesIPAddresses Error ${e.code} ${e.message}`);
+  }
+  return displayNode;
+};
 
 const initOptionsWithDefaults = (options: OnionFetchBasicOptions) => {
   const defaultFetchBasicOptions = {