Update documentation
This commit is contained in:
Jenkins
parent
a32d67fb90
commit
f2618c1be7
|
|
@ -1 +0,0 @@
|
||||||
This file makes sure that Github Pages doesn't process mdBook's output.
|
|
||||||
191
404.html
191
404.html
|
|
@ -1,191 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title></title>
|
|
||||||
<base href="/">
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="favicon.png">
|
|
||||||
<link rel="stylesheet" href="css/variables.css">
|
|
||||||
<link rel="stylesheet" href="css/general.css">
|
|
||||||
<link rel="stylesheet" href="css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="highlight.css">
|
|
||||||
<link rel="stylesheet" href="tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="document-not-found-404"><a class="header" href="#document-not-found-404">Document not found (404)</a></h1>
|
|
||||||
<p>This URL is invalid, sorry. Please use the navigation bar or search to continue.</p>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,79 +0,0 @@
|
||||||
/*
|
|
||||||
Based off of the Ayu theme
|
|
||||||
Original by Dempfi (https://github.com/dempfi/ayu)
|
|
||||||
*/
|
|
||||||
|
|
||||||
.hljs {
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
background: #191f26;
|
|
||||||
color: #e6e1cf;
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-comment,
|
|
||||||
.hljs-quote {
|
|
||||||
color: #5c6773;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-variable,
|
|
||||||
.hljs-template-variable,
|
|
||||||
.hljs-attribute,
|
|
||||||
.hljs-attr,
|
|
||||||
.hljs-regexp,
|
|
||||||
.hljs-link,
|
|
||||||
.hljs-selector-id,
|
|
||||||
.hljs-selector-class {
|
|
||||||
color: #ff7733;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-number,
|
|
||||||
.hljs-meta,
|
|
||||||
.hljs-builtin-name,
|
|
||||||
.hljs-literal,
|
|
||||||
.hljs-type,
|
|
||||||
.hljs-params {
|
|
||||||
color: #ffee99;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-string,
|
|
||||||
.hljs-bullet {
|
|
||||||
color: #b8cc52;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-title,
|
|
||||||
.hljs-built_in,
|
|
||||||
.hljs-section {
|
|
||||||
color: #ffb454;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-keyword,
|
|
||||||
.hljs-selector-tag,
|
|
||||||
.hljs-symbol {
|
|
||||||
color: #ff7733;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-name {
|
|
||||||
color: #36a3d9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-tag {
|
|
||||||
color: #00568d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-emphasis {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-addition {
|
|
||||||
color: #91b362;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-deletion {
|
|
||||||
color: #d96c75;
|
|
||||||
}
|
|
||||||
672
book.js
672
book.js
|
|
@ -1,672 +0,0 @@
|
||||||
"use strict";
|
|
||||||
|
|
||||||
// Fix back button cache problem
|
|
||||||
window.onunload = function () { };
|
|
||||||
|
|
||||||
// Global variable, shared between modules
|
|
||||||
function playground_text(playground) {
|
|
||||||
let code_block = playground.querySelector("code");
|
|
||||||
|
|
||||||
if (window.ace && code_block.classList.contains("editable")) {
|
|
||||||
let editor = window.ace.edit(code_block);
|
|
||||||
return editor.getValue();
|
|
||||||
} else {
|
|
||||||
return code_block.textContent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
(function codeSnippets() {
|
|
||||||
function fetch_with_timeout(url, options, timeout = 6000) {
|
|
||||||
return Promise.race([
|
|
||||||
fetch(url, options),
|
|
||||||
new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeout))
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
var playgrounds = Array.from(document.querySelectorAll(".playground"));
|
|
||||||
if (playgrounds.length > 0) {
|
|
||||||
fetch_with_timeout("https://play.rust-lang.org/meta/crates", {
|
|
||||||
headers: {
|
|
||||||
'Content-Type': "application/json",
|
|
||||||
},
|
|
||||||
method: 'POST',
|
|
||||||
mode: 'cors',
|
|
||||||
})
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(response => {
|
|
||||||
// get list of crates available in the rust playground
|
|
||||||
let playground_crates = response.crates.map(item => item["id"]);
|
|
||||||
playgrounds.forEach(block => handle_crate_list_update(block, playground_crates));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handle_crate_list_update(playground_block, playground_crates) {
|
|
||||||
// update the play buttons after receiving the response
|
|
||||||
update_play_button(playground_block, playground_crates);
|
|
||||||
|
|
||||||
// and install on change listener to dynamically update ACE editors
|
|
||||||
if (window.ace) {
|
|
||||||
let code_block = playground_block.querySelector("code");
|
|
||||||
if (code_block.classList.contains("editable")) {
|
|
||||||
let editor = window.ace.edit(code_block);
|
|
||||||
editor.addEventListener("change", function (e) {
|
|
||||||
update_play_button(playground_block, playground_crates);
|
|
||||||
});
|
|
||||||
// add Ctrl-Enter command to execute rust code
|
|
||||||
editor.commands.addCommand({
|
|
||||||
name: "run",
|
|
||||||
bindKey: {
|
|
||||||
win: "Ctrl-Enter",
|
|
||||||
mac: "Ctrl-Enter"
|
|
||||||
},
|
|
||||||
exec: _editor => run_rust_code(playground_block)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// updates the visibility of play button based on `no_run` class and
|
|
||||||
// used crates vs ones available on http://play.rust-lang.org
|
|
||||||
function update_play_button(pre_block, playground_crates) {
|
|
||||||
var play_button = pre_block.querySelector(".play-button");
|
|
||||||
|
|
||||||
// skip if code is `no_run`
|
|
||||||
if (pre_block.querySelector('code').classList.contains("no_run")) {
|
|
||||||
play_button.classList.add("hidden");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// get list of `extern crate`'s from snippet
|
|
||||||
var txt = playground_text(pre_block);
|
|
||||||
var re = /extern\s+crate\s+([a-zA-Z_0-9]+)\s*;/g;
|
|
||||||
var snippet_crates = [];
|
|
||||||
var item;
|
|
||||||
while (item = re.exec(txt)) {
|
|
||||||
snippet_crates.push(item[1]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// check if all used crates are available on play.rust-lang.org
|
|
||||||
var all_available = snippet_crates.every(function (elem) {
|
|
||||||
return playground_crates.indexOf(elem) > -1;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (all_available) {
|
|
||||||
play_button.classList.remove("hidden");
|
|
||||||
} else {
|
|
||||||
play_button.classList.add("hidden");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function run_rust_code(code_block) {
|
|
||||||
var result_block = code_block.querySelector(".result");
|
|
||||||
if (!result_block) {
|
|
||||||
result_block = document.createElement('code');
|
|
||||||
result_block.className = 'result hljs language-bash';
|
|
||||||
|
|
||||||
code_block.append(result_block);
|
|
||||||
}
|
|
||||||
|
|
||||||
let text = playground_text(code_block);
|
|
||||||
let classes = code_block.querySelector('code').classList;
|
|
||||||
let edition = "2015";
|
|
||||||
if(classes.contains("edition2018")) {
|
|
||||||
edition = "2018";
|
|
||||||
} else if(classes.contains("edition2021")) {
|
|
||||||
edition = "2021";
|
|
||||||
}
|
|
||||||
var params = {
|
|
||||||
version: "stable",
|
|
||||||
optimize: "0",
|
|
||||||
code: text,
|
|
||||||
edition: edition
|
|
||||||
};
|
|
||||||
|
|
||||||
if (text.indexOf("#![feature") !== -1) {
|
|
||||||
params.version = "nightly";
|
|
||||||
}
|
|
||||||
|
|
||||||
result_block.innerText = "Running...";
|
|
||||||
|
|
||||||
fetch_with_timeout("https://play.rust-lang.org/evaluate.json", {
|
|
||||||
headers: {
|
|
||||||
'Content-Type': "application/json",
|
|
||||||
},
|
|
||||||
method: 'POST',
|
|
||||||
mode: 'cors',
|
|
||||||
body: JSON.stringify(params)
|
|
||||||
})
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(response => {
|
|
||||||
if (response.result.trim() === '') {
|
|
||||||
result_block.innerText = "No output";
|
|
||||||
result_block.classList.add("result-no-output");
|
|
||||||
} else {
|
|
||||||
result_block.innerText = response.result;
|
|
||||||
result_block.classList.remove("result-no-output");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => result_block.innerText = "Playground Communication: " + error.message);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Syntax highlighting Configuration
|
|
||||||
hljs.configure({
|
|
||||||
tabReplace: ' ', // 4 spaces
|
|
||||||
languages: [], // Languages used for auto-detection
|
|
||||||
});
|
|
||||||
|
|
||||||
let code_nodes = Array
|
|
||||||
.from(document.querySelectorAll('code'))
|
|
||||||
// Don't highlight `inline code` blocks in headers.
|
|
||||||
.filter(function (node) {return !node.parentElement.classList.contains("header"); });
|
|
||||||
|
|
||||||
if (window.ace) {
|
|
||||||
// language-rust class needs to be removed for editable
|
|
||||||
// blocks or highlightjs will capture events
|
|
||||||
code_nodes
|
|
||||||
.filter(function (node) {return node.classList.contains("editable"); })
|
|
||||||
.forEach(function (block) { block.classList.remove('language-rust'); });
|
|
||||||
|
|
||||||
Array
|
|
||||||
code_nodes
|
|
||||||
.filter(function (node) {return !node.classList.contains("editable"); })
|
|
||||||
.forEach(function (block) { hljs.highlightBlock(block); });
|
|
||||||
} else {
|
|
||||||
code_nodes.forEach(function (block) { hljs.highlightBlock(block); });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adding the hljs class gives code blocks the color css
|
|
||||||
// even if highlighting doesn't apply
|
|
||||||
code_nodes.forEach(function (block) { block.classList.add('hljs'); });
|
|
||||||
|
|
||||||
Array.from(document.querySelectorAll("code.language-rust")).forEach(function (block) {
|
|
||||||
|
|
||||||
var lines = Array.from(block.querySelectorAll('.boring'));
|
|
||||||
// If no lines were hidden, return
|
|
||||||
if (!lines.length) { return; }
|
|
||||||
block.classList.add("hide-boring");
|
|
||||||
|
|
||||||
var buttons = document.createElement('div');
|
|
||||||
buttons.className = 'buttons';
|
|
||||||
buttons.innerHTML = "<button class=\"fa fa-eye\" title=\"Show hidden lines\" aria-label=\"Show hidden lines\"></button>";
|
|
||||||
|
|
||||||
// add expand button
|
|
||||||
var pre_block = block.parentNode;
|
|
||||||
pre_block.insertBefore(buttons, pre_block.firstChild);
|
|
||||||
|
|
||||||
pre_block.querySelector('.buttons').addEventListener('click', function (e) {
|
|
||||||
if (e.target.classList.contains('fa-eye')) {
|
|
||||||
e.target.classList.remove('fa-eye');
|
|
||||||
e.target.classList.add('fa-eye-slash');
|
|
||||||
e.target.title = 'Hide lines';
|
|
||||||
e.target.setAttribute('aria-label', e.target.title);
|
|
||||||
|
|
||||||
block.classList.remove('hide-boring');
|
|
||||||
} else if (e.target.classList.contains('fa-eye-slash')) {
|
|
||||||
e.target.classList.remove('fa-eye-slash');
|
|
||||||
e.target.classList.add('fa-eye');
|
|
||||||
e.target.title = 'Show hidden lines';
|
|
||||||
e.target.setAttribute('aria-label', e.target.title);
|
|
||||||
|
|
||||||
block.classList.add('hide-boring');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (window.playground_copyable) {
|
|
||||||
Array.from(document.querySelectorAll('pre code')).forEach(function (block) {
|
|
||||||
var pre_block = block.parentNode;
|
|
||||||
if (!pre_block.classList.contains('playground')) {
|
|
||||||
var buttons = pre_block.querySelector(".buttons");
|
|
||||||
if (!buttons) {
|
|
||||||
buttons = document.createElement('div');
|
|
||||||
buttons.className = 'buttons';
|
|
||||||
pre_block.insertBefore(buttons, pre_block.firstChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
var clipButton = document.createElement('button');
|
|
||||||
clipButton.className = 'fa fa-copy clip-button';
|
|
||||||
clipButton.title = 'Copy to clipboard';
|
|
||||||
clipButton.setAttribute('aria-label', clipButton.title);
|
|
||||||
clipButton.innerHTML = '<i class=\"tooltiptext\"></i>';
|
|
||||||
|
|
||||||
buttons.insertBefore(clipButton, buttons.firstChild);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Process playground code blocks
|
|
||||||
Array.from(document.querySelectorAll(".playground")).forEach(function (pre_block) {
|
|
||||||
// Add play button
|
|
||||||
var buttons = pre_block.querySelector(".buttons");
|
|
||||||
if (!buttons) {
|
|
||||||
buttons = document.createElement('div');
|
|
||||||
buttons.className = 'buttons';
|
|
||||||
pre_block.insertBefore(buttons, pre_block.firstChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
var runCodeButton = document.createElement('button');
|
|
||||||
runCodeButton.className = 'fa fa-play play-button';
|
|
||||||
runCodeButton.hidden = true;
|
|
||||||
runCodeButton.title = 'Run this code';
|
|
||||||
runCodeButton.setAttribute('aria-label', runCodeButton.title);
|
|
||||||
|
|
||||||
buttons.insertBefore(runCodeButton, buttons.firstChild);
|
|
||||||
runCodeButton.addEventListener('click', function (e) {
|
|
||||||
run_rust_code(pre_block);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (window.playground_copyable) {
|
|
||||||
var copyCodeClipboardButton = document.createElement('button');
|
|
||||||
copyCodeClipboardButton.className = 'fa fa-copy clip-button';
|
|
||||||
copyCodeClipboardButton.innerHTML = '<i class="tooltiptext"></i>';
|
|
||||||
copyCodeClipboardButton.title = 'Copy to clipboard';
|
|
||||||
copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title);
|
|
||||||
|
|
||||||
buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
let code_block = pre_block.querySelector("code");
|
|
||||||
if (window.ace && code_block.classList.contains("editable")) {
|
|
||||||
var undoChangesButton = document.createElement('button');
|
|
||||||
undoChangesButton.className = 'fa fa-history reset-button';
|
|
||||||
undoChangesButton.title = 'Undo changes';
|
|
||||||
undoChangesButton.setAttribute('aria-label', undoChangesButton.title);
|
|
||||||
|
|
||||||
buttons.insertBefore(undoChangesButton, buttons.firstChild);
|
|
||||||
|
|
||||||
undoChangesButton.addEventListener('click', function () {
|
|
||||||
let editor = window.ace.edit(code_block);
|
|
||||||
editor.setValue(editor.originalCode);
|
|
||||||
editor.clearSelection();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
|
|
||||||
(function themes() {
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var themeToggleButton = document.getElementById('theme-toggle');
|
|
||||||
var themePopup = document.getElementById('theme-list');
|
|
||||||
var themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
|
|
||||||
var stylesheets = {
|
|
||||||
ayuHighlight: document.querySelector("[href$='ayu-highlight.css']"),
|
|
||||||
tomorrowNight: document.querySelector("[href$='tomorrow-night.css']"),
|
|
||||||
highlight: document.querySelector("[href$='highlight.css']"),
|
|
||||||
};
|
|
||||||
|
|
||||||
function showThemes() {
|
|
||||||
themePopup.style.display = 'block';
|
|
||||||
themeToggleButton.setAttribute('aria-expanded', true);
|
|
||||||
themePopup.querySelector("button#" + get_theme()).focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideThemes() {
|
|
||||||
themePopup.style.display = 'none';
|
|
||||||
themeToggleButton.setAttribute('aria-expanded', false);
|
|
||||||
themeToggleButton.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
function get_theme() {
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch (e) { }
|
|
||||||
if (theme === null || theme === undefined) {
|
|
||||||
return default_theme;
|
|
||||||
} else {
|
|
||||||
return theme;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function set_theme(theme, store = true) {
|
|
||||||
let ace_theme;
|
|
||||||
|
|
||||||
if (theme == 'coal' || theme == 'navy') {
|
|
||||||
stylesheets.ayuHighlight.disabled = true;
|
|
||||||
stylesheets.tomorrowNight.disabled = false;
|
|
||||||
stylesheets.highlight.disabled = true;
|
|
||||||
|
|
||||||
ace_theme = "ace/theme/tomorrow_night";
|
|
||||||
} else if (theme == 'ayu') {
|
|
||||||
stylesheets.ayuHighlight.disabled = false;
|
|
||||||
stylesheets.tomorrowNight.disabled = true;
|
|
||||||
stylesheets.highlight.disabled = true;
|
|
||||||
ace_theme = "ace/theme/tomorrow_night";
|
|
||||||
} else {
|
|
||||||
stylesheets.ayuHighlight.disabled = true;
|
|
||||||
stylesheets.tomorrowNight.disabled = true;
|
|
||||||
stylesheets.highlight.disabled = false;
|
|
||||||
ace_theme = "ace/theme/dawn";
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(function () {
|
|
||||||
themeColorMetaTag.content = getComputedStyle(document.body).backgroundColor;
|
|
||||||
}, 1);
|
|
||||||
|
|
||||||
if (window.ace && window.editors) {
|
|
||||||
window.editors.forEach(function (editor) {
|
|
||||||
editor.setTheme(ace_theme);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var previousTheme = get_theme();
|
|
||||||
|
|
||||||
if (store) {
|
|
||||||
try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
|
|
||||||
}
|
|
||||||
|
|
||||||
html.classList.remove(previousTheme);
|
|
||||||
html.classList.add(theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set theme
|
|
||||||
var theme = get_theme();
|
|
||||||
|
|
||||||
set_theme(theme, false);
|
|
||||||
|
|
||||||
themeToggleButton.addEventListener('click', function () {
|
|
||||||
if (themePopup.style.display === 'block') {
|
|
||||||
hideThemes();
|
|
||||||
} else {
|
|
||||||
showThemes();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
themePopup.addEventListener('click', function (e) {
|
|
||||||
var theme = e.target.id || e.target.parentElement.id;
|
|
||||||
set_theme(theme);
|
|
||||||
});
|
|
||||||
|
|
||||||
themePopup.addEventListener('focusout', function(e) {
|
|
||||||
// e.relatedTarget is null in Safari and Firefox on macOS (see workaround below)
|
|
||||||
if (!!e.relatedTarget && !themeToggleButton.contains(e.relatedTarget) && !themePopup.contains(e.relatedTarget)) {
|
|
||||||
hideThemes();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Should not be needed, but it works around an issue on macOS & iOS: https://github.com/rust-lang/mdBook/issues/628
|
|
||||||
document.addEventListener('click', function(e) {
|
|
||||||
if (themePopup.style.display === 'block' && !themeToggleButton.contains(e.target) && !themePopup.contains(e.target)) {
|
|
||||||
hideThemes();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('keydown', function (e) {
|
|
||||||
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
|
|
||||||
if (!themePopup.contains(e.target)) { return; }
|
|
||||||
|
|
||||||
switch (e.key) {
|
|
||||||
case 'Escape':
|
|
||||||
e.preventDefault();
|
|
||||||
hideThemes();
|
|
||||||
break;
|
|
||||||
case 'ArrowUp':
|
|
||||||
e.preventDefault();
|
|
||||||
var li = document.activeElement.parentElement;
|
|
||||||
if (li && li.previousElementSibling) {
|
|
||||||
li.previousElementSibling.querySelector('button').focus();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'ArrowDown':
|
|
||||||
e.preventDefault();
|
|
||||||
var li = document.activeElement.parentElement;
|
|
||||||
if (li && li.nextElementSibling) {
|
|
||||||
li.nextElementSibling.querySelector('button').focus();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'Home':
|
|
||||||
e.preventDefault();
|
|
||||||
themePopup.querySelector('li:first-child button').focus();
|
|
||||||
break;
|
|
||||||
case 'End':
|
|
||||||
e.preventDefault();
|
|
||||||
themePopup.querySelector('li:last-child button').focus();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
|
|
||||||
(function sidebar() {
|
|
||||||
var html = document.querySelector("html");
|
|
||||||
var sidebar = document.getElementById("sidebar");
|
|
||||||
var sidebarLinks = document.querySelectorAll('#sidebar a');
|
|
||||||
var sidebarToggleButton = document.getElementById("sidebar-toggle");
|
|
||||||
var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
|
|
||||||
var firstContact = null;
|
|
||||||
|
|
||||||
function showSidebar() {
|
|
||||||
html.classList.remove('sidebar-hidden')
|
|
||||||
html.classList.add('sidebar-visible');
|
|
||||||
Array.from(sidebarLinks).forEach(function (link) {
|
|
||||||
link.setAttribute('tabIndex', 0);
|
|
||||||
});
|
|
||||||
sidebarToggleButton.setAttribute('aria-expanded', true);
|
|
||||||
sidebar.setAttribute('aria-hidden', false);
|
|
||||||
try { localStorage.setItem('mdbook-sidebar', 'visible'); } catch (e) { }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
var sidebarAnchorToggles = document.querySelectorAll('#sidebar a.toggle');
|
|
||||||
|
|
||||||
function toggleSection(ev) {
|
|
||||||
ev.currentTarget.parentElement.classList.toggle('expanded');
|
|
||||||
}
|
|
||||||
|
|
||||||
Array.from(sidebarAnchorToggles).forEach(function (el) {
|
|
||||||
el.addEventListener('click', toggleSection);
|
|
||||||
});
|
|
||||||
|
|
||||||
function hideSidebar() {
|
|
||||||
html.classList.remove('sidebar-visible')
|
|
||||||
html.classList.add('sidebar-hidden');
|
|
||||||
Array.from(sidebarLinks).forEach(function (link) {
|
|
||||||
link.setAttribute('tabIndex', -1);
|
|
||||||
});
|
|
||||||
sidebarToggleButton.setAttribute('aria-expanded', false);
|
|
||||||
sidebar.setAttribute('aria-hidden', true);
|
|
||||||
try { localStorage.setItem('mdbook-sidebar', 'hidden'); } catch (e) { }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle sidebar
|
|
||||||
sidebarToggleButton.addEventListener('click', function sidebarToggle() {
|
|
||||||
if (html.classList.contains("sidebar-hidden")) {
|
|
||||||
var current_width = parseInt(
|
|
||||||
document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
|
|
||||||
if (current_width < 150) {
|
|
||||||
document.documentElement.style.setProperty('--sidebar-width', '150px');
|
|
||||||
}
|
|
||||||
showSidebar();
|
|
||||||
} else if (html.classList.contains("sidebar-visible")) {
|
|
||||||
hideSidebar();
|
|
||||||
} else {
|
|
||||||
if (getComputedStyle(sidebar)['transform'] === 'none') {
|
|
||||||
hideSidebar();
|
|
||||||
} else {
|
|
||||||
showSidebar();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
sidebarResizeHandle.addEventListener('mousedown', initResize, false);
|
|
||||||
|
|
||||||
function initResize(e) {
|
|
||||||
window.addEventListener('mousemove', resize, false);
|
|
||||||
window.addEventListener('mouseup', stopResize, false);
|
|
||||||
html.classList.add('sidebar-resizing');
|
|
||||||
}
|
|
||||||
function resize(e) {
|
|
||||||
var pos = (e.clientX - sidebar.offsetLeft);
|
|
||||||
if (pos < 20) {
|
|
||||||
hideSidebar();
|
|
||||||
} else {
|
|
||||||
if (html.classList.contains("sidebar-hidden")) {
|
|
||||||
showSidebar();
|
|
||||||
}
|
|
||||||
pos = Math.min(pos, window.innerWidth - 100);
|
|
||||||
document.documentElement.style.setProperty('--sidebar-width', pos + 'px');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//on mouseup remove windows functions mousemove & mouseup
|
|
||||||
function stopResize(e) {
|
|
||||||
html.classList.remove('sidebar-resizing');
|
|
||||||
window.removeEventListener('mousemove', resize, false);
|
|
||||||
window.removeEventListener('mouseup', stopResize, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('touchstart', function (e) {
|
|
||||||
firstContact = {
|
|
||||||
x: e.touches[0].clientX,
|
|
||||||
time: Date.now()
|
|
||||||
};
|
|
||||||
}, { passive: true });
|
|
||||||
|
|
||||||
document.addEventListener('touchmove', function (e) {
|
|
||||||
if (!firstContact)
|
|
||||||
return;
|
|
||||||
|
|
||||||
var curX = e.touches[0].clientX;
|
|
||||||
var xDiff = curX - firstContact.x,
|
|
||||||
tDiff = Date.now() - firstContact.time;
|
|
||||||
|
|
||||||
if (tDiff < 250 && Math.abs(xDiff) >= 150) {
|
|
||||||
if (xDiff >= 0 && firstContact.x < Math.min(document.body.clientWidth * 0.25, 300))
|
|
||||||
showSidebar();
|
|
||||||
else if (xDiff < 0 && curX < 300)
|
|
||||||
hideSidebar();
|
|
||||||
|
|
||||||
firstContact = null;
|
|
||||||
}
|
|
||||||
}, { passive: true });
|
|
||||||
|
|
||||||
// Scroll sidebar to current active section
|
|
||||||
var activeSection = document.getElementById("sidebar").querySelector(".active");
|
|
||||||
if (activeSection) {
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
|
|
||||||
activeSection.scrollIntoView({ block: 'center' });
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
(function chapterNavigation() {
|
|
||||||
document.addEventListener('keydown', function (e) {
|
|
||||||
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
|
|
||||||
if (window.search && window.search.hasFocus()) { return; }
|
|
||||||
|
|
||||||
switch (e.key) {
|
|
||||||
case 'ArrowRight':
|
|
||||||
e.preventDefault();
|
|
||||||
var nextButton = document.querySelector('.nav-chapters.next');
|
|
||||||
if (nextButton) {
|
|
||||||
window.location.href = nextButton.href;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'ArrowLeft':
|
|
||||||
e.preventDefault();
|
|
||||||
var previousButton = document.querySelector('.nav-chapters.previous');
|
|
||||||
if (previousButton) {
|
|
||||||
window.location.href = previousButton.href;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
|
|
||||||
(function clipboard() {
|
|
||||||
var clipButtons = document.querySelectorAll('.clip-button');
|
|
||||||
|
|
||||||
function hideTooltip(elem) {
|
|
||||||
elem.firstChild.innerText = "";
|
|
||||||
elem.className = 'fa fa-copy clip-button';
|
|
||||||
}
|
|
||||||
|
|
||||||
function showTooltip(elem, msg) {
|
|
||||||
elem.firstChild.innerText = msg;
|
|
||||||
elem.className = 'fa fa-copy tooltipped';
|
|
||||||
}
|
|
||||||
|
|
||||||
var clipboardSnippets = new ClipboardJS('.clip-button', {
|
|
||||||
text: function (trigger) {
|
|
||||||
hideTooltip(trigger);
|
|
||||||
let playground = trigger.closest("pre");
|
|
||||||
return playground_text(playground);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Array.from(clipButtons).forEach(function (clipButton) {
|
|
||||||
clipButton.addEventListener('mouseout', function (e) {
|
|
||||||
hideTooltip(e.currentTarget);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
clipboardSnippets.on('success', function (e) {
|
|
||||||
e.clearSelection();
|
|
||||||
showTooltip(e.trigger, "Copied!");
|
|
||||||
});
|
|
||||||
|
|
||||||
clipboardSnippets.on('error', function (e) {
|
|
||||||
showTooltip(e.trigger, "Clipboard error!");
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
|
|
||||||
(function scrollToTop () {
|
|
||||||
var menuTitle = document.querySelector('.menu-title');
|
|
||||||
|
|
||||||
menuTitle.addEventListener('click', function () {
|
|
||||||
document.scrollingElement.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
|
|
||||||
(function controllMenu() {
|
|
||||||
var menu = document.getElementById('menu-bar');
|
|
||||||
|
|
||||||
(function controllPosition() {
|
|
||||||
var scrollTop = document.scrollingElement.scrollTop;
|
|
||||||
var prevScrollTop = scrollTop;
|
|
||||||
var minMenuY = -menu.clientHeight - 50;
|
|
||||||
// When the script loads, the page can be at any scroll (e.g. if you reforesh it).
|
|
||||||
menu.style.top = scrollTop + 'px';
|
|
||||||
// Same as parseInt(menu.style.top.slice(0, -2), but faster
|
|
||||||
var topCache = menu.style.top.slice(0, -2);
|
|
||||||
menu.classList.remove('sticky');
|
|
||||||
var stickyCache = false; // Same as menu.classList.contains('sticky'), but faster
|
|
||||||
document.addEventListener('scroll', function () {
|
|
||||||
scrollTop = Math.max(document.scrollingElement.scrollTop, 0);
|
|
||||||
// `null` means that it doesn't need to be updated
|
|
||||||
var nextSticky = null;
|
|
||||||
var nextTop = null;
|
|
||||||
var scrollDown = scrollTop > prevScrollTop;
|
|
||||||
var menuPosAbsoluteY = topCache - scrollTop;
|
|
||||||
if (scrollDown) {
|
|
||||||
nextSticky = false;
|
|
||||||
if (menuPosAbsoluteY > 0) {
|
|
||||||
nextTop = prevScrollTop;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (menuPosAbsoluteY > 0) {
|
|
||||||
nextSticky = true;
|
|
||||||
} else if (menuPosAbsoluteY < minMenuY) {
|
|
||||||
nextTop = prevScrollTop + minMenuY;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (nextSticky === true && stickyCache === false) {
|
|
||||||
menu.classList.add('sticky');
|
|
||||||
stickyCache = true;
|
|
||||||
} else if (nextSticky === false && stickyCache === true) {
|
|
||||||
menu.classList.remove('sticky');
|
|
||||||
stickyCache = false;
|
|
||||||
}
|
|
||||||
if (nextTop !== null) {
|
|
||||||
menu.style.top = nextTop + 'px';
|
|
||||||
topCache = nextTop;
|
|
||||||
}
|
|
||||||
prevScrollTop = scrollTop;
|
|
||||||
}, { passive: true });
|
|
||||||
})();
|
|
||||||
(function controllBorder() {
|
|
||||||
menu.classList.remove('bordered');
|
|
||||||
document.addEventListener('scroll', function () {
|
|
||||||
if (menu.offsetTop === 0) {
|
|
||||||
menu.classList.remove('bordered');
|
|
||||||
} else {
|
|
||||||
menu.classList.add('bordered');
|
|
||||||
}
|
|
||||||
}, { passive: true });
|
|
||||||
})();
|
|
||||||
})();
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Categories on DappConnect Docs</title>
|
||||||
|
<link>https://docs.dappconnect.dev/categories/</link>
|
||||||
|
<description>Recent content in Categories on DappConnect Docs</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language>
|
||||||
|
|
||||||
|
<atom:link href="https://docs.dappconnect.dev/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
File diff suppressed because one or more lines are too long
495
css/chrome.css
495
css/chrome.css
|
|
@ -1,495 +0,0 @@
|
||||||
/* CSS for UI elements (a.k.a. chrome) */
|
|
||||||
|
|
||||||
@import 'variables.css';
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
background: var(--bg);
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--scrollbar);
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
scrollbar-color: var(--scrollbar) var(--bg);
|
|
||||||
}
|
|
||||||
#searchresults a,
|
|
||||||
.content a:link,
|
|
||||||
a:visited,
|
|
||||||
a > .hljs {
|
|
||||||
color: var(--links);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Menu Bar */
|
|
||||||
|
|
||||||
#menu-bar,
|
|
||||||
#menu-bar-hover-placeholder {
|
|
||||||
z-index: 101;
|
|
||||||
margin: auto calc(0px - var(--page-padding));
|
|
||||||
}
|
|
||||||
#menu-bar {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
background-color: var(--bg);
|
|
||||||
border-bottom-color: var(--bg);
|
|
||||||
border-bottom-width: 1px;
|
|
||||||
border-bottom-style: solid;
|
|
||||||
}
|
|
||||||
#menu-bar.sticky,
|
|
||||||
.js #menu-bar-hover-placeholder:hover + #menu-bar,
|
|
||||||
.js #menu-bar:hover,
|
|
||||||
.js.sidebar-visible #menu-bar {
|
|
||||||
position: -webkit-sticky;
|
|
||||||
position: sticky;
|
|
||||||
top: 0 !important;
|
|
||||||
}
|
|
||||||
#menu-bar-hover-placeholder {
|
|
||||||
position: sticky;
|
|
||||||
position: -webkit-sticky;
|
|
||||||
top: 0;
|
|
||||||
height: var(--menu-bar-height);
|
|
||||||
}
|
|
||||||
#menu-bar.bordered {
|
|
||||||
border-bottom-color: var(--table-border-color);
|
|
||||||
}
|
|
||||||
#menu-bar i, #menu-bar .icon-button {
|
|
||||||
position: relative;
|
|
||||||
padding: 0 8px;
|
|
||||||
z-index: 10;
|
|
||||||
line-height: var(--menu-bar-height);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.5s;
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 420px) {
|
|
||||||
#menu-bar i, #menu-bar .icon-button {
|
|
||||||
padding: 0 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
padding: 0;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
.icon-button i {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-buttons {
|
|
||||||
margin: 0 15px;
|
|
||||||
}
|
|
||||||
.right-buttons a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-buttons {
|
|
||||||
display: flex;
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
.no-js .left-buttons {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-title {
|
|
||||||
display: inline-block;
|
|
||||||
font-weight: 200;
|
|
||||||
font-size: 2.4rem;
|
|
||||||
line-height: var(--menu-bar-height);
|
|
||||||
text-align: center;
|
|
||||||
margin: 0;
|
|
||||||
flex: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.js .menu-title {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-bar,
|
|
||||||
.menu-bar:visited,
|
|
||||||
.nav-chapters,
|
|
||||||
.nav-chapters:visited,
|
|
||||||
.mobile-nav-chapters,
|
|
||||||
.mobile-nav-chapters:visited,
|
|
||||||
.menu-bar .icon-button,
|
|
||||||
.menu-bar a i {
|
|
||||||
color: var(--icons);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-bar i:hover,
|
|
||||||
.menu-bar .icon-button:hover,
|
|
||||||
.nav-chapters:hover,
|
|
||||||
.mobile-nav-chapters i:hover {
|
|
||||||
color: var(--icons-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Nav Icons */
|
|
||||||
|
|
||||||
.nav-chapters {
|
|
||||||
font-size: 2.5em;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
margin: 0;
|
|
||||||
max-width: 150px;
|
|
||||||
min-width: 90px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
transition: color 0.5s, background-color 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-chapters:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: var(--theme-hover);
|
|
||||||
transition: background-color 0.15s, color 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-wrapper {
|
|
||||||
margin-top: 50px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-nav-chapters {
|
|
||||||
font-size: 2.5em;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
width: 90px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: var(--sidebar-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.previous {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next {
|
|
||||||
float: right;
|
|
||||||
right: var(--page-padding);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1080px) {
|
|
||||||
.nav-wide-wrapper { display: none; }
|
|
||||||
.nav-wrapper { display: block; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1380px) {
|
|
||||||
.sidebar-visible .nav-wide-wrapper { display: none; }
|
|
||||||
.sidebar-visible .nav-wrapper { display: block; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inline code */
|
|
||||||
|
|
||||||
:not(pre) > .hljs {
|
|
||||||
display: inline;
|
|
||||||
padding: 0.1em 0.3em;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(pre):not(a) > .hljs {
|
|
||||||
color: var(--inline-code-color);
|
|
||||||
overflow-x: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover > .hljs {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
pre > .buttons {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 100;
|
|
||||||
right: 5px;
|
|
||||||
top: 5px;
|
|
||||||
|
|
||||||
color: var(--sidebar-fg);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
pre > .buttons :hover {
|
|
||||||
color: var(--sidebar-active);
|
|
||||||
}
|
|
||||||
pre > .buttons i {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
pre > .buttons button {
|
|
||||||
color: inherit;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: inherit;
|
|
||||||
}
|
|
||||||
pre > .result {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search */
|
|
||||||
|
|
||||||
#searchresults a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
border-radius: 2px;
|
|
||||||
padding: 0 3px 1px 3px;
|
|
||||||
margin: 0 -3px -1px -3px;
|
|
||||||
background-color: var(--search-mark-bg);
|
|
||||||
transition: background-color 300ms linear;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark.fade-out {
|
|
||||||
background-color: rgba(0,0,0,0) !important;
|
|
||||||
cursor: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.searchbar-outer {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
max-width: var(--content-max-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
#searchbar {
|
|
||||||
width: 100%;
|
|
||||||
margin: 5px auto 0px auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
transition: box-shadow 300ms ease-in-out;
|
|
||||||
border: 1px solid var(--searchbar-border-color);
|
|
||||||
border-radius: 3px;
|
|
||||||
background-color: var(--searchbar-bg);
|
|
||||||
color: var(--searchbar-fg);
|
|
||||||
}
|
|
||||||
#searchbar:focus,
|
|
||||||
#searchbar.active {
|
|
||||||
box-shadow: 0 0 3px var(--searchbar-shadow-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.searchresults-header {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1em;
|
|
||||||
padding: 18px 0 0 5px;
|
|
||||||
color: var(--searchresults-header-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.searchresults-outer {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
max-width: var(--content-max-width);
|
|
||||||
border-bottom: 1px dashed var(--searchresults-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul#searchresults {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
ul#searchresults li {
|
|
||||||
margin: 10px 0px;
|
|
||||||
padding: 2px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
ul#searchresults li.focus {
|
|
||||||
background-color: var(--searchresults-li-bg);
|
|
||||||
}
|
|
||||||
ul#searchresults span.teaser {
|
|
||||||
display: block;
|
|
||||||
clear: both;
|
|
||||||
margin: 5px 0 0 20px;
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
ul#searchresults span.teaser em {
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar */
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: var(--sidebar-width);
|
|
||||||
font-size: 0.875em;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
overscroll-behavior-y: contain;
|
|
||||||
background-color: var(--sidebar-bg);
|
|
||||||
color: var(--sidebar-fg);
|
|
||||||
}
|
|
||||||
.sidebar-resizing {
|
|
||||||
-moz-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.js:not(.sidebar-resizing) .sidebar {
|
|
||||||
transition: transform 0.3s; /* Animation: slide away */
|
|
||||||
}
|
|
||||||
.sidebar code {
|
|
||||||
line-height: 2em;
|
|
||||||
}
|
|
||||||
.sidebar .sidebar-scrollbox {
|
|
||||||
overflow-y: auto;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 10px 10px;
|
|
||||||
}
|
|
||||||
.sidebar .sidebar-resize-handle {
|
|
||||||
position: absolute;
|
|
||||||
cursor: col-resize;
|
|
||||||
width: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
.js .sidebar .sidebar-resize-handle {
|
|
||||||
cursor: col-resize;
|
|
||||||
width: 5px;
|
|
||||||
}
|
|
||||||
.sidebar-hidden .sidebar {
|
|
||||||
transform: translateX(calc(0px - var(--sidebar-width)));
|
|
||||||
}
|
|
||||||
.sidebar::-webkit-scrollbar {
|
|
||||||
background: var(--sidebar-bg);
|
|
||||||
}
|
|
||||||
.sidebar::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--scrollbar);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-visible .page-wrapper {
|
|
||||||
transform: translateX(var(--sidebar-width));
|
|
||||||
}
|
|
||||||
@media only screen and (min-width: 620px) {
|
|
||||||
.sidebar-visible .page-wrapper {
|
|
||||||
transform: none;
|
|
||||||
margin-left: var(--sidebar-width);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter {
|
|
||||||
list-style: none outside none;
|
|
||||||
padding-left: 0;
|
|
||||||
line-height: 2.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter ol {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter li {
|
|
||||||
display: flex;
|
|
||||||
color: var(--sidebar-non-existant);
|
|
||||||
}
|
|
||||||
.chapter li a {
|
|
||||||
display: block;
|
|
||||||
padding: 0;
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--sidebar-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter li a:hover {
|
|
||||||
color: var(--sidebar-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter li a.active {
|
|
||||||
color: var(--sidebar-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter li > a.toggle {
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
padding: 0 10px;
|
|
||||||
user-select: none;
|
|
||||||
opacity: 0.68;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter li > a.toggle div {
|
|
||||||
transition: transform 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* collapse the section */
|
|
||||||
.chapter li:not(.expanded) + li > ol {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter li.chapter-item {
|
|
||||||
line-height: 1.5em;
|
|
||||||
margin-top: 0.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter li.expanded > a.toggle div {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacer {
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
margin: 5px 0px;
|
|
||||||
}
|
|
||||||
.chapter .spacer {
|
|
||||||
background-color: var(--sidebar-spacer);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (-moz-touch-enabled: 1), (pointer: coarse) {
|
|
||||||
.chapter li a { padding: 5px 0; }
|
|
||||||
.spacer { margin: 10px 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
list-style: none outside none;
|
|
||||||
padding-left: 20px;
|
|
||||||
line-height: 1.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Theme Menu Popup */
|
|
||||||
|
|
||||||
.theme-popup {
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
top: var(--menu-bar-height);
|
|
||||||
z-index: 1000;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.7em;
|
|
||||||
color: var(--fg);
|
|
||||||
background: var(--theme-popup-bg);
|
|
||||||
border: 1px solid var(--theme-popup-border);
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.theme-popup .default {
|
|
||||||
color: var(--icons);
|
|
||||||
}
|
|
||||||
.theme-popup .theme {
|
|
||||||
width: 100%;
|
|
||||||
border: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 2px 10px;
|
|
||||||
line-height: 25px;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
color: inherit;
|
|
||||||
background: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
.theme-popup .theme:hover {
|
|
||||||
background-color: var(--theme-hover);
|
|
||||||
}
|
|
||||||
.theme-popup .theme:hover:first-child,
|
|
||||||
.theme-popup .theme:hover:last-child {
|
|
||||||
border-top-left-radius: inherit;
|
|
||||||
border-top-right-radius: inherit;
|
|
||||||
}
|
|
||||||
181
css/general.css
181
css/general.css
|
|
@ -1,181 +0,0 @@
|
||||||
/* Base styles and content styles */
|
|
||||||
|
|
||||||
@import 'variables.css';
|
|
||||||
|
|
||||||
:root {
|
|
||||||
/* Browser default font-size is 16px, this way 1 rem = 10px */
|
|
||||||
font-size: 62.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: "Open Sans", sans-serif;
|
|
||||||
color: var(--fg);
|
|
||||||
background-color: var(--bg);
|
|
||||||
text-size-adjust: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important;
|
|
||||||
font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Don't change font size in headers. */
|
|
||||||
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
|
|
||||||
font-size: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left { float: left; }
|
|
||||||
.right { float: right; }
|
|
||||||
.boring { opacity: 0.6; }
|
|
||||||
.hide-boring .boring { display: none; }
|
|
||||||
.hidden { display: none !important; }
|
|
||||||
|
|
||||||
h2, h3 { margin-top: 2.5em; }
|
|
||||||
h4, h5 { margin-top: 2em; }
|
|
||||||
|
|
||||||
.header + .header h3,
|
|
||||||
.header + .header h4,
|
|
||||||
.header + .header h5 {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1:target::before,
|
|
||||||
h2:target::before,
|
|
||||||
h3:target::before,
|
|
||||||
h4:target::before,
|
|
||||||
h5:target::before,
|
|
||||||
h6:target::before {
|
|
||||||
display: inline-block;
|
|
||||||
content: "»";
|
|
||||||
margin-left: -30px;
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* This is broken on Safari as of version 14, but is fixed
|
|
||||||
in Safari Technology Preview 117 which I think will be Safari 14.2.
|
|
||||||
https://bugs.webkit.org/show_bug.cgi?id=218076
|
|
||||||
*/
|
|
||||||
:target {
|
|
||||||
scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
outline: 0;
|
|
||||||
padding: 0 var(--page-padding);
|
|
||||||
margin-top: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
|
|
||||||
}
|
|
||||||
.page-wrapper {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.js:not(.sidebar-resizing) .page-wrapper {
|
|
||||||
transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 0 15px;
|
|
||||||
padding-bottom: 50px;
|
|
||||||
}
|
|
||||||
.content main {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
max-width: var(--content-max-width);
|
|
||||||
}
|
|
||||||
.content p { line-height: 1.45em; }
|
|
||||||
.content ol { line-height: 1.45em; }
|
|
||||||
.content ul { line-height: 1.45em; }
|
|
||||||
.content a { text-decoration: none; }
|
|
||||||
.content a:hover { text-decoration: underline; }
|
|
||||||
.content img, .content video { max-width: 100%; }
|
|
||||||
.content .header:link,
|
|
||||||
.content .header:visited {
|
|
||||||
color: var(--fg);
|
|
||||||
}
|
|
||||||
.content .header:link,
|
|
||||||
.content .header:visited:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
margin: 0 auto;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
table td {
|
|
||||||
padding: 3px 20px;
|
|
||||||
border: 1px var(--table-border-color) solid;
|
|
||||||
}
|
|
||||||
table thead {
|
|
||||||
background: var(--table-header-bg);
|
|
||||||
}
|
|
||||||
table thead td {
|
|
||||||
font-weight: 700;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
table thead th {
|
|
||||||
padding: 3px 20px;
|
|
||||||
}
|
|
||||||
table thead tr {
|
|
||||||
border: 1px var(--table-header-bg) solid;
|
|
||||||
}
|
|
||||||
/* Alternate background colors for rows */
|
|
||||||
table tbody tr:nth-child(2n) {
|
|
||||||
background: var(--table-alternate-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin: 20px 0;
|
|
||||||
padding: 0 20px;
|
|
||||||
color: var(--fg);
|
|
||||||
background-color: var(--quote-bg);
|
|
||||||
border-top: .1em solid var(--quote-border);
|
|
||||||
border-bottom: .1em solid var(--quote-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
:not(.footnote-definition) + .footnote-definition,
|
|
||||||
.footnote-definition + :not(.footnote-definition) {
|
|
||||||
margin-top: 2em;
|
|
||||||
}
|
|
||||||
.footnote-definition {
|
|
||||||
font-size: 0.9em;
|
|
||||||
margin: 0.5em 0;
|
|
||||||
}
|
|
||||||
.footnote-definition p {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltiptext {
|
|
||||||
position: absolute;
|
|
||||||
visibility: hidden;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #333;
|
|
||||||
transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
|
|
||||||
left: -8px; /* Half of the width of the icon */
|
|
||||||
top: -35px;
|
|
||||||
font-size: 0.8em;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 5px 8px;
|
|
||||||
margin: 5px;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
.tooltipped .tooltiptext {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter li.part-title {
|
|
||||||
color: var(--sidebar-fg);
|
|
||||||
margin: 5px 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-no-output {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
|
|
||||||
#sidebar,
|
|
||||||
#menu-bar,
|
|
||||||
.nav-chapters,
|
|
||||||
.mobile-nav-chapters {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#page-wrapper.page-wrapper {
|
|
||||||
transform: none;
|
|
||||||
margin-left: 0px;
|
|
||||||
overflow-y: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
max-width: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
overflow-y: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
background-color: #666666;
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
/* Force background to be printed in Chrome */
|
|
||||||
-webkit-print-color-adjust: exact;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre > .buttons {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, a:visited, a:active, a:hover {
|
|
||||||
color: #4183c4;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
page-break-inside: avoid;
|
|
||||||
page-break-after: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre, code {
|
|
||||||
page-break-inside: avoid;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
@ -1,253 +0,0 @@
|
||||||
|
|
||||||
/* Globals */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--sidebar-width: 300px;
|
|
||||||
--page-padding: 15px;
|
|
||||||
--content-max-width: 750px;
|
|
||||||
--menu-bar-height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Themes */
|
|
||||||
|
|
||||||
.ayu {
|
|
||||||
--bg: hsl(210, 25%, 8%);
|
|
||||||
--fg: #c5c5c5;
|
|
||||||
|
|
||||||
--sidebar-bg: #14191f;
|
|
||||||
--sidebar-fg: #c8c9db;
|
|
||||||
--sidebar-non-existant: #5c6773;
|
|
||||||
--sidebar-active: #ffb454;
|
|
||||||
--sidebar-spacer: #2d334f;
|
|
||||||
|
|
||||||
--scrollbar: var(--sidebar-fg);
|
|
||||||
|
|
||||||
--icons: #737480;
|
|
||||||
--icons-hover: #b7b9cc;
|
|
||||||
|
|
||||||
--links: #0096cf;
|
|
||||||
|
|
||||||
--inline-code-color: #ffb454;
|
|
||||||
|
|
||||||
--theme-popup-bg: #14191f;
|
|
||||||
--theme-popup-border: #5c6773;
|
|
||||||
--theme-hover: #191f26;
|
|
||||||
|
|
||||||
--quote-bg: hsl(226, 15%, 17%);
|
|
||||||
--quote-border: hsl(226, 15%, 22%);
|
|
||||||
|
|
||||||
--table-border-color: hsl(210, 25%, 13%);
|
|
||||||
--table-header-bg: hsl(210, 25%, 28%);
|
|
||||||
--table-alternate-bg: hsl(210, 25%, 11%);
|
|
||||||
|
|
||||||
--searchbar-border-color: #848484;
|
|
||||||
--searchbar-bg: #424242;
|
|
||||||
--searchbar-fg: #fff;
|
|
||||||
--searchbar-shadow-color: #d4c89f;
|
|
||||||
--searchresults-header-fg: #666;
|
|
||||||
--searchresults-border-color: #888;
|
|
||||||
--searchresults-li-bg: #252932;
|
|
||||||
--search-mark-bg: #e3b171;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coal {
|
|
||||||
--bg: hsl(200, 7%, 8%);
|
|
||||||
--fg: #98a3ad;
|
|
||||||
|
|
||||||
--sidebar-bg: #292c2f;
|
|
||||||
--sidebar-fg: #a1adb8;
|
|
||||||
--sidebar-non-existant: #505254;
|
|
||||||
--sidebar-active: #3473ad;
|
|
||||||
--sidebar-spacer: #393939;
|
|
||||||
|
|
||||||
--scrollbar: var(--sidebar-fg);
|
|
||||||
|
|
||||||
--icons: #43484d;
|
|
||||||
--icons-hover: #b3c0cc;
|
|
||||||
|
|
||||||
--links: #2b79a2;
|
|
||||||
|
|
||||||
--inline-code-color: #c5c8c6;;
|
|
||||||
|
|
||||||
--theme-popup-bg: #141617;
|
|
||||||
--theme-popup-border: #43484d;
|
|
||||||
--theme-hover: #1f2124;
|
|
||||||
|
|
||||||
--quote-bg: hsl(234, 21%, 18%);
|
|
||||||
--quote-border: hsl(234, 21%, 23%);
|
|
||||||
|
|
||||||
--table-border-color: hsl(200, 7%, 13%);
|
|
||||||
--table-header-bg: hsl(200, 7%, 28%);
|
|
||||||
--table-alternate-bg: hsl(200, 7%, 11%);
|
|
||||||
|
|
||||||
--searchbar-border-color: #aaa;
|
|
||||||
--searchbar-bg: #b7b7b7;
|
|
||||||
--searchbar-fg: #000;
|
|
||||||
--searchbar-shadow-color: #aaa;
|
|
||||||
--searchresults-header-fg: #666;
|
|
||||||
--searchresults-border-color: #98a3ad;
|
|
||||||
--searchresults-li-bg: #2b2b2f;
|
|
||||||
--search-mark-bg: #355c7d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.light {
|
|
||||||
--bg: hsl(0, 0%, 100%);
|
|
||||||
--fg: hsl(0, 0%, 0%);
|
|
||||||
|
|
||||||
--sidebar-bg: #fafafa;
|
|
||||||
--sidebar-fg: hsl(0, 0%, 0%);
|
|
||||||
--sidebar-non-existant: #aaaaaa;
|
|
||||||
--sidebar-active: #1f1fff;
|
|
||||||
--sidebar-spacer: #f4f4f4;
|
|
||||||
|
|
||||||
--scrollbar: #8F8F8F;
|
|
||||||
|
|
||||||
--icons: #747474;
|
|
||||||
--icons-hover: #000000;
|
|
||||||
|
|
||||||
--links: #20609f;
|
|
||||||
|
|
||||||
--inline-code-color: #301900;
|
|
||||||
|
|
||||||
--theme-popup-bg: #fafafa;
|
|
||||||
--theme-popup-border: #cccccc;
|
|
||||||
--theme-hover: #e6e6e6;
|
|
||||||
|
|
||||||
--quote-bg: hsl(197, 37%, 96%);
|
|
||||||
--quote-border: hsl(197, 37%, 91%);
|
|
||||||
|
|
||||||
--table-border-color: hsl(0, 0%, 95%);
|
|
||||||
--table-header-bg: hsl(0, 0%, 80%);
|
|
||||||
--table-alternate-bg: hsl(0, 0%, 97%);
|
|
||||||
|
|
||||||
--searchbar-border-color: #aaa;
|
|
||||||
--searchbar-bg: #fafafa;
|
|
||||||
--searchbar-fg: #000;
|
|
||||||
--searchbar-shadow-color: #aaa;
|
|
||||||
--searchresults-header-fg: #666;
|
|
||||||
--searchresults-border-color: #888;
|
|
||||||
--searchresults-li-bg: #e4f2fe;
|
|
||||||
--search-mark-bg: #a2cff5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navy {
|
|
||||||
--bg: hsl(226, 23%, 11%);
|
|
||||||
--fg: #bcbdd0;
|
|
||||||
|
|
||||||
--sidebar-bg: #282d3f;
|
|
||||||
--sidebar-fg: #c8c9db;
|
|
||||||
--sidebar-non-existant: #505274;
|
|
||||||
--sidebar-active: #2b79a2;
|
|
||||||
--sidebar-spacer: #2d334f;
|
|
||||||
|
|
||||||
--scrollbar: var(--sidebar-fg);
|
|
||||||
|
|
||||||
--icons: #737480;
|
|
||||||
--icons-hover: #b7b9cc;
|
|
||||||
|
|
||||||
--links: #2b79a2;
|
|
||||||
|
|
||||||
--inline-code-color: #c5c8c6;;
|
|
||||||
|
|
||||||
--theme-popup-bg: #161923;
|
|
||||||
--theme-popup-border: #737480;
|
|
||||||
--theme-hover: #282e40;
|
|
||||||
|
|
||||||
--quote-bg: hsl(226, 15%, 17%);
|
|
||||||
--quote-border: hsl(226, 15%, 22%);
|
|
||||||
|
|
||||||
--table-border-color: hsl(226, 23%, 16%);
|
|
||||||
--table-header-bg: hsl(226, 23%, 31%);
|
|
||||||
--table-alternate-bg: hsl(226, 23%, 14%);
|
|
||||||
|
|
||||||
--searchbar-border-color: #aaa;
|
|
||||||
--searchbar-bg: #aeaec6;
|
|
||||||
--searchbar-fg: #000;
|
|
||||||
--searchbar-shadow-color: #aaa;
|
|
||||||
--searchresults-header-fg: #5f5f71;
|
|
||||||
--searchresults-border-color: #5c5c68;
|
|
||||||
--searchresults-li-bg: #242430;
|
|
||||||
--search-mark-bg: #a2cff5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rust {
|
|
||||||
--bg: hsl(60, 9%, 87%);
|
|
||||||
--fg: #262625;
|
|
||||||
|
|
||||||
--sidebar-bg: #3b2e2a;
|
|
||||||
--sidebar-fg: #c8c9db;
|
|
||||||
--sidebar-non-existant: #505254;
|
|
||||||
--sidebar-active: #e69f67;
|
|
||||||
--sidebar-spacer: #45373a;
|
|
||||||
|
|
||||||
--scrollbar: var(--sidebar-fg);
|
|
||||||
|
|
||||||
--icons: #737480;
|
|
||||||
--icons-hover: #262625;
|
|
||||||
|
|
||||||
--links: #2b79a2;
|
|
||||||
|
|
||||||
--inline-code-color: #6e6b5e;
|
|
||||||
|
|
||||||
--theme-popup-bg: #e1e1db;
|
|
||||||
--theme-popup-border: #b38f6b;
|
|
||||||
--theme-hover: #99908a;
|
|
||||||
|
|
||||||
--quote-bg: hsl(60, 5%, 75%);
|
|
||||||
--quote-border: hsl(60, 5%, 70%);
|
|
||||||
|
|
||||||
--table-border-color: hsl(60, 9%, 82%);
|
|
||||||
--table-header-bg: #b3a497;
|
|
||||||
--table-alternate-bg: hsl(60, 9%, 84%);
|
|
||||||
|
|
||||||
--searchbar-border-color: #aaa;
|
|
||||||
--searchbar-bg: #fafafa;
|
|
||||||
--searchbar-fg: #000;
|
|
||||||
--searchbar-shadow-color: #aaa;
|
|
||||||
--searchresults-header-fg: #666;
|
|
||||||
--searchresults-border-color: #888;
|
|
||||||
--searchresults-li-bg: #dec2a2;
|
|
||||||
--search-mark-bg: #e69f67;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.light.no-js {
|
|
||||||
--bg: hsl(200, 7%, 8%);
|
|
||||||
--fg: #98a3ad;
|
|
||||||
|
|
||||||
--sidebar-bg: #292c2f;
|
|
||||||
--sidebar-fg: #a1adb8;
|
|
||||||
--sidebar-non-existant: #505254;
|
|
||||||
--sidebar-active: #3473ad;
|
|
||||||
--sidebar-spacer: #393939;
|
|
||||||
|
|
||||||
--scrollbar: var(--sidebar-fg);
|
|
||||||
|
|
||||||
--icons: #43484d;
|
|
||||||
--icons-hover: #b3c0cc;
|
|
||||||
|
|
||||||
--links: #2b79a2;
|
|
||||||
|
|
||||||
--inline-code-color: #c5c8c6;;
|
|
||||||
|
|
||||||
--theme-popup-bg: #141617;
|
|
||||||
--theme-popup-border: #43484d;
|
|
||||||
--theme-hover: #1f2124;
|
|
||||||
|
|
||||||
--quote-bg: hsl(234, 21%, 18%);
|
|
||||||
--quote-border: hsl(234, 21%, 23%);
|
|
||||||
|
|
||||||
--table-border-color: hsl(200, 7%, 13%);
|
|
||||||
--table-header-bg: hsl(200, 7%, 28%);
|
|
||||||
--table-alternate-bg: hsl(200, 7%, 11%);
|
|
||||||
|
|
||||||
--searchbar-border-color: #aaa;
|
|
||||||
--searchbar-bg: #b7b7b7;
|
|
||||||
--searchbar-fg: #000;
|
|
||||||
--searchbar-shadow-color: #aaa;
|
|
||||||
--searchresults-header-fg: #666;
|
|
||||||
--searchresults-border-color: #98a3ad;
|
|
||||||
--searchresults-li-bg: #2b2b2f;
|
|
||||||
--search-mark-bg: #355c7d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
/* Placeholder for custom page-wide CSS. */
|
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>DappConnect Docs</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/</link>
|
||||||
|
<description>Recent content on DappConnect Docs</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language>
|
||||||
|
|
||||||
|
<atom:link href="https://docs.dappconnect.dev/docs/guides/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>How to Choose a Content Topic</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/01_choose_content_topic/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/guides/01_choose_content_topic/</guid>
|
||||||
|
<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}
|
||||||
|
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.</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Receive and Send Messages Using Waku Relay</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/02_relay_receive_send_messages/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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&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>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Retrieve Messages Using Waku Store</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/03_store_retrieve_messages/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Encrypt Messages Using Waku Message Version 1</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/04_encrypt_messages_version_1/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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.
|
||||||
|
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>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Sign Messages Using Waku Message Version 1</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/05_sign_messages_version_1/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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.
|
||||||
|
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>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Send Messages Using Waku Light Push</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/06_light_push_send_messages/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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.
|
||||||
|
The Waku Relay protocol sends messages to connected peers but does not provide any information on whether said peers have received messages. This can be an issue when facing potential connectivity issues. For example, when the connection drops easily, or it is connected to a small number of relay peers.</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Receive and Send Messages Using Waku Relay With ReactJS</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/07_reactjs_relay/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/guides/07_reactjs_relay/</guid>
|
||||||
|
<description>Receive and Send Messages Using Waku Relay With ReactJS It is easy to use DappConnect 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>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Retrieve Messages Using Waku Store With ReactJS</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/08_reactjs_store/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/guides/08_reactjs_store/</guid>
|
||||||
|
<description>Retrieve Messages Using Waku Store With ReactJS It is easy to use DappConnect 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>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Introduction on DappConnect Docs</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/</link>
|
||||||
|
<description>Recent content in Introduction on DappConnect 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.dappconnect.dev/docs/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Introduction</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/introduction/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/introduction/</guid>
|
||||||
|
<description>DappConnect Docs DappConnect 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>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Quick Start</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/quick_start/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/quick_start/</guid>
|
||||||
|
<description>Quick Start In this section you will learn how to receive and send messages using Waku Relay.
|
||||||
|
A more in depth guide for Waku Relay can be found here.
|
||||||
|
Install Install the js-waku package:
|
||||||
|
npm install js-waku # or with yarn yarn add js-waku Start a waku node import { Waku } from &#39;js-waku&#39;; const waku = await Waku.create({ bootstrap: true }); Listen for messages The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Examples</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/examples/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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.
|
||||||
|
Demonstrates:
|
||||||
|
Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App Repo: store-reactjs-chat.
|
||||||
|
Demonstrates:
|
||||||
|
Waku Store React/JavaScript Protobuf using protons Vanilla Javascript Using Minified Library Repo: unpkg-js-store.
|
||||||
|
Demonstrates:
|
||||||
|
How to stop retrieving results from Waku Store on condition Use minified bundle from Unpkg.</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Cryptographic Libraries</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/crypto_libraries/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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&rsquo; crypto module.</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Implemented Waku Protocols</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/waku_protocols/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/waku_protocols/</guid>
|
||||||
|
<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>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
||||||
|
<!DOCTYPE html><html><head><title>https://docs.dappconnect.dev/</title><link rel="canonical" href="https://docs.dappconnect.dev/"/><meta name="robots" content="noindex"><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=https://docs.dappconnect.dev/" /></head></html>
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
<?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.dappconnect.dev/docs/guides/01_choose_content_topic/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/introduction/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="es"
|
||||||
|
href="https://docs.dappconnect.dev/es/"
|
||||||
|
/>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="en"
|
||||||
|
href="https://docs.dappconnect.dev/"
|
||||||
|
/>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="es"
|
||||||
|
href="https://docs.dappconnect.dev/es/docs/"
|
||||||
|
/>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="en"
|
||||||
|
href="https://docs.dappconnect.dev/docs/"
|
||||||
|
/>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/quick_start/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/guides/02_relay_receive_send_messages/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/guides/03_store_retrieve_messages/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/guides/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/guides/04_encrypt_messages_version_1/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/examples/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/crypto_libraries/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/guides/05_sign_messages_version_1/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/waku_protocols/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/guides/06_light_push_send_messages/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/guides/07_reactjs_relay/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/docs/guides/08_reactjs_store/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/categories/</loc>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="es"
|
||||||
|
href="https://docs.dappconnect.dev/es/categories/"
|
||||||
|
/>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="en"
|
||||||
|
href="https://docs.dappconnect.dev/categories/"
|
||||||
|
/>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/tags/</loc>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="es"
|
||||||
|
href="https://docs.dappconnect.dev/es/tags/"
|
||||||
|
/>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="en"
|
||||||
|
href="https://docs.dappconnect.dev/tags/"
|
||||||
|
/>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
</urlset>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Categories on DappConnect Docs</title>
|
||||||
|
<link>https://docs.dappconnect.dev/es/categories/</link>
|
||||||
|
<description>Recent content in Categories on DappConnect Docs</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language>
|
||||||
|
|
||||||
|
<atom:link href="https://docs.dappconnect.dev/es/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Introducción on DappConnect Docs</title>
|
||||||
|
<link>https://docs.dappconnect.dev/es/docs/</link>
|
||||||
|
<description>Recent content in Introducción on DappConnect Docs</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language>
|
||||||
|
|
||||||
|
<atom:link href="https://docs.dappconnect.dev/es/docs/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Introducción</title>
|
||||||
|
<link>https://docs.dappconnect.dev/es/docs/introduccion/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/es/docs/introduccion/</guid>
|
||||||
|
<description>Introducción TODO</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Introducción on DappConnect Docs</title>
|
||||||
|
<link>https://docs.dappconnect.dev/es/</link>
|
||||||
|
<description>Recent content in Introducción on DappConnect Docs</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language>
|
||||||
|
|
||||||
|
<atom:link href="https://docs.dappconnect.dev/es/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Introducción</title>
|
||||||
|
<link>https://docs.dappconnect.dev/es/docs/introduccion/</link>
|
||||||
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/es/docs/introduccion/</guid>
|
||||||
|
<description>Introducción TODO</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<?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.dappconnect.dev/es/docs/introduccion/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/es/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="en"
|
||||||
|
href="https://docs.dappconnect.dev/"
|
||||||
|
/>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="es"
|
||||||
|
href="https://docs.dappconnect.dev/es/"
|
||||||
|
/>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/es/docs/</loc>
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="en"
|
||||||
|
href="https://docs.dappconnect.dev/docs/"
|
||||||
|
/>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="es"
|
||||||
|
href="https://docs.dappconnect.dev/es/docs/"
|
||||||
|
/>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/es/categories/</loc>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="en"
|
||||||
|
href="https://docs.dappconnect.dev/categories/"
|
||||||
|
/>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="es"
|
||||||
|
href="https://docs.dappconnect.dev/es/categories/"
|
||||||
|
/>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://docs.dappconnect.dev/es/tags/</loc>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="en"
|
||||||
|
href="https://docs.dappconnect.dev/tags/"
|
||||||
|
/>
|
||||||
|
<xhtml:link
|
||||||
|
rel="alternate"
|
||||||
|
hreflang="es"
|
||||||
|
href="https://docs.dappconnect.dev/es/tags/"
|
||||||
|
/>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
</urlset>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Tags on DappConnect Docs</title>
|
||||||
|
<link>https://docs.dappconnect.dev/es/tags/</link>
|
||||||
|
<description>Recent content in Tags on DappConnect Docs</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language>
|
||||||
|
|
||||||
|
<atom:link href="https://docs.dappconnect.dev/es/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
272
examples.html
272
examples.html
|
|
@ -1,272 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Examples - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="favicon.png">
|
|
||||||
<link rel="stylesheet" href="css/variables.css">
|
|
||||||
<link rel="stylesheet" href="css/general.css">
|
|
||||||
<link rel="stylesheet" href="css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="highlight.css">
|
|
||||||
<link rel="stylesheet" href="tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="examples.html" class="active"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="examples"><a class="header" href="#examples">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"><a class="header" href="#minimal-reactjs-chat-app">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>
|
|
||||||
<li>Group chat</li>
|
|
||||||
<li>React/JavaScript</li>
|
|
||||||
<li>Waku Relay</li>
|
|
||||||
<li>Protobuf using <a href="https://www.npmjs.com/package/protons">protons</a></li>
|
|
||||||
<li>No async/await syntax</li>
|
|
||||||
</ul>
|
|
||||||
<h2 id="minimal-reactjs-waku-store-app"><a class="header" href="#minimal-reactjs-waku-store-app">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>
|
|
||||||
<li>Waku Store</li>
|
|
||||||
<li>React/JavaScript</li>
|
|
||||||
<li>Protobuf using <a href="https://www.npmjs.com/package/protons">protons</a></li>
|
|
||||||
</ul>
|
|
||||||
<h2 id="vanilla-javascript-using-minified-library"><a class="header" href="#vanilla-javascript-using-minified-library">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>
|
|
||||||
<li>How to stop retrieving results from Waku Store on condition</li>
|
|
||||||
<li>Use minified bundle from Unpkg.com</li>
|
|
||||||
<li>Vanilla JavaScript application</li>
|
|
||||||
</ul>
|
|
||||||
<h2 id="web-chat-app"><a class="header" href="#web-chat-app">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>
|
|
||||||
<li>Group chat</li>
|
|
||||||
<li>React/TypeScript</li>
|
|
||||||
<li>Waku Relay</li>
|
|
||||||
<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"><a class="header" href="#ethereum-private-message-web-app">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>
|
|
||||||
<li>Private messaging</li>
|
|
||||||
<li>React/TypeScript</li>
|
|
||||||
<li>Waku Light Push</li>
|
|
||||||
<li>Signature with Web3 Wallet</li>
|
|
||||||
<li>Asymmetric Encryption</li>
|
|
||||||
<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"><a class="header" href="#ethereum-private-message-using-web3-wallet-encryption-api-web-app">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>
|
|
||||||
<li>Private Messaging</li>
|
|
||||||
<li>React/TypeScript</li>
|
|
||||||
<li>Waku Light Push</li>
|
|
||||||
<li>Signature with Web3 using EIP-712: <code>eth_signTypedData_v4</code></li>
|
|
||||||
<li>Asymmetric Encryption</li>
|
|
||||||
<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"><a class="header" href="#uber-like-minimalistic-car-sharing-app-suing-vuejs">Uber-like minimalistic car sharing app suing Vue.js</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's How I Built It With Status.im, Waku, and Vue.js</a>.</p>
|
|
||||||
<p>Demonstrates:</p>
|
|
||||||
<ul>
|
|
||||||
<li>Vue.js</li>
|
|
||||||
<li>Waku Relay</li>
|
|
||||||
<li>Protobuf using <a href="https://www.npmjs.com/package/protons">protons</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="guides/light_push_send_messages.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="waku_protocols.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="guides/light_push_send_messages.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="waku_protocols.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
BIN
favicon.png
BIN
favicon.png
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
22
favicon.svg
22
favicon.svg
|
|
@ -1,22 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 199.7 184.2">
|
|
||||||
<style>
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
svg { fill: white; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<path d="M189.5,36.8c0.2,2.8,0,5.1-0.6,6.8L153,162c-0.6,2.1-2,3.7-4.2,5c-2.2,1.2-4.4,1.9-6.7,1.9H31.4c-9.6,0-15.3-2.8-17.3-8.4
|
|
||||||
c-0.8-2.2-0.8-3.9,0.1-5.2c0.9-1.2,2.4-1.8,4.6-1.8H123c7.4,0,12.6-1.4,15.4-4.1s5.7-8.9,8.6-18.4l32.9-108.6
|
|
||||||
c1.8-5.9,1-11.1-2.2-15.6S169.9,0,164,0H72.7c-1,0-3.1,0.4-6.1,1.1l0.1-0.4C64.5,0.2,62.6,0,61,0.1s-3,0.5-4.3,1.4
|
|
||||||
c-1.3,0.9-2.4,1.8-3.2,2.8S52,6.5,51.2,8.1c-0.8,1.6-1.4,3-1.9,4.3s-1.1,2.7-1.8,4.2c-0.7,1.5-1.3,2.7-2,3.7c-0.5,0.6-1.2,1.5-2,2.5
|
|
||||||
s-1.6,2-2.2,2.8s-0.9,1.5-1.1,2.2c-0.2,0.7-0.1,1.8,0.2,3.2c0.3,1.4,0.4,2.4,0.4,3.1c-0.3,3-1.4,6.9-3.3,11.6
|
|
||||||
c-1.9,4.7-3.6,8.1-5.1,10.1c-0.3,0.4-1.2,1.3-2.6,2.7c-1.4,1.4-2.3,2.6-2.6,3.7c-0.3,0.4-0.3,1.5-0.1,3.4c0.3,1.8,0.4,3.1,0.3,3.8
|
|
||||||
c-0.3,2.7-1.3,6.3-3,10.8c-1.7,4.5-3.4,8.2-5,11c-0.2,0.5-0.9,1.4-2,2.8c-1.1,1.4-1.8,2.5-2,3.4c-0.2,0.6-0.1,1.8,0.1,3.4
|
|
||||||
c0.2,1.6,0.2,2.8-0.1,3.6c-0.6,3-1.8,6.7-3.6,11c-1.8,4.3-3.6,7.9-5.4,11c-0.5,0.8-1.1,1.7-2,2.8c-0.8,1.1-1.5,2-2,2.8
|
|
||||||
s-0.8,1.6-1,2.5c-0.1,0.5,0,1.3,0.4,2.3c0.3,1.1,0.4,1.9,0.4,2.6c-0.1,1.1-0.2,2.6-0.5,4.4c-0.2,1.8-0.4,2.9-0.4,3.2
|
|
||||||
c-1.8,4.8-1.7,9.9,0.2,15.2c2.2,6.2,6.2,11.5,11.9,15.8c5.7,4.3,11.7,6.4,17.8,6.4h110.7c5.2,0,10.1-1.7,14.7-5.2s7.7-7.8,9.2-12.9
|
|
||||||
l33-108.6c1.8-5.8,1-10.9-2.2-15.5C194.9,39.7,192.6,38,189.5,36.8z M59.6,122.8L73.8,80c0,0,7,0,10.8,0s28.8-1.7,25.4,17.5
|
|
||||||
c-3.4,19.2-18.8,25.2-36.8,25.4S59.6,122.8,59.6,122.8z M78.6,116.8c4.7-0.1,18.9-2.9,22.1-17.1S89.2,86.3,89.2,86.3l-8.9,0
|
|
||||||
l-10.2,30.5C70.2,116.9,74,116.9,78.6,116.8z M75.3,68.7L89,26.2h9.8l0.8,34l23.6-34h9.9l-13.6,42.5h-7.1l12.5-35.4l-24.5,35.4h-6.8
|
|
||||||
l-0.8-35L82,68.7H75.3z"/>
|
|
||||||
</svg>
|
|
||||||
<!-- Original image Copyright Dave Gandy — CC BY 4.0 License -->
|
|
||||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,202 +0,0 @@
|
||||||
|
|
||||||
Apache License
|
|
||||||
Version 2.0, January 2004
|
|
||||||
http://www.apache.org/licenses/
|
|
||||||
|
|
||||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
||||||
|
|
||||||
1. Definitions.
|
|
||||||
|
|
||||||
"License" shall mean the terms and conditions for use, reproduction,
|
|
||||||
and distribution as defined by Sections 1 through 9 of this document.
|
|
||||||
|
|
||||||
"Licensor" shall mean the copyright owner or entity authorized by
|
|
||||||
the copyright owner that is granting the License.
|
|
||||||
|
|
||||||
"Legal Entity" shall mean the union of the acting entity and all
|
|
||||||
other entities that control, are controlled by, or are under common
|
|
||||||
control with that entity. For the purposes of this definition,
|
|
||||||
"control" means (i) the power, direct or indirect, to cause the
|
|
||||||
direction or management of such entity, whether by contract or
|
|
||||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
||||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
||||||
|
|
||||||
"You" (or "Your") shall mean an individual or Legal Entity
|
|
||||||
exercising permissions granted by this License.
|
|
||||||
|
|
||||||
"Source" form shall mean the preferred form for making modifications,
|
|
||||||
including but not limited to software source code, documentation
|
|
||||||
source, and configuration files.
|
|
||||||
|
|
||||||
"Object" form shall mean any form resulting from mechanical
|
|
||||||
transformation or translation of a Source form, including but
|
|
||||||
not limited to compiled object code, generated documentation,
|
|
||||||
and conversions to other media types.
|
|
||||||
|
|
||||||
"Work" shall mean the work of authorship, whether in Source or
|
|
||||||
Object form, made available under the License, as indicated by a
|
|
||||||
copyright notice that is included in or attached to the work
|
|
||||||
(an example is provided in the Appendix below).
|
|
||||||
|
|
||||||
"Derivative Works" shall mean any work, whether in Source or Object
|
|
||||||
form, that is based on (or derived from) the Work and for which the
|
|
||||||
editorial revisions, annotations, elaborations, or other modifications
|
|
||||||
represent, as a whole, an original work of authorship. For the purposes
|
|
||||||
of this License, Derivative Works shall not include works that remain
|
|
||||||
separable from, or merely link (or bind by name) to the interfaces of,
|
|
||||||
the Work and Derivative Works thereof.
|
|
||||||
|
|
||||||
"Contribution" shall mean any work of authorship, including
|
|
||||||
the original version of the Work and any modifications or additions
|
|
||||||
to that Work or Derivative Works thereof, that is intentionally
|
|
||||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
||||||
or by an individual or Legal Entity authorized to submit on behalf of
|
|
||||||
the copyright owner. For the purposes of this definition, "submitted"
|
|
||||||
means any form of electronic, verbal, or written communication sent
|
|
||||||
to the Licensor or its representatives, including but not limited to
|
|
||||||
communication on electronic mailing lists, source code control systems,
|
|
||||||
and issue tracking systems that are managed by, or on behalf of, the
|
|
||||||
Licensor for the purpose of discussing and improving the Work, but
|
|
||||||
excluding communication that is conspicuously marked or otherwise
|
|
||||||
designated in writing by the copyright owner as "Not a Contribution."
|
|
||||||
|
|
||||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
||||||
on behalf of whom a Contribution has been received by Licensor and
|
|
||||||
subsequently incorporated within the Work.
|
|
||||||
|
|
||||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
||||||
this License, each Contributor hereby grants to You a perpetual,
|
|
||||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
||||||
copyright license to reproduce, prepare Derivative Works of,
|
|
||||||
publicly display, publicly perform, sublicense, and distribute the
|
|
||||||
Work and such Derivative Works in Source or Object form.
|
|
||||||
|
|
||||||
3. Grant of Patent License. Subject to the terms and conditions of
|
|
||||||
this License, each Contributor hereby grants to You a perpetual,
|
|
||||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
||||||
(except as stated in this section) patent license to make, have made,
|
|
||||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
||||||
where such license applies only to those patent claims licensable
|
|
||||||
by such Contributor that are necessarily infringed by their
|
|
||||||
Contribution(s) alone or by combination of their Contribution(s)
|
|
||||||
with the Work to which such Contribution(s) was submitted. If You
|
|
||||||
institute patent litigation against any entity (including a
|
|
||||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
||||||
or a Contribution incorporated within the Work constitutes direct
|
|
||||||
or contributory patent infringement, then any patent licenses
|
|
||||||
granted to You under this License for that Work shall terminate
|
|
||||||
as of the date such litigation is filed.
|
|
||||||
|
|
||||||
4. Redistribution. You may reproduce and distribute copies of the
|
|
||||||
Work or Derivative Works thereof in any medium, with or without
|
|
||||||
modifications, and in Source or Object form, provided that You
|
|
||||||
meet the following conditions:
|
|
||||||
|
|
||||||
(a) You must give any other recipients of the Work or
|
|
||||||
Derivative Works a copy of this License; and
|
|
||||||
|
|
||||||
(b) You must cause any modified files to carry prominent notices
|
|
||||||
stating that You changed the files; and
|
|
||||||
|
|
||||||
(c) You must retain, in the Source form of any Derivative Works
|
|
||||||
that You distribute, all copyright, patent, trademark, and
|
|
||||||
attribution notices from the Source form of the Work,
|
|
||||||
excluding those notices that do not pertain to any part of
|
|
||||||
the Derivative Works; and
|
|
||||||
|
|
||||||
(d) If the Work includes a "NOTICE" text file as part of its
|
|
||||||
distribution, then any Derivative Works that You distribute must
|
|
||||||
include a readable copy of the attribution notices contained
|
|
||||||
within such NOTICE file, excluding those notices that do not
|
|
||||||
pertain to any part of the Derivative Works, in at least one
|
|
||||||
of the following places: within a NOTICE text file distributed
|
|
||||||
as part of the Derivative Works; within the Source form or
|
|
||||||
documentation, if provided along with the Derivative Works; or,
|
|
||||||
within a display generated by the Derivative Works, if and
|
|
||||||
wherever such third-party notices normally appear. The contents
|
|
||||||
of the NOTICE file are for informational purposes only and
|
|
||||||
do not modify the License. You may add Your own attribution
|
|
||||||
notices within Derivative Works that You distribute, alongside
|
|
||||||
or as an addendum to the NOTICE text from the Work, provided
|
|
||||||
that such additional attribution notices cannot be construed
|
|
||||||
as modifying the License.
|
|
||||||
|
|
||||||
You may add Your own copyright statement to Your modifications and
|
|
||||||
may provide additional or different license terms and conditions
|
|
||||||
for use, reproduction, or distribution of Your modifications, or
|
|
||||||
for any such Derivative Works as a whole, provided Your use,
|
|
||||||
reproduction, and distribution of the Work otherwise complies with
|
|
||||||
the conditions stated in this License.
|
|
||||||
|
|
||||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
||||||
any Contribution intentionally submitted for inclusion in the Work
|
|
||||||
by You to the Licensor shall be under the terms and conditions of
|
|
||||||
this License, without any additional terms or conditions.
|
|
||||||
Notwithstanding the above, nothing herein shall supersede or modify
|
|
||||||
the terms of any separate license agreement you may have executed
|
|
||||||
with Licensor regarding such Contributions.
|
|
||||||
|
|
||||||
6. Trademarks. This License does not grant permission to use the trade
|
|
||||||
names, trademarks, service marks, or product names of the Licensor,
|
|
||||||
except as required for reasonable and customary use in describing the
|
|
||||||
origin of the Work and reproducing the content of the NOTICE file.
|
|
||||||
|
|
||||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
||||||
agreed to in writing, Licensor provides the Work (and each
|
|
||||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
||||||
implied, including, without limitation, any warranties or conditions
|
|
||||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
||||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
||||||
appropriateness of using or redistributing the Work and assume any
|
|
||||||
risks associated with Your exercise of permissions under this License.
|
|
||||||
|
|
||||||
8. Limitation of Liability. In no event and under no legal theory,
|
|
||||||
whether in tort (including negligence), contract, or otherwise,
|
|
||||||
unless required by applicable law (such as deliberate and grossly
|
|
||||||
negligent acts) or agreed to in writing, shall any Contributor be
|
|
||||||
liable to You for damages, including any direct, indirect, special,
|
|
||||||
incidental, or consequential damages of any character arising as a
|
|
||||||
result of this License or out of the use or inability to use the
|
|
||||||
Work (including but not limited to damages for loss of goodwill,
|
|
||||||
work stoppage, computer failure or malfunction, or any and all
|
|
||||||
other commercial damages or losses), even if such Contributor
|
|
||||||
has been advised of the possibility of such damages.
|
|
||||||
|
|
||||||
9. Accepting Warranty or Additional Liability. While redistributing
|
|
||||||
the Work or Derivative Works thereof, You may choose to offer,
|
|
||||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
||||||
or other liability obligations and/or rights consistent with this
|
|
||||||
License. However, in accepting such obligations, You may act only
|
|
||||||
on Your own behalf and on Your sole responsibility, not on behalf
|
|
||||||
of any other Contributor, and only if You agree to indemnify,
|
|
||||||
defend, and hold each Contributor harmless for any liability
|
|
||||||
incurred by, or claims asserted against, such Contributor by reason
|
|
||||||
of your accepting any such warranty or additional liability.
|
|
||||||
|
|
||||||
END OF TERMS AND CONDITIONS
|
|
||||||
|
|
||||||
APPENDIX: How to apply the Apache License to your work.
|
|
||||||
|
|
||||||
To apply the Apache License to your work, attach the following
|
|
||||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
||||||
replaced with your own identifying information. (Don't include
|
|
||||||
the brackets!) The text should be enclosed in the appropriate
|
|
||||||
comment syntax for the file format. We also recommend that a
|
|
||||||
file or class name and description of purpose be included on the
|
|
||||||
same "printed page" as the copyright notice for easier
|
|
||||||
identification within third-party archives.
|
|
||||||
|
|
||||||
Copyright [yyyy] [name of copyright owner]
|
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
you may not use this file except in compliance with the License.
|
|
||||||
You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License.
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
|
|
||||||
|
|
||||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
|
||||||
This license is copied below, and is also available with a FAQ at:
|
|
||||||
http://scripts.sil.org/OFL
|
|
||||||
|
|
||||||
|
|
||||||
-----------------------------------------------------------
|
|
||||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
|
||||||
-----------------------------------------------------------
|
|
||||||
|
|
||||||
PREAMBLE
|
|
||||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
|
||||||
development of collaborative font projects, to support the font creation
|
|
||||||
efforts of academic and linguistic communities, and to provide a free and
|
|
||||||
open framework in which fonts may be shared and improved in partnership
|
|
||||||
with others.
|
|
||||||
|
|
||||||
The OFL allows the licensed fonts to be used, studied, modified and
|
|
||||||
redistributed freely as long as they are not sold by themselves. The
|
|
||||||
fonts, including any derivative works, can be bundled, embedded,
|
|
||||||
redistributed and/or sold with any software provided that any reserved
|
|
||||||
names are not used by derivative works. The fonts and derivatives,
|
|
||||||
however, cannot be released under any other type of license. The
|
|
||||||
requirement for fonts to remain under this license does not apply
|
|
||||||
to any document created using the fonts or their derivatives.
|
|
||||||
|
|
||||||
DEFINITIONS
|
|
||||||
"Font Software" refers to the set of files released by the Copyright
|
|
||||||
Holder(s) under this license and clearly marked as such. This may
|
|
||||||
include source files, build scripts and documentation.
|
|
||||||
|
|
||||||
"Reserved Font Name" refers to any names specified as such after the
|
|
||||||
copyright statement(s).
|
|
||||||
|
|
||||||
"Original Version" refers to the collection of Font Software components as
|
|
||||||
distributed by the Copyright Holder(s).
|
|
||||||
|
|
||||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
|
||||||
or substituting -- in part or in whole -- any of the components of the
|
|
||||||
Original Version, by changing formats or by porting the Font Software to a
|
|
||||||
new environment.
|
|
||||||
|
|
||||||
"Author" refers to any designer, engineer, programmer, technical
|
|
||||||
writer or other person who contributed to the Font Software.
|
|
||||||
|
|
||||||
PERMISSION & CONDITIONS
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining
|
|
||||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
|
||||||
redistribute, and sell modified and unmodified copies of the Font
|
|
||||||
Software, subject to the following conditions:
|
|
||||||
|
|
||||||
1) Neither the Font Software nor any of its individual components,
|
|
||||||
in Original or Modified Versions, may be sold by itself.
|
|
||||||
|
|
||||||
2) Original or Modified Versions of the Font Software may be bundled,
|
|
||||||
redistributed and/or sold with any software, provided that each copy
|
|
||||||
contains the above copyright notice and this license. These can be
|
|
||||||
included either as stand-alone text files, human-readable headers or
|
|
||||||
in the appropriate machine-readable metadata fields within text or
|
|
||||||
binary files as long as those fields can be easily viewed by the user.
|
|
||||||
|
|
||||||
3) No Modified Version of the Font Software may use the Reserved Font
|
|
||||||
Name(s) unless explicit written permission is granted by the corresponding
|
|
||||||
Copyright Holder. This restriction only applies to the primary font name as
|
|
||||||
presented to the users.
|
|
||||||
|
|
||||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
|
||||||
Software shall not be used to promote, endorse or advertise any
|
|
||||||
Modified Version, except to acknowledge the contribution(s) of the
|
|
||||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
|
||||||
permission.
|
|
||||||
|
|
||||||
5) The Font Software, modified or unmodified, in part or in whole,
|
|
||||||
must be distributed entirely under this license, and must not be
|
|
||||||
distributed under any other license. The requirement for fonts to
|
|
||||||
remain under this license does not apply to any document created
|
|
||||||
using the Font Software.
|
|
||||||
|
|
||||||
TERMINATION
|
|
||||||
This license becomes null and void if any of the above conditions are
|
|
||||||
not met.
|
|
||||||
|
|
||||||
DISCLAIMER
|
|
||||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
||||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
|
||||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
|
||||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
|
||||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
|
||||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
|
||||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
|
||||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
|
||||||
100
fonts/fonts.css
100
fonts/fonts.css
|
|
@ -1,100 +0,0 @@
|
||||||
/* Open Sans is licensed under the Apache License, Version 2.0. See http://www.apache.org/licenses/LICENSE-2.0 */
|
|
||||||
/* Source Code Pro is under the Open Font License. See https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL */
|
|
||||||
|
|
||||||
/* open-sans-300 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 300;
|
|
||||||
src: local('Open Sans Light'), local('OpenSans-Light'),
|
|
||||||
url('open-sans-v17-all-charsets-300.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* open-sans-300italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 300;
|
|
||||||
src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
|
|
||||||
url('open-sans-v17-all-charsets-300italic.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* open-sans-regular - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Open Sans Regular'), local('OpenSans-Regular'),
|
|
||||||
url('open-sans-v17-all-charsets-regular.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* open-sans-italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Open Sans Italic'), local('OpenSans-Italic'),
|
|
||||||
url('open-sans-v17-all-charsets-italic.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* open-sans-600 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
|
|
||||||
url('open-sans-v17-all-charsets-600.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* open-sans-600italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 600;
|
|
||||||
src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
|
|
||||||
url('open-sans-v17-all-charsets-600italic.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* open-sans-700 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
src: local('Open Sans Bold'), local('OpenSans-Bold'),
|
|
||||||
url('open-sans-v17-all-charsets-700.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* open-sans-700italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 700;
|
|
||||||
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
|
|
||||||
url('open-sans-v17-all-charsets-700italic.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* open-sans-800 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 800;
|
|
||||||
src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
|
|
||||||
url('open-sans-v17-all-charsets-800.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* open-sans-800italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 800;
|
|
||||||
src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
|
|
||||||
url('open-sans-v17-all-charsets-800italic.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* source-code-pro-500 - latin_vietnamese_latin-ext_greek_cyrillic-ext_cyrillic */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Source Code Pro';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
src: url('source-code-pro-v11-all-charsets-500.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,222 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>How to Choose a Content Topic - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="../favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="../favicon.png">
|
|
||||||
<link rel="stylesheet" href="../css/variables.css">
|
|
||||||
<link rel="stylesheet" href="../css/general.css">
|
|
||||||
<link rel="stylesheet" href="../css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="../css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../highlight.css">
|
|
||||||
<link rel="stylesheet" href="../tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="../ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "../";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="../quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="../guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../guides/choose_content_topic.html" class="active"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="../guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="../guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="../guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="../examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="../waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="how-to-choose-a-content-topic"><a class="header" href="#how-to-choose-a-content-topic">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>
|
|
||||||
<p>The format for content topics is as follows:</p>
|
|
||||||
<p><code>/{dapp-name}/{version}/{content-topic-name}/{encoding}</code></p>
|
|
||||||
<ul>
|
|
||||||
<li><code>dapp-name</code>: The name of your dApp, it must be unique to avoid conflict with other dApps.</li>
|
|
||||||
<li><code>version</code>: We usually start at <code>1</code>, useful when introducing breaking changes in your messages.</li>
|
|
||||||
<li><code>content-topic-name</code>: The actual content topic name to use for filtering.
|
|
||||||
If your dApp uses DappConnect for several features,
|
|
||||||
you should use a content topic per feature.</li>
|
|
||||||
<li><code>encoding</code>: The encoding format of the message, Protobuf is most often used: <code>proto</code>.</li>
|
|
||||||
</ul>
|
|
||||||
<p>For example: Your dApp's name is SuperCrypto,
|
|
||||||
it enables users to receive notifications and send private messages.
|
|
||||||
You may want to use the following content topics:</p>
|
|
||||||
<ul>
|
|
||||||
<li><code>/supercrypto/1/notification/proto</code></li>
|
|
||||||
<li><code>/supercrypto/1/private-message/proto</code></li>
|
|
||||||
</ul>
|
|
||||||
<p>You can learn more about Waku topics in the <a href="https://rfc.vac.dev/spec/23/">23/WAKU2-TOPICS</a> specs.</p>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="../guides/index.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/relay_receive_send_messages.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="../guides/index.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/relay_receive_send_messages.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,358 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Encrypt Messages Using Waku Message Version 1 - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="../favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="../favicon.png">
|
|
||||||
<link rel="stylesheet" href="../css/variables.css">
|
|
||||||
<link rel="stylesheet" href="../css/general.css">
|
|
||||||
<link rel="stylesheet" href="../css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="../css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../highlight.css">
|
|
||||||
<link rel="stylesheet" href="../tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="../ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "../";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="../quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="../guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="../guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="../guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="../guides/encrypt_messages_version_1.html" class="active"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="../examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="../waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="encrypt-messages-using-waku-message-version-1"><a class="header" href="#encrypt-messages-using-waku-message-version-1">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.</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>
|
|
||||||
<h2 id="what-data-is-encrypted"><a class="header" href="#what-data-is-encrypted">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>
|
|
||||||
<p>This needs to be kept in mind for scalability and forward secrecy concerns:</p>
|
|
||||||
<ul>
|
|
||||||
<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"><a class="header" href="#key-management">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"><a class="header" href="#which-encryption-method-should-i-use">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,
|
|
||||||
she can also use <code>K</code> to decrypt any message encrypted with <code>K</code>,
|
|
||||||
even if she is not the sender.</p>
|
|
||||||
<p>Group chats is a possible use case for symmetric encryption:
|
|
||||||
All participants can use an out-of-band method to agree on a <code>K</code>.
|
|
||||||
Participants can then use <code>K</code> to encrypt and decrypt messages within the group chat.
|
|
||||||
Participants MUST keep <code>K</code> secret to ensure that no external party can decrypt the group chat messages.</p>
|
|
||||||
<p><strong>Asymmetric</strong> encryption is done using a key pair:
|
|
||||||
the public key is used to encrypt messages,
|
|
||||||
the matching private key is used to decrypt messages.</p>
|
|
||||||
<p>For Alice to encrypt a message for Bob, she needs to know Bob's Public Key <code>K</code>.
|
|
||||||
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"><a class="header" href="#symmetric-encryption">Symmetric Encryption</a></h2>
|
|
||||||
<h3 id="generate-key"><a class="header" href="#generate-key">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>
|
|
||||||
<pre><code class="language-js">import { generateSymmetricKey } from 'js-waku';
|
|
||||||
|
|
||||||
const symmetricKey = generateSymmetricKey();
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="encrypt-message"><a class="header" href="#encrypt-message">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="./relay_receive_send_messages.html">Receive and Send Messages Using Waku Relay</a> for details.</p>
|
|
||||||
<pre><code class="language-js">import { WakuMessage } from 'js-waku';
|
|
||||||
|
|
||||||
const message = await WakuMessage.fromBytes(payload, contentTopic, {
|
|
||||||
symKey: symmetricKey
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<p>The Waku Message can then be sent to the Waku network using Waku Relay or Waku Light Push:</p>
|
|
||||||
<pre><code class="language-js">await waku.lightPush.push(message);
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="decrypt-messages"><a class="header" href="#decrypt-messages">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>
|
|
||||||
<pre><code class="language-js">waku.addDecryptionKey(symmetricKey);
|
|
||||||
</code></pre>
|
|
||||||
<p>Alternatively, you can pass the key when creating the instance:</p>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
|
|
||||||
const waku = Waku.create({ decryptionKeys: [symmetricKey] });
|
|
||||||
</code></pre>
|
|
||||||
<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"><a class="header" href="#asymmetric-encryption">Asymmetric Encryption</a></h2>
|
|
||||||
<h3 id="generate-key-pair"><a class="header" href="#generate-key-pair">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>
|
|
||||||
<pre><code class="language-js">import { generatePrivateKey, getPublicKey } from 'js-waku';
|
|
||||||
|
|
||||||
const privateKey = generatePrivateKey();
|
|
||||||
const publicKey = getPublicKey(privateKey);
|
|
||||||
</code></pre>
|
|
||||||
<p>The private key must be securely stored and remain private.
|
|
||||||
If leaked then other parties may be able to decrypt the user'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"><a class="header" href="#encrypt-message-1">Encrypt Message</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="./relay_receive_send_messages.html">Receive and Send Messages Using Waku Relay</a> for details.</p>
|
|
||||||
<pre><code class="language-js">import { WakuMessage } from 'js-waku';
|
|
||||||
|
|
||||||
const message = await WakuMessage.fromBytes(payload, contentTopic, {
|
|
||||||
encPublicKey: publicKey
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<p>The Waku Message can then be sent to the Waku network using Waku Relay or Waku Light Push:</p>
|
|
||||||
<pre><code class="language-js">await waku.lightPush.push(message);
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="decrypt-messages-1"><a class="header" href="#decrypt-messages-1">Decrypt Messages</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>
|
|
||||||
<pre><code class="language-js">waku.addDecryptionKey(privateKey);
|
|
||||||
</code></pre>
|
|
||||||
<p>Alternatively, you can pass the key when creating the instance:</p>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
|
|
||||||
const waku = Waku.create({ decryptionKeys: [privateKey] });
|
|
||||||
</code></pre>
|
|
||||||
<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"><a class="header" href="#handling-wakumessage-instances">Handling <code>WakuMessage</code> 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>
|
|
||||||
<pre><code class="language-js">import { WakuMessage } from 'js-waku';
|
|
||||||
|
|
||||||
const message = await WakuMessage.fromBytes(payload, contentTopic, {
|
|
||||||
encPublicKey: publicKey
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log(message.payload); // This is encrypted
|
|
||||||
</code></pre>
|
|
||||||
<p>However, <code>WakuMessage</code> instances returned by <code>WakuRelay</code> or <code>WakuStore</code> are always decrypted.</p>
|
|
||||||
<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>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
|
|
||||||
const waku = Waku.create({ decryptionKeys: [privateKey] });
|
|
||||||
|
|
||||||
const messages = await waku.store.queryHistory([contentTopic]);
|
|
||||||
|
|
||||||
if (messages && messages[0]) {
|
|
||||||
console.log(messages[0].payload); // This payload is decrypted
|
|
||||||
}
|
|
||||||
|
|
||||||
waku.relay.addObserver((message) => {
|
|
||||||
console.log(message.payload); // This payload is decrypted
|
|
||||||
}, [contentTopic]);
|
|
||||||
</code></pre>
|
|
||||||
<h2 id="code-example"><a class="header" href="#code-example">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.
|
|
||||||
In this instance, the same key is used for all users: the Keccak-256 hash of the content topic (which results in 32 bytes array).
|
|
||||||
While this does not add functional value, it does demonstrate the usage of symmetric encryption in a web app.</p>
|
|
||||||
<p>A live version of Eth-PM can be found at https://status-im.github.io/js-waku/eth-pm/.</p>
|
|
||||||
<p>The specifications of the protocol it implements can be found at <a href="https://rfc.vac.dev/spec/20/">20/TOY-ETH-PM</a>.</p>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="../guides/store_retrieve_messages.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/reactjs_relay.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="../guides/store_retrieve_messages.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/reactjs_relay.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,217 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Guides - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="../favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="../favicon.png">
|
|
||||||
<link rel="stylesheet" href="../css/variables.css">
|
|
||||||
<link rel="stylesheet" href="../css/general.css">
|
|
||||||
<link rel="stylesheet" href="../css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="../css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../highlight.css">
|
|
||||||
<link rel="stylesheet" href="../tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="../ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "../";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="../quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="../guides/index.html" class="active"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="../guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="../guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="../guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="../examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="../waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="guides"><a class="header" href="#guides">Guides</a></h1>
|
|
||||||
<h2 id="waku-concepts"><a class="header" href="#waku-concepts">Waku Concepts</a></h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="choose_content_topic.html">How to Choose a Content Topic</a></li>
|
|
||||||
</ul>
|
|
||||||
<h2 id="javascript"><a class="header" href="#javascript">JavaScript</a></h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="relay_receive_send_messages.html">Receive and Send Messages Using Waku Relay</a></li>
|
|
||||||
<li><a href="store_retrieve_messages.html">Retrieve Messages Using Waku Store</a></li>
|
|
||||||
<li><a href="encrypt_messages_version_1.html">Encrypt Messages Using Waku Message Version 1</a></li>
|
|
||||||
<li><a href="light_push_send_messages.html">Send Messages Using Waku Light Push</a></li>
|
|
||||||
</ul>
|
|
||||||
<h2 id="reactjs"><a class="header" href="#reactjs">ReactJS</a></h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="reactjs_relay.html">Receive and Send Messages Using Waku Relay With ReactJS</a></li>
|
|
||||||
<li><a href="reactjs_store.html">Retrieve Messages Using Waku Store With ReactJS</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="../quick_start.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/choose_content_topic.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="../quick_start.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/choose_content_topic.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,257 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Send Messages Using Waku Light Push - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="../favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="../favicon.png">
|
|
||||||
<link rel="stylesheet" href="../css/variables.css">
|
|
||||||
<link rel="stylesheet" href="../css/general.css">
|
|
||||||
<link rel="stylesheet" href="../css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="../css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../highlight.css">
|
|
||||||
<link rel="stylesheet" href="../tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="../ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "../";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="../quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="../guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="../guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="../guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="../guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/light_push_send_messages.html" class="active"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="../examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="../waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="send-messages-using-waku-light-push"><a class="header" href="#send-messages-using-waku-light-push">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.
|
|
||||||
For example, when the connection drops easily, or it is connected to a small number of relay peers.</p>
|
|
||||||
<p>Waku Light Push allows a client to get a response from a remote peer when sending a message.
|
|
||||||
Note this only guarantees that the remote peer has received the message,
|
|
||||||
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's specifications on <a href="https://rfc.vac.dev/spec/19/">Vac RFC</a>.</p>
|
|
||||||
<h1 id="content-topic"><a class="header" href="#content-topic">Content Topic</a></h1>
|
|
||||||
<p>Before starting, you need to choose a <em>Content Topic</em> for your dApp.
|
|
||||||
Check out the <a href="./choose_content_topic.html">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"><a class="header" href="#installation">Installation</a></h1>
|
|
||||||
<p>You can install <a href="https://npmjs.com/package/js-waku">js-waku</a> using your favorite package manager:</p>
|
|
||||||
<pre><code class="language-shell">npm install js-waku
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="create-waku-instance"><a class="header" href="#create-waku-instance">Create Waku Instance</a></h1>
|
|
||||||
<p>In order to interact with the Waku network, you first need a Waku instance:</p>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
|
|
||||||
const wakuNode = await Waku.create({ bootstrap: true });
|
|
||||||
</code></pre>
|
|
||||||
<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>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
|
|
||||||
const waku = await Waku.create({
|
|
||||||
bootstrap: [
|
|
||||||
'/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm',
|
|
||||||
'/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ'
|
|
||||||
]
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="wait-to-be-connected"><a class="header" href="#wait-to-be-connected">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>
|
|
||||||
<pre><code class="language-js">await waku.waitForConnectedPeer();
|
|
||||||
</code></pre>
|
|
||||||
<p>The returned <code>Promise</code> will resolve once you are connected to a Waku peer.</p>
|
|
||||||
<h1 id="send-messages"><a class="header" href="#send-messages">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's connected peers.</p>
|
|
||||||
<p>If the dApp is not connected to any light push peer, an error is thrown.</p>
|
|
||||||
<pre><code class="language-ts">import {WakuMessage} from 'js-waku';
|
|
||||||
|
|
||||||
const wakuMessage = await WakuMessage.fromUtf8String('Here is a message', `/light-push-guide/1/guide/proto`);
|
|
||||||
|
|
||||||
const ack = await waku.lightPush.push(wakuMessage);
|
|
||||||
if (!ack?.isSuccess) {
|
|
||||||
// Message was not sent
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="../guides/reactjs_store.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../examples.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="../guides/reactjs_store.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../examples.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,446 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Receive and Send Messages Using Waku Relay With ReactJS - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="../favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="../favicon.png">
|
|
||||||
<link rel="stylesheet" href="../css/variables.css">
|
|
||||||
<link rel="stylesheet" href="../css/general.css">
|
|
||||||
<link rel="stylesheet" href="../css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="../css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../highlight.css">
|
|
||||||
<link rel="stylesheet" href="../tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="../ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "../";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="../quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="../guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="../guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="../guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="../guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_relay.html" class="active"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="../examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="../waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="receive-and-send-messages-using-waku-relay-with-reactjs"><a class="header" href="#receive-and-send-messages-using-waku-relay-with-reactjs">Receive and Send Messages Using Waku Relay With ReactJS</a></h1>
|
|
||||||
<p>It is easy to use DappConnect 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="./choose_content_topic.html">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"><a class="header" href="#setup">Setup</a></h1>
|
|
||||||
<p>Create a new React app:</p>
|
|
||||||
<pre><code class="language-shell">npx create-react-app min-react-js-chat
|
|
||||||
cd min-react-js-chat
|
|
||||||
</code></pre>
|
|
||||||
<p>Then, install <a href="https://npmjs.com/package/js-waku">js-waku</a>:</p>
|
|
||||||
<pre><code class="language-shell">npm install js-waku
|
|
||||||
</code></pre>
|
|
||||||
<p>Start the dev server and open the dApp in your browser:</p>
|
|
||||||
<pre><code class="language-shell">npm run start
|
|
||||||
</code></pre>
|
|
||||||
<p>Note: 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>
|
|
||||||
<pre><code class="language-shell">rm -rf node_modules package-lock.json
|
|
||||||
npm install
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="create-waku-instance"><a class="header" href="#create-waku-instance">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>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const [waku, setWaku] = React.useState(undefined);
|
|
||||||
const [wakuStatus, setWakuStatus] = React.useState('None');
|
|
||||||
|
|
||||||
// Start Waku
|
|
||||||
React.useEffect(() => {
|
|
||||||
// If Waku is already assigned, the job is done
|
|
||||||
if (!!waku) return;
|
|
||||||
// If Waku status not None, it means we are already starting Waku
|
|
||||||
if (wakuStatus !== 'None') return;
|
|
||||||
|
|
||||||
setWakuStatus('Starting');
|
|
||||||
|
|
||||||
// Create Waku
|
|
||||||
Waku.create({ bootstrap: true }).then((waku) => {
|
|
||||||
// Once done, put it in the state
|
|
||||||
setWaku(waku);
|
|
||||||
// And update the status
|
|
||||||
setWakuStatus('Started');
|
|
||||||
});
|
|
||||||
}, [waku, wakuStatus]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='App'>
|
|
||||||
<header className='App-header'>
|
|
||||||
// Display the status on the web page
|
|
||||||
<p>{wakuStatus}</p>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="wait-to-be-connected"><a class="header" href="#wait-to-be-connected">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>
|
|
||||||
<pre><code class="language-js">React.useEffect(() => {
|
|
||||||
if (!!waku) return;
|
|
||||||
if (wakuStatus !== 'None') return;
|
|
||||||
|
|
||||||
setWakuStatus('Starting');
|
|
||||||
|
|
||||||
Waku.create({ bootstrap: true }).then((waku) => {
|
|
||||||
setWaku(waku);
|
|
||||||
setWakuStatus('Connecting');
|
|
||||||
waku.waitForConnectedPeer().then(() => {
|
|
||||||
setWakuStatus('Ready');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}, [waku, wakuStatus]);
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="define-message-format"><a class="header" href="#define-message-format">Define Message Format</a></h1>
|
|
||||||
<p>To define the Protobuf message format,
|
|
||||||
use <a href="https://www.npmjs.com/package/protons">protons</a></p>
|
|
||||||
<pre><code class="language-shell">npm install protons
|
|
||||||
</code></pre>
|
|
||||||
<p>Define <code>SimpleChatMessage</code> with two fields: <code>timestamp</code> and <code>text</code>.</p>
|
|
||||||
<pre><code class="language-js">import protons from 'protons';
|
|
||||||
|
|
||||||
const proto = protons(`
|
|
||||||
message SimpleChatMessage {
|
|
||||||
uint64 timestamp = 1;
|
|
||||||
string text = 2;
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="send-messages"><a class="header" href="#send-messages">Send Messages</a></h1>
|
|
||||||
<p>Create a function that takes the Waku instance and a message to send:</p>
|
|
||||||
<pre><code class="language-js">import { WakuMessage } from 'js-waku';
|
|
||||||
|
|
||||||
const ContentTopic = `/min-react-js-chat/1/chat/proto`;
|
|
||||||
|
|
||||||
function sendMessage(message, timestamp, waku) {
|
|
||||||
const time = timestamp.getTime();
|
|
||||||
|
|
||||||
// Encode to protobuf
|
|
||||||
const payload = proto.SimpleChatMessage.encode({
|
|
||||||
timestamp: time,
|
|
||||||
text: message
|
|
||||||
});
|
|
||||||
|
|
||||||
// Wrap in a Waku Message
|
|
||||||
return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
|
|
||||||
// Send over Waku Relay
|
|
||||||
waku.relay.send(wakuMessage)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<p>Then, add a button to the <code>App</code> function:</p>
|
|
||||||
<pre><code class="language-js">function App() {
|
|
||||||
const [waku, setWaku] = React.useState(undefined);
|
|
||||||
const [wakuStatus, setWakuStatus] = React.useState('None');
|
|
||||||
// Using a counter just for the messages to be different
|
|
||||||
const [sendCounter, setSendCounter] = React.useState(0);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
// ... creates Waku
|
|
||||||
}, [waku, wakuStatus]);
|
|
||||||
|
|
||||||
const sendMessageOnClick = () => {
|
|
||||||
// Check Waku is started and connected first.
|
|
||||||
if (wakuStatus !== 'Ready') return;
|
|
||||||
|
|
||||||
sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
|
|
||||||
console.log('Message sent')
|
|
||||||
);
|
|
||||||
|
|
||||||
// For demonstration purposes.
|
|
||||||
setSendCounter(sendCounter + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="App">
|
|
||||||
<header className="App-header">
|
|
||||||
<p>{wakuStatus}</p>
|
|
||||||
<button onClick={sendMessageOnClick} disabled={wakuStatus !== 'Ready'}> // Grey the button is Waku is not yet ready.
|
|
||||||
Send Message
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="receive-messages"><a class="header" href="#receive-messages">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>
|
|
||||||
<pre><code class="language-js">const processIncomingMessage = React.useCallback((wakuMessage) => {
|
|
||||||
// Empty message?
|
|
||||||
if (!wakuMessage.payload) return;
|
|
||||||
|
|
||||||
// Decode the protobuf payload
|
|
||||||
const { timestamp, text } = proto.SimpleChatMessage.decode(
|
|
||||||
wakuMessage.payload
|
|
||||||
);
|
|
||||||
const time = new Date();
|
|
||||||
time.setTime(timestamp);
|
|
||||||
|
|
||||||
// For now, just log new messages on the console
|
|
||||||
console.log(`message received at ${time.toString()}: ${text}`);
|
|
||||||
}, []);
|
|
||||||
</code></pre>
|
|
||||||
<p>Then, add this observer to Waku Relay.
|
|
||||||
Do not forget to delete the observer is the component is being unmounted:</p>
|
|
||||||
<pre><code class="language-js">React.useEffect(() => {
|
|
||||||
if (!waku) return;
|
|
||||||
|
|
||||||
// Pass the content topic to only process messages related to your dApp
|
|
||||||
waku.relay.addObserver(processIncomingMessage, [ContentTopic]);
|
|
||||||
|
|
||||||
// `cleanUp` is called when the component is unmounted, see ReactJS doc.
|
|
||||||
return function cleanUp() {
|
|
||||||
waku.relay.deleteObserver(processIncomingMessage, [ContentTopic]);
|
|
||||||
};
|
|
||||||
}, [waku, wakuStatus, processIncomingMessage]);
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="display-messages"><a class="header" href="#display-messages">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's display received messages on the page.</p>
|
|
||||||
<p>First, add incoming messages to the state of the <code>App</code> component:</p>
|
|
||||||
<pre><code class="language-js">function App() {
|
|
||||||
//...
|
|
||||||
|
|
||||||
const [messages, setMessages] = React.useState([]);
|
|
||||||
|
|
||||||
const processIncomingMessage = React.useCallback((wakuMessage) => {
|
|
||||||
if (!wakuMessage.payload) return;
|
|
||||||
|
|
||||||
const { text, timestamp } = proto.SimpleChatMessage.decode(
|
|
||||||
wakuMessage.payload
|
|
||||||
);
|
|
||||||
|
|
||||||
const time = new Date();
|
|
||||||
time.setTime(timestamp);
|
|
||||||
const message = { text, timestamp: time };
|
|
||||||
|
|
||||||
setMessages((messages) => {
|
|
||||||
return [message].concat(messages);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// ...
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<p>Then, render the messages:</p>
|
|
||||||
<pre><code class="language-js">function App() {
|
|
||||||
// ...
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="App">
|
|
||||||
<header className="App-header">
|
|
||||||
<p>{wakuStatus}</p>
|
|
||||||
<button onClick={sendMessageOnClick} disabled={wakuStatus !== 'Ready'}>
|
|
||||||
Send Message
|
|
||||||
</button>
|
|
||||||
<ul>
|
|
||||||
{messages.map((msg) => {
|
|
||||||
return (
|
|
||||||
<li>
|
|
||||||
<p>
|
|
||||||
{msg.timestamp.toString()}: {msg.text}
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<p>And Voilà! You should now be able to send and receive messages.
|
|
||||||
Try out by opening the app from different browsers.</p>
|
|
||||||
<p>You can see the complete code in the <a href="https://github.com/status-im/js-waku/tree/main/examples/min-react-js-chat">Minimal ReactJS Chat App</a>.</p>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="../guides/encrypt_messages_version_1.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/reactjs_store.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="../guides/encrypt_messages_version_1.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/reactjs_store.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,425 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Retrieve Messages Using Waku Store With ReactJS - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="../favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="../favicon.png">
|
|
||||||
<link rel="stylesheet" href="../css/variables.css">
|
|
||||||
<link rel="stylesheet" href="../css/general.css">
|
|
||||||
<link rel="stylesheet" href="../css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="../css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../highlight.css">
|
|
||||||
<link rel="stylesheet" href="../tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="../ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "../";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="../quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="../guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="../guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="../guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="../guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_store.html" class="active"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="../examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="../waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="retrieve-messages-using-waku-store-with-reactjs"><a class="header" href="#retrieve-messages-using-waku-store-with-reactjs">Retrieve Messages Using Waku Store With ReactJS</a></h1>
|
|
||||||
<p>It is easy to use DappConnect with ReactJS.
|
|
||||||
In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.</p>
|
|
||||||
<p>DApps running on a phone or in a browser are often offline:
|
|
||||||
The browser could be closed or mobile app in the background.</p>
|
|
||||||
<p><a href="https://rfc.vac.dev/spec/18/">Waku Relay</a> 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 <strong>not</strong> save messages for later.</p>
|
|
||||||
<p>However, <a href="https://rfc.vac.dev/spec/13/">Waku Store</a> peers do save messages they relay,
|
|
||||||
allowing you to retrieve them at a later time.
|
|
||||||
The Waku Store protocol is best-effort and does not guarantee data availability.
|
|
||||||
Waku Relay should still be preferred when online;
|
|
||||||
Waku Store can be used after resuming connectivity:
|
|
||||||
For example, when the dApp starts.</p>
|
|
||||||
<p>In this guide, we'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="./choose_content_topic.html">how to choose a content topic guide</a> to learn more about content topics.</p>
|
|
||||||
<h1 id="setup"><a class="header" href="#setup">Setup</a></h1>
|
|
||||||
<p>Create a new React app:</p>
|
|
||||||
<pre><code class="language-shell">npx create-react-app my-app
|
|
||||||
cd my-app
|
|
||||||
</code></pre>
|
|
||||||
<p>Then, install <a href="https://npmjs.com/package/js-waku">js-waku</a>:</p>
|
|
||||||
<pre><code class="language-shell">npm install js-waku
|
|
||||||
</code></pre>
|
|
||||||
<p>Start the dev server and open the dApp in your browser:</p>
|
|
||||||
<pre><code class="language-shell">npm run start
|
|
||||||
</code></pre>
|
|
||||||
<p>Note: 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>
|
|
||||||
<pre><code class="language-shell">rm -rf node_modules package-lock.json
|
|
||||||
npm install
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="create-waku-instance"><a class="header" href="#create-waku-instance">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>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const [waku, setWaku] = React.useState(undefined);
|
|
||||||
const [wakuStatus, setWakuStatus] = React.useState('None');
|
|
||||||
|
|
||||||
// Start Waku
|
|
||||||
React.useEffect(() => {
|
|
||||||
// If Waku status not None, it means we are already starting Waku
|
|
||||||
if (wakuStatus !== 'None') return;
|
|
||||||
|
|
||||||
setWakuStatus('Starting');
|
|
||||||
|
|
||||||
// Create Waku
|
|
||||||
Waku.create({ bootstrap: true }).then((waku) => {
|
|
||||||
// Once done, put it in the state
|
|
||||||
setWaku(waku);
|
|
||||||
// And update the status
|
|
||||||
setWakuStatus('Connecting');
|
|
||||||
});
|
|
||||||
}, [waku, wakuStatus]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='App'>
|
|
||||||
<header className='App-header'>
|
|
||||||
// Display the status on the web page
|
|
||||||
<p>{wakuStatus}</p>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="wait-to-be-connected"><a class="header" href="#wait-to-be-connected">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>
|
|
||||||
<pre><code class="language-js">React.useEffect(() => {
|
|
||||||
if (!waku) return;
|
|
||||||
|
|
||||||
if (wakuStatus === 'Connected') return;
|
|
||||||
|
|
||||||
waku.waitForConnectedPeer().then(() => {
|
|
||||||
setWakuStatus('Connected');
|
|
||||||
});
|
|
||||||
}, [waku, wakuStatus]);
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="use-protobuf"><a class="header" href="#use-protobuf">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'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>
|
|
||||||
<pre><code class="language-js">{
|
|
||||||
timestamp: Date;
|
|
||||||
nick: string;
|
|
||||||
text: string;
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<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"><a class="header" href="#install-protobuf-library">Install Protobuf Library</a></h2>
|
|
||||||
<pre><code class="language-shell">npm install protons
|
|
||||||
</code></pre>
|
|
||||||
<h2 id="protobuf-definition"><a class="header" href="#protobuf-definition">Protobuf Definition</a></h2>
|
|
||||||
<p>Define the data structure with protons:</p>
|
|
||||||
<pre><code class="language-js">import protons from 'protons';
|
|
||||||
|
|
||||||
const proto = protons(`
|
|
||||||
message ChatMessage {
|
|
||||||
uint64 timestamp = 1;
|
|
||||||
string nick = 2;
|
|
||||||
bytes text = 3;
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
</code></pre>
|
|
||||||
<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"><a class="header" href="#decode-messages">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>
|
|
||||||
<pre><code class="language-js">function decodeMessage(wakuMessage) {
|
|
||||||
if (!wakuMessage.payload) return;
|
|
||||||
|
|
||||||
const { timestamp, nick, text } = proto.ChatMessage.decode(
|
|
||||||
wakuMessage.payload
|
|
||||||
);
|
|
||||||
|
|
||||||
// All fields in protobuf are optional so be sure to check
|
|
||||||
if (!timestamp || !text || !nick) return;
|
|
||||||
|
|
||||||
const time = new Date();
|
|
||||||
time.setTime(timestamp);
|
|
||||||
|
|
||||||
const utf8Text = Buffer.from(text).toString('utf-8');
|
|
||||||
|
|
||||||
return { text: utf8Text, timestamp: time, nick };
|
|
||||||
}
|
|
||||||
|
|
||||||
</code></pre>
|
|
||||||
<h2 id="retrieve-messages"><a class="header" href="#retrieve-messages">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>
|
|
||||||
<pre><code class="language-js">function App() {
|
|
||||||
const [messages, setMessages] = React.useState([]);
|
|
||||||
/// [..]
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<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>
|
|
||||||
<pre><code class="language-js">const processMessages = (retrievedMessages) => {
|
|
||||||
const messages = retrievedMessages.map(decodeMessage).filter(Boolean);
|
|
||||||
|
|
||||||
setMessages((currentMessages) => {
|
|
||||||
return currentMessages.concat(messages.reverse());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</code></pre>
|
|
||||||
<p>Finally, pass <code>processMessage</code> in <code>WakuStore.queryHistory</code> as the <code>callback</code> value:</p>
|
|
||||||
<pre><code class="language-js">waku.store
|
|
||||||
.queryHistory([ContentTopic], { callback: processMessages });
|
|
||||||
</code></pre>
|
|
||||||
<p>All together, you should now have:</p>
|
|
||||||
<pre><code class="language-js">const ContentTopic = '/toy-chat/2/huilong/proto';
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
// [..]
|
|
||||||
// Store messages in the state
|
|
||||||
const [messages, setMessages] = React.useState([]);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (wakuStatus !== 'Connected') return;
|
|
||||||
|
|
||||||
const processMessages = (retrievedMessages) => {
|
|
||||||
const messages = retrievedMessages.map(decodeMessage).filter(Boolean);
|
|
||||||
|
|
||||||
setMessages((currentMessages) => {
|
|
||||||
return currentMessages.concat(messages.reverse());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
waku.store
|
|
||||||
.queryHistory([ContentTopic], { callback: processMessages })
|
|
||||||
.catch((e) => {
|
|
||||||
console.log('Failed to retrieve messages', e);
|
|
||||||
});
|
|
||||||
}, [waku, wakuStatus]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='App'>
|
|
||||||
<header className='App-header'>
|
|
||||||
<h2>{wakuStatus}</h2>
|
|
||||||
<h3>Messages</h3>
|
|
||||||
<ul>
|
|
||||||
<Messages messages={messages} />
|
|
||||||
</ul>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
</code></pre>
|
|
||||||
<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"><a class="header" href="#filter-messages-by-send-time">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.
|
|
||||||
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>
|
|
||||||
<pre><code class="language-js">const startTime = new Date();
|
|
||||||
// 7 days/week, 24 hours/day, 60min/hour, 60secs/min, 100ms/sec
|
|
||||||
startTime.setTime(startTime.getTime() - 7 * 24 * 60 * 60 * 1000);
|
|
||||||
|
|
||||||
waku.store
|
|
||||||
.queryHistory([ContentTopic], {
|
|
||||||
callback: processMessages,
|
|
||||||
timeFilter: { startTime, endTime: new Date() }
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<h2 id="end-result"><a class="header" href="#end-result">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>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="../guides/reactjs_relay.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/light_push_send_messages.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="../guides/reactjs_relay.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/light_push_send_messages.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,356 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Receive and Send Messages Using Waku Relay - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="../favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="../favicon.png">
|
|
||||||
<link rel="stylesheet" href="../css/variables.css">
|
|
||||||
<link rel="stylesheet" href="../css/general.css">
|
|
||||||
<link rel="stylesheet" href="../css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="../css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../highlight.css">
|
|
||||||
<link rel="stylesheet" href="../tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="../ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "../";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="../quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="../guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="../guides/relay_receive_send_messages.html" class="active"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="../guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="../guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="../examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="../waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="receive-and-send-messages-using-waku-relay"><a class="header" href="#receive-and-send-messages-using-waku-relay">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'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="./choose_content_topic.html">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"><a class="header" href="#installation">Installation</a></h1>
|
|
||||||
<p>You can install <a href="https://npmjs.com/package/js-waku">js-waku</a> using your favorite package manager:</p>
|
|
||||||
<pre><code class="language-shell">npm install js-waku
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="create-waku-instance"><a class="header" href="#create-waku-instance">Create Waku Instance</a></h1>
|
|
||||||
<p>In order to interact with the Waku network, you first need a Waku instance:</p>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
|
|
||||||
const waku = await Waku.create({ bootstrap: true });
|
|
||||||
</code></pre>
|
|
||||||
<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>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
|
|
||||||
const waku = await Waku.create({
|
|
||||||
bootstrap: [
|
|
||||||
'/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm',
|
|
||||||
'/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ'
|
|
||||||
]
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="wait-to-be-connected"><a class="header" href="#wait-to-be-connected">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>
|
|
||||||
<pre><code class="language-js">await waku.waitForConnectedPeer();
|
|
||||||
</code></pre>
|
|
||||||
<p>The returned <code>Promise</code> will resolve once you are connected to a Waku Relay peer.</p>
|
|
||||||
<h1 id="receive-messages"><a class="header" href="#receive-messages">Receive messages</a></h1>
|
|
||||||
<p>To receive messages for your app,
|
|
||||||
you need to register an observer on relay for your app's content topic:</p>
|
|
||||||
<pre><code class="language-js">const processIncomingMessage = (wakuMessage) => {
|
|
||||||
console.log(`Message Received: ${wakuMessage.payloadAsUtf8}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
waku.relay.addObserver(processIncomingMessage, ['/relay-guide/1/chat/proto']);
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="send-messages"><a class="header" href="#send-messages">Send Messages</a></h1>
|
|
||||||
<p>You are now ready to send messages.
|
|
||||||
Let's start by sending simple strings as messages.</p>
|
|
||||||
<p>To send a message, you need to wrap the message in a <code>WakuMessage</code>.
|
|
||||||
When using a basic string payload, you can use the <code>WakuMessage.fromUtf8String</code> helper:</p>
|
|
||||||
<pre><code class="language-js">import { WakuMessage } from 'js-waku';
|
|
||||||
|
|
||||||
const wakuMessage = await WakuMessage.fromUtf8String('Here is a message', `/relay-guide/1/chat/proto`);
|
|
||||||
</code></pre>
|
|
||||||
<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>
|
|
||||||
<pre><code class="language-js">await waku.relay.send(wakuMessage);
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="use-protobuf"><a class="header" href="#use-protobuf">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'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>
|
|
||||||
<pre><code class="language-js">{
|
|
||||||
timestamp: Date;
|
|
||||||
text: string;
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<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"><a class="header" href="#install-protobuf-library">Install Protobuf Library</a></h2>
|
|
||||||
<p>First, install protons:</p>
|
|
||||||
<pre><code class="language-shell">npm install protons
|
|
||||||
</code></pre>
|
|
||||||
<h2 id="protobuf-definition"><a class="header" href="#protobuf-definition">Protobuf Definition</a></h2>
|
|
||||||
<p>Then define the simple chat message:</p>
|
|
||||||
<pre><code class="language-js">import protons from 'protons';
|
|
||||||
|
|
||||||
const proto = protons(`
|
|
||||||
message SimpleChatMessage {
|
|
||||||
uint64 timestamp = 1;
|
|
||||||
string text = 2;
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
</code></pre>
|
|
||||||
<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"><a class="header" href="#encode-messages">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>
|
|
||||||
<pre><code class="language-js">const payload = proto.SimpleChatMessage.encode({
|
|
||||||
timestamp: Date.now(),
|
|
||||||
text: 'Here is a message'
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<p>Then, wrap it in a Waku Message:</p>
|
|
||||||
<pre><code class="language-js">const wakuMessage = await WakuMessage.fromBytes(payload, ContentTopic);
|
|
||||||
</code></pre>
|
|
||||||
<p>Now, you can send the message over Waku Relay the same way than before:</p>
|
|
||||||
<pre><code class="language-js">await waku.relay.send(wakuMessage);
|
|
||||||
</code></pre>
|
|
||||||
<h2 id="decode-messages"><a class="header" href="#decode-messages">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>
|
|
||||||
<pre><code class="language-js">const processIncomingMessage = (wakuMessage) => {
|
|
||||||
// No need to attempt to decode a message if the payload is absent
|
|
||||||
if (!wakuMessage.payload) return;
|
|
||||||
|
|
||||||
const { timestamp, text } = proto.SimpleChatMessage.decode(
|
|
||||||
wakuMessage.payload
|
|
||||||
);
|
|
||||||
|
|
||||||
console.log(`Message Received: ${text}, sent at ${timestamp.toString()}`);
|
|
||||||
};
|
|
||||||
</code></pre>
|
|
||||||
<p>Like before, add this callback as an observer to Waku Relay:</p>
|
|
||||||
<pre><code class="language-js">waku.relay.addObserver(processIncomingMessage, ['/relay-guide/1/chat/proto']);
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="conclusion"><a class="header" href="#conclusion">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>Feel free to check out other <a href="./">guides</a> or <a href="/examples.html">examples</a>.</p>
|
|
||||||
<p>Here is the final code:</p>
|
|
||||||
<pre><code class="language-js">import { getBootstrapNodes, Waku, WakuMessage } from 'js-waku';
|
|
||||||
import protons from 'protons';
|
|
||||||
|
|
||||||
const proto = protons(`
|
|
||||||
message SimpleChatMessage {
|
|
||||||
uint64 timestamp = 1;
|
|
||||||
string text = 2;
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
|
|
||||||
const wakuNode = await Waku.create();
|
|
||||||
|
|
||||||
const nodes = await getBootstrapNodes();
|
|
||||||
await Promise.all(nodes.map((addr) => waku.dial(addr)));
|
|
||||||
|
|
||||||
const processIncomingMessage = (wakuMessage) => {
|
|
||||||
// No need to attempt to decode a message if the payload is absent
|
|
||||||
if (!wakuMessage.payload) return;
|
|
||||||
|
|
||||||
const { timestamp, text } = proto.SimpleChatMessage.decode(
|
|
||||||
wakuMessage.payload
|
|
||||||
);
|
|
||||||
|
|
||||||
console.log(`Message Received: ${text}, sent at ${timestamp.toString()}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
waku.relay.addObserver(processIncomingMessage, ['/relay-guide/1/chat/proto']);
|
|
||||||
|
|
||||||
const payload = proto.SimpleChatMessage.encode({
|
|
||||||
timestamp: Date.now(),
|
|
||||||
text: 'Here is a message'
|
|
||||||
});
|
|
||||||
const wakuMessage = await WakuMessage.fromBytes(payload, ContentTopic);
|
|
||||||
await waku.relay.send(wakuMessage);
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="../guides/choose_content_topic.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/store_retrieve_messages.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="../guides/choose_content_topic.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/store_retrieve_messages.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,345 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Retrieve Messages Using Waku Store - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="../favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="../favicon.png">
|
|
||||||
<link rel="stylesheet" href="../css/variables.css">
|
|
||||||
<link rel="stylesheet" href="../css/general.css">
|
|
||||||
<link rel="stylesheet" href="../css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="../css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../highlight.css">
|
|
||||||
<link rel="stylesheet" href="../tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="../ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="../custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "../";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="../quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="../guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="../guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="../guides/store_retrieve_messages.html" class="active"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="../guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="../guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="../examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="../waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="retrieve-messages-using-waku-store"><a class="header" href="#retrieve-messages-using-waku-store">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.
|
|
||||||
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 <strong>not</strong> save messages for later.</p>
|
|
||||||
<p>However, <a href="https://rfc.vac.dev/spec/13/">Waku Store</a> peers do save messages they relay,
|
|
||||||
allowing you to retrieve them at a later time.
|
|
||||||
The Waku Store protocol is best-effort and does not guarantee data availability.
|
|
||||||
Waku Relay should still be preferred when online;
|
|
||||||
Waku Store can be used after resuming connectivity:
|
|
||||||
For example, when the dApp starts.</p>
|
|
||||||
<p>In this guide, we'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="./choose_content_topic.html">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"><a class="header" href="#installation">Installation</a></h1>
|
|
||||||
<p>You can install <a href="https://npmjs.com/package/js-waku">js-waku</a> using your favorite package manager:</p>
|
|
||||||
<pre><code class="language-shell">npm install js-waku
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="create-waku-instance"><a class="header" href="#create-waku-instance">Create Waku Instance</a></h1>
|
|
||||||
<p>In order to interact with the Waku network, you first need a Waku instance:</p>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
|
|
||||||
const wakuNode = await Waku.create({ bootstrap: true });
|
|
||||||
</code></pre>
|
|
||||||
<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>
|
|
||||||
<pre><code class="language-js">import { Waku } from 'js-waku';
|
|
||||||
|
|
||||||
const wakuNode = await Waku.create({
|
|
||||||
bootstrap: [
|
|
||||||
'/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm',
|
|
||||||
'/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ'
|
|
||||||
]
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<h1 id="wait-to-be-connected"><a class="header" href="#wait-to-be-connected">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>
|
|
||||||
<pre><code class="language-js">await waku.waitForConnectedPeer();
|
|
||||||
</code></pre>
|
|
||||||
<p>The returned Promise will resolve once you are connected to a Waku Store peer.</p>
|
|
||||||
<h1 id="use-protobuf"><a class="header" href="#use-protobuf">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'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>
|
|
||||||
<pre><code class="language-js">{
|
|
||||||
date: Date;
|
|
||||||
title: string;
|
|
||||||
body: string;
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<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"><a class="header" href="#install-protobuf-library">Install Protobuf Library</a></h2>
|
|
||||||
<p>First, install protons:</p>
|
|
||||||
<pre><code class="language-shell">npm install protons
|
|
||||||
</code></pre>
|
|
||||||
<h2 id="protobuf-definition"><a class="header" href="#protobuf-definition">Protobuf Definition</a></h2>
|
|
||||||
<p>Then specify the data structure:</p>
|
|
||||||
<pre><code class="language-js">import protons from 'protons';
|
|
||||||
|
|
||||||
const proto = protons(`
|
|
||||||
message ArticleMessage {
|
|
||||||
uint64 date = 1;
|
|
||||||
string title = 2;
|
|
||||||
string body = 3;
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
</code></pre>
|
|
||||||
<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"><a class="header" href="#decode-messages">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>
|
|
||||||
<pre><code class="language-js">const decodeWakuMessage = (wakuMessage) => {
|
|
||||||
// No need to attempt to decode a message if the payload is absent
|
|
||||||
if (!wakuMessage.payload) return;
|
|
||||||
|
|
||||||
const { date, title, body } = proto.SimpleChatMessage.decode(
|
|
||||||
wakuMessage.payload
|
|
||||||
);
|
|
||||||
|
|
||||||
// In protobuf, fields are optional so best to check
|
|
||||||
if (!date || !title || !body) return;
|
|
||||||
|
|
||||||
const publishDate = new Date();
|
|
||||||
publishDate.setTime(date);
|
|
||||||
|
|
||||||
return { publishDate, title, body };
|
|
||||||
};
|
|
||||||
</code></pre>
|
|
||||||
<h2 id="retrieve-messages"><a class="header" href="#retrieve-messages">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>
|
|
||||||
<pre><code class="language-js">const ContentTopic = '/store-guide/1/news/proto';
|
|
||||||
|
|
||||||
const callback = (retrievedMessages) => {
|
|
||||||
const articles = retrievedMessages
|
|
||||||
.map(decodeWakuMessage) // Decode messages
|
|
||||||
.filter(Boolean); // Filter out undefined values
|
|
||||||
|
|
||||||
console.log(`${articles.length} articles have been retrieved`);
|
|
||||||
};
|
|
||||||
|
|
||||||
waku.store
|
|
||||||
.queryHistory([ContentTopic], { callback })
|
|
||||||
.catch((e) => {
|
|
||||||
// Catch any potential error
|
|
||||||
console.log('Failed to retrieve messages from store', e);
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<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"><a class="header" href="#filter-messages-by-send-time">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.
|
|
||||||
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>
|
|
||||||
<pre><code class="language-js">// [..] `ContentTopic` and `callback` definitions
|
|
||||||
|
|
||||||
const startTime = new Date();
|
|
||||||
// 7 days/week, 24 hours/day, 60min/hour, 60secs/min, 100ms/sec
|
|
||||||
startTime.setTime(startTime.getTime() - 7 * 24 * 60 * 60 * 1000);
|
|
||||||
|
|
||||||
waku.store
|
|
||||||
.queryHistory([ContentTopic], {
|
|
||||||
callback,
|
|
||||||
timeFilter: { startTime, endTime: new Date() }
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
console.log('Failed to retrieve messages from store', e);
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<h2 id="end-result"><a class="header" href="#end-result">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>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="../guides/relay_receive_send_messages.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/encrypt_messages_version_1.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="../guides/relay_receive_send_messages.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="../guides/encrypt_messages_version_1.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
/*
|
|
||||||
* An increased contrast highlighting scheme loosely based on the
|
|
||||||
* "Base16 Atelier Dune Light" theme by Bram de Haan
|
|
||||||
* (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)
|
|
||||||
* Original Base16 color scheme by Chris Kempson
|
|
||||||
* (https://github.com/chriskempson/base16)
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Comment */
|
|
||||||
.hljs-comment,
|
|
||||||
.hljs-quote {
|
|
||||||
color: #575757;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Red */
|
|
||||||
.hljs-variable,
|
|
||||||
.hljs-template-variable,
|
|
||||||
.hljs-attribute,
|
|
||||||
.hljs-tag,
|
|
||||||
.hljs-name,
|
|
||||||
.hljs-regexp,
|
|
||||||
.hljs-link,
|
|
||||||
.hljs-name,
|
|
||||||
.hljs-selector-id,
|
|
||||||
.hljs-selector-class {
|
|
||||||
color: #d70025;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Orange */
|
|
||||||
.hljs-number,
|
|
||||||
.hljs-meta,
|
|
||||||
.hljs-built_in,
|
|
||||||
.hljs-builtin-name,
|
|
||||||
.hljs-literal,
|
|
||||||
.hljs-type,
|
|
||||||
.hljs-params {
|
|
||||||
color: #b21e00;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Green */
|
|
||||||
.hljs-string,
|
|
||||||
.hljs-symbol,
|
|
||||||
.hljs-bullet {
|
|
||||||
color: #008200;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Blue */
|
|
||||||
.hljs-title,
|
|
||||||
.hljs-section {
|
|
||||||
color: #0030f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Purple */
|
|
||||||
.hljs-keyword,
|
|
||||||
.hljs-selector-tag {
|
|
||||||
color: #9d00ec;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs {
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
background: #f6f7f6;
|
|
||||||
color: #000;
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-emphasis {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-addition {
|
|
||||||
color: #22863a;
|
|
||||||
background-color: #f0fff4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-deletion {
|
|
||||||
color: #b31d28;
|
|
||||||
background-color: #ffeef0;
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
214
index.html
214
index.html
|
|
@ -1,214 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Introduction - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="favicon.png">
|
|
||||||
<link rel="stylesheet" href="css/variables.css">
|
|
||||||
<link rel="stylesheet" href="css/general.css">
|
|
||||||
<link rel="stylesheet" href="css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="highlight.css">
|
|
||||||
<link rel="stylesheet" href="tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="dappconnect-docs"><a class="header" href="#dappconnect-docs">DappConnect Docs</a></h1>
|
|
||||||
<p>DappConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
|
|
||||||
<p>Waku is a decentralized, censorship-resistant, network and protocol family.
|
|
||||||
It enables you to add communication features to your dApp in a decentralized manner,
|
|
||||||
ensuring to your users that they will not be censored or de-platformed.</p>
|
|
||||||
<p>Waku can be used for chat purposes and for many machine-to-machine use cases.
|
|
||||||
You can learn more about Waku at <a href="https://waku.vac.dev">waku.vac.dev</a>.</p>
|
|
||||||
<p>JS-Waku is the TypeScript implementation of the Waku protocol,
|
|
||||||
built for browser environment.</p>
|
|
||||||
<p>The <a href="./quick_start.html">quick start</a> presents an easy way to send and receive messages using js-waku.</p>
|
|
||||||
<p>The <a href="./guides">guides</a> explain specific js-waku features
|
|
||||||
and how it can be used with popular web frameworks.</p>
|
|
||||||
<p>The js-waku repository also holds a number of <a href="https://github.com/status-im/js-waku/tree/main/examples">examples</a>.
|
|
||||||
The examples are working Proof-of-Concepts that demonstrate how to use js-waku.
|
|
||||||
Check out the <a href="./examples.html">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"><a class="header" href="#bugs-questions--support">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>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
|
|
||||||
<a rel="next" href="quick_start.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
|
|
||||||
<a rel="next" href="quick_start.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -0,0 +1,166 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Introduction on DappConnect Docs</title>
|
||||||
|
<link>https://docs.dappconnect.dev/</link>
|
||||||
|
<description>Recent content in Introduction on DappConnect 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.dappconnect.dev/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>How to Choose a Content Topic</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/01_choose_content_topic/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/guides/01_choose_content_topic/</guid>
|
||||||
|
<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}
|
||||||
|
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.</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Introduction</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/introduction/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/introduction/</guid>
|
||||||
|
<description>DappConnect Docs DappConnect 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>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Quick Start</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/quick_start/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/quick_start/</guid>
|
||||||
|
<description>Quick Start In this section you will learn how to receive and send messages using Waku Relay.
|
||||||
|
A more in depth guide for Waku Relay can be found here.
|
||||||
|
Install Install the js-waku package:
|
||||||
|
npm install js-waku # or with yarn yarn add js-waku Start a waku node import { Waku } from &#39;js-waku&#39;; const waku = await Waku.create({ bootstrap: true }); Listen for messages The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Receive and Send Messages Using Waku Relay</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/02_relay_receive_send_messages/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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&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>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Retrieve Messages Using Waku Store</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/03_store_retrieve_messages/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Encrypt Messages Using Waku Message Version 1</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/04_encrypt_messages_version_1/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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.
|
||||||
|
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>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Examples</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/examples/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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.
|
||||||
|
Demonstrates:
|
||||||
|
Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App Repo: store-reactjs-chat.
|
||||||
|
Demonstrates:
|
||||||
|
Waku Store React/JavaScript Protobuf using protons Vanilla Javascript Using Minified Library Repo: unpkg-js-store.
|
||||||
|
Demonstrates:
|
||||||
|
How to stop retrieving results from Waku Store on condition Use minified bundle from Unpkg.</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Cryptographic Libraries</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/crypto_libraries/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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&rsquo; crypto module.</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Sign Messages Using Waku Message Version 1</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/05_sign_messages_version_1/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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.
|
||||||
|
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>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Implemented Waku Protocols</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/waku_protocols/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/waku_protocols/</guid>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Send Messages Using Waku Light Push</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/06_light_push_send_messages/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.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.
|
||||||
|
The Waku Relay protocol sends messages to connected peers but does not provide any information on whether said peers have received messages. This can be an issue when facing potential connectivity issues. For example, when the connection drops easily, or it is connected to a small number of relay peers.</description>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Receive and Send Messages Using Waku Relay With ReactJS</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/07_reactjs_relay/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/guides/07_reactjs_relay/</guid>
|
||||||
|
<description>Receive and Send Messages Using Waku Relay With ReactJS It is easy to use DappConnect 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>
|
||||||
|
|
||||||
|
<item>
|
||||||
|
<title>Retrieve Messages Using Waku Store With ReactJS</title>
|
||||||
|
<link>https://docs.dappconnect.dev/docs/guides/08_reactjs_store/</link>
|
||||||
|
<pubDate>Thu, 09 Dec 2021 14:00:00 +0100</pubDate>
|
||||||
|
|
||||||
|
<guid>https://docs.dappconnect.dev/docs/guides/08_reactjs_store/</guid>
|
||||||
|
<description>Retrieve Messages Using Waku Store With ReactJS It is easy to use DappConnect 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>
|
||||||
|
|
@ -1,214 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Introduction - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="favicon.png">
|
|
||||||
<link rel="stylesheet" href="css/variables.css">
|
|
||||||
<link rel="stylesheet" href="css/general.css">
|
|
||||||
<link rel="stylesheet" href="css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="highlight.css">
|
|
||||||
<link rel="stylesheet" href="tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="introduction.html" class="active">Introduction</a></li><li class="chapter-item expanded "><a href="quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="dappconnect-docs"><a class="header" href="#dappconnect-docs">DappConnect Docs</a></h1>
|
|
||||||
<p>DappConnect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.</p>
|
|
||||||
<p>Waku is a decentralized, censorship-resistant, network and protocol family.
|
|
||||||
It enables you to add communication features to your dApp in a decentralized manner,
|
|
||||||
ensuring to your users that they will not be censored or de-platformed.</p>
|
|
||||||
<p>Waku can be used for chat purposes and for many machine-to-machine use cases.
|
|
||||||
You can learn more about Waku at <a href="https://waku.vac.dev">waku.vac.dev</a>.</p>
|
|
||||||
<p>JS-Waku is the TypeScript implementation of the Waku protocol,
|
|
||||||
built for browser environment.</p>
|
|
||||||
<p>The <a href="./quick_start.html">quick start</a> presents an easy way to send and receive messages using js-waku.</p>
|
|
||||||
<p>The <a href="./guides">guides</a> explain specific js-waku features
|
|
||||||
and how it can be used with popular web frameworks.</p>
|
|
||||||
<p>The js-waku repository also holds a number of <a href="https://github.com/status-im/js-waku/tree/main/examples">examples</a>.
|
|
||||||
The examples are working Proof-of-Concepts that demonstrate how to use js-waku.
|
|
||||||
Check out the <a href="./examples.html">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"><a class="header" href="#bugs-questions--support">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>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
|
|
||||||
<a rel="next" href="quick_start.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
|
|
||||||
<a rel="next" href="quick_start.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because one or more lines are too long
1374
print.html
1374
print.html
File diff suppressed because it is too large
Load Diff
234
quick_start.html
234
quick_start.html
|
|
@ -1,234 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Quick Start - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="favicon.png">
|
|
||||||
<link rel="stylesheet" href="css/variables.css">
|
|
||||||
<link rel="stylesheet" href="css/general.css">
|
|
||||||
<link rel="stylesheet" href="css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="highlight.css">
|
|
||||||
<link rel="stylesheet" href="tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="quick_start.html" class="active"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="waku_protocols.html">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h1 id="quick-start"><a class="header" href="#quick-start">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="guides/relay_receive_send_messages.html">here</a>.</p>
|
|
||||||
<h2 id="install"><a class="header" href="#install">Install</a></h2>
|
|
||||||
<p>Install the <code>js-waku</code> package:</p>
|
|
||||||
<pre><code class="language-shell">npm install js-waku
|
|
||||||
# or with yarn
|
|
||||||
yarn add js-waku
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="start-a-waku-node"><a class="header" href="#start-a-waku-node">Start a waku node</a></h3>
|
|
||||||
<pre><code class="language-ts">import { Waku } from 'js-waku';
|
|
||||||
|
|
||||||
const waku = await Waku.create({ bootstrap: true });
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="listen-for-messages"><a class="header" href="#listen-for-messages">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="guides/choose_content_topic.html">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>
|
|
||||||
<pre><code class="language-ts">waku.relay.addObserver((msg) => {
|
|
||||||
console.log("Message received:", msg.payloadAsUtf8)
|
|
||||||
}, ["/my-cool-app/1/my-use-case/proto"]);
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="send-messages"><a class="header" href="#send-messages">Send messages</a></h3>
|
|
||||||
<p>Messages are wrapped in a <code>WakuMessage</code> envelop.</p>
|
|
||||||
<pre><code class="language-ts">import { WakuMessage } from 'js-waku';
|
|
||||||
|
|
||||||
const msg = await WakuMessage.fromUtf8String("Here is a message!", "/my-cool-app/1/my-use-case/proto")
|
|
||||||
await waku.relay.send(msg);
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="building-an-app"><a class="header" href="#building-an-app">Building an app</a></h3>
|
|
||||||
<p>Check out the <a href="./guides/reactjs_relay.html">ReactJS Waku Relay guide</a> to learn how you can use the code above in a React app. </p>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="introduction.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="guides/index.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="introduction.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a rel="next" href="guides/index.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
||||||
<i class="fa fa-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
483
searcher.js
483
searcher.js
|
|
@ -1,483 +0,0 @@
|
||||||
"use strict";
|
|
||||||
window.search = window.search || {};
|
|
||||||
(function search(search) {
|
|
||||||
// Search functionality
|
|
||||||
//
|
|
||||||
// You can use !hasFocus() to prevent keyhandling in your key
|
|
||||||
// event handlers while the user is typing their search.
|
|
||||||
|
|
||||||
if (!Mark || !elasticlunr) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
//IE 11 Compatibility from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
|
|
||||||
if (!String.prototype.startsWith) {
|
|
||||||
String.prototype.startsWith = function(search, pos) {
|
|
||||||
return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
var search_wrap = document.getElementById('search-wrapper'),
|
|
||||||
searchbar = document.getElementById('searchbar'),
|
|
||||||
searchbar_outer = document.getElementById('searchbar-outer'),
|
|
||||||
searchresults = document.getElementById('searchresults'),
|
|
||||||
searchresults_outer = document.getElementById('searchresults-outer'),
|
|
||||||
searchresults_header = document.getElementById('searchresults-header'),
|
|
||||||
searchicon = document.getElementById('search-toggle'),
|
|
||||||
content = document.getElementById('content'),
|
|
||||||
|
|
||||||
searchindex = null,
|
|
||||||
doc_urls = [],
|
|
||||||
results_options = {
|
|
||||||
teaser_word_count: 30,
|
|
||||||
limit_results: 30,
|
|
||||||
},
|
|
||||||
search_options = {
|
|
||||||
bool: "AND",
|
|
||||||
expand: true,
|
|
||||||
fields: {
|
|
||||||
title: {boost: 1},
|
|
||||||
body: {boost: 1},
|
|
||||||
breadcrumbs: {boost: 0}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mark_exclude = [],
|
|
||||||
marker = new Mark(content),
|
|
||||||
current_searchterm = "",
|
|
||||||
URL_SEARCH_PARAM = 'search',
|
|
||||||
URL_MARK_PARAM = 'highlight',
|
|
||||||
teaser_count = 0,
|
|
||||||
|
|
||||||
SEARCH_HOTKEY_KEYCODE = 83,
|
|
||||||
ESCAPE_KEYCODE = 27,
|
|
||||||
DOWN_KEYCODE = 40,
|
|
||||||
UP_KEYCODE = 38,
|
|
||||||
SELECT_KEYCODE = 13;
|
|
||||||
|
|
||||||
function hasFocus() {
|
|
||||||
return searchbar === document.activeElement;
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeChildren(elem) {
|
|
||||||
while (elem.firstChild) {
|
|
||||||
elem.removeChild(elem.firstChild);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper to parse a url into its building blocks.
|
|
||||||
function parseURL(url) {
|
|
||||||
var a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
return {
|
|
||||||
source: url,
|
|
||||||
protocol: a.protocol.replace(':',''),
|
|
||||||
host: a.hostname,
|
|
||||||
port: a.port,
|
|
||||||
params: (function(){
|
|
||||||
var ret = {};
|
|
||||||
var seg = a.search.replace(/^\?/,'').split('&');
|
|
||||||
var len = seg.length, i = 0, s;
|
|
||||||
for (;i<len;i++) {
|
|
||||||
if (!seg[i]) { continue; }
|
|
||||||
s = seg[i].split('=');
|
|
||||||
ret[s[0]] = s[1];
|
|
||||||
}
|
|
||||||
return ret;
|
|
||||||
})(),
|
|
||||||
file: (a.pathname.match(/\/([^/?#]+)$/i) || [,''])[1],
|
|
||||||
hash: a.hash.replace('#',''),
|
|
||||||
path: a.pathname.replace(/^([^/])/,'/$1')
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper to recreate a url string from its building blocks.
|
|
||||||
function renderURL(urlobject) {
|
|
||||||
var url = urlobject.protocol + "://" + urlobject.host;
|
|
||||||
if (urlobject.port != "") {
|
|
||||||
url += ":" + urlobject.port;
|
|
||||||
}
|
|
||||||
url += urlobject.path;
|
|
||||||
var joiner = "?";
|
|
||||||
for(var prop in urlobject.params) {
|
|
||||||
if(urlobject.params.hasOwnProperty(prop)) {
|
|
||||||
url += joiner + prop + "=" + urlobject.params[prop];
|
|
||||||
joiner = "&";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (urlobject.hash != "") {
|
|
||||||
url += "#" + urlobject.hash;
|
|
||||||
}
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper to escape html special chars for displaying the teasers
|
|
||||||
var escapeHTML = (function() {
|
|
||||||
var MAP = {
|
|
||||||
'&': '&',
|
|
||||||
'<': '<',
|
|
||||||
'>': '>',
|
|
||||||
'"': '"',
|
|
||||||
"'": '''
|
|
||||||
};
|
|
||||||
var repl = function(c) { return MAP[c]; };
|
|
||||||
return function(s) {
|
|
||||||
return s.replace(/[&<>'"]/g, repl);
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
function formatSearchMetric(count, searchterm) {
|
|
||||||
if (count == 1) {
|
|
||||||
return count + " search result for '" + searchterm + "':";
|
|
||||||
} else if (count == 0) {
|
|
||||||
return "No search results for '" + searchterm + "'.";
|
|
||||||
} else {
|
|
||||||
return count + " search results for '" + searchterm + "':";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatSearchResult(result, searchterms) {
|
|
||||||
var teaser = makeTeaser(escapeHTML(result.doc.body), searchterms);
|
|
||||||
teaser_count++;
|
|
||||||
|
|
||||||
// The ?URL_MARK_PARAM= parameter belongs inbetween the page and the #heading-anchor
|
|
||||||
var url = doc_urls[result.ref].split("#");
|
|
||||||
if (url.length == 1) { // no anchor found
|
|
||||||
url.push("");
|
|
||||||
}
|
|
||||||
|
|
||||||
// encodeURIComponent escapes all chars that could allow an XSS except
|
|
||||||
// for '. Due to that we also manually replace ' with its url-encoded
|
|
||||||
// representation (%27).
|
|
||||||
var searchterms = encodeURIComponent(searchterms.join(" ")).replace(/\'/g, "%27");
|
|
||||||
|
|
||||||
return '<a href="' + path_to_root + url[0] + '?' + URL_MARK_PARAM + '=' + searchterms + '#' + url[1]
|
|
||||||
+ '" aria-details="teaser_' + teaser_count + '">' + result.doc.breadcrumbs + '</a>'
|
|
||||||
+ '<span class="teaser" id="teaser_' + teaser_count + '" aria-label="Search Result Teaser">'
|
|
||||||
+ teaser + '</span>';
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeTeaser(body, searchterms) {
|
|
||||||
// The strategy is as follows:
|
|
||||||
// First, assign a value to each word in the document:
|
|
||||||
// Words that correspond to search terms (stemmer aware): 40
|
|
||||||
// Normal words: 2
|
|
||||||
// First word in a sentence: 8
|
|
||||||
// Then use a sliding window with a constant number of words and count the
|
|
||||||
// sum of the values of the words within the window. Then use the window that got the
|
|
||||||
// maximum sum. If there are multiple maximas, then get the last one.
|
|
||||||
// Enclose the terms in <em>.
|
|
||||||
var stemmed_searchterms = searchterms.map(function(w) {
|
|
||||||
return elasticlunr.stemmer(w.toLowerCase());
|
|
||||||
});
|
|
||||||
var searchterm_weight = 40;
|
|
||||||
var weighted = []; // contains elements of ["word", weight, index_in_document]
|
|
||||||
// split in sentences, then words
|
|
||||||
var sentences = body.toLowerCase().split('. ');
|
|
||||||
var index = 0;
|
|
||||||
var value = 0;
|
|
||||||
var searchterm_found = false;
|
|
||||||
for (var sentenceindex in sentences) {
|
|
||||||
var words = sentences[sentenceindex].split(' ');
|
|
||||||
value = 8;
|
|
||||||
for (var wordindex in words) {
|
|
||||||
var word = words[wordindex];
|
|
||||||
if (word.length > 0) {
|
|
||||||
for (var searchtermindex in stemmed_searchterms) {
|
|
||||||
if (elasticlunr.stemmer(word).startsWith(stemmed_searchterms[searchtermindex])) {
|
|
||||||
value = searchterm_weight;
|
|
||||||
searchterm_found = true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
weighted.push([word, value, index]);
|
|
||||||
value = 2;
|
|
||||||
}
|
|
||||||
index += word.length;
|
|
||||||
index += 1; // ' ' or '.' if last word in sentence
|
|
||||||
};
|
|
||||||
index += 1; // because we split at a two-char boundary '. '
|
|
||||||
};
|
|
||||||
|
|
||||||
if (weighted.length == 0) {
|
|
||||||
return body;
|
|
||||||
}
|
|
||||||
|
|
||||||
var window_weight = [];
|
|
||||||
var window_size = Math.min(weighted.length, results_options.teaser_word_count);
|
|
||||||
|
|
||||||
var cur_sum = 0;
|
|
||||||
for (var wordindex = 0; wordindex < window_size; wordindex++) {
|
|
||||||
cur_sum += weighted[wordindex][1];
|
|
||||||
};
|
|
||||||
window_weight.push(cur_sum);
|
|
||||||
for (var wordindex = 0; wordindex < weighted.length - window_size; wordindex++) {
|
|
||||||
cur_sum -= weighted[wordindex][1];
|
|
||||||
cur_sum += weighted[wordindex + window_size][1];
|
|
||||||
window_weight.push(cur_sum);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (searchterm_found) {
|
|
||||||
var max_sum = 0;
|
|
||||||
var max_sum_window_index = 0;
|
|
||||||
// backwards
|
|
||||||
for (var i = window_weight.length - 1; i >= 0; i--) {
|
|
||||||
if (window_weight[i] > max_sum) {
|
|
||||||
max_sum = window_weight[i];
|
|
||||||
max_sum_window_index = i;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
max_sum_window_index = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// add <em/> around searchterms
|
|
||||||
var teaser_split = [];
|
|
||||||
var index = weighted[max_sum_window_index][2];
|
|
||||||
for (var i = max_sum_window_index; i < max_sum_window_index+window_size; i++) {
|
|
||||||
var word = weighted[i];
|
|
||||||
if (index < word[2]) {
|
|
||||||
// missing text from index to start of `word`
|
|
||||||
teaser_split.push(body.substring(index, word[2]));
|
|
||||||
index = word[2];
|
|
||||||
}
|
|
||||||
if (word[1] == searchterm_weight) {
|
|
||||||
teaser_split.push("<em>")
|
|
||||||
}
|
|
||||||
index = word[2] + word[0].length;
|
|
||||||
teaser_split.push(body.substring(word[2], index));
|
|
||||||
if (word[1] == searchterm_weight) {
|
|
||||||
teaser_split.push("</em>")
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return teaser_split.join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
function init(config) {
|
|
||||||
results_options = config.results_options;
|
|
||||||
search_options = config.search_options;
|
|
||||||
searchbar_outer = config.searchbar_outer;
|
|
||||||
doc_urls = config.doc_urls;
|
|
||||||
searchindex = elasticlunr.Index.load(config.index);
|
|
||||||
|
|
||||||
// Set up events
|
|
||||||
searchicon.addEventListener('click', function(e) { searchIconClickHandler(); }, false);
|
|
||||||
searchbar.addEventListener('keyup', function(e) { searchbarKeyUpHandler(); }, false);
|
|
||||||
document.addEventListener('keydown', function(e) { globalKeyHandler(e); }, false);
|
|
||||||
// If the user uses the browser buttons, do the same as if a reload happened
|
|
||||||
window.onpopstate = function(e) { doSearchOrMarkFromUrl(); };
|
|
||||||
// Suppress "submit" events so the page doesn't reload when the user presses Enter
|
|
||||||
document.addEventListener('submit', function(e) { e.preventDefault(); }, false);
|
|
||||||
|
|
||||||
// If reloaded, do the search or mark again, depending on the current url parameters
|
|
||||||
doSearchOrMarkFromUrl();
|
|
||||||
}
|
|
||||||
|
|
||||||
function unfocusSearchbar() {
|
|
||||||
// hacky, but just focusing a div only works once
|
|
||||||
var tmp = document.createElement('input');
|
|
||||||
tmp.setAttribute('style', 'position: absolute; opacity: 0;');
|
|
||||||
searchicon.appendChild(tmp);
|
|
||||||
tmp.focus();
|
|
||||||
tmp.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
// On reload or browser history backwards/forwards events, parse the url and do search or mark
|
|
||||||
function doSearchOrMarkFromUrl() {
|
|
||||||
// Check current URL for search request
|
|
||||||
var url = parseURL(window.location.href);
|
|
||||||
if (url.params.hasOwnProperty(URL_SEARCH_PARAM)
|
|
||||||
&& url.params[URL_SEARCH_PARAM] != "") {
|
|
||||||
showSearch(true);
|
|
||||||
searchbar.value = decodeURIComponent(
|
|
||||||
(url.params[URL_SEARCH_PARAM]+'').replace(/\+/g, '%20'));
|
|
||||||
searchbarKeyUpHandler(); // -> doSearch()
|
|
||||||
} else {
|
|
||||||
showSearch(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (url.params.hasOwnProperty(URL_MARK_PARAM)) {
|
|
||||||
var words = decodeURIComponent(url.params[URL_MARK_PARAM]).split(' ');
|
|
||||||
marker.mark(words, {
|
|
||||||
exclude: mark_exclude
|
|
||||||
});
|
|
||||||
|
|
||||||
var markers = document.querySelectorAll("mark");
|
|
||||||
function hide() {
|
|
||||||
for (var i = 0; i < markers.length; i++) {
|
|
||||||
markers[i].classList.add("fade-out");
|
|
||||||
window.setTimeout(function(e) { marker.unmark(); }, 300);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (var i = 0; i < markers.length; i++) {
|
|
||||||
markers[i].addEventListener('click', hide);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Eventhandler for keyevents on `document`
|
|
||||||
function globalKeyHandler(e) {
|
|
||||||
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.type === 'textarea' || e.target.type === 'text') { return; }
|
|
||||||
|
|
||||||
if (e.keyCode === ESCAPE_KEYCODE) {
|
|
||||||
e.preventDefault();
|
|
||||||
searchbar.classList.remove("active");
|
|
||||||
setSearchUrlParameters("",
|
|
||||||
(searchbar.value.trim() !== "") ? "push" : "replace");
|
|
||||||
if (hasFocus()) {
|
|
||||||
unfocusSearchbar();
|
|
||||||
}
|
|
||||||
showSearch(false);
|
|
||||||
marker.unmark();
|
|
||||||
} else if (!hasFocus() && e.keyCode === SEARCH_HOTKEY_KEYCODE) {
|
|
||||||
e.preventDefault();
|
|
||||||
showSearch(true);
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
searchbar.select();
|
|
||||||
} else if (hasFocus() && e.keyCode === DOWN_KEYCODE) {
|
|
||||||
e.preventDefault();
|
|
||||||
unfocusSearchbar();
|
|
||||||
searchresults.firstElementChild.classList.add("focus");
|
|
||||||
} else if (!hasFocus() && (e.keyCode === DOWN_KEYCODE
|
|
||||||
|| e.keyCode === UP_KEYCODE
|
|
||||||
|| e.keyCode === SELECT_KEYCODE)) {
|
|
||||||
// not `:focus` because browser does annoying scrolling
|
|
||||||
var focused = searchresults.querySelector("li.focus");
|
|
||||||
if (!focused) return;
|
|
||||||
e.preventDefault();
|
|
||||||
if (e.keyCode === DOWN_KEYCODE) {
|
|
||||||
var next = focused.nextElementSibling;
|
|
||||||
if (next) {
|
|
||||||
focused.classList.remove("focus");
|
|
||||||
next.classList.add("focus");
|
|
||||||
}
|
|
||||||
} else if (e.keyCode === UP_KEYCODE) {
|
|
||||||
focused.classList.remove("focus");
|
|
||||||
var prev = focused.previousElementSibling;
|
|
||||||
if (prev) {
|
|
||||||
prev.classList.add("focus");
|
|
||||||
} else {
|
|
||||||
searchbar.select();
|
|
||||||
}
|
|
||||||
} else { // SELECT_KEYCODE
|
|
||||||
window.location.assign(focused.querySelector('a'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showSearch(yes) {
|
|
||||||
if (yes) {
|
|
||||||
search_wrap.classList.remove('hidden');
|
|
||||||
searchicon.setAttribute('aria-expanded', 'true');
|
|
||||||
} else {
|
|
||||||
search_wrap.classList.add('hidden');
|
|
||||||
searchicon.setAttribute('aria-expanded', 'false');
|
|
||||||
var results = searchresults.children;
|
|
||||||
for (var i = 0; i < results.length; i++) {
|
|
||||||
results[i].classList.remove("focus");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showResults(yes) {
|
|
||||||
if (yes) {
|
|
||||||
searchresults_outer.classList.remove('hidden');
|
|
||||||
} else {
|
|
||||||
searchresults_outer.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Eventhandler for search icon
|
|
||||||
function searchIconClickHandler() {
|
|
||||||
if (search_wrap.classList.contains('hidden')) {
|
|
||||||
showSearch(true);
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
searchbar.select();
|
|
||||||
} else {
|
|
||||||
showSearch(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Eventhandler for keyevents while the searchbar is focused
|
|
||||||
function searchbarKeyUpHandler() {
|
|
||||||
var searchterm = searchbar.value.trim();
|
|
||||||
if (searchterm != "") {
|
|
||||||
searchbar.classList.add("active");
|
|
||||||
doSearch(searchterm);
|
|
||||||
} else {
|
|
||||||
searchbar.classList.remove("active");
|
|
||||||
showResults(false);
|
|
||||||
removeChildren(searchresults);
|
|
||||||
}
|
|
||||||
|
|
||||||
setSearchUrlParameters(searchterm, "push_if_new_search_else_replace");
|
|
||||||
|
|
||||||
// Remove marks
|
|
||||||
marker.unmark();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update current url with ?URL_SEARCH_PARAM= parameter, remove ?URL_MARK_PARAM and #heading-anchor .
|
|
||||||
// `action` can be one of "push", "replace", "push_if_new_search_else_replace"
|
|
||||||
// and replaces or pushes a new browser history item.
|
|
||||||
// "push_if_new_search_else_replace" pushes if there is no `?URL_SEARCH_PARAM=abc` yet.
|
|
||||||
function setSearchUrlParameters(searchterm, action) {
|
|
||||||
var url = parseURL(window.location.href);
|
|
||||||
var first_search = ! url.params.hasOwnProperty(URL_SEARCH_PARAM);
|
|
||||||
if (searchterm != "" || action == "push_if_new_search_else_replace") {
|
|
||||||
url.params[URL_SEARCH_PARAM] = searchterm;
|
|
||||||
delete url.params[URL_MARK_PARAM];
|
|
||||||
url.hash = "";
|
|
||||||
} else {
|
|
||||||
delete url.params[URL_MARK_PARAM];
|
|
||||||
delete url.params[URL_SEARCH_PARAM];
|
|
||||||
}
|
|
||||||
// A new search will also add a new history item, so the user can go back
|
|
||||||
// to the page prior to searching. A updated search term will only replace
|
|
||||||
// the url.
|
|
||||||
if (action == "push" || (action == "push_if_new_search_else_replace" && first_search) ) {
|
|
||||||
history.pushState({}, document.title, renderURL(url));
|
|
||||||
} else if (action == "replace" || (action == "push_if_new_search_else_replace" && !first_search) ) {
|
|
||||||
history.replaceState({}, document.title, renderURL(url));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function doSearch(searchterm) {
|
|
||||||
|
|
||||||
// Don't search the same twice
|
|
||||||
if (current_searchterm == searchterm) { return; }
|
|
||||||
else { current_searchterm = searchterm; }
|
|
||||||
|
|
||||||
if (searchindex == null) { return; }
|
|
||||||
|
|
||||||
// Do the actual search
|
|
||||||
var results = searchindex.search(searchterm, search_options);
|
|
||||||
var resultcount = Math.min(results.length, results_options.limit_results);
|
|
||||||
|
|
||||||
// Display search metrics
|
|
||||||
searchresults_header.innerText = formatSearchMetric(resultcount, searchterm);
|
|
||||||
|
|
||||||
// Clear and insert results
|
|
||||||
var searchterms = searchterm.split(' ');
|
|
||||||
removeChildren(searchresults);
|
|
||||||
for(var i = 0; i < resultcount ; i++){
|
|
||||||
var resultElem = document.createElement('li');
|
|
||||||
resultElem.innerHTML = formatSearchResult(results[i], searchterms);
|
|
||||||
searchresults.appendChild(resultElem);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Display results
|
|
||||||
showResults(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
fetch(path_to_root + 'searchindex.json')
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(json => init(json))
|
|
||||||
.catch(error => { // Try to load searchindex.js if fetch failed
|
|
||||||
var script = document.createElement('script');
|
|
||||||
script.src = path_to_root + 'searchindex.js';
|
|
||||||
script.onload = () => init(window.search);
|
|
||||||
document.head.appendChild(script);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Exported functions
|
|
||||||
search.hasFocus = hasFocus;
|
|
||||||
})(window.search);
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,18 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
|
||||||
|
<sitemap>
|
||||||
|
<loc>https://docs.dappconnect.dev/en/sitemap.xml</loc>
|
||||||
|
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
|
||||||
|
</sitemap>
|
||||||
|
|
||||||
|
<sitemap>
|
||||||
|
<loc>https://docs.dappconnect.dev/es/sitemap.xml</loc>
|
||||||
|
|
||||||
|
<lastmod>2021-12-09T15:27:58+01:00</lastmod>
|
||||||
|
|
||||||
|
</sitemap>
|
||||||
|
|
||||||
|
</sitemapindex>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||||
|
<channel>
|
||||||
|
<title>Tags on DappConnect Docs</title>
|
||||||
|
<link>https://docs.dappconnect.dev/tags/</link>
|
||||||
|
<description>Recent content in Tags on DappConnect Docs</description>
|
||||||
|
<generator>Hugo -- gohugo.io</generator>
|
||||||
|
<language>en-us</language>
|
||||||
|
|
||||||
|
<atom:link href="https://docs.dappconnect.dev/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||||
|
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
/* Tomorrow Night Theme */
|
|
||||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
|
||||||
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
|
|
||||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
|
||||||
|
|
||||||
/* Tomorrow Comment */
|
|
||||||
.hljs-comment {
|
|
||||||
color: #969896;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tomorrow Red */
|
|
||||||
.hljs-variable,
|
|
||||||
.hljs-attribute,
|
|
||||||
.hljs-tag,
|
|
||||||
.hljs-regexp,
|
|
||||||
.ruby .hljs-constant,
|
|
||||||
.xml .hljs-tag .hljs-title,
|
|
||||||
.xml .hljs-pi,
|
|
||||||
.xml .hljs-doctype,
|
|
||||||
.html .hljs-doctype,
|
|
||||||
.css .hljs-id,
|
|
||||||
.css .hljs-class,
|
|
||||||
.css .hljs-pseudo {
|
|
||||||
color: #cc6666;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tomorrow Orange */
|
|
||||||
.hljs-number,
|
|
||||||
.hljs-preprocessor,
|
|
||||||
.hljs-pragma,
|
|
||||||
.hljs-built_in,
|
|
||||||
.hljs-literal,
|
|
||||||
.hljs-params,
|
|
||||||
.hljs-constant {
|
|
||||||
color: #de935f;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tomorrow Yellow */
|
|
||||||
.ruby .hljs-class .hljs-title,
|
|
||||||
.css .hljs-rule .hljs-attribute {
|
|
||||||
color: #f0c674;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tomorrow Green */
|
|
||||||
.hljs-string,
|
|
||||||
.hljs-value,
|
|
||||||
.hljs-inheritance,
|
|
||||||
.hljs-header,
|
|
||||||
.hljs-name,
|
|
||||||
.ruby .hljs-symbol,
|
|
||||||
.xml .hljs-cdata {
|
|
||||||
color: #b5bd68;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tomorrow Aqua */
|
|
||||||
.hljs-title,
|
|
||||||
.css .hljs-hexcolor {
|
|
||||||
color: #8abeb7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tomorrow Blue */
|
|
||||||
.hljs-function,
|
|
||||||
.python .hljs-decorator,
|
|
||||||
.python .hljs-title,
|
|
||||||
.ruby .hljs-function .hljs-title,
|
|
||||||
.ruby .hljs-title .hljs-keyword,
|
|
||||||
.perl .hljs-sub,
|
|
||||||
.javascript .hljs-title,
|
|
||||||
.coffeescript .hljs-title {
|
|
||||||
color: #81a2be;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tomorrow Purple */
|
|
||||||
.hljs-keyword,
|
|
||||||
.javascript .hljs-function {
|
|
||||||
color: #b294bb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs {
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
background: #1d1f21;
|
|
||||||
color: #c5c8c6;
|
|
||||||
padding: 0.5em;
|
|
||||||
-webkit-text-size-adjust: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coffeescript .javascript,
|
|
||||||
.javascript .xml,
|
|
||||||
.tex .hljs-formula,
|
|
||||||
.xml .javascript,
|
|
||||||
.xml .vbscript,
|
|
||||||
.xml .css,
|
|
||||||
.xml .hljs-cdata {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-addition {
|
|
||||||
color: #718c00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-deletion {
|
|
||||||
color: #c82829;
|
|
||||||
}
|
|
||||||
|
|
@ -1,222 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en" class="sidebar-visible no-js light">
|
|
||||||
<head>
|
|
||||||
<!-- Book generated using mdBook -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Implemented Waku Protocols - DappConnect Docs</title>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom HTML head -->
|
|
||||||
|
|
||||||
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
|
|
||||||
<link rel="icon" href="favicon.svg">
|
|
||||||
<link rel="shortcut icon" href="favicon.png">
|
|
||||||
<link rel="stylesheet" href="css/variables.css">
|
|
||||||
<link rel="stylesheet" href="css/general.css">
|
|
||||||
<link rel="stylesheet" href="css/chrome.css">
|
|
||||||
<link rel="stylesheet" href="css/print.css" media="print">
|
|
||||||
|
|
||||||
<!-- Fonts -->
|
|
||||||
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
|
|
||||||
<link rel="stylesheet" href="fonts/fonts.css">
|
|
||||||
|
|
||||||
<!-- Highlight.js Stylesheets -->
|
|
||||||
<link rel="stylesheet" href="highlight.css">
|
|
||||||
<link rel="stylesheet" href="tomorrow-night.css">
|
|
||||||
<link rel="stylesheet" href="ayu-highlight.css">
|
|
||||||
|
|
||||||
<!-- Custom theme stylesheets -->
|
|
||||||
<link rel="stylesheet" href="custom.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Provide site root to javascript -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var path_to_root = "";
|
|
||||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
try {
|
|
||||||
var theme = localStorage.getItem('mdbook-theme');
|
|
||||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
||||||
|
|
||||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
||||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
||||||
}
|
|
||||||
} catch (e) { }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var theme;
|
|
||||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
||||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
html.classList.remove('no-js')
|
|
||||||
html.classList.remove('light')
|
|
||||||
html.classList.add(theme);
|
|
||||||
html.classList.add('js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hide / unhide sidebar before it is displayed -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
var html = document.querySelector('html');
|
|
||||||
var sidebar = 'hidden';
|
|
||||||
if (document.body.clientWidth >= 1080) {
|
|
||||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
||||||
sidebar = sidebar || 'visible';
|
|
||||||
}
|
|
||||||
html.classList.remove('sidebar-visible');
|
|
||||||
html.classList.add("sidebar-" + sidebar);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
||||||
<div class="sidebar-scrollbox">
|
|
||||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="quick_start.html"><strong aria-hidden="true">1.</strong> Quick Start</a></li><li class="chapter-item expanded "><a href="guides/index.html"><strong aria-hidden="true">2.</strong> Guides</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="guides/choose_content_topic.html"><strong aria-hidden="true">2.1.</strong> How to Choose a Content Topic</a></li><li class="chapter-item expanded "><a href="guides/relay_receive_send_messages.html"><strong aria-hidden="true">2.2.</strong> Receive and Send Messages Using Waku Relay</a></li><li class="chapter-item expanded "><a href="guides/store_retrieve_messages.html"><strong aria-hidden="true">2.3.</strong> Retrieve Messages Using Waku Store</a></li><li class="chapter-item expanded "><a href="guides/encrypt_messages_version_1.html"><strong aria-hidden="true">2.4.</strong> Encrypt Messages Using Waku Message Version 1</a></li><li class="chapter-item expanded "><a href="guides/reactjs_relay.html"><strong aria-hidden="true">2.5.</strong> Receive and Send Messages Using Waku Relay With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/reactjs_store.html"><strong aria-hidden="true">2.6.</strong> Retrieve Messages Using Waku Store With ReactJS</a></li><li class="chapter-item expanded "><a href="guides/light_push_send_messages.html"><strong aria-hidden="true">2.7.</strong> Send Messages Using Waku Light Push</a></li></ol></li><li class="chapter-item expanded "><a href="examples.html"><strong aria-hidden="true">3.</strong> Examples</a></li><li class="chapter-item expanded affix "><a href="waku_protocols.html" class="active">Implemented Waku Protocols</a></li></ol> </div>
|
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<div id="menu-bar-hover-placeholder"></div>
|
|
||||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
|
||||||
<div class="left-buttons">
|
|
||||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
||||||
<i class="fa fa-paint-brush"></i>
|
|
||||||
</button>
|
|
||||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
||||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
||||||
</ul>
|
|
||||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="menu-title">DappConnect Docs</h1>
|
|
||||||
|
|
||||||
<div class="right-buttons">
|
|
||||||
<a href="print.html" title="Print this book" aria-label="Print this book">
|
|
||||||
<i id="print-button" class="fa fa-print"></i>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/vacp2p/docs.dappconnect.dev" title="Git repository" aria-label="Git repository">
|
|
||||||
<i id="git-repository-button" class="fa fa-github"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="search-wrapper" class="hidden">
|
|
||||||
<form id="searchbar-outer" class="searchbar-outer">
|
|
||||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
||||||
</form>
|
|
||||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
||||||
<div id="searchresults-header" class="searchresults-header"></div>
|
|
||||||
<ul id="searchresults">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
||||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
||||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
||||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="content" class="content">
|
|
||||||
<main>
|
|
||||||
<h2 id="waku-protocol-support"><a class="header" href="#waku-protocol-support">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>
|
|
||||||
<li>🚧: Implementation in progress</li>
|
|
||||||
<li>⛔: Support is not planned</li>
|
|
||||||
</ul>
|
|
||||||
<table><thead><tr><th>Spec</th><th>Implementation Status</th></tr></thead><tbody>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/6">6/WAKU1</a></td><td>⛔</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/7">7/WAKU-DATA</a></td><td>⛔</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/8">8/WAKU-MAIL</a></td><td>⛔</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/9">9/WAKU-RPC</a></td><td>⛔</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/10">10/WAKU2</a></td><td>🚧</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/11">11/WAKU2-RELAY</a></td><td>✔</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/12">12/WAKU2-FILTER</a></td><td></td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/13">13/WAKU2-STORE</a></td><td>✔ (querying node only)</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/14">14/WAKU2-MESSAGE</a></td><td>✔</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/15">15/WAKU2-BRIDGE</a></td><td></td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/16">16/WAKU2-RPC</a></td><td>⛔</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/17">17/WAKU2-RLNRELAY</a></td><td></td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/18">18/WAKU2-SWAP</a></td><td></td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/19/">19/WAKU2-LIGHTPUSH</a></td><td>✔</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/20/">20/TOY-ETH-PM</a></td><td>✔ (as example)</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/21/">21/WAKU2-FTSTORE</a></td><td>✔</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/22/">22/TOY-CHAT</a></td><td>✔ (as example)</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/25/">25/LIBP2P-DNS-DISCOVERY</a></td><td>🚧</td></tr>
|
|
||||||
<tr><td><a href="https://rfc.vac.dev/spec/26/">26/WAKU2-PAYLOAD</a></td><td>✔</td></tr>
|
|
||||||
</tbody></table>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
||||||
<!-- Mobile navigation buttons -->
|
|
||||||
<a rel="prev" href="examples.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
||||||
<a rel="prev" href="examples.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
window.playground_copyable = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="mark.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="searcher.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<script src="clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="highlight.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="book.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!-- Custom JS scripts -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue