<description>Create the DApp and Install Dependencies # Create React App # Create the new React app using the typescript template. Install the Waku Poll SDK packages.
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.</description>
It allows you to filter out the messages that your dApp processes, both when receiving live messages (Relay) or retrieving historical messages (Store).
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>
<description>Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user&rsquo;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.</description>
<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.
<description>Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user&rsquo;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.</description>
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &#34;VOTING_ADDRESS&#34;; const MULTICALL_ADDRESS = &#34;MULTICALL_ADDRESS&#34;; const DAPP_NAME = &#34;YOUR_DAPP_NAME&#34;; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
import { useWakuVoting } from &#34;@waku/vote-sdk-react-hooks&#34;; export function MainPage() { const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID); const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ); } Display Voting Component # Modify the MainPage to render a Voting component.</description>
<description>Retrieve Messages Using Waku Store # DApps running on a phone or in a browser are often offline: The browser could be closed or mobile app in the background.
Waku Relay is a gossip protocol. As a user, it means that your peers forward you messages they just received. If you cannot be reached by your peers, then messages are not relayed; relay peers do not save messages for later.</description>
<description>Encrypt Messages Using Waku Message Version 1 # The Waku Message format provides an easy way to encrypt messages using symmetric or asymmetric encryption. The encryption comes with several handy design requirements: confidentiality, authenticity and integrity. It also allows the sender to sign messages, see Sign Messages Using Waku Message Version 1 to learn how.
<description>Sign Messages Using Waku Message Version 1 # The Waku Message format provides an easy way to sign messages using elliptic curve cryptography.
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>
<description>Send and Receive Messages Using Waku Relay With Angular v13 # It is easy to use Waku Connect with Angular v13.
In this guide, we will demonstrate how your Angular dApp can use Waku Relay to send and receive messages.
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics.
For this guide, we are using a single content topic: /relay-angular-chat/1/chat/proto.</description>
<description>Receive and Send Messages Using Waku Relay With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to send and receive messages.
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics. For this guide, we are using a single content topic: /min-react-js-chat/1/chat/proto.</description>
</item>
<item>
<title>Retrieve Messages Using Waku Store With ReactJS</title>
<description>Retrieve Messages Using Waku Store With ReactJS # It is easy to use Waku Connect with ReactJS. In this guide, we will demonstrate how your ReactJS dApp can use Waku Store to retrieve messages.
<description>How to Debug your Waku dApp # 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&rsquo;s console, you need to modify the local storage and add debug key.</description>
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.
<description>Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&rsquo;ll start by adding a button to create a poll.
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
<description>Poll Creation Component # The Poll SDK provides an off-the-shelf component to create a new poll: PollCreation. It takes in a WakuPolling hook that can created with useWakuPolling.
appName: Your app name. It is used to generate a unique content topic for your polls. See How to Choose a Content Topic for more information. tokenAddress: The address of your ERC-20 token. Only token holders can create and answer polls.</description>
npm install js-waku # or with yarn yarn add js-waku Start a waku node # import { Waku } from &#34;js-waku&#34;; const waku = await Waku.create({ bootstrap: { default: true } }); Listen for messages # The contentTopic is a metadata string that allows categorization of messages on the waku network.</description>
<description>Use Cases # Waku is a generalized communication network. It can enable numerous use cases, both person-to-person (e.g. messenger) and machine-to-machine (e.g. state channels).
This is a non-exhaustive list of use cases that we have considered and their current status.
If we are aware of other projects using js-waku and other use cases that could be implemented, feel free to open a PR.
Legend:
Live: We are aware of projects who have implemented this use case.</description>
<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.
<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' crypto module.</description>
