From 5c790a41c998856d7f7bff9796985f77adf13d1d Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Thu, 15 Jul 2021 14:37:30 +1000
Subject: [PATCH] Add network info in toolbar

---
 examples/web-chat/src/App.tsx  |  1 +
 examples/web-chat/src/Room.tsx | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/examples/web-chat/src/App.tsx b/examples/web-chat/src/App.tsx
index 145fbbb679..70538fcb90 100644
--- a/examples/web-chat/src/App.tsx
+++ b/examples/web-chat/src/App.tsx
@@ -160,6 +160,7 @@ export default function App() {
             nick={nick}
             newMessages={newMessages}
             archivedMessages={archivedMessages}
+            fleetEnv={fleetEnv}
             commandHandler={(input: string) => {
               const { command, response } = handleCommand(
                 input,
diff --git a/examples/web-chat/src/Room.tsx b/examples/web-chat/src/Room.tsx
index e36981eaac..790c7171bb 100644
--- a/examples/web-chat/src/Room.tsx
+++ b/examples/web-chat/src/Room.tsx
@@ -1,4 +1,4 @@
-import { ChatMessage, WakuMessage } from 'js-waku';
+import { ChatMessage, Environment, WakuMessage } from 'js-waku';
 import { ChatContentTopic } from './App';
 import ChatList from './ChatList';
 import MessageInput from './MessageInput';
@@ -11,17 +11,28 @@ interface Props {
   archivedMessages: Message[];
   commandHandler: (cmd: string) => void;
   nick: string;
+  fleetEnv: Environment;
 }
 
 export default function Room(props: Props) {
   const { waku } = useWaku();
 
+  let relayPeers = 0;
+  let storePeers = 0;
+  if (waku) {
+    relayPeers = waku.relay.getPeers().size;
+    storePeers = waku.store.peers.length;
+  }
+
   return (
     <div
       className="chat-container"
       style={{ height: '98vh', display: 'flex', flexDirection: 'column' }}
     >
-      <TitleBar title="Waku v2 chat app" />
+      <TitleBar
+        leftIcons={`Peers: ${relayPeers} relay, ${storePeers} store. Fleet: ${props.fleetEnv}`}
+        title="Waku v2 chat app"
+      />
       <ChatList
         newMessages={props.newMessages}
         archivedMessages={props.archivedMessages}