Show correct in IP when using multihop

2 files changed, 37 insertions, 2 deletions

diff --git a/gui/src/renderer/components/ConnectionPanel.tsx b/gui/src/renderer/components/ConnectionPanel.tsx
index d0b0098d50..53b17153eb 100644
--- a/gui/src/renderer/components/ConnectionPanel.tsx
+++ b/gui/src/renderer/components/ConnectionPanel.tsx
@@ -36,6 +36,7 @@ interface IProps {
   hostname?: string;
   bridgeHostname?: string;
   inAddress?: IInAddress;
+  entryLocationInAddress?: IInAddress;
   bridgeInfo?: IBridgeData;
   outAddress?: IOutAddress;
   onToggle: () => void;
@@ -72,8 +73,8 @@ const Header = styled.div({
 
 export default class ConnectionPanel extends React.Component<IProps> {
   public render() {
-    const { inAddress, outAddress, bridgeInfo } = this.props;
-    const entryPoint = bridgeInfo && inAddress ? bridgeInfo : inAddress;
+    const { outAddress } = this.props;
+    const entryPoint = this.getEntryPoint();
 
     return (
       <div className={this.props.className}>
@@ -117,6 +118,18 @@ export default class ConnectionPanel extends React.Component<IProps> {
     );
   }
 
+  private getEntryPoint() {
+    const { inAddress, entryLocationInAddress, bridgeInfo } = this.props;
+
+    if (entryLocationInAddress && inAddress) {
+      return entryLocationInAddress;
+    } else if (bridgeInfo && inAddress) {
+      return bridgeInfo;
+    } else {
+      return inAddress;
+    }
+  }
+
   private hostnameLine() {
     if (this.props.hostname && this.props.bridgeHostname) {
       return sprintf(
diff --git a/gui/src/renderer/containers/ConnectionPanelContainer.tsx b/gui/src/renderer/containers/ConnectionPanelContainer.tsx
index b3b67e9438..290e761727 100644
--- a/gui/src/renderer/containers/ConnectionPanelContainer.tsx
+++ b/gui/src/renderer/containers/ConnectionPanelContainer.tsx
@@ -19,6 +19,22 @@ function tunnelEndpointToRelayInAddress(tunnelEndpoint: ITunnelEndpoint): IInAdd
   };
 }
 
+function tunnelEndpointToEntryLocationInAddress(
+  tunnelEndpoint: ITunnelEndpoint,
+): IInAddress | undefined {
+  if (!tunnelEndpoint.entryEndpoint) {
+    return undefined;
+  }
+
+  const socketAddr = parseSocketAddress(tunnelEndpoint.entryEndpoint.address);
+  return {
+    ip: socketAddr.host,
+    port: socketAddr.port,
+    protocol: tunnelEndpoint.entryEndpoint.transportProtocol,
+    tunnelType: tunnelEndpoint.tunnelType,
+  };
+}
+
 function tunnelEndpointToBridgeData(endpoint: ITunnelEndpoint): IBridgeData | undefined {
   if (!endpoint.proxy) {
     return undefined;
@@ -46,6 +62,11 @@ const mapStateToProps = (state: IReduxState) => {
       ? tunnelEndpointToRelayInAddress(status.details.endpoint)
       : undefined;
 
+  const entryLocationInAddress: IInAddress | undefined =
+    (status.state === 'connecting' || status.state === 'connected') && status.details
+      ? tunnelEndpointToEntryLocationInAddress(status.details.endpoint)
+      : undefined;
+
   const bridgeInfo: IBridgeData | undefined =
     (status.state === 'connecting' || status.state === 'connected') && status.details
       ? tunnelEndpointToBridgeData(status.details.endpoint)
@@ -56,6 +77,7 @@ const mapStateToProps = (state: IReduxState) => {
     hostname: state.connection.hostname,
     bridgeHostname: state.connection.bridgeHostname,
     inAddress,
+    entryLocationInAddress,
     bridgeInfo,
     outAddress,
   };