From 7c5382dfff8eb785c1d2c9d3b74675791d30a906 Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Wed, 28 Jul 2021 12:45:41 +1000
Subject: [PATCH] Send message

---
 examples/min-js-web-chat/src/App.js   | 20 ++++++++++++-
 guides/relay-receive-send-messages.md | 43 +++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/examples/min-js-web-chat/src/App.js b/examples/min-js-web-chat/src/App.js
index ac40e87550..b1f652552d 100644
--- a/examples/min-js-web-chat/src/App.js
+++ b/examples/min-js-web-chat/src/App.js
@@ -1,7 +1,9 @@
 import './App.css';
-import { getStatusFleetNodes, Waku } from 'js-waku';
+import { getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
 import * as React from 'react';
 
+const ContentTopic = `/relay-guide/1/chat/proto`;
+
 function App() {
   const [waku, setWaku] = React.useState(undefined);
   const [wakuStatus, setWakuStatus] = React.useState('NotStarted');
@@ -21,10 +23,21 @@ function App() {
     });
   }, [waku, wakuStatus]);
 
+  const sendMessageOnClick = () => {
+    if (wakuStatus !== 'Ready') return;
+
+    sendMessage('Here is a message', waku).then(() =>
+      console.log('Message sent')
+    );
+  };
+
   return (
     <div className="App">
       <header className="App-header">
         <p>{wakuStatus}</p>
+        <button onClick={sendMessageOnClick} disabled={wakuStatus !== 'Ready'}>
+          Send Message
+        </button>
       </header>
     </div>
   );
@@ -36,3 +49,8 @@ async function bootstrapWaku(waku) {
   const nodes = await getStatusFleetNodes();
   await Promise.all(nodes.map((addr) => waku.dial(addr)));
 }
+
+async function sendMessage(message, waku) {
+  const wakuMessage = await WakuMessage.fromUtf8String(message, ContentTopic);
+  await waku.relay.send(wakuMessage);
+}
diff --git a/guides/relay-receive-send-messages.md b/guides/relay-receive-send-messages.md
index 5a1668d46e..96cbfdc55f 100644
--- a/guides/relay-receive-send-messages.md
+++ b/guides/relay-receive-send-messages.md
@@ -39,3 +39,46 @@ import { getStatusFleetNodes } from 'js-waku';
 const nodes = await getStatusFleetNodes();
 await Promise.all(nodes.map((addr) => waku.dial(addr))); 
 ```
+
+# Send messages
+
+We are now ready to send message.
+Let's start by sending simple strings as messages.
+
+To send a message, we need to wrap the message in a `WakuMessage`.
+When using a basic string payload, we can just use the `WakuMessage.fromUtf8String` helper:
+
+```js
+import { WakuMessage } from 'js-waku';
+
+const wakuMessage = await WakuMessage.fromUtf8String(message, `/relay-guide/1/chat/proto`);
+```
+
+Then, we use the `relay` module to send the message to our peers,
+the message will then be relayed to the rest of the network thanks to Waku Relay:
+
+```js
+import { WakuMessage } from 'js-waku';
+
+const wakuMessage = await WakuMessage.fromUtf8String(message, `/relay-guide/1/chat/proto`);
+
+await waku.relay.send(wakuMessage)
+```
+
+So far, we have:
+
+```js
+import { getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
+
+const wakuNode = await Waku.create();
+
+import { getStatusFleetNodes } from 'js-waku';
+
+const nodes = await getStatusFleetNodes();
+await Promise.all(nodes.map((addr) => waku.dial(addr)));
+
+const wakuMessage = await WakuMessage.fromUtf8String(message, `/relay-guide/1/chat/proto`);
+
+await waku.relay.send(wakuMessage)
+```
+