Show tunnel IP address in Connect screen

1 files changed, 17 insertions, 4 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Connect.js b/gui/packages/desktop/src/renderer/components/Connect.js
index c642008a1b..e282e52a75 100644
--- a/gui/packages/desktop/src/renderer/components/Connect.js
+++ b/gui/packages/desktop/src/renderer/components/Connect.js
@@ -136,6 +136,19 @@ export default class Connect extends Component<Props> {
   }
 
   renderMap() {
+    const tunnelState = this.props.connection.status.state;
+    const details = this.props.connection.status.details;
+
+    let relayIp = null;
+    let relayPort = null;
+    let relayProtocol = null;
+
+    if ((tunnelState === 'connecting' || tunnelState === 'connected') && details) {
+      relayIp = details.address;
+      relayPort = details.tunnel.openvpn.port;
+      relayProtocol = details.tunnel.openvpn.protocol;
+    }
+
     return (
       <View style={styles.connect}>
         <View style={styles.map}>
@@ -143,7 +156,7 @@ export default class Connect extends Component<Props> {
         </View>
         <View style={styles.container}>
           {/* show spinner when connecting */}
-          {this.props.connection.status.state === 'connecting' ? (
+          {tunnelState === 'connecting' ? (
             <View style={styles.status_icon}>
               <Img source="icon-spinner" height={60} width={60} alt="" />
             </View>
@@ -155,9 +168,9 @@ export default class Connect extends Component<Props> {
             city={this.props.connection.city}
             country={this.props.connection.country}
             hostname={this.props.connection.hostname}
-            relayIp={null}
-            relayPort={null}
-            relayProtocol={null}
+            relayIp={relayIp}
+            relayPort={relayPort}
+            relayProtocol={relayProtocol}
             outIpv4={null}
             outIpv6={null}
             onConnect={this.props.onConnect}