mirror of
https://github.com/acid-info/docs.wakuconnect.dev.git
synced 2025-02-20 13:48:10 +00:00
Update documentation
This commit is contained in:
parent
b6880d0741
commit
74de2b8d3c
6
404.html
6
404.html
@ -11,12 +11,12 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/404.html" />
|
||||
|
||||
<title>404 Page not found | WakuConnect Docs</title>
|
||||
<title>404 Page not found | 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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -41,7 +41,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
<h1>404</h1>
|
||||
<h2>Page Not Found</h2>
|
||||
<h3>
|
||||
<a href="/">WakuConnect Docs</a>
|
||||
<a href="/">Waku Connect Docs</a>
|
||||
</h3>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/categories/" />
|
||||
|
||||
<title>Categories | WakuConnect Docs</title>
|
||||
<title>Categories | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/categories/" title="Categories">
|
||||
<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>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/categories/index.xml" title="WakuConnect Docs" />
|
||||
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS+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
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -34,7 +34,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Categories on WakuConnect Docs</title>
|
||||
<title>Categories on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/categories/</link>
|
||||
<description>Recent content in Categories on WakuConnect Docs</description>
|
||||
<description>Recent content in Categories on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
</channel>
|
||||
|
||||
@ -14,14 +14,14 @@ Symmetric encryption # Uses SubtleCrypto Web API (browser) or NodeJS' 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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -37,7 +37,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -43,7 +43,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -41,7 +41,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
@ -533,7 +533,7 @@ both when receiving live messages (Relay) or retrieving historical messages (Sto
|
||||
<li><code>dapp-name</code>: The name of your dApp, it must be unique to avoid conflict with other dApps.</li>
|
||||
<li><code>version</code>: We usually start at <code>1</code>, useful when introducing breaking changes in your messages.</li>
|
||||
<li><code>content-topic-name</code>: The actual content topic name to use for filtering.
|
||||
If your dApp uses WakuConnect for several features,
|
||||
If your dApp uses Waku Connect for several features,
|
||||
you should use a content topic per feature.</li>
|
||||
<li><code>encoding</code>: The encoding format of the message, Protobuf is most often used: <code>proto</code>.</li>
|
||||
</ul>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -37,7 +37,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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">'js-waku'</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">"js-waku"</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>}});
|
||||
<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">'js-waku'</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">"js-waku"</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">'/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm'</span>,
|
||||
<span style="color:#e6db74">'/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ'</span>
|
||||
]
|
||||
<span style="color:#e6db74">"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"</span>,
|
||||
<span style="color:#e6db74">"/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ"</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’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">'/relay-guide/1/chat/proto'</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">"/relay-guide/1/chat/proto"</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’s content topic:</p
|
||||
Let’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">'js-waku'</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">"js-waku"</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">'Here is a message'</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">"Here is a message"</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">'protons'</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">"protons"</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">'Here is a message'</span>
|
||||
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Here is a message"</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">'/relay-guide/1/chat/proto'</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">"/relay-guide/1/chat/proto"</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">'js-waku'</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'protons'</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">"js-waku"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">"protons"</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">'/relay-guide/1/chat/proto'</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">"/relay-guide/1/chat/proto"</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">'Here is a message'</span>
|
||||
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"Here is a message"</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>
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -35,7 +35,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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">'js-waku'</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">"js-waku"</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>}});
|
||||
<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">'js-waku'</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">"js-waku"</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">'/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm'</span>,
|
||||
<span style="color:#e6db74">'/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ'</span>
|
||||
]
|
||||
<span style="color:#e6db74">"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"</span>,
|
||||
<span style="color:#e6db74">"/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ"</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">'protons'</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">"protons"</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">'/store-guide/1/news/proto'</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">"/store-guide/1/news/proto"</span>;
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">callback</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">retrievedMessages</span>) => {
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">articles</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">retrievedMessages</span>
|
||||
@ -656,12 +656,10 @@ 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>) => {
|
||||
<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">'Failed to retrieve messages from store'</span>, <span style="color:#a6e22e">e</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>) => {
|
||||
<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">"Failed to retrieve messages from store"</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.
|
||||
It will throw an error if no store node is available.</p>
|
||||
@ -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>) => {
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Failed to retrieve messages from store'</span>, <span style="color:#a6e22e">e</span>);
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">"Failed to retrieve messages from store"</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>
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -37,7 +37,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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">'js-waku'</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">"js-waku"</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">'js-waku'</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">"js-waku"</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">'js-waku'</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">"js-waku"</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">'js-waku'</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">"js-waku"</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">'js-waku'</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">"js-waku"</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">'js-waku'</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">"js-waku"</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">'js-waku'</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">"js-waku"</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">'js-waku'</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">"js-waku"</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>) => {
|
||||
<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 style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(
|
||||
(<span style="color:#a6e22e">message</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 payload is decrypted
|
||||
</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>
|
||||
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -41,7 +41,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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">'js-waku'</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">"js-waku"</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">'js-waku'</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">"js-waku"</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">'js-waku/lib/utils'</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">keccak256</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'ethers/lib/utils'</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">"js-waku/lib/utils"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">keccak256</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"ethers/lib/utils"</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">'utf-8'</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">"utf-8"</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’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">'js-waku'</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">"js-waku"</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,14 +599,14 @@ 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’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">'js-waku/lib/utils'</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">"js-waku/lib/utils"</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>;
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">isSignedByAlice</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">sigPubKey</span> <span style="color:#f92672">&&</span> <span style="color:#a6e22e">equalByteArrays</span>(<span style="color:#a6e22e">sigPubKey</span>, <span style="color:#a6e22e">alicePublicKey</span>);
|
||||
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">isSignedByAlice</span>) {
|
||||
<span style="color:#75715e">// Message is not signed by Alice
|
||||
<span style="color:#75715e">// Message is not signed by Alice
|
||||
</span><span style="color:#75715e"></span>}
|
||||
</code></pre></div></article>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -35,7 +35,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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">'js-waku'</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">"js-waku"</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>}});
|
||||
<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">'js-waku'</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">"js-waku"</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">'/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm'</span>,
|
||||
<span style="color:#e6db74">'/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ'</span>
|
||||
]
|
||||
<span style="color:#e6db74">"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"</span>,
|
||||
<span style="color:#e6db74">"/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ"</span>,
|
||||
],
|
||||
});
|
||||
</code></pre></div><h1 id="wait-to-be-connected">
|
||||
Wait to be connected
|
||||
@ -581,13 +581,16 @@ 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’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">'js-waku'</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">"js-waku"</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">'Here is a message'</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">"Here is a message"</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>) {
|
||||
<span style="color:#75715e">// Message was not sent
|
||||
<span style="color:#75715e">// Message was not sent
|
||||
</span><span style="color:#75715e"></span>}
|
||||
</code></pre></div></article>
|
||||
|
||||
@ -598,7 +601,7 @@ The peer is selected among the dApp’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>
|
||||
|
||||
@ -3,23 +3,23 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
|
||||
<meta name="description" content="Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
|
||||
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /min-react-js-chat/1/chat/proto.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Receive and Send Messages Using Waku Relay With ReactJS" />
|
||||
<meta property="og:description" content="Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
|
||||
<meta property="og:description" content="Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
|
||||
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /min-react-js-chat/1/chat/proto." />
|
||||
<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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -35,7 +35,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
@ -535,7 +535,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
Receive and Send Messages Using Waku Relay With ReactJS
|
||||
<a class="anchor" href="#receive-and-send-messages-using-waku-relay-with-reactjs">#</a>
|
||||
</h1>
|
||||
<p>It is easy to use WakuConnect with ReactJS.
|
||||
<p>It is easy to use Waku Connect with ReactJS.
|
||||
In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.</p>
|
||||
<p>Before starting, you need to choose a <em>Content Topic</em> for your dApp.
|
||||
Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a content topic guide</a> to learn more about content topics.
|
||||
@ -590,65 +590,65 @@ 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">'webpack'</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">"webpack"</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>) => {
|
||||
<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:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">'buffer'</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">'crypto-browserify'</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">'stream-browserify'</span>),
|
||||
});
|
||||
<span style="color:#a6e22e">dev</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">config</span>) => {
|
||||
<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:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">"buffer"</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">"crypto-browserify"</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">"stream-browserify"</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">'process.env.ENV'</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">'dev'</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">'process/browser.js'</span>,
|
||||
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">'buffer'</span>, <span style="color:#e6db74">'Buffer'</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">"process.env.ENV"</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">"dev"</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">"process/browser.js"</span>,
|
||||
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">"buffer"</span>, <span style="color:#e6db74">"Buffer"</span>],
|
||||
})
|
||||
);
|
||||
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span> <span style="color:#f92672">=</span> [];
|
||||
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">/Failed to parse source map/</span>);
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span> <span style="color:#f92672">=</span> [];
|
||||
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">/Failed to parse source map/</span>);
|
||||
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</span>;
|
||||
},
|
||||
<span style="color:#a6e22e">prod</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">config</span>) => {
|
||||
<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:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">'buffer'</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">'crypto-browserify'</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">'stream-browserify'</span>),
|
||||
});
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</span>;
|
||||
},
|
||||
<span style="color:#a6e22e">prod</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">config</span>) => {
|
||||
<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:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">"buffer"</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">"crypto-browserify"</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">"stream-browserify"</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">'process.env.ENV'</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">'prod'</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">'process/browser.js'</span>,
|
||||
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">'buffer'</span>, <span style="color:#e6db74">'Buffer'</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">"process.env.ENV"</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">"prod"</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">"process/browser.js"</span>,
|
||||
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">"buffer"</span>, <span style="color:#e6db74">"Buffer"</span>],
|
||||
})
|
||||
);
|
||||
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span> <span style="color:#f92672">=</span> [];
|
||||
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">/Failed to parse source map/</span>);
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span> <span style="color:#f92672">=</span> [];
|
||||
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">/Failed to parse source map/</span>);
|
||||
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</span>;
|
||||
},
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</span>;
|
||||
},
|
||||
};
|
||||
</code></pre></div><p>Use <code>cra-webpack-rewired</code> in the <code>package.json</code>, instead of <code>react-scripts</code>:</p>
|
||||
<pre tabindex="0"><code> "scripts": {
|
||||
@ -671,38 +671,38 @@ 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">'js-waku'</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">'react'</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">"js-waku"</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">"react"</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">'None'</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">"None"</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>(() => {
|
||||
<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">'None'</span>) <span style="color:#66d9ef">return</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>(() => {
|
||||
<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">"None"</span>) <span style="color:#66d9ef">return</span>;
|
||||
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">'Starting'</span>);
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Starting"</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>) => {
|
||||
<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">'Started'</span>);
|
||||
});
|
||||
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</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>) => {
|
||||
<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">"Started"</span>);
|
||||
});
|
||||
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">'App'</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">'App-header'</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span><span style="color:#a6e22e">Waku</span> <span style="color:#a6e22e">node</span><span style="color:#960050;background-color:#1e0010">'</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"><</span><span style="color:#960050;background-color:#1e0010">/p></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/header></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/div></span>
|
||||
);
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App"</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App-header"</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span><span style="color:#a6e22e">Waku</span> <span style="color:#a6e22e">node</span><span style="color:#960050;background-color:#1e0010">'</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"><</span><span style="color:#960050;background-color:#1e0010">/p></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/header></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/div></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">App</span>;
|
||||
@ -714,18 +714,18 @@ Go to <code>App.js</code> and modify the <code>App</code> function:</p>
|
||||
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>(() => {
|
||||
<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">'None'</span>) <span style="color:#66d9ef">return</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:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">"None"</span>) <span style="color:#66d9ef">return</span>;
|
||||
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">'Starting'</span>);
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Starting"</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>) => {
|
||||
<span style="color:#a6e22e">setWaku</span>(<span style="color:#a6e22e">waku</span>);
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">'Connecting'</span>);
|
||||
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>().<span style="color:#a6e22e">then</span>(() => {
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">'Ready'</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>) => {
|
||||
<span style="color:#a6e22e">setWaku</span>(<span style="color:#a6e22e">waku</span>);
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Connecting"</span>);
|
||||
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>().<span style="color:#a6e22e">then</span>(() => {
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Ready"</span>);
|
||||
});
|
||||
});
|
||||
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
|
||||
</code></pre></div><h1 id="define-message-format">
|
||||
Define Message Format
|
||||
@ -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">'protons'</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">"protons"</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">'js-waku'</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">"js-waku"</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,20 +770,20 @@ 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">'None'</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">"None"</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>);
|
||||
|
||||
|
||||
<span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() => {
|
||||
<span style="color:#75715e">// ... creates Waku
|
||||
</span><span style="color:#75715e"></span> }, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">sendMessageOnClick</span> <span style="color:#f92672">=</span> () => {
|
||||
<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">'Ready'</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">"Ready"</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>(() =>
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Message sent'</span>)
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">"Message sent"</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"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App"</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App-header"</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/p></span>
|
||||
<span style="color:#f92672"><</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">'Ready'</span>}<span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</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">"Ready"</span>}<span style="color:#f92672">></span>
|
||||
<span style="color:#a6e22e">Send</span> <span style="color:#a6e22e">Message</span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/button></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/header></span>
|
||||
@ -876,7 +876,7 @@ For the sake of completeness, let’s display received messages on the page.
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App"</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App-header"</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/p></span>
|
||||
<span style="color:#f92672"><</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">'Ready'</span>}<span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</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">"Ready"</span>}<span style="color:#f92672">></span>
|
||||
<span style="color:#a6e22e">Send</span> <span style="color:#a6e22e">Message</span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/button></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">></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>
|
||||
|
||||
|
||||
@ -3,25 +3,25 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Retrieve Messages Using Waku Store With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
|
||||
<meta name="description" content="Retrieve Messages Using Waku Store With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
|
||||
DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
|
||||
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Retrieve Messages Using Waku Store With ReactJS" />
|
||||
<meta property="og:description" content="Retrieve Messages Using Waku Store With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
|
||||
<meta property="og:description" content="Retrieve Messages Using Waku Store With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
|
||||
DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
|
||||
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received." />
|
||||
<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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -37,7 +37,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
@ -543,7 +543,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
Retrieve Messages Using Waku Store With ReactJS
|
||||
<a class="anchor" href="#retrieve-messages-using-waku-store-with-reactjs">#</a>
|
||||
</h1>
|
||||
<p>It is easy to use WakuConnect with ReactJS.
|
||||
<p>It is easy to use Waku Connect with ReactJS.
|
||||
In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.</p>
|
||||
<p>DApps running on a phone or in a browser are often offline:
|
||||
The browser could be closed or mobile app in the background.</p>
|
||||
@ -610,65 +610,65 @@ 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">'webpack'</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">"webpack"</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>) => {
|
||||
<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:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">'buffer'</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">'crypto-browserify'</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">'stream-browserify'</span>),
|
||||
});
|
||||
<span style="color:#a6e22e">dev</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">config</span>) => {
|
||||
<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:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">"buffer"</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">"crypto-browserify"</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">"stream-browserify"</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">'process.env.ENV'</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">'dev'</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">'process/browser.js'</span>,
|
||||
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">'buffer'</span>, <span style="color:#e6db74">'Buffer'</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">"process.env.ENV"</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">"dev"</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">"process/browser.js"</span>,
|
||||
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">"buffer"</span>, <span style="color:#e6db74">"Buffer"</span>],
|
||||
})
|
||||
);
|
||||
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span> <span style="color:#f92672">=</span> [];
|
||||
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">/Failed to parse source map/</span>);
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span> <span style="color:#f92672">=</span> [];
|
||||
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">/Failed to parse source map/</span>);
|
||||
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</span>;
|
||||
},
|
||||
<span style="color:#a6e22e">prod</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">config</span>) => {
|
||||
<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:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">'buffer'</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">'crypto-browserify'</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">'stream-browserify'</span>),
|
||||
});
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</span>;
|
||||
},
|
||||
<span style="color:#a6e22e">prod</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">config</span>) => {
|
||||
<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:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">"buffer"</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">"crypto-browserify"</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">"stream-browserify"</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">'process.env.ENV'</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">'prod'</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">'process/browser.js'</span>,
|
||||
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">'buffer'</span>, <span style="color:#e6db74">'Buffer'</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">"process.env.ENV"</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#e6db74">"prod"</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">"process/browser.js"</span>,
|
||||
<span style="color:#a6e22e">Buffer</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">"buffer"</span>, <span style="color:#e6db74">"Buffer"</span>],
|
||||
})
|
||||
);
|
||||
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span> <span style="color:#f92672">=</span> [];
|
||||
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">/Failed to parse source map/</span>);
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span> <span style="color:#f92672">=</span> [];
|
||||
<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">ignoreWarnings</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">/Failed to parse source map/</span>);
|
||||
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</span>;
|
||||
},
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</span>;
|
||||
},
|
||||
};
|
||||
</code></pre></div><p>Use <code>cra-webpack-rewired</code> in the <code>package.json</code>, instead of <code>react-scripts</code>:</p>
|
||||
<pre tabindex="0"><code> "scripts": {
|
||||
@ -700,36 +700,36 @@ 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">'js-waku'</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">'react'</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">"js-waku"</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">"react"</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">'None'</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">"None"</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>(() => {
|
||||
<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">'None'</span>) <span style="color:#66d9ef">return</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>(() => {
|
||||
<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">"None"</span>) <span style="color:#66d9ef">return</span>;
|
||||
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">'Starting'</span>);
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Starting"</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>) => {
|
||||
<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">'Connecting'</span>);
|
||||
});
|
||||
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</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>) => {
|
||||
<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">"Connecting"</span>);
|
||||
});
|
||||
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">'App'</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">'App-header'</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/p></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/header></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/div></span>
|
||||
);
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App"</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App-header"</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">p</span><span style="color:#f92672">></span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/p></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/header></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/div></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">App</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>(() => {
|
||||
<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">'Connected'</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">"Connected"</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>(() => {
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">'Connected'</span>);
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Connected"</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">'protons'</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">"protons"</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">'utf-8'</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">"utf-8"</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,36 +831,35 @@ 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">=></span> {
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">li</span>>
|
||||
({<span style="color:#a6e22e">formatDate</span>(<span style="color:#a6e22e">timestamp</span>)}) {<span style="color:#a6e22e">nick</span>}<span style="color:#f92672">:</span> {<span style="color:#a6e22e">text</span>}
|
||||
</<span style="color:#f92672">li</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">=></span> {
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">li</span>>
|
||||
({<span style="color:#a6e22e">formatDate</span>(<span style="color:#a6e22e">timestamp</span>)}) {<span style="color:#a6e22e">nick</span>}<span style="color:#f92672">:</span> {<span style="color:#a6e22e">text</span>}
|
||||
</<span style="color:#f92672">li</span>>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
<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">'short'</span>,
|
||||
<span style="color:#a6e22e">day</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span>,
|
||||
<span style="color:#a6e22e">hour</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span>,
|
||||
<span style="color:#a6e22e">minute</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'2-digit'</span>,
|
||||
<span style="color:#a6e22e">second</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'2-digit'</span>,
|
||||
<span style="color:#a6e22e">hour12</span>: <span style="color:#66d9ef">false</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">"short"</span>,
|
||||
<span style="color:#a6e22e">day</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"numeric"</span>,
|
||||
<span style="color:#a6e22e">hour</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"numeric"</span>,
|
||||
<span style="color:#a6e22e">minute</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"2-digit"</span>,
|
||||
<span style="color:#a6e22e">second</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"2-digit"</span>,
|
||||
<span style="color:#a6e22e">hour12</span>: <span style="color:#66d9ef">false</span>,
|
||||
});
|
||||
}
|
||||
</code></pre></div><p>Use <code>Messages</code> in 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-tsx" data-lang="tsx"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
|
||||
<span style="color:#75715e">// [..]
|
||||
</span><span style="color:#75715e"></span>
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">'App'</span>>
|
||||
<<span style="color:#f92672">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">'App-header'</span>>
|
||||
<<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App"</span>>
|
||||
<<span style="color:#f92672">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App-header"</span>>
|
||||
<<span style="color:#f92672">h2</span>>{<span style="color:#a6e22e">wakuStatus</span>}</<span style="color:#f92672">h2</span>>
|
||||
<<span style="color:#f92672">h3</span>><span style="color:#a6e22e">Messages</span></<span style="color:#f92672">h3</span>>
|
||||
<<span style="color:#f92672">ul</span>>
|
||||
@ -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">'js-waku'</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">'react'</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'protons'</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">"js-waku"</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">"react"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">"protons"</span>;
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ContentTopic</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'/toy-chat/2/huilong/proto'</span>;
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ContentTopic</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">"/toy-chat/2/huilong/proto"</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 {
|
||||
@ -887,107 +885,106 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
|
||||
</span><span style="color:#e6db74">`</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">'None'</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:#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">"None"</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>(() => {
|
||||
<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">'None'</span>) <span style="color:#66d9ef">return</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>(() => {
|
||||
<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">"None"</span>) <span style="color:#66d9ef">return</span>;
|
||||
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">'Starting'</span>);
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Starting"</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>) => {
|
||||
<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">'Connecting'</span>);
|
||||
});
|
||||
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</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>) => {
|
||||
<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">"Connecting"</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>(() => {
|
||||
<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:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</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:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">"Connected"</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">'Connected'</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>(() => {
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Connected"</span>);
|
||||
});
|
||||
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
|
||||
|
||||
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>().<span style="color:#a6e22e">then</span>(() => {
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">'Connected'</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>(() => {
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">"Connected"</span>) <span style="color:#66d9ef">return</span>;
|
||||
|
||||
<span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() => {
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">'Connected'</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>) => {
|
||||
<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);
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">processMessages</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">retrievedMessages</span>) => {
|
||||
<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);
|
||||
<span style="color:#a6e22e">setMessages</span>((<span style="color:#a6e22e">currentMessages</span>) => {
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">currentMessages</span>.<span style="color:#a6e22e">concat</span>(<span style="color:#a6e22e">messages</span>.<span style="color:#a6e22e">reverse</span>());
|
||||
});
|
||||
};
|
||||
|
||||
<span style="color:#a6e22e">setMessages</span>((<span style="color:#a6e22e">currentMessages</span>) => {
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">currentMessages</span>.<span style="color:#a6e22e">concat</span>(<span style="color:#a6e22e">messages</span>.<span style="color:#a6e22e">reverse</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:#66d9ef">catch</span>((<span style="color:#a6e22e">e</span>) => {
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">"Failed to retrieve messages"</span>, <span style="color:#a6e22e">e</span>);
|
||||
});
|
||||
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</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:#66d9ef">catch</span>((<span style="color:#a6e22e">e</span>) => {
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Failed to retrieve messages'</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"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">'App'</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">'App-header'</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">h2</span><span style="color:#f92672">></span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/h2></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">h3</span><span style="color:#f92672">></span><span style="color:#a6e22e">Messages</span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/h3></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">Messages</span> <span style="color:#a6e22e">messages</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">messages</span>}<span style="color:#f92672">/></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/ul></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/header></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/div></span>
|
||||
);
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App"</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">"App-header"</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">h2</span><span style="color:#f92672">></span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/h2></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">h3</span><span style="color:#f92672">></span><span style="color:#a6e22e">Messages</span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/h3></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">Messages</span> <span style="color:#a6e22e">messages</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">messages</span>} <span style="color:#f92672">/></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/ul></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/header></span>
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/div></span>
|
||||
);
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">App</span>;
|
||||
|
||||
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">decodeMessage</span>(<span style="color:#a6e22e">wakuMessage</span>) {
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">payload</span>) <span style="color:#66d9ef">return</span>;
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">payload</span>) <span style="color:#66d9ef">return</span>;
|
||||
|
||||
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">timestamp</span>, <span style="color:#a6e22e">nick</span>, <span style="color:#a6e22e">text</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">proto</span>.<span style="color:#a6e22e">ChatMessage</span>.<span style="color:#a6e22e">decode</span>(
|
||||
<span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">payload</span>
|
||||
);
|
||||
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">timestamp</span>, <span style="color:#a6e22e">nick</span>, <span style="color:#a6e22e">text</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">proto</span>.<span style="color:#a6e22e">ChatMessage</span>.<span style="color:#a6e22e">decode</span>(
|
||||
<span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">payload</span>
|
||||
);
|
||||
|
||||
<span style="color:#75715e">// All fields in protobuf are optional so be sure to check
|
||||
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">timestamp</span> <span style="color:#f92672">||</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">text</span> <span style="color:#f92672">||</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">nick</span>) <span style="color:#66d9ef">return</span>;
|
||||
<span style="color:#75715e">// All fields in protobuf are optional so be sure to check
|
||||
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">timestamp</span> <span style="color:#f92672">||</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">text</span> <span style="color:#f92672">||</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">nick</span>) <span style="color:#66d9ef">return</span>;
|
||||
|
||||
<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">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">'utf-8'</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">"utf-8"</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>};
|
||||
<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> };
|
||||
}
|
||||
|
||||
<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:#66d9ef">return</span> (
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">li</span><span style="color:#f92672">></span>
|
||||
({<span style="color:#a6e22e">formatDate</span>(<span style="color:#a6e22e">timestamp</span>)}) {<span style="color:#a6e22e">nick</span>}<span style="color:#f92672">:</span> {<span style="color:#a6e22e">text</span>}
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/li></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:#66d9ef">return</span> (
|
||||
<span style="color:#f92672"><</span><span style="color:#a6e22e">li</span><span style="color:#f92672">></span>
|
||||
({<span style="color:#a6e22e">formatDate</span>(<span style="color:#a6e22e">timestamp</span>)}) {<span style="color:#a6e22e">nick</span>}<span style="color:#f92672">:</span> {<span style="color:#a6e22e">text</span>}
|
||||
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/li></span>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
<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">'short'</span>,
|
||||
<span style="color:#a6e22e">day</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span>,
|
||||
<span style="color:#a6e22e">hour</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'numeric'</span>,
|
||||
<span style="color:#a6e22e">minute</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'2-digit'</span>,
|
||||
<span style="color:#a6e22e">second</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'2-digit'</span>,
|
||||
<span style="color:#a6e22e">hour12</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</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">"short"</span>,
|
||||
<span style="color:#a6e22e">day</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"numeric"</span>,
|
||||
<span style="color:#a6e22e">hour</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"numeric"</span>,
|
||||
<span style="color:#a6e22e">minute</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"2-digit"</span>,
|
||||
<span style="color:#a6e22e">second</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"2-digit"</span>,
|
||||
<span style="color:#a6e22e">hour12</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</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.
|
||||
@ -1010,11 +1007,10 @@ 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">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">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() },
|
||||
});
|
||||
</code></pre></div><h2 id="end-result">
|
||||
End result
|
||||
<a class="anchor" href="#end-result">#</a>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/" />
|
||||
|
||||
<title>Guides | WakuConnect Docs</title>
|
||||
<title>Guides | 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>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/index.xml" title="WakuConnect Docs" />
|
||||
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS+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
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -32,7 +32,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>WakuConnect Docs</title>
|
||||
<title>Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/</link>
|
||||
<description>Recent content on WakuConnect Docs</description>
|
||||
<description>Recent content on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/docs/guides/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
@ -80,7 +80,7 @@ The Waku Relay protocol sends messages to connected peers but does not provide a
|
||||
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/</guid>
|
||||
<description>Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
|
||||
<description>Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
|
||||
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /min-react-js-chat/1/chat/proto.</description>
|
||||
</item>
|
||||
|
||||
@ -90,7 +90,7 @@ Before starting, you need to choose a Content Topic for your dApp. Check out the
|
||||
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/</guid>
|
||||
<description>Retrieve Messages Using Waku Store With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
|
||||
<description>Retrieve Messages Using Waku Store With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
|
||||
DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
|
||||
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received.</description>
|
||||
</item>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="WakuConnect Vote & Poll SDK # The WakuConnect Vote & Poll SDK enables developers to add Waku powered polling and voting features to their dApp.
|
||||
<meta name="description" content="Waku Connect Vote & Poll SDK # The Waku Connect Vote & Poll SDK enables developers to add Waku powered polling and voting features to their dApp.
|
||||
The repository can be found on GitHub: https://github.com/status-im/wakuconnect-vote-poll-sdk.
|
||||
The SDK can be used in two different ways: to vote (commitment to the blockchain) or poll (no interaction with the blockchain).
|
||||
For both functionalities, only ERC-20 token holders can create or answer polls/votes. The developer using the SDK can configure which ERC-20 token contract is used.">
|
||||
@ -13,13 +13,13 @@ For both functionalities, only ERC-20 token holders can create or answer polls/v
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" />
|
||||
|
||||
<title>Vote Poll Sdk | WakuConnect Docs</title>
|
||||
<title>Vote Poll Sdk | 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>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/index.xml" title="WakuConnect Docs" />
|
||||
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS+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
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -35,7 +35,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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 & Poll SDK</a>
|
||||
<li><a href="#waku-connect-vote--poll-sdk">Waku Connect Vote & 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,11 +534,11 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="wakuconnect-vote--poll-sdk">
|
||||
WakuConnect Vote & Poll SDK
|
||||
<a class="anchor" href="#wakuconnect-vote--poll-sdk">#</a>
|
||||
<article class="markdown"><h1 id="waku-connect-vote--poll-sdk">
|
||||
Waku Connect Vote & Poll SDK
|
||||
<a class="anchor" href="#waku-connect-vote--poll-sdk">#</a>
|
||||
</h1>
|
||||
<p>The WakuConnect Vote & Poll SDK enables developers to add Waku powered polling and voting features to their dApp.</p>
|
||||
<p>The Waku Connect Vote & 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>
|
||||
<p>The SDK can be used in two different ways:
|
||||
to vote (commitment to the blockchain) or poll (no interaction with the blockchain).</p>
|
||||
@ -573,17 +573,17 @@ 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">
|
||||
WakuConnect Vote SDK
|
||||
<a class="anchor" href="#wakuconnect-vote-sdk">#</a>
|
||||
<h2 id="waku-connect-vote-sdk">
|
||||
Waku Connect Vote SDK
|
||||
<a class="anchor" href="#waku-connect-vote-sdk">#</a>
|
||||
</h2>
|
||||
<p>The WakuConnect Vote SDK allows you to leverage Waku to save gas fees for most voters.
|
||||
<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.
|
||||
Most token holders will not need to spend gas to vote.</p>
|
||||
<p>Only the party that starts an election and submit the end results need to interact with the blockchain.</p>
|
||||
<p>For example, it can be used by a DAO to manage proposals
|
||||
where proposal creation and vote results must be committed to the blockchain.</p>
|
||||
<p>With WakuConnect Vote SDK, the DAO could be the one spending gas when creating the proposal and committing the votes,
|
||||
<p>With Waku Connect Vote SDK, the DAO could be the one spending gas when creating the proposal and committing the votes,
|
||||
whereas the token holders do not spend gas when voting.</p>
|
||||
<h3 id="documentation">
|
||||
Documentation
|
||||
@ -603,11 +603,11 @@ 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">
|
||||
WakuConnect Poll SDK
|
||||
<a class="anchor" href="#wakuconnect-poll-sdk">#</a>
|
||||
<h2 id="waku-connect-poll-sdk">
|
||||
Waku Connect Poll SDK
|
||||
<a class="anchor" href="#waku-connect-poll-sdk">#</a>
|
||||
</h2>
|
||||
<p>The WakuConnect Poll SDK allows you to leverage Waku and enable token holders to create, answer and view polls.
|
||||
<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>
|
||||
<p>As the polls use Waku, they do maintain properties expected from dApps: decentralized and censorship-resistant.</p>
|
||||
<p>The high-level functionality is as follows:</p>
|
||||
@ -629,7 +629,7 @@ The polls are not committed to the blockchain and hence do not cost gas.</p>
|
||||
Documentation
|
||||
<a class="anchor" href="#documentation-1">#</a>
|
||||
</h3>
|
||||
<p>See <a href="./poll_sdk">How to Use the WakuConnect Poll SDK</a>.</p>
|
||||
<p>See <a href="./poll_sdk">How to Use the Waku Connect Poll SDK</a>.</p>
|
||||
</article>
|
||||
|
||||
|
||||
@ -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 & Poll SDK</a>
|
||||
<li><a href="#waku-connect-vote--poll-sdk">Waku Connect Vote & 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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>WakuConnect Docs</title>
|
||||
<title>Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/</link>
|
||||
<description>Recent content on WakuConnect Docs</description>
|
||||
<description>Recent content on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/index.xml" rel="self" type="application/rss+xml" />
|
||||
</channel>
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -37,7 +37,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
@ -546,7 +546,7 @@ yarn add <span style="color:#ae81ff">\
|
||||
yarn add -D @types/styled-components
|
||||
</code></pre></div><blockquote class="book-hint warning">
|
||||
<p><code>@usedapp/core</code> must be frozen to version <code>0.4.7</code> due to incompatibility between minor versions of <code>ethers</code>.</p>
|
||||
<p>WakuConnect Vote & Poll SDK will be upgraded to the latest version of <code>@usedapp/core</code> and <code>ethers</code> once <code>ethereum-waffle</code>
|
||||
<p>Waku Connect Vote & Poll SDK will be upgraded to the latest version of <code>@usedapp/core</code> and <code>ethers</code> once <code>ethereum-waffle</code>
|
||||
is released with the <a href="https://github.com/EthWorks/Waffle/pull/603">latest version of <code>ethers</code></a>.</p>
|
||||
|
||||
</blockquote>
|
||||
@ -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">'webpack'</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">"webpack"</span>);
|
||||
|
||||
<span style="color:#a6e22e">module</span>.<span style="color:#a6e22e">exports</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">config</span>) => {
|
||||
<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:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">"buffer"</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">"crypto-browserify"</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">"stream-browserify"</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">"assert"</span>),
|
||||
});
|
||||
|
||||
<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">"buffer"</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">"buffer"</span>),
|
||||
<span style="color:#e6db74">"crypto"</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">"crypto-browserify"</span>),
|
||||
<span style="color:#e6db74">"stream"</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">"stream-browserify"</span>),
|
||||
<span style="color:#e6db74">"assert"</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">"assert"</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">"buffer"</span>, <span style="color:#e6db74">"Buffer"</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">'buffer'</span>, <span style="color:#e6db74">'Buffer'</span>],
|
||||
}));
|
||||
|
||||
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</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> "scripts": {
|
||||
- "start": "react-scripts start",
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -35,7 +35,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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’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’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><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<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><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<span style="color:#66d9ef">undefined</span>);
|
||||
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></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:#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 style="color:#a6e22e">account</span>])
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></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:#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 style="color:#a6e22e">account</span>]);
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</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">'Poll dApp'</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>}
|
||||
/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
)
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</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">"Poll dApp"</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>}
|
||||
/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
);
|
||||
}
|
||||
</code></pre></div><h2 id="page">
|
||||
Page
|
||||
@ -579,25 +579,27 @@ The component uses <code>ethers</code> to connect to the user’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">'@usedapp/core'</span>;
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">DEFAULT_CONFIG</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/dist/cjs/src/model/config/default"</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">"@usedapp/core"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">DEFAULT_CONFIG</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/dist/cjs/src/model/config/default"</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">'https://mainnet.infura.io/v3/your-infura-token'</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">'0xeefba1e63905ef1d7acba5a8513c70307c1ce441'</span>,
|
||||
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'0x53c43764255c17bd724f74c4ef150724ac50a3ed'</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">'0x0000000000000000000000000000000000000000'</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:#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">"https://mainnet.infura.io/v3/your-infura-token"</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">"0xeefba1e63905ef1d7acba5a8513c70307c1ce441"</span>,
|
||||
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"0x53c43764255c17bd724f74c4ef150724ac50a3ed"</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">"0x0000000000000000000000000000000000000000"</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,105 +607,107 @@ The component uses <code>ethers</code> to connect to the user’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">'styled-components'</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">"styled-components"</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>
|
||||
</h3>
|
||||
<p>Finally, create the <code>App</code> 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">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span>/>
|
||||
<<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}>
|
||||
<<span style="color:#f92672">PollPage</span>/>
|
||||
</<span style="color:#f92672">DAppProvider</span>>
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span> />
|
||||
<<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}>
|
||||
<<span style="color:#f92672">PollPage</span> />
|
||||
</<span style="color:#f92672">DAppProvider</span>>
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
);
|
||||
}
|
||||
</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">'@usedapp/core'</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">'@waku/vote-poll-sdk-react-components'</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">'react'</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react-dom'</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">'./index.css'</span>;
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@ethersproject/providers"</span>;
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components/dist/cjs/src/style/themes"</span>;
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">DEFAULT_CONFIG</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/dist/cjs/src/model/config/default"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'styled-components'</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">"@usedapp/core"</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">"@waku/vote-poll-sdk-react-components"</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">"react"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"react-dom"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">"./index.css"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@ethersproject/providers"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">orangeTheme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components/dist/cjs/src/style/themes"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">DEFAULT_CONFIG</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/dist/cjs/src/model/config/default"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"styled-components"</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">'https://mainnet.infura.io/v3/b4451d780cc64a078ccf2181e872cfcf'</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">'0xeefba1e63905ef1d7acba5a8513c70307c1ce441'</span>,
|
||||
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'0x53c43764255c17bd724f74c4ef150724ac50a3ed'</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">'0x0000000000000000000000000000000000000000'</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:#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">"https://mainnet.infura.io/v3/b4451d780cc64a078ccf2181e872cfcf"</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">"0xeefba1e63905ef1d7acba5a8513c70307c1ce441"</span>,
|
||||
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"0x53c43764255c17bd724f74c4ef150724ac50a3ed"</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">"0x0000000000000000000000000000000000000000"</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><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<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><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<span style="color:#66d9ef">undefined</span>);
|
||||
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></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:#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 style="color:#a6e22e">account</span>])
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></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:#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 style="color:#a6e22e">account</span>]);
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</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">'Poll dApp'</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>}
|
||||
/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
)
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</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">"Poll dApp"</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>}
|
||||
/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
);
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span>/>
|
||||
<<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}>
|
||||
<<span style="color:#f92672">PollPage</span>/>
|
||||
</<span style="color:#f92672">DAppProvider</span>>
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span> />
|
||||
<<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}>
|
||||
<<span style="color:#f92672">PollPage</span> />
|
||||
</<span style="color:#f92672">DAppProvider</span>>
|
||||
</<span style="color:#f92672">Wrapper</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>;
|
||||
|
||||
<span style="color:#a6e22e">ReactDOM</span>.<span style="color:#a6e22e">render</span>(
|
||||
<<span style="color:#f92672">React.StrictMode</span>>
|
||||
<<span style="color:#f92672">App</span>/>
|
||||
</<span style="color:#f92672">React.StrictMode</span>>,
|
||||
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'root'</span>)
|
||||
<<span style="color:#f92672">React.StrictMode</span>>
|
||||
<<span style="color:#f92672">App</span> />
|
||||
</<span style="color:#f92672">React.StrictMode</span>>,
|
||||
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">"root"</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>
|
||||
|
||||
|
||||
@ -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’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 'styled-components' 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 "styled-components"; 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’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 'styled-components' 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 "styled-components"; 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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -37,7 +37,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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">'styled-components'</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">"styled-components"</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,62 +568,67 @@ 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">'react'</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">'@ethersproject/providers'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'</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">"react"</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">"@ethersproject/providers"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes"</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">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">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</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> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{
|
||||
<<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">"lightgrey"</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">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}>
|
||||
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
|
||||
</<span style="color:#f92672">CreateButton</span>>
|
||||
}
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{
|
||||
<<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">"lightgrey"</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">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
|
||||
>
|
||||
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
|
||||
</<span style="color:#f92672">CreateButton</span>>
|
||||
}
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
);
|
||||
}
|
||||
</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><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<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><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<span style="color:#66d9ef">undefined</span>);
|
||||
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></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:#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 style="color:#a6e22e">account</span>])
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></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:#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 style="color:#a6e22e">account</span>]);
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</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">'Poll dApp'</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>}
|
||||
/>
|
||||
<<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>}/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
)
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</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">"Poll dApp"</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>}
|
||||
/>
|
||||
<<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>} />
|
||||
</<span style="color:#f92672">div</span>>
|
||||
);
|
||||
}
|
||||
</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>
|
||||
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -37,7 +37,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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">'react'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useConfig</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@usedapp/core'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">PollCreation</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/poll-sdk-react-components'</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">'@ethersproject/providers'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWakuPolling</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/poll-sdk-react-hooks'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ChainId</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/src/constants"</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">"react"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useConfig</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/poll-sdk-react-components"</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">"@ethersproject/providers"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/poll-sdk-react-hooks"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/src/constants"</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">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> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&&</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&&</span> (
|
||||
<<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>}/>
|
||||
)}
|
||||
{
|
||||
<<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">"lightgrey"</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">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}>
|
||||
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
|
||||
</<span style="color:#f92672">CreateButton</span>>
|
||||
}
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&&</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&&</span> (
|
||||
<<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>}
|
||||
/>
|
||||
)}
|
||||
{
|
||||
<<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">"lightgrey"</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">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
|
||||
>
|
||||
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
|
||||
</<span style="color:#f92672">CreateButton</span>>
|
||||
}
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
);
|
||||
}
|
||||
</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><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<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><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<span style="color:#66d9ef">undefined</span>);
|
||||
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></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:#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 style="color:#a6e22e">account</span>])
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></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:#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 style="color:#a6e22e">account</span>]);
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</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">'Poll dApp'</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>}
|
||||
/>
|
||||
<<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">'demo-poll-dapp'</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">'0x744d70FDBE2Ba4CF95131626614a1763DF805B9E'</span>}/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
)
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</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">"Poll dApp"</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>}
|
||||
/>
|
||||
<<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">"demo-poll-dapp"</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">"0x744d70FDBE2Ba4CF95131626614a1763DF805B9E"</span>}
|
||||
/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
);
|
||||
}
|
||||
</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>
|
||||
|
||||
|
||||
@ -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 'react' import {useConfig} from '@usedapp/core' import {PollCreation, PollList} from '@waku/poll-sdk-react-components' import {JsonRpcSigner, Web3Provider} from '@ethersproject/providers' import {useWakuPolling} from '@waku/poll-sdk-react-hooks' import {CreateButton} from '@waku/vote-poll-sdk-react-components' import {Theme} from '@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes' import {ChainId} from "@usedapp/core/src/constants"; 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 "react"; import { useConfig } from "@usedapp/core"; import { PollCreation, PollList } from "@waku/poll-sdk-react-components"; import { JsonRpcSigner, Web3Provider } from "@ethersproject/providers"; import { useWakuPolling } from "@waku/poll-sdk-react-hooks"; import { CreateButton } from "@waku/vote-poll-sdk-react-components"; import { Theme } from "@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes"; import { ChainId } from "@usedapp/core/src/constants"; 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 'react' import {useConfig} from '@usedapp/core' import {PollCreation, PollList} from '@waku/poll-sdk-react-components' import {JsonRpcSigner, Web3Provider} from '@ethersproject/providers' import {useWakuPolling} from '@waku/poll-sdk-react-hooks' import {CreateButton} from '@waku/vote-poll-sdk-react-components' import {Theme} from '@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes' import {ChainId} from "@usedapp/core/src/constants"; 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 "react"; import { useConfig } from "@usedapp/core"; import { PollCreation, PollList } from "@waku/poll-sdk-react-components"; import { JsonRpcSigner, Web3Provider } from "@ethersproject/providers"; import { useWakuPolling } from "@waku/poll-sdk-react-hooks"; import { CreateButton } from "@waku/vote-poll-sdk-react-components"; import { Theme } from "@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes"; import { ChainId } from "@usedapp/core/src/constants"; 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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -39,7 +39,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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">'react'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useConfig</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@usedapp/core'</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">'@waku/poll-sdk-react-components'</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">'@ethersproject/providers'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWakuPolling</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/poll-sdk-react-hooks'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ChainId</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/src/constants"</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">"react"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useConfig</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core"</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">"@waku/poll-sdk-react-components"</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">"@ethersproject/providers"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/poll-sdk-react-hooks"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/src/constants"</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">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> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&&</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&&</span> (
|
||||
<<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>}/>
|
||||
)}
|
||||
{
|
||||
<<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">"lightgrey"</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">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}>
|
||||
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
|
||||
</<span style="color:#f92672">CreateButton</span>>
|
||||
}
|
||||
<<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>} />
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&&</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&&</span> (
|
||||
<<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>}
|
||||
/>
|
||||
)}
|
||||
{
|
||||
<<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">"lightgrey"</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">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
|
||||
>
|
||||
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
|
||||
</<span style="color:#f92672">CreateButton</span>>
|
||||
}
|
||||
<<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>} />
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
);
|
||||
}
|
||||
</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"> <<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">'demo-poll-dapp'</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">'0x744d70FDBE2Ba4CF95131626614a1763DF805B9E'</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:#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">"demo-poll-dapp"</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">"0x744d70FDBE2Ba4CF95131626614a1763DF805B9E"</span>}
|
||||
/>
|
||||
</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>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="How to Use the WakuConnect Poll SDK # To demonstrate how to use the WakuConnect Poll SDK in your dApp, we will create a TypeScript React app from scratch.
|
||||
<meta name="description" content="How to Use the Waku Connect Poll SDK # To demonstrate how to use the Waku Connect Poll SDK in your dApp, we will create a TypeScript React app from scratch.
|
||||
You can then adapt the steps depending on your dApp configuration and build setup.
|
||||
The resulting code of this guide can be found at https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/main/examples/mainnet-poll.
|
||||
Here is a preview of the end result:
|
||||
@ -14,13 +14,13 @@ Get Started ">
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" />
|
||||
|
||||
<title>Poll SDK | WakuConnect Docs</title>
|
||||
<title>Poll SDK | 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>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/index.xml" title="WakuConnect Docs" />
|
||||
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS+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
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -36,7 +36,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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,11 +515,11 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="how-to-use-the-wakuconnect-poll-sdk">
|
||||
How to Use the WakuConnect Poll SDK
|
||||
<a class="anchor" href="#how-to-use-the-wakuconnect-poll-sdk">#</a>
|
||||
<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-waku-connect-poll-sdk">#</a>
|
||||
</h1>
|
||||
<p>To demonstrate how to use the WakuConnect Poll SDK in your dApp, we will create a TypeScript React app from scratch.</p>
|
||||
<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>
|
||||
<p>The resulting code of this guide can be found at
|
||||
<a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/main/examples/mainnet-poll">https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/main/examples/mainnet-poll</a>.</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>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Poll SDK on WakuConnect Docs</title>
|
||||
<title>Poll SDK on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/</link>
|
||||
<description>Recent content in Poll SDK on WakuConnect Docs</description>
|
||||
<description>Recent content in Poll SDK on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Mon, 03 Jan 2022 11:00:00 +1100</lastBuildDate><atom:link href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/index.xml" rel="self" type="application/rss+xml" />
|
||||
@ -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&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.</description>
|
||||
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.</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 &#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?</description>
|
||||
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?</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
|
||||
@ -3,24 +3,24 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
|
||||
<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="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/" />
|
||||
|
||||
<title>Introduction | WakuConnect Docs</title>
|
||||
<title>Introduction | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/docs/" title="Introducción">
|
||||
<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>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/index.xml" title="WakuConnect Docs" />
|
||||
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS+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
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -36,7 +36,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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 & Support</a></li>
|
||||
</ul>
|
||||
@ -523,11 +523,11 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="wakuconnect-docs">
|
||||
WakuConnect Docs
|
||||
<a class="anchor" href="#wakuconnect-docs">#</a>
|
||||
<article class="markdown"><h1 id="waku-connect-docs">
|
||||
Waku Connect Docs
|
||||
<a class="anchor" href="#waku-connect-docs">#</a>
|
||||
</h1>
|
||||
<p>WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
|
||||
<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.
|
||||
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.</p>
|
||||
@ -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 & Support</a></li>
|
||||
</ul>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Introduction on WakuConnect Docs</title>
|
||||
<title>Introduction on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/</link>
|
||||
<description>Recent content in Introduction on WakuConnect Docs</description>
|
||||
<description>Recent content in Introduction on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Thu, 09 Dec 2021 14:00:00 +0100</lastBuildDate><atom:link href="https://docs.wakuconnect.dev/docs/index.xml" rel="self" type="application/rss+xml" />
|
||||
@ -13,9 +13,9 @@
|
||||
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/introduction/</guid>
|
||||
<description>WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
|
||||
<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 &#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.</description>
|
||||
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.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
@ -51,9 +51,9 @@ Legend:
|
||||
<guid>https://docs.wakuconnect.dev/docs/presentations/</guid>
|
||||
<description>Presentations &amp; Videos # 17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.status.im/eth-global-2021
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named WakuConnect.
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named WakuConnect.
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres</description>
|
||||
</item>
|
||||
|
||||
|
||||
@ -3,25 +3,25 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
|
||||
<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="WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
|
||||
<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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -37,7 +37,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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 & Support</a></li>
|
||||
</ul>
|
||||
@ -520,11 +520,11 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="wakuconnect-docs">
|
||||
WakuConnect Docs
|
||||
<a class="anchor" href="#wakuconnect-docs">#</a>
|
||||
<article class="markdown"><h1 id="waku-connect-docs">
|
||||
Waku Connect Docs
|
||||
<a class="anchor" href="#waku-connect-docs">#</a>
|
||||
</h1>
|
||||
<p>WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
|
||||
<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.
|
||||
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.</p>
|
||||
@ -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 & Support</a></li>
|
||||
</ul>
|
||||
|
||||
@ -5,29 +5,29 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Presentations & Videos # 17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.status.im/eth-global-2021
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named WakuConnect.
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named WakuConnect.
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Presentations & Videos" />
|
||||
<meta property="og:description" content="Presentations & Videos # 17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.status.im/eth-global-2021
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named WakuConnect.
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named WakuConnect.
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres" />
|
||||
<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 & Videos | WakuConnect Docs</title>
|
||||
<title>Presentations & 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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -43,7 +43,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
@ -547,7 +547,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
21 Jul 2021 - EthCC 2021
|
||||
<a class="anchor" href="#21-jul-2021---ethcc-2021">#</a>
|
||||
</h2>
|
||||
<p><em>Note: DappConnect is now named WakuConnect.</em></p>
|
||||
<p><em>Note: DappConnect is now named Waku Connect.</em></p>
|
||||
|
||||
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
|
||||
<iframe src="https://www.youtube.com/embed/rQOp3qoDF0g" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
|
||||
@ -558,7 +558,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup
|
||||
<a class="anchor" href="#21-jul-2021---ethereum-engineering-group-meetup">#</a>
|
||||
</h2>
|
||||
<p><em>Note: DappConnect is now named WakuConnect.</em></p>
|
||||
<p><em>Note: DappConnect is now named Waku Connect.</em></p>
|
||||
|
||||
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
|
||||
<iframe src="https://www.youtube.com/embed/CBknF-6Z-Ds" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 'js-waku'; 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 "js-waku"; 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 'js-waku'; 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 "js-waku"; 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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -39,7 +39,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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,9 +547,9 @@ 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">'js-waku'</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">"js-waku"</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>}});
|
||||
<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">
|
||||
Listen for messages
|
||||
<a class="anchor" href="#listen-for-messages">#</a>
|
||||
@ -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">=></span> {
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">"Message received:"</span>, <span style="color:#a6e22e">msg</span>.<span style="color:#a6e22e">payloadAsUtf8</span>)
|
||||
}, [<span style="color:#e6db74">"/my-cool-app/1/my-use-case/proto"</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">=></span> {
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">"Message received:"</span>, <span style="color:#a6e22e">msg</span>.<span style="color:#a6e22e">payloadAsUtf8</span>);
|
||||
},
|
||||
[<span style="color:#e6db74">"/my-cool-app/1/my-use-case/proto"</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">'js-waku'</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">"js-waku"</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">"Here is a message!"</span>, <span style="color:#e6db74">"/my-cool-app/1/my-use-case/proto"</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">"Here is a message!"</span>,
|
||||
<span style="color:#e6db74">"/my-cool-app/1/my-use-case/proto"</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>
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -41,7 +41,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
@ -573,7 +573,7 @@ feel free to open a <a href="https://github.com/vacp2p/docs.wakuconnect.dev">PR<
|
||||
</table>
|
||||
<p>Create, answer and view polls which are censorship-resistant.</p>
|
||||
<ul>
|
||||
<li>WakuConnect Poll SDK:
|
||||
<li>Waku Connect Poll SDK:
|
||||
<a href="/docs/guides/vote_poll_sdk/#wakuconnect-poll-sdk">docs</a>,
|
||||
<a href="https://github.com/status-im/wakuconnect-vote-poll-sdk">repo</a></li>
|
||||
</ul>
|
||||
@ -641,7 +641,7 @@ exchange votes over Waku to save gas.
|
||||
Votes can then be aggregated and submitted to the blockchain to commit the result.</p>
|
||||
<p>Create, answer and view polls which are censorship-resistant.</p>
|
||||
<ul>
|
||||
<li>WakuConnect Vote SDK:
|
||||
<li>Waku Connect Vote SDK:
|
||||
<a href="/docs/guides/vote_poll_sdk/#wakuconnect-vote-sdk">docs</a>,
|
||||
<a href="https://github.com/status-im/wakuconnect-vote-poll-sdk">repo</a></li>
|
||||
</ul>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 | WakuConnect Docs</title>
|
||||
<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+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -35,7 +35,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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}})()
|
||||
@ -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
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/es/404.html" />
|
||||
|
||||
<title>404 Page not found | WakuConnect Docs</title>
|
||||
<title>404 Page not found | 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">
|
||||
@ -41,7 +41,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
<h1>404</h1>
|
||||
<h2>Page Not Found</h2>
|
||||
<h3>
|
||||
<a href="/es/">WakuConnect Docs</a>
|
||||
<a href="/es/">Waku Connect Docs</a>
|
||||
</h3>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/es/categories/" />
|
||||
|
||||
<title>Categories | WakuConnect Docs</title>
|
||||
<title>Categories | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/categories/" title="Categories">
|
||||
@ -18,7 +18,7 @@
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js" integrity="sha256-E56BIAwT2Un1FTp6eTuzXmGLDf4I6RaIdyszMkYLGuU=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/categories/index.xml" title="WakuConnect Docs" />
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/categories/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -34,7 +34,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/es/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/es/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Categories on WakuConnect Docs</title>
|
||||
<title>Categories on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/es/categories/</link>
|
||||
<description>Recent content in Categories on WakuConnect Docs</description>
|
||||
<description>Recent content in Categories on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/es/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
</channel>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/es/docs/" />
|
||||
|
||||
<title>Introducción | WakuConnect Docs</title>
|
||||
<title>Introducción | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/docs/" title="Introduction">
|
||||
@ -18,7 +18,7 @@
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js" integrity="sha256-E56BIAwT2Un1FTp6eTuzXmGLDf4I6RaIdyszMkYLGuU=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/docs/index.xml" title="WakuConnect Docs" />
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/docs/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -34,7 +34,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/es/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/es/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Introducción on WakuConnect Docs</title>
|
||||
<title>Introducción on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/es/docs/</link>
|
||||
<description>Recent content in Introducción on WakuConnect Docs</description>
|
||||
<description>Recent content in Introducción on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/es/docs/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
<meta property="article:modified_time" content="2021-12-09T15:27:58+01:00" />
|
||||
|
||||
<title>Introducción | WakuConnect Docs</title>
|
||||
<title>Introducción | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/docs/introduccion/" title="Introdução">
|
||||
@ -34,7 +34,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/es/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/es/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/es/" />
|
||||
|
||||
<title>Introducción | WakuConnect Docs</title>
|
||||
<title>Introducción | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/" title="Introduction">
|
||||
@ -19,7 +19,7 @@
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js" integrity="sha256-E56BIAwT2Un1FTp6eTuzXmGLDf4I6RaIdyszMkYLGuU=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/index.xml" title="WakuConnect Docs" />
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -35,7 +35,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/es/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/es/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Introducción on WakuConnect Docs</title>
|
||||
<title>Introducción on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/es/</link>
|
||||
<description>Recent content in Introducción on WakuConnect Docs</description>
|
||||
<description>Recent content in Introducción on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/es/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/es/tags/" />
|
||||
|
||||
<title>Tags | WakuConnect Docs</title>
|
||||
<title>Tags | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/tags/" title="Tags">
|
||||
@ -18,7 +18,7 @@
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js" integrity="sha256-E56BIAwT2Un1FTp6eTuzXmGLDf4I6RaIdyszMkYLGuU=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/tags/index.xml" title="WakuConnect Docs" />
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/tags/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -34,7 +34,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/es/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/es/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Tags on WakuConnect Docs</title>
|
||||
<title>Tags on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/es/tags/</link>
|
||||
<description>Recent content in Tags on WakuConnect Docs</description>
|
||||
<description>Recent content in Tags on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/es/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||
</channel>
|
||||
|
||||
34
index.html
34
index.html
@ -4,24 +4,24 @@
|
||||
<meta name="generator" content="Hugo 0.91.2" />
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
|
||||
<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="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/" />
|
||||
|
||||
<title>Introduction | WakuConnect Docs</title>
|
||||
<title>Introduction | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/" title="Introducción">
|
||||
<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>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/index.xml" title="WakuConnect Docs" />
|
||||
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS+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
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -37,7 +37,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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 & Support</a></li>
|
||||
</ul>
|
||||
@ -524,11 +524,11 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="wakuconnect-docs">
|
||||
WakuConnect Docs
|
||||
<a class="anchor" href="#wakuconnect-docs">#</a>
|
||||
<article class="markdown"><h1 id="waku-connect-docs">
|
||||
Waku Connect Docs
|
||||
<a class="anchor" href="#waku-connect-docs">#</a>
|
||||
</h1>
|
||||
<p>WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
|
||||
<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.
|
||||
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.</p>
|
||||
@ -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 & Support</a></li>
|
||||
</ul>
|
||||
|
||||
22
index.xml
22
index.xml
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Introduction on WakuConnect Docs</title>
|
||||
<title>Introduction on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/</link>
|
||||
<description>Recent content in Introduction on WakuConnect Docs</description>
|
||||
<description>Recent content in Introduction on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Thu, 09 Dec 2021 14:00:00 +0100</lastBuildDate><atom:link href="https://docs.wakuconnect.dev/index.xml" rel="self" type="application/rss+xml" />
|
||||
@ -81,7 +81,7 @@ The Waku Relay protocol sends messages to connected peers but does not provide a
|
||||
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/</guid>
|
||||
<description>Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
|
||||
<description>Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
|
||||
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /min-react-js-chat/1/chat/proto.</description>
|
||||
</item>
|
||||
|
||||
@ -91,7 +91,7 @@ Before starting, you need to choose a Content Topic for your dApp. Check out the
|
||||
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/</guid>
|
||||
<description>Retrieve Messages Using Waku Store With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
|
||||
<description>Retrieve Messages Using Waku Store With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
|
||||
DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
|
||||
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received.</description>
|
||||
</item>
|
||||
@ -102,9 +102,9 @@ Waku Relay is a gossip protocol. As a user, it means that your peers forward you
|
||||
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/introduction/</guid>
|
||||
<description>WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
|
||||
<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&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.</description>
|
||||
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.</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 &#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?</description>
|
||||
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?</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
@ -171,7 +171,7 @@ import {useState} from &#39;react&#39; import {useConfig} from &#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 &#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.</description>
|
||||
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.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
@ -195,9 +195,9 @@ Legend:
|
||||
<guid>https://docs.wakuconnect.dev/docs/presentations/</guid>
|
||||
<description>Presentations &amp; Videos # 17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.status.im/eth-global-2021
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named WakuConnect.
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named WakuConnect.
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres</description>
|
||||
</item>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "WakuConnect Docs",
|
||||
"short_name": "WakuConnect Docs",
|
||||
"name": "Waku Connect Docs",
|
||||
"short_name": "Waku Connect Docs",
|
||||
"start_url": "/",
|
||||
"scope": "/",
|
||||
"display": "standalone",
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/pt/404.html" />
|
||||
|
||||
<title>404 Page not found | WakuConnect Docs</title>
|
||||
<title>404 Page not found | 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">
|
||||
@ -41,7 +41,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
<h1>404</h1>
|
||||
<h2>Page Not Found</h2>
|
||||
<h3>
|
||||
<a href="/pt/">WakuConnect Docs</a>
|
||||
<a href="/pt/">Waku Connect Docs</a>
|
||||
</h3>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/pt/categories/" />
|
||||
|
||||
<title>Categories | WakuConnect Docs</title>
|
||||
<title>Categories | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/categories/" title="Categories">
|
||||
@ -18,7 +18,7 @@
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js" integrity="sha256-VDqRuJVySHBpYqkR8C5hlBZuIVD0dD5ug8gWQBmaqsk=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/categories/index.xml" title="WakuConnect Docs" />
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/categories/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -34,7 +34,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/pt/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/pt/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Categories on WakuConnect Docs</title>
|
||||
<title>Categories on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/pt/categories/</link>
|
||||
<description>Recent content in Categories on WakuConnect Docs</description>
|
||||
<description>Recent content in Categories on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/pt/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
</channel>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/pt/docs/" />
|
||||
|
||||
<title>Introdução | WakuConnect Docs</title>
|
||||
<title>Introdução | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/docs/" title="Introduction">
|
||||
@ -18,7 +18,7 @@
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js" integrity="sha256-VDqRuJVySHBpYqkR8C5hlBZuIVD0dD5ug8gWQBmaqsk=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/docs/index.xml" title="WakuConnect Docs" />
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/docs/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -34,7 +34,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/pt/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/pt/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Introdução on WakuConnect Docs</title>
|
||||
<title>Introdução on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/pt/docs/</link>
|
||||
<description>Recent content in Introdução on WakuConnect Docs</description>
|
||||
<description>Recent content in Introdução on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/pt/docs/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
<meta property="article:modified_time" content="2021-12-13T11:31:30+11:00" />
|
||||
|
||||
<title>Introdução | WakuConnect Docs</title>
|
||||
<title>Introdução | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/docs/introduccion/" title="Introducción">
|
||||
@ -34,7 +34,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/pt/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/pt/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/pt/" />
|
||||
|
||||
<title>Introdução | WakuConnect Docs</title>
|
||||
<title>Introdução | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/" title="Introduction">
|
||||
@ -19,7 +19,7 @@
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js" integrity="sha256-VDqRuJVySHBpYqkR8C5hlBZuIVD0dD5ug8gWQBmaqsk=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/index.xml" title="WakuConnect Docs" />
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -35,7 +35,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/pt/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/pt/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Introdução on WakuConnect Docs</title>
|
||||
<title>Introdução on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/pt/</link>
|
||||
<description>Recent content in Introdução on WakuConnect Docs</description>
|
||||
<description>Recent content in Introdução on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/pt/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/pt/tags/" />
|
||||
|
||||
<title>Tags | WakuConnect Docs</title>
|
||||
<title>Tags | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/tags/" title="Tags">
|
||||
@ -18,7 +18,7 @@
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js" integrity="sha256-VDqRuJVySHBpYqkR8C5hlBZuIVD0dD5ug8gWQBmaqsk=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/tags/index.xml" title="WakuConnect Docs" />
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/tags/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -34,7 +34,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/pt/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/pt/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Tags on WakuConnect Docs</title>
|
||||
<title>Tags on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/pt/tags/</link>
|
||||
<description>Recent content in Tags on WakuConnect Docs</description>
|
||||
<description>Recent content in Tags on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/pt/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||
</channel>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/tags/" />
|
||||
|
||||
<title>Tags | WakuConnect Docs</title>
|
||||
<title>Tags | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/tags/" title="Tags">
|
||||
<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>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/tags/index.xml" title="WakuConnect Docs" />
|
||||
<script defer src="/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity="sha256-NC2zabagauS+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
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -34,7 +34,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>WakuConnect Docs</span>
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Tags on WakuConnect Docs</title>
|
||||
<title>Tags on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/tags/</link>
|
||||
<description>Recent content in Tags on WakuConnect Docs</description>
|
||||
<description>Recent content in Tags on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||
</channel>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user