mirror of
https://github.com/acid-info/docs.wakuconnect.dev.git
synced 2025-02-20 13:48:10 +00:00
Update documentation
This commit is contained in:
parent
72a399008e
commit
bdbe6045e4
2
404.html
2
404.html
@ -16,7 +16,7 @@
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
|
||||
BIN
assets/voting_sdk/Voting_Main_Page.png
Normal file
BIN
assets/voting_sdk/Voting_Main_Page.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
assets/voting_sdk/proposal_card.png
Normal file
BIN
assets/voting_sdk/proposal_card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
assets/voting_sdk/proposal_creation.gif
Normal file
BIN
assets/voting_sdk/proposal_creation.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 965 KiB |
@ -17,7 +17,7 @@
|
||||
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/categories/" title="Categories">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/categories/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
@ -310,6 +310,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -323,7 +380,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -336,7 +393,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -349,7 +406,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -362,7 +450,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -375,7 +463,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -21,7 +21,7 @@ Symmetric encryption # Uses SubtleCrypto Web API (browser) or NodeJS' crypt
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -309,6 +309,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -322,7 +379,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -335,7 +392,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -348,7 +405,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -361,7 +449,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -374,7 +462,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -27,7 +27,7 @@ Demonstrates:
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -315,6 +315,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -328,7 +385,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -341,7 +398,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -354,7 +411,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -367,7 +455,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -380,7 +468,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -25,7 +25,7 @@ The format for content topics is as follows:
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -313,6 +313,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -326,7 +383,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -339,7 +396,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -352,7 +409,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -365,7 +453,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -378,7 +466,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -14,14 +14,14 @@ For this guide, we are using a single content topic: /relay-guide/1/chat/proto."
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
|
||||
<meta property="article:modified_time" content="2022-01-31T10:39:20+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-08T23:06:38+00:00" />
|
||||
|
||||
<title>Receive and Send Messages Using Waku Relay | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -309,6 +309,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -322,7 +379,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -335,7 +392,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -348,7 +405,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -361,7 +449,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -374,7 +462,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -585,7 +673,7 @@ If you want to bootstrap to your own nodes, you can pass an array of multiaddres
|
||||
<p>When using the <code>bootstrap</code> option, it may take some time to connect to other peers.
|
||||
To ensure that you have relay peers available to send and receive messages,
|
||||
use the following function:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>();
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForRemotePeer</span>();
|
||||
</code></pre></div><p>The returned <code>Promise</code> will resolve once you are connected to a Waku Relay peer.</p>
|
||||
<h1 id="receive-messages">
|
||||
Receive messages
|
||||
@ -732,9 +820,9 @@ you need to extract the protobuf payload and decode it using <code>protons</code
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/b8e0400a02fe55879897187c3582d8844fa6a9b2" title='Last modified by Franck R | Jan 30, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/bba925848c6b5ba0e275b79a275cc3bc3ee22a8b" title='Last modified by jemboh | Feb 8, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 30, 2022</span>
|
||||
<span>Feb 8, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -12,14 +12,14 @@ Waku Relay is a gossip protocol. As a user, it means that your peers forward you
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
|
||||
<meta property="article:modified_time" content="2022-01-31T10:39:20+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-08T23:06:38+00:00" />
|
||||
|
||||
<title>Retrieve Messages Using Waku Store | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -307,6 +307,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -320,7 +377,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -333,7 +390,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -346,7 +403,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -359,7 +447,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -372,7 +460,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -593,7 +681,7 @@ If you want to bootstrap to your own nodes, you can pass an array of multiaddres
|
||||
<p>When using the <code>bootstrap</code> option, it may take some times to connect to other peers.
|
||||
To ensure that you have store peers available to retrieve historical messages from,
|
||||
use the following function:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>();
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForRemotePeer</span>();
|
||||
</code></pre></div><p>The returned Promise will resolve once you are connected to a Waku Store peer.</p>
|
||||
<h1 id="use-protobuf">
|
||||
Use Protobuf
|
||||
@ -717,9 +805,9 @@ By default, js-waku sets the timestamp of outgoing message to the current time.<
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/b8e0400a02fe55879897187c3582d8844fa6a9b2" title='Last modified by Franck R | Jan 30, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/bba925848c6b5ba0e275b79a275cc3bc3ee22a8b" title='Last modified by jemboh | Feb 8, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 30, 2022</span>
|
||||
<span>Feb 8, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ See Cryptographic Libraries for more details on the cryptographic libraries used
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -309,6 +309,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -322,7 +379,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -335,7 +392,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -348,7 +405,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -361,7 +449,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -374,7 +462,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -25,7 +25,7 @@ Create new keypair # Generate a new keypair to sign your messages:" />
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -313,6 +313,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -326,7 +383,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -339,7 +396,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -352,7 +409,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -365,7 +453,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -378,7 +466,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -12,14 +12,14 @@ The Waku Relay protocol sends messages to connected peers but does not provide a
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
|
||||
<meta property="article:modified_time" content="2022-01-31T10:39:20+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-08T23:06:38+00:00" />
|
||||
|
||||
<title>Send Messages Using Waku Light Push | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -307,6 +307,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -320,7 +377,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -333,7 +390,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -346,7 +403,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -359,7 +447,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -372,7 +460,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -586,7 +674,7 @@ If you want to bootstrap to your own nodes, you can pass an array of multiaddres
|
||||
<p>When using the <code>bootstrap</code> option, it may take some time to connect to other peers.
|
||||
To ensure that you have a light push peer available to send messages to,
|
||||
use the following function:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>();
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">await</span> <span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForRemotePeer</span>();
|
||||
</code></pre></div><p>The returned <code>Promise</code> will resolve once you are connected to a Waku peer.</p>
|
||||
<h1 id="send-messages">
|
||||
Send messages
|
||||
@ -616,9 +704,9 @@ The peer is selected among the dApp’s connected peers.</p>
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/b8e0400a02fe55879897187c3582d8844fa6a9b2" title='Last modified by Franck R | Jan 30, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/bba925848c6b5ba0e275b79a275cc3bc3ee22a8b" title='Last modified by jemboh | Feb 8, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 30, 2022</span>
|
||||
<span>Feb 8, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -12,14 +12,14 @@ Before starting, you need to choose a Content Topic for your dApp. Check out the
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
|
||||
<meta property="article:modified_time" content="2022-01-27T11:18:41+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-08T23:06:38+00:00" />
|
||||
|
||||
<title>Receive and Send Messages Using Waku Relay With ReactJS | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -307,6 +307,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -320,7 +377,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -333,7 +390,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -346,7 +403,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -359,7 +447,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -372,7 +460,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -725,7 +813,7 @@ Go to <code>App.js</code> and modify the <code>App</code> function:</p>
|
||||
</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>
|
||||
use the <code>Waku.waitForRemotePeer()</code> async function:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() => {
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!!</span><span style="color:#a6e22e">waku</span>) <span style="color:#66d9ef">return</span>;
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">"None"</span>) <span style="color:#66d9ef">return</span>;
|
||||
@ -735,7 +823,7 @@ use the <code>Waku.waitForConnectedPeer()</code> async function:</p>
|
||||
<span style="color:#a6e22e">Waku</span>.<span style="color:#a6e22e">create</span>({ <span style="color:#a6e22e">bootstrap</span><span style="color:#f92672">:</span> { <span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> } }).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">waku</span>) => {
|
||||
<span style="color:#a6e22e">setWaku</span>(<span style="color:#a6e22e">waku</span>);
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Connecting"</span>);
|
||||
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>().<span style="color:#a6e22e">then</span>(() => {
|
||||
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForRemotePeer</span>().<span style="color:#a6e22e">then</span>(() => {
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Ready"</span>);
|
||||
});
|
||||
});
|
||||
@ -919,9 +1007,9 @@ Try out by opening the app from different browsers.</p>
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/bba925848c6b5ba0e275b79a275cc3bc3ee22a8b" title='Last modified by jemboh | Feb 8, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 27, 2022</span>
|
||||
<span>Feb 8, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -14,14 +14,14 @@ Waku Relay is a gossip protocol. As a user, it means that your peers forward you
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
|
||||
<meta property="article:modified_time" content="2022-02-02T11:56:14+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-08T23:06:38+00:00" />
|
||||
|
||||
<title>Retrieve Messages Using Waku Store With ReactJS | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -309,6 +309,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -322,7 +379,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -335,7 +392,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -348,7 +405,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -361,7 +449,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -374,7 +462,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -752,13 +840,13 @@ Go to <code>App.js</code> and modify the <code>App</code> function:</p>
|
||||
</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>
|
||||
use the <code>Waku.waitForRemotePeer()</code> async function:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">React</span>.<span style="color:#a6e22e">useEffect</span>(() => {
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">waku</span>) <span style="color:#66d9ef">return</span>;
|
||||
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">"Connected"</span>) <span style="color:#66d9ef">return</span>;
|
||||
|
||||
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>().<span style="color:#a6e22e">then</span>(() => {
|
||||
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForRemotePeer</span>().<span style="color:#a6e22e">then</span>(() => {
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Connected"</span>);
|
||||
});
|
||||
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
|
||||
@ -923,7 +1011,7 @@ You will pass <code>processMessages</code> as a <code>callback</code> option to
|
||||
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">wakuStatus</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">"Connected"</span>) <span style="color:#66d9ef">return</span>;
|
||||
|
||||
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForConnectedPeer</span>().<span style="color:#a6e22e">then</span>(() => {
|
||||
<span style="color:#a6e22e">waku</span>.<span style="color:#a6e22e">waitForRemotePeer</span>().<span style="color:#a6e22e">then</span>(() => {
|
||||
<span style="color:#a6e22e">setWakuStatus</span>(<span style="color:#e6db74">"Connected"</span>);
|
||||
});
|
||||
}, [<span style="color:#a6e22e">waku</span>, <span style="color:#a6e22e">wakuStatus</span>]);
|
||||
@ -1038,9 +1126,9 @@ By default, js-waku sets the timestamp of outgoing message to the current time.<
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/9f9d3eb6b803b31e514a75d7b047eeb81268e76b" title='Last modified by Franck R | Feb 2, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/bba925848c6b5ba0e275b79a275cc3bc3ee22a8b" title='Last modified by jemboh | Feb 8, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Feb 2, 2022</span>
|
||||
<span>Feb 8, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ export DEBUG=* Browser # To see the debug logs in your browser’s console,
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -315,6 +315,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -328,7 +385,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -341,7 +398,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -354,7 +411,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -367,7 +455,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -380,7 +468,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
@ -304,6 +304,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -317,7 +374,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -330,7 +387,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -343,7 +400,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -356,7 +444,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -369,7 +457,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -4,24 +4,26 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Create the DApp and Install Dependencies # Create React App # Create the new React app using the typescript template. Install the Waku Poll SDK packages.
|
||||
In this guide, we use useDApp to access the blockchain.
|
||||
yarn create react-app poll-dapp-ts --template typescript cd poll-dapp-ts yarn add \ @waku/poll-sdk-react-components @waku/poll-sdk-react-hooks @waku/vote-poll-sdk-react-components \ @usedapp/core@0.4.7 yarn add -D @types/styled-components @usedapp/core must be frozen to version 0.4.7 due to incompatibility between minor versions of ethers.">
|
||||
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.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Create the DApp and Install Dependencies" />
|
||||
<meta property="og:description" content="Create the DApp and Install Dependencies # Create React App # Create the new React app using the typescript template. Install the Waku Poll SDK packages.
|
||||
In this guide, we use useDApp to access the blockchain.
|
||||
yarn create react-app poll-dapp-ts --template typescript cd poll-dapp-ts yarn add \ @waku/poll-sdk-react-components @waku/poll-sdk-react-hooks @waku/vote-poll-sdk-react-components \ @usedapp/core@0.4.7 yarn add -D @types/styled-components @usedapp/core must be frozen to version 0.4.7 due to incompatibility between minor versions of ethers." />
|
||||
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." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" /><meta property="article:section" content="docs" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-01-27T11:18:41+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-04T03:44:23+01:00" />
|
||||
|
||||
<title>Create the DApp and Install Dependencies | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -309,6 +311,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class=" active">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -322,7 +381,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class=" active">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -335,7 +394,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -348,7 +407,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -361,7 +451,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -374,7 +464,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -550,20 +640,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
</h2>
|
||||
<p>Create the new React app using the <code>typescript</code> template.
|
||||
Install the Waku Poll SDK packages.</p>
|
||||
<p>In this guide, we use <a href="https://usedapp.io/">useDApp</a> to access the blockchain.</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">yarn create react-app poll-dapp-ts --template typescript
|
||||
cd poll-dapp-ts
|
||||
yarn add <span style="color:#ae81ff">\
|
||||
</span><span style="color:#ae81ff"></span>@waku/poll-sdk-react-components @waku/poll-sdk-react-hooks @waku/vote-poll-sdk-react-components <span style="color:#ae81ff">\
|
||||
</span><span style="color:#ae81ff"></span>@usedapp/core@0.4.7
|
||||
yarn add -D @types/styled-components
|
||||
</code></pre></div><blockquote class="book-hint warning">
|
||||
<p><code>@usedapp/core</code> must be frozen to version <code>0.4.7</code> due to incompatibility between minor versions of <code>ethers</code>.</p>
|
||||
<p>Waku Connect Vote & Poll SDK will be upgraded to the latest version of <code>@usedapp/core</code> and <code>ethers</code> once <code>ethereum-waffle</code>
|
||||
is released with the <a href="https://github.com/EthWorks/Waffle/pull/603">latest version of <code>ethers</code></a>.</p>
|
||||
|
||||
</blockquote>
|
||||
|
||||
<p>To connect dapp with Wallet you can use any package that is compatible with ethers Web3Provider (e.g. <code>@usedapp</code>, <code>web3-react</code>).</p>
|
||||
<h2 id="setup-polyfills">
|
||||
Setup polyfills
|
||||
<a class="anchor" href="#setup-polyfills">#</a>
|
||||
@ -634,7 +711,7 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/" class="book-btn">
|
||||
<a href="/docs/guides/vote_poll_sdk/dapp_creation/" class="book-btn">
|
||||
Back
|
||||
</a>
|
||||
|
||||
@ -644,7 +721,7 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="book-btn">
|
||||
<a href="/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="book-btn">
|
||||
Next: Connect to the Ethereum Wallet
|
||||
</a>
|
||||
</p>
|
||||
@ -657,16 +734,16 @@ then you can inspire yourself from this <a href="https://github.com/status-im/wa
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 27, 2022</span>
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp.md" target="_blank" rel="noopener">
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
@ -0,0 +1,885 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user’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.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Connect to the Ethereum Wallet" />
|
||||
<meta property="og:description" content="Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user’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." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-04T03:44:23+01:00" />
|
||||
|
||||
<title>Connect to the Ethereum Wallet | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body dir="ltr">
|
||||
<input type="checkbox" class="hidden toggle" id="menu-control" />
|
||||
<input type="checkbox" class="hidden toggle" id="toc-control" />
|
||||
<main class="container flex">
|
||||
<aside class="book-menu">
|
||||
<div class="book-menu-content">
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
|
||||
<div class="book-search">
|
||||
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
|
||||
<div class="book-search-spinner hidden"></div>
|
||||
<ul id="book-search-results"></ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="book-languages">
|
||||
<li>
|
||||
<input type="checkbox" id="languages" class="toggle" />
|
||||
<label for="languages" class="flex justify-between">
|
||||
<a role="button" class="flex align-center">
|
||||
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
|
||||
English
|
||||
</a>
|
||||
</label>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/es/">
|
||||
Español
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/pt/">
|
||||
Português
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations & Videos</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class=" active">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
|
||||
JS-Waku API Doc
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://vac.dev/" target="_blank" rel="noopener">
|
||||
Vac Team
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
|
||||
Vac RFCs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://status.im/" target="_blank" rel="noopener">
|
||||
Status.im
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="book-page">
|
||||
<header class="book-header">
|
||||
|
||||
<div class="flex align-center justify-between">
|
||||
<label for="menu-control">
|
||||
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
|
||||
</label>
|
||||
|
||||
<strong>Connect to the Ethereum Wallet</strong>
|
||||
|
||||
<label for="toc-control">
|
||||
|
||||
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
|
||||
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<aside class="hidden clearfix">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#connect-to-the-ethereum-wallet">Connect to the Ethereum Wallet</a>
|
||||
<ul>
|
||||
<li><a href="#hook-for-connecting-to-wallet">Hook for connecting to Wallet</a></li>
|
||||
<li><a href="#top-bar">Top bar</a></li>
|
||||
<li><a href="#page">Page</a>
|
||||
<ul>
|
||||
<li><a href="#styled-components">Styled-components</a></li>
|
||||
<li><a href="#render">Render</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="connect-to-the-ethereum-wallet">
|
||||
Connect to the Ethereum Wallet
|
||||
<a class="anchor" href="#connect-to-the-ethereum-wallet">#</a>
|
||||
</h1>
|
||||
<blockquote class="book-hint info">
|
||||
This section may be skipped if you are adding the poll feature to an existing dApp
|
||||
that already connects to the user’s wallet.
|
||||
If you want to use <code>ethers</code> as a package to connect to web3 wallet you can follow this guide and skip the next step.
|
||||
Next step demonstrates how to use <code>@useDapp</code> for this purpose.
|
||||
</blockquote>
|
||||
|
||||
<p>In this we will use <code>ethers</code> to keep amount of dependencies to minimum but feel free to use other packages.</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">yarn add ethers@5.4.6
|
||||
</code></pre></div><blockquote class="book-hint warning">
|
||||
The SDK use <code>ethers</code> version 5.4.6 due to incompatibility between minor versions it is recomended to use this version.
|
||||
</blockquote>
|
||||
|
||||
<p>Delete the template <code>App</code> component:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">rm -f App.tsx App.css App.test.tsx
|
||||
</code></pre></div><h2 id="hook-for-connecting-to-wallet">
|
||||
Hook for connecting to Wallet
|
||||
<a class="anchor" href="#hook-for-connecting-to-wallet">#</a>
|
||||
</h2>
|
||||
<p>In this example we will use this <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/blob/12bcd17c963106e9207b06182bc5f6379f771b99/examples/mainnet-poll/src/hooks/useWeb3Connect.ts">hook</a> to connect to a Wallet.</p>
|
||||
<p>Keep in mind this hook is barebones and can’t handle multiple networks, in next chapter it will be shown how to use different web3 connector.</p>
|
||||
<h2 id="top-bar">
|
||||
Top bar
|
||||
<a class="anchor" href="#top-bar">#</a>
|
||||
</h2>
|
||||
<p>Use <code>TopBar</code> component to display wallet information.
|
||||
For that, create a <code>PollPage</code> component that includes the top bar and will include the poll elements.
|
||||
The component uses <code>ethers</code> to connect to the user’s wallet:</p>
|
||||
<p><code>MULTICALL_ADDRESS</code> is an address to mutical smart contract that allows aggregating multiple contract calls into one, thus reducing number of calls to blockchain needed.</p>
|
||||
<p>Example multicall addresses:
|
||||
- Mainnet: <code>0xeefba1e63905ef1d7acba5a8513c70307c1ce441</code>,
|
||||
- Ropsten: <code>0x53c43764255c17bd724f74c4ef150724ac50a3ed</code></p>
|
||||
<p>But if you want you can deploy your own multicall smart contract.</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'0xeefba1e63905ef1d7acba5a8513c70307c1ce441'</span>
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span>
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage() {</span>
|
||||
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">pollingIcon</span>}
|
||||
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
|
||||
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">'WakuConnect Poll Demo'</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
|
||||
/>
|
||||
<span style="color:#75715e">//Place for poll or vote component
|
||||
</span><span style="color:#75715e"></span> </<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
</code></pre></div><h2 id="page">
|
||||
Page
|
||||
<a class="anchor" href="#page">#</a>
|
||||
</h2>
|
||||
<h3 id="styled-components">
|
||||
Styled-components
|
||||
<a class="anchor" href="#styled-components">#</a>
|
||||
</h3>
|
||||
<p><a href="https://styled-components.com/"><code>styled-components</code></a> is used for easy styling.
|
||||
Create a <code>Wrapper</code> variable to use in the page component:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'styled-components'</span>
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
|
||||
</span><span style="color:#e6db74"> height: 100%;
|
||||
</span><span style="color:#e6db74"> width: 100%;
|
||||
</span><span style="color:#e6db74">`</span>
|
||||
</code></pre></div><h3 id="render">
|
||||
Render
|
||||
<a class="anchor" href="#render">#</a>
|
||||
</h3>
|
||||
<p>Finally, create the <code>App</code> component:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span> />
|
||||
<<span style="color:#f92672">MainPage</span>/>
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
</code></pre></div><p>Your <code>index.tsx</code> should now be:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react'</span>
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'styled-components'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Poll</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'./components/Poll'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">pollingIcon</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'./assets/images/pollingIcon.png'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">orangeTheme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'</span>
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react-dom'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">BrowserRouter</span>, <span style="color:#a6e22e">useLocation</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react-router-dom'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Route</span>, <span style="color:#a6e22e">Switch</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react-router'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWeb3Connect</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'./hooks/useWeb3Connect'</span>
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'0xeefba1e63905ef1d7acba5a8513c70307c1ce441'</span>
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span>
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage</span>({ <span style="color:#a6e22e">tokenAddress</span> }<span style="color:#f92672">:</span> { <span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span> }) {
|
||||
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">pollingIcon</span>}
|
||||
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
|
||||
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">'WakuConnect Poll Demo'</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
|
||||
/>
|
||||
<span style="color:#75715e">//Place for poll or vote component
|
||||
</span><span style="color:#75715e"></span> </<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">location</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useLocation</span>()
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tokenAddress</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">URLSearchParams</span>(<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">search</span>).<span style="color:#66d9ef">get</span>(<span style="color:#e6db74">'token'</span>)
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span> />
|
||||
<<span style="color:#f92672">MainPage</span> <span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">tokenAddress</span> <span style="color:#f92672">??</span> <span style="color:#a6e22e">TOKEN_ADDRESS</span>} />
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
|
||||
</span><span style="color:#e6db74"> height: 100%;
|
||||
</span><span style="color:#e6db74"> width: 100%;
|
||||
</span><span style="color:#e6db74">`</span>
|
||||
|
||||
<span style="color:#a6e22e">ReactDOM</span>.<span style="color:#a6e22e">render</span>(
|
||||
<<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{ <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'100%'</span> }}>
|
||||
<<span style="color:#f92672">BrowserRouter</span>>
|
||||
<<span style="color:#f92672">Switch</span>>
|
||||
<<span style="color:#f92672">Route</span> <span style="color:#a6e22e">exact</span> <span style="color:#a6e22e">path</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/"</span> <span style="color:#a6e22e">component</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">App</span>} />
|
||||
</<span style="color:#f92672">Switch</span>>
|
||||
</<span style="color:#f92672">BrowserRouter</span>>
|
||||
</<span style="color:#f92672">div</span>>,
|
||||
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'root'</span>)
|
||||
)
|
||||
</code></pre></div><p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="book-btn">
|
||||
Back
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="book-btn">
|
||||
Next: Connect using useDapp
|
||||
</a>
|
||||
</p>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<footer class="book-footer">
|
||||
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<div class="book-comments">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<label for="menu-control" class="hidden book-menu-overlay"></label>
|
||||
</div>
|
||||
|
||||
|
||||
<aside class="book-toc">
|
||||
<div class="book-toc-content">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#connect-to-the-ethereum-wallet">Connect to the Ethereum Wallet</a>
|
||||
<ul>
|
||||
<li><a href="#hook-for-connecting-to-wallet">Hook for connecting to Wallet</a></li>
|
||||
<li><a href="#top-bar">Top bar</a></li>
|
||||
<li><a href="#page">Page</a>
|
||||
<ul>
|
||||
<li><a href="#styled-components">Styled-components</a></li>
|
||||
<li><a href="#render">Render</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -3,23 +3,23 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user’s wallet. Delete the template App component:
|
||||
rm -f App.tsx App.css App.test.tsx Top bar # Use TopBar component to display wallet information. For that, create a PollPage component that includes the top bar and will include the poll elements. The component uses ethers to connect to the user’s wallet:">
|
||||
<meta name="description" content="Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user’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.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Connect to the Ethereum Wallet" />
|
||||
<meta property="og:description" content="Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user’s wallet. Delete the template App component:
|
||||
rm -f App.tsx App.css App.test.tsx Top bar # Use TopBar component to display wallet information. For that, create a PollPage component that includes the top bar and will include the poll elements. The component uses ethers to connect to the user’s wallet:" />
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Connect to the Ethereum Wallet useDapp" />
|
||||
<meta property="og:description" content="Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user’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." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" /><meta property="article:section" content="docs" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-04T03:44:23+01:00" />
|
||||
|
||||
<title>Connect to the Ethereum Wallet | Waku Connect Docs</title>
|
||||
<title>Connect to the Ethereum Wallet useDapp | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -307,6 +307,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class=" active">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -320,7 +377,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -333,7 +390,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class=" active">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -346,7 +403,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -359,7 +447,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -372,7 +460,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -498,7 +586,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
|
||||
</label>
|
||||
|
||||
<strong>Connect to the Ethereum Wallet</strong>
|
||||
<strong>Connect to the Ethereum Wallet useDapp</strong>
|
||||
|
||||
<label for="toc-control">
|
||||
|
||||
@ -545,6 +633,17 @@ https://github.com/alex-shpak/hugo-book
|
||||
<blockquote class="book-hint info">
|
||||
This section may be skipped if you are adding the poll feature to an existing dApp
|
||||
that already connects to the user’s wallet.
|
||||
This section can be used instead of previous step.
|
||||
It demonstrates how to use <code>@useDapp</code> for wallet connection.
|
||||
</blockquote>
|
||||
|
||||
<p>In this guide, we use <a href="https://usedapp.io/">useDApp</a> to access the blockchain.</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">yarn add @usedapp/core@0.4.7
|
||||
</code></pre></div><blockquote class="book-hint warning">
|
||||
<p><code>@usedapp/core</code> must be frozen to version <code>0.4.7</code> due to incompatibility between minor versions of <code>ethers</code>.</p>
|
||||
<p>Waku Connect Vote & Poll SDK will be upgraded to the latest version of <code>@usedapp/core</code> and <code>ethers</code> once <code>ethereum-waffle</code>
|
||||
is released with the <a href="https://github.com/EthWorks/Waffle/pull/603">latest version of <code>ethers</code></a>.</p>
|
||||
|
||||
</blockquote>
|
||||
|
||||
<p>Delete the template <code>App</code> component:</p>
|
||||
@ -592,27 +691,22 @@ The component uses <code>ethers</code> to connect to the user’s wallet:</p
|
||||
<a class="anchor" href="#usedapp">#</a>
|
||||
</h3>
|
||||
<p>Create a <code>config</code> variable that contains the Ethereum network parameters:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">DEFAULT_CONFIG</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/dist/cjs/src/model/config/default"</span>;
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@usedapp/core'</span>;
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> {
|
||||
<span style="color:#a6e22e">readOnlyChainId</span>: <span style="color:#66d9ef">ChainId.Mainnet</span>,
|
||||
<span style="color:#a6e22e">readOnlyUrls</span><span style="color:#f92672">:</span> {
|
||||
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span> <span style="color:#e6db74">"https://mainnet.infura.io/v3/your-infura-token"</span>,
|
||||
},
|
||||
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
|
||||
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"0xeefba1e63905ef1d7acba5a8513c70307c1ce441"</span>,
|
||||
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"0x53c43764255c17bd724f74c4ef150724ac50a3ed"</span>,
|
||||
<span style="color:#a6e22e">1337</span>:
|
||||
<span style="color:#66d9ef">process.env.GANACHE_MULTICALL_CONTRACT</span> <span style="color:#f92672">??</span>
|
||||
<span style="color:#e6db74">"0x0000000000000000000000000000000000000000"</span>,
|
||||
},
|
||||
<span style="color:#a6e22e">supportedChains</span><span style="color:#f92672">:</span> [...<span style="color:#a6e22e">DEFAULT_CONFIG</span>.<span style="color:#a6e22e">supportedChains</span>, <span style="color:#ae81ff">1337</span>],
|
||||
<span style="color:#a6e22e">notifications</span><span style="color:#f92672">:</span> {
|
||||
<span style="color:#a6e22e">checkInterval</span>: <span style="color:#66d9ef">500</span>,
|
||||
<span style="color:#a6e22e">expirationPeriod</span>: <span style="color:#66d9ef">50000</span>,
|
||||
},
|
||||
};
|
||||
<span style="color:#a6e22e">readOnlyChainId</span>: <span style="color:#66d9ef">ChainId.Mainnet</span>,
|
||||
<span style="color:#a6e22e">readOnlyUrls</span><span style="color:#f92672">:</span> {
|
||||
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span> <span style="color:#e6db74">'https://mainnet.infura.io/v3/your-infura-token'</span>,
|
||||
},
|
||||
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
|
||||
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'0xeefba1e63905ef1d7acba5a8513c70307c1ce441'</span>,
|
||||
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'0x53c43764255c17bd724f74c4ef150724ac50a3ed'</span>,
|
||||
},
|
||||
<span style="color:#a6e22e">notifications</span><span style="color:#f92672">:</span> {
|
||||
<span style="color:#a6e22e">checkInterval</span>: <span style="color:#66d9ef">500</span>,
|
||||
<span style="color:#a6e22e">expirationPeriod</span>: <span style="color:#66d9ef">50000</span>,
|
||||
},
|
||||
}
|
||||
</code></pre></div><p>Replace <code>your-infura-token</code> with your <a href="https://infura.io/docs/ethereum">Infura API token</a>.</p>
|
||||
<h3 id="styled-components">
|
||||
Styled-components
|
||||
@ -631,84 +725,79 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
|
||||
<a class="anchor" href="#render">#</a>
|
||||
</h3>
|
||||
<p>Finally, create the <code>App</code> component:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span> />
|
||||
<<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}>
|
||||
<<span style="color:#f92672">PollPage</span> />
|
||||
</<span style="color:#f92672">DAppProvider</span>>
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
);
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span>/>
|
||||
<<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}>
|
||||
<<span style="color:#f92672">PollPage</span>/>
|
||||
</<span style="color:#f92672">DAppProvider</span>>
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
</code></pre></div><p>Your <code>index.tsx</code> should now be:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, { <span style="color:#a6e22e">useEffect</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"react"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"react-dom"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">"./index.css"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@ethersproject/providers"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">orangeTheme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components/dist/cjs/src/style/themes"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">DEFAULT_CONFIG</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/dist/cjs/src/model/config/default"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"styled-components"</span>;
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ChainId</span>, <span style="color:#a6e22e">DAppProvider</span>, <span style="color:#a6e22e">useEthers</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@usedapp/core'</span>;
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components'</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, {<span style="color:#a6e22e">useEffect</span>, <span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react'</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react-dom'</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">'./index.css'</span>;
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">JsonRpcSigner</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@ethersproject/providers"</span>;
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components/dist/cjs/src/style/themes"</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'styled-components'</span>
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> {
|
||||
<span style="color:#a6e22e">readOnlyChainId</span>: <span style="color:#66d9ef">ChainId.Mainnet</span>,
|
||||
<span style="color:#a6e22e">readOnlyUrls</span><span style="color:#f92672">:</span> {
|
||||
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span>
|
||||
<span style="color:#e6db74">"https://mainnet.infura.io/v3/b4451d780cc64a078ccf2181e872cfcf"</span>,
|
||||
},
|
||||
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
|
||||
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"0xeefba1e63905ef1d7acba5a8513c70307c1ce441"</span>,
|
||||
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">"0x53c43764255c17bd724f74c4ef150724ac50a3ed"</span>,
|
||||
<span style="color:#a6e22e">1337</span>:
|
||||
<span style="color:#66d9ef">process.env.GANACHE_MULTICALL_CONTRACT</span> <span style="color:#f92672">??</span>
|
||||
<span style="color:#e6db74">"0x0000000000000000000000000000000000000000"</span>,
|
||||
},
|
||||
<span style="color:#a6e22e">supportedChains</span><span style="color:#f92672">:</span> [...<span style="color:#a6e22e">DEFAULT_CONFIG</span>.<span style="color:#a6e22e">supportedChains</span>, <span style="color:#ae81ff">1337</span>],
|
||||
<span style="color:#a6e22e">notifications</span><span style="color:#f92672">:</span> {
|
||||
<span style="color:#a6e22e">checkInterval</span>: <span style="color:#66d9ef">500</span>,
|
||||
<span style="color:#a6e22e">expirationPeriod</span>: <span style="color:#66d9ef">50000</span>,
|
||||
},
|
||||
};
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
|
||||
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>();
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<span style="color:#66d9ef">undefined</span>);
|
||||
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></span> {
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
|
||||
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
|
||||
} <span style="color:#66d9ef">else</span> {
|
||||
<span style="color:#75715e">// Deactivate signer if signed out
|
||||
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>);
|
||||
}
|
||||
}, [<span style="color:#a6e22e">account</span>]);
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</span>}
|
||||
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
|
||||
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"Poll dApp"</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
|
||||
/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
);
|
||||
<span style="color:#a6e22e">readOnlyChainId</span>: <span style="color:#66d9ef">ChainId.Mainnet</span>,
|
||||
<span style="color:#a6e22e">readOnlyUrls</span><span style="color:#f92672">:</span> {
|
||||
[<span style="color:#a6e22e">ChainId</span>.<span style="color:#a6e22e">Mainnet</span>]<span style="color:#f92672">:</span> <span style="color:#e6db74">'https://mainnet.infura.io/v3/your-infura-token'</span>,
|
||||
},
|
||||
<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">:</span> {
|
||||
<span style="color:#ae81ff">1</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'0xeefba1e63905ef1d7acba5a8513c70307c1ce441'</span>,
|
||||
<span style="color:#ae81ff">3</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'0x53c43764255c17bd724f74c4ef150724ac50a3ed'</span>,
|
||||
},
|
||||
<span style="color:#a6e22e">notifications</span><span style="color:#f92672">:</span> {
|
||||
<span style="color:#a6e22e">checkInterval</span>: <span style="color:#66d9ef">500</span>,
|
||||
<span style="color:#a6e22e">expirationPeriod</span>: <span style="color:#66d9ef">50000</span>,
|
||||
},
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span> />
|
||||
<<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}>
|
||||
<<span style="color:#f92672">PollPage</span> />
|
||||
</<span style="color:#f92672">DAppProvider</span>>
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
);
|
||||
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
|
||||
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>()
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<span style="color:#66d9ef">undefined</span>)
|
||||
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></span> {
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
|
||||
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>())
|
||||
} <span style="color:#66d9ef">else</span> {
|
||||
<span style="color:#75715e">// Deactivate signer if signed out
|
||||
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>)
|
||||
}
|
||||
}, [<span style="color:#a6e22e">account</span>])
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</span>}
|
||||
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
|
||||
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">'Poll dApp'</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
|
||||
/>
|
||||
<span style="color:#75715e">//Place for poll or vote component
|
||||
</span><span style="color:#75715e"></span> </<span style="color:#f92672">div</span>>
|
||||
)
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span>/>
|
||||
<<span style="color:#f92672">DAppProvider</span> <span style="color:#a6e22e">config</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">config</span>}>
|
||||
<<span style="color:#f92672">PollPage</span>/>
|
||||
</<span style="color:#f92672">DAppProvider</span>>
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
|
||||
@ -722,26 +811,16 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
|
||||
</<span style="color:#f92672">React.StrictMode</span>>,
|
||||
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">"root"</span>)
|
||||
);
|
||||
</code></pre></div><p>
|
||||
</code></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="book-btn">
|
||||
<a href="/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="book-btn">
|
||||
Back
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="book-btn">
|
||||
Next: Create-A-Poll Button
|
||||
</a>
|
||||
</p>
|
||||
</article>
|
||||
|
||||
|
||||
@ -751,16 +830,16 @@ Create a <code>Wrapper</code> variable to use in the page component:</p>
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 24, 2022</span>
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet.md" target="_blank" rel="noopener">
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_useDapp.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
717
docs/guides/vote_poll_sdk/dapp_creation/index.html
Normal file
717
docs/guides/vote_poll_sdk/dapp_creation/index.html
Normal file
@ -0,0 +1,717 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Create a DApp # This part is the same for both Poll and Vote SDK.
|
||||
To demonstrate how to use the Waku Connect Poll/Vote SDK in your dApp, we will create a TypeScript React app from scratch.
|
||||
You can then adapt the steps depending on your dApp configuration and build setup.
|
||||
The Poll & Vote SDK features can only be used by token holders, you must pass the ERC20 token contract of your choice when using the SDK.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Create a DApp" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" />
|
||||
|
||||
<title>Create a DApp | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body dir="ltr">
|
||||
<input type="checkbox" class="hidden toggle" id="menu-control" />
|
||||
<input type="checkbox" class="hidden toggle" id="toc-control" />
|
||||
<main class="container flex">
|
||||
<aside class="book-menu">
|
||||
<div class="book-menu-content">
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
|
||||
<div class="book-search">
|
||||
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
|
||||
<div class="book-search-spinner hidden"></div>
|
||||
<ul id="book-search-results"></ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="book-languages">
|
||||
<li>
|
||||
<input type="checkbox" id="languages" class="toggle" />
|
||||
<label for="languages" class="flex justify-between">
|
||||
<a role="button" class="flex align-center">
|
||||
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
|
||||
English
|
||||
</a>
|
||||
</label>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/es/">
|
||||
Español
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/pt/">
|
||||
Português
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations & Videos</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class=" active">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
|
||||
JS-Waku API Doc
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://vac.dev/" target="_blank" rel="noopener">
|
||||
Vac Team
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
|
||||
Vac RFCs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://status.im/" target="_blank" rel="noopener">
|
||||
Status.im
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="book-page">
|
||||
<header class="book-header">
|
||||
|
||||
<div class="flex align-center justify-between">
|
||||
<label for="menu-control">
|
||||
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
|
||||
</label>
|
||||
|
||||
<strong>Create a DApp</strong>
|
||||
|
||||
<label for="toc-control">
|
||||
|
||||
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
|
||||
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<aside class="hidden clearfix">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#create-a-dapp">Create a DApp</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="create-a-dapp">
|
||||
Create a DApp
|
||||
<a class="anchor" href="#create-a-dapp">#</a>
|
||||
</h1>
|
||||
<p>This part is the same for both Poll and Vote SDK.</p>
|
||||
<p>To demonstrate how to use the Waku Connect Poll/Vote SDK in your dApp, we will create a TypeScript React app from scratch.</p>
|
||||
<p>You can then adapt the steps depending on your dApp configuration and build setup.</p>
|
||||
<p>The Poll & Vote SDK features can only be used by token holders,
|
||||
you must pass the ERC20 token contract of your choice when using the SDK.
|
||||
Hence, you need to have an ERC-20 token contract address ready.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="book-btn">
|
||||
Get Started
|
||||
</a>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<footer class="book-footer">
|
||||
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/dapp_creation/_index.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<div class="book-comments">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<label for="menu-control" class="hidden book-menu-overlay"></label>
|
||||
</div>
|
||||
|
||||
|
||||
<aside class="book-toc">
|
||||
<div class="book-toc-content">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#create-a-dapp">Create a DApp</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
42
docs/guides/vote_poll_sdk/dapp_creation/index.xml
Normal file
42
docs/guides/vote_poll_sdk/dapp_creation/index.xml
Normal file
@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Create a DApp on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/</link>
|
||||
<description>Recent content in Create a DApp on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Mon, 03 Jan 2022 11:00:00 +1100</lastBuildDate><atom:link href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
<title>Create the DApp and Install Dependencies</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/</guid>
|
||||
<description>Create the DApp and Install Dependencies # Create React App # Create the new React app using the typescript template. Install the Waku Poll SDK packages.
|
||||
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>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Connect to the Ethereum Wallet</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/</guid>
|
||||
<description>Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user&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>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Connect to the Ethereum Wallet useDapp</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/</guid>
|
||||
<description>Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user&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>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
@ -18,7 +18,7 @@ For both functionalities, only ERC-20 token holders can create or answer polls/v
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
@ -307,6 +307,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -320,7 +377,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -333,7 +390,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -346,7 +403,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -359,7 +447,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -372,7 +460,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -516,6 +604,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
<ul>
|
||||
<li><a href="#waku-connect-vote--poll-sdk">Waku Connect Vote & Poll SDK</a>
|
||||
<ul>
|
||||
<li><a href="#documentation">Documentation</a></li>
|
||||
<li><a href="#packages">Packages</a>
|
||||
<ul>
|
||||
<li><a href="#common">Common</a></li>
|
||||
@ -525,12 +614,12 @@ https://github.com/alex-shpak/hugo-book
|
||||
</li>
|
||||
<li><a href="#waku-connect-vote-sdk">Waku Connect Vote SDK</a>
|
||||
<ul>
|
||||
<li><a href="#documentation">Documentation</a></li>
|
||||
<li><a href="#documentation-1">Documentation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#waku-connect-poll-sdk">Waku Connect Poll SDK</a>
|
||||
<ul>
|
||||
<li><a href="#documentation-1">Documentation</a></li>
|
||||
<li><a href="#documentation-2">Documentation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -557,6 +646,12 @@ https://github.com/alex-shpak/hugo-book
|
||||
to vote (commitment to the blockchain) or poll (no interaction with the blockchain).</p>
|
||||
<p>For both functionalities, only ERC-20 token holders can create or answer polls/votes.
|
||||
The developer using the SDK can configure which ERC-20 token contract is used.</p>
|
||||
<h2 id="documentation">
|
||||
Documentation
|
||||
<a class="anchor" href="#documentation">#</a>
|
||||
</h2>
|
||||
<p>For either SDKs, you need to start by creating a dApp.
|
||||
To do so, you can follow the <a href="./dapp_creation">Create a DApp</a> instructions.</p>
|
||||
<h2 id="packages">
|
||||
Packages
|
||||
<a class="anchor" href="#packages">#</a>
|
||||
@ -598,24 +693,12 @@ Most token holders will not need to spend gas to vote.</p>
|
||||
where proposal creation and vote results must be committed to the blockchain.</p>
|
||||
<p>With Waku Connect Vote SDK, the DAO could be the one spending gas when creating the proposal and committing the votes,
|
||||
whereas the token holders do not spend gas when voting.</p>
|
||||
<h3 id="documentation">
|
||||
<h3 id="documentation-1">
|
||||
Documentation
|
||||
<a class="anchor" href="#documentation">#</a>
|
||||
<a class="anchor" href="#documentation-1">#</a>
|
||||
</h3>
|
||||
<blockquote class="book-hint info">
|
||||
The documentation effort is currently in progress.
|
||||
It is tracked with <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/issues/11">status-im/wakuconnect-vote-poll-sdk#11</a>.
|
||||
Contributions are welcome.
|
||||
</blockquote>
|
||||
|
||||
<p>You can find more information about the Vote SDK’s properties in the <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk#wakuconnect-vote-sdk">README</a>.</p>
|
||||
<p>A working example dApp that includes voting feature can be found in the <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/main/packages/example">repo</a>.</p>
|
||||
<blockquote class="book-hint warning">
|
||||
As the example is part of the yarn workspace,
|
||||
there may be issues with undeclared dependencies with this example.
|
||||
Tracked with <a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/issues/11">status-im/wakuconnect-vote-poll-sdk#11</a>.
|
||||
</blockquote>
|
||||
|
||||
<p>See <a href="./vote_sdk">How to Use the Waku Connect Vote SDK</a>.</p>
|
||||
<h2 id="waku-connect-poll-sdk">
|
||||
Waku Connect Poll SDK
|
||||
<a class="anchor" href="#waku-connect-poll-sdk">#</a>
|
||||
@ -638,9 +721,9 @@ The polls are not committed to the blockchain and hence do not cost gas.</p>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="documentation-1">
|
||||
<h3 id="documentation-2">
|
||||
Documentation
|
||||
<a class="anchor" href="#documentation-1">#</a>
|
||||
<a class="anchor" href="#documentation-2">#</a>
|
||||
</h3>
|
||||
<p>See <a href="./poll_sdk">How to Use the Waku Connect Poll SDK</a>.</p>
|
||||
</article>
|
||||
@ -652,9 +735,9 @@ The polls are not committed to the blockchain and hence do not cost gas.</p>
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 27, 2022</span>
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -699,6 +782,7 @@ The polls are not committed to the blockchain and hence do not cost gas.</p>
|
||||
<ul>
|
||||
<li><a href="#waku-connect-vote--poll-sdk">Waku Connect Vote & Poll SDK</a>
|
||||
<ul>
|
||||
<li><a href="#documentation">Documentation</a></li>
|
||||
<li><a href="#packages">Packages</a>
|
||||
<ul>
|
||||
<li><a href="#common">Common</a></li>
|
||||
@ -708,12 +792,12 @@ The polls are not committed to the blockchain and hence do not cost gas.</p>
|
||||
</li>
|
||||
<li><a href="#waku-connect-vote-sdk">Waku Connect Vote SDK</a>
|
||||
<ul>
|
||||
<li><a href="#documentation">Documentation</a></li>
|
||||
<li><a href="#documentation-1">Documentation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#waku-connect-poll-sdk">Waku Connect Poll SDK</a>
|
||||
<ul>
|
||||
<li><a href="#documentation-1">Documentation</a></li>
|
||||
<li><a href="#documentation-2">Documentation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -12,16 +12,16 @@ import styled from "styled-components"; const Wrapper = styled.div` disp
|
||||
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." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" /><meta property="article:section" content="docs" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-04T03:44:23+01:00" />
|
||||
|
||||
<title>Create-A-Poll Button | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -309,6 +309,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -322,7 +379,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class=" active">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -335,7 +392,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -348,7 +405,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class=" active">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -361,7 +449,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -374,7 +462,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -581,67 +669,51 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
|
||||
<p>Upon clicking the button, we set <code>showPollCreation</code> to true.
|
||||
<code>showPollCreation</code> will control when to render the poll creation modal.</p>
|
||||
<p><code>components/Poll.tsx</code>:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"react"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@ethersproject/providers"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes"</span>;
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useMemo</span>, <span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Web3Provider</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@ethersproject/providers'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">CreateButton</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Theme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'</span>
|
||||
|
||||
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</span> {
|
||||
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
|
||||
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>;
|
||||
};
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({ <span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">theme</span> }<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>);
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{
|
||||
<<span style="color:#f92672">CreateButton</span>
|
||||
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
|
||||
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">"lightgrey"</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
|
||||
}}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
|
||||
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
|
||||
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
|
||||
>
|
||||
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
|
||||
</<span style="color:#f92672">CreateButton</span>>
|
||||
}
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
);
|
||||
<span style="color:#a6e22e">account</span>: <span style="color:#66d9ef">string</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">null</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
|
||||
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>
|
||||
}
|
||||
</code></pre></div><p>Now update the <code>PollPage</code> component to render the new <code>Poll</code> component:</p>
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">theme</span>}<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useMemo</span>(() <span style="color:#f92672">=></span> <span style="color:#f92672">!</span><span style="color:#a6e22e">account</span>, [<span style="color:#a6e22e">account</span>])
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{
|
||||
<<span style="color:#f92672">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">"lightgrey"</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
|
||||
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
|
||||
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}>
|
||||
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
|
||||
</<span style="color:#f92672">CreateButton</span>>
|
||||
}
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
</code></pre></div><p>Now update the <code>MainPage</code> component to render the new <code>Poll</code> component:</p>
|
||||
<p><code>index.tsx</code>:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
|
||||
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useEthers</span>();
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<span style="color:#66d9ef">undefined</span>);
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage() {</span>
|
||||
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
|
||||
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></span> {
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
|
||||
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
|
||||
} <span style="color:#66d9ef">else</span> {
|
||||
<span style="color:#75715e">// Deactivate signer if signed out
|
||||
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>);
|
||||
}
|
||||
}, [<span style="color:#a6e22e">account</span>]);
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</span>}
|
||||
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
|
||||
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"Poll dApp"</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
|
||||
/>
|
||||
<<span style="color:#f92672">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>} />
|
||||
</<span style="color:#f92672">div</span>>
|
||||
);
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</span>}
|
||||
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
|
||||
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">'Poll dApp'</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
|
||||
/>
|
||||
<<span style="color:#f92672">Poll</span> <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>} <span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>}/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
)
|
||||
}
|
||||
</code></pre></div><p>Now, you have a button:</p>
|
||||
<p><img src="/assets/poll_sdk/create-poll-button.png" alt="Create a poll button" /></p>
|
||||
@ -651,7 +723,7 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="book-btn">
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/" class="book-btn">
|
||||
Back
|
||||
</a>
|
||||
|
||||
@ -661,7 +733,7 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="book-btn">
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="book-btn">
|
||||
Next: Poll Creation Component
|
||||
</a>
|
||||
</p>
|
||||
@ -674,16 +746,16 @@ To give a visual clue to the user, also make the button grey when disabled.</p>
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 24, 2022</span>
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button.md" target="_blank" rel="noopener">
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
@ -12,16 +12,16 @@ useWakuPolling takes:
|
||||
useWakuPolling takes:
|
||||
appName: Your app name. It is used to generate a unique content topic for your polls. See How to Choose a Content Topic for more information. tokenAddress: The address of your ERC-20 token. Only token holders can create and answer polls." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" /><meta property="article:section" content="docs" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-04T03:44:23+01:00" />
|
||||
|
||||
<title>Poll Creation Component | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -309,6 +309,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -322,7 +379,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -335,7 +392,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class=" active">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -348,7 +405,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -361,7 +449,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class=" active">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -374,7 +462,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -547,108 +635,80 @@ Only token holders can create and answer polls.</li>
|
||||
</ul>
|
||||
<p>Add these parameters to <code>PollProps</code> and call <code>useWakuPolling</code>.</p>
|
||||
<p><code>components/Poll.tsx</code></p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"react"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useConfig</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/poll-sdk-react-components"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@ethersproject/providers"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/poll-sdk-react-hooks"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/src/constants"</span>;
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, { <span style="color:#a6e22e">useMemo</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react'</span>
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'styled-components'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/poll-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@ethersproject/providers'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/poll-sdk-react-hooks'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'</span>
|
||||
|
||||
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</span> {
|
||||
<span style="color:#a6e22e">appName</span>: <span style="color:#66d9ef">string</span>;
|
||||
<span style="color:#a6e22e">library</span>: <span style="color:#66d9ef">Web3Provider</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
|
||||
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
|
||||
<span style="color:#a6e22e">chainId</span>: <span style="color:#66d9ef">ChainId</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
|
||||
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>;
|
||||
<span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span>;
|
||||
};
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({
|
||||
<span style="color:#a6e22e">appName</span>,
|
||||
<span style="color:#a6e22e">library</span>,
|
||||
<span style="color:#a6e22e">signer</span>,
|
||||
<span style="color:#a6e22e">chainId</span>,
|
||||
<span style="color:#a6e22e">theme</span>,
|
||||
<span style="color:#a6e22e">tokenAddress</span>,
|
||||
}<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useConfig</span>();
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>);
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuPolling</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuPolling</span>(
|
||||
<span style="color:#a6e22e">appName</span>,
|
||||
<span style="color:#a6e22e">tokenAddress</span>,
|
||||
<span style="color:#a6e22e">library</span>,
|
||||
<span style="color:#a6e22e">config</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">?</span>.[<span style="color:#a6e22e">chainId</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1337</span>]
|
||||
);
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&&</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&&</span> (
|
||||
<<span style="color:#f92672">PollCreation</span>
|
||||
<span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>}
|
||||
<span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
|
||||
/>
|
||||
)}
|
||||
{
|
||||
<<span style="color:#f92672">CreateButton</span>
|
||||
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
|
||||
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">"lightgrey"</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
|
||||
}}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
|
||||
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
|
||||
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
|
||||
>
|
||||
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
|
||||
</<span style="color:#f92672">CreateButton</span>>
|
||||
}
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
);
|
||||
<span style="color:#a6e22e">appName</span>: <span style="color:#66d9ef">string</span>
|
||||
<span style="color:#a6e22e">library</span>: <span style="color:#66d9ef">Web3Provider</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
|
||||
<span style="color:#a6e22e">account</span>: <span style="color:#66d9ef">string</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">null</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
|
||||
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>
|
||||
<span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span>
|
||||
<span style="color:#a6e22e">multicallAddress</span>: <span style="color:#66d9ef">string</span>
|
||||
}
|
||||
</code></pre></div><p>Then pass them in <code>PollPage</code>.</p>
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({<span style="color:#a6e22e">appName</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">chainId</span>, <span style="color:#a6e22e">theme</span>, <span style="color:#a6e22e">tokenAddress</span>}<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuPolling</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuPolling</span>(<span style="color:#a6e22e">appName</span>, <span style="color:#a6e22e">tokenAddress</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">multicallAddress</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useMemo</span>(() <span style="color:#f92672">=></span> <span style="color:#f92672">!</span><span style="color:#a6e22e">account</span>, [<span style="color:#a6e22e">account</span>])
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&&</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&&</span> (
|
||||
<<span style="color:#f92672">PollCreation</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}/>
|
||||
)}
|
||||
{
|
||||
<<span style="color:#f92672">CreateButton</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">"lightgrey"</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>}} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
|
||||
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
|
||||
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}>
|
||||
<span style="color:#a6e22e">Create</span> <span style="color:#a6e22e">a</span> <span style="color:#a6e22e">poll</span>
|
||||
</<span style="color:#f92672">CreateButton</span>>
|
||||
}
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
</code></pre></div><p>Then pass them in <code>MainPage</code>.</p>
|
||||
<p>In this example, we use <code>demo-poll-dapp</code> for the app name and the mainnet SNT token contract for the token address.
|
||||
Replace those with your own.</p>
|
||||
<p><code>TOKEN_ADDRESS</code> can be any ERC20 token that will be used to token gate people from voting and creating polls.</p>
|
||||
<p><code>index.tsx</code></p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">PollPage() {</span>
|
||||
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">activateBrowserWallet</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">chainId</span> } <span style="color:#f92672">=</span>
|
||||
<span style="color:#a6e22e">useEthers</span>();
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">signer</span>, <span style="color:#a6e22e">setSigner</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span><<span style="color:#f92672">undefined</span> <span style="color:#960050;background-color:#1e0010">|</span> <span style="color:#a6e22e">JsonRpcSigner</span>>(<span style="color:#66d9ef">undefined</span>);
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">TOKEN_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'0x744d70FDBE2Ba4CF95131626614a1763DF805B9E'</span>
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'0xeefba1e63905ef1d7acba5a8513c70307c1ce441'</span>
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage() {</span>
|
||||
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
|
||||
|
||||
<span style="color:#a6e22e">useEffect</span>(() <span style="color:#f92672">=></span> {
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">account</span>) {
|
||||
<span style="color:#a6e22e">setSigner</span>(<span style="color:#a6e22e">library</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">getSigner</span>());
|
||||
} <span style="color:#66d9ef">else</span> {
|
||||
<span style="color:#75715e">// Deactivate signer if signed out
|
||||
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">setSigner</span>(<span style="color:#66d9ef">undefined</span>);
|
||||
}
|
||||
}, [<span style="color:#a6e22e">account</span>]);
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</span>}
|
||||
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
|
||||
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"Poll dApp"</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
|
||||
/>
|
||||
<<span style="color:#f92672">Poll</span>
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"demo-poll-dapp"</span>}
|
||||
<span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>}
|
||||
<span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>}
|
||||
<span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
|
||||
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"0x744d70FDBE2Ba4CF95131626614a1763DF805B9E"</span>}
|
||||
/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
);
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">div</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">""</span>}
|
||||
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
|
||||
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">'Poll dApp'</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activateBrowserWallet</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
|
||||
/>
|
||||
<<span style="color:#f92672">Poll</span>
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">'demo-poll-dapp'</span>}
|
||||
<span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">provider</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">TOKEN_ADDRESS</span>}
|
||||
<span style="color:#a6e22e">multicallAddress</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">MULTICALL_ADDRESS</span>}
|
||||
/>
|
||||
</<span style="color:#f92672">div</span>>
|
||||
)
|
||||
}
|
||||
</code></pre></div><p>You can now see the poll creation modal when clicking on the button:</p>
|
||||
</code></pre></div><blockquote class="book-hint info">
|
||||
If you are using ethers web3 connector it is recommended to only render <code>Poll</code> component if provider is not undefined.
|
||||
</blockquote>
|
||||
|
||||
<p>You can now see the poll creation modal when clicking on the button:</p>
|
||||
<p><img src="/assets/poll_sdk/create-a-poll-component.png" alt="Create a poll modal" /></p>
|
||||
<p><img src="/assets/poll_sdk/poll-created.png" alt="Confirmation modal" /></p>
|
||||
<p>
|
||||
@ -657,7 +717,7 @@ Replace those with your own.</p>
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="book-btn">
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="book-btn">
|
||||
Back
|
||||
</a>
|
||||
|
||||
@ -667,7 +727,7 @@ Replace those with your own.</p>
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="book-btn">
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="book-btn">
|
||||
Next: Poll List Component
|
||||
</a>
|
||||
</p>
|
||||
@ -680,16 +740,16 @@ Replace those with your own.</p>
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 24, 2022</span>
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation.md" target="_blank" rel="noopener">
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
@ -6,24 +6,24 @@
|
||||
<meta name="description" content="Poll List Component # To display existing polls, the PollList component is provided.
|
||||
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
|
||||
components/Poll.tsx:
|
||||
import { useState } from "react"; import { useConfig } from "@usedapp/core"; import { PollCreation, PollList } from "@waku/poll-sdk-react-components"; import { JsonRpcSigner, 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"; import { ChainId } from "@usedapp/core/src/constants"; type PollProps = { appName: string; library: Web3Provider | undefined; signer: JsonRpcSigner | undefined; chainId: ChainId | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; }; export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress, }: PollProps) { const config = useConfig(); const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, config?">
|
||||
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(() => !">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Poll List Component" />
|
||||
<meta property="og:description" content="Poll List Component # To display existing polls, the PollList component is provided.
|
||||
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
|
||||
components/Poll.tsx:
|
||||
import { useState } from "react"; import { useConfig } from "@usedapp/core"; import { PollCreation, PollList } from "@waku/poll-sdk-react-components"; import { JsonRpcSigner, 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"; import { ChainId } from "@usedapp/core/src/constants"; type PollProps = { appName: string; library: Web3Provider | undefined; signer: JsonRpcSigner | undefined; chainId: ChainId | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; }; export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress, }: PollProps) { const config = useConfig(); const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, config?" />
|
||||
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(() => !" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" /><meta property="article:section" content="docs" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-01-24T12:17:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-04T03:44:23+01:00" />
|
||||
|
||||
<title>Poll List Component | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -311,6 +311,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -324,7 +381,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -337,7 +394,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -350,7 +407,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class=" active">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -363,7 +451,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -376,7 +464,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class=" active">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -539,59 +627,36 @@ https://github.com/alex-shpak/hugo-book
|
||||
<p>Simply add it to the <code>Poll</code> function to render it.
|
||||
It needs the <code>account</code> variable that can be passed as a property to <code>Poll</code>:</p>
|
||||
<p><code>components/Poll.tsx</code>:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"react"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useConfig</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span>, <span style="color:#a6e22e">PollList</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/poll-sdk-react-components"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">JsonRpcSigner</span>, <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@ethersproject/providers"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/poll-sdk-react-hooks"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes"</span>;
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">ChainId</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">"@usedapp/core/src/constants"</span>;
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, { <span style="color:#a6e22e">useMemo</span>, <span style="color:#a6e22e">useState</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react'</span>
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'styled-components'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">PollCreation</span>, <span style="color:#a6e22e">PollList</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/poll-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Web3Provider</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@ethersproject/providers'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">useWakuPolling</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/poll-sdk-react-hooks'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">CreateButton</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Theme</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'</span>
|
||||
|
||||
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">PollProps</span> <span style="color:#f92672">=</span> {
|
||||
<span style="color:#a6e22e">appName</span>: <span style="color:#66d9ef">string</span>;
|
||||
<span style="color:#a6e22e">library</span>: <span style="color:#66d9ef">Web3Provider</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
|
||||
<span style="color:#a6e22e">signer</span>: <span style="color:#66d9ef">JsonRpcSigner</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
|
||||
<span style="color:#a6e22e">chainId</span>: <span style="color:#66d9ef">ChainId</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
|
||||
<span style="color:#a6e22e">account</span>: <span style="color:#66d9ef">string</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">null</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>;
|
||||
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>;
|
||||
<span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span>;
|
||||
};
|
||||
<span style="color:#a6e22e">appName</span>: <span style="color:#66d9ef">string</span>
|
||||
<span style="color:#a6e22e">library</span>: <span style="color:#66d9ef">Web3Provider</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
|
||||
<span style="color:#a6e22e">account</span>: <span style="color:#66d9ef">string</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">null</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
|
||||
<span style="color:#a6e22e">theme</span>: <span style="color:#66d9ef">Theme</span>
|
||||
<span style="color:#a6e22e">tokenAddress</span>: <span style="color:#66d9ef">string</span>
|
||||
<span style="color:#a6e22e">multicallAddress</span>: <span style="color:#66d9ef">string</span>
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({
|
||||
<span style="color:#a6e22e">appName</span>,
|
||||
<span style="color:#a6e22e">library</span>,
|
||||
<span style="color:#a6e22e">signer</span>,
|
||||
<span style="color:#a6e22e">chainId</span>,
|
||||
<span style="color:#a6e22e">account</span>,
|
||||
<span style="color:#a6e22e">theme</span>,
|
||||
<span style="color:#a6e22e">tokenAddress</span>,
|
||||
}<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useConfig</span>();
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>);
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuPolling</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuPolling</span>(
|
||||
<span style="color:#a6e22e">appName</span>,
|
||||
<span style="color:#a6e22e">tokenAddress</span>,
|
||||
<span style="color:#a6e22e">library</span>,
|
||||
<span style="color:#a6e22e">config</span><span style="color:#f92672">?</span>.<span style="color:#a6e22e">multicallAddresses</span><span style="color:#f92672">?</span>.[<span style="color:#a6e22e">chainId</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1337</span>]
|
||||
);
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#a6e22e">signer</span>;
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Poll</span>({ <span style="color:#a6e22e">appName</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">theme</span>, <span style="color:#a6e22e">tokenAddress</span>, <span style="color:#a6e22e">multicallAddress</span> }<span style="color:#f92672">:</span> <span style="color:#a6e22e">PollProps</span>) {
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showPollCreation</span>, <span style="color:#a6e22e">setShowPollCreation</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuPolling</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuPolling</span>(<span style="color:#a6e22e">appName</span>, <span style="color:#a6e22e">tokenAddress</span>, <span style="color:#a6e22e">library</span>, <span style="color:#a6e22e">multicallAddress</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useMemo</span>(() <span style="color:#f92672">=></span> <span style="color:#f92672">!</span><span style="color:#a6e22e">account</span>, [<span style="color:#a6e22e">account</span>])
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&&</span> <span style="color:#a6e22e">signer</span> <span style="color:#f92672">&&</span> (
|
||||
<<span style="color:#f92672">PollCreation</span>
|
||||
<span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>}
|
||||
<span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
|
||||
/>
|
||||
{<span style="color:#a6e22e">showPollCreation</span> <span style="color:#f92672">&&</span> <span style="color:#a6e22e">account</span> <span style="color:#f92672">&&</span> (
|
||||
<<span style="color:#f92672">PollCreation</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">setShowPollCreation</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowPollCreation</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>} />
|
||||
)}
|
||||
{
|
||||
<<span style="color:#f92672">CreateButton</span>
|
||||
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{
|
||||
<span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">"lightgrey"</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span>,
|
||||
}}
|
||||
<span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{ <span style="color:#a6e22e">backgroundColor</span>: <span style="color:#66d9ef">disabled</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">'lightgrey'</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">theme</span>.<span style="color:#a6e22e">primaryColor</span> }}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>}
|
||||
<span style="color:#a6e22e">disabled</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">disabled</span>}
|
||||
<span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{() <span style="color:#f92672">=></span> <span style="color:#a6e22e">setShowPollCreation</span>(<span style="color:#66d9ef">true</span>)}
|
||||
@ -601,18 +666,8 @@ It needs the <code>account</code> variable that can be passed as a property to <
|
||||
}
|
||||
<<span style="color:#f92672">PollList</span> <span style="color:#a6e22e">wakuPolling</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuPolling</span>} <span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>} <span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">theme</span>} />
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
);
|
||||
)
|
||||
}
|
||||
</code></pre></div><p>Pass the <code>account</code> to <code>Poll</code> in <code>index.tsx</code>:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><<span style="color:#f92672">Poll</span>
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">orangeTheme</span>}
|
||||
<span style="color:#a6e22e">appName</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"demo-poll-dapp"</span>}
|
||||
<span style="color:#a6e22e">library</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">library</span>}
|
||||
<span style="color:#a6e22e">signer</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">signer</span>}
|
||||
<span style="color:#a6e22e">chainId</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">chainId</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">tokenAddress</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"0x744d70FDBE2Ba4CF95131626614a1763DF805B9E"</span>}
|
||||
/>
|
||||
</code></pre></div><p>Et voila!
|
||||
The <code>PollList</code> component handles the display of polls:</p>
|
||||
<p><img src="/assets/poll_sdk/listed-polls.png" alt="Poll List" /></p>
|
||||
@ -632,7 +687,7 @@ It also allows passing a token contract address in the url, as described in the
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="book-btn">
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="book-btn">
|
||||
Back
|
||||
</a>
|
||||
|
||||
@ -645,16 +700,16 @@ It also allows passing a token contract address in the url, as described in the
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title='Last modified by Franck R | Jan 24, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 24, 2022</span>
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list.md" target="_blank" rel="noopener">
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
@ -5,9 +5,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="How to Use the Waku Connect Poll SDK # To demonstrate how to use the Waku Connect Poll SDK in your dApp, we will create a TypeScript React app from scratch.
|
||||
You can then adapt the steps depending on your dApp configuration and build setup.
|
||||
The resulting code of this guide can be found at https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/main/examples/mainnet-poll.
|
||||
Here is a preview of the end result:
|
||||
Get Started ">
|
||||
Only token holders can create & answer polls. Hence, you need to have an ERC-20 token contract address ready.
|
||||
The resulting code of this guide can be found at https://github.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Poll SDK" />
|
||||
<meta property="og:description" content="" />
|
||||
@ -19,7 +18,7 @@ Get Started ">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
@ -308,6 +307,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class=" active">Poll SDK</a>
|
||||
|
||||
|
||||
@ -321,7 +377,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -334,7 +390,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -347,7 +403,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -360,7 +447,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -373,7 +460,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -534,17 +621,23 @@ https://github.com/alex-shpak/hugo-book
|
||||
</h1>
|
||||
<p>To demonstrate how to use the Waku Connect Poll SDK in your dApp, we will create a TypeScript React app from scratch.</p>
|
||||
<p>You can then adapt the steps depending on your dApp configuration and build setup.</p>
|
||||
<p>Only token holders can create & answer polls.
|
||||
Hence, you need to have an ERC-20 token contract address ready.</p>
|
||||
<p>The resulting code of this guide can be found at
|
||||
<a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/main/examples/mainnet-poll">https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/main/examples/mainnet-poll</a>.</p>
|
||||
<p>Here is a preview of the end result:</p>
|
||||
<p><img src="/assets/poll_sdk/wakuconnect-poll-demo.gif" alt="Poll demo" /></p>
|
||||
|
||||
<p>After following a dapp creation guide you should have a dapp that can connect to wallet ready. We will continue from this point.</p>
|
||||
<p>Before starting first add poll packages:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">yarn add <span style="color:#ae81ff">\
|
||||
</span><span style="color:#ae81ff"></span>@waku/poll-sdk-react-components @waku/poll-sdk-react-hooks @waku/vote-poll-sdk-react-components
|
||||
</code></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="book-btn">
|
||||
<a href="/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="book-btn">
|
||||
Get Started
|
||||
</a>
|
||||
|
||||
@ -557,9 +650,9 @@ https://github.com/alex-shpak/hugo-book
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 27, 2022</span>
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -7,33 +7,12 @@
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Mon, 03 Jan 2022 11:00:00 +1100</lastBuildDate><atom:link href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
<title>Create the DApp and Install Dependencies</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/</guid>
|
||||
<description>Create the DApp and Install Dependencies # Create React App # Create the new React app using the typescript template. Install the Waku Poll SDK packages.
|
||||
In this guide, we use useDApp to access the blockchain.
|
||||
yarn create react-app poll-dapp-ts --template typescript cd poll-dapp-ts yarn add \ @waku/poll-sdk-react-components @waku/poll-sdk-react-hooks @waku/vote-poll-sdk-react-components \ @usedapp/core@0.4.7 yarn add -D @types/styled-components @usedapp/core must be frozen to version 0.4.7 due to incompatibility between minor versions of ethers.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Connect to the Ethereum Wallet</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/</guid>
|
||||
<description>Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user&rsquo;s wallet. Delete the template App component:
|
||||
rm -f App.tsx App.css App.test.tsx Top bar # Use TopBar component to display wallet information. For that, create a PollPage component that includes the top bar and will include the poll elements. The component uses ethers to connect to the user&rsquo;s wallet:</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Create-A-Poll Button</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</link>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</guid>
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/</guid>
|
||||
<description>Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&rsquo;ll start by adding a button to create a poll.
|
||||
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
|
||||
import styled from &#34;styled-components&#34;; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } `; Button # Create a button that will display the PollCreation component on click.</description>
|
||||
@ -41,10 +20,10 @@ import styled from &#34;styled-components&#34;; const Wrapper = styled.d
|
||||
|
||||
<item>
|
||||
<title>Poll Creation Component</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/</link>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/</guid>
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/</guid>
|
||||
<description>Poll Creation Component # The Poll SDK provides an off-the-shelf component to create a new poll: PollCreation. It takes in a WakuPolling hook that can created with useWakuPolling.
|
||||
useWakuPolling takes:
|
||||
appName: Your app name. It is used to generate a unique content topic for your polls. See How to Choose a Content Topic for more information. tokenAddress: The address of your ERC-20 token. Only token holders can create and answer polls.</description>
|
||||
@ -52,14 +31,14 @@ useWakuPolling takes:
|
||||
|
||||
<item>
|
||||
<title>Poll List Component</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/</link>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/</guid>
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/</guid>
|
||||
<description>Poll List Component # To display existing polls, the PollList component is provided.
|
||||
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
|
||||
components/Poll.tsx:
|
||||
import { useState } from &#34;react&#34;; import { useConfig } from &#34;@usedapp/core&#34;; import { PollCreation, PollList } from &#34;@waku/poll-sdk-react-components&#34;; import { JsonRpcSigner, Web3Provider } from &#34;@ethersproject/providers&#34;; import { useWakuPolling } from &#34;@waku/poll-sdk-react-hooks&#34;; import { CreateButton } from &#34;@waku/vote-poll-sdk-react-components&#34;; import { Theme } from &#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;; import { ChainId } from &#34;@usedapp/core/src/constants&#34;; type PollProps = { appName: string; library: Web3Provider | undefined; signer: JsonRpcSigner | undefined; chainId: ChainId | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; }; export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress, }: PollProps) { const config = useConfig(); const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, config?</description>
|
||||
import React, { useMemo, useState } from &#39;react&#39; import styled from &#39;styled-components&#39; import { PollCreation, PollList } from &#39;@waku/poll-sdk-react-components&#39; import { Web3Provider } from &#39;@ethersproject/providers&#39; import { useWakuPolling } from &#39;@waku/poll-sdk-react-hooks&#39; import { CreateButton } from &#39;@waku/vote-poll-sdk-react-components&#39; import { Theme } from &#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39; type PollProps = { appName: string library: Web3Provider | undefined account: string | null | undefined theme: Theme tokenAddress: string multicallAddress: string } export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, multicallAddress) const disabled = useMemo(() =&gt; !</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
|
||||
@ -0,0 +1,818 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="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.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Deploy smart contract" />
|
||||
<meta property="og:description" content="Deploy smart contract # Creating new package # For this deployment we will create a new package.
|
||||
mkdir contract-deployment cd contract-deployment yarn init yarn add @waku/vote-sdk-contracts ethers ts-node typescript Create a tsconfig.json with:
|
||||
{ "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." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-04T03:44:23+01:00" />
|
||||
|
||||
<title>Deploy smart contract | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body dir="ltr">
|
||||
<input type="checkbox" class="hidden toggle" id="menu-control" />
|
||||
<input type="checkbox" class="hidden toggle" id="toc-control" />
|
||||
<main class="container flex">
|
||||
<aside class="book-menu">
|
||||
<div class="book-menu-content">
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
|
||||
<div class="book-search">
|
||||
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
|
||||
<div class="book-search-spinner hidden"></div>
|
||||
<ul id="book-search-results"></ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="book-languages">
|
||||
<li>
|
||||
<input type="checkbox" id="languages" class="toggle" />
|
||||
<label for="languages" class="flex justify-between">
|
||||
<a role="button" class="flex align-center">
|
||||
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
|
||||
English
|
||||
</a>
|
||||
</label>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/es/">
|
||||
Español
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/pt/">
|
||||
Português
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations & Videos</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class=" active">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
|
||||
JS-Waku API Doc
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://vac.dev/" target="_blank" rel="noopener">
|
||||
Vac Team
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
|
||||
Vac RFCs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://status.im/" target="_blank" rel="noopener">
|
||||
Status.im
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="book-page">
|
||||
<header class="book-header">
|
||||
|
||||
<div class="flex align-center justify-between">
|
||||
<label for="menu-control">
|
||||
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
|
||||
</label>
|
||||
|
||||
<strong>Deploy smart contract</strong>
|
||||
|
||||
<label for="toc-control">
|
||||
|
||||
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
|
||||
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<aside class="hidden clearfix">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#deploy-smart-contract">Deploy smart contract</a>
|
||||
<ul>
|
||||
<li><a href="#creating-new-package">Creating new package</a></li>
|
||||
<li><a href="#running-script">Running script</a></li>
|
||||
<li><a href="#getting-smart-contract-address">Getting smart contract address</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="deploy-smart-contract">
|
||||
Deploy smart contract
|
||||
<a class="anchor" href="#deploy-smart-contract">#</a>
|
||||
</h1>
|
||||
<h2 id="creating-new-package">
|
||||
Creating new package
|
||||
<a class="anchor" href="#creating-new-package">#</a>
|
||||
</h2>
|
||||
<p>For this deployment we will create a new package.</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">mkdir contract-deployment
|
||||
cd contract-deployment
|
||||
yarn init
|
||||
yarn add @waku/vote-sdk-contracts ethers ts-node typescript
|
||||
</code></pre></div><p>Create a <code>tsconfig.json</code> with:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-json" data-lang="json">{
|
||||
<span style="color:#f92672">"compilerOptions"</span>: {
|
||||
<span style="color:#f92672">"target"</span>: <span style="color:#e6db74">"es2020"</span>,
|
||||
<span style="color:#f92672">"module"</span>: <span style="color:#e6db74">"commonJS"</span>,
|
||||
<span style="color:#f92672">"esModuleInterop"</span>: <span style="color:#66d9ef">true</span>,
|
||||
<span style="color:#f92672">"moduleResolution"</span>: <span style="color:#e6db74">"node"</span>,
|
||||
<span style="color:#f92672">"resolveJsonModule"</span>: <span style="color:#66d9ef">true</span>,
|
||||
<span style="color:#f92672">"noEmit"</span>: <span style="color:#66d9ef">true</span>
|
||||
}
|
||||
}
|
||||
</code></pre></div><p>And now we can add a deploy script <code>index.ts</code>:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ContractFactory</span>, <span style="color:#a6e22e">getDefaultProvider</span>, <span style="color:#a6e22e">Wallet</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'ethers'</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">VotingContract</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'@waku/vote-sdk-contracts/build/VotingContract.json'</span>;
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">readline</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'readline'</span>;
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">rl</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">readline</span>.<span style="color:#a6e22e">createInterface</span>({<span style="color:#a6e22e">input</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">stdin</span>, <span style="color:#a6e22e">output</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">stdout</span>});
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">prompt</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">query</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">string</span>) => <span style="color:#66d9ef">new</span> Promise(<span style="color:#a6e22e">resolve</span> => <span style="color:#a6e22e">rl</span>.<span style="color:#a6e22e">question</span>(<span style="color:#a6e22e">query</span>, <span style="color:#a6e22e">resolve</span>));
|
||||
|
||||
<span style="color:#66d9ef">try</span> {
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">privateKey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">2</span>];
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">providerName</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">3</span>];
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tokenAddress</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">4</span>];
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">voteDuration</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">process</span>.<span style="color:#a6e22e">argv</span>[<span style="color:#ae81ff">5</span>];
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">provider</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getDefaultProvider</span>(<span style="color:#a6e22e">providerName</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wallet</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Wallet</span>(<span style="color:#a6e22e">privateKey</span>, <span style="color:#a6e22e">provider</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">contract</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">ContractFactory</span>.<span style="color:#a6e22e">fromSolidity</span>(<span style="color:#a6e22e">VotingContract</span>, <span style="color:#a6e22e">wallet</span>)
|
||||
|
||||
<span style="color:#66d9ef">new</span> Promise(<span style="color:#66d9ef">async</span> () => {
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">"\x1b[1m"</span>)
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`You are about to deploy a voting smart contract\n`</span>);
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Wallet address: \t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">wallet</span>.<span style="color:#a6e22e">address</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Provider name: \t\t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">provider</span>.<span style="color:#a6e22e">network</span>.<span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Provider chainID: \t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">provider</span>.<span style="color:#a6e22e">network</span>.<span style="color:#a6e22e">chainId</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Token address to use: \t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">tokenAddress</span><span style="color:#e6db74">}</span><span style="color:#e6db74">\n`</span>);
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Vote duration: \t\t</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">voteDuration</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1000</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> seconds\n`</span>);
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Please verify that above parameters are correct'</span>)
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'WARNING: this operation WILL use ether'</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">answer</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">prompt</span>(<span style="color:#e6db74">'If you are sure that you want to continue write [yes]:'</span>)
|
||||
<span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">answer</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">'yes'</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">answer</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">'Yes'</span>) {
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">deployedContract</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">contract</span>.<span style="color:#a6e22e">deploy</span>(<span style="color:#a6e22e">tokenAddress</span>, <span style="color:#a6e22e">voteDuration</span> <span style="color:#f92672">??</span> <span style="color:#ae81ff">1000</span>)
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`contract deployed with address </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">deployedContract</span>.<span style="color:#a6e22e">address</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>)
|
||||
} <span style="color:#66d9ef">else</span> {
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Aborted'</span>)
|
||||
}
|
||||
<span style="color:#a6e22e">rl</span>.<span style="color:#a6e22e">close</span>()
|
||||
})
|
||||
} <span style="color:#66d9ef">catch</span> {
|
||||
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Error creating smart contract'</span>);
|
||||
<span style="color:#a6e22e">rl</span>.<span style="color:#a6e22e">close</span>()
|
||||
}
|
||||
</code></pre></div><h2 id="running-script">
|
||||
Running script
|
||||
<a class="anchor" href="#running-script">#</a>
|
||||
</h2>
|
||||
<p>To run deploying script we call in shell:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">yarn ts-node index.ts WALLET_PRIVATE_KEY PROVIDER_NAME TOKEN_ADDRESS VOTING_DURATION
|
||||
</code></pre></div><p>you need to substitute parameters:</p>
|
||||
<ul>
|
||||
<li>WALLET_PRIVATE_KEY: private key of wallet that will deploy smart contract</li>
|
||||
<li>PROVIDER_NAME: a name of network for example <code>mainnet</code>, <code>ropsten</code> or an url to network</li>
|
||||
<li>TOKEN_ADDRESS: address of a token that is to be used by voting contract</li>
|
||||
<li>VOTING_DURATION: how long proposals will be open to accept votes</li>
|
||||
</ul>
|
||||
<p>After that the information with input parameters will be displayed,
|
||||
and you will be asked to verify them and accept them.</p>
|
||||
<h2 id="getting-smart-contract-address">
|
||||
Getting smart contract address
|
||||
<a class="anchor" href="#getting-smart-contract-address">#</a>
|
||||
</h2>
|
||||
<p>When the script is complete smart contract address will be printed in the shell.
|
||||
If you missed it, you can check last wallet interaction on Etherscan and there you can also find new smart contract address.</p>
|
||||
<p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/vote_sdk/" class="book-btn">
|
||||
Back
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="book-btn">
|
||||
Next: Create Voting component
|
||||
</a>
|
||||
</p>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<footer class="book-footer">
|
||||
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<div class="book-comments">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<label for="menu-control" class="hidden book-menu-overlay"></label>
|
||||
</div>
|
||||
|
||||
|
||||
<aside class="book-toc">
|
||||
<div class="book-toc-content">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#deploy-smart-contract">Deploy smart contract</a>
|
||||
<ul>
|
||||
<li><a href="#creating-new-package">Creating new package</a></li>
|
||||
<li><a href="#running-script">Running script</a></li>
|
||||
<li><a href="#getting-smart-contract-address">Getting smart contract address</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
819
docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/index.html
Normal file
819
docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/index.html
Normal file
@ -0,0 +1,819 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Create 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:">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Creating Voting component" />
|
||||
<meta property="og:description" content="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:" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-04T03:44:23+01:00" />
|
||||
|
||||
<title>Creating Voting component | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body dir="ltr">
|
||||
<input type="checkbox" class="hidden toggle" id="menu-control" />
|
||||
<input type="checkbox" class="hidden toggle" id="toc-control" />
|
||||
<main class="container flex">
|
||||
<aside class="book-menu">
|
||||
<div class="book-menu-content">
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
|
||||
<div class="book-search">
|
||||
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
|
||||
<div class="book-search-spinner hidden"></div>
|
||||
<ul id="book-search-results"></ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="book-languages">
|
||||
<li>
|
||||
<input type="checkbox" id="languages" class="toggle" />
|
||||
<label for="languages" class="flex justify-between">
|
||||
<a role="button" class="flex align-center">
|
||||
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
|
||||
English
|
||||
</a>
|
||||
</label>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/es/">
|
||||
Español
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/pt/">
|
||||
Português
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations & Videos</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class=" active">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
|
||||
JS-Waku API Doc
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://vac.dev/" target="_blank" rel="noopener">
|
||||
Vac Team
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
|
||||
Vac RFCs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://status.im/" target="_blank" rel="noopener">
|
||||
Status.im
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="book-page">
|
||||
<header class="book-header">
|
||||
|
||||
<div class="flex align-center justify-between">
|
||||
<label for="menu-control">
|
||||
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
|
||||
</label>
|
||||
|
||||
<strong>Creating Voting component</strong>
|
||||
|
||||
<label for="toc-control">
|
||||
|
||||
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
|
||||
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<aside class="hidden clearfix">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#create-voting-component">Create Voting component</a>
|
||||
<ul>
|
||||
<li><a href="#create-components">Create components</a></li>
|
||||
<li><a href="#adding-react-component">Adding react component</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="create-voting-component">
|
||||
Create Voting component
|
||||
<a class="anchor" href="#create-voting-component">#</a>
|
||||
</h1>
|
||||
<p>With the smart contract deployed we can go back to our dApp.</p>
|
||||
<p>We assume that the skeleton for the dApp with connection to the wallet is already done, if not please go
|
||||
to <a href="/docs/guides/vote_poll_sdk/dapp_creation/">dApp creation</a>.</p>
|
||||
<h2 id="create-components">
|
||||
Create components
|
||||
<a class="anchor" href="#create-components">#</a>
|
||||
</h2>
|
||||
<p>Let’s start by creating a new folder <code>components</code> with file named <code>Voting.tsx</code> inside.</p>
|
||||
<p>After that we can start with styling and defining which theme we will be using:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">blueTheme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'</span>
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'styled-components'</span>
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">THEME</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">blueTheme</span>;
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
|
||||
</span><span style="color:#e6db74"> display: flex;
|
||||
</span><span style="color:#e6db74"> flex-direction: column;
|
||||
</span><span style="color:#e6db74"> align-items: center;
|
||||
</span><span style="color:#e6db74"> max-width: 1000px;
|
||||
</span><span style="color:#e6db74"> margin: 0 auto;
|
||||
</span><span style="color:#e6db74"> padding: 150px 32px 50px;
|
||||
</span><span style="color:#e6db74"> width: 100%;
|
||||
</span><span style="color:#e6db74"> min-height: 100vh;
|
||||
</span><span style="color:#e6db74">
|
||||
</span><span style="color:#e6db74"> @media (max-width: 600px) {
|
||||
</span><span style="color:#e6db74"> padding: 132px 16px 32px;
|
||||
</span><span style="color:#e6db74"> }
|
||||
</span><span style="color:#e6db74">
|
||||
</span><span style="color:#e6db74"> @media (max-width: 425px) {
|
||||
</span><span style="color:#e6db74"> padding: 64px 16px 84px;
|
||||
</span><span style="color:#e6db74"> }
|
||||
</span><span style="color:#e6db74">`</span>
|
||||
</code></pre></div><h2 id="adding-react-component">
|
||||
Adding react component
|
||||
<a class="anchor" href="#adding-react-component">#</a>
|
||||
</h2>
|
||||
<p>Now, create a <code>Voting</code> component that uses the components from the Vote SDK.</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, {<span style="color:#a6e22e">useCallback</span>, <span style="color:#a6e22e">useState</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">NewVotingRoomModal</span>, <span style="color:#a6e22e">VotingRoomList</span>, <span style="color:#a6e22e">VotingRoomListHeader</span>,} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">WakuVoting</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-core'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useVotingRoomsId</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-sdk-react-hooks'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useTokenBalance</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components'</span>
|
||||
|
||||
<span style="color:#66d9ef">type</span> <span style="color:#a6e22e">VotingProps</span> <span style="color:#f92672">=</span> {
|
||||
<span style="color:#a6e22e">wakuVoting</span>: <span style="color:#66d9ef">WakuVoting</span>
|
||||
<span style="color:#a6e22e">account</span>: <span style="color:#66d9ef">string</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">null</span> <span style="color:#f92672">|</span> <span style="color:#66d9ef">undefined</span>
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">:</span> () <span style="color:#f92672">=></span> <span style="color:#66d9ef">void</span>
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Voting</span>({<span style="color:#a6e22e">wakuVoting</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">activate</span>}<span style="color:#f92672">:</span> <span style="color:#a6e22e">VotingProps</span>) {
|
||||
<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">showNewVoteModal</span>, <span style="color:#a6e22e">setShowNewVoteModal</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">onCreateClick</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useCallback</span>(() <span style="color:#f92672">=></span> {
|
||||
<span style="color:#a6e22e">setShowNewVoteModal</span>(<span style="color:#66d9ef">true</span>)
|
||||
}, [])
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">votes</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useVotingRoomsId</span>(<span style="color:#a6e22e">wakuVoting</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tokenBalance</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useTokenBalance</span>(<span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">wakuVoting</span>)
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">NewVotingRoomModal</span>
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">THEME</span>}
|
||||
<span style="color:#a6e22e">availableAmount</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">tokenBalance</span>}
|
||||
<span style="color:#a6e22e">setShowModal</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setShowNewVoteModal</span>}
|
||||
<span style="color:#a6e22e">showModal</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">showNewVoteModal</span>}
|
||||
<span style="color:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>}
|
||||
/>
|
||||
<<span style="color:#f92672">VotingRoomListHeader</span>
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">THEME</span>}
|
||||
<span style="color:#a6e22e">onConnectClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
|
||||
<span style="color:#a6e22e">onCreateClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">onCreateClick</span>}
|
||||
/>
|
||||
<<span style="color:#f92672">VotingRoomList</span>
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">THEME</span>}
|
||||
<span style="color:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>}
|
||||
<span style="color:#a6e22e">votes</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">votes</span>}
|
||||
<span style="color:#a6e22e">availableAmount</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">tokenBalance</span>}
|
||||
/>
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
</code></pre></div><p>With that voting component is complete now we can use it in our <code>MainPage</code></p>
|
||||
<p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="book-btn">
|
||||
Back
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="book-btn">
|
||||
Next: Use Voting Component
|
||||
</a>
|
||||
</p>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<footer class="book-footer">
|
||||
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<div class="book-comments">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<label for="menu-control" class="hidden book-menu-overlay"></label>
|
||||
</div>
|
||||
|
||||
|
||||
<aside class="book-toc">
|
||||
<div class="book-toc-content">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#create-voting-component">Create Voting component</a>
|
||||
<ul>
|
||||
<li><a href="#create-components">Create components</a></li>
|
||||
<li><a href="#adding-react-component">Adding react component</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
857
docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/index.html
Normal file
857
docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/index.html
Normal file
@ -0,0 +1,857 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="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.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Use Voting Component" />
|
||||
<meta property="og:description" content="Use Voting Component # Define Configuration # Configure the dApp by setting:
|
||||
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = '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." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2022-01-03T11:00:00+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-04T03:44:23+01:00" />
|
||||
|
||||
<title>Use Voting Component | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body dir="ltr">
|
||||
<input type="checkbox" class="hidden toggle" id="menu-control" />
|
||||
<input type="checkbox" class="hidden toggle" id="toc-control" />
|
||||
<main class="container flex">
|
||||
<aside class="book-menu">
|
||||
<div class="book-menu-content">
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
|
||||
<div class="book-search">
|
||||
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
|
||||
<div class="book-search-spinner hidden"></div>
|
||||
<ul id="book-search-results"></ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="book-languages">
|
||||
<li>
|
||||
<input type="checkbox" id="languages" class="toggle" />
|
||||
<label for="languages" class="flex justify-between">
|
||||
<a role="button" class="flex align-center">
|
||||
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
|
||||
English
|
||||
</a>
|
||||
</label>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/es/">
|
||||
Español
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/pt/">
|
||||
Português
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations & Videos</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class=" active">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
|
||||
JS-Waku API Doc
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://vac.dev/" target="_blank" rel="noopener">
|
||||
Vac Team
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
|
||||
Vac RFCs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://status.im/" target="_blank" rel="noopener">
|
||||
Status.im
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="book-page">
|
||||
<header class="book-header">
|
||||
|
||||
<div class="flex align-center justify-between">
|
||||
<label for="menu-control">
|
||||
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
|
||||
</label>
|
||||
|
||||
<strong>Use Voting Component</strong>
|
||||
|
||||
<label for="toc-control">
|
||||
|
||||
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
|
||||
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<aside class="hidden clearfix">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#use-voting-component">Use Voting Component</a>
|
||||
<ul>
|
||||
<li><a href="#define-configuration">Define Configuration</a></li>
|
||||
<li><a href="#use-waku-voting">Use Waku Voting</a></li>
|
||||
<li><a href="#display-voting-component">Display Voting Component</a></li>
|
||||
<li><a href="#resulting-indextsx-file">Resulting <code>index.tsx</code> File</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="use-voting-component">
|
||||
Use Voting Component
|
||||
<a class="anchor" href="#use-voting-component">#</a>
|
||||
</h1>
|
||||
<h2 id="define-configuration">
|
||||
Define Configuration
|
||||
<a class="anchor" href="#define-configuration">#</a>
|
||||
</h2>
|
||||
<p>Configure the dApp by setting:</p>
|
||||
<ul>
|
||||
<li>Address of the multicall smart contract of the target chain,</li>
|
||||
<li>Address of the voting smart contract,</li>
|
||||
<li>Your dApp name.</li>
|
||||
</ul>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">VOTING_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'VOTING_ADDRESS'</span>
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'MULTICALL_ADDRESS'</span>
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">DAPP_NAME</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'YOUR_DAPP_NAME'</span>
|
||||
</code></pre></div><h2 id="use-waku-voting">
|
||||
Use Waku Voting
|
||||
<a class="anchor" href="#use-waku-voting">#</a>
|
||||
</h2>
|
||||
<p>Now, we need a Waku voting object.
|
||||
For that, call <code>useWakuVoting</code>:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWakuVoting</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-sdk-react-hooks'</span>
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage() {</span>
|
||||
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuVoting</span>(
|
||||
<span style="color:#a6e22e">DAPP_NAME</span>,
|
||||
<span style="color:#a6e22e">VOTING_ADDRESS</span>,
|
||||
<span style="color:#a6e22e">provider</span>,
|
||||
<span style="color:#a6e22e">MULTICALL_ADDRESS</span>
|
||||
)
|
||||
}
|
||||
</code></pre></div><h2 id="display-voting-component">
|
||||
Display Voting Component
|
||||
<a class="anchor" href="#display-voting-component">#</a>
|
||||
</h2>
|
||||
<p>Modify the <code>MainPage</code> to render a Voting component.
|
||||
Before rendering the component, check if <code>wakuVoting</code> has initialized:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">''</span>}
|
||||
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
|
||||
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">'WakuConnect Vote Demo'</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">blueTheme</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
|
||||
/>
|
||||
{<span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">&&</span>
|
||||
<<span style="color:#f92672">Voting</span>
|
||||
<span style="color:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
|
||||
/>}
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
</code></pre></div><h2 id="resulting-indextsx-file">
|
||||
Resulting <code>index.tsx</code> File
|
||||
<a class="anchor" href="#resulting-indextsx-file">#</a>
|
||||
</h2>
|
||||
<p>Your <code>index.tsx</code> should now look like:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tsx" data-lang="tsx"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react'</span>
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">styled</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'styled-components'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">GlobalStyle</span>, <span style="color:#a6e22e">TopBar</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">blueTheme</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'</span>
|
||||
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">ReactDOM</span> <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'react-dom'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWeb3Connect</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'./hooks/useWeb3Connect'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Voting</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'./components/Voting'</span>
|
||||
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">useWakuVoting</span>} <span style="color:#66d9ef">from</span> <span style="color:#e6db74">'@waku/vote-sdk-react-hooks'</span>
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">VOTING_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'0xCA4093D66280Ec1242b660088188b50fDC14dcC4'</span>
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">MULTICALL_ADDRESS</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'0x53c43764255c17bd724f74c4ef150724ac50a3ed'</span>
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">DAPP_NAME</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'test'</span>
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">3</span>
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MainPage() {</span>
|
||||
<span style="color:#66d9ef">const</span> {<span style="color:#a6e22e">activate</span>, <span style="color:#a6e22e">deactivate</span>, <span style="color:#a6e22e">account</span>, <span style="color:#a6e22e">provider</span>} <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWeb3Connect</span>(<span style="color:#a6e22e">SUPPORTED_CHAIN_ID</span>)
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useWakuVoting</span>(
|
||||
<span style="color:#a6e22e">DAPP_NAME</span>,
|
||||
<span style="color:#a6e22e">VOTING_ADDRESS</span>,
|
||||
<span style="color:#a6e22e">provider</span>,
|
||||
<span style="color:#a6e22e">MULTICALL_ADDRESS</span>
|
||||
)
|
||||
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">TopBar</span>
|
||||
<span style="color:#a6e22e">logo</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">''</span>}
|
||||
<span style="color:#a6e22e">logoWidth</span><span style="color:#f92672">=</span>{<span style="color:#ae81ff">84</span>}
|
||||
<span style="color:#a6e22e">title</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">'WakuConnect Vote Demo'</span>}
|
||||
<span style="color:#a6e22e">theme</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">blueTheme</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">deactivate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">deactivate</span>}
|
||||
/>
|
||||
{<span style="color:#a6e22e">wakuVoting</span> <span style="color:#f92672">&&</span>
|
||||
<<span style="color:#f92672">Voting</span>
|
||||
<span style="color:#a6e22e">wakuVoting</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">wakuVoting</span>}
|
||||
<span style="color:#a6e22e">account</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">account</span>}
|
||||
<span style="color:#a6e22e">activate</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">activate</span>}
|
||||
/>}
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App() {</span>
|
||||
<span style="color:#66d9ef">return</span> (
|
||||
<<span style="color:#f92672">Wrapper</span>>
|
||||
<<span style="color:#f92672">GlobalStyle</span>/>
|
||||
<<span style="color:#f92672">MainPage</span>/>
|
||||
</<span style="color:#f92672">Wrapper</span>>
|
||||
)
|
||||
}
|
||||
|
||||
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">Wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">styled</span>.<span style="color:#a6e22e">div</span><span style="color:#e6db74">`
|
||||
</span><span style="color:#e6db74"> height: 100%;
|
||||
</span><span style="color:#e6db74"> width: 100%;
|
||||
</span><span style="color:#e6db74">`</span>
|
||||
|
||||
<span style="color:#a6e22e">ReactDOM</span>.<span style="color:#a6e22e">render</span>(
|
||||
<<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span>{{<span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'100%'</span>}}>
|
||||
<<span style="color:#f92672">App</span>/>
|
||||
</<span style="color:#f92672">div</span>>,
|
||||
document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">'root'</span>)
|
||||
)
|
||||
</code></pre></div><p>After starting a page you should be able to see a main page that looks like this:
|
||||
<img src="/assets/voting_sdk/Voting_Main_Page.png" alt="Main Page" /></p>
|
||||
<p>You can then create a proposal:
|
||||
<img src="/assets/voting_sdk/proposal_creation.gif" alt="Proposal creation" /></p>
|
||||
<p>Here is a proposal card after votes have happened:
|
||||
<img src="/assets/voting_sdk/proposal_card.png" alt="Proposal Card" /></p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="book-btn">
|
||||
Back
|
||||
</a>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<footer class="book-footer">
|
||||
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<div class="book-comments">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<label for="menu-control" class="hidden book-menu-overlay"></label>
|
||||
</div>
|
||||
|
||||
|
||||
<aside class="book-toc">
|
||||
<div class="book-toc-content">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#use-voting-component">Use Voting Component</a>
|
||||
<ul>
|
||||
<li><a href="#define-configuration">Define Configuration</a></li>
|
||||
<li><a href="#use-waku-voting">Use Waku Voting</a></li>
|
||||
<li><a href="#display-voting-component">Display Voting Component</a></li>
|
||||
<li><a href="#resulting-indextsx-file">Resulting <code>index.tsx</code> File</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
728
docs/guides/vote_poll_sdk/vote_sdk/index.html
Normal file
728
docs/guides/vote_poll_sdk/vote_sdk/index.html
Normal file
@ -0,0 +1,728 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="How to Use the Waku Connect Vote SDK # To demonstrate how to use the Waku Connect Vote SDK in your dApp, we will create a TypeScript React app from scratch.
|
||||
You can then adapt the steps depending on your dApp configuration and build setup.
|
||||
Only token holders can create, vote and finalize proposals. Hence, you need to have an ERC-20 token contract address ready.
|
||||
The resulting code of this guide can be found in the repo at examples/ropsten-voting.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Vote SDK" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" />
|
||||
|
||||
<title>Vote SDK | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body dir="ltr">
|
||||
<input type="checkbox" class="hidden toggle" id="menu-control" />
|
||||
<input type="checkbox" class="hidden toggle" id="toc-control" />
|
||||
<main class="container flex">
|
||||
<aside class="book-menu">
|
||||
<div class="book-menu-content">
|
||||
|
||||
<nav>
|
||||
<h2 class="book-brand">
|
||||
<a class="flex align-center" href="/"><span>Waku Connect Docs</span>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
|
||||
<div class="book-search">
|
||||
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
|
||||
<div class="book-search-spinner hidden"></div>
|
||||
<ul id="book-search-results"></ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="book-languages">
|
||||
<li>
|
||||
<input type="checkbox" id="languages" class="toggle" />
|
||||
<label for="languages" class="flex justify-between">
|
||||
<a role="button" class="flex align-center">
|
||||
<img src="/svg/translate.svg" class="book-icon" alt="Languages" />
|
||||
English
|
||||
</a>
|
||||
</label>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/es/">
|
||||
Español
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.wakuconnect.dev/pt/">
|
||||
Português
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/introduction/" class="">Introduction</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/quick_start/" class="">Quick Start</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations & Videos</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class="">How to Choose a Content Topic</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class="">Receive and Send Messages Using Waku Relay</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class="">Retrieve Messages Using Waku Store</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class="">Encrypt Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class="">Sign Messages Using Waku Message Version 1</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class="">Send Messages Using Waku Light Push</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class="">Vote Poll Sdk</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class=" active">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
|
||||
JS-Waku API Doc
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://vac.dev/" target="_blank" rel="noopener">
|
||||
Vac Team
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener">
|
||||
Vac RFCs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://status.im/" target="_blank" rel="noopener">
|
||||
Status.im
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>(function(){var a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="book-page">
|
||||
<header class="book-header">
|
||||
|
||||
<div class="flex align-center justify-between">
|
||||
<label for="menu-control">
|
||||
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
|
||||
</label>
|
||||
|
||||
<strong>Vote SDK</strong>
|
||||
|
||||
<label for="toc-control">
|
||||
|
||||
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
|
||||
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<aside class="hidden clearfix">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#how-to-use-the-waku-connect-vote-sdk">How to Use the Waku Connect Vote SDK</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<article class="markdown"><h1 id="how-to-use-the-waku-connect-vote-sdk">
|
||||
How to Use the Waku Connect Vote SDK
|
||||
<a class="anchor" href="#how-to-use-the-waku-connect-vote-sdk">#</a>
|
||||
</h1>
|
||||
<p>To demonstrate how to use the Waku Connect Vote SDK in your dApp,
|
||||
we will create a TypeScript React app from scratch.</p>
|
||||
<p>You can then adapt the steps depending on your dApp configuration and build setup.</p>
|
||||
<p>Only token holders can create, vote and finalize proposals.
|
||||
Hence, you need to have an ERC-20 token contract address ready.</p>
|
||||
<p>The resulting code of this guide can be found in the repo at
|
||||
<a href="https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/master/examples/ropsten-voting">examples/ropsten-voting</a>.</p>
|
||||
<p>Here is a preview of the end result:</p>
|
||||
<p>Create a proposal:
|
||||
<img src="/assets/voting_sdk/proposal_creation.gif" alt="Proposal creation" /></p>
|
||||
<p>Proposal card:
|
||||
<img src="/assets/voting_sdk/proposal_card.png" alt="Proposal Card" /></p>
|
||||
<p>After following the <a href="../dapp_creation/">create a dApp guide</a> you should have a dapp that can connect to wallet ready.
|
||||
We will continue from this point.</p>
|
||||
<p>First, add the Vote SDK packages:</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">yarn add <span style="color:#ae81ff">\
|
||||
</span><span style="color:#ae81ff"></span>@waku/vote-sdk-react-components @waku/vote-sdk-react-hooks @waku/vote-poll-sdk-react-components
|
||||
</code></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="book-btn">
|
||||
Get Started
|
||||
</a>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<footer class="book-footer">
|
||||
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/be6692ea9b943e8e023aa9fbe6337f051eafa004" title='Last modified by Szymon Szlachtowicz | Feb 4, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Feb 4, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/vote_poll_sdk/vote_sdk/_index.md" target="_blank" rel="noopener">
|
||||
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>(function(){function a(c){const a=window.getSelection(),b=document.createRange();b.selectNodeContents(c),a.removeAllRanges(),a.addRange(b)}document.querySelectorAll("pre code").forEach(b=>{b.addEventListener("click",function(c){a(b.parentElement),navigator.clipboard&&navigator.clipboard.writeText(b.parentElement.textContent)})})})()</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<div class="book-comments">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<label for="menu-control" class="hidden book-menu-overlay"></label>
|
||||
</div>
|
||||
|
||||
|
||||
<aside class="book-toc">
|
||||
<div class="book-toc-content">
|
||||
|
||||
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#how-to-use-the-waku-connect-vote-sdk">How to Use the Waku Connect Vote SDK</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
46
docs/guides/vote_poll_sdk/vote_sdk/index.xml
Normal file
46
docs/guides/vote_poll_sdk/vote_sdk/index.xml
Normal file
@ -0,0 +1,46 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Vote SDK on Waku Connect Docs</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/</link>
|
||||
<description>Recent content in Vote SDK on Waku Connect Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Thu, 06 Jan 2022 11:00:00 +1100</lastBuildDate><atom:link href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
<title>Deploy smart contract</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/</guid>
|
||||
<description>Deploy smart contract # Creating new package # For this deployment we will create a new package.
|
||||
mkdir contract-deployment cd contract-deployment yarn init yarn add @waku/vote-sdk-contracts ethers ts-node typescript Create a tsconfig.json with:
|
||||
{ &#34;compilerOptions&#34;: { &#34;target&#34;: &#34;es2020&#34;, &#34;module&#34;: &#34;commonJS&#34;, &#34;esModuleInterop&#34;: true, &#34;moduleResolution&#34;: &#34;node&#34;, &#34;resolveJsonModule&#34;: true, &#34;noEmit&#34;: true } } And now we can add a deploy script index.ts:
|
||||
import {ContractFactory, getDefaultProvider, Wallet} from &#39;ethers&#39;; import VotingContract from &#39;@waku/vote-sdk-contracts/build/VotingContract.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Creating Voting component</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/</guid>
|
||||
<description>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&rsquo;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:</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Use Voting Component</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/</guid>
|
||||
<description>Use Voting Component # Define Configuration # Configure the dApp by setting:
|
||||
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &#39;VOTING_ADDRESS&#39; const MULTICALL_ADDRESS = &#39;MULTICALL_ADDRESS&#39; const DAPP_NAME = &#39;YOUR_DAPP_NAME&#39; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
|
||||
import {useWakuVoting} from &#39;@waku/vote-sdk-react-hooks&#39; export function MainPage() { const {activate, deactivate, account, provider} = useWeb3Connect(SUPPORTED_CHAIN_ID) const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ) } Display Voting Component # Modify the MainPage to render a Voting component.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
100
docs/index.html
100
docs/index.html
@ -19,7 +19,7 @@ Waku can be used for chat purposes and for many machine-to-machine use cases.">
|
||||
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/docs/" title="Introdução">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/docs/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
@ -312,6 +312,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -325,7 +382,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -338,7 +395,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -351,7 +408,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -364,7 +452,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -377,7 +465,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -49,12 +49,12 @@ Legend:
|
||||
<pubDate>Wed, 12 Jan 2022 01:00:00 +0100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/presentations/</guid>
|
||||
<description>Presentations &amp; Videos # 17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.status.im/eth-global-2021
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
<description>Presentations &amp; Videos # 27 Jan 2022 - Web 3.0 Conference # 21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres</description>
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
|
||||
@ -21,7 +21,7 @@ Waku can be used for chat purposes and for many machine-to-machine use cases." /
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -309,6 +309,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -322,7 +379,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -335,7 +392,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -348,7 +405,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -361,7 +449,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -374,7 +462,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -3,31 +3,31 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Presentations & Videos # 17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.status.im/eth-global-2021
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
<meta name="description" content="Presentations & Videos # 27 Jan 2022 - Web 3.0 Conference # 21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres">
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.">
|
||||
<meta name="theme-color" content="#FFFFFF">
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Presentations & Videos" />
|
||||
<meta property="og:description" content="Presentations & Videos # 17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.status.im/eth-global-2021
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
<meta property="og:description" content="Presentations & Videos # 27 Jan 2022 - Web 3.0 Conference # 21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres" />
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/presentations/" /><meta property="article:section" content="docs" />
|
||||
<meta property="article:published_time" content="2022-01-12T01:00:00+01:00" />
|
||||
<meta property="article:modified_time" content="2022-01-27T11:18:41+11:00" />
|
||||
<meta property="article:modified_time" content="2022-02-10T10:33:56+11:00" />
|
||||
|
||||
<title>Presentations & Videos | Waku Connect Docs</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -315,6 +315,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -328,7 +385,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -341,7 +398,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -354,7 +411,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -367,7 +455,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -380,7 +468,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -524,9 +612,10 @@ https://github.com/alex-shpak/hugo-book
|
||||
<ul>
|
||||
<li><a href="#presentations--videos">Presentations & Videos</a>
|
||||
<ul>
|
||||
<li><a href="#17-sep-2021---ethonline">17 Sep 2021 - EthOnline</a></li>
|
||||
<li><a href="#27-jan-2022---web-30-conference">27 Jan 2022 - Web 3.0 Conference</a></li>
|
||||
<li><a href="#21-jul-2021---ethcc-2021">21 Jul 2021 - EthCC 2021</a></li>
|
||||
<li><a href="#21-jul-2021---ethereum-engineering-group-meetup">21 Jul 2021 - Ethereum Engineering Group meetup</a></li>
|
||||
<li><a href="#17-sep-2021---ethonline">17 Sep 2021 - EthOnline</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -545,17 +634,15 @@ https://github.com/alex-shpak/hugo-book
|
||||
Presentations & Videos
|
||||
<a class="anchor" href="#presentations--videos">#</a>
|
||||
</h1>
|
||||
<h2 id="17-sep-2021---ethonline">
|
||||
17 Sep 2021 - EthOnline
|
||||
<a class="anchor" href="#17-sep-2021---ethonline">#</a>
|
||||
<h2 id="27-jan-2022---web-30-conference">
|
||||
27 Jan 2022 - Web 3.0 Conference
|
||||
<a class="anchor" href="#27-jan-2022---web-30-conference">#</a>
|
||||
</h2>
|
||||
<p>Pre-recorded video for hackathon participants.</p>
|
||||
|
||||
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
|
||||
<iframe src="https://www.youtube.com/embed/ooRyn4aXsrM" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
|
||||
<iframe src="https://www.youtube.com/embed/1QjxqrLO8WA" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
|
||||
</div>
|
||||
|
||||
<p>Slides: <a href="https://notes.status.im/eth-global-2021">https://notes.status.im/eth-global-2021</a></p>
|
||||
<h2 id="21-jul-2021---ethcc-2021">
|
||||
21 Jul 2021 - EthCC 2021
|
||||
<a class="anchor" href="#21-jul-2021---ethcc-2021">#</a>
|
||||
@ -578,6 +665,17 @@ https://github.com/alex-shpak/hugo-book
|
||||
</div>
|
||||
|
||||
<p>Slides: <a href="https://notes.status.im/dappconnect-pres">https://notes.status.im/dappconnect-pres</a></p>
|
||||
<h2 id="17-sep-2021---ethonline">
|
||||
17 Sep 2021 - EthOnline
|
||||
<a class="anchor" href="#17-sep-2021---ethonline">#</a>
|
||||
</h2>
|
||||
<p>Pre-recorded video for hackathon participants.</p>
|
||||
|
||||
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
|
||||
<iframe src="https://www.youtube.com/embed/ooRyn4aXsrM" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
|
||||
</div>
|
||||
|
||||
<p>Slides: <a href="https://notes.status.im/eth-global-2021">https://notes.status.im/eth-global-2021</a></p>
|
||||
</article>
|
||||
|
||||
|
||||
@ -587,9 +685,9 @@ https://github.com/alex-shpak/hugo-book
|
||||
<div class="flex flex-wrap justify-between">
|
||||
|
||||
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/02d5ab77d041a7324a534578b8604b82cc61deec" title='Last modified by Franck R | Jan 27, 2022' target="_blank" rel="noopener">
|
||||
<div><a class="flex align-center" href="https://github.com/vacp2p/docs.wakuconnect.dev/commit/5eb747ec7c552a16ce915e229d61ce739e23141c" title='Last modified by Franck R | Feb 9, 2022' target="_blank" rel="noopener">
|
||||
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
||||
<span>Jan 27, 2022</span>
|
||||
<span>Feb 9, 2022</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -634,9 +732,10 @@ https://github.com/alex-shpak/hugo-book
|
||||
<ul>
|
||||
<li><a href="#presentations--videos">Presentations & Videos</a>
|
||||
<ul>
|
||||
<li><a href="#17-sep-2021---ethonline">17 Sep 2021 - EthOnline</a></li>
|
||||
<li><a href="#27-jan-2022---web-30-conference">27 Jan 2022 - Web 3.0 Conference</a></li>
|
||||
<li><a href="#21-jul-2021---ethcc-2021">21 Jul 2021 - EthCC 2021</a></li>
|
||||
<li><a href="#21-jul-2021---ethereum-engineering-group-meetup">21 Jul 2021 - Ethereum Engineering Group meetup</a></li>
|
||||
<li><a href="#17-sep-2021---ethonline">17 Sep 2021 - EthOnline</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -23,7 +23,7 @@ npm install js-waku # or with yarn yarn add js-waku Start a waku node # import
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -311,6 +311,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -324,7 +381,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -337,7 +394,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -350,7 +407,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -363,7 +451,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -376,7 +464,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -25,7 +25,7 @@ Legend:
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -313,6 +313,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -326,7 +383,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -339,7 +396,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -352,7 +409,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -365,7 +453,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -378,7 +466,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -307,6 +307,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -320,7 +377,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -333,7 +390,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -346,7 +403,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -359,7 +447,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -372,7 +460,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
'use strict';(function(){const g='/en.search-data.min.a17f15b6606b2f5bbc75a90c42a71729974161701128982784c7bd5f699638ad.json',h=Object.assign({cache:!0},{doc:{id:'id',field:['title','content'],store:['title','href','section']}}),a=document.querySelector('#book-search-input'),b=document.querySelector('#book-search-results');if(!a)return;a.addEventListener('focus',c),a.addEventListener('keyup',d),document.addEventListener('keypress',e);function e(b){if(b.target.value!==void 0)return;if(a===document.activeElement)return;const c=String.fromCharCode(b.charCode);if(!f(c))return;a.focus(),b.preventDefault()}function f(b){const c=a.getAttribute('data-hotkeys')||'';return c.indexOf(b)>=0}function c(){a.removeEventListener('focus',c),a.required=!0,fetch(g).then(a=>a.json()).then(a=>{window.bookSearchIndex=FlexSearch.create('balance',h),window.bookSearchIndex.add(a)}).then(()=>a.required=!1).then(d)}function d(){while(b.firstChild)b.removeChild(b.firstChild);if(!a.value)return;const c=window.bookSearchIndex.search(a.value,10);c.forEach(function(a){const c=i('<li><a href></a><small></small></li>'),d=c.querySelector('a'),e=c.querySelector('small');d.href=a.href,d.textContent=a.title,e.textContent=a.section,b.appendChild(c)})}function i(b){const a=document.createElement('div');return a.innerHTML=b,a.firstChild}})()
|
||||
'use strict';(function(){const g='/en.search-data.min.ef4fc92cae7a71c272a5a121e620906d075d6e074dadd0a53776e15e9c11b23a.json',h=Object.assign({cache:!0},{doc:{id:'id',field:['title','content'],store:['title','href','section']}}),a=document.querySelector('#book-search-input'),b=document.querySelector('#book-search-results');if(!a)return;a.addEventListener('focus',c),a.addEventListener('keyup',d),document.addEventListener('keypress',e);function e(b){if(b.target.value!==void 0)return;if(a===document.activeElement)return;const c=String.fromCharCode(b.charCode);if(!f(c))return;a.focus(),b.preventDefault()}function f(b){const c=a.getAttribute('data-hotkeys')||'';return c.indexOf(b)>=0}function c(){a.removeEventListener('focus',c),a.required=!0,fetch(g).then(a=>a.json()).then(a=>{window.bookSearchIndex=FlexSearch.create('balance',h),window.bookSearchIndex.add(a)}).then(()=>a.required=!1).then(d)}function d(){while(b.firstChild)b.removeChild(b.firstChild);if(!a.value)return;const c=window.bookSearchIndex.search(a.value,10);c.forEach(function(a){const c=i('<li><a href></a><small></small></li>'),d=c.querySelector('a'),e=c.querySelector('small');d.href=a.href,d.textContent=a.title,e.textContent=a.section,b.appendChild(c)})}function i(b){const a=document.createElement('div');return a.innerHTML=b,a.firstChild}})()
|
||||
@ -1 +0,0 @@
|
||||
'use strict';(function(){const g='/en.search-data.min.dd2c536f8c3960528c583f819c200056d2d0e962aa5ab68d0ff1aa16e69db682.json',h=Object.assign({cache:!0},{doc:{id:'id',field:['title','content'],store:['title','href','section']}}),a=document.querySelector('#book-search-input'),b=document.querySelector('#book-search-results');if(!a)return;a.addEventListener('focus',c),a.addEventListener('keyup',d),document.addEventListener('keypress',e);function e(b){if(b.target.value!==void 0)return;if(a===document.activeElement)return;const c=String.fromCharCode(b.charCode);if(!f(c))return;a.focus(),b.preventDefault()}function f(b){const c=a.getAttribute('data-hotkeys')||'';return c.indexOf(b)>=0}function c(){a.removeEventListener('focus',c),a.required=!0,fetch(g).then(a=>a.json()).then(a=>{window.bookSearchIndex=FlexSearch.create('balance',h),window.bookSearchIndex.add(a)}).then(()=>a.required=!1).then(d)}function d(){while(b.firstChild)b.removeChild(b.firstChild);if(!a.value)return;const c=window.bookSearchIndex.search(a.value,10);c.forEach(function(a){const c=i('<li><a href></a><small></small></li>'),d=c.querySelector('a'),e=c.querySelector('small');d.href=a.href,d.textContent=a.title,e.textContent=a.section,b.appendChild(c)})}function i(b){const a=document.createElement('div');return a.innerHTML=b,a.firstChild}})()
|
||||
@ -1 +0,0 @@
|
||||
'use strict';(function(){const g='/en.search-data.min.b06d77f831d6db27558b27168671b1d70a438ea4972578117a72ccdc810b62d9.json',h=Object.assign({cache:!0},{doc:{id:'id',field:['title','content'],store:['title','href','section']}}),a=document.querySelector('#book-search-input'),b=document.querySelector('#book-search-results');if(!a)return;a.addEventListener('focus',c),a.addEventListener('keyup',d),document.addEventListener('keypress',e);function e(b){if(b.target.value!==void 0)return;if(a===document.activeElement)return;const c=String.fromCharCode(b.charCode);if(!f(c))return;a.focus(),b.preventDefault()}function f(b){const c=a.getAttribute('data-hotkeys')||'';return c.indexOf(b)>=0}function c(){a.removeEventListener('focus',c),a.required=!0,fetch(g).then(a=>a.json()).then(a=>{window.bookSearchIndex=FlexSearch.create('balance',h),window.bookSearchIndex.add(a)}).then(()=>a.required=!1).then(d)}function d(){while(b.firstChild)b.removeChild(b.firstChild);if(!a.value)return;const c=window.bookSearchIndex.search(a.value,10);c.forEach(function(a){const c=i('<li><a href></a><small></small></li>'),d=c.querySelector('a'),e=c.querySelector('small');d.href=a.href,d.textContent=a.title,e.textContent=a.section,b.appendChild(c)})}function i(b){const a=document.createElement('div');return a.innerHTML=b,a.firstChild}})()
|
||||
@ -1 +0,0 @@
|
||||
'use strict';(function(){const g='/en.search-data.min.13c1dfa15aa0755b0307987ec43aac6e5a688d7d4566205e481b915bcd260306.json',h=Object.assign({cache:!0},{doc:{id:'id',field:['title','content'],store:['title','href','section']}}),a=document.querySelector('#book-search-input'),b=document.querySelector('#book-search-results');if(!a)return;a.addEventListener('focus',c),a.addEventListener('keyup',d),document.addEventListener('keypress',e);function e(b){if(b.target.value!==void 0)return;if(a===document.activeElement)return;const c=String.fromCharCode(b.charCode);if(!f(c))return;a.focus(),b.preventDefault()}function f(b){const c=a.getAttribute('data-hotkeys')||'';return c.indexOf(b)>=0}function c(){a.removeEventListener('focus',c),a.required=!0,fetch(g).then(a=>a.json()).then(a=>{window.bookSearchIndex=FlexSearch.create('balance',h),window.bookSearchIndex.add(a)}).then(()=>a.required=!1).then(d)}function d(){while(b.firstChild)b.removeChild(b.firstChild);if(!a.value)return;const c=window.bookSearchIndex.search(a.value,10);c.forEach(function(a){const c=i('<li><a href></a><small></small></li>'),d=c.querySelector('a'),e=c.querySelector('small');d.href=a.href,d.textContent=a.title,e.textContent=a.section,b.appendChild(c)})}function i(b){const a=document.createElement('div');return a.innerHTML=b,a.firstChild}})()
|
||||
@ -1 +0,0 @@
|
||||
'use strict';(function(){const g='/en.search-data.min.027a509f040b96745c9d3697ed7c204e3084985d715b3fed15fe5da9627593e1.json',h=Object.assign({cache:!0},{doc:{id:'id',field:['title','content'],store:['title','href','section']}}),a=document.querySelector('#book-search-input'),b=document.querySelector('#book-search-results');if(!a)return;a.addEventListener('focus',c),a.addEventListener('keyup',d),document.addEventListener('keypress',e);function e(b){if(b.target.value!==void 0)return;if(a===document.activeElement)return;const c=String.fromCharCode(b.charCode);if(!f(c))return;a.focus(),b.preventDefault()}function f(b){const c=a.getAttribute('data-hotkeys')||'';return c.indexOf(b)>=0}function c(){a.removeEventListener('focus',c),a.required=!0,fetch(g).then(a=>a.json()).then(a=>{window.bookSearchIndex=FlexSearch.create('balance',h),window.bookSearchIndex.add(a)}).then(()=>a.required=!1).then(d)}function d(){while(b.firstChild)b.removeChild(b.firstChild);if(!a.value)return;const c=window.bookSearchIndex.search(a.value,10);c.forEach(function(a){const c=i('<li><a href></a><small></small></li>'),d=c.querySelector('a'),e=c.querySelector('small');d.href=a.href,d.textContent=a.title,e.textContent=a.section,b.appendChild(c)})}function i(b){const a=document.createElement('div');return a.innerHTML=b,a.firstChild}})()
|
||||
@ -2,17 +2,41 @@
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
<url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/</loc>
|
||||
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/</loc>
|
||||
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/</loc>
|
||||
<lastmod>2022-01-31T10:39:20+11:00</lastmod>
|
||||
<lastmod>2022-02-08T23:06:38+00:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/</loc>
|
||||
<lastmod>2022-01-31T10:39:20+11:00</lastmod>
|
||||
<lastmod>2022-02-08T23:06:38+00:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/</loc>
|
||||
<lastmod>2022-02-02T11:56:14+11:00</lastmod>
|
||||
@ -21,13 +45,13 @@
|
||||
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/</loc>
|
||||
<lastmod>2022-01-31T10:39:20+11:00</lastmod>
|
||||
<lastmod>2022-02-08T23:06:38+00:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/</loc>
|
||||
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
|
||||
<lastmod>2022-02-08T23:06:38+00:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/</loc>
|
||||
<lastmod>2022-02-02T11:56:14+11:00</lastmod>
|
||||
<lastmod>2022-02-08T23:06:38+00:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/09_debug/</loc>
|
||||
<lastmod>2022-01-31T10:56:57+11:00</lastmod>
|
||||
@ -71,20 +95,14 @@
|
||||
href="https://docs.wakuconnect.dev/docs/"
|
||||
/>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/</loc>
|
||||
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/</loc>
|
||||
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</loc>
|
||||
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/</loc>
|
||||
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/</loc>
|
||||
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/</loc>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/quick_start/</loc>
|
||||
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
|
||||
@ -93,7 +111,7 @@
|
||||
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/presentations/</loc>
|
||||
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
|
||||
<lastmod>2022-02-10T10:33:56+11:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/</loc>
|
||||
<lastmod>2022-01-31T10:56:57+11:00</lastmod>
|
||||
@ -108,7 +126,7 @@
|
||||
<lastmod>2022-01-24T12:17:00+11:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/</loc>
|
||||
<lastmod>2022-01-27T11:18:41+11:00</lastmod>
|
||||
<lastmod>2022-02-04T03:44:23+01:00</lastmod>
|
||||
</url><url>
|
||||
<loc>https://docs.wakuconnect.dev/categories/</loc>
|
||||
<xhtml:link
|
||||
|
||||
100
index.html
100
index.html
@ -20,7 +20,7 @@ Waku can be used for chat purposes and for many machine-to-machine use cases.">
|
||||
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/" title="Introdução">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
@ -313,6 +313,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -326,7 +383,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -339,7 +396,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -352,7 +409,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -365,7 +453,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -378,7 +466,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
109
index.xml
109
index.xml
@ -7,6 +7,30 @@
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
<lastBuildDate>Thu, 09 Dec 2021 14:00:00 +0100</lastBuildDate><atom:link href="https://docs.wakuconnect.dev/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
<title>Create the DApp and Install Dependencies</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/</guid>
|
||||
<description>Create the DApp and Install Dependencies # Create React App # Create the new React app using the typescript template. Install the Waku Poll SDK packages.
|
||||
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>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Deploy smart contract</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/</guid>
|
||||
<description>Deploy smart contract # Creating new package # For this deployment we will create a new package.
|
||||
mkdir contract-deployment cd contract-deployment yarn init yarn add @waku/vote-sdk-contracts ethers ts-node typescript Create a tsconfig.json with:
|
||||
{ &#34;compilerOptions&#34;: { &#34;target&#34;: &#34;es2020&#34;, &#34;module&#34;: &#34;commonJS&#34;, &#34;esModuleInterop&#34;: true, &#34;moduleResolution&#34;: &#34;node&#34;, &#34;resolveJsonModule&#34;: true, &#34;noEmit&#34;: true } } And now we can add a deploy script index.ts:
|
||||
import {ContractFactory, getDefaultProvider, Wallet} from &#39;ethers&#39;; import VotingContract from &#39;@waku/vote-sdk-contracts/build/VotingContract.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>How to Choose a Content Topic</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/</link>
|
||||
@ -20,6 +44,27 @@ The format for content topics is as follows:
|
||||
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>Connect to the Ethereum Wallet</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/</guid>
|
||||
<description>Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user&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>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Creating Voting component</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/</guid>
|
||||
<description>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&rsquo;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:</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Receive and Send Messages Using Waku Relay</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/</link>
|
||||
@ -31,6 +76,27 @@ Before starting, you need to choose a Content Topic for your dApp. Check out the
|
||||
For this guide, we are using a single content topic: /relay-guide/1/chat/proto.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Connect to the Ethereum Wallet useDapp</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/</guid>
|
||||
<description>Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user&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>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Use Voting Component</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/</guid>
|
||||
<description>Use Voting Component # Define Configuration # Configure the dApp by setting:
|
||||
Address of the multicall smart contract of the target chain, Address of the voting smart contract, Your dApp name. const VOTING_ADDRESS = &#39;VOTING_ADDRESS&#39; const MULTICALL_ADDRESS = &#39;MULTICALL_ADDRESS&#39; const DAPP_NAME = &#39;YOUR_DAPP_NAME&#39; Use Waku Voting # Now, we need a Waku voting object. For that, call useWakuVoting:
|
||||
import {useWakuVoting} from &#39;@waku/vote-sdk-react-hooks&#39; export function MainPage() { const {activate, deactivate, account, provider} = useWeb3Connect(SUPPORTED_CHAIN_ID) const wakuVoting = useWakuVoting( DAPP_NAME, VOTING_ADDRESS, provider, MULTICALL_ADDRESS ) } Display Voting Component # Modify the MainPage to render a Voting component.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Retrieve Messages Using Waku Store</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/</link>
|
||||
@ -121,33 +187,12 @@ Waku is a decentralized, censorship-resistant, network and protocol family. It e
|
||||
Waku can be used for chat purposes and for many machine-to-machine use cases.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Create the DApp and Install Dependencies</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/</guid>
|
||||
<description>Create the DApp and Install Dependencies # Create React App # Create the new React app using the typescript template. Install the Waku Poll SDK packages.
|
||||
In this guide, we use useDApp to access the blockchain.
|
||||
yarn create react-app poll-dapp-ts --template typescript cd poll-dapp-ts yarn add \ @waku/poll-sdk-react-components @waku/poll-sdk-react-hooks @waku/vote-poll-sdk-react-components \ @usedapp/core@0.4.7 yarn add -D @types/styled-components @usedapp/core must be frozen to version 0.4.7 due to incompatibility between minor versions of ethers.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Connect to the Ethereum Wallet</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/</guid>
|
||||
<description>Connect to the Ethereum Wallet # This section may be skipped if you are adding the poll feature to an existing dApp that already connects to the user&rsquo;s wallet. Delete the template App component:
|
||||
rm -f App.tsx App.css App.test.tsx Top bar # Use TopBar component to display wallet information. For that, create a PollPage component that includes the top bar and will include the poll elements. The component uses ethers to connect to the user&rsquo;s wallet:</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Create-A-Poll Button</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</link>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/</guid>
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/</guid>
|
||||
<description>Create-A-Poll Button # Create the Poll component. It will allow the user to create a new poll, view polls and answer them. We&rsquo;ll start by adding a button to create a poll.
|
||||
mkdir components touch components/Poll.tsx Styled-components # Again, create a Wrapper for styling:
|
||||
import styled from &#34;styled-components&#34;; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: center; max-width: 1146px; position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; @media (max-width: 1146px) { max-width: 780px; } @media (max-width: 600px) { padding: 132px 16px 32px; } @media (max-width: 425px) { padding: 96px 16px 84px; } `; Button # Create a button that will display the PollCreation component on click.</description>
|
||||
@ -155,10 +200,10 @@ import styled from &#34;styled-components&#34;; const Wrapper = styled.d
|
||||
|
||||
<item>
|
||||
<title>Poll Creation Component</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/</link>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/</guid>
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/</guid>
|
||||
<description>Poll Creation Component # The Poll SDK provides an off-the-shelf component to create a new poll: PollCreation. It takes in a WakuPolling hook that can created with useWakuPolling.
|
||||
useWakuPolling takes:
|
||||
appName: Your app name. It is used to generate a unique content topic for your polls. See How to Choose a Content Topic for more information. tokenAddress: The address of your ERC-20 token. Only token holders can create and answer polls.</description>
|
||||
@ -166,14 +211,14 @@ useWakuPolling takes:
|
||||
|
||||
<item>
|
||||
<title>Poll List Component</title>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/</link>
|
||||
<link>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/</link>
|
||||
<pubDate>Mon, 03 Jan 2022 11:00:00 +1100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/</guid>
|
||||
<guid>https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/</guid>
|
||||
<description>Poll List Component # To display existing polls, the PollList component is provided.
|
||||
Simply add it to the Poll function to render it. It needs the account variable that can be passed as a property to Poll:
|
||||
components/Poll.tsx:
|
||||
import { useState } from &#34;react&#34;; import { useConfig } from &#34;@usedapp/core&#34;; import { PollCreation, PollList } from &#34;@waku/poll-sdk-react-components&#34;; import { JsonRpcSigner, Web3Provider } from &#34;@ethersproject/providers&#34;; import { useWakuPolling } from &#34;@waku/poll-sdk-react-hooks&#34;; import { CreateButton } from &#34;@waku/vote-poll-sdk-react-components&#34;; import { Theme } from &#34;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#34;; import { ChainId } from &#34;@usedapp/core/src/constants&#34;; type PollProps = { appName: string; library: Web3Provider | undefined; signer: JsonRpcSigner | undefined; chainId: ChainId | undefined; account: string | null | undefined; theme: Theme; tokenAddress: string; }; export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress, }: PollProps) { const config = useConfig(); const [showPollCreation, setShowPollCreation] = useState(false); const wakuPolling = useWakuPolling( appName, tokenAddress, library, config?</description>
|
||||
import React, { useMemo, useState } from &#39;react&#39; import styled from &#39;styled-components&#39; import { PollCreation, PollList } from &#39;@waku/poll-sdk-react-components&#39; import { Web3Provider } from &#39;@ethersproject/providers&#39; import { useWakuPolling } from &#39;@waku/poll-sdk-react-hooks&#39; import { CreateButton } from &#39;@waku/vote-poll-sdk-react-components&#39; import { Theme } from &#39;@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes&#39; type PollProps = { appName: string library: Web3Provider | undefined account: string | null | undefined theme: Theme tokenAddress: string multicallAddress: string } export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress }: PollProps) { const [showPollCreation, setShowPollCreation] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, multicallAddress) const disabled = useMemo(() =&gt; !</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
@ -207,12 +252,12 @@ Legend:
|
||||
<pubDate>Wed, 12 Jan 2022 01:00:00 +0100</pubDate>
|
||||
|
||||
<guid>https://docs.wakuconnect.dev/docs/presentations/</guid>
|
||||
<description>Presentations &amp; Videos # 17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.status.im/eth-global-2021
|
||||
21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
<description>Presentations &amp; Videos # 27 Jan 2022 - Web 3.0 Conference # 21 Jul 2021 - EthCC 2021 # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
21 Jul 2021 - Ethereum Engineering Group meetup # Note: DappConnect is now named Waku Connect.
|
||||
Slides: https://notes.status.im/dappconnect-pres</description>
|
||||
Slides: https://notes.status.im/dappconnect-pres
|
||||
17 Sep 2021 - EthOnline # Pre-recorded video for hackathon participants.
|
||||
Slides: https://notes.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<sitemap>
|
||||
<loc>https://docs.wakuconnect.dev/en/sitemap.xml</loc>
|
||||
|
||||
<lastmod>2022-02-02T11:56:14+11:00</lastmod>
|
||||
<lastmod>2022-02-10T10:33:56+11:00</lastmod>
|
||||
|
||||
</sitemap>
|
||||
|
||||
|
||||
100
tags/index.html
100
tags/index.html
@ -17,7 +17,7 @@
|
||||
<link rel="alternate" hreflang="pt" href="https://docs.wakuconnect.dev/pt/tags/" title="Tags">
|
||||
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
||||
<script defer src="/flexsearch.min.js"></script>
|
||||
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" crossorigin="anonymous"></script>
|
||||
<script defer src="/en.search.min.1ab911b43534094f35fca7ff8b4e9ec387e474fb768f8cefee49c175a03e45a7.js" integrity="sha256-GrkRtDU0CU81/Kf/i06ew4fkdPt2j4zv7knBdaA+Rac=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://docs.wakuconnect.dev/tags/index.xml" title="Waku Connect Docs" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
@ -310,6 +310,63 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/" class="">Create a DApp</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_usedapp/" class="">Connect to the Ethereum Wallet useDapp</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class="">Poll SDK</a>
|
||||
|
||||
|
||||
@ -323,7 +380,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class="">Create the DApp and Install Dependencies</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -336,7 +393,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation/" class="">Poll Creation Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -349,7 +406,38 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list/" class="">Poll List Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/" class="">Vote SDK</a>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract/" class="">Deploy smart contract</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -362,7 +450,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation/" class="">Creating Voting component</a>
|
||||
|
||||
|
||||
</li>
|
||||
@ -375,7 +463,7 @@ https://github.com/alex-shpak/hugo-book
|
||||
|
||||
|
||||
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
||||
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting/" class="">Use Voting Component</a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user