acid-info/docs.wakuconnect.dev
1
0
Fork 0
mirror of https://github.com/acid-info/docs.wakuconnect.dev.git synced 2025-02-21 14:18:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update documentation

Browse Source
This commit is contained in:
2022-01-27 00:19:14 +00:00
parent b6880d0741
commit 74de2b8d3c
60 changed files with 1084 additions and 1011 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
404.html
View File

@ -16,7 +16,7 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book

4
categories/index.html
View File

@ -17,7 +17,7 @@
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/categories/" title="Categories">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/categories/index.xml" title="Waku Connect Docs" />
<!--
Made with Book Theme
@ -438,7 +438,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

10
docs/crypto_libraries/index.html
View File

@ -14,14 +14,14 @@ Symmetric encryption # Uses SubtleCrypto Web API (browser) or NodeJS&#39; crypt
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/crypto_libraries/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-12T14:41:29+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Cryptographic Libraries | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -437,7 +437,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -549,9 +549,9 @@ or <a href="https://nodejs.org/api/crypto.html">NodeJS' crypto</a> module.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/d41a5cee6b827340d4ac5d6ce75b150dad8ef457" title='Last modified by Franck R | Jan 12, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 12, 2022</span>
<span>Jan 24, 2022</span>
</a>
</div>

10
docs/examples/index.html
View File

@ -20,14 +20,14 @@ Demonstrates:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/examples/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-12T14:41:29+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Examples | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -443,7 +443,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -637,9 +637,9 @@ To run or studies the example, click on the <em>repo</em> links.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/d41a5cee6b827340d4ac5d6ce75b150dad8ef457" title='Last modified by Franck R | Jan 12, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 12, 2022</span>
<span>Jan 24, 2022</span>
</a>
</div>

10
docs/guides/01_choose_content_topic/index.html
View File

@ -18,14 +18,14 @@ The format for content topics is as follows:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-03T11:11:07+11:00" />
<meta property="article:modified_time" content="2022-01-27T11:18:41+11:00" />
<title>How to Choose a Content Topic | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -441,7 +441,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -554,9 +554,9 @@ You may want to use the following content topics:</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/a606280a45e3bb50d98886feee895c527465bb83" title='Last modified by F | Jan 3, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 3, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>

41
docs/guides/02_relay_receive_send_messages/index.html
View File

@ -14,14 +14,14 @@ For this guide, we are using a single content topic: /relay-guide/1/chat/proto."
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-24T11:54:31+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Receive and Send Messages Using Waku Relay | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -437,7 +437,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -550,18 +550,18 @@ Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a co
<a class="anchor" href="#create-waku-instance">#</a>
</h1>
<p>In order to interact with the Waku network, you first need a Waku instance:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Waku</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> } });
</code></pre></div><p>Passing the <code>bootstrap</code> option will connect your node to predefined Waku nodes.
If you want to bootstrap to your own nodes, you can pass an array of multiaddresses instead:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#39;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#39;</span>,
<span style="color:#e6db74">&#39;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#39;</span>
]
<span style="color:#e6db74">&#34;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#34;</span>,
<span style="color:#e6db74">&#34;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#34;</span>,
],
});
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
@ -582,7 +582,7 @@ you need to register an observer on relay for your app&rsquo;s content topic:</p
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Message Received: </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">payloadAsUtf8</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>);
};
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(<span style="color:#a6e22e">processIncomingMessage</span>, [<span style="color:#e6db74">&#39;/relay-guide/1/chat/proto&#39;</span>]);
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(<span style="color:#a6e22e">processIncomingMessage</span>, [<span style="color:#e6db74">&#34;/relay-guide/1/chat/proto&#34;</span>]);
</code></pre></div><h1 id="send-messages">
Send Messages
<a class="anchor" href="#send-messages">#</a>
@ -591,9 +591,12 @@ you need to register an observer on relay for your app&rsquo;s content topic:</p
Let&rsquo;s start by sending simple strings as messages.</p>
<p>To send a message, you need to wrap the message in a <code>WakuMessage</code>.
When using a basic string payload, you can use the <code>WakuMessage.fromUtf8String</code> helper:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(<span style="color:#e6db74">&#39;Here is a message&#39;</span>, <span style="color:#e6db74">`/relay-guide/1/chat/proto`</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(
<span style="color:#e6db74">&#34;Here is a message&#34;</span>,
<span style="color:#e6db74">`/relay-guide/1/chat/proto`</span>
);
</code></pre></div><p>Then, use the <code>relay</code> module to send the message to our peers,
the message will then be relayed to the rest of the network thanks to Waku Relay:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">wakuMessage</span>);
@ -622,7 +625,7 @@ For this guide, we will use a simple chat message that contains a timestamp and
<a class="anchor" href="#protobuf-definition">#</a>
</h2>
<p>Then define the simple chat message:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;protons&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
</span><span style="color:#e6db74">message SimpleChatMessage {
@ -641,7 +644,7 @@ you are going to wrap a protobuf payload.</p>
<p>First, encode the object:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">payload</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">proto</span>.<span style="color:#a6e22e">SimpleChatMessage</span>.<span style="color:#a6e22e">encode</span>({
<span style="color:#a6e22e">timestamp</span><span style="color:#f92672">:</span> Date.<span style="color:#a6e22e">now</span>(),
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Here is a message&#39;</span>
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;Here is a message&#34;</span>,
});
</code></pre></div><p>Then, wrap it in a Waku Message:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">ContentTopic</span>);
@ -664,15 +667,15 @@ you need to extract the protobuf payload and decode it using <code>protons</code
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Message Received: </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">text</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, sent at </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">timestamp</span>.<span style="color:#a6e22e">toString</span>()<span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>);
};
</code></pre></div><p>Like before, add this callback as an observer to Waku Relay:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(<span style="color:#a6e22e">processIncomingMessage</span>, [<span style="color:#e6db74">&#39;/relay-guide/1/chat/proto&#39;</span>]);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(<span style="color:#a6e22e">processIncomingMessage</span>, [<span style="color:#e6db74">&#34;/relay-guide/1/chat/proto&#34;</span>]);
</code></pre></div><h1 id="conclusion">
Conclusion
<a class="anchor" href="#conclusion">#</a>
</h1>
<p>That is it! Now, you know how to send and receive messages over Waku using the Waku Relay protocol.</p>
<p>Here is the final code:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">getBootstrapNodes</span>, <span style="color:#a6e22e">Waku</span>, <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">getBootstrapNodes</span>, <span style="color:#a6e22e">Waku</span>, <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;protons&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
</span><span style="color:#e6db74">message SimpleChatMessage {
@ -697,11 +700,11 @@ you need to extract the protobuf payload and decode it using <code>protons</code
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Message Received: </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">text</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, sent at </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">timestamp</span>.<span style="color:#a6e22e">toString</span>()<span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>);
};
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(<span style="color:#a6e22e">processIncomingMessage</span>, [<span style="color:#e6db74">&#39;/relay-guide/1/chat/proto&#39;</span>]);
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(<span style="color:#a6e22e">processIncomingMessage</span>, [<span style="color:#e6db74">&#34;/relay-guide/1/chat/proto&#34;</span>]);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">payload</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">proto</span>.<span style="color:#a6e22e">SimpleChatMessage</span>.<span style="color:#a6e22e">encode</span>({
<span style="color:#a6e22e">timestamp</span><span style="color:#f92672">:</span> Date.<span style="color:#a6e22e">now</span>(),
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Here is a message&#39;</span>
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;Here is a message&#34;</span>,
});
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">ContentTopic</span>);
<span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">wakuMessage</span>);
@ -714,7 +717,7 @@ you need to extract the protobuf payload and decode it using <code>protons</code
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/23ba3e482981514df0e2954405c2ea33c751c4d3" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 24, 2022</span>
</a>

32
docs/guides/03_store_retrieve_messages/index.html
View File

@ -12,14 +12,14 @@ Waku Relay is a gossip protocol. As a user, it means that your peers forward you
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-24T11:54:31+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Retrieve Messages Using Waku Store | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -435,7 +435,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -558,18 +558,18 @@ Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a co
<a class="anchor" href="#create-waku-instance">#</a>
</h1>
<p>In order to interact with the Waku network, you first need a Waku instance:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Waku</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> } });
</code></pre></div><p>Passing the <code>bootstrap</code> option will connect your node to predefined Waku nodes.
If you want to bootstrap to your own nodes, you can pass an array of multiaddresses instead:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#39;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#39;</span>,
<span style="color:#e6db74">&#39;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#39;</span>
]
<span style="color:#e6db74">&#34;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#34;</span>,
<span style="color:#e6db74">&#34;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#34;</span>,
],
});
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
@ -605,7 +605,7 @@ For this guide, we will use a simple news article that contains a date of public
<a class="anchor" href="#protobuf-definition">#</a>
</h2>
<p>Then specify the data structure:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;protons&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
</span><span style="color:#e6db74">message ArticleMessage {
@ -646,7 +646,7 @@ you need to extract the protobuf payload and decode it using <code>protons</code
<p>Store node responses are paginated.
The <code>WakuStore.queryHistory</code> API automatically query all the pages in a sequential manner.
To process messages as soon as they received (page by page), use the <code>callback</code> option:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ContentTopic</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;/store-guide/1/news/proto&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ContentTopic</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;/store-guide/1/news/proto&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">callback</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">retrievedMessages</span>) =&gt; {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">articles</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">retrievedMessages</span>
@ -656,11 +656,9 @@ To process messages as soon as they received (page by page), use the <code>callb
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">articles</span>.<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> articles have been retrieved`</span>);
};
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>
.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">ContentTopic</span>], { <span style="color:#a6e22e">callback</span> })
.<span style="color:#66d9ef">catch</span>((<span style="color:#a6e22e">e</span>) =&gt; {
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">ContentTopic</span>], { <span style="color:#a6e22e">callback</span> }).<span style="color:#66d9ef">catch</span>((<span style="color:#a6e22e">e</span>) =&gt; {
<span style="color:#75715e">// Catch any potential error
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;Failed to retrieve messages from store&#39;</span>, <span style="color:#a6e22e">e</span>);
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Failed to retrieve messages from store&#34;</span>, <span style="color:#a6e22e">e</span>);
});
</code></pre></div><p>Note that <code>WakuStore.queryHistory</code> select an available store node for you.
However, it can only select a connected node, which is why the bootstrapping is necessary.
@ -685,10 +683,10 @@ By default, js-waku sets the timestamp of outgoing message to the current time.<
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>
.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">ContentTopic</span>], {
<span style="color:#a6e22e">callback</span>,
<span style="color:#a6e22e">timeFilter</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">startTime</span>, <span style="color:#a6e22e">endTime</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">new</span> Date() }
<span style="color:#a6e22e">timeFilter</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">startTime</span>, <span style="color:#a6e22e">endTime</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">new</span> Date() },
})
.<span style="color:#66d9ef">catch</span>((<span style="color:#a6e22e">e</span>) =&gt; {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;Failed to retrieve messages from store&#39;</span>, <span style="color:#a6e22e">e</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Failed to retrieve messages from store&#34;</span>, <span style="color:#a6e22e">e</span>);
});
</code></pre></div><h2 id="end-result">
End result
@ -704,7 +702,7 @@ By default, js-waku sets the timestamp of outgoing message to the current time.<
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/23ba3e482981514df0e2954405c2ea33c751c4d3" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 24, 2022</span>
</a>

39
docs/guides/04_encrypt_messages_version_1/index.html
View File

@ -14,14 +14,14 @@ See Cryptographic Libraries for more details on the cryptographic libraries used
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2021-12-09T15:27:58+01:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Encrypt Messages Using Waku Message Version 1 | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -437,7 +437,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -601,7 +601,7 @@ When Alice sends an encrypted message for Bob, only Bob can decrypt it.</p>
</h3>
<p>To use symmetric encryption, you first need to generate a key.
Use <code>generateSymmetricKey</code> for secure key generation:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generateSymmetricKey</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generateSymmetricKey</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">symmetricKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">generateSymmetricKey</span>();
</code></pre></div><h3 id="encrypt-message">
@ -613,10 +613,10 @@ pass the key in the <code>symKey</code> property to <code>WakuMessage.fromBytes<
<p>Same as Waku Messages version 0 (unencrypted),
<code>payload</code> is your message payload and <code>contentTopic</code> is the content topic for your dApp.
See <a href="/docs/guides/02_relay_receive_send_messages/">Receive and Send Messages Using Waku Relay</a> for details.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">contentTopic</span>, {
<span style="color:#a6e22e">symKey</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">symmetricKey</span>
<span style="color:#a6e22e">symKey</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">symmetricKey</span>,
});
</code></pre></div><p>The Waku Message can then be sent to the Waku network using Waku Relay or Waku Light Push:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">lightPush</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">message</span>);
@ -629,7 +629,7 @@ whether they are received over Waku Relay or using Waku Store,
add the symmetric key as a decryption key to your Waku instance.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">addDecryptionKey</span>(<span style="color:#a6e22e">symmetricKey</span>);
</code></pre></div><p>Alternatively, you can pass the key when creating the instance:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">decryptionKeys</span><span style="color:#f92672">:</span> [<span style="color:#a6e22e">symmetricKey</span>] });
</code></pre></div><p>It will attempt to decrypt any message it receives using the key, for both symmetric and asymmetric encryption.</p>
@ -646,7 +646,7 @@ symmetric key and asymmetric private keys can be used together.</p>
</h3>
<p>To use asymmetric encryption, you first need to generate a private key and calculate the corresponding public key.
Use <code>generatePrivateKey</code> for secure key generation:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generatePrivateKey</span>, <span style="color:#a6e22e">getPublicKey</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generatePrivateKey</span>, <span style="color:#a6e22e">getPublicKey</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">privateKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">generatePrivateKey</span>();
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">publicKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getPublicKey</span>(<span style="color:#a6e22e">privateKey</span>);
@ -663,10 +663,10 @@ to do so, pass it in the <code>encPublicKey</code> property to <code>WakuMessage
<p>Same as clear Waku Messages,
<code>payload</code> is your message payload and <code>contentTopic</code> is the content topic for your dApp.
See <a href="/docs/guides/02_relay_receive_send_messages/">Receive and Send Messages Using Waku Relay</a> for details.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">contentTopic</span>, {
<span style="color:#a6e22e">encPublicKey</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">publicKey</span>
<span style="color:#a6e22e">encPublicKey</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">publicKey</span>,
});
</code></pre></div><p>The Waku Message can then be sent to the Waku network using Waku Relay or Waku Light Push:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">lightPush</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">message</span>);
@ -680,7 +680,7 @@ whether they are received over Waku Relay or using Waku Store,
add the private key as a decryption key to your Waku instance.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">addDecryptionKey</span>(<span style="color:#a6e22e">privateKey</span>);
</code></pre></div><p>Alternatively, you can pass the key when creating the instance:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">decryptionKeys</span><span style="color:#f92672">:</span> [<span style="color:#a6e22e">privateKey</span>] });
</code></pre></div><p>It will attempt to decrypt any message it receives using the key, for both symmetric and asymmetric encryption.</p>
@ -694,10 +694,10 @@ symmetric key and asymmetric private keys can be used together.</p>
<p>When creating a Waku Message using <code>WakuMessage.fromBytes</code> with an encryption key (symmetric or asymmetric),
the payload gets encrypted.
Which means that <code>wakuMessage.payload</code> returns an encrypted payload:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">contentTopic</span>, {
<span style="color:#a6e22e">encPublicKey</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">publicKey</span>
<span style="color:#a6e22e">encPublicKey</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">publicKey</span>,
});
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">message</span>.<span style="color:#a6e22e">payload</span>); <span style="color:#75715e">// This is encrypted
@ -705,7 +705,7 @@ Which means that <code>wakuMessage.payload</code> returns an encrypted payload:<
<p><code>WakuRelay</code> and <code>WakuStore</code> never return messages that are encrypted.
If a message was not successfully decrypted, then it will be dropped from the results.</p>
<p>Which means that <code>WakuMessage</code> instances returned by <code>WakuRelay</code> and <code>WakuStore</code> always have a clear payload (in regard to Waku Message version 1):</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">decryptionKeys</span><span style="color:#f92672">:</span> [<span style="color:#a6e22e">privateKey</span>] });
@ -715,9 +715,12 @@ If a message was not successfully decrypted, then it will be dropped from the re
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">messages</span>[<span style="color:#ae81ff">0</span>].<span style="color:#a6e22e">payload</span>); <span style="color:#75715e">// This payload is decrypted
</span><span style="color:#75715e"></span>}
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>((<span style="color:#a6e22e">message</span>) =&gt; {
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(
(<span style="color:#a6e22e">message</span>) =&gt; {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">message</span>.<span style="color:#a6e22e">payload</span>); <span style="color:#75715e">// This payload is decrypted
</span><span style="color:#75715e"></span>}, [<span style="color:#a6e22e">contentTopic</span>]);
</span><span style="color:#75715e"></span> },
[<span style="color:#a6e22e">contentTopic</span>]
);
</code></pre></div><h2 id="code-example">
Code Example
<a class="anchor" href="#code-example">#</a>
@ -738,9 +741,9 @@ While this does not add functional value, it does demonstrate the usage of symme
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/89334e6efdcfefe0894f99f92b4b6352003f3aa3" title='Last modified by Jakub Sokołowski | Dec 9, 2021' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Dec 9, 2021</span>
<span>Jan 24, 2022</span>
</a>
</div>

30
docs/guides/05_sign_messages_version_1/index.html
View File

@ -18,14 +18,14 @@ Create new keypair # Generate a new keypair to sign your messages:" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2021-12-09T15:27:58+01:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Sign Messages Using Waku Message Version 1 | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -441,7 +441,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -545,7 +545,7 @@ see <a href="/docs/guides/04_encrypt_messages_version_1/">Encrypt Messages Using
<a class="anchor" href="#create-new-keypair">#</a>
</h2>
<p>Generate a new keypair to sign your messages:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generatePrivateKey</span>, <span style="color:#a6e22e">getPublicKey</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generatePrivateKey</span>, <span style="color:#a6e22e">getPublicKey</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">privateKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">generatePrivateKey</span>();
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">publicKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getPublicKey</span>(<span style="color:#a6e22e">privateKey</span>);
@ -561,20 +561,18 @@ In the case where your app does not need encryption then you could use symmetric
<a class="anchor" href="#using-symmetric-encryption">#</a>
</h3>
<p>Given <code>symKey</code> the symmetric key used for encryption:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">myAppContentTopic</span>, {
<span style="color:#a6e22e">encPublicKey</span>: <span style="color:#66d9ef">symKey</span>,
<span style="color:#a6e22e">sigPrivKey</span>: <span style="color:#66d9ef">privateKey</span>
<span style="color:#a6e22e">sigPrivKey</span>: <span style="color:#66d9ef">privateKey</span>,
});
</code></pre></div><p>If encryption is not needed for your use case,
then you can create a symmetric key from the content topic:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">hexToBuf</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku/lib/utils&#39;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">keccak256</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;ethers/lib/utils&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">hexToBuf</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;js-waku/lib/utils&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">keccak256</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;ethers/lib/utils&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">symKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">hexToBuf</span>(
<span style="color:#a6e22e">keccak256</span>(<span style="color:#a6e22e">Buffer</span>.<span style="color:#66d9ef">from</span>(<span style="color:#a6e22e">myAppContentTopic</span>, <span style="color:#e6db74">&#39;utf-8&#39;</span>))
);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">symKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">hexToBuf</span>(<span style="color:#a6e22e">keccak256</span>(<span style="color:#a6e22e">Buffer</span>.<span style="color:#66d9ef">from</span>(<span style="color:#a6e22e">myAppContentTopic</span>, <span style="color:#e6db74">&#34;utf-8&#34;</span>)));
</code></pre></div><p><code>symKey</code> can then be used to encrypt and decrypt messages on <code>myAppContentTopic</code> content topic.
Read <a href="/docs/guides/01_choose_content_topic/">How to Choose a Content Topic</a> to learn more about content topics.</p>
<h3 id="using-asymmetric-encryption">
@ -582,11 +580,11 @@ Read <a href="/docs/guides/01_choose_content_topic/">How to Choose a Content Top
<a class="anchor" href="#using-asymmetric-encryption">#</a>
</h3>
<p>Given <code>recipientPublicKey</code> the public key of the message&rsquo;s recipient:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">myAppContentTopic</span>, {
<span style="color:#a6e22e">encPublicKey</span>: <span style="color:#66d9ef">recipientPublicKey</span>,
<span style="color:#a6e22e">sigPrivKey</span>: <span style="color:#66d9ef">privateKey</span>
<span style="color:#a6e22e">sigPrivKey</span>: <span style="color:#66d9ef">privateKey</span>,
});
</code></pre></div><h2 id="verify-waku-message-signatures">
Verify Waku Message signatures
@ -601,7 +599,7 @@ Read <a href="/docs/guides/01_choose_content_topic/">How to Choose a Content Top
you can simply compare <code>WakuMessage.signaturePublicKey</code> with Alice&rsquo;s public key.
As comparing hex string can lead to issues (is the <code>0x</code> prefix present?),
simply use helper function <code>equalByteArrays</code>.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">equalByteArrays</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku/lib/utils&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">equalByteArrays</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;js-waku/lib/utils&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">sigPubKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">signaturePublicKey</span>;
@ -619,9 +617,9 @@ simply use helper function <code>equalByteArrays</code>.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/89334e6efdcfefe0894f99f92b4b6352003f3aa3" title='Last modified by Jakub Sokołowski | Dec 9, 2021' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Dec 9, 2021</span>
<span>Jan 24, 2022</span>
</a>
</div>

25
docs/guides/06_light_push_send_messages/index.html
View File

@ -12,14 +12,14 @@ The Waku Relay protocol sends messages to connected peers but does not provide a
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-24T11:54:31+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Send Messages Using Waku Light Push | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -435,7 +435,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -551,18 +551,18 @@ Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a co
<a class="anchor" href="#create-waku-instance">#</a>
</h1>
<p>In order to interact with the Waku network, you first need a Waku instance:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Waku</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> } });
</code></pre></div><p>Passing the <code>bootstrap</code> option will connect your node to predefined Waku nodes.
If you want to bootstrap to your own nodes, you can pass an array of multiaddresses instead:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#39;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#39;</span>,
<span style="color:#e6db74">&#39;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#39;</span>
]
<span style="color:#e6db74">&#34;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#34;</span>,
<span style="color:#e6db74">&#34;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#34;</span>,
],
});
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
@ -581,9 +581,12 @@ use the following function:</p>
By default, it sends the messages to a single randomly selected light push peer.
The peer is selected among the dApp&rsquo;s connected peers.</p>
<p>If the dApp is not connected to any light push peer, an error is thrown.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">WakuMessage</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(<span style="color:#e6db74">&#39;Here is a message&#39;</span>, <span style="color:#e6db74">`/light-push-guide/1/guide/proto`</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(
<span style="color:#e6db74">&#34;Here is a message&#34;</span>,
<span style="color:#e6db74">`/light-push-guide/1/guide/proto`</span>
);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ack</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">lightPush</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">wakuMessage</span>);
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">ack</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">isSuccess</span>) {
@ -598,7 +601,7 @@ The peer is selected among the dApp&rsquo;s connected peers.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/23ba3e482981514df0e2954405c2ea33c751c4d3" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 24, 2022</span>
</a>

76
docs/guides/07_reactjs_relay/index.html
View File

@ -12,14 +12,14 @@ Before starting, you need to choose a Content Topic for your dApp. Check out the
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-24T11:54:31+11:00" />
<meta property="article:modified_time" content="2022-01-27T11:18:41+11:00" />
<title>Receive and Send Messages Using Waku Relay With ReactJS | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -435,7 +435,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -590,7 +590,7 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
<p>Install <code>cra-webpack-rewired</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install -D cra-webpack-rewired
</code></pre></div><p>Create a <code>config/webpack.extend.js</code> file at the root of your app:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;webpack&#39;</span>);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#34;webpack&#34;</span>);
<span style="color:#a6e22e">module</span>.<span style="color:#a6e22e">exports</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">dev</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">config</span>) =&gt; {
@ -598,21 +598,21 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span> <span style="color:#f92672">=</span> {};
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span> <span style="color:#f92672">=</span> {};
Object.<span style="color:#a6e22e">assign</span>(<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>, {
<span style="color:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;buffer&#39;</span>),
<span style="color:#a6e22e">crypto</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;crypto-browserify&#39;</span>),
<span style="color:#a6e22e">stream</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;stream-browserify&#39;</span>),
<span style="color:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;buffer&#34;</span>),
<span style="color:#a6e22e">crypto</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;crypto-browserify&#34;</span>),
<span style="color:#a6e22e">stream</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;stream-browserify&#34;</span>),
});
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span> <span style="color:#f92672">=</span> [];
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>.<span style="color:#a6e22e">push</span>(
<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">webpack</span>.<span style="color:#a6e22e">DefinePlugin</span>({
<span style="color:#e6db74">&#39;process.env.ENV&#39;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">&#39;dev&#39;</span>),
<span style="color:#e6db74">&#34;process.env.ENV&#34;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">&#34;dev&#34;</span>),
})
);
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>.<span style="color:#a6e22e">push</span>(
<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">webpack</span>.<span style="color:#a6e22e">ProvidePlugin</span>({
<span style="color:#a6e22e">process</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;process/browser.js&#39;</span>,
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;buffer&#39;</span>, <span style="color:#e6db74">&#39;Buffer&#39;</span>],
<span style="color:#a6e22e">process</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;process/browser.js&#34;</span>,
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#34;buffer&#34;</span>, <span style="color:#e6db74">&#34;Buffer&#34;</span>],
})
);
@ -626,21 +626,21 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span> <span style="color:#f92672">=</span> {};
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span> <span style="color:#f92672">=</span> {};
Object.<span style="color:#a6e22e">assign</span>(<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>, {
<span style="color:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;buffer&#39;</span>),
<span style="color:#a6e22e">crypto</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;crypto-browserify&#39;</span>),
<span style="color:#a6e22e">stream</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;stream-browserify&#39;</span>),
<span style="color:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;buffer&#34;</span>),
<span style="color:#a6e22e">crypto</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;crypto-browserify&#34;</span>),
<span style="color:#a6e22e">stream</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;stream-browserify&#34;</span>),
});
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span> <span style="color:#f92672">=</span> [];
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>.<span style="color:#a6e22e">push</span>(
<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">webpack</span>.<span style="color:#a6e22e">DefinePlugin</span>({
<span style="color:#e6db74">&#39;process.env.ENV&#39;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">&#39;prod&#39;</span>),
<span style="color:#e6db74">&#34;process.env.ENV&#34;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">&#34;prod&#34;</span>),
})
);
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>.<span style="color:#a6e22e">push</span>(
<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">webpack</span>.<span style="color:#a6e22e">ProvidePlugin</span>({
<span style="color:#a6e22e">process</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;process/browser.js&#39;</span>,
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;buffer&#39;</span>, <span style="color:#e6db74">&#39;Buffer&#39;</span>],
<span style="color:#a6e22e">process</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;process/browser.js&#34;</span>,
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#34;buffer&#34;</span>, <span style="color:#e6db74">&#34;Buffer&#34;</span>],
})
);
@ -671,34 +671,34 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
</h1>
<p>In order to interact with the Waku network, you first need a Waku instance.
Go to <code>App.js</code> and modify the <code>App</code> function:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Waku</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">as</span> <span style="color:#a6e22e">React</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">as</span> <span style="color:#a6e22e">React</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">setWaku</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">undefined</span>);
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">wakuStatus</span>, <span style="color:#a6e22e">setWakuStatus</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#39;None&#39;</span>);
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">wakuStatus</span>, <span style="color:#a6e22e">setWakuStatus</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#34;None&#34;</span>);
<span style="color:#75715e">// Start Waku
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<span style="color:#75715e">// If Waku is already assigned, the job is done
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!!</span><span style="color:#a6e22e">waku</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#75715e">// If Waku status not None, it means we are already starting Waku
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#39;None&#39;</span>) <span style="color:#66d9ef">return</span>;
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;None&#34;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Starting&#39;</span>);
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Starting&#34;</span>);
<span style="color:#75715e">// Create Waku
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> } }).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">waku</span>) =&gt; {
<span style="color:#75715e">// Once done, put it in the state
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setWaku</span>(<span style="color:#a6e22e">waku</span>);
<span style="color:#75715e">// And update the status
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Started&#39;</span>);
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Started&#34;</span>);
});
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App&#39;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App-header&#39;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App&#34;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App-header&#34;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">p</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">Waku</span> <span style="color:#a6e22e">node</span><span style="color:#960050;background-color:#1e0010">&#39;</span><span style="color:#a6e22e">s</span> <span style="color:#a6e22e">status</span><span style="color:#f92672">:</span> {<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/p&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/header&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
@ -715,15 +715,15 @@ To ensure that you have relay peers available to send and receive messages,
use the <code>Waku.waitForConnectedPeer()</code> async function:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!!</span><span style="color:#a6e22e">waku</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#39;None&#39;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;None&#34;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Starting&#39;</span>);
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Starting&#34;</span>);
<span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> } }).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">waku</span>) =&gt; {
<span style="color:#a6e22e">setWaku</span>(<span style="color:#a6e22e">waku</span>);
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Connecting&#39;</span>);
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Connecting&#34;</span>);
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>().<span style="color:#a6e22e">then</span>(() =&gt; {
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Ready&#39;</span>);
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Ready&#34;</span>);
});
});
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
@ -735,7 +735,7 @@ use the <code>Waku.waitForConnectedPeer()</code> async function:</p>
use <a href="https://www.npmjs.com/package/protons">protons</a></p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install protons
</code></pre></div><p>Define <code>SimpleChatMessage</code> with two fields: <code>timestamp</code> and <code>text</code>.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;protons&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
</span><span style="color:#e6db74">message SimpleChatMessage {
@ -748,7 +748,7 @@ use <a href="https://www.npmjs.com/package/protons">protons</a></p>
<a class="anchor" href="#send-messages">#</a>
</h1>
<p>Create a function that takes the Waku instance and a message to send:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ContentTopic</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">`/relay-reactjs-chat/1/chat/proto`</span>;
@ -758,7 +758,7 @@ use <a href="https://www.npmjs.com/package/protons">protons</a></p>
<span style="color:#75715e">// Encode to protobuf
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">payload</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">proto</span>.<span style="color:#a6e22e">SimpleChatMessage</span>.<span style="color:#a6e22e">encode</span>({
<span style="color:#a6e22e">timestamp</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">time</span>,
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">message</span>
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">message</span>,
});
<span style="color:#75715e">// Wrap in a Waku Message
@ -770,7 +770,7 @@ use <a href="https://www.npmjs.com/package/protons">protons</a></p>
</code></pre></div><p>Then, add a button to the <code>App</code> function:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">setWaku</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">undefined</span>);
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">wakuStatus</span>, <span style="color:#a6e22e">setWakuStatus</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#39;None&#39;</span>);
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">wakuStatus</span>, <span style="color:#a6e22e">setWakuStatus</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#34;None&#34;</span>);
<span style="color:#75715e">// Using a counter just for the messages to be different
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">sendCounter</span>, <span style="color:#a6e22e">setSendCounter</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#ae81ff">0</span>);
@ -780,10 +780,10 @@ use <a href="https://www.npmjs.com/package/protons">protons</a></p>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">sendMessageOnClick</span> <span style="color:#f92672">=</span> () =&gt; {
<span style="color:#75715e">// Check Waku is started and connected first.
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#39;Ready&#39;</span>) <span style="color:#66d9ef">return</span>;
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;Ready&#34;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#a6e22e">sendMessage</span>(<span style="color:#e6db74">`Here is message #</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">sendCounter</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>, <span style="color:#a6e22e">waku</span>, <span style="color:#66d9ef">new</span> Date()).<span style="color:#a6e22e">then</span>(() =&gt;
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;Message sent&#39;</span>)
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Message sent&#34;</span>)
);
<span style="color:#75715e">// For demonstration purposes.
@ -794,7 +794,7 @@ use <a href="https://www.npmjs.com/package/protons">protons</a></p>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App&#34;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App-header&#34;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">p</span><span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/p&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">sendMessageOnClick</span>} <span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#39;Ready&#39;</span>}<span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">sendMessageOnClick</span>} <span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;Ready&#34;</span>}<span style="color:#f92672">&gt;</span>
<span style="color:#a6e22e">Send</span> <span style="color:#a6e22e">Message</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/header&gt;</span>
@ -876,7 +876,7 @@ For the sake of completeness, let&rsquo;s display received messages on the page.
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App&#34;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App-header&#34;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">p</span><span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/p&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">sendMessageOnClick</span>} <span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#39;Ready&#39;</span>}<span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">sendMessageOnClick</span>} <span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;Ready&#34;</span>}<span style="color:#f92672">&gt;</span>
<span style="color:#a6e22e">Send</span> <span style="color:#a6e22e">Message</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
@ -906,9 +906,9 @@ Try out by opening the app from different browsers.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/23ba3e482981514df0e2954405c2ea33c751c4d3" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 24, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>

124
docs/guides/08_reactjs_store/index.html
View File

@ -14,14 +14,14 @@ Waku Relay is a gossip protocol. As a user, it means that your peers forward you
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-24T11:54:31+11:00" />
<meta property="article:modified_time" content="2022-01-27T11:18:41+11:00" />
<title>Retrieve Messages Using Waku Store With ReactJS | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -437,7 +437,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -610,7 +610,7 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
<p>Install <code>cra-webpack-rewired</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install -D cra-webpack-rewired
</code></pre></div><p>Create a <code>config/webpack.extend.js</code> file at the root of your app:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;webpack&#39;</span>);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#34;webpack&#34;</span>);
<span style="color:#a6e22e">module</span>.<span style="color:#a6e22e">exports</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">dev</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">config</span>) =&gt; {
@ -618,21 +618,21 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span> <span style="color:#f92672">=</span> {};
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span> <span style="color:#f92672">=</span> {};
Object.<span style="color:#a6e22e">assign</span>(<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>, {
<span style="color:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;buffer&#39;</span>),
<span style="color:#a6e22e">crypto</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;crypto-browserify&#39;</span>),
<span style="color:#a6e22e">stream</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;stream-browserify&#39;</span>),
<span style="color:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;buffer&#34;</span>),
<span style="color:#a6e22e">crypto</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;crypto-browserify&#34;</span>),
<span style="color:#a6e22e">stream</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;stream-browserify&#34;</span>),
});
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span> <span style="color:#f92672">=</span> [];
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>.<span style="color:#a6e22e">push</span>(
<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">webpack</span>.<span style="color:#a6e22e">DefinePlugin</span>({
<span style="color:#e6db74">&#39;process.env.ENV&#39;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">&#39;dev&#39;</span>),
<span style="color:#e6db74">&#34;process.env.ENV&#34;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">&#34;dev&#34;</span>),
})
);
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>.<span style="color:#a6e22e">push</span>(
<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">webpack</span>.<span style="color:#a6e22e">ProvidePlugin</span>({
<span style="color:#a6e22e">process</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;process/browser.js&#39;</span>,
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;buffer&#39;</span>, <span style="color:#e6db74">&#39;Buffer&#39;</span>],
<span style="color:#a6e22e">process</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;process/browser.js&#34;</span>,
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#34;buffer&#34;</span>, <span style="color:#e6db74">&#34;Buffer&#34;</span>],
})
);
@ -646,21 +646,21 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span> <span style="color:#f92672">=</span> {};
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span> <span style="color:#f92672">=</span> {};
Object.<span style="color:#a6e22e">assign</span>(<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>, {
<span style="color:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;buffer&#39;</span>),
<span style="color:#a6e22e">crypto</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;crypto-browserify&#39;</span>),
<span style="color:#a6e22e">stream</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#39;stream-browserify&#39;</span>),
<span style="color:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;buffer&#34;</span>),
<span style="color:#a6e22e">crypto</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;crypto-browserify&#34;</span>),
<span style="color:#a6e22e">stream</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;stream-browserify&#34;</span>),
});
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span> <span style="color:#f92672">=</span> [];
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>.<span style="color:#a6e22e">push</span>(
<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">webpack</span>.<span style="color:#a6e22e">DefinePlugin</span>({
<span style="color:#e6db74">&#39;process.env.ENV&#39;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">&#39;prod&#39;</span>),
<span style="color:#e6db74">&#34;process.env.ENV&#34;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">&#34;prod&#34;</span>),
})
);
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>.<span style="color:#a6e22e">push</span>(
<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">webpack</span>.<span style="color:#a6e22e">ProvidePlugin</span>({
<span style="color:#a6e22e">process</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;process/browser.js&#39;</span>,
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;buffer&#39;</span>, <span style="color:#e6db74">&#39;Buffer&#39;</span>],
<span style="color:#a6e22e">process</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;process/browser.js&#34;</span>,
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#34;buffer&#34;</span>, <span style="color:#e6db74">&#34;Buffer&#34;</span>],
})
);
@ -700,32 +700,32 @@ npm install
</h1>
<p>In order to interact with the Waku network, you first need a Waku instance.
Go to <code>App.js</code> and modify the <code>App</code> function:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Waku</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">as</span> <span style="color:#a6e22e">React</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">as</span> <span style="color:#a6e22e">React</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">setWaku</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">undefined</span>);
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">wakuStatus</span>, <span style="color:#a6e22e">setWakuStatus</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#39;None&#39;</span>);
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">wakuStatus</span>, <span style="color:#a6e22e">setWakuStatus</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#34;None&#34;</span>);
<span style="color:#75715e">// Start Waku
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<span style="color:#75715e">// If Waku status not None, it means we are already starting Waku
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#39;None&#39;</span>) <span style="color:#66d9ef">return</span>;
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;None&#34;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Starting&#39;</span>);
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Starting&#34;</span>);
<span style="color:#75715e">// Create Waku
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> } }).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">waku</span>) =&gt; {
<span style="color:#75715e">// Once done, put it in the state
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setWaku</span>(<span style="color:#a6e22e">waku</span>);
<span style="color:#75715e">// And update the status
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Connecting&#39;</span>);
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Connecting&#34;</span>);
});
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App&#39;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App-header&#39;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App&#34;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App-header&#34;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">p</span><span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/p&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/header&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
@ -743,10 +743,10 @@ use the <code>Waku.waitForConnectedPeer()</code> async function:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">waku</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;Connected&#39;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;Connected&#34;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>().<span style="color:#a6e22e">then</span>(() =&gt; {
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Connected&#39;</span>);
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Connected&#34;</span>);
});
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
</code></pre></div><h1 id="use-protobuf">
@ -773,7 +773,7 @@ For this guide, we will use a simple chat message that contains a timestamp, nic
<a class="anchor" href="#protobuf-definition">#</a>
</h2>
<p>Define the data structure with protons:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;protons&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
</span><span style="color:#e6db74">message ChatMessage {
@ -803,11 +803,10 @@ you need to extract the protobuf payload and decode it using <code>protons</code
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">time</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date();
<span style="color:#a6e22e">time</span>.<span style="color:#a6e22e">setTime</span>(<span style="color:#a6e22e">timestamp</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">utf8Text</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Buffer</span>.<span style="color:#a6e22e">from</span>(<span style="color:#a6e22e">text</span>).<span style="color:#a6e22e">toString</span>(<span style="color:#e6db74">&#39;utf-8&#39;</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">utf8Text</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Buffer</span>.<span style="color:#a6e22e">from</span>(<span style="color:#a6e22e">text</span>).<span style="color:#a6e22e">toString</span>(<span style="color:#e6db74">&#34;utf-8&#34;</span>);
<span style="color:#66d9ef">return</span> { <span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">utf8Text</span>, <span style="color:#a6e22e">timestamp</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">time</span>, <span style="color:#a6e22e">nick</span> };
}
</code></pre></div><h2 id="retrieve-messages">
Retrieve messages
<a class="anchor" href="#retrieve-messages">#</a>
@ -832,8 +831,7 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
});
};
</code></pre></div><p>Pass <code>processMessage</code> in <code>WakuStore.queryHistory</code> as the <code>callback</code> value:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>
.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">ContentTopic</span>], { <span style="color:#a6e22e">callback</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">processMessages</span> });
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">ContentTopic</span>], { <span style="color:#a6e22e">callback</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">processMessages</span> });
</code></pre></div><p>Finally, create a <code>Messages</code> component to render the messages:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Messages</span>(<span style="color:#a6e22e">props</span>) {
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">messages</span>.<span style="color:#a6e22e">map</span>(({ <span style="color:#a6e22e">text</span>, <span style="color:#a6e22e">timestamp</span>, <span style="color:#a6e22e">nick</span> }) <span style="color:#f92672">=&gt;</span> {
@ -847,11 +845,11 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">formatDate</span>(<span style="color:#a6e22e">timestamp</span>) {
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">timestamp</span>.<span style="color:#a6e22e">toLocaleString</span>([], {
<span style="color:#a6e22e">month</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;short&#39;</span>,
<span style="color:#a6e22e">day</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;numeric&#39;</span>,
<span style="color:#a6e22e">hour</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;numeric&#39;</span>,
<span style="color:#a6e22e">minute</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;2-digit&#39;</span>,
<span style="color:#a6e22e">second</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;2-digit&#39;</span>,
<span style="color:#a6e22e">month</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;short&#34;</span>,
<span style="color:#a6e22e">day</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;numeric&#34;</span>,
<span style="color:#a6e22e">hour</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;numeric&#34;</span>,
<span style="color:#a6e22e">minute</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;2-digit&#34;</span>,
<span style="color:#a6e22e">second</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;2-digit&#34;</span>,
<span style="color:#a6e22e">hour12</span>: <span style="color:#66d9ef">false</span>,
});
}
@ -860,8 +858,8 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
<span style="color:#75715e">// [..]
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App&#39;</span>&gt;
&lt;<span style="color:#f92672">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App-header&#39;</span>&gt;
&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App&#34;</span>&gt;
&lt;<span style="color:#f92672">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App-header&#34;</span>&gt;
&lt;<span style="color:#f92672">h2</span>&gt;{<span style="color:#a6e22e">wakuStatus</span>}&lt;/<span style="color:#f92672">h2</span>&gt;
&lt;<span style="color:#f92672">h3</span>&gt;<span style="color:#a6e22e">Messages</span>&lt;/<span style="color:#f92672">h3</span>&gt;
&lt;<span style="color:#f92672">ul</span>&gt;
@ -872,11 +870,11 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
);
}
</code></pre></div><p>All together, you should now have:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Waku</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">as</span> <span style="color:#a6e22e">React</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">as</span> <span style="color:#a6e22e">React</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;protons&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ContentTopic</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;/toy-chat/2/huilong/proto&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ContentTopic</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;/toy-chat/2/huilong/proto&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
</span><span style="color:#e6db74">message ChatMessage {
@ -888,38 +886,37 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">setWaku</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">undefined</span>);
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">wakuStatus</span>, <span style="color:#a6e22e">setWakuStatus</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#39;None&#39;</span>);
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">wakuStatus</span>, <span style="color:#a6e22e">setWakuStatus</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#34;None&#34;</span>);
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">messages</span>, <span style="color:#a6e22e">setMessages</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>([]);
<span style="color:#75715e">// Start Waku
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<span style="color:#75715e">// If Waku status not None, it means we are already starting Waku
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#39;None&#39;</span>) <span style="color:#66d9ef">return</span>;
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;None&#34;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Starting&#39;</span>);
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Starting&#34;</span>);
<span style="color:#75715e">// Create Waku
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> } }).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">waku</span>) =&gt; {
<span style="color:#75715e">// Once done, put it in the state
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setWaku</span>(<span style="color:#a6e22e">waku</span>);
<span style="color:#75715e">// And update the status
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Connecting&#39;</span>);
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Connecting&#34;</span>);
});
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
<span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">waku</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;Connected&#39;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;Connected&#34;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>().<span style="color:#a6e22e">then</span>(() =&gt; {
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Connected&#39;</span>);
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#34;Connected&#34;</span>);
});
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
<span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#39;Connected&#39;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#34;Connected&#34;</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">processMessages</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">retrievedMessages</span>) =&gt; {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">messages</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">retrievedMessages</span>.<span style="color:#a6e22e">map</span>(<span style="color:#a6e22e">decodeMessage</span>).<span style="color:#a6e22e">filter</span>(Boolean);
@ -932,13 +929,13 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>
.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">ContentTopic</span>], { <span style="color:#a6e22e">callback</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">processMessages</span> })
.<span style="color:#66d9ef">catch</span>((<span style="color:#a6e22e">e</span>) =&gt; {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;Failed to retrieve messages&#39;</span>, <span style="color:#a6e22e">e</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Failed to retrieve messages&#34;</span>, <span style="color:#a6e22e">e</span>);
});
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App&#39;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App-header&#39;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App&#34;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;App-header&#34;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h2</span><span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h2&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h3</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">Messages</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h3&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
@ -964,7 +961,7 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">time</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date();
<span style="color:#a6e22e">time</span>.<span style="color:#a6e22e">setTime</span>(<span style="color:#a6e22e">timestamp</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">utf8Text</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Buffer</span>.<span style="color:#a6e22e">from</span>(<span style="color:#a6e22e">text</span>).<span style="color:#a6e22e">toString</span>(<span style="color:#e6db74">&#39;utf-8&#39;</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">utf8Text</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Buffer</span>.<span style="color:#a6e22e">from</span>(<span style="color:#a6e22e">text</span>).<span style="color:#a6e22e">toString</span>(<span style="color:#e6db74">&#34;utf-8&#34;</span>);
<span style="color:#66d9ef">return</span> { <span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">utf8Text</span>, <span style="color:#a6e22e">timestamp</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">time</span>, <span style="color:#a6e22e">nick</span> };
}
@ -981,11 +978,11 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">formatDate</span>(<span style="color:#a6e22e">timestamp</span>) {
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">timestamp</span>.<span style="color:#a6e22e">toLocaleString</span>([], {
<span style="color:#a6e22e">month</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;short&#39;</span>,
<span style="color:#a6e22e">day</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;numeric&#39;</span>,
<span style="color:#a6e22e">hour</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;numeric&#39;</span>,
<span style="color:#a6e22e">minute</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;2-digit&#39;</span>,
<span style="color:#a6e22e">second</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;2-digit&#39;</span>,
<span style="color:#a6e22e">month</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;short&#34;</span>,
<span style="color:#a6e22e">day</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;numeric&#34;</span>,
<span style="color:#a6e22e">hour</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;numeric&#34;</span>,
<span style="color:#a6e22e">minute</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;2-digit&#34;</span>,
<span style="color:#a6e22e">second</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;2-digit&#34;</span>,
<span style="color:#a6e22e">hour12</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
});
}
@ -1010,10 +1007,9 @@ By default, js-waku sets the timestamp of outgoing message to the current time.<
<span style="color:#75715e">// 7 days/week, 24 hours/day, 60min/hour, 60secs/min, 100ms/sec
</span><span style="color:#75715e"></span><span style="color:#a6e22e">startTime</span>.<span style="color:#a6e22e">setTime</span>(<span style="color:#a6e22e">startTime</span>.<span style="color:#a6e22e">getTime</span>() <span style="color:#f92672">-</span> <span style="color:#ae81ff">7</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">24</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">1000</span>);
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>
.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">ContentTopic</span>], {
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">ContentTopic</span>], {
<span style="color:#a6e22e">callback</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">processMessages</span>,
<span style="color:#a6e22e">timeFilter</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">startTime</span>, <span style="color:#a6e22e">endTime</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">new</span> Date() }
<span style="color:#a6e22e">timeFilter</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">startTime</span>, <span style="color:#a6e22e">endTime</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">new</span> Date() },
});
</code></pre></div><h2 id="end-result">
End result
@ -1029,9 +1025,9 @@ By default, js-waku sets the timestamp of outgoing message to the current time.<
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/23ba3e482981514df0e2954405c2ea33c751c4d3" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 24, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>

8
docs/guides/index.html
View File

@ -15,7 +15,7 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/index.xml" title="Waku Connect Docs" />
<!--
Made with Book Theme
@ -432,7 +432,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -556,9 +556,9 @@ https://github.com/alex-shpak/hugo-book
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/d41a5cee6b827340d4ac5d6ce75b150dad8ef457" title='Last modified by Franck R | Jan 12, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 12, 2022</span>
<span>Jan 24, 2022</span>
</a>
</div>

32
docs/guides/vote_poll_sdk/index.html
View File

@ -18,7 +18,7 @@ For both functionalities, only ERC-20 token holders can create or answer polls/v
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/index.xml" title="Waku Connect Docs" />
<!--
Made with Book Theme
@ -435,7 +435,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -501,7 +501,7 @@ https://github.com/alex-shpak/hugo-book
<nav id="TableOfContents">
<ul>
<li><a href="#wakuconnect-vote--poll-sdk">WakuConnect Vote &amp; Poll SDK</a>
<li><a href="#waku-connect-vote--poll-sdk">Waku Connect Vote &amp; Poll SDK</a>
<ul>
<li><a href="#packages">Packages</a>
<ul>
@ -510,12 +510,12 @@ https://github.com/alex-shpak/hugo-book
<li><a href="#poll">Poll</a></li>
</ul>
</li>
<li><a href="#wakuconnect-vote-sdk">WakuConnect Vote SDK</a>
<li><a href="#waku-connect-vote-sdk">Waku Connect Vote SDK</a>
<ul>
<li><a href="#documentation">Documentation</a></li>
</ul>
</li>
<li><a href="#wakuconnect-poll-sdk">WakuConnect Poll SDK</a>
<li><a href="#waku-connect-poll-sdk">Waku Connect Poll SDK</a>
<ul>
<li><a href="#documentation-1">Documentation</a></li>
</ul>
@ -534,9 +534,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="wakuconnect-vote--poll-sdk">
<article class="markdown"><h1 id="waku-connect-vote--poll-sdk">
Waku Connect Vote &amp; Poll SDK
<a class="anchor" href="#wakuconnect-vote--poll-sdk">#</a>
<a class="anchor" href="#waku-connect-vote--poll-sdk">#</a>
</h1>
<p>The Waku Connect Vote &amp; Poll SDK enables developers to add Waku powered polling and voting features to their dApp.</p>
<p>The repository can be found on GitHub: <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk">https://github.com/status-im/wakuconnect-vote-poll-sdk</a>.</p>
@ -573,9 +573,9 @@ The developer using the SDK can configure which ERC-20 token contract is used.</
<li><code>@waku/poll-sdk-react-components</code>: React components.</li>
<li><code>@waku/poll-sdk-react-hooks</code>: React hooks.</li>
</ul>
<h2 id="wakuconnect-vote-sdk">
<h2 id="waku-connect-vote-sdk">
Waku Connect Vote SDK
<a class="anchor" href="#wakuconnect-vote-sdk">#</a>
<a class="anchor" href="#waku-connect-vote-sdk">#</a>
</h2>
<p>The Waku Connect Vote SDK allows you to leverage Waku to save gas fees for most voters.
It uses Waku to broadcast and aggregate votes.
@ -603,9 +603,9 @@ there may be issues with undeclared dependencies with this example.
Tracked with <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/issues/11">status-im/wakuconnect-vote-poll-sdk#11</a>.
</blockquote>
<h2 id="wakuconnect-poll-sdk">
<h2 id="waku-connect-poll-sdk">
Waku Connect Poll SDK
<a class="anchor" href="#wakuconnect-poll-sdk">#</a>
<a class="anchor" href="#waku-connect-poll-sdk">#</a>
</h2>
<p>The Waku Connect Poll SDK allows you to leverage Waku and enable token holders to create, answer and view polls.
The polls are not committed to the blockchain and hence do not cost gas.</p>
@ -639,9 +639,9 @@ The polls are not committed to the blockchain and hence do not cost gas.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/0804fd912cac0f49a7f2bb13a86ae9c79279534a" title='Last modified by Franck R | Jan 10, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 10, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>
@ -684,7 +684,7 @@ The polls are not committed to the blockchain and hence do not cost gas.</p>
<nav id="TableOfContents">
<ul>
<li><a href="#wakuconnect-vote--poll-sdk">WakuConnect Vote &amp; Poll SDK</a>
<li><a href="#waku-connect-vote--poll-sdk">Waku Connect Vote &amp; Poll SDK</a>
<ul>
<li><a href="#packages">Packages</a>
<ul>
@ -693,12 +693,12 @@ The polls are not committed to the blockchain and hence do not cost gas.</p>
<li><a href="#poll">Poll</a></li>
</ul>
</li>
<li><a href="#wakuconnect-vote-sdk">WakuConnect Vote SDK</a>
<li><a href="#waku-connect-vote-sdk">Waku Connect Vote SDK</a>
<ul>
<li><a href="#documentation">Documentation</a></li>
</ul>
</li>
<li><a href="#wakuconnect-poll-sdk">WakuConnect Poll SDK</a>
<li><a href="#waku-connect-poll-sdk">Waku Connect Poll SDK</a>
<ul>
<li><a href="#documentation-1">Documentation</a></li>
</ul>

33
docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/index.html
View File

@ -14,14 +14,14 @@ yarn create react-app poll-dapp-ts --template typescript cd poll-dapp-ts yarn ad
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-05T11:02:48+11:00" />
<meta property="article:modified_time" content="2022-01-27T11:18:41+11:00" />
<title>Create the DApp and Install Dependencies | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -437,7 +437,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -576,29 +576,28 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
<p>Install <code>react-app-rewired</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">yarn add -D react-app-rewired
</code></pre></div><p>Create a <code>config-overrides.js</code> file at the root of your app:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;webpack&#39;</span>);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#34;webpack&#34;</span>);
<span style="color:#a6e22e">module</span>.<span style="color:#a6e22e">exports</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">config</span>) =&gt; {
<span style="color:#75715e">// Override webpack 5 config from react-scripts to load polyfills
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span> <span style="color:#f92672">=</span> {};
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span> <span style="color:#f92672">=</span> {};
Object.<span style="color:#a6e22e">assign</span>(<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>, {
<span style="color:#e6db74">&#34;buffer&#34;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;buffer&#34;</span>),
<span style="color:#e6db74">&#34;crypto&#34;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;crypto-browserify&#34;</span>),
<span style="color:#e6db74">&#34;stream&#34;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;stream-browserify&#34;</span>),
<span style="color:#e6db74">&#34;assert&#34;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;assert&#34;</span>)
}
)
<span style="color:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;buffer&#34;</span>),
<span style="color:#a6e22e">crypto</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;crypto-browserify&#34;</span>),
<span style="color:#a6e22e">stream</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;stream-browserify&#34;</span>),
<span style="color:#a6e22e">assert</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;assert&#34;</span>),
});
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span> <span style="color:#f92672">=</span> []
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span> <span style="color:#f92672">=</span> [];
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>.<span style="color:#a6e22e">push</span>(
<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">webpack</span>.<span style="color:#a6e22e">ProvidePlugin</span>({
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;buffer&#39;</span>, <span style="color:#e6db74">&#39;Buffer&#39;</span>],
}));
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#34;buffer&#34;</span>, <span style="color:#e6db74">&#34;Buffer&#34;</span>],
})
);
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</span>;
}
};
</code></pre></div><p>Use <code>react-app-rewired</code> in the <code>package.json</code>, instead of <code>react-scripts</code>:</p>
<pre tabindex="0"><code> &quot;scripts&quot;: {
- &quot;start&quot;: &quot;react-scripts start&quot;,
@ -645,9 +644,9 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/2180e81c1fc77b5f5017955e74b9c584e8c32eca" title='Last modified by F | Jan 5, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 5, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>

90
docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/index.html
View File

@ -12,14 +12,14 @@ rm -f App.tsx App.css App.test.tsx Top bar # Use TopBar component to display wa
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-05T11:02:48+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Connect to the Ethereum Wallet | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -435,7 +435,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -544,31 +544,31 @@ that already connects to the user&rsquo;s wallet.
For that, create a <code>PollPage</code> component that includes the top bar and will include the poll elements.
The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>);
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>())
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
} <span style="color:#66d9ef">else</span> {
<span style="color:#75715e">// Deactivate signer if signed out
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>)
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>);
}
}, [<span style="color:#a6e22e">account</span>])
}, [<span style="color:#a6e22e">account</span>]);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;Poll dApp&#39;</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
)
);
}
</code></pre></div><h2 id="page">
Page
@ -579,25 +579,27 @@ The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p
<a class="anchor" href="#usedapp">#</a>
</h3>
<p>Create a <code>config</code> variable that contains the Ethereum network parameters:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">DEFAULT_CONFIG</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core/dist/cjs/src/model/config/default&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">readOnlyChainId</span>: <span style="color:#66d9ef">ChainId.Mainnet</span>,
<span style="color:#a6e22e">readOnlyUrls</span><span style="color:#f92672">:</span> {
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;https://mainnet.infura.io/v3/your-infura-token&#39;</span>,
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;https://mainnet.infura.io/v3/your-infura-token&#34;</span>,
},
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#39;</span>,
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#39;</span>,
<span style="color:#a6e22e">1337</span>: <span style="color:#66d9ef">process.env.GANACHE_MULTICALL_CONTRACT</span> <span style="color:#f92672">??</span> <span style="color:#e6db74">&#39;0x0000000000000000000000000000000000000000&#39;</span>,
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#34;</span>,
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#34;</span>,
<span style="color:#a6e22e">1337</span>:
<span style="color:#66d9ef">process.env.GANACHE_MULTICALL_CONTRACT</span> <span style="color:#f92672">??</span>
<span style="color:#e6db74">&#34;0x0000000000000000000000000000000000000000&#34;</span>,
},
<span style="color:#a6e22e">supportedChains</span><span style="color:#f92672">:</span> [...<span style="color:#a6e22e">DEFAULT_CONFIG</span>.<span style="color:#a6e22e">supportedChains</span>, <span style="color:#ae81ff">1337</span>],
<span style="color:#a6e22e">notifications</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">checkInterval</span>: <span style="color:#66d9ef">500</span>,
<span style="color:#a6e22e">expirationPeriod</span>: <span style="color:#66d9ef">50000</span>,
},
}
};
</code></pre></div><p>Replace <code>your-infura-token</code> with your <a href="https://infura.io/docs/ethereum">Infura API token</a>.</p>
<h3 id="styled-components">
Styled-components
@ -605,12 +607,12 @@ The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p
</h3>
<p><a href="https://styled-components.com/"><code>styled-components</code></a> is used for easy styling.
Create a <code>Wrapper</code> variable to use in the page component:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
</span><span style="color:#e6db74"> height: 100%;
</span><span style="color:#e6db74"> width: 100%;
</span><span style="color:#e6db74">`</span>
</span><span style="color:#e6db74">`</span>;
</code></pre></div><h3 id="render">
Render
<a class="anchor" href="#render">#</a>
@ -624,62 +626,65 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
&lt;<span style="color:#f92672">PollPage</span> /&gt;
&lt;/<span style="color:#f92672">DAppProvider</span>&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
);
}
</code></pre></div><p>Your <code>index.tsx</code> should now be:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>;
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, {<span style="color:#a6e22e">useEffect</span>, <span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react-dom&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;./index.css&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, { <span style="color:#a6e22e">useEffect</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react-dom&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#34;./index.css&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">orangeTheme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/cjs/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">DEFAULT_CONFIG</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core/dist/cjs/src/model/config/default&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">readOnlyChainId</span>: <span style="color:#66d9ef">ChainId.Mainnet</span>,
<span style="color:#a6e22e">readOnlyUrls</span><span style="color:#f92672">:</span> {
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;https://mainnet.infura.io/v3/b4451d780cc64a078ccf2181e872cfcf&#39;</span>,
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span>
<span style="color:#e6db74">&#34;https://mainnet.infura.io/v3/b4451d780cc64a078ccf2181e872cfcf&#34;</span>,
},
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#39;</span>,
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#39;</span>,
<span style="color:#a6e22e">1337</span>: <span style="color:#66d9ef">process.env.GANACHE_MULTICALL_CONTRACT</span> <span style="color:#f92672">??</span> <span style="color:#e6db74">&#39;0x0000000000000000000000000000000000000000&#39;</span>,
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#34;</span>,
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#34;</span>,
<span style="color:#a6e22e">1337</span>:
<span style="color:#66d9ef">process.env.GANACHE_MULTICALL_CONTRACT</span> <span style="color:#f92672">??</span>
<span style="color:#e6db74">&#34;0x0000000000000000000000000000000000000000&#34;</span>,
},
<span style="color:#a6e22e">supportedChains</span><span style="color:#f92672">:</span> [...<span style="color:#a6e22e">DEFAULT_CONFIG</span>.<span style="color:#a6e22e">supportedChains</span>, <span style="color:#ae81ff">1337</span>],
<span style="color:#a6e22e">notifications</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">checkInterval</span>: <span style="color:#66d9ef">500</span>,
<span style="color:#a6e22e">expirationPeriod</span>: <span style="color:#66d9ef">50000</span>,
},
}
};
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>);
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>())
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
} <span style="color:#66d9ef">else</span> {
<span style="color:#75715e">// Deactivate signer if signed out
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>)
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>);
}
}, [<span style="color:#a6e22e">account</span>])
}, [<span style="color:#a6e22e">account</span>]);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;Poll dApp&#39;</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
)
);
}
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
@ -690,20 +695,19 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
&lt;<span style="color:#f92672">PollPage</span> /&gt;
&lt;/<span style="color:#f92672">DAppProvider</span>&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
);
}
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
</span><span style="color:#e6db74"> height: 100%;
</span><span style="color:#e6db74"> width: 100%;
</span><span style="color:#e6db74">`</span>
</span><span style="color:#e6db74">`</span>;
<span style="color:#a6e22e">ReactDOM</span>.<span style="color:#a6e22e">render</span>(
&lt;<span style="color:#f92672">React.StrictMode</span>&gt;
&lt;<span style="color:#f92672">App</span> /&gt;
&lt;/<span style="color:#f92672">React.StrictMode</span>&gt;,
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#39;root&#39;</span>)
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;root&#34;</span>)
);
</code></pre></div><p>
@ -734,9 +738,9 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/2180e81c1fc77b5f5017955e74b9c584e8c32eca" title='Last modified by F | Jan 5, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 5, 2022</span>
<span>Jan 24, 2022</span>
</a>
</div>

59
docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/index.html
View File

@ -5,23 +5,23 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
import styled from &#39;styled-components&#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button # Create a button that will display the PollCreation component on click.">
import styled from &#34;styled-components&#34;; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } `; Button # Create a button that will display the PollCreation component on click.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Create-A-Poll Button" />
<meta property="og:description" content="Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
import styled from &#39;styled-components&#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button # Create a button that will display the PollCreation component on click." />
import styled from &#34;styled-components&#34;; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } `; Button # Create a button that will display the PollCreation component on click." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-06T13:19:14+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Create-A-Poll Button | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -437,7 +437,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -535,7 +535,7 @@ touch components/Poll.tsx
<a class="anchor" href="#styled-components">#</a>
</h2>
<p>Again, create a <code>Wrapper</code> for styling:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
</span><span style="color:#e6db74"> display: flex;
@ -555,7 +555,7 @@ touch components/Poll.tsx
</span><span style="color:#e6db74"> @media (max-width: 425px) {
</span><span style="color:#e6db74"> padding: 96px 16px 84px;
</span><span style="color:#e6db74"> }
</span><span style="color:#e6db74">`</span>
</span><span style="color:#e6db74">`</span>;
</code></pre></div><h2 id="button">
Button
<a class="anchor" href="#button">#</a>
@ -568,54 +568,59 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
<p>Upon clicking the button, we set <code>showPollCreation</code> to true.
<code>showPollCreation</code> will control when to render the poll creation modal.</p>
<p><code>components/Poll.tsx</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@ethersproject/providers&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>
}
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>;
};
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({ <span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">theme</span> }<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>)
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{
&lt;<span style="color:#f92672">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
&lt;<span style="color:#f92672">CreateButton</span>
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
}}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}&gt;
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
&gt;
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
);
}
</code></pre></div><p>Now update the <code>PollPage</code> component to render the new <code>Poll</code> component:</p>
<p><code>index.tsx</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>);
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>())
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
} <span style="color:#66d9ef">else</span> {
<span style="color:#75715e">// Deactivate signer if signed out
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>)
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>);
}
}, [<span style="color:#a6e22e">account</span>])
}, [<span style="color:#a6e22e">account</span>]);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;Poll dApp&#39;</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
@ -623,7 +628,7 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
/&gt;
&lt;<span style="color:#f92672">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>} /&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
)
);
}
</code></pre></div><p>Now, you have a button:</p>
<p><img src="/assets/poll_sdk/create-poll-button.png" alt="Create a poll button" /></p>
@ -656,9 +661,9 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/e3b7cf9a3d3290ff28648aedc59817ff66c50fc6" title='Last modified by F | Jan 6, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 6, 2022</span>
<span>Jan 24, 2022</span>
</a>
</div>

100
docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/index.html
View File

@ -14,14 +14,14 @@ useWakuPolling takes:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-06T13:19:14+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Poll Creation Component | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -437,7 +437,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -534,78 +534,106 @@ Only token holders can create and answer polls.</li>
</ul>
<p>Add these parameters to <code>PollProps</code> and call <code>useWakuPolling</code>.</p>
<p><code>components/Poll.tsx</code></p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useConfig</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">PollCreation</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@ethersproject/providers&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWakuPolling</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-hooks&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useConfig</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-hooks&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core/src/constants&#34;</span>;
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">appName</span>: <span style="color:#66d9ef">string</span>
<span style="color:#a6e22e">library</span>: <span style="color:#66d9ef">Web3Provider</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
<span style="color:#a6e22e">chainId</span>: <span style="color:#66d9ef">ChainId</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>
<span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span>
}
<span style="color:#a6e22e">appName</span>: <span style="color:#66d9ef">string</span>;
<span style="color:#a6e22e">library</span>: <span style="color:#66d9ef">Web3Provider</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">chainId</span>: <span style="color:#66d9ef">ChainId</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>;
<span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span>;
};
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({<span style="color:#a6e22e">appName</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">chainId</span>, <span style="color:#a6e22e">theme</span>, <span style="color:#a6e22e">tokenAddress</span>}<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useConfig</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuPolling</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuPolling</span>(<span style="color:#a6e22e">appName</span>, <span style="color:#a6e22e">tokenAddress</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">config</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">?</span>.[<span style="color:#a6e22e">chainId</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1337</span>])
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({
<span style="color:#a6e22e">appName</span>,
<span style="color:#a6e22e">library</span>,
<span style="color:#a6e22e">signer</span>,
<span style="color:#a6e22e">chainId</span>,
<span style="color:#a6e22e">theme</span>,
<span style="color:#a6e22e">tokenAddress</span>,
}<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useConfig</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuPolling</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuPolling</span>(
<span style="color:#a6e22e">appName</span>,
<span style="color:#a6e22e">tokenAddress</span>,
<span style="color:#a6e22e">library</span>,
<span style="color:#a6e22e">config</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">?</span>.[<span style="color:#a6e22e">chainId</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1337</span>]
);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&amp;&amp;</span> (
&lt;<span style="color:#f92672">PollCreation</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}/&gt;
&lt;<span style="color:#f92672">PollCreation</span>
<span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>}
<span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
/&gt;
)}
{
&lt;<span style="color:#f92672">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
&lt;<span style="color:#f92672">CreateButton</span>
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
}}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}&gt;
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
&gt;
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
);
}
</code></pre></div><p>Then pass them in <code>PollPage</code>.</p>
<p>In this example, we use <code>demo-poll-dapp</code> for the app name and the mainnet SNT token contract for the token address.
Replace those with your own.</p>
<p><code>index.tsx</code></p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">chainId</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">chainId</span> } <span style="color:#f92672">=</span>
<span style="color:#a6e22e">useEthers</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>);
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>())
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
} <span style="color:#66d9ef">else</span> {
<span style="color:#75715e">// Deactivate signer if signed out
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>)
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>);
}
}, [<span style="color:#a6e22e">account</span>])
}, [<span style="color:#a6e22e">account</span>]);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;Poll dApp&#39;</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;<span style="color:#f92672">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;demo-poll-dapp&#39;</span>} <span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>} <span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#39;</span>}/&gt;
&lt;<span style="color:#f92672">Poll</span>
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;demo-poll-dapp&#34;</span>}
<span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>}
<span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>}
<span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#34;</span>}
/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
)
);
}
</code></pre></div><p>You can now see the poll creation modal when clicking on the button:</p>
<p><img src="/assets/poll_sdk/create-a-poll-component.png" alt="Create a poll modal" /></p>
@ -639,9 +667,9 @@ Replace those with your own.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/e3b7cf9a3d3290ff28648aedc59817ff66c50fc6" title='Last modified by F | Jan 6, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 6, 2022</span>
<span>Jan 24, 2022</span>
</a>
</div>

92
docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/index.html
View File

@ -6,24 +6,24 @@
<meta name="description" content="Poll List Component # To display existing polls, the PollList component is provided.
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
components/Poll.tsx:
import {useState} from &#39;react&#39; import {useConfig} from &#39;@usedapp/core&#39; import {PollCreation, PollList} from &#39;@waku/poll-sdk-react-components&#39; import {JsonRpcSigner, Web3Provider} from &#39;@ethersproject/providers&#39; import {useWakuPolling} from &#39;@waku/poll-sdk-react-hooks&#39; import {CreateButton} from &#39;@waku/vote-poll-sdk-react-components&#39; import {Theme} from &#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39; import {ChainId} from &#34;@usedapp/core/src/constants&#34;; type PollProps = { appName: string library: Web3Provider | undefined signer: JsonRpcSigner | undefined chainId: ChainId | undefined account: string | null | undefined theme: Theme tokenAddress: string } export function Poll({appName, library, signer, chainId, account, theme, tokenAddress}: PollProps) { const config = useConfig() const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?">
import { useState } from &#34;react&#34;; import { useConfig } from &#34;@usedapp/core&#34;; import { PollCreation, PollList } from &#34;@waku/poll-sdk-react-components&#34;; import { JsonRpcSigner, Web3Provider } from &#34;@ethersproject/providers&#34;; import { useWakuPolling } from &#34;@waku/poll-sdk-react-hooks&#34;; import { CreateButton } from &#34;@waku/vote-poll-sdk-react-components&#34;; import { Theme } from &#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;; import { ChainId } from &#34;@usedapp/core/src/constants&#34;; type PollProps = { appName: string; library: Web3Provider | undefined; signer: JsonRpcSigner | undefined; chainId: ChainId | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; }; export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress, }: PollProps) { const config = useConfig(); const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, config?">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Poll List Component" />
<meta property="og:description" content="Poll List Component # To display existing polls, the PollList component is provided.
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
components/Poll.tsx:
import {useState} from &#39;react&#39; import {useConfig} from &#39;@usedapp/core&#39; import {PollCreation, PollList} from &#39;@waku/poll-sdk-react-components&#39; import {JsonRpcSigner, Web3Provider} from &#39;@ethersproject/providers&#39; import {useWakuPolling} from &#39;@waku/poll-sdk-react-hooks&#39; import {CreateButton} from &#39;@waku/vote-poll-sdk-react-components&#39; import {Theme} from &#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39; import {ChainId} from &#34;@usedapp/core/src/constants&#34;; type PollProps = { appName: string library: Web3Provider | undefined signer: JsonRpcSigner | undefined chainId: ChainId | undefined account: string | null | undefined theme: Theme tokenAddress: string } export function Poll({appName, library, signer, chainId, account, theme, tokenAddress}: PollProps) { const config = useConfig() const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?" />
import { useState } from &#34;react&#34;; import { useConfig } from &#34;@usedapp/core&#34;; import { PollCreation, PollList } from &#34;@waku/poll-sdk-react-components&#34;; import { JsonRpcSigner, Web3Provider } from &#34;@ethersproject/providers&#34;; import { useWakuPolling } from &#34;@waku/poll-sdk-react-hooks&#34;; import { CreateButton } from &#34;@waku/vote-poll-sdk-react-components&#34;; import { Theme } from &#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;; import { ChainId } from &#34;@usedapp/core/src/constants&#34;; type PollProps = { appName: string; library: Web3Provider | undefined; signer: JsonRpcSigner | undefined; chainId: ChainId | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; }; export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress, }: PollProps) { const config = useConfig(); const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, config?" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-05T11:02:48+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Poll List Component | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -439,7 +439,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -526,52 +526,80 @@ https://github.com/alex-shpak/hugo-book
<p>Simply add it to the <code>Poll</code> function to render it.
It needs the <code>account</code> variable that can be passed as a property to <code>Poll</code>:</p>
<p><code>components/Poll.tsx</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useConfig</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">PollCreation</span>, <span style="color:#a6e22e">PollList</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@ethersproject/providers&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWakuPolling</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-hooks&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useConfig</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span>, <span style="color:#a6e22e">PollList</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-hooks&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core/src/constants&#34;</span>;
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">appName</span>: <span style="color:#66d9ef">string</span>
<span style="color:#a6e22e">library</span>: <span style="color:#66d9ef">Web3Provider</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
<span style="color:#a6e22e">chainId</span>: <span style="color:#66d9ef">ChainId</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
<span style="color:#a6e22e">account</span>: <span style="color:#66d9ef">string</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">null</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>
<span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span>
}
<span style="color:#a6e22e">appName</span>: <span style="color:#66d9ef">string</span>;
<span style="color:#a6e22e">library</span>: <span style="color:#66d9ef">Web3Provider</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">chainId</span>: <span style="color:#66d9ef">ChainId</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">account</span>: <span style="color:#66d9ef">string</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">null</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>;
<span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span>;
};
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({<span style="color:#a6e22e">appName</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">chainId</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">theme</span>, <span style="color:#a6e22e">tokenAddress</span>}<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useConfig</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuPolling</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuPolling</span>(<span style="color:#a6e22e">appName</span>, <span style="color:#a6e22e">tokenAddress</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">config</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">?</span>.[<span style="color:#a6e22e">chainId</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1337</span>])
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({
<span style="color:#a6e22e">appName</span>,
<span style="color:#a6e22e">library</span>,
<span style="color:#a6e22e">signer</span>,
<span style="color:#a6e22e">chainId</span>,
<span style="color:#a6e22e">account</span>,
<span style="color:#a6e22e">theme</span>,
<span style="color:#a6e22e">tokenAddress</span>,
}<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useConfig</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuPolling</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuPolling</span>(
<span style="color:#a6e22e">appName</span>,
<span style="color:#a6e22e">tokenAddress</span>,
<span style="color:#a6e22e">library</span>,
<span style="color:#a6e22e">config</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">?</span>.[<span style="color:#a6e22e">chainId</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1337</span>]
);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&amp;&amp;</span> (
&lt;<span style="color:#f92672">PollCreation</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}/&gt;
&lt;<span style="color:#f92672">PollCreation</span>
<span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>}
<span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
/&gt;
)}
{
&lt;<span style="color:#f92672">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
&lt;<span style="color:#f92672">CreateButton</span>
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
}}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}&gt;
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
&gt;
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
&lt;<span style="color:#f92672">PollList</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>} /&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
);
}
</code></pre></div><p>Pass the <code>account</code> to <code>Poll</code> in <code>index.tsx</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"> &lt;<span style="color:#f92672">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;demo-poll-dapp&#39;</span>} <span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>} <span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx">&lt;<span style="color:#f92672">Poll</span>
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;demo-poll-dapp&#34;</span>}
<span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>}
<span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>}
<span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#39;</span>}/&gt;
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#34;</span>}
/&gt;
</code></pre></div><p>Et voila!
The <code>PollList</code> component handles the display of polls:</p>
<p><img src="/assets/poll_sdk/listed-polls.png" alt="Poll List" /></p>
@ -604,9 +632,9 @@ It also allows passing a token contract address in the url, as described in the
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/2180e81c1fc77b5f5017955e74b9c584e8c32eca" title='Last modified by F | Jan 5, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 5, 2022</span>
<span>Jan 24, 2022</span>
</a>
</div>

16
docs/guides/vote_poll_sdk/poll_sdk/index.html
View File

@ -19,7 +19,7 @@ Get Started ">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/index.xml" title="Waku Connect Docs" />
<!--
Made with Book Theme
@ -436,7 +436,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -502,7 +502,7 @@ https://github.com/alex-shpak/hugo-book
<nav id="TableOfContents">
<ul>
<li><a href="#how-to-use-the-wakuconnect-poll-sdk">How to Use the WakuConnect Poll SDK</a></li>
<li><a href="#how-to-use-the-waku-connect-poll-sdk">How to Use the Waku Connect Poll SDK</a></li>
</ul>
</nav>
@ -515,9 +515,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="how-to-use-the-wakuconnect-poll-sdk">
<article class="markdown"><h1 id="how-to-use-the-waku-connect-poll-sdk">
How to Use the Waku Connect Poll SDK
<a class="anchor" href="#how-to-use-the-wakuconnect-poll-sdk">#</a>
<a class="anchor" href="#how-to-use-the-waku-connect-poll-sdk">#</a>
</h1>
<p>To demonstrate how to use the Waku Connect Poll SDK in your dApp, we will create a TypeScript React app from scratch.</p>
<p>You can then adapt the steps depending on your dApp configuration and build setup.</p>
@ -544,9 +544,9 @@ https://github.com/alex-shpak/hugo-book
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/2180e81c1fc77b5f5017955e74b9c584e8c32eca" title='Last modified by F | Jan 5, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 5, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>
@ -589,7 +589,7 @@ https://github.com/alex-shpak/hugo-book
<nav id="TableOfContents">
<ul>
<li><a href="#how-to-use-the-wakuconnect-poll-sdk">How to Use the WakuConnect Poll SDK</a></li>
<li><a href="#how-to-use-the-waku-connect-poll-sdk">How to Use the Waku Connect Poll SDK</a></li>
</ul>
</nav>

4
docs/guides/vote_poll_sdk/poll_sdk/index.xml
View File

@ -36,7 +36,7 @@ rm -f App.tsx App.css App.test.tsx Top bar # Use TopBar component to display wa
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</guid>
<description>Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&amp;rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
import styled from &amp;#39;styled-components&amp;#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button # Create a button that will display the PollCreation component on click.</description>
import styled from &amp;#34;styled-components&amp;#34;; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } `; Button # Create a button that will display the PollCreation component on click.</description>
</item>
<item>
@ -59,7 +59,7 @@ useWakuPolling takes:
<description>Poll List Component # To display existing polls, the PollList component is provided.
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
components/Poll.tsx:
import {useState} from &amp;#39;react&amp;#39; import {useConfig} from &amp;#39;@usedapp/core&amp;#39; import {PollCreation, PollList} from &amp;#39;@waku/poll-sdk-react-components&amp;#39; import {JsonRpcSigner, Web3Provider} from &amp;#39;@ethersproject/providers&amp;#39; import {useWakuPolling} from &amp;#39;@waku/poll-sdk-react-hooks&amp;#39; import {CreateButton} from &amp;#39;@waku/vote-poll-sdk-react-components&amp;#39; import {Theme} from &amp;#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&amp;#39; import {ChainId} from &amp;#34;@usedapp/core/src/constants&amp;#34;; type PollProps = { appName: string library: Web3Provider | undefined signer: JsonRpcSigner | undefined chainId: ChainId | undefined account: string | null | undefined theme: Theme tokenAddress: string } export function Poll({appName, library, signer, chainId, account, theme, tokenAddress}: PollProps) { const config = useConfig() const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?</description>
import { useState } from &amp;#34;react&amp;#34;; import { useConfig } from &amp;#34;@usedapp/core&amp;#34;; import { PollCreation, PollList } from &amp;#34;@waku/poll-sdk-react-components&amp;#34;; import { JsonRpcSigner, Web3Provider } from &amp;#34;@ethersproject/providers&amp;#34;; import { useWakuPolling } from &amp;#34;@waku/poll-sdk-react-hooks&amp;#34;; import { CreateButton } from &amp;#34;@waku/vote-poll-sdk-react-components&amp;#34;; import { Theme } from &amp;#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&amp;#34;; import { ChainId } from &amp;#34;@usedapp/core/src/constants&amp;#34;; type PollProps = { appName: string; library: Web3Provider | undefined; signer: JsonRpcSigner | undefined; chainId: ChainId | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; }; export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress, }: PollProps) { const config = useConfig(); const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, config?</description>
</item>
</channel>

22
docs/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Waku Connect Docs # Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at wakunetwork.">
Waku can be used for chat purposes and for many machine-to-machine use cases.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Introduction" />
<meta property="og:description" content="" />
@ -19,7 +19,7 @@ Waku can be used for chat purposes and for many machine-to-machine use cases. Yo
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/docs/" title="Introdução">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/index.xml" title="Waku Connect Docs" />
<!--
Made with Book Theme
@ -440,7 +440,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -506,7 +506,7 @@ https://github.com/alex-shpak/hugo-book
<nav id="TableOfContents">
<ul>
<li><a href="#wakuconnect-docs">WakuConnect Docs</a>
<li><a href="#waku-connect-docs">Waku Connect Docs</a>
<ul>
<li><a href="#bugs-questions--support">Bugs, Questions &amp; Support</a></li>
</ul>
@ -523,9 +523,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="wakuconnect-docs">
<article class="markdown"><h1 id="waku-connect-docs">
Waku Connect Docs
<a class="anchor" href="#wakuconnect-docs">#</a>
<a class="anchor" href="#waku-connect-docs">#</a>
</h1>
<p>Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
<p>Waku is a decentralized, censorship-resistant, network and protocol family.
@ -549,8 +549,8 @@ Check out the <a href="/docs/examples/">example list</a> to see what usage each
<a class="anchor" href="#bugs-questions--support">#</a>
</h2>
<p>If you encounter any bug or would like to propose new features, feel free to <a href="https://github.com/status-im/js-waku/issues/new/">open an issue</a>.</p>
<p>To get help, join #dappconnect-support on <a href="https://discord.gg/j5pGbn7MHZ">Vac Discord</a> or <a href="https://t.me/dappconnectsupport">Telegram</a>.
For more general discussion and latest news, join #dappconnect on <a href="https://discord.gg/9DgykdmpZ6">Vac Discord</a> or <a href="https://t.me/dappconnect">Telegram</a>.</p>
<p>To get help, join #wakuconnect-support on <a href="https://discord.gg/j5pGbn7MHZ">Vac Discord</a> or <a href="https://t.me/wakuconnectsupport">Telegram</a>.
For more general discussion and latest news, join #wakuconnect on <a href="https://discord.gg/9DgykdmpZ6">Vac Discord</a> or <a href="https://t.me/wakuconnect">Telegram</a>.</p>
</article>
@ -560,9 +560,9 @@ For more general discussion and latest news, join #dappconnect on <a href="https
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/1337e950bd668115d22a09769ff97ab1e7258b2c" title='Last modified by Franck R | Jan 23, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 23, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>
@ -605,7 +605,7 @@ For more general discussion and latest news, join #dappconnect on <a href="https
<nav id="TableOfContents">
<ul>
<li><a href="#wakuconnect-docs">WakuConnect Docs</a>
<li><a href="#waku-connect-docs">Waku Connect Docs</a>
<ul>
<li><a href="#bugs-questions--support">Bugs, Questions &amp; Support</a></li>
</ul>

4
docs/index.xml
View File

@ -15,7 +15,7 @@
<guid>https://docs.wakuconnect.dev/docs/introduction/</guid>
<description>Waku Connect Docs # Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at wakunetwork.</description>
Waku can be used for chat purposes and for many machine-to-machine use cases.</description>
</item>
<item>
@ -27,7 +27,7 @@ Waku can be used for chat purposes and for many machine-to-machine use cases. Yo
<description>Quick Start # In this section you will learn how to receive and send messages using Waku Relay.
A more in depth guide for Waku Relay can be found here.
Install # Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import {Waku} from &amp;#39;js-waku&amp;#39;; const waku = await Waku.create({bootstrap: {default: true}}); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import { Waku } from &amp;#34;js-waku&amp;#34;; const waku = await Waku.create({ bootstrap: { default: true } }); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
</item>
<item>

26
docs/introduction/index.html
View File

@ -5,23 +5,23 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Waku Connect Docs # Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at wakunetwork.">
Waku can be used for chat purposes and for many machine-to-machine use cases.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Introduction" />
<meta property="og:description" content="Waku Connect Docs # Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at wakunetwork." />
Waku can be used for chat purposes and for many machine-to-machine use cases." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/introduction/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-24T09:35:35+11:00" />
<meta property="article:modified_time" content="2022-01-27T11:18:41+11:00" />
<title>Introduction | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -437,7 +437,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -503,7 +503,7 @@ https://github.com/alex-shpak/hugo-book
<nav id="TableOfContents">
<ul>
<li><a href="#wakuconnect-docs">WakuConnect Docs</a>
<li><a href="#waku-connect-docs">Waku Connect Docs</a>
<ul>
<li><a href="#bugs-questions--support">Bugs, Questions &amp; Support</a></li>
</ul>
@ -520,9 +520,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="wakuconnect-docs">
<article class="markdown"><h1 id="waku-connect-docs">
Waku Connect Docs
<a class="anchor" href="#wakuconnect-docs">#</a>
<a class="anchor" href="#waku-connect-docs">#</a>
</h1>
<p>Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
<p>Waku is a decentralized, censorship-resistant, network and protocol family.
@ -546,8 +546,8 @@ Check out the <a href="/docs/examples/">example list</a> to see what usage each
<a class="anchor" href="#bugs-questions--support">#</a>
</h2>
<p>If you encounter any bug or would like to propose new features, feel free to <a href="https://github.com/status-im/js-waku/issues/new/">open an issue</a>.</p>
<p>To get help, join #dappconnect-support on <a href="https://discord.gg/j5pGbn7MHZ">Vac Discord</a> or <a href="https://t.me/dappconnectsupport">Telegram</a>.
For more general discussion and latest news, join #dappconnect on <a href="https://discord.gg/9DgykdmpZ6">Vac Discord</a> or <a href="https://t.me/dappconnect">Telegram</a>.</p>
<p>To get help, join #wakuconnect-support on <a href="https://discord.gg/j5pGbn7MHZ">Vac Discord</a> or <a href="https://t.me/wakuconnectsupport">Telegram</a>.
For more general discussion and latest news, join #wakuconnect on <a href="https://discord.gg/9DgykdmpZ6">Vac Discord</a> or <a href="https://t.me/wakuconnect">Telegram</a>.</p>
</article>
@ -557,9 +557,9 @@ For more general discussion and latest news, join #dappconnect on <a href="https
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/1337e950bd668115d22a09769ff97ab1e7258b2c" title='Last modified by Franck R | Jan 23, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 23, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>
@ -602,7 +602,7 @@ For more general discussion and latest news, join #dappconnect on <a href="https
<nav id="TableOfContents">
<ul>
<li><a href="#wakuconnect-docs">WakuConnect Docs</a>
<li><a href="#waku-connect-docs">Waku Connect Docs</a>
<ul>
<li><a href="#bugs-questions--support">Bugs, Questions &amp; Support</a></li>
</ul>

10
docs/presentations/index.html
View File

@ -20,14 +20,14 @@
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/presentations/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-12T01:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-12T14:41:29+11:00" />
<meta property="article:modified_time" content="2022-01-27T11:18:41+11:00" />
<title>Presentations &amp; Videos | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -443,7 +443,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -574,9 +574,9 @@ https://github.com/alex-shpak/hugo-book
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/d41a5cee6b827340d4ac5d6ce75b150dad8ef457" title='Last modified by Franck R | Jan 12, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 12, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>

30
docs/quick_start/index.html
View File

@ -6,24 +6,24 @@
<meta name="description" content="Quick Start # In this section you will learn how to receive and send messages using Waku Relay.
A more in depth guide for Waku Relay can be found here.
Install # Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import {Waku} from &#39;js-waku&#39;; const waku = await Waku.create({bootstrap: {default: true}}); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network.">
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import { Waku } from &#34;js-waku&#34;; const waku = await Waku.create({ bootstrap: { default: true } }); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Quick Start" />
<meta property="og:description" content="Quick Start # In this section you will learn how to receive and send messages using Waku Relay.
A more in depth guide for Waku Relay can be found here.
Install # Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import {Waku} from &#39;js-waku&#39;; const waku = await Waku.create({bootstrap: {default: true}}); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network." />
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import { Waku } from &#34;js-waku&#34;; const waku = await Waku.create({ bootstrap: { default: true } }); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/quick_start/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-24T11:54:31+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Quick Start | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -439,7 +439,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -547,7 +547,7 @@ yarn add js-waku
Start a waku node
<a class="anchor" href="#start-a-waku-node">#</a>
</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Waku</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> } });
</code></pre></div><h3 id="listen-for-messages">
@ -560,17 +560,23 @@ or look at the <a href="https://rfc.vac.dev/">RFCs</a> and use an existing <code
See <a href="/docs/guides/01_choose_content_topic/">How to Choose a Content Topic</a> for more details.</p>
<p>For example, if you were to use a new <code>contentTopic</code> such as <code>/my-cool-app/1/my-use-case/proto</code>,
here is how to listen to new messages received via <a href="https://rfc.vac.dev/spec/11/">Waku v2 Relay</a>:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>((<span style="color:#a6e22e">msg</span>) <span style="color:#f92672">=&gt;</span> {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Message received:&#34;</span>, <span style="color:#a6e22e">msg</span>.<span style="color:#a6e22e">payloadAsUtf8</span>)
}, [<span style="color:#e6db74">&#34;/my-cool-app/1/my-use-case/proto&#34;</span>]);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(
(<span style="color:#a6e22e">msg</span>) <span style="color:#f92672">=&gt;</span> {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Message received:&#34;</span>, <span style="color:#a6e22e">msg</span>.<span style="color:#a6e22e">payloadAsUtf8</span>);
},
[<span style="color:#e6db74">&#34;/my-cool-app/1/my-use-case/proto&#34;</span>]
);
</code></pre></div><h3 id="send-messages">
Send messages
<a class="anchor" href="#send-messages">#</a>
</h3>
<p>Messages are wrapped in a <code>WakuMessage</code> envelop.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">msg</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(<span style="color:#e6db74">&#34;Here is a message!&#34;</span>, <span style="color:#e6db74">&#34;/my-cool-app/1/my-use-case/proto&#34;</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">msg</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(
<span style="color:#e6db74">&#34;Here is a message!&#34;</span>,
<span style="color:#e6db74">&#34;/my-cool-app/1/my-use-case/proto&#34;</span>
);
<span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">msg</span>);
</code></pre></div><h3 id="building-an-app">
Building an app
@ -586,7 +592,7 @@ here is how to listen to new messages received via <a href="https://rfc.vac.dev/
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/23ba3e482981514df0e2954405c2ea33c751c4d3" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 24, 2022</span>
</a>

12
docs/use_cases/index.html
View File

@ -18,14 +18,14 @@ Legend:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/use_cases/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-05T00:00:00+00:00" />
<meta property="article:modified_time" content="2022-01-12T14:41:29+11:00" />
<meta property="article:modified_time" content="2022-01-27T11:18:41+11:00" />
<title>Use Cases | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -441,7 +441,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -554,7 +554,7 @@ feel free to open a <a href="https://github.com/vacp2p/docs.wakuconnect.dev">PR<
</table>
<p>Waku can be used as the communication layer to a private, decentralized, censorship-resistant messenger.</p>
<ul>
<li>WakuConnect Chat SDK: <a href="https://github.com/status-im/dappconnect-chat-sdk">repo</a></li>
<li>Waku Connect Chat SDK: <a href="https://github.com/status-im/wakuconnect-chat-sdk">repo</a></li>
</ul>
</div>
@ -782,9 +782,9 @@ Other form of social media: news feed, blogposts, audio or video sharing, can al
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/d41a5cee6b827340d4ac5d6ce75b150dad8ef457" title='Last modified by Franck R | Jan 12, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 12, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>

10
docs/waku_protocols/index.html
View File

@ -12,14 +12,14 @@
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/waku_protocols/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-12T14:41:29+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Implemented Waku Protocols | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -435,7 +435,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -623,9 +623,9 @@ https://github.com/alex-shpak/hugo-book
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/d41a5cee6b827340d4ac5d6ce75b150dad8ef457" title='Last modified by Franck R | Jan 12, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 12, 2022</span>
<span>Jan 24, 2022</span>
</a>
</div>

1
en.search-data.min.a17f15b6606b2f5bbc75a90c42a71729974161701128982784c7bd5f699638ad.json Normal file
View File

File diff suppressed because one or more lines are too long

1
en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js Normal file
View File

@ -0,0 +1 @@
'use strict';(function(){const g='/en.search-data.min.a17f15b6606b2f5bbc75a90c42a71729974161701128982784c7bd5f699638ad.json',h=Object.assign({cache:!0},{doc:{id:'id',field:['title','content'],store:['title','href','section']}}),a=document.querySelector('#book-search-input'),b=document.querySelector('#book-search-results');if(!a)return;a.addEventListener('focus',c),a.addEventListener('keyup',d),document.addEventListener('keypress',e);function e(b){if(b.target.value!==void 0)return;if(a===document.activeElement)return;const c=String.fromCharCode(b.charCode);if(!f(c))return;a.focus(),b.preventDefault()}function f(b){const c=a.getAttribute('data-hotkeys')||'';return c.indexOf(b)>=0}function c(){a.removeEventListener('focus',c),a.required=!0,fetch(g).then(a=>a.json()).then(a=>{window.bookSearchIndex=FlexSearch.create('balance',h),window.bookSearchIndex.add(a)}).then(()=>a.required=!1).then(d)}function d(){while(b.firstChild)b.removeChild(b.firstChild);if(!a.value)return;const c=window.bookSearchIndex.search(a.value,10);c.forEach(function(a){const c=i('<li><a href></a><small></small></li>'),d=c.querySelector('a'),e=c.querySelector('small');d.href=a.href,d.textContent=a.title,e.textContent=a.section,b.appendChild(c)})}function i(b){const a=document.createElement('div');return a.innerHTML=b,a.firstChild}})()

50
en/sitemap.xml
View File

@ -3,37 +3,37 @@
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/</loc>
<lastmod>2022-01-05T11:02:48+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/</loc>
<lastmod>2022-01-03T11:11:07+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/</loc>
<lastmod>2022-01-24T11:54:31+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/</loc>
<lastmod>2022-01-24T11:54:31+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/</loc>
<lastmod>2022-01-24T11:54:31+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/</loc>
<lastmod>2022-01-24T11:54:31+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/</loc>
<lastmod>2022-01-24T11:54:31+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/introduction/</loc>
<lastmod>2022-01-24T09:35:35+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/</loc>
<lastmod>2022-01-24T09:35:35+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
<xhtml:link
rel="alternate"
hreflang="es"
@ -51,7 +51,7 @@
/>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/</loc>
<lastmod>2022-01-24T09:35:35+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
<xhtml:link
rel="alternate"
hreflang="es"
@ -69,43 +69,43 @@
/>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/</loc>
<lastmod>2022-01-05T11:02:48+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/</loc>
<lastmod>2022-01-05T11:02:48+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</loc>
<lastmod>2022-01-06T13:19:14+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/</loc>
<lastmod>2022-01-06T13:19:14+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/</loc>
<lastmod>2022-01-05T11:02:48+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/quick_start/</loc>
<lastmod>2022-01-24T11:54:31+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/use_cases/</loc>
<lastmod>2022-01-12T14:41:29+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/presentations/</loc>
<lastmod>2022-01-12T14:41:29+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/</loc>
<lastmod>2022-01-12T14:41:29+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/examples/</loc>
<lastmod>2022-01-12T14:41:29+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/crypto_libraries/</loc>
<lastmod>2022-01-12T14:41:29+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/waku_protocols/</loc>
<lastmod>2022-01-12T14:41:29+11:00</lastmod>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/</loc>
<lastmod>2022-01-10T12:30:09+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/categories/</loc>
<xhtml:link

2
es/categories/index.html
View File

@ -137,7 +137,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

2
es/docs/index.html
View File

@ -137,7 +137,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

2
es/docs/introduccion/index.html
View File

@ -135,7 +135,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

2
es/index.html
View File

@ -138,7 +138,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

2
es/tags/index.html
View File

@ -137,7 +137,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

22
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Waku Connect Docs # Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at wakunetwork.">
Waku can be used for chat purposes and for many machine-to-machine use cases.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Introduction" />
<meta property="og:description" content="" />
@ -20,7 +20,7 @@ Waku can be used for chat purposes and for many machine-to-machine use cases. Yo
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/" title="Introdução">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/index.xml" title="Waku Connect Docs" />
<!--
Made with Book Theme
@ -441,7 +441,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
@ -507,7 +507,7 @@ https://github.com/alex-shpak/hugo-book
<nav id="TableOfContents">
<ul>
<li><a href="#wakuconnect-docs">WakuConnect Docs</a>
<li><a href="#waku-connect-docs">Waku Connect Docs</a>
<ul>
<li><a href="#bugs-questions--support">Bugs, Questions &amp; Support</a></li>
</ul>
@ -524,9 +524,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="wakuconnect-docs">
<article class="markdown"><h1 id="waku-connect-docs">
Waku Connect Docs
<a class="anchor" href="#wakuconnect-docs">#</a>
<a class="anchor" href="#waku-connect-docs">#</a>
</h1>
<p>Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
<p>Waku is a decentralized, censorship-resistant, network and protocol family.
@ -550,8 +550,8 @@ Check out the <a href="/docs/examples/">example list</a> to see what usage each
<a class="anchor" href="#bugs-questions--support">#</a>
</h2>
<p>If you encounter any bug or would like to propose new features, feel free to <a href="https://github.com/status-im/js-waku/issues/new/">open an issue</a>.</p>
<p>To get help, join #dappconnect-support on <a href="https://discord.gg/j5pGbn7MHZ">Vac Discord</a> or <a href="https://t.me/dappconnectsupport">Telegram</a>.
For more general discussion and latest news, join #dappconnect on <a href="https://discord.gg/9DgykdmpZ6">Vac Discord</a> or <a href="https://t.me/dappconnect">Telegram</a>.</p>
<p>To get help, join #wakuconnect-support on <a href="https://discord.gg/j5pGbn7MHZ">Vac Discord</a> or <a href="https://t.me/wakuconnectsupport">Telegram</a>.
For more general discussion and latest news, join #wakuconnect on <a href="https://discord.gg/9DgykdmpZ6">Vac Discord</a> or <a href="https://t.me/wakuconnect">Telegram</a>.</p>
</article>
@ -561,9 +561,9 @@ For more general discussion and latest news, join #dappconnect on <a href="https
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/1337e950bd668115d22a09769ff97ab1e7258b2c" title='Last modified by Franck R | Jan 23, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 23, 2022</span>
<span>Jan 27, 2022</span>
</a>
</div>
@ -606,7 +606,7 @@ For more general discussion and latest news, join #dappconnect on <a href="https
<nav id="TableOfContents">
<ul>
<li><a href="#wakuconnect-docs">WakuConnect Docs</a>
<li><a href="#waku-connect-docs">Waku Connect Docs</a>
<ul>
<li><a href="#bugs-questions--support">Bugs, Questions &amp; Support</a></li>
</ul>

8
index.xml
View File

@ -104,7 +104,7 @@ Waku Relay is a gossip protocol. As a user, it means that your peers forward you
<guid>https://docs.wakuconnect.dev/docs/introduction/</guid>
<description>Waku Connect Docs # Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at wakunetwork.</description>
Waku can be used for chat purposes and for many machine-to-machine use cases.</description>
</item>
<item>
@ -136,7 +136,7 @@ rm -f App.tsx App.css App.test.tsx Top bar # Use TopBar component to display wa
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</guid>
<description>Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&amp;rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
import styled from &amp;#39;styled-components&amp;#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button # Create a button that will display the PollCreation component on click.</description>
import styled from &amp;#34;styled-components&amp;#34;; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } `; Button # Create a button that will display the PollCreation component on click.</description>
</item>
<item>
@ -159,7 +159,7 @@ useWakuPolling takes:
<description>Poll List Component # To display existing polls, the PollList component is provided.
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
components/Poll.tsx:
import {useState} from &amp;#39;react&amp;#39; import {useConfig} from &amp;#39;@usedapp/core&amp;#39; import {PollCreation, PollList} from &amp;#39;@waku/poll-sdk-react-components&amp;#39; import {JsonRpcSigner, Web3Provider} from &amp;#39;@ethersproject/providers&amp;#39; import {useWakuPolling} from &amp;#39;@waku/poll-sdk-react-hooks&amp;#39; import {CreateButton} from &amp;#39;@waku/vote-poll-sdk-react-components&amp;#39; import {Theme} from &amp;#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&amp;#39; import {ChainId} from &amp;#34;@usedapp/core/src/constants&amp;#34;; type PollProps = { appName: string library: Web3Provider | undefined signer: JsonRpcSigner | undefined chainId: ChainId | undefined account: string | null | undefined theme: Theme tokenAddress: string } export function Poll({appName, library, signer, chainId, account, theme, tokenAddress}: PollProps) { const config = useConfig() const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?</description>
import { useState } from &amp;#34;react&amp;#34;; import { useConfig } from &amp;#34;@usedapp/core&amp;#34;; import { PollCreation, PollList } from &amp;#34;@waku/poll-sdk-react-components&amp;#34;; import { JsonRpcSigner, Web3Provider } from &amp;#34;@ethersproject/providers&amp;#34;; import { useWakuPolling } from &amp;#34;@waku/poll-sdk-react-hooks&amp;#34;; import { CreateButton } from &amp;#34;@waku/vote-poll-sdk-react-components&amp;#34;; import { Theme } from &amp;#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&amp;#34;; import { ChainId } from &amp;#34;@usedapp/core/src/constants&amp;#34;; type PollProps = { appName: string; library: Web3Provider | undefined; signer: JsonRpcSigner | undefined; chainId: ChainId | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; }; export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress, }: PollProps) { const config = useConfig(); const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, config?</description>
</item>
<item>
@ -171,7 +171,7 @@ import {useState} from &amp;#39;react&amp;#39; import {useConfig} from &amp;#39;
<description>Quick Start # In this section you will learn how to receive and send messages using Waku Relay.
A more in depth guide for Waku Relay can be found here.
Install # Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import {Waku} from &amp;#39;js-waku&amp;#39;; const waku = await Waku.create({bootstrap: {default: true}}); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import { Waku } from &amp;#34;js-waku&amp;#34;; const waku = await Waku.create({ bootstrap: { default: true } }); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
</item>
<item>

2
pt/categories/index.html
View File

@ -137,7 +137,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

2
pt/docs/index.html
View File

@ -137,7 +137,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

2
pt/docs/introduccion/index.html
View File

@ -135,7 +135,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

2
pt/index.html
View File

@ -138,7 +138,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

2
pt/tags/index.html
View File

@ -137,7 +137,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>

2
sitemap.xml
View File

@ -4,7 +4,7 @@
<sitemap>
<loc>https://docs.wakuconnect.dev/en/sitemap.xml</loc>
<lastmod>2022-01-24T11:54:31+11:00</lastmod>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</sitemap>

4
tags/index.html
View File

@ -17,7 +17,7 @@
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/tags/" title="Tags">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js" integrity="sha256-SxQHg0sARyE2qQh39B90UjYzkwnQG5l60jPWQ2085M4=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS&#43;hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/tags/index.xml" title="Waku Connect Docs" />
<!--
Made with Book Theme
@ -438,7 +438,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li>
<a href="https://status-im.github.io/js-waku/docs/" target="_blank" rel="noopener">
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>