acid-info
/
docs.wakuconnect.dev
mirror of https://github.com/acid-info/docs.wakuconnect.dev.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update documentation

This commit is contained in:
2022-02-21 00:35:51 +00:00
parent bdbe6045e4
commit f82d8622f3
70 changed files with 7252 additions and 560 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
404.html
View File

@ -16,7 +16,7 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book

28
categories/index.html
View File

@ -17,7 +17,7 @@
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/categories/" title="Categories">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" 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
@ -258,6 +258,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -297,6 +310,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

28
docs/crypto_libraries/index.html
View File

@ -21,7 +21,7 @@ Symmetric encryption # Uses SubtleCrypto Web API (browser) or NodeJS&#39; crypt
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -257,6 +257,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -296,6 +309,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

62
docs/examples/index.html
View File

@ -4,30 +4,30 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Examples # Here is the list of the code examples and the features they demonstrate. To run or studies the example, click on the repo links.
Minimal ReactJS Chat App # Repo: min-react-js-chat.
Minimal ReactJS Chat App # Repo: relay-reactjs-chat.
Demonstrates:
Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App # Repo: store-reactjs-chat.
Demonstrates:
Waku Store React/JavaScript Protobuf using protons Vanilla Javascript Using Minified Library # Repo: unpkg-js-store.">
Waku Store React/JavaScript Protobuf using protons Minimal Angular Chat App # Repo: relay-angular-chat.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Examples" />
<meta property="og:description" content="Examples # Here is the list of the code examples and the features they demonstrate. To run or studies the example, click on the repo links.
Minimal ReactJS Chat App # Repo: min-react-js-chat.
Minimal ReactJS Chat App # Repo: relay-reactjs-chat.
Demonstrates:
Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App # Repo: store-reactjs-chat.
Demonstrates:
Waku Store React/JavaScript Protobuf using protons Vanilla Javascript Using Minified Library # Repo: unpkg-js-store." />
Waku Store React/JavaScript Protobuf using protons Minimal Angular Chat App # Repo: relay-angular-chat." />
<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-02-02T11:56:14+11:00" />
<meta property="article:modified_time" content="2022-02-18T09:38:14+00:00" />
<title>Examples | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -263,6 +263,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -302,6 +315,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -614,6 +640,7 @@ https://github.com/alex-shpak/hugo-book
<ul>
<li><a href="#minimal-reactjs-chat-app">Minimal ReactJS Chat App</a></li>
<li><a href="#minimal-reactjs-waku-store-app">Minimal ReactJS Waku Store App</a></li>
<li><a href="#minimal-angular-chat-app">Minimal Angular Chat App</a></li>
<li><a href="#vanilla-javascript-using-minified-library">Vanilla Javascript Using Minified Library</a></li>
<li><a href="#web-chat-app">Web Chat App</a></li>
<li><a href="#ethereum-private-message-web-app">Ethereum Private Message Web App</a></li>
@ -643,7 +670,7 @@ To run or studies the example, click on the <em>repo</em> links.</p>
Minimal ReactJS Chat App
<a class="anchor" href="#minimal-reactjs-chat-app">#</a>
</h2>
<p>Repo: <a href="https://github.com/status-im/js-waku/tree/main/examples/min-react-js-chat">min-react-js-chat</a>.</p>
<p>Repo: <a href="https://github.com/status-im/js-waku/tree/master/examples/relay-reactjs-chat">relay-reactjs-chat</a>.</p>
<p>Demonstrates:</p>
<ul>
<li>Group chat</li>
@ -656,13 +683,27 @@ To run or studies the example, click on the <em>repo</em> links.</p>
Minimal ReactJS Waku Store App
<a class="anchor" href="#minimal-reactjs-waku-store-app">#</a>
</h2>
<p>Repo: <a href="https://github.com/status-im/js-waku/tree/main/examples/store-reactjs-chat">store-reactjs-chat</a>.</p>
<p>Repo: <a href="https://github.com/status-im/js-waku/tree/master/examples/store-reactjs-chat">store-reactjs-chat</a>.</p>
<p>Demonstrates:</p>
<ul>
<li>Waku Store</li>
<li>React/JavaScript</li>
<li>Protobuf using <a href="https://www.npmjs.com/package/protons">protons</a></li>
</ul>
<h2 id="minimal-angular-chat-app">
Minimal Angular Chat App
<a class="anchor" href="#minimal-angular-chat-app">#</a>
</h2>
<p>Repo: <a href="https://github.com/status-im/js-waku/tree/master/examples/relay-angular-chat">relay-angular-chat</a>.</p>
<p>Demonstrates:</p>
<ul>
<li>Group chat</li>
<li>Angular/JavaScript</li>
<li>Waku Relay</li>
<li>Protobuf using <a href="https://www.npmjs.com/package/protons">protons</a></li>
<li>No async/await syntax</li>
<li>Observables</li>
</ul>
<h2 id="vanilla-javascript-using-minified-library">
Vanilla Javascript Using Minified Library
<a class="anchor" href="#vanilla-javascript-using-minified-library">#</a>
@ -741,9 +782,9 @@ Live: <a href="https://js-waku.wakuconnect.dev/examples/eth-pm-wallet-encryption
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/9f9d3eb6b803b31e514a75d7b047eeb81268e76b" title='Last modified by Franck R | Feb 2, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/22eab4285b3e581ee3daf5338c33d71008e7b82e" title='Last modified by jemboh | Feb 18, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 2, 2022</span>
<span>Feb 18, 2022</span>
</a>
</div>
@ -790,6 +831,7 @@ Live: <a href="https://js-waku.wakuconnect.dev/examples/eth-pm-wallet-encryption
<ul>
<li><a href="#minimal-reactjs-chat-app">Minimal ReactJS Chat App</a></li>
<li><a href="#minimal-reactjs-waku-store-app">Minimal ReactJS Waku Store App</a></li>
<li><a href="#minimal-angular-chat-app">Minimal Angular Chat App</a></li>
<li><a href="#vanilla-javascript-using-minified-library">Vanilla Javascript Using Minified Library</a></li>
<li><a href="#web-chat-app">Web Chat App</a></li>
<li><a href="#ethereum-private-message-web-app">Ethereum Private Message Web App</a></li>

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

@ -25,7 +25,7 @@ The format for content topics is as follows:
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -261,6 +261,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -300,6 +313,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

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

@ -14,14 +14,14 @@ For this guide, we are using a single content topic: /relay-guide/1/chat/proto."
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-02-08T23:06:38+00:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Receive and Send Messages Using Waku Relay | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -257,6 +257,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -296,6 +309,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -656,15 +682,15 @@ Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a co
<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">&#34;js-waku&#34;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">peers</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#34;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#34;</span>,
<span style="color:#e6db74">&#34;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#34;</span>,
]
},
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">peers</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#34;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#34;</span>,
<span style="color:#e6db74">&#34;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#34;</span>,
],
},
});
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
@ -820,9 +846,9 @@ 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/bba925848c6b5ba0e275b79a275cc3bc3ee22a8b" title='Last modified by jemboh | Feb 8, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 8, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

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

@ -12,14 +12,14 @@ Waku Relay is a gossip protocol. As a user, it means that your peers forward you
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-02-08T23:06:38+00:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Retrieve Messages Using Waku Store | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -255,6 +255,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -294,6 +307,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -664,15 +690,15 @@ Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a co
<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">&#34;js-waku&#34;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">peers</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#34;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#34;</span>,
<span style="color:#e6db74">&#34;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#34;</span>,
]
},
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">peers</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#34;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#34;</span>,
<span style="color:#e6db74">&#34;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#34;</span>,
],
},
});
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
@ -805,9 +831,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/bba925848c6b5ba0e275b79a275cc3bc3ee22a8b" title='Last modified by jemboh | Feb 8, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 8, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

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

@ -21,7 +21,7 @@ See Cryptographic Libraries for more details on the cryptographic libraries used
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -257,6 +257,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -296,6 +309,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

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

@ -25,7 +25,7 @@ Create new keypair # Generate a new keypair to sign your messages:" />
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -261,6 +261,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -300,6 +313,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

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

@ -12,14 +12,14 @@ The Waku Relay protocol sends messages to connected peers but does not provide a
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-02-08T23:06:38+00:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Send Messages Using Waku Light Push | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -255,6 +255,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -294,6 +307,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -657,15 +683,15 @@ Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a co
<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">&#34;js-waku&#34;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">peers</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#34;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#34;</span>,
<span style="color:#e6db74">&#34;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#34;</span>,
]
},
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">peers</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#34;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#34;</span>,
<span style="color:#e6db74">&#34;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#34;</span>,
],
},
});
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
@ -704,9 +730,9 @@ The peer is selected among the dApp&rsquo;s connected peers.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/bba925848c6b5ba0e275b79a275cc3bc3ee22a8b" title='Last modified by jemboh | Feb 8, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 8, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

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

@ -19,7 +19,7 @@ Before starting, you need to choose a Content Topic for your dApp. Check out the
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -255,6 +255,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class=" active">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -294,6 +307,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

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

@ -21,7 +21,7 @@ Waku Relay is a gossip protocol. As a user, it means that your peers forward you
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -257,6 +257,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -296,6 +309,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

34
docs/guides/09_debug/index.html
View File

@ -20,14 +20,14 @@ export DEBUG=* Browser # To see the debug logs in your browser&rsquo;s console,
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/09_debug/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-31T00:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-31T10:56:57+11:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>How to Debug your Waku dApp | 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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -263,6 +263,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -302,6 +315,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -689,9 +715,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/f2e22d0cd0d84dcb7a009346dccca6f013380a0e" title='Last modified by Franck R | Jan 30, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 30, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

1095
docs/guides/10_angular_relay/index.html Normal file
View File

File diff suppressed because it is too large Load Diff

761
docs/guides/11_nwaku/index.html Normal file
View File

@ -0,0 +1,761 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Nwaku Service Node # JS-Waku nodes join the Waku network by connecting to service nodes using secure websocket.
Nwaku (prev. nim-waku) is the reference implementation of the Waku v2 protocol and can be used as a service node.
When using { bootstrap: { default: true } }, the js-waku node connects to a fleet of nwaku nodes operated by Status.
It is also possible to deploy your own nwaku node by following these instructions.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Nwaku Service Node" />
<meta property="og:description" content="Nwaku Service Node # JS-Waku nodes join the Waku network by connecting to service nodes using secure websocket.
Nwaku (prev. nim-waku) is the reference implementation of the Waku v2 protocol and can be used as a service node.
When using { bootstrap: { default: true } }, the js-waku node connects to a fleet of nwaku nodes operated by Status.
It is also possible to deploy your own nwaku node by following these instructions." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-02-17T00:00:00+01:00" />
<meta property="article:modified_time" content="2022-02-21T11:24:40+11:00" />
<title>Nwaku Service Node | 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.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
</head>
<body dir="ltr">
<input type="checkbox" class="hidden toggle" id="menu-control" />
<input type="checkbox" class="hidden toggle" id="toc-control" />
<main class="container flex">
<aside class="book-menu">
<div class="book-menu-content">
<nav>
<h2 class="book-brand">
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
</a>
</h2>
<div class="book-search">
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
<div class="book-search-spinner hidden"></div>
<ul id="book-search-results"></ul>
</div>
<ul class="book-languages">
<li>
<input type="checkbox" id="languages" class="toggle" />
<label for="languages" class="flex justify-between">
<a role="button" class="flex align-center">
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
English
</a>
</label>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/es/">
Español
</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/pt/">
Português
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations &amp; Videos</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class=" active">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
</li>
</ul>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
</li>
</ul>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
</li>
</ul>
<ul>
<li>
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
<li>
<a href="https://vac.dev/" target="_blank" rel="noopener">
Vac Team
</a>
</li>
<li>
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
Vac RFCs
</a>
</li>
<li>
<a href="https://status.im/" target="_blank" rel="noopener">
Status.im
</a>
</li>
</ul>
</nav>
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
</div>
</aside>
<div class="book-page">
<header class="book-header">
<div class="flex align-center justify-between">
<label for="menu-control">
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
</label>
<strong>Nwaku Service Node</strong>
<label for="toc-control">
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
</label>
</div>
<aside class="hidden clearfix">
<nav id="TableOfContents">
<ul>
<li><a href="#nwaku-service-node">Nwaku Service Node</a></li>
</ul>
</nav>
</aside>
</header>
<article class="markdown"><h1 id="nwaku-service-node">
Nwaku Service Node
<a class="anchor" href="#nwaku-service-node">#</a>
</h1>
<p>JS-Waku nodes join the Waku network by connecting to service nodes using secure websocket.</p>
<p><a href="https://github.com/status-im/nim-waku/tree/master/waku/v2">Nwaku (prev. nim-waku)</a>
is the reference implementation of the Waku v2 protocol and can be used as a service node.</p>
<p>When using <a href="https://js-waku.wakuconnect.dev/interfaces/discovery.BootstrapOptions.html#default"><code>{ bootstrap: { default: true } }</code></a>,
the js-waku node connects to a fleet of nwaku nodes operated by Status.</p>
<p>It is also possible to deploy your own nwaku node by following <a href="https://github.com/status-im/nim-waku/tree/master/waku/v2#enabling-websocket">these instructions</a>.
Be sure to setup your nwaku node with a valid SSL certificate or js-waku nodes may fail silently to connect to it.</p>
<blockquote class="book-hint info">
We are making it easier for operators to run their own nodes,
this is effort is tracked with <a href="https://github.com/status-im/nim-waku/issues/828">status-im/nim-waku#828</a>.
</blockquote>
<p>You may wish to connect your nwaku node to the rest of the fleet.
This can be done with the <code>--staticnode</code> or <code>--dns-discovery-url</code>.
For example:</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-sh" data-lang="sh"><span style="color:#e6db74">`</span>wakunode2 <span style="color:#ae81ff">\
</span><span style="color:#ae81ff"></span> --dns-discovery<span style="color:#f92672">=</span>true <span style="color:#ae81ff">\
</span><span style="color:#ae81ff"></span> --dns-discovery-url<span style="color:#f92672">=</span>enrtree://ANTL4SLG2COUILKAPE7EF2BYNL2SHSHVCHLRD5J7ZJLN5R3PRJD2Y@prod.waku.nodes.status.im
</code></pre></div><p>You can then use <a href="https://js-waku.wakuconnect.dev/interfaces/discovery.BootstrapOptions.html#peers"><code>bootstrap.peers</code></a>
to pass the multiaddr of your node.</p>
<p>For example (replace the multiaddr with your node&rsquo;s).</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">&#34;js-waku&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">peers</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#34;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#34;</span>,
],
},
});
</code></pre></div></article>
<footer class="book-footer">
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/915426b852c6d831f6d86c1c81dcbfab86705d07" title='Last modified by Franck R | Feb 21, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 21, 2022</span>
</a>
</div>
<div>
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/11_nwaku.md" target="_blank" rel="noopener">
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
<span>Edit this page</span>
</a>
</div>
</div>
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
</footer>
<div class="book-comments">
</div>
<label for="menu-control" class="hidden book-menu-overlay"></label>
</div>
<aside class="book-toc">
<div class="book-toc-content">
<nav id="TableOfContents">
<ul>
<li><a href="#nwaku-service-node">Nwaku Service Node</a></li>
</ul>
</nav>
</div>
</aside>
</main>
</body>
</html>

52
docs/guides/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Guides # General Concepts # How to Choose a Content Topic How to Debug your Waku dApp JavaScript # Receive and Send Messages Using Waku Relay Retrieve Messages Using Waku Store Encrypt Messages Using Waku Message Version 1 Sign Messages Using Waku Message Version 1 Send Messages Using Waku Light Push ReactJS # Receive and Send Messages Using Waku Relay With ReactJS Retrieve Messages Using Waku Store With ReactJS ">
<meta name="description" content="Guides # General Concepts # How to Choose a Content Topic How to Debug your Waku dApp JavaScript # Receive and Send Messages Using Waku Relay Retrieve Messages Using Waku Store Encrypt Messages Using Waku Message Version 1 Sign Messages Using Waku Message Version 1 Send Messages Using Waku Light Push ReactJS # Receive and Send Messages Using Waku Relay With ReactJS Retrieve Messages Using Waku Store With ReactJS Angular # Receive and Send Messages Using Waku Relay With ReactJS Service Nodes # Nwaku Service Node ">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="" />
<meta property="og:description" content="" />
@ -15,7 +15,7 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" 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
@ -252,6 +252,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -291,6 +304,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -604,6 +630,8 @@ https://github.com/alex-shpak/hugo-book
<li><a href="#general-concepts">General Concepts</a></li>
<li><a href="#javascript">JavaScript</a></li>
<li><a href="#reactjs">ReactJS</a></li>
<li><a href="#angular">Angular</a></li>
<li><a href="#service-nodes">Service Nodes</a></li>
</ul>
</li>
</ul>
@ -649,6 +677,20 @@ https://github.com/alex-shpak/hugo-book
<li><a href="./07_reactjs_relay/">Receive and Send Messages Using Waku Relay With ReactJS</a></li>
<li><a href="./08_reactjs_store/">Retrieve Messages Using Waku Store With ReactJS</a></li>
</ul>
<h2 id="angular">
Angular
<a class="anchor" href="#angular">#</a>
</h2>
<ul>
<li><a href="./10_angular_relay/">Receive and Send Messages Using Waku Relay With ReactJS</a></li>
</ul>
<h2 id="service-nodes">
Service Nodes
<a class="anchor" href="#service-nodes">#</a>
</h2>
<ul>
<li><a href="./11_nwaku/">Nwaku Service Node</a></li>
</ul>
</article>
@ -658,9 +700,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/f2e22d0cd0d84dcb7a009346dccca6f013380a0e" title='Last modified by Franck R | Jan 30, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/915426b852c6d831f6d86c1c81dcbfab86705d07" title='Last modified by Franck R | Feb 21, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Jan 30, 2022</span>
<span>Feb 21, 2022</span>
</a>
</div>
@ -708,6 +750,8 @@ https://github.com/alex-shpak/hugo-book
<li><a href="#general-concepts">General Concepts</a></li>
<li><a href="#javascript">JavaScript</a></li>
<li><a href="#reactjs">ReactJS</a></li>
<li><a href="#angular">Angular</a></li>
<li><a href="#service-nodes">Service Nodes</a></li>
</ul>
</li>
</ul>

24
docs/guides/index.xml
View File

@ -74,6 +74,18 @@ Create new keypair # Generate a new keypair to sign your messages:</description
The Waku Relay protocol sends messages to connected peers but does not provide any information on whether said peers have received messages. This can be an issue when facing potential connectivity issues. For example, when the connection drops easily, or it is connected to a small number of relay peers.</description>
</item>
<item>
<title>Send and Receive Messages Using Waku Relay With Angular v13</title>
<link>https://docs.wakuconnect.dev/docs/guides/10_angular_relay/</link>
<pubDate>Tue, 15 Feb 2022 09:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/10_angular_relay/</guid>
<description>Send and Receive Messages Using Waku Relay With Angular v13 # It is easy to use Waku Connect with Angular v13.
In this guide, we will demonstrate how your Angular 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: /relay-angular-chat/1/chat/proto.</description>
</item>
<item>
<title>Receive and Send Messages Using Waku Relay With ReactJS</title>
<link>https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/</link>
@ -109,5 +121,17 @@ export DEBUG=waku*,libp2p* To enable all debug logs:
export DEBUG=* Browser # To see the debug logs in your browser&amp;rsquo;s console, you need to modify the local storage and add debug key.</description>
</item>
<item>
<title>Nwaku Service Node</title>
<link>https://docs.wakuconnect.dev/docs/guides/11_nwaku/</link>
<pubDate>Thu, 17 Feb 2022 00:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/11_nwaku/</guid>
<description>Nwaku Service Node # JS-Waku nodes join the Waku network by connecting to service nodes using secure websocket.
Nwaku (prev. nim-waku) is the reference implementation of the Waku v2 protocol and can be used as a service node.
When using { bootstrap: { default: true } }, the js-waku node connects to a fleet of nwaku nodes operated by Status.
It is also possible to deploy your own nwaku node by following these instructions.</description>
</item>
</channel>
</rss>

28
docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/index.html
View File

@ -23,7 +23,7 @@ The latest react-scripts version uses webpack 5." />
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -259,6 +259,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -298,6 +311,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

102
docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/index.html
View File

@ -10,14 +10,14 @@
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/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-02-04T03:44:23+01:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Connect to the Ethereum Wallet | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -253,6 +253,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -292,6 +305,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -657,22 +683,21 @@ Next step demonstrates how to use <code>@useDapp</code> for this purpose.
For that, create a <code>PollPage</code> component that includes the top bar and will include the poll elements.
The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p>
<p><code>MULTICALL_ADDRESS</code> is an address to mutical smart contract that allows aggregating multiple contract calls into one, thus reducing number of calls to blockchain needed.</p>
<p>Example multicall addresses:
- Mainnet: <code>0xeefba1e63905ef1d7acba5a8513c70307c1ce441</code>,
- Ropsten: <code>0x53c43764255c17bd724f74c4ef150724ac50a3ed</code></p>
<p>Example multicall addresses: - Mainnet: <code>0xeefba1e63905ef1d7acba5a8513c70307c1ce441</code>, - Ropsten: <code>0x53c43764255c17bd724f74c4ef150724ac50a3ed</code></p>
<p>But if you want you can deploy your own multicall smart contract.</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">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#39;</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</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">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span>;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage() {</span>
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span>
<span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">pollingIcon</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;WakuConnect Poll Demo&#39;</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;WakuConnect Poll Demo&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
@ -680,7 +705,7 @@ The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p
/&gt;
<span style="color:#75715e">//Place for poll or vote component
</span><span style="color:#75715e"></span> &lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
);
}
</code></pre></div><h2 id="page">
Page
@ -692,12 +717,12 @@ The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p
</h3>
<p><a href="https://styled-components.com/"><code>styled-components</code></a> is used for easy styling.
Create a <code>Wrapper</code> variable to use in the page component:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
</span><span style="color:#e6db74"> height: 100%;
</span><span style="color:#e6db74"> width: 100%;
</span><span style="color:#e6db74">`</span>
</span><span style="color:#e6db74">`</span>;
</code></pre></div><h3 id="render">
Render
<a class="anchor" href="#render">#</a>
@ -707,34 +732,35 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">GlobalStyle</span> /&gt;
&lt;<span style="color:#f92672">MainPage</span>/&gt;
&lt;<span style="color:#f92672">MainPage</span> /&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
);
}
</code></pre></div><p>Your <code>index.tsx</code> should now be:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Poll</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;./components/Poll&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">pollingIcon</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;./assets/images/pollingIcon.png&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">orangeTheme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react-dom&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">BrowserRouter</span>, <span style="color:#a6e22e">useLocation</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react-router-dom&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Route</span>, <span style="color:#a6e22e">Switch</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react-router&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWeb3Connect</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;./hooks/useWeb3Connect&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Poll</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;./components/Poll&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">pollingIcon</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;./assets/images/pollingIcon.png&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">orangeTheme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react-dom&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">BrowserRouter</span>, <span style="color:#a6e22e">useLocation</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react-router-dom&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Route</span>, <span style="color:#a6e22e">Switch</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react-router&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWeb3Connect</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;./hooks/useWeb3Connect&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#39;</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span>;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage</span>({ <span style="color:#a6e22e">tokenAddress</span> }<span style="color:#f92672">:</span> { <span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span> }) {
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span>
<span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">pollingIcon</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;WakuConnect Poll Demo&#39;</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;WakuConnect Poll Demo&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
@ -742,36 +768,36 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
/&gt;
<span style="color:#75715e">//Place for poll or vote component
</span><span style="color:#75715e"></span> &lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
);
}
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">location</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useLocation</span>()
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tokenAddress</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">URLSearchParams</span>(<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">search</span>).<span style="color:#66d9ef">get</span>(<span style="color:#e6db74">&#39;token&#39;</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">location</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useLocation</span>();
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tokenAddress</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">URLSearchParams</span>(<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">search</span>).<span style="color:#66d9ef">get</span>(<span style="color:#e6db74">&#34;token&#34;</span>);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">GlobalStyle</span> /&gt;
&lt;<span style="color:#f92672">MainPage</span> <span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">tokenAddress</span> <span style="color:#f92672">??</span> <span style="color:#a6e22e">TOKEN_ADDRESS</span>} /&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
);
}
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
</span><span style="color:#e6db74"> height: 100%;
</span><span style="color:#e6db74"> width: 100%;
</span><span style="color:#e6db74">`</span>
</span><span style="color:#e6db74">`</span>;
<span style="color:#a6e22e">ReactDOM</span>.<span style="color:#a6e22e">render</span>(
&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{ <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;100%&#39;</span> }}&gt;
&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{ <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;100%&#34;</span> }}&gt;
&lt;<span style="color:#f92672">BrowserRouter</span>&gt;
&lt;<span style="color:#f92672">Switch</span>&gt;
&lt;<span style="color:#f92672">Route</span> <span style="color:#a6e22e">exact</span> <span style="color:#a6e22e">path</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/&#34;</span> <span style="color:#a6e22e">component</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">App</span>} /&gt;
&lt;/<span style="color:#f92672">Switch</span>&gt;
&lt;/<span style="color:#f92672">BrowserRouter</span>&gt;
&lt;/<span style="color:#f92672">div</span>&gt;,
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#39;root&#39;</span>)
)
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;root&#34;</span>)
);
</code></pre></div><p>
@ -801,9 +827,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/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 4, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

184
docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/index.html
View File

@ -12,14 +12,14 @@ yarn add @usedapp/core@0.4.7 @usedapp/core must be frozen to version 0.4.7 due t
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" /><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-02-04T03:44:23+01:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Connect to the Ethereum Wallet useDapp | 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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -255,6 +255,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -294,6 +307,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -691,22 +717,22 @@ The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p
<a class="anchor" href="#usedapp">#</a>
</h3>
<p>Create a <code>config</code> variable that contains the Ethereum network parameters:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">readOnlyChainId</span>: <span style="color:#66d9ef">ChainId.Mainnet</span>,
<span style="color:#a6e22e">readOnlyUrls</span><span style="color:#f92672">:</span> {
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;https://mainnet.infura.io/v3/your-infura-token&#39;</span>,
},
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#39;</span>,
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#39;</span>,
},
<span style="color:#a6e22e">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">&#34;https://mainnet.infura.io/v3/your-infura-token&#34;</span>,
},
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#34;</span>,
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#34;</span>,
},
<span style="color:#a6e22e">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
@ -726,78 +752,78 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
</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">function</span> <span style="color:#a6e22e">App() {</span>
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">GlobalStyle</span>/&gt;
&lt;<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}&gt;
&lt;<span style="color:#f92672">PollPage</span>/&gt;
&lt;/<span style="color:#f92672">DAppProvider</span>&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">GlobalStyle</span> /&gt;
&lt;<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}&gt;
&lt;<span style="color:#f92672">PollPage</span> /&gt;
&lt;/<span style="color:#f92672">DAppProvider</span>&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
</code></pre></div><p>Your <code>index.tsx</code> should now be:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>;
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, {<span style="color:#a6e22e">useEffect</span>, <span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react-dom&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;./index.css&#39;</span>;
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/cjs/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, { <span style="color:#a6e22e">useEffect</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react-dom&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#34;./index.css&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">orangeTheme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/cjs/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">readOnlyChainId</span>: <span style="color:#66d9ef">ChainId.Mainnet</span>,
<span style="color:#a6e22e">readOnlyUrls</span><span style="color:#f92672">:</span> {
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;https://mainnet.infura.io/v3/your-infura-token&#39;</span>,
},
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#39;</span>,
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#39;</span>,
},
<span style="color:#a6e22e">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">&#34;https://mainnet.infura.io/v3/your-infura-token&#34;</span>,
},
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#34;</span>,
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#34;</span>,
},
<span style="color:#a6e22e">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">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>);
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>())
} <span style="color:#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">=&gt;</span> {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
} <span style="color:#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> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;Poll dApp&#39;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
<span style="color:#75715e">//Place for poll or vote component
</span><span style="color:#75715e"></span> &lt;/<span style="color:#f92672">div</span>&gt;
)
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
<span style="color:#75715e">//Place for poll or vote component
</span><span style="color:#75715e"></span> &lt;/<span style="color:#f92672">div</span>&gt;
);
}
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">GlobalStyle</span>/&gt;
&lt;<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}&gt;
&lt;<span style="color:#f92672">PollPage</span>/&gt;
&lt;/<span style="color:#f92672">DAppProvider</span>&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">GlobalStyle</span> /&gt;
&lt;<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}&gt;
&lt;<span style="color:#f92672">PollPage</span> /&gt;
&lt;/<span style="color:#f92672">DAppProvider</span>&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
@ -830,9 +856,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/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 4, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

28
docs/guides/vote_poll_sdk/dapp_creation/index.html
View File

@ -18,7 +18,7 @@ The Poll &amp; Vote SDK features can only be used by token holders, you must pas
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/index.xml" title="Waku Connect Docs" />
<!--
Made with Book Theme
@ -255,6 +255,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -294,6 +307,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

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

@ -18,7 +18,7 @@ For both functionalities, only ERC-20 token holders can create or answer polls/v
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" 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
@ -255,6 +255,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -294,6 +307,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class=" active">Vote Poll Sdk</a>

112
docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/index.html
View File

@ -14,14 +14,14 @@ import styled from &#34;styled-components&#34;; const Wrapper = styled.div` disp
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_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-02-04T03:44:23+01:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Create-A-Poll Button | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -257,6 +257,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -296,6 +309,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -669,51 +695,57 @@ 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">useMemo</span>, <span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Web3Provider</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@ethersproject/providers&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useMemo</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">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">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:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({<span style="color:#a6e22e">account</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:#a6e22e">useMemo</span>(() <span style="color:#f92672">=&gt;</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">account</span>, [<span style="color:#a6e22e">account</span>])
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({ <span style="color:#a6e22e">account</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:#a6e22e">useMemo</span>(() <span style="color:#f92672">=&gt;</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">account</span>, [<span style="color:#a6e22e">account</span>]);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{
&lt;<span style="color:#f92672">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}&gt;
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{
&lt;<span style="color:#f92672">CreateButton</span>
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
}}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
&gt;
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
</code></pre></div><p>Now update the <code>MainPage</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">MainPage() {</span>
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span>
<span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;Poll dApp&#39;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;<span style="color:#f92672">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>}/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
)
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;<span style="color:#f92672">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>} /&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
);
}
</code></pre></div><p>Now, you have a button:</p>
<p><img src="/assets/poll_sdk/create-poll-button.png" alt="Create a poll button" /></p>
@ -746,9 +778,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/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 4, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

741
docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/index.html Normal file
View File

@ -0,0 +1,741 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Create the DApp and Install Dependencies # Create React App # Create the new React app using the typescript template. Install the Waku Poll SDK packages.
In this guide, we use useDApp to access the blockchain.
yarn create react-app poll-dapp-ts --template typescript cd poll-dapp-ts yarn add \ @waku/poll-sdk-react-components @waku/poll-sdk-react-hooks @waku/vote-poll-sdk-react-components \ @usedapp/core@0.4.7 yarn add -D @types/styled-components @usedapp/core must be frozen to version 0.4.7 due to incompatibility between minor versions of ethers.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Create the DApp and Install Dependencies" />
<meta property="og:description" content="Create the DApp and Install Dependencies # Create React App # Create the new React app using the typescript template. Install the Waku Poll SDK packages.
In this guide, we use useDApp to access the blockchain.
yarn create react-app poll-dapp-ts --template typescript cd poll-dapp-ts yarn add \ @waku/poll-sdk-react-components @waku/poll-sdk-react-hooks @waku/vote-poll-sdk-react-components \ @usedapp/core@0.4.7 yarn add -D @types/styled-components @usedapp/core must be frozen to version 0.4.7 due to incompatibility between minor versions of ethers." />
<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-27T11:18:41+11:00" />
<title>Create the DApp and Install Dependencies | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
</head>
<body dir="ltr">
<input type="checkbox" class="hidden toggle" id="menu-control" />
<input type="checkbox" class="hidden toggle" id="toc-control" />
<main class="container flex">
<aside class="book-menu">
<div class="book-menu-content">
<nav>
<h2 class="book-brand">
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
</a>
</h2>
<div class="book-search">
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
<div class="book-search-spinner hidden"></div>
<ul id="book-search-results"></ul>
</div>
<ul class="book-languages">
<li>
<input type="checkbox" id="languages" class="toggle" />
<label for="languages" class="flex justify-between">
<a role="button" class="flex align-center">
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
English
</a>
</label>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/es/">
Español
</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/pt/">
Português
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations &amp; Videos</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class=" active">Create the DApp and Install Dependencies</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
</li>
</ul>
<ul>
<li>
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
<li>
<a href="https://vac.dev/" target="_blank" rel="noopener">
Vac Team
</a>
</li>
<li>
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
Vac RFCs
</a>
</li>
<li>
<a href="https://status.im/" target="_blank" rel="noopener">
Status.im
</a>
</li>
</ul>
</nav>
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
</div>
</aside>
<div class="book-page">
<header class="book-header">
<div class="flex align-center justify-between">
<label for="menu-control">
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
</label>
<strong>Create the DApp and Install Dependencies</strong>
<label for="toc-control">
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
</label>
</div>
<aside class="hidden clearfix">
<nav id="TableOfContents">
<ul>
<li><a href="#create-the-dapp-and-install-dependencies">Create the DApp and Install Dependencies</a>
<ul>
<li><a href="#create-react-app">Create React App</a></li>
<li><a href="#setup-polyfills">Setup polyfills</a>
<ul>
<li><a href="#webpack-5">Webpack 5</a></li>
<li><a href="#react-app-rewired">React-App-Rewired</a></li>
</ul>
</li>
<li><a href="#start-development-server">Start development server</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
</header>
<article class="markdown"><h1 id="create-the-dapp-and-install-dependencies">
Create the DApp and Install Dependencies
<a class="anchor" href="#create-the-dapp-and-install-dependencies">#</a>
</h1>
<h2 id="create-react-app">
Create React App
<a class="anchor" href="#create-react-app">#</a>
</h2>
<p>Create the new React app using the <code>typescript</code> template.
Install the Waku Poll SDK packages.</p>
<p>In this guide, we use <a href="https://usedapp.io/">useDApp</a> to access the blockchain.</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 create react-app poll-dapp-ts --template typescript
cd poll-dapp-ts
yarn add <span style="color:#ae81ff">\
</span><span style="color:#ae81ff"></span>@waku/poll-sdk-react-components @waku/poll-sdk-react-hooks @waku/vote-poll-sdk-react-components <span style="color:#ae81ff">\
</span><span style="color:#ae81ff"></span>@usedapp/core@0.4.7
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>Waku Connect Vote &amp; 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>
<h2 id="setup-polyfills">
Setup polyfills
<a class="anchor" href="#setup-polyfills">#</a>
</h2>
<p>A number of Web3 dependencies need polyfills.
Said polyfills must be explicitly declared when using webpack 5.</p>
<p>The latest <code>react-scripts</code> version uses webpack 5.</p>
<p>We will describe below a method to configure polyfills when using <code>create-react-app</code>/<code>react-scripts</code> or webpack 5.
This may not be necessary if you do not use <code>react-scripts</code> or if you use webpack 4.</p>
<p>Start by installing the polyfill libraries:</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 assert buffer crypto-browserify stream-browserify
</code></pre></div><h3 id="webpack-5">
Webpack 5
<a class="anchor" href="#webpack-5">#</a>
</h3>
<p>If you directly use webpack 5,
then you can inspire yourself from this <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/blob/main/examples/mainnet-poll/webpack.config.js">webpack.config.js</a>.</p>
<h3 id="react-app-rewired">
React-App-Rewired
<a class="anchor" href="#react-app-rewired">#</a>
</h3>
<p>An alternative is to let <code>react-scripts</code> control the webpack 5 config and only override some elements using <code>react-app-rewired</code>.</p>
<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">&#34;webpack&#34;</span>);
<span style="color:#a6e22e">module</span>.<span style="color:#a6e22e">exports</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">config</span>) =&gt; {
<span style="color:#75715e">// Override webpack 5 config from react-scripts to load polyfills
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span> <span style="color:#f92672">=</span> {};
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span> <span style="color:#f92672">=</span> {};
Object.<span style="color:#a6e22e">assign</span>(<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">resolve</span>.<span style="color:#a6e22e">fallback</span>, {
<span style="color:#a6e22e">buffer</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;buffer&#34;</span>),
<span style="color:#a6e22e">crypto</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;crypto-browserify&#34;</span>),
<span style="color:#a6e22e">stream</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;stream-browserify&#34;</span>),
<span style="color:#a6e22e">assert</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">require</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#e6db74">&#34;assert&#34;</span>),
});
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span>) <span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">plugins</span> <span style="color:#f92672">=</span> [];
<span style="color:#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">&#34;buffer&#34;</span>, <span style="color:#e6db74">&#34;Buffer&#34;</span>],
})
);
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">config</span>;
};
</code></pre></div><p>Use <code>react-app-rewired</code> in the <code>package.json</code>, instead of <code>react-scripts</code>:</p>
<pre tabindex="0"><code> &quot;scripts&quot;: {
- &quot;start&quot;: &quot;react-scripts start&quot;,
- &quot;build&quot;: &quot;react-scripts build&quot;,
- &quot;test&quot;: &quot;react-scripts test&quot;,
- &quot;eject&quot;: &quot;react-scripts eject&quot;
+ &quot;start&quot;: &quot;react-app-rewired start&quot;,
+ &quot;build&quot;: &quot;react-app-rewired build&quot;,
+ &quot;test&quot;: &quot;react-app-rewired test&quot;,
+ &quot;eject&quot;: &quot;react-app-rewired eject&quot;
},
</code></pre><h2 id="start-development-server">
Start development server
<a class="anchor" href="#start-development-server">#</a>
</h2>
<p>You can now start the development server to serve your dApp at http://localhost:3000/ while we 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 start
</code></pre></div><p>
<a href="/docs/guides/vote_poll_sdk/poll_sdk/" class="book-btn">
Back
</a>
<a href="/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="book-btn">
Next: Connect to the Ethereum Wallet
</a>
</p>
</article>
<footer class="book-footer">
<div class="flex flex-wrap justify-between">
<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 27, 2022</span>
</a>
</div>
<div>
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp.md" target="_blank" rel="noopener">
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
<span>Edit this page</span>
</a>
</div>
</div>
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
</footer>
<div class="book-comments">
</div>
<label for="menu-control" class="hidden book-menu-overlay"></label>
</div>
<aside class="book-toc">
<div class="book-toc-content">
<nav id="TableOfContents">
<ul>
<li><a href="#create-the-dapp-and-install-dependencies">Create the DApp and Install Dependencies</a>
<ul>
<li><a href="#create-react-app">Create React App</a></li>
<li><a href="#setup-polyfills">Setup polyfills</a>
<ul>
<li><a href="#webpack-5">Webpack 5</a></li>
<li><a href="#react-app-rewired">React-App-Rewired</a></li>
</ul>
</li>
<li><a href="#start-development-server">Start development server</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
</main>
</body>
</html>

835
docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/index.html Normal file
View File

@ -0,0 +1,835 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user&rsquo;s wallet. Delete the template App component:
rm -f App.tsx App.css App.test.tsx Top bar # Use TopBar component to display wallet information. For that, create a PollPage component that includes the top bar and will include the poll elements. The component uses ethers to connect to the user&rsquo;s wallet:">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Connect to the Ethereum Wallet" />
<meta property="og:description" content="Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user&rsquo;s wallet. Delete the template App component:
rm -f App.tsx App.css App.test.tsx Top bar # Use TopBar component to display wallet information. For that, create a PollPage component that includes the top bar and will include the poll elements. The component uses ethers to connect to the user&rsquo;s wallet:" />
<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-24T12:17:00+11:00" />
<title>Connect to the Ethereum Wallet | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
</head>
<body dir="ltr">
<input type="checkbox" class="hidden toggle" id="menu-control" />
<input type="checkbox" class="hidden toggle" id="toc-control" />
<main class="container flex">
<aside class="book-menu">
<div class="book-menu-content">
<nav>
<h2 class="book-brand">
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
</a>
</h2>
<div class="book-search">
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
<div class="book-search-spinner hidden"></div>
<ul id="book-search-results"></ul>
</div>
<ul class="book-languages">
<li>
<input type="checkbox" id="languages" class="toggle" />
<label for="languages" class="flex justify-between">
<a role="button" class="flex align-center">
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
English
</a>
</label>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/es/">
Español
</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/pt/">
Português
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations &amp; Videos</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class=" active">Connect to the Ethereum Wallet</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
</li>
</ul>
<ul>
<li>
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
<li>
<a href="https://vac.dev/" target="_blank" rel="noopener">
Vac Team
</a>
</li>
<li>
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
Vac RFCs
</a>
</li>
<li>
<a href="https://status.im/" target="_blank" rel="noopener">
Status.im
</a>
</li>
</ul>
</nav>
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
</div>
</aside>
<div class="book-page">
<header class="book-header">
<div class="flex align-center justify-between">
<label for="menu-control">
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
</label>
<strong>Connect to the Ethereum Wallet</strong>
<label for="toc-control">
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
</label>
</div>
<aside class="hidden clearfix">
<nav id="TableOfContents">
<ul>
<li><a href="#connect-to-the-ethereum-wallet">Connect to the Ethereum Wallet</a>
<ul>
<li><a href="#top-bar">Top bar</a></li>
<li><a href="#page">Page</a>
<ul>
<li><a href="#usedapp">UseDApp</a></li>
<li><a href="#styled-components">Styled-components</a></li>
<li><a href="#render">Render</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
</header>
<article class="markdown"><h1 id="connect-to-the-ethereum-wallet">
Connect to the Ethereum Wallet
<a class="anchor" href="#connect-to-the-ethereum-wallet">#</a>
</h1>
<blockquote class="book-hint info">
This section may be skipped if you are adding the poll feature to an existing dApp
that already connects to the user&rsquo;s wallet.
</blockquote>
<p>Delete the template <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-shell" data-lang="shell">rm -f App.tsx App.css App.test.tsx
</code></pre></div><h2 id="top-bar">
Top bar
<a class="anchor" href="#top-bar">#</a>
</h2>
<p>Use <code>TopBar</code> component to display wallet information.
For that, create a <code>PollPage</code> component that includes the top bar and will include the poll elements.
The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>);
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
} <span style="color:#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> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
);
}
</code></pre></div><h2 id="page">
Page
<a class="anchor" href="#page">#</a>
</h2>
<h3 id="usedapp">
UseDApp
<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">&#34;@usedapp/core&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">DEFAULT_CONFIG</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core/dist/cjs/src/model/config/default&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">readOnlyChainId</span>: <span style="color:#66d9ef">ChainId.Mainnet</span>,
<span style="color:#a6e22e">readOnlyUrls</span><span style="color:#f92672">:</span> {
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;https://mainnet.infura.io/v3/your-infura-token&#34;</span>,
},
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#34;</span>,
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#34;</span>,
<span style="color:#a6e22e">1337</span>:
<span style="color:#66d9ef">process.env.GANACHE_MULTICALL_CONTRACT</span> <span style="color:#f92672">??</span>
<span style="color:#e6db74">&#34;0x0000000000000000000000000000000000000000&#34;</span>,
},
<span style="color:#a6e22e">supportedChains</span><span style="color:#f92672">:</span> [...<span style="color:#a6e22e">DEFAULT_CONFIG</span>.<span style="color:#a6e22e">supportedChains</span>, <span style="color:#ae81ff">1337</span>],
<span style="color:#a6e22e">notifications</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">checkInterval</span>: <span style="color:#66d9ef">500</span>,
<span style="color:#a6e22e">expirationPeriod</span>: <span style="color:#66d9ef">50000</span>,
},
};
</code></pre></div><p>Replace <code>your-infura-token</code> with your <a href="https://infura.io/docs/ethereum">Infura API token</a>.</p>
<h3 id="styled-components">
Styled-components
<a class="anchor" href="#styled-components">#</a>
</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">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
</span><span style="color:#e6db74"> height: 100%;
</span><span style="color:#e6db74"> width: 100%;
</span><span style="color:#e6db74">`</span>;
</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> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">GlobalStyle</span> /&gt;
&lt;<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}&gt;
&lt;<span style="color:#f92672">PollPage</span> /&gt;
&lt;/<span style="color:#f92672">DAppProvider</span>&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
</code></pre></div><p>Your <code>index.tsx</code> should now be:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, { <span style="color:#a6e22e">useEffect</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react-dom&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#34;./index.css&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">orangeTheme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/cjs/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">DEFAULT_CONFIG</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core/dist/cjs/src/model/config/default&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">readOnlyChainId</span>: <span style="color:#66d9ef">ChainId.Mainnet</span>,
<span style="color:#a6e22e">readOnlyUrls</span><span style="color:#f92672">:</span> {
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span>
<span style="color:#e6db74">&#34;https://mainnet.infura.io/v3/b4451d780cc64a078ccf2181e872cfcf&#34;</span>,
},
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#34;</span>,
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#34;</span>,
<span style="color:#a6e22e">1337</span>:
<span style="color:#66d9ef">process.env.GANACHE_MULTICALL_CONTRACT</span> <span style="color:#f92672">??</span>
<span style="color:#e6db74">&#34;0x0000000000000000000000000000000000000000&#34;</span>,
},
<span style="color:#a6e22e">supportedChains</span><span style="color:#f92672">:</span> [...<span style="color:#a6e22e">DEFAULT_CONFIG</span>.<span style="color:#a6e22e">supportedChains</span>, <span style="color:#ae81ff">1337</span>],
<span style="color:#a6e22e">notifications</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">checkInterval</span>: <span style="color:#66d9ef">500</span>,
<span style="color:#a6e22e">expirationPeriod</span>: <span style="color:#66d9ef">50000</span>,
},
};
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>);
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
} <span style="color:#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> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
);
}
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">GlobalStyle</span> /&gt;
&lt;<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}&gt;
&lt;<span style="color:#f92672">PollPage</span> /&gt;
&lt;/<span style="color:#f92672">DAppProvider</span>&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
</span><span style="color:#e6db74"> height: 100%;
</span><span style="color:#e6db74"> width: 100%;
</span><span style="color:#e6db74">`</span>;
<span style="color:#a6e22e">ReactDOM</span>.<span style="color:#a6e22e">render</span>(
&lt;<span style="color:#f92672">React.StrictMode</span>&gt;
&lt;<span style="color:#f92672">App</span> /&gt;
&lt;/<span style="color:#f92672">React.StrictMode</span>&gt;,
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;root&#34;</span>)
);
</code></pre></div><p>
<a href="/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="book-btn">
Back
</a>
<a href="/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="book-btn">
Next: Create-A-Poll Button
</a>
</p>
</article>
<footer class="book-footer">
<div class="flex flex-wrap justify-between">
<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>
</div>
<div>
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet.md" target="_blank" rel="noopener">
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
<span>Edit this page</span>
</a>
</div>
</div>
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
</footer>
<div class="book-comments">
</div>
<label for="menu-control" class="hidden book-menu-overlay"></label>
</div>
<aside class="book-toc">
<div class="book-toc-content">
<nav id="TableOfContents">
<ul>
<li><a href="#connect-to-the-ethereum-wallet">Connect to the Ethereum Wallet</a>
<ul>
<li><a href="#top-bar">Top bar</a></li>
<li><a href="#page">Page</a>
<ul>
<li><a href="#usedapp">UseDApp</a></li>
<li><a href="#styled-components">Styled-components</a></li>
<li><a href="#render">Render</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
</main>
</body>
</html>

168
docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/index.html
View File

@ -14,14 +14,14 @@ useWakuPolling takes:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_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-02-04T03:44:23+01:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Poll Creation Component | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -257,6 +257,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -296,6 +309,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -635,74 +661,96 @@ 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">React</span>, { <span style="color:#a6e22e">useMemo</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@ethersproject/providers&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-hooks&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, { <span style="color:#a6e22e">useMemo</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-hooks&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">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">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">multicallAddress</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">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">multicallAddress</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">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">multicallAddress</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useMemo</span>(() <span style="color:#f92672">=&gt;</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">account</span>, [<span style="color:#a6e22e">account</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">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">multicallAddress</span>
);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useMemo</span>(() <span style="color:#f92672">=&gt;</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">account</span>, [<span style="color:#a6e22e">account</span>]);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&amp;&amp;</span> (
&lt;<span style="color:#f92672">PollCreation</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}/&gt;
)}
{
&lt;<span style="color:#f92672">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}&gt;
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&amp;&amp;</span> (
&lt;<span style="color:#f92672">PollCreation</span>
<span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>}
<span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
/&gt;
)}
{
&lt;<span style="color:#f92672">CreateButton</span>
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
}}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
&gt;
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
</code></pre></div><p>Then pass them in <code>MainPage</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>TOKEN_ADDRESS</code> can be any ERC20 token that will be used to token gate people from voting and creating polls.</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">const</span> <span style="color:#a6e22e">TOKEN_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#39;</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">TOKEN_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;0xeefba1e63905ef1d7acba5a8513c70307c1ce441&#34;</span>;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage() {</span>
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span>
<span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;Poll dApp&#39;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;<span style="color:#f92672">Poll</span>
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;demo-poll-dapp&#39;</span>}
<span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">provider</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:#a6e22e">TOKEN_ADDRESS</span>}
<span style="color:#a6e22e">multicallAddress</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">MULTICALL_ADDRESS</span>}
/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
)
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;<span style="color:#f92672">Poll</span>
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;demo-poll-dapp&#34;</span>}
<span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">provider</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:#a6e22e">TOKEN_ADDRESS</span>}
<span style="color:#a6e22e">multicallAddress</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">MULTICALL_ADDRESS</span>}
/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
);
}
</code></pre></div><blockquote class="book-hint info">
If you are using ethers web3 connector it is recommended to only render <code>Poll</code> component if provider is not undefined.
@ -740,9 +788,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/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 4, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

752
docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/index.html Normal file
View File

@ -0,0 +1,752 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
import styled from &#34;styled-components&#34;; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } `; Button # Create a button that will display the PollCreation component on click.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Create-A-Poll Button" />
<meta property="og:description" content="Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
import styled from &#34;styled-components&#34;; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } `; Button # Create a button that will display the PollCreation component on click." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Create-A-Poll Button | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
</head>
<body dir="ltr">
<input type="checkbox" class="hidden toggle" id="menu-control" />
<input type="checkbox" class="hidden toggle" id="toc-control" />
<main class="container flex">
<aside class="book-menu">
<div class="book-menu-content">
<nav>
<h2 class="book-brand">
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
</a>
</h2>
<div class="book-search">
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
<div class="book-search-spinner hidden"></div>
<ul id="book-search-results"></ul>
</div>
<ul class="book-languages">
<li>
<input type="checkbox" id="languages" class="toggle" />
<label for="languages" class="flex justify-between">
<a role="button" class="flex align-center">
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
English
</a>
</label>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/es/">
Español
</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/pt/">
Português
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations &amp; Videos</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class=" active">Create-A-Poll Button</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
</li>
</ul>
<ul>
<li>
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
<li>
<a href="https://vac.dev/" target="_blank" rel="noopener">
Vac Team
</a>
</li>
<li>
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
Vac RFCs
</a>
</li>
<li>
<a href="https://status.im/" target="_blank" rel="noopener">
Status.im
</a>
</li>
</ul>
</nav>
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
</div>
</aside>
<div class="book-page">
<header class="book-header">
<div class="flex align-center justify-between">
<label for="menu-control">
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
</label>
<strong>Create-A-Poll Button</strong>
<label for="toc-control">
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
</label>
</div>
<aside class="hidden clearfix">
<nav id="TableOfContents">
<ul>
<li><a href="#create-a-poll-button">Create-A-Poll Button</a>
<ul>
<li><a href="#styled-components">Styled-components</a></li>
<li><a href="#button">Button</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
</header>
<article class="markdown"><h1 id="create-a-poll-button">
Create-A-Poll Button
<a class="anchor" href="#create-a-poll-button">#</a>
</h1>
<p>Create the <code>Poll</code> 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.</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">mkdir components
touch components/Poll.tsx
</code></pre></div><h2 id="styled-components">
Styled-components
<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">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
</span><span style="color:#e6db74"> display: flex;
</span><span style="color:#e6db74"> flex-direction: column;
</span><span style="color:#e6db74"> align-items: center;
</span><span style="color:#e6db74"> max-width: 1146px;
</span><span style="color:#e6db74"> position: relative;
</span><span style="color:#e6db74"> margin: 0 auto;
</span><span style="color:#e6db74"> padding: 150px 32px 50px;
</span><span style="color:#e6db74"> width: 100%;
</span><span style="color:#e6db74"> @media (max-width: 1146px) {
</span><span style="color:#e6db74"> max-width: 780px;
</span><span style="color:#e6db74"> }
</span><span style="color:#e6db74"> @media (max-width: 600px) {
</span><span style="color:#e6db74"> padding: 132px 16px 32px;
</span><span style="color:#e6db74"> }
</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>;
</code></pre></div><h2 id="button">
Button
<a class="anchor" href="#button">#</a>
</h2>
<p>Create a button that will display the <code>PollCreation</code> component on click.
To create a poll, we need access to the wallet,
thus the button must be disabled if the wallet is not connected.</p>
<p>The button is disabled if <code>signer</code> is undefined.
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">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>;
};
<span style="color:#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">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{
&lt;<span style="color:#f92672">CreateButton</span>
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
}}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
&gt;
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
</code></pre></div><p>Now update the <code>PollPage</code> component to render the new <code>Poll</code> component:</p>
<p><code>index.tsx</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>);
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
} <span style="color:#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> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;<span style="color:#f92672">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>} /&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
);
}
</code></pre></div><p>Now, you have a button:</p>
<p><img src="/assets/poll_sdk/create-poll-button.png" alt="Create a poll button" /></p>
<p>
<a href="/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="book-btn">
Back
</a>
<a href="/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="book-btn">
Next: Poll Creation Component
</a>
</p>
</article>
<footer class="book-footer">
<div class="flex flex-wrap justify-between">
<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>
</div>
<div>
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button.md" target="_blank" rel="noopener">
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
<span>Edit this page</span>
</a>
</div>
</div>
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
</footer>
<div class="book-comments">
</div>
<label for="menu-control" class="hidden book-menu-overlay"></label>
</div>
<aside class="book-toc">
<div class="book-toc-content">
<nav id="TableOfContents">
<ul>
<li><a href="#create-a-poll-button">Create-A-Poll Button</a>
<ul>
<li><a href="#styled-components">Styled-components</a></li>
<li><a href="#button">Button</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
</main>
</body>
</html>

98
docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/index.html
View File

@ -6,24 +6,24 @@
<meta name="description" content="Poll List Component # To display existing polls, the PollList component is provided.
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
components/Poll.tsx:
import React, { useMemo, useState } from &#39;react&#39; import styled from &#39;styled-components&#39; import { PollCreation, PollList } from &#39;@waku/poll-sdk-react-components&#39; import { 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; type PollProps = { appName: string library: Web3Provider | undefined account: string | null | undefined theme: Theme tokenAddress: string multicallAddress: string } export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, multicallAddress) const disabled = useMemo(() =&gt; !">
import React, { useMemo, useState } from &#34;react&#34;; import styled from &#34;styled-components&#34;; import { PollCreation, PollList } from &#34;@waku/poll-sdk-react-components&#34;; import { 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;; type PollProps = { appName: string; library: Web3Provider | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; multicallAddress: string; }; export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress, }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, multicallAddress ); const disabled = useMemo(() =&gt; !">
<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 React, { useMemo, useState } from &#39;react&#39; import styled from &#39;styled-components&#39; import { PollCreation, PollList } from &#39;@waku/poll-sdk-react-components&#39; import { 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; type PollProps = { appName: string library: Web3Provider | undefined account: string | null | undefined theme: Theme tokenAddress: string multicallAddress: string } export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, multicallAddress) const disabled = useMemo(() =&gt; !" />
import React, { useMemo, useState } from &#34;react&#34;; import styled from &#34;styled-components&#34;; import { PollCreation, PollList } from &#34;@waku/poll-sdk-react-components&#34;; import { 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;; type PollProps = { appName: string; library: Web3Provider | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; multicallAddress: string; }; export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress, }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, multicallAddress ); const disabled = useMemo(() =&gt; !" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_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-02-04T03:44:23+01:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Poll List Component | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -259,6 +259,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -298,6 +311,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -627,36 +653,54 @@ 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">React</span>, { <span style="color:#a6e22e">useMemo</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span>, <span style="color:#a6e22e">PollList</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@ethersproject/providers&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-hooks&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, { <span style="color:#a6e22e">useMemo</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span>, <span style="color:#a6e22e">PollList</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-hooks&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">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">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">multicallAddress</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">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">multicallAddress</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">account</span>, <span style="color:#a6e22e">theme</span>, <span style="color:#a6e22e">tokenAddress</span>, <span style="color:#a6e22e">multicallAddress</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">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">multicallAddress</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useMemo</span>(() <span style="color:#f92672">=&gt;</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">account</span>, [<span style="color:#a6e22e">account</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">account</span>,
<span style="color:#a6e22e">theme</span>,
<span style="color:#a6e22e">tokenAddress</span>,
<span style="color:#a6e22e">multicallAddress</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">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">multicallAddress</span>
);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useMemo</span>(() <span style="color:#f92672">=&gt;</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">account</span>, [<span style="color:#a6e22e">account</span>]);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">account</span> <span style="color:#f92672">&amp;&amp;</span> (
&lt;<span style="color:#f92672">PollCreation</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>} /&gt;
&lt;<span style="color:#f92672">PollCreation</span>
<span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>}
<span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
/&gt;
)}
{
&lt;<span style="color:#f92672">CreateButton</span>
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{ <span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#39;lightgrey&#39;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span> }}
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
}}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
@ -666,7 +710,7 @@ It needs the <code>account</code> variable that can be passed as a property to <
}
&lt;<span style="color:#f92672">PollList</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>} /&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
);
}
</code></pre></div><p>Et voila!
The <code>PollList</code> component handles the display of polls:</p>
@ -700,9 +744,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/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 4, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

753
docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/index.html Normal file
View File

@ -0,0 +1,753 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Poll Creation Component # The Poll SDK provides an off-the-shelf component to create a new poll: PollCreation. It takes in a WakuPolling hook that can created with useWakuPolling.
useWakuPolling takes:
appName: Your app name. It is used to generate a unique content topic for your polls. See How to Choose a Content Topic for more information. tokenAddress: The address of your ERC-20 token. Only token holders can create and answer polls.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Poll Creation Component" />
<meta property="og:description" content="Poll Creation Component # The Poll SDK provides an off-the-shelf component to create a new poll: PollCreation. It takes in a WakuPolling hook that can created with useWakuPolling.
useWakuPolling takes:
appName: Your app name. It is used to generate a unique content topic for your polls. See How to Choose a Content Topic for more information. tokenAddress: The address of your ERC-20 token. Only token holders can create and answer polls." />
<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-24T12:17:00+11:00" />
<title>Poll Creation Component | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
</head>
<body dir="ltr">
<input type="checkbox" class="hidden toggle" id="menu-control" />
<input type="checkbox" class="hidden toggle" id="toc-control" />
<main class="container flex">
<aside class="book-menu">
<div class="book-menu-content">
<nav>
<h2 class="book-brand">
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
</a>
</h2>
<div class="book-search">
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
<div class="book-search-spinner hidden"></div>
<ul id="book-search-results"></ul>
</div>
<ul class="book-languages">
<li>
<input type="checkbox" id="languages" class="toggle" />
<label for="languages" class="flex justify-between">
<a role="button" class="flex align-center">
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
English
</a>
</label>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/es/">
Español
</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/pt/">
Português
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations &amp; Videos</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class=" active">Poll Creation Component</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
</li>
</ul>
<ul>
<li>
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
<li>
<a href="https://vac.dev/" target="_blank" rel="noopener">
Vac Team
</a>
</li>
<li>
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
Vac RFCs
</a>
</li>
<li>
<a href="https://status.im/" target="_blank" rel="noopener">
Status.im
</a>
</li>
</ul>
</nav>
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
</div>
</aside>
<div class="book-page">
<header class="book-header">
<div class="flex align-center justify-between">
<label for="menu-control">
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
</label>
<strong>Poll Creation Component</strong>
<label for="toc-control">
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
</label>
</div>
<aside class="hidden clearfix">
<nav id="TableOfContents">
<ul>
<li><a href="#poll-creation-component">Poll Creation Component</a></li>
</ul>
</nav>
</aside>
</header>
<article class="markdown"><h1 id="poll-creation-component">
Poll Creation Component
<a class="anchor" href="#poll-creation-component">#</a>
</h1>
<p>The Poll SDK provides an off-the-shelf component to create a new poll: <code>PollCreation</code>.
It takes in a <code>WakuPolling</code> hook that can created with <code>useWakuPolling</code>.</p>
<p><code>useWakuPolling</code> takes:</p>
<ul>
<li><code>appName</code>: Your app name.
It is used to generate a unique content topic for your polls.
See <a href="/docs/guides/01_choose_content_topic/">How to Choose a Content Topic</a> for more information.</li>
<li><code>tokenAddress</code>: The address of your ERC-20 token.
Only token holders can create and answer polls.</li>
<li><code>provider</code>: The Web3 provider to access the blockchain.</li>
<li><code>multicallAddress</code>: Address to this blockchain&rsquo;s multicall contract.</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">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useConfig</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-hooks&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core/src/constants&#34;</span>;
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">appName</span>: <span style="color:#66d9ef">string</span>;
<span style="color:#a6e22e">library</span>: <span style="color:#66d9ef">Web3Provider</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">chainId</span>: <span style="color:#66d9ef">ChainId</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>;
<span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span>;
};
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({
<span style="color:#a6e22e">appName</span>,
<span style="color:#a6e22e">library</span>,
<span style="color:#a6e22e">signer</span>,
<span style="color:#a6e22e">chainId</span>,
<span style="color:#a6e22e">theme</span>,
<span style="color:#a6e22e">tokenAddress</span>,
}<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useConfig</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuPolling</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuPolling</span>(
<span style="color:#a6e22e">appName</span>,
<span style="color:#a6e22e">tokenAddress</span>,
<span style="color:#a6e22e">library</span>,
<span style="color:#a6e22e">config</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">?</span>.[<span style="color:#a6e22e">chainId</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1337</span>]
);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&amp;&amp;</span> (
&lt;<span style="color:#f92672">PollCreation</span>
<span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>}
<span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
/&gt;
)}
{
&lt;<span style="color:#f92672">CreateButton</span>
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
}}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
&gt;
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
</code></pre></div><p>Then pass them in <code>PollPage</code>.</p>
<p>In this example, we use <code>demo-poll-dapp</code> for the app name and the mainnet SNT token contract for the token address.
Replace those with your own.</p>
<p><code>index.tsx</code></p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">chainId</span> } <span style="color:#f92672">=</span>
<span style="color:#a6e22e">useEthers</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>&lt;<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>&gt;(<span style="color:#66d9ef">undefined</span>);
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
} <span style="color:#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> (
&lt;<span style="color:#f92672">div</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;Poll dApp&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
&lt;<span style="color:#f92672">Poll</span>
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;demo-poll-dapp&#34;</span>}
<span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>}
<span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>}
<span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#34;</span>}
/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
);
}
</code></pre></div><p>You can now see the poll creation modal when clicking on the button:</p>
<p><img src="/assets/poll_sdk/create-a-poll-component.png" alt="Create a poll modal" /></p>
<p><img src="/assets/poll_sdk/poll-created.png" alt="Confirmation modal" /></p>
<p>
<a href="/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="book-btn">
Back
</a>
<a href="/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="book-btn">
Next: Poll List Component
</a>
</p>
</article>
<footer class="book-footer">
<div class="flex flex-wrap justify-between">
<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>
</div>
<div>
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation.md" target="_blank" rel="noopener">
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
<span>Edit this page</span>
</a>
</div>
</div>
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
</footer>
<div class="book-comments">
</div>
<label for="menu-control" class="hidden book-menu-overlay"></label>
</div>
<aside class="book-toc">
<div class="book-toc-content">
<nav id="TableOfContents">
<ul>
<li><a href="#poll-creation-component">Poll Creation Component</a></li>
</ul>
</nav>
</div>
</aside>
</main>
</body>
</html>

718
docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/index.html Normal file
View File

@ -0,0 +1,718 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 &#34;react&#34;; import { useConfig } from &#34;@usedapp/core&#34;; import { PollCreation, PollList } from &#34;@waku/poll-sdk-react-components&#34;; import { JsonRpcSigner, Web3Provider } from &#34;@ethersproject/providers&#34;; import { useWakuPolling } from &#34;@waku/poll-sdk-react-hooks&#34;; import { CreateButton } from &#34;@waku/vote-poll-sdk-react-components&#34;; import { Theme } from &#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;; import { ChainId } from &#34;@usedapp/core/src/constants&#34;; type PollProps = { appName: string; library: Web3Provider | undefined; signer: JsonRpcSigner | undefined; chainId: ChainId | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; }; export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress, }: PollProps) { const config = useConfig(); const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, config?">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Poll List Component" />
<meta property="og:description" content="Poll List Component # To display existing polls, the PollList component is provided.
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
components/Poll.tsx:
import { useState } from &#34;react&#34;; import { useConfig } from &#34;@usedapp/core&#34;; import { PollCreation, PollList } from &#34;@waku/poll-sdk-react-components&#34;; import { JsonRpcSigner, Web3Provider } from &#34;@ethersproject/providers&#34;; import { useWakuPolling } from &#34;@waku/poll-sdk-react-hooks&#34;; import { CreateButton } from &#34;@waku/vote-poll-sdk-react-components&#34;; import { Theme } from &#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;; import { ChainId } from &#34;@usedapp/core/src/constants&#34;; type PollProps = { appName: string; library: Web3Provider | undefined; signer: JsonRpcSigner | undefined; chainId: ChainId | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; }; export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress, }: PollProps) { const config = useConfig(); const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, config?" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
<title>Poll List Component | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
</head>
<body dir="ltr">
<input type="checkbox" class="hidden toggle" id="menu-control" />
<input type="checkbox" class="hidden toggle" id="toc-control" />
<main class="container flex">
<aside class="book-menu">
<div class="book-menu-content">
<nav>
<h2 class="book-brand">
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
</a>
</h2>
<div class="book-search">
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
<div class="book-search-spinner hidden"></div>
<ul id="book-search-results"></ul>
</div>
<ul class="book-languages">
<li>
<input type="checkbox" id="languages" class="toggle" />
<label for="languages" class="flex justify-between">
<a role="button" class="flex align-center">
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
English
</a>
</label>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/es/">
Español
</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/pt/">
Português
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations &amp; Videos</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
<ul>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class=" active">Poll List Component</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
</li>
</ul>
<ul>
<li>
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
JS-Waku API Doc
</a>
</li>
<li>
<a href="https://vac.dev/" target="_blank" rel="noopener">
Vac Team
</a>
</li>
<li>
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
Vac RFCs
</a>
</li>
<li>
<a href="https://status.im/" target="_blank" rel="noopener">
Status.im
</a>
</li>
</ul>
</nav>
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
</div>
</aside>
<div class="book-page">
<header class="book-header">
<div class="flex align-center justify-between">
<label for="menu-control">
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
</label>
<strong>Poll List Component</strong>
<label for="toc-control">
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
</label>
</div>
<aside class="hidden clearfix">
<nav id="TableOfContents">
<ul>
<li><a href="#poll-list-component">Poll List Component</a></li>
</ul>
</nav>
</aside>
</header>
<article class="markdown"><h1 id="poll-list-component">
Poll List Component
<a class="anchor" href="#poll-list-component">#</a>
</h1>
<p>To display existing polls, the <code>PollList</code> component is provided.</p>
<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">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useConfig</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span>, <span style="color:#a6e22e">PollList</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@ethersproject/providers&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/poll-sdk-react-hooks&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core/src/constants&#34;</span>;
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">appName</span>: <span style="color:#66d9ef">string</span>;
<span style="color:#a6e22e">library</span>: <span style="color:#66d9ef">Web3Provider</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">chainId</span>: <span style="color:#66d9ef">ChainId</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">account</span>: <span style="color:#66d9ef">string</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">null</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>;
<span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span>;
};
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({
<span style="color:#a6e22e">appName</span>,
<span style="color:#a6e22e">library</span>,
<span style="color:#a6e22e">signer</span>,
<span style="color:#a6e22e">chainId</span>,
<span style="color:#a6e22e">account</span>,
<span style="color:#a6e22e">theme</span>,
<span style="color:#a6e22e">tokenAddress</span>,
}<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useConfig</span>();
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuPolling</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuPolling</span>(
<span style="color:#a6e22e">appName</span>,
<span style="color:#a6e22e">tokenAddress</span>,
<span style="color:#a6e22e">library</span>,
<span style="color:#a6e22e">config</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">?</span>.[<span style="color:#a6e22e">chainId</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1337</span>]
);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&amp;&amp;</span> (
&lt;<span style="color:#f92672">PollCreation</span>
<span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>}
<span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
/&gt;
)}
{
&lt;<span style="color:#f92672">CreateButton</span>
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
}}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
&gt;
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
&lt;<span style="color:#f92672">PollList</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>} /&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
</code></pre></div><p>Pass the <code>account</code> to <code>Poll</code> in <code>index.tsx</code>:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx">&lt;<span style="color:#f92672">Poll</span>
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
<span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;demo-poll-dapp&#34;</span>}
<span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>}
<span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>}
<span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#34;</span>}
/&gt;
</code></pre></div><p>Et voila!
The <code>PollList</code> component handles the display of polls:</p>
<p><img src="/assets/poll_sdk/listed-polls.png" alt="Poll List" /></p>
<p>And answering them:</p>
<p><img src="/assets/poll_sdk/listed-polls-with-answer.png" alt="Poll list with answered" /></p>
<p>You can find the resulting code in the <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/main/examples/mainnet-poll">examples folder</a>.</p>
<blockquote class="book-hint info">
The example above uses webpack 5 instead of react-app-rewired.
It also allows passing a token contract address in the url, as described in the <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/blob/main/examples/mainnet-poll/README.md">README</a>.
</blockquote>
<p>The final gif:</p>
<p><img src="/assets/poll_sdk/wakuconnect-poll-demo.gif" alt="Poll demo" /></p>
<a href="/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="book-btn">
Back
</a>
</article>
<footer class="book-footer">
<div class="flex flex-wrap justify-between">
<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>
</div>
<div>
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list.md" target="_blank" rel="noopener">
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
<span>Edit this page</span>
</a>
</div>
</div>
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
</footer>
<div class="book-comments">
</div>
<label for="menu-control" class="hidden book-menu-overlay"></label>
</div>
<aside class="book-toc">
<div class="book-toc-content">
<nav id="TableOfContents">
<ul>
<li><a href="#poll-list-component">Poll List Component</a></li>
</ul>
</nav>
</div>
</aside>
</main>
</body>
</html>

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

@ -18,7 +18,7 @@ The resulting code of this guide can be found at https://github.">
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" 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
@ -255,6 +255,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -294,6 +307,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

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

@ -38,7 +38,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 React, { useMemo, useState } from &amp;#39;react&amp;#39; import styled from &amp;#39;styled-components&amp;#39; import { PollCreation, PollList } from &amp;#39;@waku/poll-sdk-react-components&amp;#39; import { Web3Provider } from &amp;#39;@ethersproject/providers&amp;#39; import { useWakuPolling } from &amp;#39;@waku/poll-sdk-react-hooks&amp;#39; import { CreateButton } from &amp;#39;@waku/vote-poll-sdk-react-components&amp;#39; import { Theme } from &amp;#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&amp;#39; type PollProps = { appName: string library: Web3Provider | undefined account: string | null | undefined theme: Theme tokenAddress: string multicallAddress: string } export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, multicallAddress) const disabled = useMemo(() =&amp;gt; !</description>
import React, { useMemo, useState } from &amp;#34;react&amp;#34;; import styled from &amp;#34;styled-components&amp;#34;; import { PollCreation, PollList } from &amp;#34;@waku/poll-sdk-react-components&amp;#34;; import { Web3Provider } from &amp;#34;@ethersproject/providers&amp;#34;; import { useWakuPolling } from &amp;#34;@waku/poll-sdk-react-hooks&amp;#34;; import { CreateButton } from &amp;#34;@waku/vote-poll-sdk-react-components&amp;#34;; import { Theme } from &amp;#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&amp;#34;; type PollProps = { appName: string; library: Web3Provider | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; multicallAddress: string; }; export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress, }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, multicallAddress ); const disabled = useMemo(() =&amp;gt; !</description>
</item>
</channel>

113
docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/index.html
View File

@ -6,24 +6,24 @@
<meta name="description" content="Deploy smart contract # Creating new package # For this deployment we will create a new package.
mkdir contract-deployment cd contract-deployment yarn init yarn add @waku/vote-sdk-contracts ethers ts-node typescript Create a tsconfig.json with:
{ &#34;compilerOptions&#34;: { &#34;target&#34;: &#34;es2020&#34;, &#34;module&#34;: &#34;commonJS&#34;, &#34;esModuleInterop&#34;: true, &#34;moduleResolution&#34;: &#34;node&#34;, &#34;resolveJsonModule&#34;: true, &#34;noEmit&#34;: true } } And now we can add a deploy script index.ts:
import {ContractFactory, getDefaultProvider, Wallet} from &#39;ethers&#39;; import VotingContract from &#39;@waku/vote-sdk-contracts/build/VotingContract.">
import { ContractFactory, getDefaultProvider, Wallet } from &#34;ethers&#34;; import VotingContract from &#34;@waku/vote-sdk-contracts/build/VotingContract.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Deploy smart contract" />
<meta property="og:description" content="Deploy smart contract # Creating new package # For this deployment we will create a new package.
mkdir contract-deployment cd contract-deployment yarn init yarn add @waku/vote-sdk-contracts ethers ts-node typescript Create a tsconfig.json with:
{ &#34;compilerOptions&#34;: { &#34;target&#34;: &#34;es2020&#34;, &#34;module&#34;: &#34;commonJS&#34;, &#34;esModuleInterop&#34;: true, &#34;moduleResolution&#34;: &#34;node&#34;, &#34;resolveJsonModule&#34;: true, &#34;noEmit&#34;: true } } And now we can add a deploy script index.ts:
import {ContractFactory, getDefaultProvider, Wallet} from &#39;ethers&#39;; import VotingContract from &#39;@waku/vote-sdk-contracts/build/VotingContract." />
import { ContractFactory, getDefaultProvider, Wallet } from &#34;ethers&#34;; import VotingContract from &#34;@waku/vote-sdk-contracts/build/VotingContract." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" /><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-02-04T03:44:23+01:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Deploy smart contract | 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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -259,6 +259,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -298,6 +311,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -650,44 +676,53 @@ yarn add @waku/vote-sdk-contracts ethers ts-node typescript
}
}
</code></pre></div><p>And now we can add a deploy script <code>index.ts</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">ContractFactory</span>, <span style="color:#a6e22e">getDefaultProvider</span>, <span style="color:#a6e22e">Wallet</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;ethers&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">VotingContract</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;@waku/vote-sdk-contracts/build/VotingContract.json&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">readline</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;readline&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ContractFactory</span>, <span style="color:#a6e22e">getDefaultProvider</span>, <span style="color:#a6e22e">Wallet</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;ethers&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">VotingContract</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;@waku/vote-sdk-contracts/build/VotingContract.json&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">readline</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;readline&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">rl</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">readline</span>.<span style="color:#a6e22e">createInterface</span>({<span style="color:#a6e22e">input</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">stdin</span>, <span style="color:#a6e22e">output</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">stdout</span>});
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">prompt</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">query</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">string</span>) =&gt; <span style="color:#66d9ef">new</span> Promise(<span style="color:#a6e22e">resolve</span> =&gt; <span style="color:#a6e22e">rl</span>.<span style="color:#a6e22e">question</span>(<span style="color:#a6e22e">query</span>, <span style="color:#a6e22e">resolve</span>));
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">rl</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">readline</span>.<span style="color:#a6e22e">createInterface</span>({
<span style="color:#a6e22e">input</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">stdin</span>,
<span style="color:#a6e22e">output</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">stdout</span>,
});
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">prompt</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">query</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">string</span>) =&gt;
<span style="color:#66d9ef">new</span> Promise((<span style="color:#a6e22e">resolve</span>) =&gt; <span style="color:#a6e22e">rl</span>.<span style="color:#a6e22e">question</span>(<span style="color:#a6e22e">query</span>, <span style="color:#a6e22e">resolve</span>));
<span style="color:#66d9ef">try</span> {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">privateKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">2</span>];
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">providerName</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">3</span>];
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tokenAddress</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">4</span>];
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">voteDuration</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">5</span>];
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">provider</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getDefaultProvider</span>(<span style="color:#a6e22e">providerName</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wallet</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Wallet</span>(<span style="color:#a6e22e">privateKey</span>, <span style="color:#a6e22e">provider</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">contract</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">ContractFactory</span>.<span style="color:#a6e22e">fromSolidity</span>(<span style="color:#a6e22e">VotingContract</span>, <span style="color:#a6e22e">wallet</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">privateKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">2</span>];
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">providerName</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">3</span>];
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tokenAddress</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">4</span>];
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">voteDuration</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">5</span>];
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">provider</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getDefaultProvider</span>(<span style="color:#a6e22e">providerName</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wallet</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Wallet</span>(<span style="color:#a6e22e">privateKey</span>, <span style="color:#a6e22e">provider</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">contract</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">ContractFactory</span>.<span style="color:#a6e22e">fromSolidity</span>(<span style="color:#a6e22e">VotingContract</span>, <span style="color:#a6e22e">wallet</span>);
<span style="color:#66d9ef">new</span> Promise(<span style="color:#66d9ef">async</span> () =&gt; {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;\x1b[1m&#34;</span>)
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`You are about to deploy a voting smart contract\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Wallet address: \t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">wallet</span>.<span style="color:#a6e22e">address</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Provider name: \t\t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">provider</span>.<span style="color:#a6e22e">network</span>.<span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Provider chainID: \t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">provider</span>.<span style="color:#a6e22e">network</span>.<span style="color:#a6e22e">chainId</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Token address to use: \t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">tokenAddress</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Vote duration: \t\t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">voteDuration</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1000</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> seconds\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;Please verify that above parameters are correct&#39;</span>)
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;WARNING: this operation WILL use ether&#39;</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">answer</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">prompt</span>(<span style="color:#e6db74">&#39;If you are sure that you want to continue write [yes]:&#39;</span>)
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">answer</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;yes&#39;</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">answer</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;Yes&#39;</span>) {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">deployedContract</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">contract</span>.<span style="color:#a6e22e">deploy</span>(<span style="color:#a6e22e">tokenAddress</span>, <span style="color:#a6e22e">voteDuration</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1000</span>)
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`contract deployed with address </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">deployedContract</span>.<span style="color:#a6e22e">address</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>)
} <span style="color:#66d9ef">else</span> {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;Aborted&#39;</span>)
}
<span style="color:#a6e22e">rl</span>.<span style="color:#a6e22e">close</span>()
})
<span style="color:#66d9ef">new</span> Promise(<span style="color:#66d9ef">async</span> () =&gt; {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;\x1b[1m&#34;</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`You are about to deploy a voting smart contract\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Wallet address: \t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">wallet</span>.<span style="color:#a6e22e">address</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Provider name: \t\t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">provider</span>.<span style="color:#a6e22e">network</span>.<span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Provider chainID: \t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">provider</span>.<span style="color:#a6e22e">network</span>.<span style="color:#a6e22e">chainId</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Token address to use: \t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">tokenAddress</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Vote duration: \t\t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">voteDuration</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1000</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> seconds\n`</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Please verify that above parameters are correct&#34;</span>);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;WARNING: this operation WILL use ether&#34;</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">answer</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">prompt</span>(
<span style="color:#e6db74">&#34;If you are sure that you want to continue write [yes]:&#34;</span>
);
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">answer</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;yes&#34;</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">answer</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;Yes&#34;</span>) {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">deployedContract</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">contract</span>.<span style="color:#a6e22e">deploy</span>(
<span style="color:#a6e22e">tokenAddress</span>,
<span style="color:#a6e22e">voteDuration</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1000</span>
);
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`contract deployed with address </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">deployedContract</span>.<span style="color:#a6e22e">address</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>);
} <span style="color:#66d9ef">else</span> {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Aborted&#34;</span>);
}
<span style="color:#a6e22e">rl</span>.<span style="color:#a6e22e">close</span>();
});
} <span style="color:#66d9ef">catch</span> {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;Error creating smart contract&#39;</span>);
<span style="color:#a6e22e">rl</span>.<span style="color:#a6e22e">close</span>()
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Error creating smart contract&#34;</span>);
<span style="color:#a6e22e">rl</span>.<span style="color:#a6e22e">close</span>();
}
</code></pre></div><h2 id="running-script">
Running script
@ -739,9 +774,9 @@ If you missed it, you can check last wallet interaction on Etherscan and there y
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 4, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

124
docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/index.html
View File

@ -16,14 +16,14 @@ After that we can start with styling and defining which theme we will be using:"
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_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-02-04T03:44:23+01:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Creating Voting 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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -259,6 +259,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -298,6 +311,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -637,8 +663,8 @@ to <a href="/docs/guides/vote_poll_sdk/dapp_creation/">dApp creation</a>.</p>
</h2>
<p>Let&rsquo;s start by creating a new folder <code>components</code> with file named <code>Voting.tsx</code> inside.</p>
<p>After that we can start with styling and defining which theme we will be using:</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">blueTheme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">blueTheme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">THEME</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">blueTheme</span>;
@ -659,57 +685,61 @@ to <a href="/docs/guides/vote_poll_sdk/dapp_creation/">dApp creation</a>.</p>
</span><span style="color:#e6db74"> @media (max-width: 425px) {
</span><span style="color:#e6db74"> padding: 64px 16px 84px;
</span><span style="color:#e6db74"> }
</span><span style="color:#e6db74">`</span>
</span><span style="color:#e6db74">`</span>;
</code></pre></div><h2 id="adding-react-component">
Adding react component
<a class="anchor" href="#adding-react-component">#</a>
</h2>
<p>Now, create a <code>Voting</code> component that uses the components from the Vote SDK.</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">React</span>, {<span style="color:#a6e22e">useCallback</span>, <span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">NewVotingRoomModal</span>, <span style="color:#a6e22e">VotingRoomList</span>, <span style="color:#a6e22e">VotingRoomListHeader</span>,} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">WakuVoting</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-core&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useVotingRoomsId</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-sdk-react-hooks&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useTokenBalance</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, { <span style="color:#a6e22e">useCallback</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> {
<span style="color:#a6e22e">NewVotingRoomModal</span>,
<span style="color:#a6e22e">VotingRoomList</span>,
<span style="color:#a6e22e">VotingRoomListHeader</span>,
} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuVoting</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-core&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useVotingRoomsId</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-sdk-react-hooks&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useTokenBalance</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">VotingProps</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">wakuVoting</span>: <span style="color:#66d9ef">WakuVoting</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">activate</span><span style="color:#f92672">:</span> () <span style="color:#f92672">=&gt;</span> <span style="color:#66d9ef">void</span>
}
<span style="color:#a6e22e">wakuVoting</span>: <span style="color:#66d9ef">WakuVoting</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">activate</span><span style="color:#f92672">:</span> () <span style="color:#f92672">=&gt;</span> <span style="color:#66d9ef">void</span>;
};
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Voting</span>({<span style="color:#a6e22e">wakuVoting</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">activate</span>}<span style="color:#f92672">:</span> <span style="color:#a6e22e">VotingProps</span>) {
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showNewVoteModal</span>, <span style="color:#a6e22e">setShowNewVoteModal</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">onCreateClick</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useCallback</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#a6e22e">setShowNewVoteModal</span>(<span style="color:#66d9ef">true</span>)
}, [])
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Voting</span>({ <span style="color:#a6e22e">wakuVoting</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">activate</span> }<span style="color:#f92672">:</span> <span style="color:#a6e22e">VotingProps</span>) {
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showNewVoteModal</span>, <span style="color:#a6e22e">setShowNewVoteModal</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">onCreateClick</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useCallback</span>(() <span style="color:#f92672">=&gt;</span> {
<span style="color:#a6e22e">setShowNewVoteModal</span>(<span style="color:#66d9ef">true</span>);
}, []);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">votes</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useVotingRoomsId</span>(<span style="color:#a6e22e">wakuVoting</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tokenBalance</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useTokenBalance</span>(<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">wakuVoting</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">votes</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useVotingRoomsId</span>(<span style="color:#a6e22e">wakuVoting</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tokenBalance</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useTokenBalance</span>(<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">wakuVoting</span>);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">NewVotingRoomModal</span>
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">THEME</span>}
<span style="color:#a6e22e">availableAmount</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">tokenBalance</span>}
<span style="color:#a6e22e">setShowModal</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowNewVoteModal</span>}
<span style="color:#a6e22e">showModal</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">showNewVoteModal</span>}
<span style="color:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>}
/&gt;
&lt;<span style="color:#f92672">VotingRoomListHeader</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:#a6e22e">onConnectClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
<span style="color:#a6e22e">onCreateClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">onCreateClick</span>}
/&gt;
&lt;<span style="color:#f92672">VotingRoomList</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:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>}
<span style="color:#a6e22e">votes</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">votes</span>}
<span style="color:#a6e22e">availableAmount</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">tokenBalance</span>}
/&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">NewVotingRoomModal</span>
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">THEME</span>}
<span style="color:#a6e22e">availableAmount</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">tokenBalance</span>}
<span style="color:#a6e22e">setShowModal</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowNewVoteModal</span>}
<span style="color:#a6e22e">showModal</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">showNewVoteModal</span>}
<span style="color:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>}
/&gt;
&lt;<span style="color:#f92672">VotingRoomListHeader</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:#a6e22e">onConnectClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
<span style="color:#a6e22e">onCreateClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">onCreateClick</span>}
/&gt;
&lt;<span style="color:#f92672">VotingRoomList</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:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>}
<span style="color:#a6e22e">votes</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">votes</span>}
<span style="color:#a6e22e">availableAmount</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">tokenBalance</span>}
/&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
</code></pre></div><p>With that voting component is complete now we can use it in our <code>MainPage</code></p>
<p>
@ -741,9 +771,9 @@ to <a href="/docs/guides/vote_poll_sdk/dapp_creation/">dApp creation</a>.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 4, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

196
docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/index.html
View File

@ -4,24 +4,24 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Use Voting Component # Define Configuration # Configure the dApp by setting:
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &#39;VOTING_ADDRESS&#39; const MULTICALL_ADDRESS = &#39;MULTICALL_ADDRESS&#39; const DAPP_NAME = &#39;YOUR_DAPP_NAME&#39; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
import {useWakuVoting} from &#39;@waku/vote-sdk-react-hooks&#39; export function MainPage() { const {activate, deactivate, account, provider} = useWeb3Connect(SUPPORTED_CHAIN_ID) const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ) } Display Voting Component # Modify the MainPage to render a Voting component.">
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &#34;VOTING_ADDRESS&#34;; const MULTICALL_ADDRESS = &#34;MULTICALL_ADDRESS&#34;; const DAPP_NAME = &#34;YOUR_DAPP_NAME&#34;; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
import { useWakuVoting } from &#34;@waku/vote-sdk-react-hooks&#34;; export function MainPage() { const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID); const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ); } Display Voting Component # Modify the MainPage to render a Voting component.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Use Voting Component" />
<meta property="og:description" content="Use Voting Component # Define Configuration # Configure the dApp by setting:
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &#39;VOTING_ADDRESS&#39; const MULTICALL_ADDRESS = &#39;MULTICALL_ADDRESS&#39; const DAPP_NAME = &#39;YOUR_DAPP_NAME&#39; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
import {useWakuVoting} from &#39;@waku/vote-sdk-react-hooks&#39; export function MainPage() { const {activate, deactivate, account, provider} = useWeb3Connect(SUPPORTED_CHAIN_ID) const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ) } Display Voting Component # Modify the MainPage to render a Voting component." />
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &#34;VOTING_ADDRESS&#34;; const MULTICALL_ADDRESS = &#34;MULTICALL_ADDRESS&#34;; const DAPP_NAME = &#34;YOUR_DAPP_NAME&#34;; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
import { useWakuVoting } from &#34;@waku/vote-sdk-react-hooks&#34;; export function MainPage() { const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID); const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ); } Display Voting Component # Modify the MainPage to render a Voting component." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" /><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-02-04T03:44:23+01:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Use Voting 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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -257,6 +257,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -296,6 +309,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -638,25 +664,26 @@ https://github.com/alex-shpak/hugo-book
<li>Address of the voting smart contract,</li>
<li>Your dApp name.</li>
</ul>
<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">const</span> <span style="color:#a6e22e">VOTING_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;VOTING_ADDRESS&#39;</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;MULTICALL_ADDRESS&#39;</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">DAPP_NAME</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;YOUR_DAPP_NAME&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">VOTING_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;VOTING_ADDRESS&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;MULTICALL_ADDRESS&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">DAPP_NAME</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;YOUR_DAPP_NAME&#34;</span>;
</code></pre></div><h2 id="use-waku-voting">
Use Waku Voting
<a class="anchor" href="#use-waku-voting">#</a>
</h2>
<p>Now, we need a Waku voting object.
For that, call <code>useWakuVoting</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">useWakuVoting</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-sdk-react-hooks&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuVoting</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-sdk-react-hooks&#34;</span>;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuVoting</span>(
<span style="color:#a6e22e">DAPP_NAME</span>,
<span style="color:#a6e22e">VOTING_ADDRESS</span>,
<span style="color:#a6e22e">provider</span>,
<span style="color:#a6e22e">MULTICALL_ADDRESS</span>
)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span>
<span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuVoting</span>(
<span style="color:#a6e22e">DAPP_NAME</span>,
<span style="color:#a6e22e">VOTING_ADDRESS</span>,
<span style="color:#a6e22e">provider</span>,
<span style="color:#a6e22e">MULTICALL_ADDRESS</span>
);
}
</code></pre></div><h2 id="display-voting-component">
Display Voting Component
@ -665,93 +692,88 @@ For that, call <code>useWakuVoting</code>:</p>
<p>Modify the <code>MainPage</code> to render a Voting component.
Before rendering the component, check if <code>wakuVoting</code> has initialized:</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">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;&#39;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;WakuConnect Vote Demo&#39;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">blueTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
{<span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">&amp;&amp;</span>
&lt;<span style="color:#f92672">Voting</span>
<span style="color:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
/&gt;}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;WakuConnect Vote Demo&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">blueTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
{<span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">&amp;&amp;</span> (
&lt;<span style="color:#f92672">Voting</span> <span style="color:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>} <span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>} <span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>} /&gt;
)}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
</code></pre></div><h2 id="resulting-indextsx-file">
Resulting <code>index.tsx</code> File
<a class="anchor" href="#resulting-indextsx-file">#</a>
</h2>
<p>Your <code>index.tsx</code> should now look like:</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">React</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">blueTheme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react-dom&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWeb3Connect</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;./hooks/useWeb3Connect&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Voting</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;./components/Voting&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWakuVoting</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-sdk-react-hooks&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;styled-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">blueTheme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;react-dom&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWeb3Connect</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;./hooks/useWeb3Connect&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Voting</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;./components/Voting&#34;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuVoting</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@waku/vote-sdk-react-hooks&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">VOTING_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;0xCA4093D66280Ec1242b660088188b50fDC14dcC4&#39;</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#39;</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">DAPP_NAME</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;test&#39;</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">3</span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">VOTING_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;0xCA4093D66280Ec1242b660088188b50fDC14dcC4&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;0x53c43764255c17bd724f74c4ef150724ac50a3ed&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">DAPP_NAME</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;test&#34;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">3</span>;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuVoting</span>(
<span style="color:#a6e22e">DAPP_NAME</span>,
<span style="color:#a6e22e">VOTING_ADDRESS</span>,
<span style="color:#a6e22e">provider</span>,
<span style="color:#a6e22e">MULTICALL_ADDRESS</span>
)
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span>
<span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuVoting</span>(
<span style="color:#a6e22e">DAPP_NAME</span>,
<span style="color:#a6e22e">VOTING_ADDRESS</span>,
<span style="color:#a6e22e">provider</span>,
<span style="color:#a6e22e">MULTICALL_ADDRESS</span>
);
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;&#39;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;WakuConnect Vote Demo&#39;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">blueTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
{<span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">&amp;&amp;</span>
&lt;<span style="color:#f92672">Voting</span>
<span style="color:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
/&gt;}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">TopBar</span>
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;&#34;</span>}
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#34;WakuConnect Vote Demo&#34;</span>}
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">blueTheme</span>}
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
/&gt;
{<span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">&amp;&amp;</span> (
&lt;<span style="color:#f92672">Voting</span> <span style="color:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>} <span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>} <span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>} /&gt;
)}
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">GlobalStyle</span>/&gt;
&lt;<span style="color:#f92672">MainPage</span>/&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
)
<span style="color:#66d9ef">return</span> (
&lt;<span style="color:#f92672">Wrapper</span>&gt;
&lt;<span style="color:#f92672">GlobalStyle</span> /&gt;
&lt;<span style="color:#f92672">MainPage</span> /&gt;
&lt;/<span style="color:#f92672">Wrapper</span>&gt;
);
}
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
</span><span style="color:#e6db74"> height: 100%;
</span><span style="color:#e6db74"> width: 100%;
</span><span style="color:#e6db74">`</span>
</span><span style="color:#e6db74">`</span>;
<span style="color:#a6e22e">ReactDOM</span>.<span style="color:#a6e22e">render</span>(
&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;100%&#39;</span>}}&gt;
&lt;<span style="color:#f92672">App</span>/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;,
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#39;root&#39;</span>)
)
&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{ <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;100%&#34;</span> }}&gt;
&lt;<span style="color:#f92672">App</span> /&gt;
&lt;/<span style="color:#f92672">div</span>&gt;,
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;root&#34;</span>)
);
</code></pre></div><p>After starting a page you should be able to see a main page that looks like this:
<img src="/assets/voting_sdk/Voting_Main_Page.png" alt="Main Page" /></p>
<p>You can then create a proposal:
@ -777,9 +799,9 @@ Before rendering the component, check if <code>wakuVoting</code> has initialized
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 4, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

34
docs/guides/vote_poll_sdk/vote_sdk/index.html
View File

@ -18,7 +18,7 @@ The resulting code of this guide can be found in the repo at examples/ropsten-vo
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/index.xml" title="Waku Connect Docs" />
<!--
Made with Book Theme
@ -255,6 +255,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -294,6 +307,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -635,7 +661,7 @@ Hence, you need to have an ERC-20 token contract address ready.</p>
We will continue from this point.</p>
<p>First, add the Vote SDK packages:</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 <span style="color:#ae81ff">\
</span><span style="color:#ae81ff"></span>@waku/vote-sdk-react-components @waku/vote-sdk-react-hooks @waku/vote-poll-sdk-react-components
</span><span style="color:#ae81ff"></span>@waku/vote-sdk-react-components @waku/vote-sdk-react-hooks @waku/vote-poll-sdk-react-components
</code></pre></div>
@ -655,9 +681,9 @@ We will continue from this point.</p>
<div class="flex flex-wrap justify-between">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 4, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

6
docs/guides/vote_poll_sdk/vote_sdk/index.xml
View File

@ -16,7 +16,7 @@
<description>Deploy smart contract # Creating new package # For this deployment we will create a new package.
mkdir contract-deployment cd contract-deployment yarn init yarn add @waku/vote-sdk-contracts ethers ts-node typescript Create a tsconfig.json with:
{ &amp;#34;compilerOptions&amp;#34;: { &amp;#34;target&amp;#34;: &amp;#34;es2020&amp;#34;, &amp;#34;module&amp;#34;: &amp;#34;commonJS&amp;#34;, &amp;#34;esModuleInterop&amp;#34;: true, &amp;#34;moduleResolution&amp;#34;: &amp;#34;node&amp;#34;, &amp;#34;resolveJsonModule&amp;#34;: true, &amp;#34;noEmit&amp;#34;: true } } And now we can add a deploy script index.ts:
import {ContractFactory, getDefaultProvider, Wallet} from &amp;#39;ethers&amp;#39;; import VotingContract from &amp;#39;@waku/vote-sdk-contracts/build/VotingContract.</description>
import { ContractFactory, getDefaultProvider, Wallet } from &amp;#34;ethers&amp;#34;; import VotingContract from &amp;#34;@waku/vote-sdk-contracts/build/VotingContract.</description>
</item>
<item>
@ -38,8 +38,8 @@ After that we can start with styling and defining which theme we will be using:<
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/</guid>
<description>Use Voting Component # Define Configuration # Configure the dApp by setting:
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &amp;#39;VOTING_ADDRESS&amp;#39; const MULTICALL_ADDRESS = &amp;#39;MULTICALL_ADDRESS&amp;#39; const DAPP_NAME = &amp;#39;YOUR_DAPP_NAME&amp;#39; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
import {useWakuVoting} from &amp;#39;@waku/vote-sdk-react-hooks&amp;#39; export function MainPage() { const {activate, deactivate, account, provider} = useWeb3Connect(SUPPORTED_CHAIN_ID) const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ) } Display Voting Component # Modify the MainPage to render a Voting component.</description>
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &amp;#34;VOTING_ADDRESS&amp;#34;; const MULTICALL_ADDRESS = &amp;#34;MULTICALL_ADDRESS&amp;#34;; const DAPP_NAME = &amp;#34;YOUR_DAPP_NAME&amp;#34;; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
import { useWakuVoting } from &amp;#34;@waku/vote-sdk-react-hooks&amp;#34;; export function MainPage() { const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID); const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ); } Display Voting Component # Modify the MainPage to render a Voting component.</description>
</item>
</channel>

36
docs/index.html
View File

@ -19,7 +19,7 @@ Waku can be used for chat purposes and for many machine-to-machine use cases.">
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" 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
@ -260,6 +260,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -299,6 +312,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -649,8 +675,8 @@ Check out the <a href="/docs/examples/">example list</a> to see what usage each
<li><a href="https://js-waku.wakuconnect.dev/examples/web-chat">web-chat</a>: A simple public chat (<a href="/docs/examples/#web-chat-app">docs</a>).</li>
<li><a href="https://js-waku.wakuconnect.dev/examples/eth-pm">eth-pm</a>: End-to-end encrypted private messages
(<a href="/docs/examples/#ethereum-private-message-web-app">docs</a>).</li>
<li><a href="https://js-waku.wakuconnect.dev/examples/eth-pm-wallet-encryption">eth-pm-wallet-encryption</a>: Eth-pm using Web3 wallet encryption API</li>
<li>(<a href="/docs/examples/#ethereum-private-message-using-web3-wallet-encryption-api-web-app">dosc</a>).</li>
<li><a href="https://js-waku.wakuconnect.dev/examples/eth-pm-wallet-encryption">eth-pm-wallet-encryption</a>: Eth-pm using Web3 wallet encryption API
(<a href="/docs/examples/#ethereum-private-message-using-web3-wallet-encryption-api-web-app">docs</a>).</li>
</ul>
<p>Finally, if you want to learn how Waku works under the hoods, check the specs at <a href="https://rfc.vac.dev/">rfc.vac.dev</a>.</p>
<h2 id="bugs-questions--support">
@ -669,9 +695,9 @@ For more general discussion and latest news, join #wakuconnect 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/9f9d3eb6b803b31e514a75d7b047eeb81268e76b" title='Last modified by Franck R | Feb 2, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 2, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

4
docs/index.xml
View File

@ -64,11 +64,11 @@ Legend:
<guid>https://docs.wakuconnect.dev/docs/examples/</guid>
<description>Examples # Here is the list of the code examples and the features they demonstrate. To run or studies the example, click on the repo links.
Minimal ReactJS Chat App # Repo: min-react-js-chat.
Minimal ReactJS Chat App # Repo: relay-reactjs-chat.
Demonstrates:
Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App # Repo: store-reactjs-chat.
Demonstrates:
Waku Store React/JavaScript Protobuf using protons Vanilla Javascript Using Minified Library # Repo: unpkg-js-store.</description>
Waku Store React/JavaScript Protobuf using protons Minimal Angular Chat App # Repo: relay-angular-chat.</description>
</item>
<item>

38
docs/introduction/index.html
View File

@ -14,14 +14,14 @@ 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-02-02T11:56:14+11:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Introduction | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -257,6 +257,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -296,6 +309,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -646,8 +672,8 @@ Check out the <a href="/docs/examples/">example list</a> to see what usage each
<li><a href="https://js-waku.wakuconnect.dev/examples/web-chat">web-chat</a>: A simple public chat (<a href="/docs/examples/#web-chat-app">docs</a>).</li>
<li><a href="https://js-waku.wakuconnect.dev/examples/eth-pm">eth-pm</a>: End-to-end encrypted private messages
(<a href="/docs/examples/#ethereum-private-message-web-app">docs</a>).</li>
<li><a href="https://js-waku.wakuconnect.dev/examples/eth-pm-wallet-encryption">eth-pm-wallet-encryption</a>: Eth-pm using Web3 wallet encryption API</li>
<li>(<a href="/docs/examples/#ethereum-private-message-using-web3-wallet-encryption-api-web-app">dosc</a>).</li>
<li><a href="https://js-waku.wakuconnect.dev/examples/eth-pm-wallet-encryption">eth-pm-wallet-encryption</a>: Eth-pm using Web3 wallet encryption API
(<a href="/docs/examples/#ethereum-private-message-using-web3-wallet-encryption-api-web-app">docs</a>).</li>
</ul>
<p>Finally, if you want to learn how Waku works under the hoods, check the specs at <a href="https://rfc.vac.dev/">rfc.vac.dev</a>.</p>
<h2 id="bugs-questions--support">
@ -666,9 +692,9 @@ For more general discussion and latest news, join #wakuconnect 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/9f9d3eb6b803b31e514a75d7b047eeb81268e76b" title='Last modified by Franck R | Feb 2, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 2, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

28
docs/presentations/index.html
View File

@ -27,7 +27,7 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -263,6 +263,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -302,6 +315,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

28
docs/quick_start/index.html
View File

@ -23,7 +23,7 @@ npm install js-waku # or with yarn yarn add js-waku Start a waku node # import
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -259,6 +259,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -298,6 +311,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

28
docs/use_cases/index.html
View File

@ -25,7 +25,7 @@ Legend:
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -261,6 +261,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -300,6 +313,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

28
docs/waku_protocols/index.html
View File

@ -19,7 +19,7 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -255,6 +255,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -294,6 +307,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1
en.search-data.min.ef4fc92cae7a71c272a5a121e620906d075d6e074dadd0a53776e15e9c11b23a.json
View File

File diff suppressed because one or more lines are too long

2
en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js → en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js
View File

@ -1 +1 @@
'use strict';(function(){const g='/en.search-data.min.ef4fc92cae7a71c272a5a121e620906d075d6e074dadd0a53776e15e9c11b23a.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}})()
'use strict';(function(){const g='/en.search-data.min.539dfc1013d603ccbffcf08b9277f3759adeddb13221f66221f9365088e08396.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}})()

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

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

1
en.search.min.4b1407834b00472136a90877f41f745236339309d01b997ad233d6436d3ce4ce.js Normal file
View File

@ -0,0 +1 @@
'use strict';(function(){const g='/en.search-data.min.dd2c536f8c3960528c583f819c200056d2d0e962aa5ab68d0ff1aa16e69db682.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}})()

1
en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js Normal file
View File

@ -0,0 +1 @@
'use strict';(function(){const g='/en.search-data.min.b06d77f831d6db27558b27168671b1d70a438ea4972578117a72ccdc810b62d9.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}})()

1
en.search.min.c63bfe6c9d2e1dd3f7f40e2e31f9303f81025c9ae5d55b8a53ac3b9cf2a8593c.js Normal file
View File

@ -0,0 +1 @@
'use strict';(function(){const g='/en.search-data.min.13c1dfa15aa0755b0307987ec43aac6e5a688d7d4566205e481b915bcd260306.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}})()

1
en.search.min.ee0f6cf0db0a81ce685772349e44ee73614cacece3ea562857541eeebf445bc7.js Normal file
View File

@ -0,0 +1 @@
'use strict';(function(){const g='/en.search-data.min.027a509f040b96745c9d3697ed7c204e3084985d715b3fed15fe5da9627593e1.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}})()

42
en/sitemap.xml
View File

@ -9,34 +9,34 @@
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/</loc>
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/</loc>
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/</loc>
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/</loc>
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/</loc>
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/</loc>
<lastmod>2022-02-08T23:06:38+00:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/</loc>
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/</loc>
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/</loc>
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/</loc>
<lastmod>2022-02-08T23:06:38+00:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/</loc>
<lastmod>2022-02-02T11:56:14+11:00</lastmod>
@ -45,7 +45,10 @@
<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-02-08T23:06:38+00:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/10_angular_relay/</loc>
<lastmod>2022-02-18T09:38:14+00:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/</loc>
<lastmod>2022-02-08T23:06:38+00:00</lastmod>
@ -54,13 +57,13 @@
<lastmod>2022-02-08T23:06:38+00:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/09_debug/</loc>
<lastmod>2022-01-31T10:56:57+11:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/introduction/</loc>
<lastmod>2022-02-02T11:56:14+11:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/</loc>
<lastmod>2022-02-02T11:56:14+11:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
<xhtml:link
rel="alternate"
hreflang="es"
@ -78,7 +81,7 @@
/>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/</loc>
<lastmod>2022-02-02T11:56:14+11:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
<xhtml:link
rel="alternate"
hreflang="es"
@ -94,15 +97,18 @@
hreflang="en"
href="https://docs.wakuconnect.dev/docs/"
/>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/11_nwaku/</loc>
<lastmod>2022-02-21T11:24:40+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/</loc>
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/</loc>
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/</loc>
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/quick_start/</loc>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
@ -114,10 +120,10 @@
<lastmod>2022-02-10T10:33:56+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/</loc>
<lastmod>2022-01-31T10:56:57+11:00</lastmod>
<lastmod>2022-02-21T11:24:40+11:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/examples/</loc>
<lastmod>2022-02-02T11:56:14+11:00</lastmod>
<lastmod>2022-02-18T09:38:14+00:00</lastmod>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/crypto_libraries/</loc>
<lastmod>2022-01-24T12:17:00+11:00</lastmod>

4
es/docs/index.html
View File

@ -230,9 +230,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/89334e6efdcfefe0894f99f92b4b6352003f3aa3" title='Última modificación por 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/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Última modificación por Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Dec 9, 2021</span>
<span>Feb 11, 2022</span>
</a>
</div>

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

@ -10,7 +10,7 @@
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/es/docs/introduccion/" /><meta property="article:section" content="docs" />
<meta property="article:modified_time" content="2021-12-09T15:27:58+01:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Introducción | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
@ -228,9 +228,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/89334e6efdcfefe0894f99f92b4b6352003f3aa3" title='Última modificación por 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/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Última modificación por Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Dec 9, 2021</span>
<span>Feb 11, 2022</span>
</a>
</div>

4
es/index.html
View File

@ -231,9 +231,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/89334e6efdcfefe0894f99f92b4b6352003f3aa3" title='Última modificación por 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/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Última modificación por Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Dec 9, 2021</span>
<span>Feb 11, 2022</span>
</a>
</div>

6
es/sitemap.xml
View File

@ -3,7 +3,7 @@
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://docs.wakuconnect.dev/es/docs/introduccion/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
<xhtml:link
rel="alternate"
hreflang="pt"
@ -16,7 +16,7 @@
/>
</url><url>
<loc>https://docs.wakuconnect.dev/es/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
<xhtml:link
rel="alternate"
hreflang="en"
@ -34,7 +34,7 @@
/>
</url><url>
<loc>https://docs.wakuconnect.dev/es/docs/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
<xhtml:link
rel="alternate"
hreflang="en"

36
index.html
View File

@ -20,7 +20,7 @@ Waku can be used for chat purposes and for many machine-to-machine use cases.">
<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.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" 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
@ -261,6 +261,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -300,6 +313,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
@ -650,8 +676,8 @@ Check out the <a href="/docs/examples/">example list</a> to see what usage each
<li><a href="https://js-waku.wakuconnect.dev/examples/web-chat">web-chat</a>: A simple public chat (<a href="/docs/examples/#web-chat-app">docs</a>).</li>
<li><a href="https://js-waku.wakuconnect.dev/examples/eth-pm">eth-pm</a>: End-to-end encrypted private messages
(<a href="/docs/examples/#ethereum-private-message-web-app">docs</a>).</li>
<li><a href="https://js-waku.wakuconnect.dev/examples/eth-pm-wallet-encryption">eth-pm-wallet-encryption</a>: Eth-pm using Web3 wallet encryption API</li>
<li>(<a href="/docs/examples/#ethereum-private-message-using-web3-wallet-encryption-api-web-app">dosc</a>).</li>
<li><a href="https://js-waku.wakuconnect.dev/examples/eth-pm-wallet-encryption">eth-pm-wallet-encryption</a>: Eth-pm using Web3 wallet encryption API
(<a href="/docs/examples/#ethereum-private-message-using-web3-wallet-encryption-api-web-app">docs</a>).</li>
</ul>
<p>Finally, if you want to learn how Waku works under the hoods, check the specs at <a href="https://rfc.vac.dev/">rfc.vac.dev</a>.</p>
<h2 id="bugs-questions--support">
@ -670,9 +696,9 @@ For more general discussion and latest news, join #wakuconnect 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/9f9d3eb6b803b31e514a75d7b047eeb81268e76b" title='Last modified by Franck R | Feb 2, 2022' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Last modified by Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Feb 2, 2022</span>
<span>Feb 11, 2022</span>
</a>
</div>

36
index.xml
View File

@ -28,7 +28,7 @@ The latest react-scripts version uses webpack 5.</description>
<description>Deploy smart contract # Creating new package # For this deployment we will create a new package.
mkdir contract-deployment cd contract-deployment yarn init yarn add @waku/vote-sdk-contracts ethers ts-node typescript Create a tsconfig.json with:
{ &amp;#34;compilerOptions&amp;#34;: { &amp;#34;target&amp;#34;: &amp;#34;es2020&amp;#34;, &amp;#34;module&amp;#34;: &amp;#34;commonJS&amp;#34;, &amp;#34;esModuleInterop&amp;#34;: true, &amp;#34;moduleResolution&amp;#34;: &amp;#34;node&amp;#34;, &amp;#34;resolveJsonModule&amp;#34;: true, &amp;#34;noEmit&amp;#34;: true } } And now we can add a deploy script index.ts:
import {ContractFactory, getDefaultProvider, Wallet} from &amp;#39;ethers&amp;#39;; import VotingContract from &amp;#39;@waku/vote-sdk-contracts/build/VotingContract.</description>
import { ContractFactory, getDefaultProvider, Wallet } from &amp;#34;ethers&amp;#34;; import VotingContract from &amp;#34;@waku/vote-sdk-contracts/build/VotingContract.</description>
</item>
<item>
@ -93,8 +93,8 @@ yarn add @usedapp/core@0.4.7 @usedapp/core must be frozen to version 0.4.7 due t
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/</guid>
<description>Use Voting Component # Define Configuration # Configure the dApp by setting:
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &amp;#39;VOTING_ADDRESS&amp;#39; const MULTICALL_ADDRESS = &amp;#39;MULTICALL_ADDRESS&amp;#39; const DAPP_NAME = &amp;#39;YOUR_DAPP_NAME&amp;#39; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
import {useWakuVoting} from &amp;#39;@waku/vote-sdk-react-hooks&amp;#39; export function MainPage() { const {activate, deactivate, account, provider} = useWeb3Connect(SUPPORTED_CHAIN_ID) const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ) } Display Voting Component # Modify the MainPage to render a Voting component.</description>
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &amp;#34;VOTING_ADDRESS&amp;#34;; const MULTICALL_ADDRESS = &amp;#34;MULTICALL_ADDRESS&amp;#34;; const DAPP_NAME = &amp;#34;YOUR_DAPP_NAME&amp;#34;; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
import { useWakuVoting } from &amp;#34;@waku/vote-sdk-react-hooks&amp;#34;; export function MainPage() { const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID); const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ); } Display Voting Component # Modify the MainPage to render a Voting component.</description>
</item>
<item>
@ -141,6 +141,18 @@ Create new keypair # Generate a new keypair to sign your messages:</description
The Waku Relay protocol sends messages to connected peers but does not provide any information on whether said peers have received messages. This can be an issue when facing potential connectivity issues. For example, when the connection drops easily, or it is connected to a small number of relay peers.</description>
</item>
<item>
<title>Send and Receive Messages Using Waku Relay With Angular v13</title>
<link>https://docs.wakuconnect.dev/docs/guides/10_angular_relay/</link>
<pubDate>Tue, 15 Feb 2022 09:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/10_angular_relay/</guid>
<description>Send and Receive Messages Using Waku Relay With Angular v13 # It is easy to use Waku Connect with Angular v13.
In this guide, we will demonstrate how your Angular 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: /relay-angular-chat/1/chat/proto.</description>
</item>
<item>
<title>Receive and Send Messages Using Waku Relay With ReactJS</title>
<link>https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/</link>
@ -187,6 +199,18 @@ Waku is a decentralized, censorship-resistant, network and protocol family. It e
Waku can be used for chat purposes and for many machine-to-machine use cases.</description>
</item>
<item>
<title>Nwaku Service Node</title>
<link>https://docs.wakuconnect.dev/docs/guides/11_nwaku/</link>
<pubDate>Thu, 17 Feb 2022 00:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/11_nwaku/</guid>
<description>Nwaku Service Node # JS-Waku nodes join the Waku network by connecting to service nodes using secure websocket.
Nwaku (prev. nim-waku) is the reference implementation of the Waku v2 protocol and can be used as a service node.
When using { bootstrap: { default: true } }, the js-waku node connects to a fleet of nwaku nodes operated by Status.
It is also possible to deploy your own nwaku node by following these instructions.</description>
</item>
<item>
<title>Create-A-Poll Button</title>
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/</link>
@ -218,7 +242,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 React, { useMemo, useState } from &amp;#39;react&amp;#39; import styled from &amp;#39;styled-components&amp;#39; import { PollCreation, PollList } from &amp;#39;@waku/poll-sdk-react-components&amp;#39; import { Web3Provider } from &amp;#39;@ethersproject/providers&amp;#39; import { useWakuPolling } from &amp;#39;@waku/poll-sdk-react-hooks&amp;#39; import { CreateButton } from &amp;#39;@waku/vote-poll-sdk-react-components&amp;#39; import { Theme } from &amp;#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&amp;#39; type PollProps = { appName: string library: Web3Provider | undefined account: string | null | undefined theme: Theme tokenAddress: string multicallAddress: string } export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, multicallAddress) const disabled = useMemo(() =&amp;gt; !</description>
import React, { useMemo, useState } from &amp;#34;react&amp;#34;; import styled from &amp;#34;styled-components&amp;#34;; import { PollCreation, PollList } from &amp;#34;@waku/poll-sdk-react-components&amp;#34;; import { Web3Provider } from &amp;#34;@ethersproject/providers&amp;#34;; import { useWakuPolling } from &amp;#34;@waku/poll-sdk-react-hooks&amp;#34;; import { CreateButton } from &amp;#34;@waku/vote-poll-sdk-react-components&amp;#34;; import { Theme } from &amp;#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&amp;#34;; type PollProps = { appName: string; library: Web3Provider | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; multicallAddress: string; }; export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress, }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, multicallAddress ); const disabled = useMemo(() =&amp;gt; !</description>
</item>
<item>
@ -267,11 +291,11 @@ Legend:
<guid>https://docs.wakuconnect.dev/docs/examples/</guid>
<description>Examples # Here is the list of the code examples and the features they demonstrate. To run or studies the example, click on the repo links.
Minimal ReactJS Chat App # Repo: min-react-js-chat.
Minimal ReactJS Chat App # Repo: relay-reactjs-chat.
Demonstrates:
Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App # Repo: store-reactjs-chat.
Demonstrates:
Waku Store React/JavaScript Protobuf using protons Vanilla Javascript Using Minified Library # Repo: unpkg-js-store.</description>
Waku Store React/JavaScript Protobuf using protons Minimal Angular Chat App # Repo: relay-angular-chat.</description>
</item>
<item>

4
pt/docs/index.html
View File

@ -230,9 +230,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/17b505cbce48d4f3a9906ac034aff17407d956cf" title='Última modificação por F | Dec 13, 2021' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Última modificação por Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Dec 13, 2021</span>
<span>Feb 11, 2022</span>
</a>
</div>

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

@ -10,7 +10,7 @@
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/pt/docs/introduccion/" /><meta property="article:section" content="docs" />
<meta property="article:modified_time" content="2021-12-13T11:31:30+11:00" />
<meta property="article:modified_time" content="2022-02-11T22:11:16+11:00" />
<title>Introdução | Waku Connect Docs</title>
<link rel="manifest" href="/manifest.json">
@ -228,9 +228,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/17b505cbce48d4f3a9906ac034aff17407d956cf" title='Última modificação por F | Dec 13, 2021' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Última modificação por Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Dec 13, 2021</span>
<span>Feb 11, 2022</span>
</a>
</div>

4
pt/index.html
View File

@ -231,9 +231,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/17b505cbce48d4f3a9906ac034aff17407d956cf" title='Última modificação por F | Dec 13, 2021' target="_blank" rel="noopener">
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/da15b6b74dab744fb436e9f8c10395c4f857c152" title='Última modificação por Franck R | Feb 11, 2022' target="_blank" rel="noopener">
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
<span>Dec 13, 2021</span>
<span>Feb 11, 2022</span>
</a>
</div>

6
pt/sitemap.xml
View File

@ -3,7 +3,7 @@
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://docs.wakuconnect.dev/pt/docs/introduccion/</loc>
<lastmod>2021-12-13T11:31:30+11:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
<xhtml:link
rel="alternate"
hreflang="es"
@ -16,7 +16,7 @@
/>
</url><url>
<loc>https://docs.wakuconnect.dev/pt/</loc>
<lastmod>2021-12-13T11:31:30+11:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
<xhtml:link
rel="alternate"
hreflang="en"
@ -34,7 +34,7 @@
/>
</url><url>
<loc>https://docs.wakuconnect.dev/pt/docs/</loc>
<lastmod>2021-12-13T11:31:30+11:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
<xhtml:link
rel="alternate"
hreflang="en"

6
sitemap.xml
View File

@ -4,21 +4,21 @@
<sitemap>
<loc>https://docs.wakuconnect.dev/en/sitemap.xml</loc>
<lastmod>2022-02-10T10:33:56+11:00</lastmod>
<lastmod>2022-02-21T11:24:40+11:00</lastmod>
</sitemap>
<sitemap>
<loc>https://docs.wakuconnect.dev/es/sitemap.xml</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</sitemap>
<sitemap>
<loc>https://docs.wakuconnect.dev/pt/sitemap.xml</loc>
<lastmod>2021-12-13T11:31:30+11:00</lastmod>
<lastmod>2022-02-11T22:11:16+11:00</lastmod>
</sitemap>

28
tags/index.html
View File

@ -17,7 +17,7 @@
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/tags/" title="Tags">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA&#43;Rac=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.0d177fc31f8c8c2725b8432ee3b9a0c2b844f8660d18295053409cfed9db3843.js" integrity="sha256-DRd/wx&#43;MjCcluEMu47mgwrhE&#43;GYNGClQU0Cc/tnbOEM=" 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
@ -258,6 +258,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/10_angular_relay/" class="">Send and Receive Messages Using Waku Relay With Angular v13</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
@ -297,6 +310,19 @@ https://github.com/alex-shpak/hugo-book
<a href="https://docs.wakuconnect.dev/docs/guides/11_nwaku/" class="">Nwaku Service Node</a>
</li>
<li>
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>