https://docs.wakuconnect.dev/ Recent content in Introduction on Waku Connect Docs Hugo -- gohugo.io en-us Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/ Mon, 03 Jan 2022 11:00:00 +1100 https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/ Create the DApp and Install Dependencies # Create React App # Create the new React app using the typescript template. Install the Waku Poll SDK packages. To connect dapp with Wallet you can use any package that is compatible with ethers Web3Provider (e.g. @usedapp, web3-react). Setup polyfills # A number of Web3 dependencies need polyfills. Said polyfills must be explicitly declared when using webpack 5. The latest react-scripts version uses webpack 5. https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/ Mon, 03 Jan 2022 11:00:00 +1100 https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/ Deploy smart contract # Creating new package # For this deployment we will create a new package. mkdir contract-deployment cd contract-deployment yarn init yarn add @waku/vote-sdk-contracts ethers ts-node typescript Create a tsconfig.json with: { "compilerOptions": { "target": "es2020", "module": "commonJS", "esModuleInterop": true, "moduleResolution": "node", "resolveJsonModule": true, "noEmit": true } } And now we can add a deploy script index.ts: import { ContractFactory, getDefaultProvider, Wallet } from "ethers"; import VotingContract from "@waku/vote-sdk-contracts/build/VotingContract. https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/ 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. https://docs.wakuconnect.dev/docs/guides/discovery_bootstrap/ Thu, 17 Feb 2022 00:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/discovery_bootstrap/ Discovery & Bootstrap Nodes # This guide explains the discovery and bootstrap mechanisms currently available in js-waku, their benefits and caveats and how to use them. Node discovery is the mechanism that enables a Waku node to find other nodes. Waku is a modular protocol, several discovery mechanisms are and will be included in Waku so that developers can select the best mechanism(s) based for their use case and the user’s environment (e. https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/ Mon, 03 Jan 2022 11:00:00 +1100 https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/ Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user’s wallet. If you want to use ethers as a package to connect to web3 wallet you can follow this guide and skip the next step. Next step demonstrates how to use @useDapp for this purpose. In this we will use ethers to keep amount of dependencies to minimum but feel free to use other packages. https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/ Mon, 03 Jan 2022 11:00:00 +1100 https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/ Create Voting component # With the smart contract deployed we can go back to our dApp. We assume that the skeleton for the dApp with connection to the wallet is already done, if not please go to dApp creation. Create components # Let’s start by creating a new folder components with file named Voting.tsx inside. After that we can start with styling and defining which theme we will be using: https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/ 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’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. https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_wallet_usedapp/ Mon, 03 Jan 2022 11:00:00 +1100 https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_wallet_usedapp/ Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user’s wallet. This section can be used instead of previous step. It demonstrates how to use @useDapp for wallet connection. In this guide, we use useDApp to access the blockchain. yarn add @usedapp/core@0.4.7 @usedapp/core must be frozen to version 0.4.7 due to incompatibility between minor versions of ethers. https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/ Mon, 03 Jan 2022 11:00:00 +1100 https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/ Use Voting Component # Define Configuration # Configure the dApp by setting: Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = "VOTING_ADDRESS"; const MULTICALL_ADDRESS = "MULTICALL_ADDRESS"; const DAPP_NAME = "YOUR_DAPP_NAME"; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting: import { useWakuVoting } from "@waku/vote-sdk-react-hooks"; export function MainPage() { const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID); const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ); } Display Voting Component # Modify the MainPage to render a Voting component. https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/ 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. https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/ 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. https://docs.wakuconnect.dev/docs/guides/sign_messages_web3_eip712/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/sign_messages_web3_eip712/ Sign Messages Using a Web3 Wallet (EIP-712) # Depending on your use case, you may need users to certify the ownership of their Ethereum account. They can do so by using their wallet to sign data. In this guide, we demonstrate how to use the Ethers.js library to request the user to sign typed data (EIP-712) and then broadcast the signature over Waku. For this guide, we are build a dApp that implements 20/TOY-ETH-PM: A simple protocols for end-to-end encrypted messages where Ethereum accounts are used as identity. https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/ 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: https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/ 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. https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/ Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages. Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /min-react-js-chat/1/chat/proto. https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/ Retrieve Messages Using Waku Store With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages. DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background. Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received. https://docs.wakuconnect.dev/docs/guides/angular_relay/ Tue, 15 Feb 2022 09:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/angular_relay/ Send and Receive Messages Using Waku Relay With Angular v13 # It is easy to use Waku Connect with Angular v13. In this guide, we will demonstrate how your Angular dApp can use Waku Relay to send and receive messages. Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /relay-angular-chat/1/chat/proto. https://docs.wakuconnect.dev/docs/guides/nwaku/ Thu, 17 Feb 2022 00:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/nwaku/ Nwaku Service Node # JS-Waku nodes join the Waku network by connecting to service nodes using secure websocket. Nwaku (prev. nim-waku) is the reference implementation of the Waku v2 protocol and can be used as a service node. When using { bootstrap: { default: true } }, the js-waku node connects to a fleet of nwaku nodes operated by Status. It is also possible to deploy your own nwaku node by following these instructions. https://docs.wakuconnect.dev/docs/introduction/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/introduction/ Waku Connect Docs # Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp. Waku is a decentralized, censorship-resistant, network and protocol family. It enables you to add communication features to your dApp in a decentralized manner, ensuring to your users that they will not be censored or de-platformed. Waku can be used for chat purposes and for many machine-to-machine use cases. https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/ Mon, 03 Jan 2022 11:00:00 +1100 https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/ Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We’ll start by adding a button to create a poll. mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling: import styled from "styled-components"; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } `; Button # Create a button that will display the PollCreation component on click. https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/ Mon, 03 Jan 2022 11:00:00 +1100 https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/ Poll Creation Component # The Poll SDK provides an off-the-shelf component to create a new poll: PollCreation. It takes in a WakuPolling hook that can created with useWakuPolling. useWakuPolling takes: appName: Your app name. It is used to generate a unique content topic for your polls. See How to Choose a Content Topic for more information. tokenAddress: The address of your ERC-20 token. Only token holders can create and answer polls. https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/ Mon, 03 Jan 2022 11:00:00 +1100 https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/ Poll List Component # To display existing polls, the PollList component is provided. Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll: components/Poll.tsx: import React, { useMemo, useState } from "react"; import styled from "styled-components"; import { PollCreation, PollList } from "@waku/poll-sdk-react-components"; import { Web3Provider } from "@ethersproject/providers"; import { useWakuPolling } from "@waku/poll-sdk-react-hooks"; import { CreateButton } from "@waku/vote-poll-sdk-react-components"; import { Theme } from "@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes"; type PollProps = { appName: string; library: Web3Provider | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; multicallAddress: string; }; export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress, }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, multicallAddress ); const disabled = useMemo(() => ! https://docs.wakuconnect.dev/docs/guides/debug/ Mon, 31 Jan 2022 00:00:00 +0100 https://docs.wakuconnect.dev/docs/guides/debug/ How to Debug your Waku dApp # Enable Debug Logs # JS-Waku and its most relevant dependencies (libp2p) uses debug to handle logs. NodeJS # To enable debug logs when running js-waku with NodeJS, simply set the DEBUG environment variable. To only enable js-waku debug logs: export DEBUG=waku* To enable js-waku and libp2p debug logs: export DEBUG=waku*,libp2p* To enable all debug logs: export DEBUG=* Browser # To see the debug logs in your browser’s console, you need to modify the local storage and add debug key. https://docs.wakuconnect.dev/docs/quick_start/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/quick_start/ Quick Start # In this section you will learn how to receive and send messages using Waku Relay. A more in depth guide for Waku Relay can be found here. Install # Install the js-waku package: npm install js-waku # or with yarn yarn add js-waku Start a waku node # import { Waku } from "js-waku"; const waku = await Waku.create({ bootstrap: { default: true } }); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network. https://docs.wakuconnect.dev/docs/faq/ Wed, 16 Feb 2022 00:00:00 +1000 https://docs.wakuconnect.dev/docs/faq/ FAQ # Frequently Asked Questions for developers using js-waku: 1. Why should I build a frontend only webapp (no NodeJS backend)? # Waku enables dApp to add communication, e.g. interaction between users, in a fully decentralized manner. A webapp that uses NodeJS as a backend implies that a party runs said NodeJS software in a centralized infrastructure. Despite using Waku & Ethereum, such webapp cannot become decentralized. By building a frontend only webapp, that entirely runs in the browser, one can distribute the frontend code in many manners: host it, mirror it, have it on GitHub, deploy it on IPFS, etc. https://docs.wakuconnect.dev/docs/use_cases/ Wed, 05 Jan 2022 00:00:00 +0000 https://docs.wakuconnect.dev/docs/use_cases/ Use Cases # Waku is a generalized communication network. It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels). This is a non-exhaustive list of use cases that we have considered and their current status. If we are aware of other projects using js-waku and other use cases that could be implemented, feel free to open a PR. Legend: Live: We are aware of projects who have implemented this use case. https://docs.wakuconnect.dev/docs/presentations/ Wed, 12 Jan 2022 01:00:00 +0100 https://docs.wakuconnect.dev/docs/presentations/ Presentations & Videos # 21 Apr 2022 - Secureum TrustX - Waku: Enabling a New Dimension for dApps # Presenter: Corey Petty. 27 Jan 2022 - Web 3.0 Conference # Presenter: Franck Royer. mirror: https://odysee.com/@Waku:c/2022-07-web3-conference:5 17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants. Presenter: Franck Royer. Slides: https://notes.status.im/eth-global-2021. 21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect. https://docs.wakuconnect.dev/docs/examples/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/examples/ Examples # Here is the list of the code examples and the features they demonstrate. To run or studies the example, click on the code links. Minimal ReactJS Chat App # Code: relay-reactjs-chat. Demonstrates: Group chat React/JavaScript Waku Relay Protobuf using protons No async/await syntax Minimal ReactJS Waku Store App # Code: store-reactjs-chat. Demonstrates: Waku Store React/JavaScript Protobuf using protons Minimal Angular Chat App # Code: relay-angular-chat. https://docs.wakuconnect.dev/docs/crypto_libraries/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/crypto_libraries/ 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' crypto module. https://docs.wakuconnect.dev/docs/waku_protocols/ Thu, 09 Dec 2021 14:00:00 +0100 https://docs.wakuconnect.dev/docs/waku_protocols/ 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 ✔