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 openFAQPage = () => {
+  const [onionPathAddresses, setOnionPathAddresses] = useState<string[]>([])
-    console.log("Opening FAQ Page")
+  const [pathNodes, setPathNodes] = useState<IPathNode[]>([])
-    shell.openExternal('https://getsession.org/faq/#onion-routing');
+
+  const getOnionPathAddresses = () => {
+    const onionPathAddresses = getPathNodesIPAddresses();
+    console.log("Current Onion Path - ", onionPathAddresses);
+    setOnionPathAddresses(onionPathAddresses)
   }
 
-  const nodes: IPathNode[] = [
+  const buildOnionPath = () => {
+    // Default path values
+    let path = [
       {
         label: 'You'
       },
       {
-      ip: '100',
+        ip: 'Connecting...',
         label: 'Entry Node'
       },
       {
-      ip: '100',
+        ip: 'Connecting...',
         label: 'Service Node'
       },
       {
-      ip: '100',
+        ip: 'Connecting...',
         label: 'Service Node'
       },
       {
-      ip: '100',
         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');
+  }
+  
   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

@@ -109,6 +109,10 @@ export class OnionPaths {
     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

@@ -129,7 +129,19 @@ export const getOnionPathStatus = () => {
     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 = {