acid-info/docs.wakuconnect.dev
1
0
Fork 0
mirror of https://github.com/acid-info/docs.wakuconnect.dev.git synced 2025-02-20 13:48:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update documentation

Browse Source
This commit is contained in:
Jenkins 2022-01-11 09:09:21 +00:00
parent a05f6a861d
commit 2ad2ab6221
78 changed files with 1297 additions and 1041 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
404.html
View File

@ -14,9 +14,9 @@
<title>404 Page not found | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book

1
book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css Normal file
View File

File diff suppressed because one or more lines are too long

1
book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css
View File

File diff suppressed because one or more lines are too long

13
categories/index.html
View File

@ -15,9 +15,9 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/categories/" title="Categories">
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/categories/" title="Categories">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/categories/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -460,7 +460,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -520,11 +520,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown">
<h1>Categories</h1>
</article>
@ -540,8 +538,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

8
categories/index.xml
View File

@ -5,10 +5,6 @@
<link>https://docs.wakuconnect.dev/categories/</link>
<description>Recent content in Categories on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/categories/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/categories/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>
</rss>

1
categories/page/1/index.html Normal file
View File

@ -0,0 +1 @@
<!DOCTYPE html><html><head><title>https://docs.wakuconnect.dev/categories/</title><link rel="canonical" href="https://docs.wakuconnect.dev/categories/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://docs.wakuconnect.dev/categories/" /></head></html>

41
docs/crypto_libraries/index.html
View File

@ -3,24 +3,25 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Cryptographic Libraries A note on the cryptographic libraries used as it is a not a straightforward affair.
Asymmetric encryption Uses ecies-geth which in turns uses SubtleCrypto Web API (browser), secp256k1 (native binding for node) or elliptic (pure JS if none of the other libraries are available).
Symmetric encryption Uses SubtleCrypto Web API (browser) or NodeJS&rsquo; crypto module.">
<meta name="description" content="Cryptographic Libraries # A note on the cryptographic libraries used as it is a not a straightforward affair.
Asymmetric encryption # Uses ecies-geth which in turns uses SubtleCrypto Web API (browser), secp256k1 (native binding for node) or elliptic (pure JS if none of the other libraries are available).
Symmetric encryption # Uses SubtleCrypto Web API (browser) or NodeJS&#39; crypto module.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Cryptographic Libraries" />
<meta property="og:description" content="Cryptographic Libraries A note on the cryptographic libraries used as it is a not a straightforward affair.
Asymmetric encryption Uses ecies-geth which in turns uses SubtleCrypto Web API (browser), secp256k1 (native binding for node) or elliptic (pure JS if none of the other libraries are available).
Symmetric encryption Uses SubtleCrypto Web API (browser) or NodeJS&rsquo; crypto module." />
<meta property="og:description" content="Cryptographic Libraries # A note on the cryptographic libraries used as it is a not a straightforward affair.
Asymmetric encryption # Uses ecies-geth which in turns uses SubtleCrypto Web API (browser), secp256k1 (native binding for node) or elliptic (pure JS if none of the other libraries are available).
Symmetric encryption # Uses SubtleCrypto Web API (browser) or NodeJS&#39; crypto module." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/crypto_libraries/" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/crypto_libraries/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2021-12-09T15:27:58+01:00" />
<title>Cryptographic Libraries | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -458,7 +459,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -507,16 +508,25 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="cryptographic-libraries">Cryptographic Libraries</h1>
<article class="markdown"><h1 id="cryptographic-libraries">
Cryptographic Libraries
<a class="anchor" href="#cryptographic-libraries">#</a>
</h1>
<p>A note on the cryptographic libraries used as it is a not a straightforward affair.</p>
<h2 id="asymmetric-encryption">Asymmetric encryption</h2>
<h2 id="asymmetric-encryption">
Asymmetric encryption
<a class="anchor" href="#asymmetric-encryption">#</a>
</h2>
<p>Uses <a href="https://github.com/cyrildever/ecies-geth/">ecies-geth</a>
which in turns uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto">SubtleCrypto</a> Web API (browser),
<a href="https://www.npmjs.com/package/secp256k1">secp256k1</a> (native binding for node)
or <a href="https://www.npmjs.com/package/elliptic">elliptic</a> (pure JS if none of the other libraries are available).</p>
<h2 id="symmetric-encryption">Symmetric encryption</h2>
<h2 id="symmetric-encryption">
Symmetric encryption
<a class="anchor" href="#symmetric-encryption">#</a>
</h2>
<p>Uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto">SubtleCrypto</a> Web API (browser)
or <a href="https://nodejs.org/api/crypto.html">NodeJS&rsquo; crypto</a> module.</p>
or <a href="https://nodejs.org/api/crypto.html">NodeJS' crypto</a> module.</p>
</article>
@ -546,8 +556,7 @@ or <a href="https://nodejs.org/api/crypto.html">NodeJS&rsquo; crypto</a> module.
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

72
docs/examples/index.html
View File

@ -3,34 +3,31 @@
<head>
<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.
<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.
Demonstrates:
Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App Repo: store-reactjs-chat.
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.
Demonstrates:
How to stop retrieving results from Waku Store on condition Use minified bundle from Unpkg.">
Waku Store React/JavaScript Protobuf using protons Vanilla Javascript Using Minified Library # Repo: unpkg-js-store.">
<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.
<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.
Demonstrates:
Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App Repo: store-reactjs-chat.
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.
Demonstrates:
How to stop retrieving results from Waku Store on condition Use minified bundle from Unpkg." />
Waku Store React/JavaScript Protobuf using protons Vanilla Javascript Using Minified Library # Repo: unpkg-js-store." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/examples/" />
<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="2021-12-09T15:27:58+01:00" />
<title>Examples | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -468,7 +465,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -522,10 +519,16 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="examples">Examples</h1>
<article class="markdown"><h1 id="examples">
Examples
<a class="anchor" href="#examples">#</a>
</h1>
<p>Here is the list of the code examples and the features they demonstrate.
To run or studies the example, click on the <em>repo</em> links.</p>
<h2 id="minimal-reactjs-chat-app">Minimal ReactJS Chat App</h2>
<h2 id="minimal-reactjs-chat-app">
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>Demonstrates:</p>
<ul>
@ -535,7 +538,10 @@ To run or studies the example, click on the <em>repo</em> links.</p>
<li>Protobuf using <a href="https://www.npmjs.com/package/protons">protons</a></li>
<li>No async/await syntax</li>
</ul>
<h2 id="minimal-reactjs-waku-store-app">Minimal ReactJS Waku Store App</h2>
<h2 id="minimal-reactjs-waku-store-app">
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>Demonstrates:</p>
<ul>
@ -543,7 +549,10 @@ To run or studies the example, click on the <em>repo</em> links.</p>
<li>React/JavaScript</li>
<li>Protobuf using <a href="https://www.npmjs.com/package/protons">protons</a></li>
</ul>
<h2 id="vanilla-javascript-using-minified-library">Vanilla Javascript Using Minified Library</h2>
<h2 id="vanilla-javascript-using-minified-library">
Vanilla Javascript Using Minified Library
<a class="anchor" href="#vanilla-javascript-using-minified-library">#</a>
</h2>
<p>Repo: <a href="https://github.com/status-im/js-waku/tree/main/examples/unpkg-js-store">unpkg-js-store</a>.</p>
<p>Demonstrates:</p>
<ul>
@ -551,7 +560,10 @@ To run or studies the example, click on the <em>repo</em> links.</p>
<li>Use minified bundle from Unpkg.com</li>
<li>Vanilla JavaScript application</li>
</ul>
<h2 id="web-chat-app">Web Chat App</h2>
<h2 id="web-chat-app">
Web Chat App
<a class="anchor" href="#web-chat-app">#</a>
</h2>
<p>Repo: <a href="https://github.com/status-im/js-waku/tree/main/examples/web-chat">web-chat</a>.</p>
<p>Demonstrates:</p>
<ul>
@ -561,7 +573,10 @@ To run or studies the example, click on the <em>repo</em> links.</p>
<li>Waku Store</li>
<li>Protobuf using .proto files + <a href="https://github.com/bufbuild/buf">bufbuild</a> + <a href="https://www.npmjs.com/package/ts-proto">ts-proto</a></li>
</ul>
<h2 id="ethereum-private-message-web-app">Ethereum Private Message Web App</h2>
<h2 id="ethereum-private-message-web-app">
Ethereum Private Message Web App
<a class="anchor" href="#ethereum-private-message-web-app">#</a>
</h2>
<p>Repo: <a href="https://github.com/status-im/js-waku/tree/main/examples/eth-pm">eth-pm</a>.</p>
<p>Demonstrates:</p>
<ul>
@ -573,7 +588,10 @@ To run or studies the example, click on the <em>repo</em> links.</p>
<li>Symmetric Encryption</li>
<li>Protobuf using <a href="https://www.npmjs.com/package/protobufjs">protobufjs</a></li>
</ul>
<h2 id="ethereum-private-message-using-web3-wallet-encryption-api-web-app">Ethereum Private Message Using Web3 Wallet Encryption API Web App</h2>
<h2 id="ethereum-private-message-using-web3-wallet-encryption-api-web-app">
Ethereum Private Message Using Web3 Wallet Encryption API Web App
<a class="anchor" href="#ethereum-private-message-using-web3-wallet-encryption-api-web-app">#</a>
</h2>
<p>Repo: <a href="https://github.com/status-im/js-waku/tree/main/examples/eth-pm-wallet-encryption">eth-pm-wallet-encryption</a>.</p>
<p>Demonstrates:</p>
<ul>
@ -585,7 +603,10 @@ To run or studies the example, click on the <em>repo</em> links.</p>
<li>Usage of <code>eth_decrypt</code> Web3 Wallet API</li>
<li>Protobuf using <a href="https://www.npmjs.com/package/protobufjs">protobufjs</a></li>
</ul>
<h2 id="uber-like-minimalistic-car-sharing-app-suing-vuejs">Uber-like minimalistic car sharing app suing Vue.js</h2>
<h2 id="uber-like-minimalistic-car-sharing-app-suing-vuejs">
Uber-like minimalistic car sharing app suing Vue.js
<a class="anchor" href="#uber-like-minimalistic-car-sharing-app-suing-vuejs">#</a>
</h2>
<p>Repo: <a href="https://github.com/TheBojda/waku-uber">TheBojda/waku-uber</a>.</p>
<p>Article: <a href="https://hackernoon.com/decentralized-uber-heres-how-i-built-it-with-statusim-waku-and-vuejs">Decentralized Uber: Here&rsquo;s How I Built It With Status.im, Waku, and Vue.js</a>.</p>
<p>Demonstrates:</p>
@ -623,8 +644,7 @@ To run or studies the example, click on the <em>repo</em> links.</p>
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,28 +3,29 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="How to Choose a Content Topic A content topic is used for content based filtering.
<meta name="description" content="How to Choose a Content Topic # A content topic is used for content based filtering.
It allows you to filter out the messages that your dApp processes, both when receiving live messages (Relay) or retrieving historical messages (Store).
The format for content topics is as follows:
/{dapp-name}/{version}/{content-topic-name}/{encoding}
dapp-name: The name of your dApp, it must be unique to avoid conflict with other dApps. version: We usually start at 1, useful when introducing breaking changes in your messages.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="How to Choose a Content Topic" />
<meta property="og:description" content="How to Choose a Content Topic A content topic is used for content based filtering.
<meta property="og:description" content="How to Choose a Content Topic # A content topic is used for content based filtering.
It allows you to filter out the messages that your dApp processes, both when receiving live messages (Relay) or retrieving historical messages (Store).
The format for content topics is as follows:
/{dapp-name}/{version}/{content-topic-name}/{encoding}
dapp-name: The name of your dApp, it must be unique to avoid conflict with other dApps. version: We usually start at 1, useful when introducing breaking changes in your messages." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-03T11:11:07+11:00" />
<title>How to Choose a Content Topic | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -462,7 +463,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -506,7 +507,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="how-to-choose-a-content-topic">How to Choose a Content Topic</h1>
<article class="markdown"><h1 id="how-to-choose-a-content-topic">
How to Choose a Content Topic
<a class="anchor" href="#how-to-choose-a-content-topic">#</a>
</h1>
<p>A content topic is used for content based filtering.</p>
<p>It allows you to filter out the messages that your dApp processes,
both when receiving live messages (Relay) or retrieving historical messages (Store).</p>
@ -557,8 +561,7 @@ You may want to use the following content topics:</p>
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,26 +3,25 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Receive and Send Messages Using Waku Relay Waku Relay is a gossip protocol that enables you to send and receive messages. You can find Waku Relay&rsquo;s specifications on Vac RFC.
<meta name="description" content="Receive and Send Messages Using Waku Relay # Waku Relay is a gossip protocol that enables you to send and receive messages. You can find Waku Relay&rsquo;s specifications on Vac RFC.
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-guide/1/chat/proto.
Installation You can install js-waku using your favorite package manager:">
For this guide, we are using a single content topic: /relay-guide/1/chat/proto.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Receive and Send Messages Using Waku Relay" />
<meta property="og:description" content="Receive and Send Messages Using Waku Relay Waku Relay is a gossip protocol that enables you to send and receive messages. You can find Waku Relay&rsquo;s specifications on Vac RFC.
<meta property="og:description" content="Receive and Send Messages Using Waku Relay # Waku Relay is a gossip protocol that enables you to send and receive messages. You can find Waku Relay&rsquo;s specifications on Vac RFC.
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-guide/1/chat/proto.
Installation You can install js-waku using your favorite package manager:" />
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="og:url" content="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-05T14:40:44+11:00" />
<title>Receive and Send Messages Using Waku Relay | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -460,7 +459,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -518,72 +517,99 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="receive-and-send-messages-using-waku-relay">Receive and Send Messages Using Waku Relay</h1>
<article class="markdown"><h1 id="receive-and-send-messages-using-waku-relay">
Receive and Send Messages Using Waku Relay
<a class="anchor" href="#receive-and-send-messages-using-waku-relay">#</a>
</h1>
<p>Waku Relay is a gossip protocol that enables you to send and receive messages.
You can find Waku Relay&rsquo;s specifications on <a href="https://rfc.vac.dev/spec/11/">Vac RFC</a>.</p>
<p>Before starting, you need to choose a <em>Content Topic</em> for your dApp.
Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a content topic guide</a> to learn more about content topics.</p>
<p>For this guide, we are using a single content topic: <code>/relay-guide/1/chat/proto</code>.</p>
<h1 id="installation">Installation</h1>
<h1 id="installation">
Installation
<a class="anchor" href="#installation">#</a>
</h1>
<p>You can install <a href="https://npmjs.com/package/js-waku">js-waku</a> using your favorite package manager:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
</code></pre></div><h1 id="create-waku-instance">Create Waku Instance</h1>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
</code></pre></div><h1 id="create-waku-instance">
Create Waku Instance
<a class="anchor" href="#create-waku-instance">#</a>
</h1>
<p>In order to interact with the Waku network, you first need a Waku instance:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">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">true</span> });
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">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 style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#39;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#39;</span>,
<span style="color:#e6db74">&#39;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#39;</span>
]
});
</code></pre></div><h1 id="wait-to-be-connected">Wait to be connected</h1>
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
<a class="anchor" href="#wait-to-be-connected">#</a>
</h1>
<p>When using the <code>bootstrap</code> option, it may take some time to connect to other peers.
To ensure that you have relay peers available to send and receive messages,
use the following function:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</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">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>();
</code></pre></div><p>The returned <code>Promise</code> will resolve once you are connected to a Waku Relay peer.</p>
<h1 id="receive-messages">Receive messages</h1>
<h1 id="receive-messages">
Receive messages
<a class="anchor" href="#receive-messages">#</a>
</h1>
<p>To receive messages for your app,
you need to register an observer on relay for your app&rsquo;s content topic:</p>
<div class="highlight"><pre 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">processIncomingMessage</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">wakuMessage</span>) =&gt; {
<div class="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">processIncomingMessage</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">wakuMessage</span>) =&gt; {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Message Received: </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">payloadAsUtf8</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>);
};
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(<span style="color:#a6e22e">processIncomingMessage</span>, [<span style="color:#e6db74">&#39;/relay-guide/1/chat/proto&#39;</span>]);
</code></pre></div><h1 id="send-messages">Send Messages</h1>
</code></pre></div><h1 id="send-messages">
Send Messages
<a class="anchor" href="#send-messages">#</a>
</h1>
<p>You are now ready to send messages.
Let&rsquo;s start by sending simple strings as messages.</p>
<p>To send a message, you need to wrap the message in a <code>WakuMessage</code>.
When using a basic string payload, you can use the <code>WakuMessage.fromUtf8String</code> helper:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(<span style="color:#e6db74">&#39;Here is a message&#39;</span>, <span style="color:#e6db74">`/relay-guide/1/chat/proto`</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(<span style="color:#e6db74">&#39;Here is a message&#39;</span>, <span style="color:#e6db74">`/relay-guide/1/chat/proto`</span>);
</code></pre></div><p>Then, use the <code>relay</code> module to send the message to our peers,
the message will then be relayed to the rest of the network thanks to Waku Relay:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">wakuMessage</span>);
</code></pre></div><h1 id="use-protobuf">Use Protobuf</h1>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">wakuMessage</span>);
</code></pre></div><h1 id="use-protobuf">
Use Protobuf
<a class="anchor" href="#use-protobuf">#</a>
</h1>
<p>Sending strings as messages in unlikely to cover your dApps needs.</p>
<p>Waku v2 protocols use <a href="https://developers.google.com/protocol-buffers/">protobuf</a> <a href="https://rfc.vac.dev/spec/10/">by default</a>.</p>
<p>Let&rsquo;s review how you can use protobuf to include structured objects in Waku Messages.</p>
<p>First, define a data structure.
For this guide, we will use a simple chat message that contains a timestamp and text:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">{
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">{
<span style="color:#a6e22e">timestamp</span><span style="color:#f92672">:</span> Date;
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">string</span>;
}
</code></pre></div><p>To encode and decode protobuf payloads, you can use the <a href="https://www.npmjs.com/package/protons">protons</a> package.</p>
<h2 id="install-protobuf-library">Install Protobuf Library</h2>
<h2 id="install-protobuf-library">
Install Protobuf Library
<a class="anchor" href="#install-protobuf-library">#</a>
</h2>
<p>First, install protons:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install protons
</code></pre></div><h2 id="protobuf-definition">Protobuf Definition</h2>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install protons
</code></pre></div><h2 id="protobuf-definition">
Protobuf Definition
<a class="anchor" href="#protobuf-definition">#</a>
</h2>
<p>Then define the simple chat message:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
</span><span style="color:#e6db74">message SimpleChatMessage {
@ -593,22 +619,28 @@ For this guide, we will use a simple chat message that contains a timestamp and
</span><span style="color:#e6db74">`</span>);
</code></pre></div><p>You can learn about protobuf message definitions here:
<a href="https://developers.google.com/protocol-buffers/docs/proto">Protocol Buffers Language Guide</a>.</p>
<h2 id="encode-messages">Encode Messages</h2>
<h2 id="encode-messages">
Encode Messages
<a class="anchor" href="#encode-messages">#</a>
</h2>
<p>Instead of wrapping an utf-8 string in a Waku Message,
you are going to wrap a protobuf payload.</p>
<p>First, encode the object:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">payload</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">proto</span>.<span style="color:#a6e22e">SimpleChatMessage</span>.<span style="color:#a6e22e">encode</span>({
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">payload</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">proto</span>.<span style="color:#a6e22e">SimpleChatMessage</span>.<span style="color:#a6e22e">encode</span>({
<span style="color:#a6e22e">timestamp</span><span style="color:#f92672">:</span> Date.<span style="color:#a6e22e">now</span>(),
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Here is a message&#39;</span>
});
</code></pre></div><p>Then, wrap it in a Waku Message:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">ContentTopic</span>);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">ContentTopic</span>);
</code></pre></div><p>Now, you can send the message over Waku Relay the same way than before:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">wakuMessage</span>);
</code></pre></div><h2 id="decode-messages">Decode Messages</h2>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">wakuMessage</span>);
</code></pre></div><h2 id="decode-messages">
Decode Messages
<a class="anchor" href="#decode-messages">#</a>
</h2>
<p>To decode the messages received over Waku Relay,
you need to extract the protobuf payload and decode it using <code>protons</code>.</p>
<div class="highlight"><pre 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">processIncomingMessage</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">wakuMessage</span>) =&gt; {
<div class="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">processIncomingMessage</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">wakuMessage</span>) =&gt; {
<span style="color:#75715e">// No need to attempt to decode a message if the payload is absent
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">payload</span>) <span style="color:#66d9ef">return</span>;
@ -619,11 +651,14 @@ you need to extract the protobuf payload and decode it using <code>protons</code
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Message Received: </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">text</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, sent at </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">timestamp</span>.<span style="color:#a6e22e">toString</span>()<span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>);
};
</code></pre></div><p>Like before, add this callback as an observer to Waku Relay:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(<span style="color:#a6e22e">processIncomingMessage</span>, [<span style="color:#e6db74">&#39;/relay-guide/1/chat/proto&#39;</span>]);
</code></pre></div><h1 id="conclusion">Conclusion</h1>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>(<span style="color:#a6e22e">processIncomingMessage</span>, [<span style="color:#e6db74">&#39;/relay-guide/1/chat/proto&#39;</span>]);
</code></pre></div><h1 id="conclusion">
Conclusion
<a class="anchor" href="#conclusion">#</a>
</h1>
<p>That is it! Now, you know how to send and receive messages over Waku using the Waku Relay protocol.</p>
<p>Here is the final code:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">getBootstrapNodes</span>, <span style="color:#a6e22e">Waku</span>, <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">getBootstrapNodes</span>, <span style="color:#a6e22e">Waku</span>, <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
@ -633,10 +668,10 @@ you need to extract the protobuf payload and decode it using <code>protons</code
</span><span style="color:#e6db74">}
</span><span style="color:#e6db74">`</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</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:#66d9ef">const</span> <span style="color:#a6e22e">nodes</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">getBootstrapNodes</span>();
<span style="color:#a6e22e">await</span> Promise.<span style="color:#a6e22e">all</span>(<span style="color:#a6e22e">nodes</span>.<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">addr</span>) =&gt; <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">dial</span>(<span style="color:#a6e22e">addr</span>)));
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">nodes</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">getBootstrapNodes</span>();
<span style="color:#66d9ef">await</span> Promise.<span style="color:#a6e22e">all</span>(<span style="color:#a6e22e">nodes</span>.<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">addr</span>) =&gt; <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">dial</span>(<span style="color:#a6e22e">addr</span>)));
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">processIncomingMessage</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">wakuMessage</span>) =&gt; {
<span style="color:#75715e">// No need to attempt to decode a message if the payload is absent
@ -655,8 +690,8 @@ you need to extract the protobuf payload and decode it using <code>protons</code
<span style="color:#a6e22e">timestamp</span><span style="color:#f92672">:</span> Date.<span style="color:#a6e22e">now</span>(),
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Here is a message&#39;</span>
});
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">ContentTopic</span>);
<span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">wakuMessage</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">ContentTopic</span>);
<span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">wakuMessage</span>);
</code></pre></div></article>
@ -686,8 +721,7 @@ you need to extract the protobuf payload and decode it using <code>protons</code
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,24 +3,23 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Retrieve Messages Using Waku Store DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received. If you cannot be reached by your peers, then messages are not relayed; relay peers do not save messages for later.
However, Waku Store peers do save messages they relay, allowing you to retrieve them at a later time.">
<meta name="description" content="Retrieve Messages Using Waku Store # DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received. If you cannot be reached by your peers, then messages are not relayed; relay peers do not save messages for later.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Retrieve Messages Using Waku Store" />
<meta property="og:description" content="Retrieve Messages Using Waku Store DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received. If you cannot be reached by your peers, then messages are not relayed; relay peers do not save messages for later.
However, Waku Store peers do save messages they relay, allowing you to retrieve them at a later time." />
<meta property="og:description" content="Retrieve Messages Using Waku Store # DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received. If you cannot be reached by your peers, then messages are not relayed; relay peers do not save messages for later." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" />
<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="2021-12-09T15:27:58+01:00" />
<title>Retrieve Messages Using Waku Store | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -458,7 +457,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -515,7 +514,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="retrieve-messages-using-waku-store">Retrieve Messages Using Waku Store</h1>
<article class="markdown"><h1 id="retrieve-messages-using-waku-store">
Retrieve Messages Using Waku Store
<a class="anchor" href="#retrieve-messages-using-waku-store">#</a>
</h1>
<p>DApps running on a phone or in a browser are often offline:
The browser could be closed or mobile app in the background.</p>
<p><a href="https://rfc.vac.dev/spec/11/">Waku Relay</a> is a gossip protocol.
@ -532,47 +534,65 @@ For example, when the dApp starts.</p>
<p>Before starting, you need to choose a <em>Content Topic</em> for your dApp.
Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a content topic guide</a> to learn more about content topics.</p>
<p>For this guide, we are using a single content topic: <code>/store-guide/1/news/proto</code>.</p>
<h1 id="installation">Installation</h1>
<h1 id="installation">
Installation
<a class="anchor" href="#installation">#</a>
</h1>
<p>You can install <a href="https://npmjs.com/package/js-waku">js-waku</a> using your favorite package manager:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
</code></pre></div><h1 id="create-waku-instance">Create Waku Instance</h1>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
</code></pre></div><h1 id="create-waku-instance">
Create Waku Instance
<a class="anchor" href="#create-waku-instance">#</a>
</h1>
<p>In order to interact with the Waku network, you first need a Waku instance:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">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">true</span> });
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">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 style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#39;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#39;</span>,
<span style="color:#e6db74">&#39;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#39;</span>
]
});
</code></pre></div><h1 id="wait-to-be-connected">Wait to be connected</h1>
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
<a class="anchor" href="#wait-to-be-connected">#</a>
</h1>
<p>When using the <code>bootstrap</code> option, it may take some times to connect to other peers.
To ensure that you have store peers available to retrieve historical messages from,
use the following function:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</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">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>();
</code></pre></div><p>The returned Promise will resolve once you are connected to a Waku Store peer.</p>
<h1 id="use-protobuf">Use Protobuf</h1>
<h1 id="use-protobuf">
Use Protobuf
<a class="anchor" href="#use-protobuf">#</a>
</h1>
<p>Waku v2 protocols use <a href="https://developers.google.com/protocol-buffers/">protobuf</a> <a href="https://rfc.vac.dev/spec/10/">by default</a>.</p>
<p>Let&rsquo;s review how you can use protobuf to send structured data.</p>
<p>First, define a data structure.
For this guide, we will use a simple news article that contains a date of publication, title and body:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">{
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">{
<span style="color:#a6e22e">date</span><span style="color:#f92672">:</span> Date;
<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">string</span>;
<span style="color:#a6e22e">body</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">string</span>;
}
</code></pre></div><p>To encode and decode protobuf payloads, you can use the <a href="https://www.npmjs.com/package/protons">protons</a> package.</p>
<h2 id="install-protobuf-library">Install Protobuf Library</h2>
<h2 id="install-protobuf-library">
Install Protobuf Library
<a class="anchor" href="#install-protobuf-library">#</a>
</h2>
<p>First, install protons:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install protons
</code></pre></div><h2 id="protobuf-definition">Protobuf Definition</h2>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install protons
</code></pre></div><h2 id="protobuf-definition">
Protobuf Definition
<a class="anchor" href="#protobuf-definition">#</a>
</h2>
<p>Then specify the data structure:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
</span><span style="color:#e6db74">message ArticleMessage {
@ -583,10 +603,13 @@ For this guide, we will use a simple news article that contains a date of public
</span><span style="color:#e6db74">`</span>);
</code></pre></div><p>You can learn about protobuf message definitions here:
<a href="https://developers.google.com/protocol-buffers/docs/proto">Protocol Buffers Language Guide</a>.</p>
<h2 id="decode-messages">Decode Messages</h2>
<h2 id="decode-messages">
Decode Messages
<a class="anchor" href="#decode-messages">#</a>
</h2>
<p>To decode the messages retrieved from a Waku Store node,
you need to extract the protobuf payload and decode it using <code>protons</code>.</p>
<div class="highlight"><pre 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">decodeWakuMessage</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">wakuMessage</span>) =&gt; {
<div class="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">decodeWakuMessage</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">wakuMessage</span>) =&gt; {
<span style="color:#75715e">// No need to attempt to decode a message if the payload is absent
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">payload</span>) <span style="color:#66d9ef">return</span>;
@ -602,12 +625,15 @@ you need to extract the protobuf payload and decode it using <code>protons</code
<span style="color:#66d9ef">return</span> { <span style="color:#a6e22e">publishDate</span>, <span style="color:#a6e22e">title</span>, <span style="color:#a6e22e">body</span> };
};
</code></pre></div><h2 id="retrieve-messages">Retrieve messages</h2>
</code></pre></div><h2 id="retrieve-messages">
Retrieve messages
<a class="anchor" href="#retrieve-messages">#</a>
</h2>
<p>You now have all the building blocks to retrieve and decode messages for a store node.</p>
<p>Store node responses are paginated.
The <code>WakuStore.queryHistory</code> API automatically query all the pages in a sequential manner.
To process messages as soon as they received (page by page), use the <code>callback</code> option:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ContentTopic</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;/store-guide/1/news/proto&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ContentTopic</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;/store-guide/1/news/proto&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">callback</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">retrievedMessages</span>) =&gt; {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">articles</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">retrievedMessages</span>
@ -626,7 +652,10 @@ To process messages as soon as they received (page by page), use the <code>callb
</code></pre></div><p>Note that <code>WakuStore.queryHistory</code> select an available store node for you.
However, it can only select a connected node, which is why the bootstrapping is necessary.
It will throw an error if no store node is available.</p>
<h2 id="filter-messages-by-send-time">Filter messages by send time</h2>
<h2 id="filter-messages-by-send-time">
Filter messages by send time
<a class="anchor" href="#filter-messages-by-send-time">#</a>
</h2>
<p>By default, Waku Store nodes store messages for 30 days.
Depending on your use case, you may not need to retrieve 30 days worth of messages.</p>
<p><a href="https://rfc.vac.dev/spec/14/">Waku Message</a> defines an optional unencrypted <code>timestamp</code> field.
@ -634,7 +663,7 @@ The timestamp is set by the sender.
By default, js-waku sets the timestamp of outgoing message to the current time.</p>
<p>You can filter messages that include a timestamp within given bounds with the <code>timeFilter</code> option.</p>
<p>Retrieve messages up to a week old:</p>
<div class="highlight"><pre 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:#75715e">// [..] `ContentTopic` and `callback` definitions
<div class="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:#75715e">// [..] `ContentTopic` and `callback` definitions
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">startTime</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date();
<span style="color:#75715e">// 7 days/week, 24 hours/day, 60min/hour, 60secs/min, 100ms/sec
@ -648,7 +677,10 @@ By default, js-waku sets the timestamp of outgoing message to the current time.<
.<span style="color:#66d9ef">catch</span>((<span style="color:#a6e22e">e</span>) =&gt; {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;Failed to retrieve messages from store&#39;</span>, <span style="color:#a6e22e">e</span>);
});
</code></pre></div><h2 id="end-result">End result</h2>
</code></pre></div><h2 id="end-result">
End result
<a class="anchor" href="#end-result">#</a>
</h2>
<p>You can see a similar example implemented in ReactJS in the <a href="https://github.com/status-im/js-waku/tree/main/examples/store-reactjs-chat">Minimal ReactJS Waku Store App</a>.</p>
</article>
@ -679,8 +711,7 @@ By default, js-waku sets the timestamp of outgoing message to the current time.<
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,24 +3,25 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Encrypt Messages Using Waku Message Version 1 The Waku Message format provides an easy way to encrypt messages using symmetric or asymmetric encryption. The encryption comes with several handy design requirements: confidentiality, authenticity and integrity. It also allows the sender to sign messages, see Sign Messages Using Waku Message Version 1 to learn how.
<meta name="description" content="Encrypt Messages Using Waku Message Version 1 # The Waku Message format provides an easy way to encrypt messages using symmetric or asymmetric encryption. The encryption comes with several handy design requirements: confidentiality, authenticity and integrity. It also allows the sender to sign messages, see Sign Messages Using Waku Message Version 1 to learn how.
You can find more details about Waku Message Payload Encryption in 26/WAKU-PAYLOAD.
See Cryptographic Libraries for more details on the cryptographic libraries used by js-waku.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Encrypt Messages Using Waku Message Version 1" />
<meta property="og:description" content="Encrypt Messages Using Waku Message Version 1 The Waku Message format provides an easy way to encrypt messages using symmetric or asymmetric encryption. The encryption comes with several handy design requirements: confidentiality, authenticity and integrity. It also allows the sender to sign messages, see Sign Messages Using Waku Message Version 1 to learn how.
<meta property="og:description" content="Encrypt Messages Using Waku Message Version 1 # The Waku Message format provides an easy way to encrypt messages using symmetric or asymmetric encryption. The encryption comes with several handy design requirements: confidentiality, authenticity and integrity. It also allows the sender to sign messages, see Sign Messages Using Waku Message Version 1 to learn how.
You can find more details about Waku Message Payload Encryption in 26/WAKU-PAYLOAD.
See Cryptographic Libraries for more details on the cryptographic libraries used by js-waku." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2021-12-09T15:27:58+01:00" />
<title>Encrypt Messages Using Waku Message Version 1 | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -458,7 +459,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -524,7 +525,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="encrypt-messages-using-waku-message-version-1">Encrypt Messages Using Waku Message Version 1</h1>
<article class="markdown"><h1 id="encrypt-messages-using-waku-message-version-1">
Encrypt Messages Using Waku Message Version 1
<a class="anchor" href="#encrypt-messages-using-waku-message-version-1">#</a>
</h1>
<p>The Waku Message format provides an easy way to encrypt messages using symmetric or asymmetric encryption.
The encryption comes with several handy <a href="https://rfc.vac.dev/spec/26/#design-requirements">design requirements</a>:
confidentiality, authenticity and integrity.
@ -532,7 +536,10 @@ It also allows the sender to sign messages,
see <a href="/docs/guides/05_sign_messages_version_1/">Sign Messages Using Waku Message Version 1</a> to learn how.</p>
<p>You can find more details about Waku Message Payload Encryption in <a href="https://rfc.vac.dev/spec/26/">26/WAKU-PAYLOAD</a>.</p>
<p>See <a href="/docs/crypto_libraries/">Cryptographic Libraries</a> for more details on the cryptographic libraries used by js-waku.</p>
<h2 id="what-data-is-encrypted">What data is encrypted</h2>
<h2 id="what-data-is-encrypted">
What data is encrypted
<a class="anchor" href="#what-data-is-encrypted">#</a>
</h2>
<p>With Waku Message Version 1, the entire payload is encrypted.</p>
<p>Which means that the only discriminating data available in clear text is the content topic and timestamp (if present).
Hence, if Alice expects to receive messages under a given content topic, she needs to try to decrypt all messages received on said content topic.</p>
@ -541,13 +548,19 @@ Hence, if Alice expects to receive messages under a given content topic, she nee
<li>If there is high traffic on a given content topic then all clients need to process and attempt decryption of all messages with said content topic;</li>
<li>If a content topic is only used by a given (group of) user(s) then it is possible to deduce some information about said user(s) communications such as sent time and frequency of messages.</li>
</ul>
<h2 id="key-management">Key management</h2>
<h2 id="key-management">
Key management
<a class="anchor" href="#key-management">#</a>
</h2>
<p>By using Waku Message Version 1, you will need to provide a way to your users to generate and store keys in a secure manner.
Storing, backing up and recovering key is out of the scope of this guide.</p>
<p>If key recovery is important for your dApp, then check out
<a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/wrapKey">SubtleCrypto.wrapKey()</a> which can be used to securely store or export private keys.</p>
<p>An example to save and load a key pair in local storage, protected with a password, can be found in <a href="https://github.com/status-im/js-waku/blob/main/examples/eth-pm/src/key_pair_handling/key_pair_storage.ts">Eth-PM</a>.</p>
<h2 id="which-encryption-method-should-i-use">Which encryption method should I use?</h2>
<h2 id="which-encryption-method-should-i-use">
Which encryption method should I use?
<a class="anchor" href="#which-encryption-method-should-i-use">#</a>
</h2>
<p>Whether you should use symmetric or asymmetric encryption depends on your use case.</p>
<p><strong>Symmetric</strong> encryption is done using a single key to encrypt and decrypt.</p>
<p>Which means that if Alice knows the symmetric key <code>K</code> and uses it to encrypt a message,
@ -565,44 +578,62 @@ Bob can then use his private key <code>k</code> to decrypt the message.
As long as Bob keep his private key <code>k</code> secret, then he, and only he, can decrypt messages encrypted with <code>K</code>.</p>
<p>Private 1:1 messaging is a possible use case for asymmetric encryption:
When Alice sends an encrypted message for Bob, only Bob can decrypt it.</p>
<h2 id="symmetric-encryption">Symmetric Encryption</h2>
<h3 id="generate-key">Generate Key</h3>
<h2 id="symmetric-encryption">
Symmetric Encryption
<a class="anchor" href="#symmetric-encryption">#</a>
</h2>
<h3 id="generate-key">
Generate Key
<a class="anchor" href="#generate-key">#</a>
</h3>
<p>To use symmetric encryption, you first need to generate a key.
Use <code>generateSymmetricKey</code> for secure key generation:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generateSymmetricKey</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generateSymmetricKey</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">symmetricKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">generateSymmetricKey</span>();
</code></pre></div><h3 id="encrypt-message">Encrypt Message</h3>
</code></pre></div><h3 id="encrypt-message">
Encrypt Message
<a class="anchor" href="#encrypt-message">#</a>
</h3>
<p>To encrypt a message with the previously generated key,
pass the key in the <code>symKey</code> property to <code>WakuMessage.fromBytes</code>.</p>
<p>Same as Waku Messages version 0 (unencrypted),
<code>payload</code> is your message payload and <code>contentTopic</code> is the content topic for your dApp.
See <a href="/docs/guides/02_relay_receive_send_messages/">Receive and Send Messages Using Waku Relay</a> for details.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">contentTopic</span>, {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">contentTopic</span>, {
<span style="color:#a6e22e">symKey</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">symmetricKey</span>
});
</code></pre></div><p>The Waku Message can then be sent to the Waku network using Waku Relay or Waku Light Push:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">lightPush</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">message</span>);
</code></pre></div><h3 id="decrypt-messages">Decrypt Messages</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">lightPush</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">message</span>);
</code></pre></div><h3 id="decrypt-messages">
Decrypt Messages
<a class="anchor" href="#decrypt-messages">#</a>
</h3>
<p>To decrypt messages,
whether they are received over Waku Relay or using Waku Store,
add the symmetric key as a decryption key to your Waku instance.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">addDecryptionKey</span>(<span style="color:#a6e22e">symmetricKey</span>);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">addDecryptionKey</span>(<span style="color:#a6e22e">symmetricKey</span>);
</code></pre></div><p>Alternatively, you can pass the key when creating the instance:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">decryptionKeys</span><span style="color:#f92672">:</span> [<span style="color:#a6e22e">symmetricKey</span>] });
</code></pre></div><p>It will attempt to decrypt any message it receives using the key, for both symmetric and asymmetric encryption.</p>
<p>You can call <code>addDecryptionKey</code> several times if you are using multiple keys,
symmetric key and asymmetric private keys can be used together.</p>
<p>Messages that are not successfully decrypted are dropped.</p>
<h2 id="asymmetric-encryption">Asymmetric Encryption</h2>
<h3 id="generate-key-pair">Generate Key Pair</h3>
<h2 id="asymmetric-encryption">
Asymmetric Encryption
<a class="anchor" href="#asymmetric-encryption">#</a>
</h2>
<h3 id="generate-key-pair">
Generate Key Pair
<a class="anchor" href="#generate-key-pair">#</a>
</h3>
<p>To use asymmetric encryption, you first need to generate a private key and calculate the corresponding public key.
Use <code>generatePrivateKey</code> for secure key generation:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generatePrivateKey</span>, <span style="color:#a6e22e">getPublicKey</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generatePrivateKey</span>, <span style="color:#a6e22e">getPublicKey</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">privateKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">generatePrivateKey</span>();
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">publicKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getPublicKey</span>(<span style="color:#a6e22e">privateKey</span>);
@ -610,40 +641,49 @@ Use <code>generatePrivateKey</code> for secure key generation:</p>
If leaked then other parties may be able to decrypt the user&rsquo;s messages.</p>
<p>The public key is unique for a given private key and can always be recovered given the private key,
hence it is not needed to save it as long as as the private key can be recovered.</p>
<h3 id="encrypt-message-1">Encrypt Message</h3>
<h3 id="encrypt-message-1">
Encrypt Message
<a class="anchor" href="#encrypt-message-1">#</a>
</h3>
<p>The public key is used to encrypt messages;
to do so, pass it in the <code>encPublicKey</code> property to <code>WakuMessage.fromBytes</code>.</p>
<p>Same as clear Waku Messages,
<code>payload</code> is your message payload and <code>contentTopic</code> is the content topic for your dApp.
See <a href="/docs/guides/02_relay_receive_send_messages/">Receive and Send Messages Using Waku Relay</a> for details.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">contentTopic</span>, {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">contentTopic</span>, {
<span style="color:#a6e22e">encPublicKey</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">publicKey</span>
});
</code></pre></div><p>The Waku Message can then be sent to the Waku network using Waku Relay or Waku Light Push:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">lightPush</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">message</span>);
</code></pre></div><h3 id="decrypt-messages-1">Decrypt Messages</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">lightPush</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">message</span>);
</code></pre></div><h3 id="decrypt-messages-1">
Decrypt Messages
<a class="anchor" href="#decrypt-messages-1">#</a>
</h3>
<p>The private key is needed to decrypt messages.</p>
<p>To decrypt messages,
whether they are received over Waku Relay or using Waku Store,
add the private key as a decryption key to your Waku instance.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">addDecryptionKey</span>(<span style="color:#a6e22e">privateKey</span>);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">addDecryptionKey</span>(<span style="color:#a6e22e">privateKey</span>);
</code></pre></div><p>Alternatively, you can pass the key when creating the instance:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">decryptionKeys</span><span style="color:#f92672">:</span> [<span style="color:#a6e22e">privateKey</span>] });
</code></pre></div><p>It will attempt to decrypt any message it receives using the key, for both symmetric and asymmetric encryption.</p>
<p>You can call <code>addDecryptionKey</code> several times if you are using multiple keys,
symmetric key and asymmetric private keys can be used together.</p>
<p>Messages that are not successfully decrypted are dropped.</p>
<h2 id="handling-wakumessage-instances">Handling <code>WakuMessage</code> instances</h2>
<h2 id="handling-wakumessage-instances">
Handling <code>WakuMessage</code> instances
<a class="anchor" href="#handling-wakumessage-instances">#</a>
</h2>
<p>When creating a Waku Message using <code>WakuMessage.fromBytes</code> with an encryption key (symmetric or asymmetric),
the payload gets encrypted.
Which means that <code>wakuMessage.payload</code> returns an encrypted payload:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">contentTopic</span>, {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">contentTopic</span>, {
<span style="color:#a6e22e">encPublicKey</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">publicKey</span>
});
@ -652,11 +692,11 @@ Which means that <code>wakuMessage.payload</code> returns an encrypted payload:<
<p><code>WakuRelay</code> and <code>WakuStore</code> never return messages that are encrypted.
If a message was not successfully decrypted, then it will be dropped from the results.</p>
<p>Which means that <code>WakuMessage</code> instances returned by <code>WakuRelay</code> and <code>WakuStore</code> always have a clear payload (in regard to Waku Message version 1):</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">decryptionKeys</span><span style="color:#f92672">:</span> [<span style="color:#a6e22e">privateKey</span>] });
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">messages</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">contentTopic</span>]);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">messages</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">contentTopic</span>]);
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">messages</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">messages</span>[<span style="color:#ae81ff">0</span>]) {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">messages</span>[<span style="color:#ae81ff">0</span>].<span style="color:#a6e22e">payload</span>); <span style="color:#75715e">// This payload is decrypted
@ -665,7 +705,10 @@ If a message was not successfully decrypted, then it will be dropped from the re
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>((<span style="color:#a6e22e">message</span>) =&gt; {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">message</span>.<span style="color:#a6e22e">payload</span>); <span style="color:#75715e">// This payload is decrypted
</span><span style="color:#75715e"></span>}, [<span style="color:#a6e22e">contentTopic</span>]);
</code></pre></div><h2 id="code-example">Code Example</h2>
</code></pre></div><h2 id="code-example">
Code Example
<a class="anchor" href="#code-example">#</a>
</h2>
<p>The <a href="https://github.com/status-im/js-waku/tree/main/examples/eth-pm">Eth-PM</a> Web App example demonstrates both the use of symmetric and asymmetric encryption.</p>
<p>Asymmetric encryption is used for private messages so that only the intended recipient can read said messages.</p>
<p>Symmetric encryption is used for the public key messages.
@ -702,8 +745,7 @@ While this does not add functional value, it does demonstrate the usage of symme
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,28 +3,29 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sign Messages Using Waku Message Version 1 The Waku Message format provides an easy way to sign messages using elliptic curve cryptography.
<meta name="description" content="Sign Messages Using Waku Message Version 1 # The Waku Message format provides an easy way to sign messages using elliptic curve cryptography.
It also allows the sender to encrypt messages, see Encrypt Messages Using Waku Message Version 1 to learn how.
You can find more details about Waku Message Payload Signature in 26/WAKU-PAYLOAD.
See Cryptographic Libraries for more details on the cryptographic libraries used by js-waku.
Create new keypair Generate a new keypair to sign your messages:">
Create new keypair # Generate a new keypair to sign your messages:">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Sign Messages Using Waku Message Version 1" />
<meta property="og:description" content="Sign Messages Using Waku Message Version 1 The Waku Message format provides an easy way to sign messages using elliptic curve cryptography.
<meta property="og:description" content="Sign Messages Using Waku Message Version 1 # The Waku Message format provides an easy way to sign messages using elliptic curve cryptography.
It also allows the sender to encrypt messages, see Encrypt Messages Using Waku Message Version 1 to learn how.
You can find more details about Waku Message Payload Signature in 26/WAKU-PAYLOAD.
See Cryptographic Libraries for more details on the cryptographic libraries used by js-waku.
Create new keypair Generate a new keypair to sign your messages:" />
Create new keypair # Generate a new keypair to sign your messages:" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2021-12-09T15:27:58+01:00" />
<title>Sign Messages Using Waku Message Version 1 | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -462,7 +463,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -517,49 +518,67 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="sign-messages-using-waku-message-version-1">Sign Messages Using Waku Message Version 1</h1>
<article class="markdown"><h1 id="sign-messages-using-waku-message-version-1">
Sign Messages Using Waku Message Version 1
<a class="anchor" href="#sign-messages-using-waku-message-version-1">#</a>
</h1>
<p>The Waku Message format provides an easy way to sign messages using elliptic curve cryptography.</p>
<p>It also allows the sender to encrypt messages,
see <a href="/docs/guides/04_encrypt_messages_version_1/">Encrypt Messages Using Waku Message Version 1</a> to learn how.</p>
<p>You can find more details about Waku Message Payload Signature in <a href="https://rfc.vac.dev/spec/26/">26/WAKU-PAYLOAD</a>.</p>
<p>See <a href="/docs/crypto_libraries/">Cryptographic Libraries</a> for more details on the cryptographic libraries used by js-waku.</p>
<h2 id="create-new-keypair">Create new keypair</h2>
<h2 id="create-new-keypair">
Create new keypair
<a class="anchor" href="#create-new-keypair">#</a>
</h2>
<p>Generate a new keypair to sign your messages:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generatePrivateKey</span>, <span style="color:#a6e22e">getPublicKey</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">generatePrivateKey</span>, <span style="color:#a6e22e">getPublicKey</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">privateKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">generatePrivateKey</span>();
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">publicKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getPublicKey</span>(<span style="color:#a6e22e">privateKey</span>);
</code></pre></div><h2 id="sign-waku-messages">Sign Waku Messages</h2>
</code></pre></div><h2 id="sign-waku-messages">
Sign Waku Messages
<a class="anchor" href="#sign-waku-messages">#</a>
</h2>
<p>As per version 1&rsquo;s <a href="https://rfc.vac.dev/spec/26/">specs</a>, signatures are only included in encrypted messages.
In the case where your app does not need encryption then you could use symmetric encryption with a trivial key.</p>
<p>You can learn more about encryption at <a href="/docs/guides/04_encrypt_messages_version_1/">Encrypt Messages Using Waku Message Version 1</a>.</p>
<h3 id="using-symmetric-encryption">Using symmetric encryption</h3>
<h3 id="using-symmetric-encryption">
Using symmetric encryption
<a class="anchor" href="#using-symmetric-encryption">#</a>
</h3>
<p>Given <code>symKey</code> the symmetric key used for encryption:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">myAppContentTopic</span>, {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">myAppContentTopic</span>, {
<span style="color:#a6e22e">encPublicKey</span>: <span style="color:#66d9ef">symKey</span>,
<span style="color:#a6e22e">sigPrivKey</span>: <span style="color:#66d9ef">privateKey</span>
});
</code></pre></div><p>If encryption is not needed for your use case,
then you can create a symmetric key from the content topic:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">hexToBuf</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku/lib/utils&#39;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">keccak256</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;ethers/lib/utils&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">hexToBuf</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku/lib/utils&#39;</span>;
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">keccak256</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;ethers/lib/utils&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">symKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">hexToBuf</span>(
<span style="color:#a6e22e">keccak256</span>(<span style="color:#a6e22e">Buffer</span>.<span style="color:#a6e22e">from</span>(<span style="color:#a6e22e">myAppContentTopic</span>, <span style="color:#e6db74">&#39;utf-8&#39;</span>))
<span style="color:#a6e22e">keccak256</span>(<span style="color:#a6e22e">Buffer</span>.<span style="color:#66d9ef">from</span>(<span style="color:#a6e22e">myAppContentTopic</span>, <span style="color:#e6db74">&#39;utf-8&#39;</span>))
);
</code></pre></div><p><code>symKey</code> can then be used to encrypt and decrypt messages on <code>myAppContentTopic</code> content topic.
Read <a href="/docs/guides/01_choose_content_topic/">How to Choose a Content Topic</a> to learn more about content topics.</p>
<h3 id="using-asymmetric-encryption">Using asymmetric encryption</h3>
<h3 id="using-asymmetric-encryption">
Using asymmetric encryption
<a class="anchor" href="#using-asymmetric-encryption">#</a>
</h3>
<p>Given <code>recipientPublicKey</code> the public key of the message&rsquo;s recipient:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">myAppContentTopic</span>, {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromBytes</span>(<span style="color:#a6e22e">payload</span>, <span style="color:#a6e22e">myAppContentTopic</span>, {
<span style="color:#a6e22e">encPublicKey</span>: <span style="color:#66d9ef">recipientPublicKey</span>,
<span style="color:#a6e22e">sigPrivKey</span>: <span style="color:#66d9ef">privateKey</span>
});
</code></pre></div><h2 id="verify-waku-message-signatures">Verify Waku Message signatures</h2>
</code></pre></div><h2 id="verify-waku-message-signatures">
Verify Waku Message signatures
<a class="anchor" href="#verify-waku-message-signatures">#</a>
</h2>
<p>Two fields are available on signed <code>WakuMessage</code>s:</p>
<ul>
<li><code>signaturePublicKey</code>: Holds the public key of the signer,</li>
@ -569,7 +588,7 @@ Read <a href="/docs/guides/01_choose_content_topic/">How to Choose a Content Top
you can simply compare <code>WakuMessage.signaturePublicKey</code> with Alice&rsquo;s public key.
As comparing hex string can lead to issues (is the <code>0x</code> prefix present?),
simply use helper function <code>equalByteArrays</code>.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">equalByteArrays</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku/lib/utils&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">equalByteArrays</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku/lib/utils&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">sigPubKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">signaturePublicKey</span>;
@ -607,8 +626,7 @@ simply use helper function <code>equalByteArrays</code>.</p>
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,22 +3,23 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Send Messages Using Waku Light Push Waku Light Push enables a client to receive a confirmation when sending a message.
<meta name="description" content="Send Messages Using Waku Light Push # Waku Light Push enables a client to receive a confirmation when sending a message.
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.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Send Messages Using Waku Light Push" />
<meta property="og:description" content="Send Messages Using Waku Light Push Waku Light Push enables a client to receive a confirmation when sending a message.
<meta property="og:description" content="Send Messages Using Waku Light Push # Waku Light Push enables a client to receive a confirmation when sending a message.
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." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" />
<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="2021-12-09T15:27:58+01:00" />
<title>Send Messages Using Waku Light Push | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -456,7 +457,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -505,7 +506,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="send-messages-using-waku-light-push">Send Messages Using Waku Light Push</h1>
<article class="markdown"><h1 id="send-messages-using-waku-light-push">
Send Messages Using Waku Light Push
<a class="anchor" href="#send-messages-using-waku-light-push">#</a>
</h1>
<p>Waku Light Push enables a client to receive a confirmation when sending a message.</p>
<p>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.
@ -516,44 +520,59 @@ it cannot guarantee propagation to the network.</p>
<p>It also means weaker privacy properties as the remote peer knows the client is the originator of the message.
Whereas with Waku Relay, a remote peer would not know whether the client created or forwarded the message.</p>
<p>You can find Waku Light Push&rsquo;s specifications on <a href="https://rfc.vac.dev/spec/19/">Vac RFC</a>.</p>
<h1 id="content-topic">Content Topic</h1>
<h1 id="content-topic">
Content Topic
<a class="anchor" href="#content-topic">#</a>
</h1>
<p>Before starting, you need to choose a <em>Content Topic</em> for your dApp.
Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a content topic guide</a> to learn more about content topics.</p>
<p>For this guide, we are using a single content topic: <code>/light-push-guide/1/guide/proto</code>.</p>
<h1 id="installation">Installation</h1>
<h1 id="installation">
Installation
<a class="anchor" href="#installation">#</a>
</h1>
<p>You can install <a href="https://npmjs.com/package/js-waku">js-waku</a> using your favorite package manager:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
</code></pre></div><h1 id="create-waku-instance">Create Waku Instance</h1>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
</code></pre></div><h1 id="create-waku-instance">
Create Waku Instance
<a class="anchor" href="#create-waku-instance">#</a>
</h1>
<p>In order to interact with the Waku network, you first need a Waku instance:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">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">true</span> });
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuNode</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">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 style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({
<span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> [
<span style="color:#e6db74">&#39;/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm&#39;</span>,
<span style="color:#e6db74">&#39;/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ&#39;</span>
]
});
</code></pre></div><h1 id="wait-to-be-connected">Wait to be connected</h1>
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
<a class="anchor" href="#wait-to-be-connected">#</a>
</h1>
<p>When using the <code>bootstrap</code> option, it may take some time to connect to other peers.
To ensure that you have a light push peer available to send messages to,
use the following function:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</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">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>();
</code></pre></div><p>The returned <code>Promise</code> will resolve once you are connected to a Waku peer.</p>
<h1 id="send-messages">Send messages</h1>
<h1 id="send-messages">
Send messages
<a class="anchor" href="#send-messages">#</a>
</h1>
<p>You can now send a message using Waku Light Push.
By default, it sends the messages to a single randomly selected light push peer.
The peer is selected among the dApp&rsquo;s connected peers.</p>
<p>If the dApp is not connected to any light push peer, an error is thrown.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">WakuMessage</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">WakuMessage</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(<span style="color:#e6db74">&#39;Here is a message&#39;</span>, <span style="color:#e6db74">`/light-push-guide/1/guide/proto`</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuMessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(<span style="color:#e6db74">&#39;Here is a message&#39;</span>, <span style="color:#e6db74">`/light-push-guide/1/guide/proto`</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">lightPush</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">wakuMessage</span>);
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ack</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">lightPush</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">wakuMessage</span>);
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">ack</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">isSuccess</span>) {
<span style="color:#75715e">// Message was not sent
</span><span style="color:#75715e"></span>}
@ -586,8 +605,7 @@ The peer is selected among the dApp&rsquo;s connected peers.</p>
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,22 +3,23 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Receive and Send Messages Using Waku Relay With ReactJS It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
<meta name="description" content="Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /min-react-js-chat/1/chat/proto.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Receive and Send Messages Using Waku Relay With ReactJS" />
<meta property="og:description" content="Receive and Send Messages Using Waku Relay With ReactJS It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
<meta property="og:description" content="Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /min-react-js-chat/1/chat/proto." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-10T12:11:15+11:00" />
<title>Receive and Send Messages Using Waku Relay With ReactJS | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -456,7 +457,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -517,21 +518,30 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="receive-and-send-messages-using-waku-relay-with-reactjs">Receive and Send Messages Using Waku Relay With ReactJS</h1>
<article class="markdown"><h1 id="receive-and-send-messages-using-waku-relay-with-reactjs">
Receive and Send Messages Using Waku Relay With ReactJS
<a class="anchor" href="#receive-and-send-messages-using-waku-relay-with-reactjs">#</a>
</h1>
<p>It is easy to use WakuConnect with ReactJS.
In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.</p>
<p>Before starting, you need to choose a <em>Content Topic</em> for your dApp.
Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a content topic guide</a> to learn more about content topics.
For this guide, we are using a single content topic: <code>/min-react-js-chat/1/chat/proto</code>.</p>
<h1 id="setup">Setup</h1>
<h1 id="setup">
Setup
<a class="anchor" href="#setup">#</a>
</h1>
<p>Create a new React app:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npx create-react-app relay-reactjs-chat
<div class="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">npx create-react-app relay-reactjs-chat
cd relay-reactjs-chat
</code></pre></div><h2 id="bigint"><code>BigInt</code></h2>
</code></pre></div><h2 id="bigint">
<code>BigInt</code>
<a class="anchor" href="#bigint">#</a>
</h2>
<p>Some of js-waku&rsquo;s dependencies use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt"><code>BigInt</code></a>
that is <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#browser_compatibility">only supported by modern browsers</a>.</p>
<p>To ensure that <code>react-scripts</code> properly transpile your webapp code, update the <code>package.json</code> file:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-json" data-lang="json">{
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-json" data-lang="json">{
<span style="color:#f92672">&#34;browserslist&#34;</span>: {
<span style="color:#f92672">&#34;production&#34;</span>: [
<span style="color:#e6db74">&#34;&gt;0.2%&#34;</span>,
@ -542,23 +552,32 @@ that is <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen
]
}
}
</code></pre></div><h2 id="setup-polyfills">Setup polyfills</h2>
</code></pre></div><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 style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install assert buffer crypto-browserify stream-browserify
</code></pre></div><h3 id="webpack-5">Webpack 5</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install 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="cra-webpack-rewired">cra-webpack-rewired</h3>
<h3 id="cra-webpack-rewired">
cra-webpack-rewired
<a class="anchor" href="#cra-webpack-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>cra-webpack-rewired</code>.</p>
<p>Install <code>cra-webpack-rewired</code>:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install -D cra-webpack-rewired
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install -D cra-webpack-rewired
</code></pre></div><p>Create a <code>config/webpack.extend.js</code> file at the root of your app:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;webpack&#39;</span>);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;webpack&#39;</span>);
<span style="color:#a6e22e">module</span>.<span style="color:#a6e22e">exports</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">dev</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">config</span>) =&gt; {
@ -619,7 +638,7 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
},
};
</code></pre></div><p>Use <code>cra-webpack-rewired</code> in the <code>package.json</code>, instead of <code>react-scripts</code>:</p>
<pre><code> &quot;scripts&quot;: {
<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;,
@ -630,13 +649,16 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
+ &quot;eject&quot;: &quot;cra-webpack-rewired eject&quot;
},
</code></pre><p>Then, install <a href="https://npmjs.com/package/js-waku">js-waku</a>:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
</code></pre></div><p>Start the dev server and open the dApp in your browser:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm run start
</code></pre></div><h1 id="create-waku-instance">Create Waku Instance</h1>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm run start
</code></pre></div><h1 id="create-waku-instance">
Create Waku Instance
<a class="anchor" href="#create-waku-instance">#</a>
</h1>
<p>In order to interact with the Waku network, you first need a Waku instance.
Go to <code>App.js</code> and modify the <code>App</code> function:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">as</span> <span style="color:#a6e22e">React</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
@ -671,11 +693,14 @@ Go to <code>App.js</code> and modify the <code>App</code> function:</p>
}
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">App</span>;
</code></pre></div><h1 id="wait-to-be-connected">Wait to be connected</h1>
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
<a class="anchor" href="#wait-to-be-connected">#</a>
</h1>
<p>When using the <code>bootstrap</code> option, it may take some time to connect to other peers.
To ensure that you have relay peers available to send and receive messages,
use the <code>Waku.waitForConnectedPeer()</code> async function:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!!</span><span style="color:#a6e22e">waku</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#39;None&#39;</span>) <span style="color:#66d9ef">return</span>;
@ -689,12 +714,15 @@ use the <code>Waku.waitForConnectedPeer()</code> async function:</p>
});
});
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
</code></pre></div><h1 id="define-message-format">Define Message Format</h1>
</code></pre></div><h1 id="define-message-format">
Define Message Format
<a class="anchor" href="#define-message-format">#</a>
</h1>
<p>To define the Protobuf message format,
use <a href="https://www.npmjs.com/package/protons">protons</a></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install protons
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install protons
</code></pre></div><p>Define <code>SimpleChatMessage</code> with two fields: <code>timestamp</code> and <code>text</code>.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
</span><span style="color:#e6db74">message SimpleChatMessage {
@ -702,9 +730,12 @@ use <a href="https://www.npmjs.com/package/protons">protons</a></p>
</span><span style="color:#e6db74"> string text = 2;
</span><span style="color:#e6db74">}
</span><span style="color:#e6db74">`</span>);
</code></pre></div><h1 id="send-messages">Send Messages</h1>
</code></pre></div><h1 id="send-messages">
Send Messages
<a class="anchor" href="#send-messages">#</a>
</h1>
<p>Create a function that takes the Waku instance and a message to send:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ContentTopic</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">`/relay-reactjs-chat/1/chat/proto`</span>;
@ -724,7 +755,7 @@ use <a href="https://www.npmjs.com/package/protons">protons</a></p>
);
}
</code></pre></div><p>Then, add a button to the <code>App</code> function:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">setWaku</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">undefined</span>);
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">wakuStatus</span>, <span style="color:#a6e22e">setWakuStatus</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#39;None&#39;</span>);
<span style="color:#75715e">// Using a counter just for the messages to be different
@ -757,13 +788,16 @@ use <a href="https://www.npmjs.com/package/protons">protons</a></p>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
);
}
</code></pre></div><h1 id="receive-messages">Receive Messages</h1>
</code></pre></div><h1 id="receive-messages">
Receive Messages
<a class="anchor" href="#receive-messages">#</a>
</h1>
<p>To process incoming messages, you need to register an observer on Waku Relay.
First, you need to define the observer function.</p>
<p>You will need to remove the observer when the component unmount.
Hence, you need the reference to the function to remain the same.
For that, use <code>React.useCallback</code>:</p>
<div class="highlight"><pre 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">processIncomingMessage</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useCallback</span>((<span style="color:#a6e22e">wakuMessage</span>) =&gt; {
<div class="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">processIncomingMessage</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useCallback</span>((<span style="color:#a6e22e">wakuMessage</span>) =&gt; {
<span style="color:#75715e">// Empty message?
</span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">payload</span>) <span style="color:#66d9ef">return</span>;
@ -779,7 +813,7 @@ For that, use <code>React.useCallback</code>:</p>
}, []);
</code></pre></div><p>Then, add this observer to Waku Relay.
Do not forget to delete the observer is the component is being unmounted:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">waku</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#75715e">// Pass the content topic to only process messages related to your dApp
@ -790,12 +824,15 @@ Do not forget to delete the observer is the component is being unmounted:</p>
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">deleteObserver</span>(<span style="color:#a6e22e">processIncomingMessage</span>, [<span style="color:#a6e22e">ContentTopic</span>]);
};
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>, <span style="color:#a6e22e">processIncomingMessage</span>]);
</code></pre></div><h1 id="display-messages">Display Messages</h1>
</code></pre></div><h1 id="display-messages">
Display Messages
<a class="anchor" href="#display-messages">#</a>
</h1>
<p>The Waku work is now done.
Your dApp is able to send and receive messages using Waku.
For the sake of completeness, let&rsquo;s display received messages on the page.</p>
<p>First, add incoming messages to the state of the <code>App</code> component:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<span style="color:#75715e">//...
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">messages</span>, <span style="color:#a6e22e">setMessages</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>([]);
@ -819,7 +856,7 @@ For the sake of completeness, let&rsquo;s display received messages on the page.
<span style="color:#75715e">// ...
</span><span style="color:#75715e"></span>}
</code></pre></div><p>Then, render the messages:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<span style="color:#75715e">// ...
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">return</span> (
@ -876,8 +913,7 @@ Try out by opening the app from different browsers.</p>
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,24 +3,25 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Retrieve Messages Using Waku Store With ReactJS It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
<meta name="description" content="Retrieve Messages Using Waku Store With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Retrieve Messages Using Waku Store With ReactJS" />
<meta property="og:description" content="Retrieve Messages Using Waku Store With ReactJS It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
<meta property="og:description" content="Retrieve Messages Using Waku Store With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-10T12:11:15+11:00" />
<title>Retrieve Messages Using Waku Store With ReactJS | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -458,7 +459,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -525,7 +526,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="retrieve-messages-using-waku-store-with-reactjs">Retrieve Messages Using Waku Store With ReactJS</h1>
<article class="markdown"><h1 id="retrieve-messages-using-waku-store-with-reactjs">
Retrieve Messages Using Waku Store With ReactJS
<a class="anchor" href="#retrieve-messages-using-waku-store-with-reactjs">#</a>
</h1>
<p>It is easy to use WakuConnect with ReactJS.
In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.</p>
<p>DApps running on a phone or in a browser are often offline:
@ -543,15 +547,21 @@ For example, when the dApp starts.</p>
<p>In this guide, we&rsquo;ll review how you can use Waku Store to retrieve messages.</p>
<p>Before starting, you need to choose a <em>Content Topic</em> for your dApp.
Check out the <a href="/docs/guides/01_choose_content_topic/">how to choose a content topic guide</a> to learn more about content topics.</p>
<h1 id="setup">Setup</h1>
<h1 id="setup">
Setup
<a class="anchor" href="#setup">#</a>
</h1>
<p>Create a new React app:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npx create-react-app store-reactjs-chat
<div class="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">npx create-react-app store-reactjs-chat
cd store-reactjs-chat
</code></pre></div><h2 id="bigint"><code>BigInt</code></h2>
</code></pre></div><h2 id="bigint">
<code>BigInt</code>
<a class="anchor" href="#bigint">#</a>
</h2>
<p>Some of js-waku&rsquo;s dependencies use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt"><code>BigInt</code></a>
that is <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#browser_compatibility">only supported by modern browsers</a>.</p>
<p>To ensure that <code>react-scripts</code> properly transpile your webapp code, update the <code>package.json</code> file:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-json" data-lang="json">{
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-json" data-lang="json">{
<span style="color:#f92672">&#34;browserslist&#34;</span>: {
<span style="color:#f92672">&#34;production&#34;</span>: [
<span style="color:#e6db74">&#34;&gt;0.2%&#34;</span>,
@ -562,23 +572,32 @@ that is <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen
]
}
}
</code></pre></div><h2 id="setup-polyfills">Setup polyfills</h2>
</code></pre></div><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 style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install assert buffer crypto-browserify stream-browserify
</code></pre></div><h3 id="webpack-5">Webpack 5</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install 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="cra-webpack-rewired">cra-webpack-rewired</h3>
<h3 id="cra-webpack-rewired">
cra-webpack-rewired
<a class="anchor" href="#cra-webpack-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>cra-webpack-rewired</code>.</p>
<p>Install <code>cra-webpack-rewired</code>:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install -D cra-webpack-rewired
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install -D cra-webpack-rewired
</code></pre></div><p>Create a <code>config/webpack.extend.js</code> file at the root of your app:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;webpack&#39;</span>);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;webpack&#39;</span>);
<span style="color:#a6e22e">module</span>.<span style="color:#a6e22e">exports</span> <span style="color:#f92672">=</span> {
<span style="color:#a6e22e">dev</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">config</span>) =&gt; {
@ -639,7 +658,7 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
},
};
</code></pre></div><p>Use <code>cra-webpack-rewired</code> in the <code>package.json</code>, instead of <code>react-scripts</code>:</p>
<pre><code> &quot;scripts&quot;: {
<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;,
@ -650,22 +669,25 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
+ &quot;eject&quot;: &quot;cra-webpack-rewired eject&quot;
},
</code></pre><p>Then, install <a href="https://npmjs.com/package/js-waku">js-waku</a>:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
</code></pre></div><p>Start the dev server and open the dApp in your browser:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm run start
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm run start
</code></pre></div><blockquote class="book-hint info">
<p>We have noticed some <a href="https://github.com/status-im/js-waku/issues/165">issues</a> with React bundling due to <code>npm</code> pulling an old version of babel.
If you are getting an error about the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">optional chaining (?.)</a>
character not being valid, try cleaning up and re-installing your dependencies:</p>
<div class="highlight"><pre 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 -rf node_modules package-lock.json
<div class="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 -rf node_modules package-lock.json
npm install
</code></pre></div>
</blockquote>
<h1 id="create-waku-instance">Create Waku Instance</h1>
<h1 id="create-waku-instance">
Create Waku Instance
<a class="anchor" href="#create-waku-instance">#</a>
</h1>
<p>In order to interact with the Waku network, you first need a Waku instance.
Go to <code>App.js</code> and modify the <code>App</code> function:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">as</span> <span style="color:#a6e22e">React</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
@ -698,11 +720,14 @@ Go to <code>App.js</code> and modify the <code>App</code> function:</p>
}
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">App</span>;
</code></pre></div><h1 id="wait-to-be-connected">Wait to be connected</h1>
</code></pre></div><h1 id="wait-to-be-connected">
Wait to be connected
<a class="anchor" href="#wait-to-be-connected">#</a>
</h1>
<p>When using the <code>bootstrap</code> option, it may take some time to connect to other peers.
To ensure that you have store peers available to retrieve messages from,
use the <code>Waku.waitForConnectedPeer()</code> async function:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() =&gt; {
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">waku</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;Connected&#39;</span>) <span style="color:#66d9ef">return</span>;
@ -711,22 +736,31 @@ use the <code>Waku.waitForConnectedPeer()</code> async function:</p>
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">&#39;Connected&#39;</span>);
});
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
</code></pre></div><h1 id="use-protobuf">Use Protobuf</h1>
</code></pre></div><h1 id="use-protobuf">
Use Protobuf
<a class="anchor" href="#use-protobuf">#</a>
</h1>
<p>Waku v2 protocols use <a href="https://developers.google.com/protocol-buffers/">protobuf</a> <a href="https://rfc.vac.dev/spec/10/">by default</a>.</p>
<p>Let&rsquo;s review how you can use protobuf to decode structured data.</p>
<p>First, define a data structure.
For this guide, we will use a simple chat message that contains a timestamp, nick and text:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">{
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">{
<span style="color:#a6e22e">timestamp</span><span style="color:#f92672">:</span> Date;
<span style="color:#a6e22e">nick</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">string</span>;
<span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">string</span>;
}
</code></pre></div><p>To encode and decode protobuf payloads, you can use the <a href="https://www.npmjs.com/package/protons">protons</a> package.</p>
<h2 id="install-protobuf-library">Install Protobuf Library</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install protons
</code></pre></div><h2 id="protobuf-definition">Protobuf Definition</h2>
<h2 id="install-protobuf-library">
Install Protobuf Library
<a class="anchor" href="#install-protobuf-library">#</a>
</h2>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install protons
</code></pre></div><h2 id="protobuf-definition">
Protobuf Definition
<a class="anchor" href="#protobuf-definition">#</a>
</h2>
<p>Define the data structure with protons:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">proto</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">protons</span>(<span style="color:#e6db74">`
</span><span style="color:#e6db74">message ChatMessage {
@ -737,10 +771,13 @@ For this guide, we will use a simple chat message that contains a timestamp, nic
</span><span style="color:#e6db74">`</span>);
</code></pre></div><p>You can learn about protobuf message definitions here:
<a href="https://developers.google.com/protocol-buffers/docs/proto">Protocol Buffers Language Guide</a>.</p>
<h2 id="decode-messages">Decode Messages</h2>
<h2 id="decode-messages">
Decode Messages
<a class="anchor" href="#decode-messages">#</a>
</h2>
<p>To decode the messages retrieved from a Waku Store node,
you need to extract the protobuf payload and decode it using <code>protons</code>.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">decodeMessage</span>(<span style="color:#a6e22e">wakuMessage</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">function</span> <span style="color:#a6e22e">decodeMessage</span>(<span style="color:#a6e22e">wakuMessage</span>) {
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">wakuMessage</span>.<span style="color:#a6e22e">payload</span>) <span style="color:#66d9ef">return</span>;
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">timestamp</span>, <span style="color:#a6e22e">nick</span>, <span style="color:#a6e22e">text</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">proto</span>.<span style="color:#a6e22e">ChatMessage</span>.<span style="color:#a6e22e">decode</span>(
@ -758,20 +795,23 @@ you need to extract the protobuf payload and decode it using <code>protons</code
<span style="color:#66d9ef">return</span> { <span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">utf8Text</span>, <span style="color:#a6e22e">timestamp</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">time</span>, <span style="color:#a6e22e">nick</span> };
}
</code></pre></div><h2 id="retrieve-messages">Retrieve messages</h2>
</code></pre></div><h2 id="retrieve-messages">
Retrieve messages
<a class="anchor" href="#retrieve-messages">#</a>
</h2>
<p>You now have all the building blocks to retrieve and decode messages for a store node.</p>
<p>Note that Waku Store queries are paginated.
The API provided by <code>js-waku</code> automatically traverses all pages of the Waku Store response.
By default, the most recent page is retrieved first but this can be changed with the <code>pageDirection</code> option.</p>
<p>First, define a React state to save the messages:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">messages</span>, <span style="color:#a6e22e">setMessages</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useState</span>([]);
<span style="color:#75715e">/// [..]
</span><span style="color:#75715e"></span>}
</code></pre></div><p>Then, define <code>processMessages</code> to decode and then store messages in the React state.
You will pass <code>processMessages</code> as a <code>callback</code> option to <code>WakuStore.queryHistory</code>.
<code>processMessages</code> will be called each time a page is received from the Waku Store.</p>
<div class="highlight"><pre 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">processMessages</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">retrievedMessages</span>) =&gt; {
<div class="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">processMessages</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">retrievedMessages</span>) =&gt; {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">messages</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">retrievedMessages</span>.<span style="color:#a6e22e">map</span>(<span style="color:#a6e22e">decodeMessage</span>).<span style="color:#a6e22e">filter</span>(Boolean);
<span style="color:#a6e22e">setMessages</span>((<span style="color:#a6e22e">currentMessages</span>) =&gt; {
@ -779,15 +819,15 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
});
};
</code></pre></div><p>Pass <code>processMessage</code> in <code>WakuStore.queryHistory</code> as the <code>callback</code> value:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">store</span>
.<span style="color:#a6e22e">queryHistory</span>([<span style="color:#a6e22e">ContentTopic</span>], { <span style="color:#a6e22e">callback</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">processMessages</span> });
</code></pre></div><p>Finally, create a <code>Messages</code> component to render the messages:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Messages</span>(<span style="color:#a6e22e">props</span>) {
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Messages</span>(<span style="color:#a6e22e">props</span>) {
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">messages</span>.<span style="color:#a6e22e">map</span>(({ <span style="color:#a6e22e">text</span>, <span style="color:#a6e22e">timestamp</span>, <span style="color:#a6e22e">nick</span> }) <span style="color:#f92672">=&gt;</span> {
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span><span style="color:#f92672">&gt;</span>
&lt;<span style="color:#f92672">li</span>&gt;
({<span style="color:#a6e22e">formatDate</span>(<span style="color:#a6e22e">timestamp</span>)}) {<span style="color:#a6e22e">nick</span>}<span style="color:#f92672">:</span> {<span style="color:#a6e22e">text</span>}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span>
&lt;/<span style="color:#f92672">li</span>&gt;
);
});
}
@ -803,23 +843,23 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
});
}
</code></pre></div><p>Use <code>Messages</code> in the <code>App</code> function:</p>
<div class="highlight"><pre 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>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
<span style="color:#75715e">// [..]
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App&#39;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App-header&#39;</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h2</span><span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">wakuStatus</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h2&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h3</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">Messages</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h3&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Messages</span> <span style="color:#a6e22e">messages</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">messages</span>} <span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/header&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App&#39;</span>&gt;
&lt;<span style="color:#f92672">header</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;App-header&#39;</span>&gt;
&lt;<span style="color:#f92672">h2</span>&gt;{<span style="color:#a6e22e">wakuStatus</span>}&lt;/<span style="color:#f92672">h2</span>&gt;
&lt;<span style="color:#f92672">h3</span>&gt;<span style="color:#a6e22e">Messages</span>&lt;/<span style="color:#f92672">h3</span>&gt;
&lt;<span style="color:#f92672">ul</span>&gt;
&lt;<span style="color:#f92672">Messages</span> <span style="color:#a6e22e">messages</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">messages</span>} /&gt;
&lt;/<span style="color:#f92672">ul</span>&gt;
&lt;/<span style="color:#f92672">header</span>&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
);
}
</code></pre></div><p>All together, you should now have:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">as</span> <span style="color:#a6e22e">React</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">protons</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;protons&#39;</span>;
@ -942,7 +982,10 @@ It will throw an error if no store node is available.</p>
<p>If no message are returned,
then you can use <a href="https://status-im.github.io/js-waku/">https://status-im.github.io/js-waku/</a> to send some messages on the
toy chat topic and refresh your app.</p>
<h2 id="filter-messages-by-send-time">Filter messages by send time</h2>
<h2 id="filter-messages-by-send-time">
Filter messages by send time
<a class="anchor" href="#filter-messages-by-send-time">#</a>
</h2>
<p>By default, Waku Store nodes store messages for 30 days.
Depending on your use case, you may not need to retrieve 30 days worth of messages.</p>
<p><a href="https://rfc.vac.dev/spec/14/">Waku Message</a> defines an optional unencrypted <code>timestamp</code> field.
@ -950,7 +993,7 @@ The timestamp is set by the sender.
By default, js-waku sets the timestamp of outgoing message to the current time.</p>
<p>You can filter messages that include a timestamp within given bounds with the <code>timeFilter</code> option.</p>
<p>Retrieve messages up to a week old:</p>
<div class="highlight"><pre 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">startTime</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date();
<div class="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">startTime</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Date();
<span style="color:#75715e">// 7 days/week, 24 hours/day, 60min/hour, 60secs/min, 100ms/sec
</span><span style="color:#75715e"></span><span style="color:#a6e22e">startTime</span>.<span style="color:#a6e22e">setTime</span>(<span style="color:#a6e22e">startTime</span>.<span style="color:#a6e22e">getTime</span>() <span style="color:#f92672">-</span> <span style="color:#ae81ff">7</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">24</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">1000</span>);
@ -959,7 +1002,10 @@ By default, js-waku sets the timestamp of outgoing message to the current time.<
<span style="color:#a6e22e">callback</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">processMessages</span>,
<span style="color:#a6e22e">timeFilter</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">startTime</span>, <span style="color:#a6e22e">endTime</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">new</span> Date() }
});
</code></pre></div><h2 id="end-result">End result</h2>
</code></pre></div><h2 id="end-result">
End result
<a class="anchor" href="#end-result">#</a>
</h2>
<p>You can see the complete code in the <a href="https://github.com/status-im/js-waku/tree/main/examples/store-reactjs-chat">Minimal ReactJS Waku Store App</a>.</p>
</article>
@ -990,8 +1036,7 @@ By default, js-waku sets the timestamp of outgoing message to the current time.<
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

31
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 Waku Concepts How to Choose a Content Topic 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 # Waku Concepts # How to Choose a Content Topic 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="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="" />
<meta property="og:description" content="" />
@ -13,9 +13,9 @@
<title>Guides | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -454,7 +454,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -504,12 +504,21 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="guides">Guides</h1>
<h2 id="waku-concepts">Waku Concepts</h2>
<article class="markdown"><h1 id="guides">
Guides
<a class="anchor" href="#guides">#</a>
</h1>
<h2 id="waku-concepts">
Waku Concepts
<a class="anchor" href="#waku-concepts">#</a>
</h2>
<ul>
<li><a href="./01_choose_content_topic/">How to Choose a Content Topic</a></li>
</ul>
<h2 id="javascript">JavaScript</h2>
<h2 id="javascript">
JavaScript
<a class="anchor" href="#javascript">#</a>
</h2>
<ul>
<li><a href="./02_relay_receive_send_messages/">Receive and Send Messages Using Waku Relay</a></li>
<li><a href="./03_store_retrieve_messages/">Retrieve Messages Using Waku Store</a></li>
@ -517,7 +526,10 @@ https://github.com/alex-shpak/hugo-book
<li><a href="./05_sign_messages_version_1/">Sign Messages Using Waku Message Version 1</a></li>
<li><a href="./06_light_push_send_messages/">Send Messages Using Waku Light Push</a></li>
</ul>
<h2 id="reactjs">ReactJS</h2>
<h2 id="reactjs">
ReactJS
<a class="anchor" href="#reactjs">#</a>
</h2>
<ul>
<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>
@ -551,8 +563,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

32
docs/guides/index.xml
View File

@ -5,18 +5,14 @@
<link>https://docs.wakuconnect.dev/docs/guides/</link>
<description>Recent content on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/docs/guides/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/docs/guides/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>How to Choose a Content Topic</title>
<link>https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/</link>
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/</guid>
<description>How to Choose a Content Topic A content topic is used for content based filtering.
<description>How to Choose a Content Topic # A content topic is used for content based filtering.
It allows you to filter out the messages that your dApp processes, both when receiving live messages (Relay) or retrieving historical messages (Store).
The format for content topics is as follows:
/{dapp-name}/{version}/{content-topic-name}/{encoding}
@ -29,10 +25,9 @@ The format for content topics is as follows:
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/</guid>
<description>Receive and Send Messages Using Waku Relay Waku Relay is a gossip protocol that enables you to send and receive messages. You can find Waku Relay&amp;rsquo;s specifications on Vac RFC.
<description>Receive and Send Messages Using Waku Relay # Waku Relay is a gossip protocol that enables you to send and receive messages. You can find Waku Relay&amp;rsquo;s specifications on Vac RFC.
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-guide/1/chat/proto.
Installation You can install js-waku using your favorite package manager:</description>
For this guide, we are using a single content topic: /relay-guide/1/chat/proto.</description>
</item>
<item>
@ -41,9 +36,8 @@ Installation You can install js-waku using your favorite package manager:</descr
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/</guid>
<description>Retrieve Messages Using Waku Store DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received. If you cannot be reached by your peers, then messages are not relayed; relay peers do not save messages for later.
However, Waku Store peers do save messages they relay, allowing you to retrieve them at a later time.</description>
<description>Retrieve Messages Using Waku Store # DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received. If you cannot be reached by your peers, then messages are not relayed; relay peers do not save messages for later.</description>
</item>
<item>
@ -52,7 +46,7 @@ However, Waku Store peers do save messages they relay, allowing you to retrieve
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/</guid>
<description>Encrypt Messages Using Waku Message Version 1 The Waku Message format provides an easy way to encrypt messages using symmetric or asymmetric encryption. The encryption comes with several handy design requirements: confidentiality, authenticity and integrity. It also allows the sender to sign messages, see Sign Messages Using Waku Message Version 1 to learn how.
<description>Encrypt Messages Using Waku Message Version 1 # The Waku Message format provides an easy way to encrypt messages using symmetric or asymmetric encryption. The encryption comes with several handy design requirements: confidentiality, authenticity and integrity. It also allows the sender to sign messages, see Sign Messages Using Waku Message Version 1 to learn how.
You can find more details about Waku Message Payload Encryption in 26/WAKU-PAYLOAD.
See Cryptographic Libraries for more details on the cryptographic libraries used by js-waku.</description>
</item>
@ -63,11 +57,11 @@ See Cryptographic Libraries for more details on the cryptographic libraries used
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/</guid>
<description>Sign Messages Using Waku Message Version 1 The Waku Message format provides an easy way to sign messages using elliptic curve cryptography.
<description>Sign Messages Using Waku Message Version 1 # The Waku Message format provides an easy way to sign messages using elliptic curve cryptography.
It also allows the sender to encrypt messages, see Encrypt Messages Using Waku Message Version 1 to learn how.
You can find more details about Waku Message Payload Signature in 26/WAKU-PAYLOAD.
See Cryptographic Libraries for more details on the cryptographic libraries used by js-waku.
Create new keypair Generate a new keypair to sign your messages:</description>
Create new keypair # Generate a new keypair to sign your messages:</description>
</item>
<item>
@ -76,7 +70,7 @@ Create new keypair Generate a new keypair to sign your messages:</description>
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/</guid>
<description>Send Messages Using Waku Light Push Waku Light Push enables a client to receive a confirmation when sending a message.
<description>Send Messages Using Waku Light Push # Waku Light Push enables a client to receive a confirmation when sending a message.
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>
@ -86,7 +80,7 @@ The Waku Relay protocol sends messages to connected peers but does not provide a
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/</guid>
<description>Receive and Send Messages Using Waku Relay With ReactJS It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
<description>Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /min-react-js-chat/1/chat/proto.</description>
</item>
@ -96,10 +90,10 @@ Before starting, you need to choose a Content Topic for your dApp. Check out the
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/</guid>
<description>Retrieve Messages Using Waku Store With ReactJS It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
<description>Retrieve Messages Using Waku Store With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received.</description>
</item>
</channel>
</rss>
</rss>

56
docs/guides/vote_poll_sdk/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="WakuConnect Vote &amp; Poll SDK The WakuConnect Vote &amp; Poll SDK enables developers to add Waku powered polling and voting features to their dApp.
<meta name="description" content="WakuConnect Vote &amp; Poll SDK # The WakuConnect Vote &amp; Poll SDK enables developers to add Waku powered polling and voting features to their dApp.
The repository can be found on GitHub: https://github.com/status-im/wakuconnect-vote-poll-sdk.
The SDK can be used in two different ways: to vote (commitment to the blockchain) or poll (no interaction with the blockchain).
For both functionalities, only ERC-20 token holders can create or answer polls/votes. The developer using the SDK can configure which ERC-20 token contract is used.">
@ -16,9 +16,9 @@ For both functionalities, only ERC-20 token holders can create or answer polls/v
<title>Vote Poll Sdk | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -457,7 +457,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -521,31 +521,49 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="wakuconnect-vote--poll-sdk">WakuConnect Vote &amp; Poll SDK</h1>
<article class="markdown"><h1 id="wakuconnect-vote--poll-sdk">
WakuConnect Vote &amp; Poll SDK
<a class="anchor" href="#wakuconnect-vote--poll-sdk">#</a>
</h1>
<p>The WakuConnect Vote &amp; Poll SDK enables developers to add Waku powered polling and voting features to their dApp.</p>
<p>The repository can be found on GitHub: <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk">https://github.com/status-im/wakuconnect-vote-poll-sdk</a>.</p>
<p>The SDK can be used in two different ways:
to vote (commitment to the blockchain) or poll (no interaction with the blockchain).</p>
<p>For both functionalities, only ERC-20 token holders can create or answer polls/votes.
The developer using the SDK can configure which ERC-20 token contract is used.</p>
<h2 id="packages">Packages</h2>
<h3 id="common">Common</h3>
<h2 id="packages">
Packages
<a class="anchor" href="#packages">#</a>
</h2>
<h3 id="common">
Common
<a class="anchor" href="#common">#</a>
</h3>
<ul>
<li><code>@waku/vote-poll-sdk-core</code>: Common libraries to both vote and poll functionalities.</li>
<li><code>@waku/vote-poll-sdk-react-components</code>: Common React components to both vote and poll functionalities.</li>
</ul>
<h3 id="vote">Vote</h3>
<h3 id="vote">
Vote
<a class="anchor" href="#vote">#</a>
</h3>
<ul>
<li><code>@waku/vote-sdk-react-components</code>: React components.</li>
<li><code>@waku/vote-sdk-react-hooks</code>: React hooks.</li>
<li><code>@waku/vote-sdk-contracts</code>: Solidity contracts.</li>
</ul>
<h3 id="poll">Poll</h3>
<h3 id="poll">
Poll
<a class="anchor" href="#poll">#</a>
</h3>
<ul>
<li><code>@waku/poll-sdk-react-components</code>: React components.</li>
<li><code>@waku/poll-sdk-react-hooks</code>: React hooks.</li>
</ul>
<h2 id="wakuconnect-vote-sdk">WakuConnect Vote SDK</h2>
<h2 id="wakuconnect-vote-sdk">
WakuConnect Vote SDK
<a class="anchor" href="#wakuconnect-vote-sdk">#</a>
</h2>
<p>The WakuConnect Vote SDK allows you to leverage Waku to save gas fees for most voters.
It uses Waku to broadcast and aggregate votes.
Most token holders will not need to spend gas to vote.</p>
@ -554,7 +572,10 @@ Most token holders will not need to spend gas to vote.</p>
where proposal creation and vote results must be committed to the blockchain.</p>
<p>With WakuConnect Vote SDK, the DAO could be the one spending gas when creating the proposal and committing the votes,
whereas the token holders do not spend gas when voting.</p>
<h3 id="documentation">Documentation</h3>
<h3 id="documentation">
Documentation
<a class="anchor" href="#documentation">#</a>
</h3>
<blockquote class="book-hint info">
The documentation effort is currently in progress.
It is tracked with <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/issues/11">status-im/wakuconnect-vote-poll-sdk#11</a>.
@ -569,7 +590,10 @@ there may be issues with undeclared dependencies with this example.
Tracked with <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/issues/11">status-im/wakuconnect-vote-poll-sdk#11</a>.
</blockquote>
<h2 id="wakuconnect-poll-sdk">WakuConnect Poll SDK</h2>
<h2 id="wakuconnect-poll-sdk">
WakuConnect Poll SDK
<a class="anchor" href="#wakuconnect-poll-sdk">#</a>
</h2>
<p>The WakuConnect Poll SDK allows you to leverage Waku and enable token holders to create, answer and view polls.
The polls are not committed to the blockchain and hence do not cost gas.</p>
<p>As the polls use Waku, they do maintain properties expected from dApps: decentralized and censorship-resistant.</p>
@ -588,7 +612,10 @@ The polls are not committed to the blockchain and hence do not cost gas.</p>
</ul>
</li>
</ul>
<h3 id="documentation-1">Documentation</h3>
<h3 id="documentation-1">
Documentation
<a class="anchor" href="#documentation-1">#</a>
</h3>
<p>See <a href="./poll_sdk">How to Use the WakuConnect Poll SDK</a>.</p>
</article>
@ -619,8 +646,7 @@ The polls are not committed to the blockchain and hence do not cost gas.</p>
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

8
docs/guides/vote_poll_sdk/index.xml
View File

@ -5,10 +5,6 @@
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/</link>
<description>Recent content on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>
</rss>

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

@ -3,26 +3,25 @@
<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.
<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.
WakuConnect Vote &amp; Poll SDK will be upgraded to the latest version of @usedapp/core and ethers once ethereum-waffle is released with the latest version of ethers.">
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.
<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.
WakuConnect Vote &amp; Poll SDK will be upgraded to the latest version of @usedapp/core and ethers once ethereum-waffle is released with the latest version of ethers." />
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="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-05T11:02:48+11:00" />
<title>Create the DApp and Install Dependencies | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -460,7 +459,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -515,12 +514,18 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="create-the-dapp-and-install-dependencies">Create the DApp and Install Dependencies</h1>
<h2 id="create-react-app">Create React App</h2>
<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 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
<div class="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">\
@ -533,23 +538,32 @@ is released with the <a href="https://github.com/EthWorks/Waffle/pull/603">lates
</blockquote>
<h2 id="setup-polyfills">Setup polyfills</h2>
<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 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</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-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</h3>
<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 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
<div class="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 style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;webpack&#39;</span>);
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">webpack</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;webpack&#39;</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; {
@ -573,7 +587,7 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
<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><code> &quot;scripts&quot;: {
<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;,
@ -583,9 +597,12 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
+ &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</h2>
</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 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
<div class="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>
@ -635,8 +652,7 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,22 +3,23 @@
<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="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: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="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-05T11:02:48+11:00" />
<title>Connect to the Ethereum Wallet | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -456,7 +457,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -511,21 +512,27 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="connect-to-the-ethereum-wallet">Connect to the Ethereum Wallet</h1>
<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 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</h2>
<div class="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 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>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span><span style="color:#f92672">&lt;</span><span style="color:#66d9ef">undefined</span> <span style="color:#f92672">|</span> <span style="color:#a6e22e">JsonRpcSigner</span><span style="color:#f92672">&gt;</span>(<span style="color:#66d9ef">undefined</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>) {
@ -537,8 +544,8 @@ The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p
}, [<span style="color:#a6e22e">account</span>])
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">TopBar</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>}
@ -546,15 +553,21 @@ The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
<span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
)
}
</code></pre></div><h2 id="page">Page</h2>
<h3 id="usedapp">UseDApp</h3>
</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 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:#a6e22e">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>;
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">DEFAULT_CONFIG</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;@usedapp/core/dist/cjs/src/model/config/default&#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-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">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>,
@ -573,37 +586,43 @@ The component uses <code>ethers</code> to connect to the user&rsquo;s wallet:</p
},
}
</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</h3>
<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 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:#a6e22e">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">&#39;styled-components&#39;</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</h3>
</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 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>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Wrapper</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">GlobalStyle</span><span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}<span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">PollPage</span><span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/DAppProvider&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/Wrapper&gt;</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 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:#a6e22e">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:#a6e22e">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:#a6e22e">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:#a6e22e">from</span> <span style="color:#e6db74">&#39;react-dom&#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">&#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:#a6e22e">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:#a6e22e">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:#a6e22e">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:#a6e22e">from</span> <span style="color:#e6db74">&#39;styled-components&#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">DEFAULT_CONFIG</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;@usedapp/core/dist/cjs/src/model/config/default&#34;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;styled-components&#39;</span>
<span style="color:#66d9ef">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>,
@ -624,7 +643,7 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span><span style="color:#f92672">&lt;</span><span style="color:#66d9ef">undefined</span> <span style="color:#f92672">|</span> <span style="color:#a6e22e">JsonRpcSigner</span><span style="color:#f92672">&gt;</span>(<span style="color:#66d9ef">undefined</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>) {
@ -636,8 +655,8 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
}, [<span style="color:#a6e22e">account</span>])
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">TopBar</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>}
@ -645,19 +664,19 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
<span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</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> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Wrapper</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">GlobalStyle</span><span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}<span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">PollPage</span><span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/DAppProvider&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/Wrapper&gt;</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;
)
}
@ -668,9 +687,9 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
</span><span style="color:#e6db74">`</span>
<span style="color:#a6e22e">ReactDOM</span>.<span style="color:#a6e22e">render</span>(
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">StrictMode</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">App</span><span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/React.StrictMode&gt;,</span>
&lt;<span style="color:#f92672">React.StrictMode</span>&gt;
&lt;<span style="color:#f92672">App</span>/&gt;
&lt;/<span style="color:#f92672">React.StrictMode</span>&gt;,
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#39;root&#39;</span>)
);
</code></pre></div><p>
@ -722,8 +741,7 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,24 +3,25 @@
<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 &#39;styled-components&#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button Create a button that will display the PollCreation component on click.">
<meta name="description" content="Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
import styled from &#39;styled-components&#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button # Create a button that will display the PollCreation component on click.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Create-A-Poll Button" />
<meta property="og:description" content="Create-A-Poll Button Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components Again, create a Wrapper for styling:
import styled from &#39;styled-components&#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button Create a button that will display the PollCreation component on click." />
<meta property="og:description" content="Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
import styled from &#39;styled-components&#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button # Create a button that will display the PollCreation component on click." />
<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="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-06T13:19:14+11:00" />
<title>Create-A-Poll Button | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -458,7 +459,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -507,15 +508,21 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="create-a-poll-button">Create-A-Poll Button</h1>
<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 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
<div class="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</h2>
</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 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:#a6e22e">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">&#39;styled-components&#39;</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;
@ -536,7 +543,10 @@ touch components/Poll.tsx
</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</h2>
</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>
@ -545,12 +555,12 @@ 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 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:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span>} <span style="color:#a6e22e">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:#a6e22e">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:#a6e22e">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@ethersproject/providers&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<span style="color:#a6e22e">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</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>
}
@ -561,22 +571,22 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Wrapper</span><span style="color:#f92672">&gt;</span>
&lt;<span style="color:#f92672">Wrapper</span>&gt;
{
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
&lt;<span style="color:#f92672">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}<span style="color:#f92672">&gt;</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>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/CreateButton&gt;</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/Wrapper&gt;</span>
&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 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>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span><span style="color:#f92672">&lt;</span><span style="color:#66d9ef">undefined</span> <span style="color:#f92672">|</span> <span style="color:#a6e22e">JsonRpcSigner</span><span style="color:#f92672">&gt;</span>(<span style="color:#66d9ef">undefined</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>) {
@ -588,8 +598,8 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
}, [<span style="color:#a6e22e">account</span>])
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">TopBar</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>}
@ -597,9 +607,9 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
<span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>}<span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</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>
@ -653,8 +663,7 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,24 +3,25 @@
<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.
<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.
<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="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-06T13:19:14+11:00" />
<title>Poll Creation Component | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -458,7 +459,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -502,7 +503,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="poll-creation-component">Poll Creation Component</h1>
<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>
@ -517,16 +521,16 @@ 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 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:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useConfig</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">PollCreation</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span>} <span style="color:#a6e22e">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:#a6e22e">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:#a6e22e">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:#a6e22e">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">ChainId</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;@usedapp/core/src/constants&#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-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useConfig</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">PollCreation</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@ethersproject/providers&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWakuPolling</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-hooks&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<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:#a6e22e">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</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>
@ -543,27 +547,27 @@ Only token holders can create and answer polls.</li>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Wrapper</span><span style="color:#f92672">&gt;</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> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">PollCreation</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}<span style="color:#f92672">/&gt;</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;
)}
{
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
&lt;<span style="color:#f92672">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}<span style="color:#f92672">&gt;</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>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/CreateButton&gt;</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/Wrapper&gt;</span>
&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 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>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">chainId</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>()
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span><span style="color:#f92672">&lt;</span><span style="color:#66d9ef">undefined</span> <span style="color:#f92672">|</span> <span style="color:#a6e22e">JsonRpcSigner</span><span style="color:#f92672">&gt;</span>(<span style="color:#66d9ef">undefined</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>) {
@ -575,8 +579,8 @@ Replace those with your own.</p>
}, [<span style="color:#a6e22e">account</span>])
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">TopBar</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>}
@ -584,10 +588,10 @@ Replace those with your own.</p>
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
<span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;demo-poll-dapp&#39;</span>} <span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>} <span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#39;</span>}<span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
/&gt;
&lt;<span style="color:#f92672">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;demo-poll-dapp&#39;</span>} <span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>} <span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#39;</span>}/&gt;
&lt;/<span style="color:#f92672">div</span>&gt;
)
}
</code></pre></div><p>You can now see the poll creation modal when clicking on the button:</p>
@ -642,8 +646,7 @@ Replace those with your own.</p>
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -3,26 +3,27 @@
<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.
<meta name="description" content="Poll List Component # To display existing polls, the PollList component is provided.
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
components/Poll.tsx:
import {useState} from &#39;react&#39; import {useConfig} from &#39;@usedapp/core&#39; import {PollCreation, PollList} from &#39;@waku/poll-sdk-react-components&#39; import {JsonRpcSigner, Web3Provider} from &#39;@ethersproject/providers&#39; import {useWakuPolling} from &#39;@waku/poll-sdk-react-hooks&#39; import {CreateButton} from &#39;@waku/vote-poll-sdk-react-components&#39; import {Theme} from &#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39; import {ChainId} from &#34;@usedapp/core/src/constants&#34;; type PollProps = { appName: string library: Web3Provider | undefined signer: JsonRpcSigner | undefined chainId: ChainId | undefined account: string | null | undefined theme: Theme tokenAddress: string } export function Poll({appName, library, signer, chainId, account, theme, tokenAddress}: PollProps) { const config = useConfig() const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?">
<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.
<meta property="og:description" content="Poll List Component # To display existing polls, the PollList component is provided.
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
components/Poll.tsx:
import {useState} from &#39;react&#39; import {useConfig} from &#39;@usedapp/core&#39; import {PollCreation, PollList} from &#39;@waku/poll-sdk-react-components&#39; import {JsonRpcSigner, Web3Provider} from &#39;@ethersproject/providers&#39; import {useWakuPolling} from &#39;@waku/poll-sdk-react-hooks&#39; import {CreateButton} from &#39;@waku/vote-poll-sdk-react-components&#39; import {Theme} from &#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39; import {ChainId} from &#34;@usedapp/core/src/constants&#34;; type PollProps = { appName: string library: Web3Provider | undefined signer: JsonRpcSigner | undefined chainId: ChainId | undefined account: string | null | undefined theme: Theme tokenAddress: string } export function Poll({appName, library, signer, chainId, account, theme, tokenAddress}: PollProps) { const config = useConfig() const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?" />
<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="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
<meta property="article:modified_time" content="2022-01-05T11:02:48+11:00" />
<title>Poll List Component | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -460,7 +461,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -504,21 +505,24 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="poll-list-component">Poll List Component</h1>
<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 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:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useConfig</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">PollCreation</span>, <span style="color:#a6e22e">PollList</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span>} <span style="color:#a6e22e">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:#a6e22e">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:#a6e22e">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:#a6e22e">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">ChainId</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;@usedapp/core/src/constants&#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-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;react&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useConfig</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@usedapp/core&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">PollCreation</span>, <span style="color:#a6e22e">PollList</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@ethersproject/providers&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWakuPolling</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/poll-sdk-react-hooks&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components&#39;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39;</span>
<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:#a6e22e">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</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>
@ -536,25 +540,25 @@ It needs the <code>account</code> variable that can be passed as a property to <
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
<span style="color:#66d9ef">return</span> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Wrapper</span><span style="color:#f92672">&gt;</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> (
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">PollCreation</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}<span style="color:#f92672">/&gt;</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;
)}
{
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
&lt;<span style="color:#f92672">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;lightgrey&#34;</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=&gt;</span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}<span style="color:#f92672">&gt;</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>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/CreateButton&gt;</span>
&lt;/<span style="color:#f92672">CreateButton</span>&gt;
}
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">PollList</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>} <span style="color:#f92672">/&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/Wrapper&gt;</span>
&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 style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;demo-poll-dapp&#39;</span>} <span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>} <span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"> &lt;<span style="color:#f92672">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;demo-poll-dapp&#39;</span>} <span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>} <span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#39;</span>}<span style="color:#f92672">/&gt;</span>
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">&#39;0x744d70FDBE2Ba4CF95131626614a1763DF805B9E&#39;</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>
@ -607,8 +611,7 @@ It also allows passing a token contract address in the url, as described in the
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

18
docs/guides/vote_poll_sdk/poll_sdk/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="How to Use the WakuConnect Poll SDK To demonstrate how to use the WakuConnect Poll SDK in your dApp, we will create a TypeScript React app from scratch.
<meta name="description" content="How to Use the WakuConnect Poll SDK # To demonstrate how to use the WakuConnect Poll SDK in your dApp, we will create a TypeScript React app from scratch.
You can then adapt the steps depending on your dApp configuration and build setup.
The resulting code of this guide can be found at https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/main/examples/mainnet-poll.
Here is a preview of the end result:
@ -13,13 +13,13 @@ Get Started ">
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" />
<meta property="og:updated_time" content="2022-01-03T11:00:00+11:00" />
<title>Poll SDK | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -458,7 +458,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -502,7 +502,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="how-to-use-the-wakuconnect-poll-sdk">How to Use the WakuConnect Poll SDK</h1>
<article class="markdown"><h1 id="how-to-use-the-wakuconnect-poll-sdk">
How to Use the WakuConnect Poll SDK
<a class="anchor" href="#how-to-use-the-wakuconnect-poll-sdk">#</a>
</h1>
<p>To demonstrate how to use the WakuConnect Poll SDK in your dApp, we will create a TypeScript React app from scratch.</p>
<p>You can then adapt the steps depending on your dApp configuration and build setup.</p>
<p>The resulting code of this guide can be found at
@ -548,8 +551,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

@ -6,21 +6,16 @@
<description>Recent content in Poll SDK on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<lastBuildDate>Mon, 03 Jan 2022 11:00:00 +1100</lastBuildDate>
<atom:link href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/index.xml" rel="self" type="application/rss+xml" />
<lastBuildDate>Mon, 03 Jan 2022 11:00:00 +1100</lastBuildDate><atom:link href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Create the DApp and Install Dependencies</title>
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/</link>
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/</guid>
<description>Create the DApp and Install Dependencies Create React App Create the new React app using the typescript template. Install the Waku Poll SDK packages.
<description>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.
WakuConnect Vote &amp;amp; Poll SDK will be upgraded to the latest version of @usedapp/core and ethers once ethereum-waffle is released with the latest version of ethers.</description>
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.</description>
</item>
<item>
@ -29,8 +24,8 @@ WakuConnect Vote &amp;amp; Poll SDK will be upgraded to the latest version of @u
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/</guid>
<description>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&amp;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&amp;rsquo;s wallet:</description>
<description>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&amp;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&amp;rsquo;s wallet:</description>
</item>
<item>
@ -39,9 +34,9 @@ rm -f App.tsx App.css App.test.tsx Top bar Use TopBar component to display walle
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</guid>
<description>Create-A-Poll Button Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&amp;rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components Again, create a Wrapper for styling:
import styled from &amp;#39;styled-components&amp;#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button Create a button that will display the PollCreation component on click.</description>
<description>Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&amp;rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
import styled from &amp;#39;styled-components&amp;#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button # Create a button that will display the PollCreation component on click.</description>
</item>
<item>
@ -50,7 +45,7 @@ import styled from &amp;#39;styled-components&amp;#39; const Wrapper = styled.di
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/</guid>
<description>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.
<description>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.</description>
</item>
@ -61,11 +56,11 @@ useWakuPolling takes:
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/</guid>
<description>Poll List Component To display existing polls, the PollList component is provided.
<description>Poll List Component # To display existing polls, the PollList component is provided.
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
components/Poll.tsx:
import {useState} from &amp;#39;react&amp;#39; import {useConfig} from &amp;#39;@usedapp/core&amp;#39; import {PollCreation, PollList} from &amp;#39;@waku/poll-sdk-react-components&amp;#39; import {JsonRpcSigner, Web3Provider} from &amp;#39;@ethersproject/providers&amp;#39; import {useWakuPolling} from &amp;#39;@waku/poll-sdk-react-hooks&amp;#39; import {CreateButton} from &amp;#39;@waku/vote-poll-sdk-react-components&amp;#39; import {Theme} from &amp;#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&amp;#39; import {ChainId} from &amp;#34;@usedapp/core/src/constants&amp;#34;; type PollProps = { appName: string library: Web3Provider | undefined signer: JsonRpcSigner | undefined chainId: ChainId | undefined account: string | null | undefined theme: Theme tokenAddress: string } export function Poll({appName, library, signer, chainId, account, theme, tokenAddress}: PollProps) { const config = useConfig() const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?</description>
</item>
</channel>
</rss>
</rss>

23
docs/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="WakuConnect Docs WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
<meta name="description" content="WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at waku.">
<meta name="theme-color" content="#FFFFFF">
@ -11,15 +11,15 @@ Waku can be used for chat purposes and for many machine-to-machine use cases. Yo
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/" />
<meta property="og:updated_time" content="2021-12-09T14:00:00+01:00" />
<title>Introduction | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/docs/" title="Introducción">
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/docs/" title="Introdução">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -462,7 +462,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -510,7 +510,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="wakuconnect-docs">WakuConnect Docs</h1>
<article class="markdown"><h1 id="wakuconnect-docs">
WakuConnect Docs
<a class="anchor" href="#wakuconnect-docs">#</a>
</h1>
<p>WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
<p>Waku is a decentralized, censorship-resistant, network and protocol family.
It enables you to add communication features to your dApp in a decentralized manner,
@ -527,7 +530,10 @@ and how it can be used with popular web frameworks.</p>
The examples are working Proof-of-Concepts that demonstrate how to use js-waku.
Check out the <a href="/docs/examples/">example list</a> to see what usage each example demonstrates.</p>
<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">Bugs, Questions &amp; Support</h2>
<h2 id="bugs-questions--support">
Bugs, Questions &amp; Support
<a class="anchor" href="#bugs-questions--support">#</a>
</h2>
<p>If you encounter any bug or would like to propose new features, feel free to <a href="https://github.com/status-im/js-waku/issues/new/">open an issue</a>.</p>
<p>To get help, join #dappconnect-support on <a href="https://discord.gg/j5pGbn7MHZ">Vac Discord</a> or <a href="https://t.me/dappconnectsupport">Telegram</a>.
For more general discussion and latest news, join #dappconnect on <a href="https://discord.gg/9DgykdmpZ6">Vac Discord</a> or <a href="https://t.me/dappconnect">Telegram</a>.</p>
@ -560,8 +566,7 @@ For more general discussion and latest news, join #dappconnect on <a href="https
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

36
docs/index.xml
View File

@ -6,18 +6,14 @@
<description>Recent content in Introduction on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<lastBuildDate>Thu, 09 Dec 2021 14:00:00 +0100</lastBuildDate>
<atom:link href="https://docs.wakuconnect.dev/docs/index.xml" rel="self" type="application/rss+xml" />
<lastBuildDate>Thu, 09 Dec 2021 14:00:00 +0100</lastBuildDate><atom:link href="https://docs.wakuconnect.dev/docs/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Introduction</title>
<link>https://docs.wakuconnect.dev/docs/introduction/</link>
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/introduction/</guid>
<description>WakuConnect Docs WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
<description>WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at waku.</description>
</item>
@ -28,10 +24,10 @@ Waku can be used for chat purposes and for many machine-to-machine use cases. Yo
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/quick_start/</guid>
<description>Quick Start In this section you will learn how to receive and send messages using Waku Relay.
<description>Quick Start # In this section you will learn how to receive and send messages using Waku Relay.
A more in depth guide for Waku Relay can be found here.
Install Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node import { Waku } from &amp;#39;js-waku&amp;#39;; const waku = await Waku.create({ bootstrap: true }); Listen for messages The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
Install # Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import { Waku } from &amp;#39;js-waku&amp;#39;; const waku = await Waku.create({ bootstrap: true }); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
</item>
<item>
@ -40,7 +36,7 @@ npm install js-waku # or with yarn yarn add js-waku Start a waku node import { W
<pubDate>Wed, 05 Jan 2022 00:00:00 +0000</pubDate>
<guid>https://docs.wakuconnect.dev/docs/use_cases/</guid>
<description>Use Cases Waku is a generalized communication network. It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels).
<description>Use Cases # Waku is a generalized communication network. It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels).
This is a non-exhaustive list of use cases that we have considered and their current status.
If we are aware of other projects using js-waku and other use cases that could be implemented, feel free to open a PR.
Legend:
@ -53,14 +49,12 @@ Legend:
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<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.
<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.
Demonstrates:
Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App Repo: store-reactjs-chat.
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.
Demonstrates:
How to stop retrieving results from Waku Store on condition Use minified bundle from Unpkg.</description>
Waku Store React/JavaScript Protobuf using protons Vanilla Javascript Using Minified Library # Repo: unpkg-js-store.</description>
</item>
<item>
@ -69,9 +63,9 @@ Demonstrates:
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/crypto_libraries/</guid>
<description>Cryptographic Libraries A note on the cryptographic libraries used as it is a not a straightforward affair.
Asymmetric encryption Uses ecies-geth which in turns uses SubtleCrypto Web API (browser), secp256k1 (native binding for node) or elliptic (pure JS if none of the other libraries are available).
Symmetric encryption Uses SubtleCrypto Web API (browser) or NodeJS&amp;rsquo; crypto module.</description>
<description>Cryptographic Libraries # A note on the cryptographic libraries used as it is a not a straightforward affair.
Asymmetric encryption # Uses ecies-geth which in turns uses SubtleCrypto Web API (browser), secp256k1 (native binding for node) or elliptic (pure JS if none of the other libraries are available).
Symmetric encryption # Uses SubtleCrypto Web API (browser) or NodeJS&#39; crypto module.</description>
</item>
<item>
@ -80,9 +74,9 @@ Symmetric encryption Uses SubtleCrypto Web API (browser) or NodeJS&amp;rsquo; cr
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/waku_protocols/</guid>
<description>Waku Protocol Support You can track progress on the project board.
<description>Waku Protocol Support # You can track progress on the project board.
✔: Supported 🚧: Implementation in progress ⛔: Support is not planned Spec Implementation Status 6/WAKU1 ⛔ 7/WAKU-DATA ⛔ 8/WAKU-MAIL ⛔ 9/WAKU-RPC ⛔ 10/WAKU2 🚧 11/WAKU2-RELAY ✔ 12/WAKU2-FILTER 13/WAKU2-STORE ✔ (querying node only) 14/WAKU2-MESSAGE ✔ 15/WAKU2-BRIDGE 16/WAKU2-RPC ⛔ 17/WAKU2-RLNRELAY 18/WAKU2-SWAP 19/WAKU2-LIGHTPUSH ✔ 20/TOY-ETH-PM ✔ (as example) 21/WAKU2-FTSTORE ✔ 22/TOY-CHAT ✔ (as example) 25/LIBP2P-DNS-DISCOVERY 🚧 26/WAKU2-PAYLOAD ✔ </description>
</item>
</channel>
</rss>
</rss>

26
docs/introduction/index.html
View File

@ -3,24 +3,25 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="WakuConnect Docs WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
<meta name="description" content="WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at waku.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Introduction" />
<meta property="og:description" content="WakuConnect Docs WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
<meta property="og:description" content="WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at waku." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/introduction/" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/introduction/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2022-01-10T12:30:09+11:00" />
<title>Introduction | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -458,7 +459,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -506,7 +507,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="wakuconnect-docs">WakuConnect Docs</h1>
<article class="markdown"><h1 id="wakuconnect-docs">
WakuConnect Docs
<a class="anchor" href="#wakuconnect-docs">#</a>
</h1>
<p>WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
<p>Waku is a decentralized, censorship-resistant, network and protocol family.
It enables you to add communication features to your dApp in a decentralized manner,
@ -523,7 +527,10 @@ and how it can be used with popular web frameworks.</p>
The examples are working Proof-of-Concepts that demonstrate how to use js-waku.
Check out the <a href="/docs/examples/">example list</a> to see what usage each example demonstrates.</p>
<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">Bugs, Questions &amp; Support</h2>
<h2 id="bugs-questions--support">
Bugs, Questions &amp; Support
<a class="anchor" href="#bugs-questions--support">#</a>
</h2>
<p>If you encounter any bug or would like to propose new features, feel free to <a href="https://github.com/status-im/js-waku/issues/new/">open an issue</a>.</p>
<p>To get help, join #dappconnect-support on <a href="https://discord.gg/j5pGbn7MHZ">Vac Discord</a> or <a href="https://t.me/dappconnectsupport">Telegram</a>.
For more general discussion and latest news, join #dappconnect on <a href="https://discord.gg/9DgykdmpZ6">Vac Discord</a> or <a href="https://t.me/dappconnect">Telegram</a>.</p>
@ -556,8 +563,7 @@ For more general discussion and latest news, join #dappconnect on <a href="https
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

68
docs/quick_start/index.html
View File

@ -3,26 +3,27 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Quick Start In this section you will learn how to receive and send messages using Waku Relay.
<meta name="description" content="Quick Start # In this section you will learn how to receive and send messages using Waku Relay.
A more in depth guide for Waku Relay can be found here.
Install Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node import { Waku } from &#39;js-waku&#39;; const waku = await Waku.create({ bootstrap: true }); Listen for messages The contentTopic is a metadata string that allows categorization of messages on the waku network.">
Install # Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import { Waku } from &#39;js-waku&#39;; const waku = await Waku.create({ bootstrap: true }); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Quick Start" />
<meta property="og:description" content="Quick Start In this section you will learn how to receive and send messages using Waku Relay.
<meta property="og:description" content="Quick Start # In this section you will learn how to receive and send messages using Waku Relay.
A more in depth guide for Waku Relay can be found here.
Install Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node import { Waku } from &#39;js-waku&#39;; const waku = await Waku.create({ bootstrap: true }); Listen for messages The contentTopic is a metadata string that allows categorization of messages on the waku network." />
Install # Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import { Waku } from &#39;js-waku&#39;; const waku = await Waku.create({ bootstrap: true }); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/quick_start/" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/quick_start/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2021-12-09T15:27:58+01:00" />
<title>Quick Start | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -460,7 +461,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -515,35 +516,53 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="quick-start">Quick Start</h1>
<article class="markdown"><h1 id="quick-start">
Quick Start
<a class="anchor" href="#quick-start">#</a>
</h1>
<p>In this section you will learn how to receive and send messages using Waku Relay.</p>
<p>A more in depth guide for Waku Relay can be found <a href="/docs/guides/02_relay_receive_send_messages/">here</a>.</p>
<h2 id="install">Install</h2>
<h2 id="install">
Install
<a class="anchor" href="#install">#</a>
</h2>
<p>Install the <code>js-waku</code> package:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install js-waku
<span style="color:#75715e"># or with yarn</span>
yarn add js-waku
</code></pre></div><h3 id="start-a-waku-node">Start a waku node</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
</code></pre></div><h3 id="start-a-waku-node">
Start a waku node
<a class="anchor" href="#start-a-waku-node">#</a>
</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Waku</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">waku</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span>: <span style="color:#66d9ef">true</span> });
</code></pre></div><h3 id="listen-for-messages">Listen for messages</h3>
<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:#66d9ef">true</span> });
</code></pre></div><h3 id="listen-for-messages">
Listen for messages
<a class="anchor" href="#listen-for-messages">#</a>
</h3>
<p>The <code>contentTopic</code> is a metadata <code>string</code> that allows categorization of messages on the waku network.
Depending on your use case, you can either create one (or several) new <code>contentTopic</code>(s)
or look at the <a href="https://rfc.vac.dev/">RFCs</a> and use an existing <code>contentTopic</code>.
See <a href="/docs/guides/01_choose_content_topic/">How to Choose a Content Topic</a> for more details.</p>
<p>For example, if you were to use a new <code>contentTopic</code> such as <code>/my-cool-app/1/my-use-case/proto</code>,
here is how to listen to new messages received via <a href="https://rfc.vac.dev/spec/11/">Waku v2 Relay</a>:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>((<span style="color:#a6e22e">msg</span>) <span style="color:#f92672">=&gt;</span> {
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">addObserver</span>((<span style="color:#a6e22e">msg</span>) <span style="color:#f92672">=&gt;</span> {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Message received:&#34;</span>, <span style="color:#a6e22e">msg</span>.<span style="color:#a6e22e">payloadAsUtf8</span>)
}, [<span style="color:#e6db74">&#34;/my-cool-app/1/my-use-case/proto&#34;</span>]);
</code></pre></div><h3 id="send-messages">Send messages</h3>
</code></pre></div><h3 id="send-messages">
Send messages
<a class="anchor" href="#send-messages">#</a>
</h3>
<p>Messages are wrapped in a <code>WakuMessage</code> envelop.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">WakuMessage</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#39;js-waku&#39;</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">msg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(<span style="color:#e6db74">&#34;Here is a message!&#34;</span>, <span style="color:#e6db74">&#34;/my-cool-app/1/my-use-case/proto&#34;</span>)
<span style="color:#a6e22e">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">msg</span>);
</code></pre></div><h3 id="building-an-app">Building an app</h3>
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">msg</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">WakuMessage</span>.<span style="color:#a6e22e">fromUtf8String</span>(<span style="color:#e6db74">&#34;Here is a message!&#34;</span>, <span style="color:#e6db74">&#34;/my-cool-app/1/my-use-case/proto&#34;</span>)
<span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">relay</span>.<span style="color:#a6e22e">send</span>(<span style="color:#a6e22e">msg</span>);
</code></pre></div><h3 id="building-an-app">
Building an app
<a class="anchor" href="#building-an-app">#</a>
</h3>
<p>Check out the <a href="/docs/guides/07_reactjs_relay/">ReactJS Waku Relay guide</a> to learn how you can use the code above in a React app.</p>
</article>
@ -574,8 +593,7 @@ here is how to listen to new messages received via <a href="https://rfc.vac.dev/
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

83
docs/use_cases/index.html
View File

@ -3,28 +3,29 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Use Cases Waku is a generalized communication network. It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels).
<meta name="description" content="Use Cases # Waku is a generalized communication network. It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels).
This is a non-exhaustive list of use cases that we have considered and their current status.
If we are aware of other projects using js-waku and other use cases that could be implemented, feel free to open a PR.
Legend:
Live: We are aware of projects who have implemented this use case.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Use Cases" />
<meta property="og:description" content="Use Cases Waku is a generalized communication network. It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels).
<meta property="og:description" content="Use Cases # Waku is a generalized communication network. It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels).
This is a non-exhaustive list of use cases that we have considered and their current status.
If we are aware of other projects using js-waku and other use cases that could be implemented, feel free to open a PR.
Legend:
Live: We are aware of projects who have implemented this use case." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/use_cases/" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/use_cases/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2022-01-05T00:00:00+00:00" />
<meta property="article:modified_time" content="2022-01-11T15:51:37+11:00" />
<title>Use Cases | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -462,7 +463,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -506,7 +507,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="use-cases">Use Cases</h1>
<article class="markdown"><h1 id="use-cases">
Use Cases
<a class="anchor" href="#use-cases">#</a>
</h1>
<p>Waku is a generalized communication network.
It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels).</p>
<p>This is a non-exhaustive list of use cases that we have considered and their current status.</p>
@ -524,7 +528,10 @@ feel free to open a <a href="https://github.com/vacp2p/docs.wakuconnect.dev">PR<
<div class="book-columns flex flex-wrap">
<div class="flex-even markdown-inner">
<h2 id="chat-messenger">Chat Messenger</h2>
<h2 id="chat-messenger">
Chat Messenger
<a class="anchor" href="#chat-messenger">#</a>
</h2>
<table>
<thead>
<tr>
@ -536,10 +543,14 @@ feel free to open a <a href="https://github.com/vacp2p/docs.wakuconnect.dev">PR<
<ul>
<li>WakuConnect Chat SDK: <a href="https://github.com/status-im/dappconnect-chat-sdk">repo</a></li>
</ul>
</div>
<div class="flex-even markdown-inner">
<h2 id="polls">Polls</h2>
<h2 id="polls">
Polls
<a class="anchor" href="#polls">#</a>
</h2>
<table>
<thead>
<tr>
@ -553,10 +564,14 @@ feel free to open a <a href="https://github.com/vacp2p/docs.wakuconnect.dev">PR<
<a href="/docs/guides/vote_poll_sdk/#wakuconnect-poll-sdk">docs</a>,
<a href="https://github.com/status-im/wakuconnect-vote-poll-sdk">repo</a></li>
</ul>
</div>
<div class="flex-even markdown-inner">
<h2 id="nft-marketplace">NFT Marketplace</h2>
<h2 id="nft-marketplace">
NFT Marketplace
<a class="anchor" href="#nft-marketplace">#</a>
</h2>
<table>
<thead>
<tr>
@ -569,6 +584,7 @@ Add a social media layer, allowing NFT owners to like, comments, etc.</p>
<ul>
<li><a href="https://smolpuddle.io/">https://smolpuddle.io/</a> <a href="https://github.com/Agusx1211/smolpuddle-web">repo</a></li>
</ul>
</div>
</div>
@ -577,7 +593,10 @@ Add a social media layer, allowing NFT owners to like, comments, etc.</p>
<div class="book-columns flex flex-wrap">
<div class="flex-even markdown-inner">
<h2 id="state-channels">State Channels</h2>
<h2 id="state-channels">
State Channels
<a class="anchor" href="#state-channels">#</a>
</h2>
<table>
<thead>
<tr>
@ -589,10 +608,14 @@ Add a social media layer, allowing NFT owners to like, comments, etc.</p>
<ul>
<li>Discussion: <a href="https://statechannels.discourse.group/t/using-waku-as-communication-layer/172/3">statechannels.org Discourse</a></li>
</ul>
</div>
<div class="flex-even markdown-inner">
<h2 id="voting-and-proposals">Voting and Proposals</h2>
<h2 id="voting-and-proposals">
Voting and Proposals
<a class="anchor" href="#voting-and-proposals">#</a>
</h2>
<table>
<thead>
<tr>
@ -613,7 +636,10 @@ Votes can then be aggregated and submitted to the blockchain to commit the resul
</div>
<div class="flex-even markdown-inner">
<h2 id="signature-exchange-for-multi-sig-wallets">Signature Exchange for Multi-Sig Wallets</h2>
<h2 id="signature-exchange-for-multi-sig-wallets">
Signature Exchange for Multi-Sig Wallets
<a class="anchor" href="#signature-exchange-for-multi-sig-wallets">#</a>
</h2>
<table>
<thead>
<tr>
@ -631,7 +657,10 @@ private &amp; censorship-resistant manner to approve transactions.
<div class="book-columns flex flex-wrap">
<div class="flex-even markdown-inner">
<h2 id="gameplay-communication">Gameplay Communication</h2>
<h2 id="gameplay-communication">
Gameplay Communication
<a class="anchor" href="#gameplay-communication">#</a>
</h2>
<table>
<thead>
<tr>
@ -644,10 +673,14 @@ Remove the need of a centralized infrastructure for gameplay communications.</p>
<ul>
<li><a href="https://github.com/fjij/ethonline-2021">Super Card Game</a></li>
</ul>
</div>
<div class="flex-even markdown-inner">
<h2 id="dapp-to-wallet-communication">dApp to Wallet Communication</h2>
<h2 id="dapp-to-wallet-communication">
dApp to Wallet Communication
<a class="anchor" href="#dapp-to-wallet-communication">#</a>
</h2>
<table>
<thead>
<tr>
@ -662,10 +695,14 @@ or for a dApp to request transaction signature to the wallet.</p>
<li><a href="https://walletconnect.com/">WalletConnect 2.0</a></li>
<li><a href="https://www.hashpack.app/hashconnect">HashPack</a></li>
</ul>
</div>
<div class="flex-even markdown-inner">
<h2 id="layer-2-communication">Layer 2 Communication</h2>
<h2 id="layer-2-communication">
Layer 2 Communication
<a class="anchor" href="#layer-2-communication">#</a>
</h2>
<table>
<thead>
<tr>
@ -683,7 +720,10 @@ Possibly increasing privacy, anonymity and resilience.
<div class="book-columns flex flex-wrap">
<div class="flex-even markdown-inner">
<h2 id="generalized-marketplace">Generalized Marketplace</h2>
<h2 id="generalized-marketplace">
Generalized Marketplace
<a class="anchor" href="#generalized-marketplace">#</a>
</h2>
<table>
<thead>
<tr>
@ -698,10 +738,14 @@ to create a ride-sharing or tradings apps.</p>
<a href="https://hackernoon.com/decentralized-uber-heres-how-i-built-it-with-statusim-waku-and-vuejs">article</a>,
<a href="https://github.com/TheBojda/waku-uber">repo</a></li>
</ul>
</div>
<div class="flex-even markdown-inner">
<h2 id="social-media-platform">Social Media Platform</h2>
<h2 id="social-media-platform">
Social Media Platform
<a class="anchor" href="#social-media-platform">#</a>
</h2>
<table>
<thead>
<tr>
@ -745,8 +789,7 @@ Other form of social media: news feed, blogposts, audio or video sharing, can al
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

21
docs/waku_protocols/index.html
View File

@ -3,22 +3,23 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Waku Protocol Support You can track progress on the project board.
<meta name="description" content="Waku Protocol Support # You can track progress on the project board.
✔: Supported 🚧: Implementation in progress ⛔: Support is not planned Spec Implementation Status 6/WAKU1 ⛔ 7/WAKU-DATA ⛔ 8/WAKU-MAIL ⛔ 9/WAKU-RPC ⛔ 10/WAKU2 🚧 11/WAKU2-RELAY ✔ 12/WAKU2-FILTER 13/WAKU2-STORE ✔ (querying node only) 14/WAKU2-MESSAGE ✔ 15/WAKU2-BRIDGE 16/WAKU2-RPC ⛔ 17/WAKU2-RLNRELAY 18/WAKU2-SWAP 19/WAKU2-LIGHTPUSH ✔ 20/TOY-ETH-PM ✔ (as example) 21/WAKU2-FTSTORE ✔ 22/TOY-CHAT ✔ (as example) 25/LIBP2P-DNS-DISCOVERY 🚧 26/WAKU2-PAYLOAD ✔ ">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Implemented Waku Protocols" />
<meta property="og:description" content="Waku Protocol Support You can track progress on the project board.
<meta property="og:description" content="Waku Protocol Support # You can track progress on the project board.
✔: Supported 🚧: Implementation in progress ⛔: Support is not planned Spec Implementation Status 6/WAKU1 ⛔ 7/WAKU-DATA ⛔ 8/WAKU-MAIL ⛔ 9/WAKU-RPC ⛔ 10/WAKU2 🚧 11/WAKU2-RELAY ✔ 12/WAKU2-FILTER 13/WAKU2-STORE ✔ (querying node only) 14/WAKU2-MESSAGE ✔ 15/WAKU2-BRIDGE 16/WAKU2-RPC ⛔ 17/WAKU2-RLNRELAY 18/WAKU2-SWAP 19/WAKU2-LIGHTPUSH ✔ 20/TOY-ETH-PM ✔ (as example) 21/WAKU2-FTSTORE ✔ 22/TOY-CHAT ✔ (as example) 25/LIBP2P-DNS-DISCOVERY 🚧 26/WAKU2-PAYLOAD ✔ " />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/waku_protocols/" />
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/waku_protocols/" /><meta property="article:section" content="docs" />
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
<meta property="article:modified_time" content="2021-12-09T15:27:58+01:00" />
<title>Implemented Waku Protocols | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -456,7 +457,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -504,7 +505,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h2 id="waku-protocol-support">Waku Protocol Support</h2>
<article class="markdown"><h2 id="waku-protocol-support">
Waku Protocol Support
<a class="anchor" href="#waku-protocol-support">#</a>
</h2>
<p>You can track progress on the <a href="https://github.com/status-im/js-waku/projects/1">project board</a>.</p>
<ul>
<li>✔: Supported</li>
@ -626,8 +630,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

11
en.search.min.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js
View File

@ -1,11 +0,0 @@
'use strict';(function(){const searchDataURL='/en.search-data.min.ecb14771e3a7165f444ce75fe21aac13e496561859e625013a5996d6abe7df35.json';const indexConfig=Object.assign({cache:true},{doc:{id:'id',field:['title','content'],store:['title','href','section']}});const input=document.querySelector('#book-search-input');const results=document.querySelector('#book-search-results');if(!input){return}
input.addEventListener('focus',init);input.addEventListener('keyup',search);document.addEventListener('keypress',focusSearchFieldOnKeyPress);function focusSearchFieldOnKeyPress(event){if(event.target.value!==undefined){return;}
if(input===document.activeElement){return;}
const characterPressed=String.fromCharCode(event.charCode);if(!isHotkey(characterPressed)){return;}
input.focus();event.preventDefault();}
function isHotkey(character){const dataHotkeys=input.getAttribute('data-hotkeys')||'';return dataHotkeys.indexOf(character)>=0;}
function init(){input.removeEventListener('focus',init);input.required=true;fetch(searchDataURL).then(pages=>pages.json()).then(pages=>{window.bookSearchIndex=FlexSearch.create('balance',indexConfig);window.bookSearchIndex.add(pages);}).then(()=>input.required=false).then(search);}
function search(){while(results.firstChild){results.removeChild(results.firstChild);}
if(!input.value){return;}
const searchHits=window.bookSearchIndex.search(input.value,10);searchHits.forEach(function(page){const li=element('<li><a href></a><small></small></li>');const a=li.querySelector('a'),small=li.querySelector('small');a.href=page.href;a.textContent=page.title;small.textContent=page.section;results.appendChild(li);});}
function element(content){const div=document.createElement('div');div.innerHTML=content;return div.firstChild;}})();

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

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

104
en/sitemap.xml
View File

@ -1,23 +1,16 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/</loc>
<lastmod>2022-01-05T11:02:48+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/</loc>
<lastmod>2022-01-03T11:11:07+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/introduction/</loc>
<lastmod>2022-01-10T12:30:09+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/</loc>
<lastmod>2022-01-10T12:30:09+11:00</lastmod>
<xhtml:link
@ -35,9 +28,7 @@
hreflang="en"
href="https://docs.wakuconnect.dev/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/</loc>
<lastmod>2022-01-10T12:30:09+11:00</lastmod>
<xhtml:link
@ -55,104 +46,64 @@
hreflang="en"
href="https://docs.wakuconnect.dev/docs/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/quick_start/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/</loc>
<lastmod>2022-01-05T14:40:44+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/use_cases/</loc>
<lastmod>2022-01-11T15:51:37+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/examples/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/crypto_libraries/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/waku_protocols/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/</loc>
<lastmod>2022-01-10T12:11:15+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/</loc>
<lastmod>2022-01-10T12:11:15+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/</loc>
<lastmod>2022-01-05T11:02:48+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/</loc>
<lastmod>2022-01-05T11:02:48+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</loc>
<lastmod>2022-01-06T13:19:14+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/</loc>
<lastmod>2022-01-06T13:19:14+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/</loc>
<lastmod>2022-01-05T11:02:48+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/</loc>
<lastmod>2022-01-10T12:30:09+11:00</lastmod>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/categories/</loc>
<xhtml:link
rel="alternate"
@ -169,9 +120,7 @@
hreflang="en"
href="https://docs.wakuconnect.dev/categories/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/tags/</loc>
<xhtml:link
rel="alternate"
@ -189,5 +138,4 @@
href="https://docs.wakuconnect.dev/tags/"
/>
</url>
</urlset>
</urlset>

1
es.search-data.min.83f14431157427d4ba540838531119c8a5dcc464acee4ad12f7e98d9efac45bc.json
View File

@ -1 +0,0 @@
[{"id":0,"href":"/es/docs/introduccion/","title":"Introducción","section":"Introducción","content":"Introducción TODO\n"},{"id":1,"href":"/es/docs/","title":"Introducción","section":"Introducción","content":"Introducción TODO\n"}]

1
es.search-data.min.965a130d6431bd5817a1f1f813071118082c89036000a9d0c12b4134a5008866.json Normal file
View File

@ -0,0 +1 @@
[{"id":0,"href":"/es/docs/introduccion/","title":"Introducción","section":"Introducción","content":"Introducción # TODO\n"},{"id":1,"href":"/es/docs/","title":"Introducción","section":"Introducción","content":"Introducción # TODO\n"}]

1
es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js Normal file
View File

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

11
es.search.min.4f657224f913f85dc057565a998c2bccf3cb848d4b1548fd7cea5fae5fa0fb5b.js
View File

@ -1,11 +0,0 @@
'use strict';(function(){const searchDataURL='/es.search-data.min.83f14431157427d4ba540838531119c8a5dcc464acee4ad12f7e98d9efac45bc.json';const indexConfig=Object.assign({cache:true},{doc:{id:'id',field:['title','content'],store:['title','href','section']}});const input=document.querySelector('#book-search-input');const results=document.querySelector('#book-search-results');if(!input){return}
input.addEventListener('focus',init);input.addEventListener('keyup',search);document.addEventListener('keypress',focusSearchFieldOnKeyPress);function focusSearchFieldOnKeyPress(event){if(event.target.value!==undefined){return;}
if(input===document.activeElement){return;}
const characterPressed=String.fromCharCode(event.charCode);if(!isHotkey(characterPressed)){return;}
input.focus();event.preventDefault();}
function isHotkey(character){const dataHotkeys=input.getAttribute('data-hotkeys')||'';return dataHotkeys.indexOf(character)>=0;}
function init(){input.removeEventListener('focus',init);input.required=true;fetch(searchDataURL).then(pages=>pages.json()).then(pages=>{window.bookSearchIndex=FlexSearch.create('balance',indexConfig);window.bookSearchIndex.add(pages);}).then(()=>input.required=false).then(search);}
function search(){while(results.firstChild){results.removeChild(results.firstChild);}
if(!input.value){return;}
const searchHits=window.bookSearchIndex.search(input.value,10);searchHits.forEach(function(page){const li=element('<li><a href></a><small></small></li>');const a=li.querySelector('a'),small=li.querySelector('small');a.href=page.href;a.textContent=page.title;small.textContent=page.section;results.appendChild(li);});}
function element(content){const div=document.createElement('div');div.innerHTML=content;return div.firstChild;}})();

4
es/404.html
View File

@ -14,9 +14,9 @@
<title>404 Page not found | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/es.search.min.4f657224f913f85dc057565a998c2bccf3cb848d4b1548fd7cea5fae5fa0fb5b.js" integrity="sha256-T2VyJPkT&#43;F3AV1ZamYwrzPPLhI1LFUj9fOpfrl&#43;g&#43;1s=" crossorigin="anonymous"></script>
<script defer src="/es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js" integrity="sha256-E56BIAwT2Un1FTp6eTuzXmGLDf4I6RaIdyszMkYLGuU=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book

13
es/categories/index.html
View File

@ -15,9 +15,9 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/categories/" title="Categories">
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/categories/" title="Categories">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/es.search.min.4f657224f913f85dc057565a998c2bccf3cb848d4b1548fd7cea5fae5fa0fb5b.js" integrity="sha256-T2VyJPkT&#43;F3AV1ZamYwrzPPLhI1LFUj9fOpfrl&#43;g&#43;1s=" crossorigin="anonymous"></script>
<script defer src="/es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js" integrity="sha256-E56BIAwT2Un1FTp6eTuzXmGLDf4I6RaIdyszMkYLGuU=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/categories/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -172,7 +172,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -232,11 +232,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown">
<h1>Categories</h1>
</article>
@ -252,8 +250,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

8
es/categories/index.xml
View File

@ -5,10 +5,6 @@
<link>https://docs.wakuconnect.dev/es/categories/</link>
<description>Recent content in Categories on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/es/categories/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/es/categories/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>
</rss>

1
es/categories/page/1/index.html Normal file
View File

@ -0,0 +1 @@
<!DOCTYPE html><html><head><title>https://docs.wakuconnect.dev/es/categories/</title><link rel="canonical" href="https://docs.wakuconnect.dev/es/categories/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://docs.wakuconnect.dev/es/categories/" /></head></html>

16
es/docs/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="Introducción TODO">
<meta name="description" content="Introducción # TODO">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Introducción" />
<meta property="og:description" content="" />
@ -15,9 +15,9 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/docs/" title="Introduction">
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/docs/" title="Introdução">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/es.search.min.4f657224f913f85dc057565a998c2bccf3cb848d4b1548fd7cea5fae5fa0fb5b.js" integrity="sha256-T2VyJPkT&#43;F3AV1ZamYwrzPPLhI1LFUj9fOpfrl&#43;g&#43;1s=" crossorigin="anonymous"></script>
<script defer src="/es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js" integrity="sha256-E56BIAwT2Un1FTp6eTuzXmGLDf4I6RaIdyszMkYLGuU=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/docs/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -172,7 +172,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -216,7 +216,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="introducción">Introducción</h1>
<article class="markdown"><h1 id="introducción">
Introducción
<a class="anchor" href="#introducci%c3%b3n">#</a>
</h1>
<p>TODO</p>
</article>
@ -247,8 +250,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

10
es/docs/index.xml
View File

@ -5,19 +5,15 @@
<link>https://docs.wakuconnect.dev/es/docs/</link>
<description>Recent content in Introducción on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/es/docs/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/es/docs/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Introducción</title>
<link>https://docs.wakuconnect.dev/es/docs/introduccion/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://docs.wakuconnect.dev/es/docs/introduccion/</guid>
<description>Introducción TODO</description>
<description>Introducción # TODO</description>
</item>
</channel>
</rss>
</rss>

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

@ -3,20 +3,22 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Introducción TODO">
<meta name="description" content="Introducción # TODO">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Introducción" />
<meta property="og:description" content="Introducción TODO" />
<meta property="og:description" content="Introducción # TODO" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/es/docs/introduccion/" />
<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" />
<title>Introducción | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/docs/introduccion/" title="Introdução">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/es.search.min.4f657224f913f85dc057565a998c2bccf3cb848d4b1548fd7cea5fae5fa0fb5b.js" integrity="sha256-T2VyJPkT&#43;F3AV1ZamYwrzPPLhI1LFUj9fOpfrl&#43;g&#43;1s=" crossorigin="anonymous"></script>
<script defer src="/es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js" integrity="sha256-E56BIAwT2Un1FTp6eTuzXmGLDf4I6RaIdyszMkYLGuU=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -168,7 +170,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -212,7 +214,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="introducción">Introducción</h1>
<article class="markdown"><h1 id="introducción">
Introducción
<a class="anchor" href="#introducci%c3%b3n">#</a>
</h1>
<p>TODO</p>
</article>
@ -243,8 +248,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

18
es/index.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta name="generator" content="Hugo 0.68.3" />
<meta name="generator" content="Hugo 0.91.2" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Introducción TODO">
<meta name="description" content="Introducción # TODO">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Introducción" />
<meta property="og:description" content="" />
@ -16,9 +16,9 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/" title="Introduction">
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/" title="Introdução">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/es.search.min.4f657224f913f85dc057565a998c2bccf3cb848d4b1548fd7cea5fae5fa0fb5b.js" integrity="sha256-T2VyJPkT&#43;F3AV1ZamYwrzPPLhI1LFUj9fOpfrl&#43;g&#43;1s=" crossorigin="anonymous"></script>
<script defer src="/es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js" integrity="sha256-E56BIAwT2Un1FTp6eTuzXmGLDf4I6RaIdyszMkYLGuU=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -173,7 +173,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -217,7 +217,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="introducción">Introducción</h1>
<article class="markdown"><h1 id="introducción">
Introducción
<a class="anchor" href="#introducci%c3%b3n">#</a>
</h1>
<p>TODO</p>
</article>
@ -248,8 +251,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

10
es/index.xml
View File

@ -5,19 +5,15 @@
<link>https://docs.wakuconnect.dev/es/</link>
<description>Recent content in Introducción on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/es/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/es/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Introducción</title>
<link>https://docs.wakuconnect.dev/es/docs/introduccion/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://docs.wakuconnect.dev/es/docs/introduccion/</guid>
<description>Introducción TODO</description>
<description>Introducción # TODO</description>
</item>
</channel>
</rss>
</rss>

20
es/sitemap.xml
View File

@ -1,7 +1,6 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
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>
@ -15,9 +14,7 @@
hreflang="es"
href="https://docs.wakuconnect.dev/es/docs/introduccion/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/es/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
<xhtml:link
@ -35,9 +32,7 @@
hreflang="es"
href="https://docs.wakuconnect.dev/es/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/es/docs/</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
<xhtml:link
@ -55,9 +50,7 @@
hreflang="es"
href="https://docs.wakuconnect.dev/es/docs/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/es/categories/</loc>
<xhtml:link
rel="alternate"
@ -74,9 +67,7 @@
hreflang="es"
href="https://docs.wakuconnect.dev/es/categories/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/es/tags/</loc>
<xhtml:link
rel="alternate"
@ -94,5 +85,4 @@
href="https://docs.wakuconnect.dev/es/tags/"
/>
</url>
</urlset>
</urlset>

13
es/tags/index.html
View File

@ -15,9 +15,9 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/tags/" title="Tags">
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/tags/" title="Tags">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/es.search.min.4f657224f913f85dc057565a998c2bccf3cb848d4b1548fd7cea5fae5fa0fb5b.js" integrity="sha256-T2VyJPkT&#43;F3AV1ZamYwrzPPLhI1LFUj9fOpfrl&#43;g&#43;1s=" crossorigin="anonymous"></script>
<script defer src="/es.search.min.139e81200c13d949f5153a7a793bb35e618b0dfe08e91688772b3332460b1ae5.js" integrity="sha256-E56BIAwT2Un1FTp6eTuzXmGLDf4I6RaIdyszMkYLGuU=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/es/tags/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -172,7 +172,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -232,11 +232,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown">
<h1>Tags</h1>
</article>
@ -252,8 +250,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

8
es/tags/index.xml
View File

@ -5,10 +5,6 @@
<link>https://docs.wakuconnect.dev/es/tags/</link>
<description>Recent content in Tags on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/es/tags/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/es/tags/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>
</rss>

1
es/tags/page/1/index.html Normal file
View File

@ -0,0 +1 @@
<!DOCTYPE html><html><head><title>https://docs.wakuconnect.dev/es/tags/</title><link rel="canonical" href="https://docs.wakuconnect.dev/es/tags/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://docs.wakuconnect.dev/es/tags/" /></head></html>

25
index.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="generator" content="Hugo 0.68.3" />
<meta name="generator" content="Hugo 0.91.2" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="WakuConnect Docs WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
<meta name="description" content="WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at waku.">
<meta name="theme-color" content="#FFFFFF">
@ -12,15 +12,15 @@ Waku can be used for chat purposes and for many machine-to-machine use cases. Yo
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://docs.wakuconnect.dev/" />
<meta property="og:updated_time" content="2021-12-09T14:00:00+01:00" />
<title>Introduction | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/" title="Introducción">
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/" title="Introdução">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -463,7 +463,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -511,7 +511,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="wakuconnect-docs">WakuConnect Docs</h1>
<article class="markdown"><h1 id="wakuconnect-docs">
WakuConnect Docs
<a class="anchor" href="#wakuconnect-docs">#</a>
</h1>
<p>WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
<p>Waku is a decentralized, censorship-resistant, network and protocol family.
It enables you to add communication features to your dApp in a decentralized manner,
@ -528,7 +531,10 @@ and how it can be used with popular web frameworks.</p>
The examples are working Proof-of-Concepts that demonstrate how to use js-waku.
Check out the <a href="/docs/examples/">example list</a> to see what usage each example demonstrates.</p>
<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">Bugs, Questions &amp; Support</h2>
<h2 id="bugs-questions--support">
Bugs, Questions &amp; Support
<a class="anchor" href="#bugs-questions--support">#</a>
</h2>
<p>If you encounter any bug or would like to propose new features, feel free to <a href="https://github.com/status-im/js-waku/issues/new/">open an issue</a>.</p>
<p>To get help, join #dappconnect-support on <a href="https://discord.gg/j5pGbn7MHZ">Vac Discord</a> or <a href="https://t.me/dappconnectsupport">Telegram</a>.
For more general discussion and latest news, join #dappconnect on <a href="https://discord.gg/9DgykdmpZ6">Vac Discord</a> or <a href="https://t.me/dappconnect">Telegram</a>.</p>
@ -561,8 +567,7 @@ For more general discussion and latest news, join #dappconnect on <a href="https
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

79
index.xml
View File

@ -6,18 +6,14 @@
<description>Recent content in Introduction on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<lastBuildDate>Thu, 09 Dec 2021 14:00:00 +0100</lastBuildDate>
<atom:link href="https://docs.wakuconnect.dev/index.xml" rel="self" type="application/rss+xml" />
<lastBuildDate>Thu, 09 Dec 2021 14:00:00 +0100</lastBuildDate><atom:link href="https://docs.wakuconnect.dev/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>How to Choose a Content Topic</title>
<link>https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/</link>
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/</guid>
<description>How to Choose a Content Topic A content topic is used for content based filtering.
<description>How to Choose a Content Topic # A content topic is used for content based filtering.
It allows you to filter out the messages that your dApp processes, both when receiving live messages (Relay) or retrieving historical messages (Store).
The format for content topics is as follows:
/{dapp-name}/{version}/{content-topic-name}/{encoding}
@ -30,7 +26,7 @@ The format for content topics is as follows:
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/introduction/</guid>
<description>WakuConnect Docs WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
<description>WakuConnect Docs # WakuConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases. You can learn more about Waku at waku.</description>
</item>
@ -41,10 +37,10 @@ Waku can be used for chat purposes and for many machine-to-machine use cases. Yo
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/quick_start/</guid>
<description>Quick Start In this section you will learn how to receive and send messages using Waku Relay.
<description>Quick Start # In this section you will learn how to receive and send messages using Waku Relay.
A more in depth guide for Waku Relay can be found here.
Install Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node import { Waku } from &amp;#39;js-waku&amp;#39;; const waku = await Waku.create({ bootstrap: true }); Listen for messages The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
Install # Install the js-waku package:
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import { Waku } from &amp;#39;js-waku&amp;#39;; const waku = await Waku.create({ bootstrap: true }); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
</item>
<item>
@ -53,10 +49,9 @@ npm install js-waku # or with yarn yarn add js-waku Start a waku node import { W
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/</guid>
<description>Receive and Send Messages Using Waku Relay Waku Relay is a gossip protocol that enables you to send and receive messages. You can find Waku Relay&amp;rsquo;s specifications on Vac RFC.
<description>Receive and Send Messages Using Waku Relay # Waku Relay is a gossip protocol that enables you to send and receive messages. You can find Waku Relay&amp;rsquo;s specifications on Vac RFC.
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-guide/1/chat/proto.
Installation You can install js-waku using your favorite package manager:</description>
For this guide, we are using a single content topic: /relay-guide/1/chat/proto.</description>
</item>
<item>
@ -65,7 +60,7 @@ Installation You can install js-waku using your favorite package manager:</descr
<pubDate>Wed, 05 Jan 2022 00:00:00 +0000</pubDate>
<guid>https://docs.wakuconnect.dev/docs/use_cases/</guid>
<description>Use Cases Waku is a generalized communication network. It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels).
<description>Use Cases # Waku is a generalized communication network. It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels).
This is a non-exhaustive list of use cases that we have considered and their current status.
If we are aware of other projects using js-waku and other use cases that could be implemented, feel free to open a PR.
Legend:
@ -78,9 +73,8 @@ Legend:
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/</guid>
<description>Retrieve Messages Using Waku Store DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received. If you cannot be reached by your peers, then messages are not relayed; relay peers do not save messages for later.
However, Waku Store peers do save messages they relay, allowing you to retrieve them at a later time.</description>
<description>Retrieve Messages Using Waku Store # DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received. If you cannot be reached by your peers, then messages are not relayed; relay peers do not save messages for later.</description>
</item>
<item>
@ -89,7 +83,7 @@ However, Waku Store peers do save messages they relay, allowing you to retrieve
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/</guid>
<description>Encrypt Messages Using Waku Message Version 1 The Waku Message format provides an easy way to encrypt messages using symmetric or asymmetric encryption. The encryption comes with several handy design requirements: confidentiality, authenticity and integrity. It also allows the sender to sign messages, see Sign Messages Using Waku Message Version 1 to learn how.
<description>Encrypt Messages Using Waku Message Version 1 # The Waku Message format provides an easy way to encrypt messages using symmetric or asymmetric encryption. The encryption comes with several handy design requirements: confidentiality, authenticity and integrity. It also allows the sender to sign messages, see Sign Messages Using Waku Message Version 1 to learn how.
You can find more details about Waku Message Payload Encryption in 26/WAKU-PAYLOAD.
See Cryptographic Libraries for more details on the cryptographic libraries used by js-waku.</description>
</item>
@ -100,14 +94,12 @@ See Cryptographic Libraries for more details on the cryptographic libraries used
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<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.
<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.
Demonstrates:
Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App Repo: store-reactjs-chat.
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.
Demonstrates:
How to stop retrieving results from Waku Store on condition Use minified bundle from Unpkg.</description>
Waku Store React/JavaScript Protobuf using protons Vanilla Javascript Using Minified Library # Repo: unpkg-js-store.</description>
</item>
<item>
@ -116,9 +108,9 @@ Demonstrates:
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/crypto_libraries/</guid>
<description>Cryptographic Libraries A note on the cryptographic libraries used as it is a not a straightforward affair.
Asymmetric encryption Uses ecies-geth which in turns uses SubtleCrypto Web API (browser), secp256k1 (native binding for node) or elliptic (pure JS if none of the other libraries are available).
Symmetric encryption Uses SubtleCrypto Web API (browser) or NodeJS&amp;rsquo; crypto module.</description>
<description>Cryptographic Libraries # A note on the cryptographic libraries used as it is a not a straightforward affair.
Asymmetric encryption # Uses ecies-geth which in turns uses SubtleCrypto Web API (browser), secp256k1 (native binding for node) or elliptic (pure JS if none of the other libraries are available).
Symmetric encryption # Uses SubtleCrypto Web API (browser) or NodeJS&#39; crypto module.</description>
</item>
<item>
@ -127,11 +119,11 @@ Symmetric encryption Uses SubtleCrypto Web API (browser) or NodeJS&amp;rsquo; cr
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/</guid>
<description>Sign Messages Using Waku Message Version 1 The Waku Message format provides an easy way to sign messages using elliptic curve cryptography.
<description>Sign Messages Using Waku Message Version 1 # The Waku Message format provides an easy way to sign messages using elliptic curve cryptography.
It also allows the sender to encrypt messages, see Encrypt Messages Using Waku Message Version 1 to learn how.
You can find more details about Waku Message Payload Signature in 26/WAKU-PAYLOAD.
See Cryptographic Libraries for more details on the cryptographic libraries used by js-waku.
Create new keypair Generate a new keypair to sign your messages:</description>
Create new keypair # Generate a new keypair to sign your messages:</description>
</item>
<item>
@ -140,7 +132,7 @@ Create new keypair Generate a new keypair to sign your messages:</description>
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/waku_protocols/</guid>
<description>Waku Protocol Support You can track progress on the project board.
<description>Waku Protocol Support # You can track progress on the project board.
✔: Supported 🚧: Implementation in progress ⛔: Support is not planned Spec Implementation Status 6/WAKU1 ⛔ 7/WAKU-DATA ⛔ 8/WAKU-MAIL ⛔ 9/WAKU-RPC ⛔ 10/WAKU2 🚧 11/WAKU2-RELAY ✔ 12/WAKU2-FILTER 13/WAKU2-STORE ✔ (querying node only) 14/WAKU2-MESSAGE ✔ 15/WAKU2-BRIDGE 16/WAKU2-RPC ⛔ 17/WAKU2-RLNRELAY 18/WAKU2-SWAP 19/WAKU2-LIGHTPUSH ✔ 20/TOY-ETH-PM ✔ (as example) 21/WAKU2-FTSTORE ✔ 22/TOY-CHAT ✔ (as example) 25/LIBP2P-DNS-DISCOVERY 🚧 26/WAKU2-PAYLOAD ✔ </description>
</item>
@ -150,7 +142,7 @@ Create new keypair Generate a new keypair to sign your messages:</description>
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/</guid>
<description>Send Messages Using Waku Light Push Waku Light Push enables a client to receive a confirmation when sending a message.
<description>Send Messages Using Waku Light Push # Waku Light Push enables a client to receive a confirmation when sending a message.
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>
@ -160,7 +152,7 @@ The Waku Relay protocol sends messages to connected peers but does not provide a
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/</guid>
<description>Receive and Send Messages Using Waku Relay With ReactJS It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
<description>Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /min-react-js-chat/1/chat/proto.</description>
</item>
@ -170,7 +162,7 @@ Before starting, you need to choose a Content Topic for your dApp. Check out the
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/</guid>
<description>Retrieve Messages Using Waku Store With ReactJS It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
<description>Retrieve Messages Using Waku Store With ReactJS # It is easy to use WakuConnect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received.</description>
</item>
@ -181,10 +173,9 @@ Waku Relay is a gossip protocol. As a user, it means that your peers forward you
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/</guid>
<description>Create the DApp and Install Dependencies Create React App Create the new React app using the typescript template. Install the Waku Poll SDK packages.
<description>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.
WakuConnect Vote &amp;amp; Poll SDK will be upgraded to the latest version of @usedapp/core and ethers once ethereum-waffle is released with the latest version of ethers.</description>
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.</description>
</item>
<item>
@ -193,8 +184,8 @@ WakuConnect Vote &amp;amp; Poll SDK will be upgraded to the latest version of @u
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/</guid>
<description>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&amp;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&amp;rsquo;s wallet:</description>
<description>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&amp;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&amp;rsquo;s wallet:</description>
</item>
<item>
@ -203,9 +194,9 @@ rm -f App.tsx App.css App.test.tsx Top bar Use TopBar component to display walle
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</guid>
<description>Create-A-Poll Button Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&amp;rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components Again, create a Wrapper for styling:
import styled from &amp;#39;styled-components&amp;#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button Create a button that will display the PollCreation component on click.</description>
<description>Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&amp;rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
import styled from &amp;#39;styled-components&amp;#39; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } ` Button # Create a button that will display the PollCreation component on click.</description>
</item>
<item>
@ -214,7 +205,7 @@ import styled from &amp;#39;styled-components&amp;#39; const Wrapper = styled.di
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/</guid>
<description>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.
<description>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.</description>
</item>
@ -225,11 +216,11 @@ useWakuPolling takes:
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/</guid>
<description>Poll List Component To display existing polls, the PollList component is provided.
<description>Poll List Component # To display existing polls, the PollList component is provided.
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
components/Poll.tsx:
import {useState} from &amp;#39;react&amp;#39; import {useConfig} from &amp;#39;@usedapp/core&amp;#39; import {PollCreation, PollList} from &amp;#39;@waku/poll-sdk-react-components&amp;#39; import {JsonRpcSigner, Web3Provider} from &amp;#39;@ethersproject/providers&amp;#39; import {useWakuPolling} from &amp;#39;@waku/poll-sdk-react-hooks&amp;#39; import {CreateButton} from &amp;#39;@waku/vote-poll-sdk-react-components&amp;#39; import {Theme} from &amp;#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&amp;#39; import {ChainId} from &amp;#34;@usedapp/core/src/constants&amp;#34;; type PollProps = { appName: string library: Web3Provider | undefined signer: JsonRpcSigner | undefined chainId: ChainId | undefined account: string | null | undefined theme: Theme tokenAddress: string } export function Poll({appName, library, signer, chainId, account, theme, tokenAddress}: PollProps) { const config = useConfig() const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?</description>
</item>
</channel>
</rss>
</rss>

1
pt.search-data.min.1c5bc2dd4387c28ca1ecd5d7f1b4ca91defba147e1b3371078e1be4598630fed.json
View File

@ -1 +0,0 @@
[{"id":0,"href":"/pt/docs/introduccion/","title":"Introdução","section":"Introdução","content":"Introdução TODO\n"},{"id":1,"href":"/pt/docs/","title":"Introdução","section":"Introdução","content":"Introdução TODO\n"}]

1
pt.search-data.min.4eb3dead77484bc8ec55c3952e76eb4961e6b483d42cecde7f81be4029e67424.json Normal file
View File

@ -0,0 +1 @@
[{"id":0,"href":"/pt/docs/introduccion/","title":"Introdução","section":"Introdução","content":"Introdução # TODO\n"},{"id":1,"href":"/pt/docs/","title":"Introdução","section":"Introdução","content":"Introdução # TODO\n"}]

1
pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js Normal file
View File

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

11
pt.search.min.e909128f60919395769de8ee2a9a8f42075db318dbfb68499382ee4a911879cf.js
View File

@ -1,11 +0,0 @@
'use strict';(function(){const searchDataURL='/pt.search-data.min.1c5bc2dd4387c28ca1ecd5d7f1b4ca91defba147e1b3371078e1be4598630fed.json';const indexConfig=Object.assign({cache:true},{doc:{id:'id',field:['title','content'],store:['title','href','section']}});const input=document.querySelector('#book-search-input');const results=document.querySelector('#book-search-results');if(!input){return}
input.addEventListener('focus',init);input.addEventListener('keyup',search);document.addEventListener('keypress',focusSearchFieldOnKeyPress);function focusSearchFieldOnKeyPress(event){if(event.target.value!==undefined){return;}
if(input===document.activeElement){return;}
const characterPressed=String.fromCharCode(event.charCode);if(!isHotkey(characterPressed)){return;}
input.focus();event.preventDefault();}
function isHotkey(character){const dataHotkeys=input.getAttribute('data-hotkeys')||'';return dataHotkeys.indexOf(character)>=0;}
function init(){input.removeEventListener('focus',init);input.required=true;fetch(searchDataURL).then(pages=>pages.json()).then(pages=>{window.bookSearchIndex=FlexSearch.create('balance',indexConfig);window.bookSearchIndex.add(pages);}).then(()=>input.required=false).then(search);}
function search(){while(results.firstChild){results.removeChild(results.firstChild);}
if(!input.value){return;}
const searchHits=window.bookSearchIndex.search(input.value,10);searchHits.forEach(function(page){const li=element('<li><a href></a><small></small></li>');const a=li.querySelector('a'),small=li.querySelector('small');a.href=page.href;a.textContent=page.title;small.textContent=page.section;results.appendChild(li);});}
function element(content){const div=document.createElement('div');div.innerHTML=content;return div.firstChild;}})();

4
pt/404.html
View File

@ -14,9 +14,9 @@
<title>404 Page not found | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/pt.search.min.e909128f60919395769de8ee2a9a8f42075db318dbfb68499382ee4a911879cf.js" integrity="sha256-6QkSj2CRk5V2nejuKpqPQgddsxjb&#43;2hJk4LuSpEYec8=" crossorigin="anonymous"></script>
<script defer src="/pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js" integrity="sha256-VDqRuJVySHBpYqkR8C5hlBZuIVD0dD5ug8gWQBmaqsk=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book

13
pt/categories/index.html
View File

@ -15,9 +15,9 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/categories/" title="Categories">
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/categories/" title="Categories">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/pt.search.min.e909128f60919395769de8ee2a9a8f42075db318dbfb68499382ee4a911879cf.js" integrity="sha256-6QkSj2CRk5V2nejuKpqPQgddsxjb&#43;2hJk4LuSpEYec8=" crossorigin="anonymous"></script>
<script defer src="/pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js" integrity="sha256-VDqRuJVySHBpYqkR8C5hlBZuIVD0dD5ug8gWQBmaqsk=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/categories/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -172,7 +172,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -232,11 +232,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown">
<h1>Categories</h1>
</article>
@ -252,8 +250,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

8
pt/categories/index.xml
View File

@ -5,10 +5,6 @@
<link>https://docs.wakuconnect.dev/pt/categories/</link>
<description>Recent content in Categories on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/pt/categories/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/pt/categories/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>
</rss>

1
pt/categories/page/1/index.html Normal file
View File

@ -0,0 +1 @@
<!DOCTYPE html><html><head><title>https://docs.wakuconnect.dev/pt/categories/</title><link rel="canonical" href="https://docs.wakuconnect.dev/pt/categories/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://docs.wakuconnect.dev/pt/categories/" /></head></html>

16
pt/docs/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="Introdução TODO">
<meta name="description" content="Introdução # TODO">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Introdução" />
<meta property="og:description" content="" />
@ -15,9 +15,9 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/docs/" title="Introduction">
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/docs/" title="Introducción">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/pt.search.min.e909128f60919395769de8ee2a9a8f42075db318dbfb68499382ee4a911879cf.js" integrity="sha256-6QkSj2CRk5V2nejuKpqPQgddsxjb&#43;2hJk4LuSpEYec8=" crossorigin="anonymous"></script>
<script defer src="/pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js" integrity="sha256-VDqRuJVySHBpYqkR8C5hlBZuIVD0dD5ug8gWQBmaqsk=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/docs/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -172,7 +172,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -216,7 +216,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="introdução">Introdução</h1>
<article class="markdown"><h1 id="introdução">
Introdução
<a class="anchor" href="#introdu%c3%a7%c3%a3o">#</a>
</h1>
<p>TODO</p>
</article>
@ -247,8 +250,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

10
pt/docs/index.xml
View File

@ -5,19 +5,15 @@
<link>https://docs.wakuconnect.dev/pt/docs/</link>
<description>Recent content in Introdução on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/pt/docs/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/pt/docs/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Introdução</title>
<link>https://docs.wakuconnect.dev/pt/docs/introduccion/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://docs.wakuconnect.dev/pt/docs/introduccion/</guid>
<description>Introdução TODO</description>
<description>Introdução # TODO</description>
</item>
</channel>
</rss>
</rss>

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

@ -3,20 +3,22 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Introdução TODO">
<meta name="description" content="Introdução # TODO">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Introdução" />
<meta property="og:description" content="Introdução TODO" />
<meta property="og:description" content="Introdução # TODO" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://docs.wakuconnect.dev/pt/docs/introduccion/" />
<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" />
<title>Introdução | WakuConnect Docs</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/docs/introduccion/" title="Introducción">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/pt.search.min.e909128f60919395769de8ee2a9a8f42075db318dbfb68499382ee4a911879cf.js" integrity="sha256-6QkSj2CRk5V2nejuKpqPQgddsxjb&#43;2hJk4LuSpEYec8=" crossorigin="anonymous"></script>
<script defer src="/pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js" integrity="sha256-VDqRuJVySHBpYqkR8C5hlBZuIVD0dD5ug8gWQBmaqsk=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
@ -168,7 +170,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -212,7 +214,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="introdução">Introdução</h1>
<article class="markdown"><h1 id="introdução">
Introdução
<a class="anchor" href="#introdu%c3%a7%c3%a3o">#</a>
</h1>
<p>TODO</p>
</article>
@ -243,8 +248,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

18
pt/index.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="pt" dir="ltr">
<head>
<meta name="generator" content="Hugo 0.68.3" />
<meta name="generator" content="Hugo 0.91.2" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Introdução TODO">
<meta name="description" content="Introdução # TODO">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Introdução" />
<meta property="og:description" content="" />
@ -16,9 +16,9 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/" title="Introduction">
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/" title="Introducción">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/pt.search.min.e909128f60919395769de8ee2a9a8f42075db318dbfb68499382ee4a911879cf.js" integrity="sha256-6QkSj2CRk5V2nejuKpqPQgddsxjb&#43;2hJk4LuSpEYec8=" crossorigin="anonymous"></script>
<script defer src="/pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js" integrity="sha256-VDqRuJVySHBpYqkR8C5hlBZuIVD0dD5ug8gWQBmaqsk=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -173,7 +173,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -217,7 +217,10 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown"><h1 id="introdução">Introdução</h1>
<article class="markdown"><h1 id="introdução">
Introdução
<a class="anchor" href="#introdu%c3%a7%c3%a3o">#</a>
</h1>
<p>TODO</p>
</article>
@ -248,8 +251,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

10
pt/index.xml
View File

@ -5,19 +5,15 @@
<link>https://docs.wakuconnect.dev/pt/</link>
<description>Recent content in Introdução on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/pt/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/pt/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Introdução</title>
<link>https://docs.wakuconnect.dev/pt/docs/introduccion/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://docs.wakuconnect.dev/pt/docs/introduccion/</guid>
<description>Introdução TODO</description>
<description>Introdução # TODO</description>
</item>
</channel>
</rss>
</rss>

20
pt/sitemap.xml
View File

@ -1,7 +1,6 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
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>
@ -15,9 +14,7 @@
hreflang="pt"
href="https://docs.wakuconnect.dev/pt/docs/introduccion/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/pt/</loc>
<lastmod>2021-12-13T11:31:30+11:00</lastmod>
<xhtml:link
@ -35,9 +32,7 @@
hreflang="pt"
href="https://docs.wakuconnect.dev/pt/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/pt/docs/</loc>
<lastmod>2021-12-13T11:31:30+11:00</lastmod>
<xhtml:link
@ -55,9 +50,7 @@
hreflang="pt"
href="https://docs.wakuconnect.dev/pt/docs/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/pt/categories/</loc>
<xhtml:link
rel="alternate"
@ -74,9 +67,7 @@
hreflang="pt"
href="https://docs.wakuconnect.dev/pt/categories/"
/>
</url>
<url>
</url><url>
<loc>https://docs.wakuconnect.dev/pt/tags/</loc>
<xhtml:link
rel="alternate"
@ -94,5 +85,4 @@
href="https://docs.wakuconnect.dev/pt/tags/"
/>
</url>
</urlset>
</urlset>

13
pt/tags/index.html
View File

@ -15,9 +15,9 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="en" href="https://docs.wakuconnect.dev/tags/" title="Tags">
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/tags/" title="Tags">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/pt.search.min.e909128f60919395769de8ee2a9a8f42075db318dbfb68499382ee4a911879cf.js" integrity="sha256-6QkSj2CRk5V2nejuKpqPQgddsxjb&#43;2hJk4LuSpEYec8=" crossorigin="anonymous"></script>
<script defer src="/pt.search.min.543a91b8957248706962a911f02e6194166e2150f4743e6e83c81640199aaac9.js" integrity="sha256-VDqRuJVySHBpYqkR8C5hlBZuIVD0dD5ug8gWQBmaqsk=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/pt/tags/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -172,7 +172,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -232,11 +232,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown">
<h1>Tags</h1>
</article>
@ -252,8 +250,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

8
pt/tags/index.xml
View File

@ -5,10 +5,6 @@
<link>https://docs.wakuconnect.dev/pt/tags/</link>
<description>Recent content in Tags on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/pt/tags/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/pt/tags/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>
</rss>

1
pt/tags/page/1/index.html Normal file
View File

@ -0,0 +1 @@
<!DOCTYPE html><html><head><title>https://docs.wakuconnect.dev/pt/tags/</title><link rel="canonical" href="https://docs.wakuconnect.dev/pt/tags/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://docs.wakuconnect.dev/pt/tags/" /></head></html>

44
sitemap.xml
View File

@ -1,25 +1,25 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://docs.wakuconnect.dev/en/sitemap.xml</loc>
<lastmod>2022-01-11T15:51:37+11:00</lastmod>
</sitemap>
<sitemap>
<loc>https://docs.wakuconnect.dev/es/sitemap.xml</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</sitemap>
<sitemap>
<loc>https://docs.wakuconnect.dev/pt/sitemap.xml</loc>
<lastmod>2021-12-13T11:31:30+11:00</lastmod>
</sitemap>
<sitemap>
<loc>https://docs.wakuconnect.dev/en/sitemap.xml</loc>
<lastmod>2022-01-11T15:51:37+11:00</lastmod>
</sitemap>
<sitemap>
<loc>https://docs.wakuconnect.dev/es/sitemap.xml</loc>
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
</sitemap>
<sitemap>
<loc>https://docs.wakuconnect.dev/pt/sitemap.xml</loc>
<lastmod>2021-12-13T11:31:30+11:00</lastmod>
</sitemap>
</sitemapindex>

13
tags/index.html
View File

@ -15,9 +15,9 @@
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="alternate" hreflang="es" href="https://docs.wakuconnect.dev/es/tags/" title="Tags">
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/tags/" title="Tags">
<link rel="stylesheet" href="/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity="sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin="anonymous">
<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.0f9a1d1098d7a41dda6bb0548c09aa09f4c18ff31012b2b16a1097ec8c0d1286.js" integrity="sha256-D5odEJjXpB3aa7BUjAmqCfTBj/MQErKxahCX7IwNEoY=" crossorigin="anonymous"></script>
<script defer src="/en.search.min.1d6f87ac66d2c4a52eb21b5829c8ab4c4b5fafb08e17caa4f63cd478ba1b5ea6.js" integrity="sha256-HW&#43;HrGbSxKUushtYKcirTEtfr7COF8qk9jzUeLobXqY=" crossorigin="anonymous"></script>
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/tags/index.xml" title="WakuConnect Docs" />
<!--
Made with Book Theme
@ -460,7 +460,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){var menu=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>
<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>
@ -520,11 +520,9 @@ https://github.com/alex-shpak/hugo-book
<article class="markdown">
<h1>Tags</h1>
</article>
@ -540,8 +538,7 @@ https://github.com/alex-shpak/hugo-book
<script>(function(){function select(element){const selection=window.getSelection();const range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);}
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();</script>
<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>

8
tags/index.xml
View File

@ -5,10 +5,6 @@
<link>https://docs.wakuconnect.dev/tags/</link>
<description>Recent content in Tags on WakuConnect Docs</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<atom:link href="https://docs.wakuconnect.dev/tags/index.xml" rel="self" type="application/rss+xml" />
<language>en-us</language><atom:link href="https://docs.wakuconnect.dev/tags/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>
</rss>

1
tags/page/1/index.html Normal file
View File

@ -0,0 +1 @@
<!DOCTYPE html><html><head><title>https://docs.wakuconnect.dev/tags/</title><link rel="canonical" href="https://docs.wakuconnect.dev/tags/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://docs.wakuconnect.dev/tags/" /></head></html>