waku-org
/
js.waku.guide
mirror of https://github.com/waku-org/js.waku.guide.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

remove Vote Poll SDK documentation, intro update (#69)

This commit is contained in:
fryorcraken.eth 2023-03-01 16:18:14 +11:00 committed by GitHub
parent 338ad4c097
commit 2a51827d74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 7 additions and 1378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
content/docs/guides/vote_poll_sdk/_index.md
View File

@ -1,78 +0,0 @@
---
weight: 100
---
# Waku Connect Vote & Poll SDK
The Waku Connect Vote & Poll SDK enables developers to add Waku powered polling and voting features to their dApp.
The repository can be found on GitHub: https://github.com/status-im/wakuconnect-vote-poll-sdk.
The SDK can be used in two different ways:
to vote (commitment to the blockchain) or poll (no interaction with the blockchain).
For both functionalities, only ERC-20 token holders can create or answer polls/votes.
The developer using the SDK can configure which ERC-20 token contract is used.
## Documentation
For either SDKs, you need to start by creating a dApp.
To do so, you can follow the [Create a DApp](./dapp_creation) instructions.
## Packages
### Common
- `@waku/vote-poll-sdk-core`: Common libraries to both vote and poll functionalities.
- `@waku/vote-poll-sdk-react-components`: Common React components to both vote and poll functionalities.
### Vote
- `@waku/vote-sdk-react-components`: React components.
- `@waku/vote-sdk-react-hooks`: React hooks.
- `@waku/vote-sdk-contracts`: Solidity contracts.
### Poll
- `@waku/poll-sdk-react-components`: React components.
- `@waku/poll-sdk-react-hooks`: React hooks.
## Waku Connect Vote SDK
The Waku Connect Vote SDK allows you to leverage Waku to save gas fees for most voters.
It uses Waku to broadcast and aggregate votes.
Most token holders will not need to spend gas to vote.
Only the party that starts an election and submit the end results need to interact with the blockchain.
For example, it can be used by a DAO to manage proposals
where proposal creation and vote results must be committed to the blockchain.
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.
### Documentation
You can find more information about the Vote SDK's properties in the [README](https://github.com/status-im/wakuconnect-vote-poll-sdk#wakuconnect-vote-sdk).
See [How to Use the Waku Connect Vote SDK](./vote_sdk).
## Waku Connect Poll SDK
The Waku Connect Poll SDK allows you to leverage Waku and enable token holders to create, answer and view polls.
The polls are not committed to the blockchain and hence do not cost gas.
As the polls use Waku, they do maintain properties expected from dApps: decentralized and censorship-resistant.
The high-level functionality is as follows:
- To create a poll, a token holder sends a message with the poll questions, possible answers and an end time over Waku,
- Other users receive the poll creation message and can view the poll,
- To avoid spam, only polls created by actual token holders are displayed,
- Any token holder can send their poll answer over Waku,
- Each user cumulates poll responses from Waku and can view them,
- To avoid spam, only responses sent by actual token holders are displayed.
### Documentation
See [How to Use the Waku Connect Poll SDK](./poll_sdk).

98
content/docs/guides/vote_poll_sdk/dapp_creation/01_create_dapp.md
View File

@ -1,98 +0,0 @@
---
title: Create the DApp and Install Dependencies
date: 2022-01-03T11:00:00+1100
weight: 1
---
# 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.
We will describe below a method to configure polyfills when using `create-react-app`/`react-scripts` or webpack 5.
This may not be necessary if you do not use `react-scripts` or if you use webpack 4.
Start by installing the polyfill libraries:
```shell
yarn add assert buffer crypto-browserify stream-browserify
```
### Webpack 5
If you directly use webpack 5,
then you can inspire yourself from this [webpack.config.js](https://github.com/status-im/wakuconnect-vote-poll-sdk/blob/main/examples/mainnet-poll/webpack.config.js).
### React-App-Rewired
An alternative is to let `react-scripts` control the webpack 5 config and only override some elements using `react-app-rewired`.
Install `react-app-rewired`:
```shell
yarn add -D react-app-rewired
```
Create a `config-overrides.js` file at the root of your app:
```js
const webpack = require("webpack");
module.exports = (config) => {
// Override webpack 5 config from react-scripts to load polyfills
if (!config.resolve) config.resolve = {};
if (!config.resolve.fallback) config.resolve.fallback = {};
Object.assign(config.resolve.fallback, {
buffer: require.resolve("buffer"),
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
assert: require.resolve("assert"),
});
if (!config.plugins) config.plugins = [];
config.plugins.push(
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
})
);
return config;
};
```
Use `react-app-rewired` in the `package.json`, instead of `react-scripts`:
```
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test",
+ "eject": "react-app-rewired eject"
},
```
## Start development server
You can now start the development server to serve your dApp at http://localhost:3000/ while we code:
```shell
yarn start
```
{{< button relref="./" >}}Back{{< /button >}}
{{< button relref="./02_connect_wallet" >}}Next: Connect to the Ethereum Wallet{{< /button >}}

173
content/docs/guides/vote_poll_sdk/dapp_creation/02_connect_wallet.md
View File

@ -1,173 +0,0 @@
---
title: Connect to the Ethereum Wallet
date: 2022-01-03T11:00:00+1100
weight: 2
---
# Connect to the Ethereum Wallet
{{< 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 `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.
{{< /hint >}}
In this we will use `ethers` to keep amount of dependencies to minimum but feel free to use other packages.
```shell
yarn add ethers@5.4.6
```
{{< hint warning >}}
The SDK use `ethers` version 5.4.6 due to incompatibility between minor versions it is recommended to use this version.
{{< /hint >}}
Delete the template `App` component:
```shell
rm -f App.tsx App.css App.test.tsx
```
## Hook for connecting to Wallet
In this example we will use this [hook](https://github.com/status-im/wakuconnect-vote-poll-sdk/blob/12bcd17c963106e9207b06182bc5f6379f771b99/examples/mainnet-poll/src/hooks/useWeb3Connect.ts) to connect to a Wallet.
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.
## 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:
`MULTICALL_ADDRESS` is an address to multicall smart contract that allows aggregating multiple contract calls into one, thus reducing number of calls to blockchain needed.
Example multicall addresses: - Mainnet: `0xeefba1e63905ef1d7acba5a8513c70307c1ce441`, - Ropsten: `0x53c43764255c17bd724f74c4ef150724ac50a3ed`
But if you want you can deploy your own multicall smart contract.
```tsx
const MULTICALL_ADDRESS = "0xeefba1e63905ef1d7acba5a8513c70307c1ce441";
const SUPPORTED_CHAIN_ID = 1;
export function MainPage() {
const { activate, deactivate, account, provider } =
useWeb3Connect(SUPPORTED_CHAIN_ID);
return (
<Wrapper>
<TopBar
logo={pollingIcon}
logoWidth={84}
title={"WakuConnect Poll Demo"}
theme={orangeTheme}
activate={activate}
account={account}
deactivate={deactivate}
/>
//Place for poll or vote component
</Wrapper>
);
}
```
## Page
### Styled-components
[`styled-components`](https://styled-components.com/) is used for easy styling.
Create a `Wrapper` variable to use in the page component:
```tsx
import styled from "styled-components";
const Wrapper = styled.div`
height: 100%;
width: 100%;
`;
```
### Render
Finally, create the `App` component:
```tsx
export function App() {
return (
<Wrapper>
<GlobalStyle />
<MainPage />
</Wrapper>
);
}
```
Your `index.tsx` should now be:
```tsx
import React from "react";
import styled from "styled-components";
import { Poll } from "./components/Poll";
import { GlobalStyle, TopBar } from "@waku/vote-poll-sdk-react-components";
import pollingIcon from "./assets/images/pollingIcon.png";
import { orangeTheme } from "@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes";
import ReactDOM from "react-dom";
import { BrowserRouter, useLocation } from "react-router-dom";
import { Route, Switch } from "react-router";
import { useWeb3Connect } from "./hooks/useWeb3Connect";
const MULTICALL_ADDRESS = "0xeefba1e63905ef1d7acba5a8513c70307c1ce441";
const SUPPORTED_CHAIN_ID = 1;
export function MainPage({ tokenAddress }: { tokenAddress: string }) {
const { activate, deactivate, account, provider } =
useWeb3Connect(SUPPORTED_CHAIN_ID);
return (
<Wrapper>
<TopBar
logo={pollingIcon}
logoWidth={84}
title={"WakuConnect Poll Demo"}
theme={orangeTheme}
activate={activate}
account={account}
deactivate={deactivate}
/>
//Place for poll or vote component
</Wrapper>
);
}
export function App() {
const location = useLocation();
const tokenAddress = new URLSearchParams(location.search).get("token");
return (
<Wrapper>
<GlobalStyle />
<MainPage tokenAddress={tokenAddress ?? TOKEN_ADDRESS} />
</Wrapper>
);
}
const Wrapper = styled.div`
height: 100%;
width: 100%;
`;
ReactDOM.render(
<div style={{ height: "100%" }}>
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
</Switch>
</BrowserRouter>
</div>,
document.getElementById("root")
);
```
{{< button relref="./01_create_dapp" >}}Back{{< /button >}}
{{< button relref="./03_connect_wallet_useDapp" >}}Next: Connect using useDapp{{< /button >}}

209
content/docs/guides/vote_poll_sdk/dapp_creation/03_connect_wallet_useDapp.md
View File

@ -1,209 +0,0 @@
---
title: Connect to the Ethereum Wallet useDapp
date: 2022-01-03T11:00:00+1100
weight: 3
---
# Connect to the Ethereum Wallet
{{< 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 `@useDapp` for wallet connection.
{{< /hint >}}
In this guide, we use [useDApp](https://usedapp.io/) to access the blockchain.
```shell
yarn add @usedapp/core@0.4.7
```
{{< hint warning >}}
`@usedapp/core` must be frozen to version `0.4.7` due to incompatibility between minor versions of `ethers`.
Waku Connect Vote & Poll SDK will be upgraded to the latest version of `@usedapp/core` and `ethers` once `ethereum-waffle`
is released with the [latest version of `ethers`](https://github.com/EthWorks/Waffle/pull/603).
{{< /hint >}}
Delete the template `App` component:
```shell
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:
```tsx
export function PollPage() {
const { account, library, activateBrowserWallet, deactivate } = useEthers();
const [signer, setSigner] = useState<undefined | JsonRpcSigner>(undefined);
useEffect(() => {
if (account) {
setSigner(library?.getSigner());
} else {
// Deactivate signer if signed out
setSigner(undefined);
}
}, [account]);
return (
<div>
<TopBar
logo={""}
logoWidth={84}
title={"Poll dApp"}
theme={orangeTheme}
activate={activateBrowserWallet}
account={account}
deactivate={deactivate}
/>
</div>
);
}
```
## Page
### UseDApp
Create a `config` variable that contains the Ethereum network parameters:
```tsx
import { ChainId, DAppProvider, useEthers } from "@usedapp/core";
const config = {
readOnlyChainId: ChainId.Mainnet,
readOnlyUrls: {
[ChainId.Mainnet]: "https://mainnet.infura.io/v3/your-infura-token",
},
multicallAddresses: {
1: "0xeefba1e63905ef1d7acba5a8513c70307c1ce441",
3: "0x53c43764255c17bd724f74c4ef150724ac50a3ed",
},
notifications: {
checkInterval: 500,
expirationPeriod: 50000,
},
};
```
Replace `your-infura-token` with your [Infura API token](https://infura.io/docs/ethereum).
### Styled-components
[`styled-components`](https://styled-components.com/) is used for easy styling.
Create a `Wrapper` variable to use in the page component:
```tsx
import styled from "styled-components";
const Wrapper = styled.div`
height: 100%;
width: 100%;
`;
```
### Render
Finally, create the `App` component:
```tsx
function App() {
return (
<Wrapper>
<GlobalStyle />
<DAppProvider config={config}>
<PollPage />
</DAppProvider>
</Wrapper>
);
}
```
Your `index.tsx` should now be:
```tsx
import { ChainId, DAppProvider, useEthers } from "@usedapp/core";
import { GlobalStyle, TopBar } from "@waku/vote-poll-sdk-react-components";
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { JsonRpcSigner } from "@ethersproject/providers";
import { orangeTheme } from "@waku/vote-poll-sdk-react-components/dist/cjs/src/style/themes";
import styled from "styled-components";
const config = {
readOnlyChainId: ChainId.Mainnet,
readOnlyUrls: {
[ChainId.Mainnet]: "https://mainnet.infura.io/v3/your-infura-token",
},
multicallAddresses: {
1: "0xeefba1e63905ef1d7acba5a8513c70307c1ce441",
3: "0x53c43764255c17bd724f74c4ef150724ac50a3ed",
},
notifications: {
checkInterval: 500,
expirationPeriod: 50000,
},
};
function PollPage() {
const { account, library, activateBrowserWallet, deactivate } = useEthers();
const [signer, setSigner] = useState<undefined | JsonRpcSigner>(undefined);
useEffect(() => {
if (account) {
setSigner(library?.getSigner());
} else {
// Deactivate signer if signed out
setSigner(undefined);
}
}, [account]);
return (
<div>
<TopBar
logo={""}
logoWidth={84}
title={"Poll dApp"}
theme={orangeTheme}
activate={activateBrowserWallet}
account={account}
deactivate={deactivate}
/>
//Place for poll or vote component
</div>
);
}
function App() {
return (
<Wrapper>
<GlobalStyle />
<DAppProvider config={config}>
<PollPage />
</DAppProvider>
</Wrapper>
);
}
const Wrapper = styled.div`
height: 100%;
width: 100%;
`;
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
```
{{< button relref="./02_connect_wallet" >}}Back{{< /button >}}

19
content/docs/guides/vote_poll_sdk/dapp_creation/_index.md
View File

@ -1,19 +0,0 @@
---
title: Create a DApp
date: 2022-01-03T11:00:00+1100
weight: 1
---
# 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.
Hence, you need to have an ERC-20 token contract address ready.
{{< button relref="./01_create_dapp" >}}Get Started{{< /button >}}

125
content/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button.md
View File

@ -1,125 +0,0 @@
---
title: Create-A-Poll Button
date: 2022-01-03T11:00:00+1100
weight: 13
---
# Create-A-Poll Button
Create the `Poll` component.
It will allow the user to create a new poll, view polls and answer them.
We'll start by adding a button to create a poll.
```shell
mkdir components
touch components/Poll.tsx
```
## Styled-components
Again, create a `Wrapper` for styling:
```tsx
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.
To create a poll, we need access to the wallet,
thus the button must be disabled if the wallet is not connected.
The button is disabled if `signer` is undefined.
To give a visual clue to the user, also make the button grey when disabled.
Upon clicking the button, we set `showPollCreation` to true.
`showPollCreation` will control when to render the poll creation modal.
`components/Poll.tsx`:
```tsx
import { useMemo, useState } from "react";
import { Web3Provider } from "@ethersproject/providers";
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 = {
account: string | null | undefined;
theme: Theme;
};
export function Poll({ account, theme }: PollProps) {
const [showPollCreation, setShowPollCreation] = useState(false);
const disabled = useMemo(() => !account, [account]);
return (
<Wrapper>
{
<CreateButton
style={{
backgroundColor: disabled ? "lightgrey" : theme.primaryColor,
}}
theme={theme}
disabled={disabled}
onClick={() => setShowPollCreation(true)}
>
Create a poll
</CreateButton>
}
</Wrapper>
);
}
```
Now update the `MainPage` component to render the new `Poll` component:
`index.tsx`:
```tsx
export function MainPage() {
const { activate, deactivate, account, provider } =
useWeb3Connect(SUPPORTED_CHAIN_ID);
return (
<div>
<TopBar
logo={""}
logoWidth={84}
title={"Poll dApp"}
theme={orangeTheme}
activate={activateBrowserWallet}
account={account}
deactivate={deactivate}
/>
<Poll theme={orangeTheme} signer={signer} />
</div>
);
}
```
Now, you have a button:
![Create a poll button](/assets/poll_sdk/create-poll-button.png)
{{< button relref="./" >}}Back{{< /button >}}
{{< button relref="./02_poll_creation" >}}Next: Poll Creation Component{{< /button >}}

138
content/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation.md
View File

@ -1,138 +0,0 @@
---
title: Poll Creation Component
date: 2022-01-03T11:00:00+1100
weight: 14
---
# 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](/docs/guides/01_choose_content_topic/) for more information.
- `tokenAddress`: The address of your ERC-20 token.
Only token holders can create and answer polls.
- `provider`: The Web3 provider to access the blockchain.
- `multicallAddress`: Address to this blockchain's multicall contract.
Add these parameters to `PollProps` and call `useWakuPolling`.
`components/Poll.tsx`
```tsx
import React, { useMemo, useState } from "react";
import styled from "styled-components";
import { PollCreation } 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,
signer,
chainId,
theme,
tokenAddress,
}: PollProps) {
const [showPollCreation, setShowPollCreation] = useState(false);
const wakuPolling = useWakuPolling(
appName,
tokenAddress,
library,
multicallAddress
);
const disabled = useMemo(() => !account, [account]);
return (
<Wrapper>
{showPollCreation && signer && (
<PollCreation
wakuPolling={wakuPolling}
setShowPollCreation={setShowPollCreation}
theme={theme}
/>
)}
{
<CreateButton
style={{
backgroundColor: disabled ? "lightgrey" : theme.primaryColor,
}}
theme={theme}
disabled={disabled}
onClick={() => setShowPollCreation(true)}
>
Create a poll
</CreateButton>
}
</Wrapper>
);
}
```
Then pass them in `MainPage`.
In this example, we use `demo-poll-dapp` for the app name and the mainnet SNT token contract for the token address.
Replace those with your own.
`TOKEN_ADDRESS` can be any ERC20 token that will be used to token gate people from voting and creating polls.
`index.tsx`
```tsx
const TOKEN_ADDRESS = "0x744d70FDBE2Ba4CF95131626614a1763DF805B9E";
const MULTICALL_ADDRESS = "0xeefba1e63905ef1d7acba5a8513c70307c1ce441";
export function MainPage() {
const { activate, deactivate, account, provider } =
useWeb3Connect(SUPPORTED_CHAIN_ID);
return (
<div>
<TopBar
logo={""}
logoWidth={84}
title={"Poll dApp"}
theme={orangeTheme}
activate={activateBrowserWallet}
account={account}
deactivate={deactivate}
/>
<Poll
theme={orangeTheme}
appName={"demo-poll-dapp"}
library={provider}
account={account}
tokenAddress={TOKEN_ADDRESS}
multicallAddress={MULTICALL_ADDRESS}
/>
</div>
);
}
```
{{< hint info >}}
If you are using ethers web3 connector it is recommended to only render `Poll` component if provider is not undefined.
{{< /hint >}}
You can now see the poll creation modal when clicking on the button:
![Create a poll modal](/assets/poll_sdk/create-a-poll-component.png)
![Confirmation modal](/assets/poll_sdk/poll-created.png)
{{< button relref="./01_create-a-poll_button" >}}Back{{< /button >}}
{{< button relref="./03_poll_list" >}}Next: Poll List Component{{< /button >}}

98
content/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list.md
View File

@ -1,98 +0,0 @@
---
title: Poll List Component
date: 2022-01-03T11:00:00+1100
weight: 15
---
# 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`:
```tsx
import React, { useMemo, useState } from "react";
import styled from "styled-components";
import { PollCreation, PollList } from "@waku/poll-sdk-react-components";
import { Web3Provider } from "@ethersproject/providers";
import { useWakuPolling } from "@waku/poll-sdk-react-hooks";
import { CreateButton } from "@waku/vote-poll-sdk-react-components";
import { Theme } from "@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes";
type PollProps = {
appName: string;
library: Web3Provider | undefined;
account: string | null | undefined;
theme: Theme;
tokenAddress: string;
multicallAddress: string;
};
export function Poll({
appName,
library,
account,
theme,
tokenAddress,
multicallAddress,
}: PollProps) {
const [showPollCreation, setShowPollCreation] = useState(false);
const wakuPolling = useWakuPolling(
appName,
tokenAddress,
library,
multicallAddress
);
const disabled = useMemo(() => !account, [account]);
return (
<Wrapper>
{showPollCreation && account && (
<PollCreation
wakuPolling={wakuPolling}
setShowPollCreation={setShowPollCreation}
theme={theme}
/>
)}
{
<CreateButton
style={{
backgroundColor: disabled ? "lightgrey" : theme.primaryColor,
}}
theme={theme}
disabled={disabled}
onClick={() => setShowPollCreation(true)}
>
Create a poll
</CreateButton>
}
<PollList wakuPolling={wakuPolling} account={account} theme={theme} />
</Wrapper>
);
}
```
Et voila!
The `PollList` component handles the display of polls:
![Poll List](/assets/poll_sdk/listed-polls.png)
And answering them:
![Poll list with answered](/assets/poll_sdk/listed-polls-with-answer.png)
You can find the resulting code in the [examples folder](https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/main/examples/mainnet-poll).
{{< hint info >}}
The example above uses webpack 5 instead of react-app-rewired.
It also allows passing a token contract address in the url, as described in the [README](https://github.com/status-im/wakuconnect-vote-poll-sdk/blob/main/examples/mainnet-poll/README.md).
{{< /hint >}}
The final gif:
![Poll demo](/assets/poll_sdk/wakuconnect-poll-demo.gif)
{{< button relref="./02_poll_creation" >}}Back{{< /button >}}

32
content/docs/guides/vote_poll_sdk/poll_sdk/_index.md
View File

@ -1,32 +0,0 @@
---
title: Poll SDK
date: 2022-01-03T11:00:00+1100
weight: 2
---
# 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.
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.com/status-im/wakuconnect-vote-poll-sdk/tree/main/examples/mainnet-poll.
Here is a preview of the end result:
![Poll demo](/assets/poll_sdk/wakuconnect-poll-demo.gif)
After following a dapp creation guide you should have a dapp that can connect to wallet ready. We will continue from this point.
Before starting first add poll packages:
```shell
yarn add \
@waku/poll-sdk-react-components @waku/poll-sdk-react-hooks @waku/vote-poll-sdk-react-components
```
{{< button relref="./01_create-a-poll_button" >}}Get Started{{< /button >}}

112
content/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract.md
View File

@ -1,112 +0,0 @@
---
title: Deploy smart contract
date: 2022-01-03T11:00:00+1100
weight: 1
---
# Deploy smart contract
## Creating new package
For this deployment we will create a new package.
```shell
mkdir contract-deployment
cd contract-deployment
yarn init
yarn add @waku/vote-sdk-contracts ethers ts-node typescript
```
Create a `tsconfig.json` with:
```json
{
"compilerOptions": {
"target": "es2020",
"module": "commonJS",
"esModuleInterop": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"noEmit": true
}
}
```
And now we can add a deploy script `index.ts`:
```js
import { ContractFactory, getDefaultProvider, Wallet } from "ethers";
import VotingContract from "@waku/vote-sdk-contracts/build/VotingContract.json";
import readline from "readline";
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
const prompt = (query: string) =>
new Promise((resolve) => rl.question(query, resolve));
try {
const privateKey = process.argv[2];
const providerName = process.argv[3];
const tokenAddress = process.argv[4];
const voteDuration = process.argv[5];
const provider = getDefaultProvider(providerName);
const wallet = new Wallet(privateKey, provider);
const contract = ContractFactory.fromSolidity(VotingContract, wallet);
new Promise(async () => {
console.log("\x1b[1m");
console.log(`You are about to deploy a voting smart contract\n`);
console.log(`Wallet address: \t${wallet.address}\n`);
console.log(`Provider name: \t\t${provider.network.name}\n`);
console.log(`Provider chainID: \t${provider.network.chainId}\n`);
console.log(`Token address to use: \t${tokenAddress}\n`);
console.log(`Vote duration: \t\t${voteDuration ?? 1000} seconds\n`);
console.log("Please verify that above parameters are correct");
console.log("WARNING: this operation WILL use ether");
const answer = await prompt(
"If you are sure that you want to continue write [yes]:"
);
if (answer === "yes" || answer === "Yes") {
const deployedContract = await contract.deploy(
tokenAddress,
voteDuration ?? 1000
);
console.log(`contract deployed with address ${deployedContract.address}`);
} else {
console.log("Aborted");
}
rl.close();
});
} catch {
console.log("Error creating smart contract");
rl.close();
}
```
## Running script
To run deploying script we call in shell:
```shell
yarn ts-node index.ts WALLET_PRIVATE_KEY PROVIDER_NAME TOKEN_ADDRESS VOTING_DURATION
```
you need to substitute parameters:
- WALLET_PRIVATE_KEY: private key of wallet that will deploy smart contract
- PROVIDER_NAME: a name of network for example `mainnet`, `ropsten` or an url to network
- TOKEN_ADDRESS: address of a token that is to be used by voting contract
- VOTING_DURATION: how long proposals will be open to accept votes
After that the information with input parameters will be displayed,
and you will be asked to verify them and accept them.
## Getting smart contract address
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.
{{< button relref="./" >}}Back{{< /button >}}
{{< button relref="./02_voting_creation" >}}Next: Create Voting component{{< /button >}}

106
content/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation.md
View File

@ -1,106 +0,0 @@
---
title: Creating Voting component
date: 2022-01-03T11:00:00+1100
weight: 2
---
# 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](/docs/guides/vote_poll_sdk/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:
```tsx
import { blueTheme } from "@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes";
import styled from "styled-components";
const THEME = blueTheme;
const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
max-width: 1000px;
margin: 0 auto;
padding: 150px 32px 50px;
width: 100%;
min-height: 100vh;
@media (max-width: 600px) {
padding: 132px 16px 32px;
}
@media (max-width: 425px) {
padding: 64px 16px 84px;
}
`;
```
## Adding react component
Now, create a `Voting` component that uses the components from the Vote SDK.
```tsx
import React, { useCallback, useState } from "react";
import {
NewVotingRoomModal,
VotingRoomList,
VotingRoomListHeader,
} from "@waku/vote-sdk-react-components";
import { WakuVoting } from "@waku/vote-poll-sdk-core";
import { useVotingRoomsId } from "@waku/vote-sdk-react-hooks";
import { useTokenBalance } from "@waku/vote-poll-sdk-react-components";
type VotingProps = {
wakuVoting: WakuVoting;
account: string | null | undefined;
activate: () => void;
};
export function Voting({ wakuVoting, account, activate }: VotingProps) {
const [showNewVoteModal, setShowNewVoteModal] = useState(false);
const onCreateClick = useCallback(() => {
setShowNewVoteModal(true);
}, []);
const votes = useVotingRoomsId(wakuVoting);
const tokenBalance = useTokenBalance(account, wakuVoting);
return (
<Wrapper>
<NewVotingRoomModal
theme={THEME}
availableAmount={tokenBalance}
setShowModal={setShowNewVoteModal}
showModal={showNewVoteModal}
wakuVoting={wakuVoting}
/>
<VotingRoomListHeader
account={account}
theme={THEME}
onConnectClick={activate}
onCreateClick={onCreateClick}
/>
<VotingRoomList
account={account}
theme={THEME}
wakuVoting={wakuVoting}
votes={votes}
availableAmount={tokenBalance}
/>
</Wrapper>
);
}
```
With that voting component is complete now we can use it in our `MainPage`
{{< button relref="./01_deploying_smart_contract" >}}Back{{< /button >}}
{{< button relref="./03_using_voting" >}}Next: Use Voting Component{{< /button >}}

145
content/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting.md
View File

@ -1,145 +0,0 @@
---
title: Use Voting Component
date: 2022-01-03T11:00:00+1100
weight: 3
---
# 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.
```tsx
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`:
```tsx
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.
Before rendering the component, check if `wakuVoting` has initialized:
```tsx
return (
<Wrapper>
<TopBar
logo={""}
logoWidth={84}
title={"WakuConnect Vote Demo"}
theme={blueTheme}
activate={activate}
account={account}
deactivate={deactivate}
/>
{wakuVoting && (
<Voting wakuVoting={wakuVoting} account={account} activate={activate} />
)}
</Wrapper>
);
```
## Resulting `index.tsx` File
Your `index.tsx` should now look like:
```tsx
import React from "react";
import styled from "styled-components";
import { GlobalStyle, TopBar } from "@waku/vote-poll-sdk-react-components";
import { blueTheme } from "@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes";
import ReactDOM from "react-dom";
import { useWeb3Connect } from "./hooks/useWeb3Connect";
import { Voting } from "./components/Voting";
import { useWakuVoting } from "@waku/vote-sdk-react-hooks";
const VOTING_ADDRESS = "0xCA4093D66280Ec1242b660088188b50fDC14dcC4";
const MULTICALL_ADDRESS = "0x53c43764255c17bd724f74c4ef150724ac50a3ed";
const DAPP_NAME = "test";
const SUPPORTED_CHAIN_ID = 3;
export function MainPage() {
const { activate, deactivate, account, provider } =
useWeb3Connect(SUPPORTED_CHAIN_ID);
const wakuVoting = useWakuVoting(
DAPP_NAME,
VOTING_ADDRESS,
provider,
MULTICALL_ADDRESS
);
return (
<Wrapper>
<TopBar
logo={""}
logoWidth={84}
title={"WakuConnect Vote Demo"}
theme={blueTheme}
activate={activate}
account={account}
deactivate={deactivate}
/>
{wakuVoting && (
<Voting wakuVoting={wakuVoting} account={account} activate={activate} />
)}
</Wrapper>
);
}
export function App() {
return (
<Wrapper>
<GlobalStyle />
<MainPage />
</Wrapper>
);
}
const Wrapper = styled.div`
height: 100%;
width: 100%;
`;
ReactDOM.render(
<div style={{ height: "100%" }}>
<App />
</div>,
document.getElementById("root")
);
```
After starting a page you should be able to see a main page that looks like this:
![Main Page](/assets/voting_sdk/Voting_Main_Page.png)
You can then create a proposal:
![Proposal creation](/assets/voting_sdk/proposal_creation.gif)
Here is a proposal card after votes have happened:
![Proposal Card](/assets/voting_sdk/proposal_card.png)
{{< button relref="./02_voting_creation" >}}Back{{< /button >}}

38
content/docs/guides/vote_poll_sdk/vote_sdk/_index.md
View File

@ -1,38 +0,0 @@
---
title: Vote SDK
date: 2022-01-06T11:00:00+1100
weight: 3
---
# 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](https://github.com/status-im/wakuconnect-vote-poll-sdk/tree/master/examples/ropsten-voting).
Here is a preview of the end result:
Create a proposal:
![Proposal creation](/assets/voting_sdk/proposal_creation.gif)
Proposal card:
![Proposal Card](/assets/voting_sdk/proposal_card.png)
After following the [create a dApp guide](../dapp_creation/) you should have a dapp that can connect to wallet ready.
We will continue from this point.
First, add the Vote SDK packages:
```shell
yarn add \
@waku/vote-sdk-react-components @waku/vote-sdk-react-hooks @waku/vote-poll-sdk-react-components
```
{{< button relref="./01_deploying_smart_contract" >}}Get Started{{< /button >}}

14
content/docs/introduction.md
View File

@ -15,10 +15,9 @@ Until the doc is updated, the best way to learn how to use js-waku is to check o
Learn more about the refactoring [here](https://github.com/waku-org/js-waku/issues/802).
{{< /hint >}}
Waku Connect is a suite of libraries, SDKs and documentations to help you use Waku in your dApp.
Waku is a family of protocols designed to provide censorship-resistant, privacy preserving, surveillance prone and portable communication.
Waku is a decentralized, censorship-resistant, network and protocol family.
It enables you to add communication features to your dApp in a decentralized manner,
The Waku software suite enables you to add communication features to your dApp in a decentralized manner,
ensuring to your users that they will not be censored or de-platformed.
Waku can be used for chat purposes and for many machine-to-machine use cases.
@ -37,11 +36,11 @@ If you are looking for inspiration, check out the [use cases](/docs/use_cases) W
The [guides](/docs/guides) explain specific js-waku features
and how it can be used with popular web frameworks.
The js-waku repository also holds a number of [examples](https://github.com/status-im/js-waku/tree/main/examples).
The examples are working Proof-of-Concepts that demonstrate how to use js-waku.
The [js-waku-examples](https://github.com/waku-org/js-waku-examples) repository also holds a number of examples.
They are working Proof-of-Concepts that demonstrate how to use js-waku.
Check out the [example list](/docs/examples/) to see what usage each example demonstrates.
You can also try out some of the examples at the following locations:
The examples are also deployed:
- [web-chat](https://examples.waku.org/web-chat): A simple public chat ([docs](/docs/examples/#web-chat-app)).
- [eth-pm](https://examples.waku.org/eth-pm): End-to-end encrypted private messages
@ -50,6 +49,7 @@ You can also try out some of the examples at the following locations:
an economic spam protection protocol that rate limit using zero-knowledge for privacy preserving purposes.
If you want to play with examples, please, use one of the following commands to easily bootstrap an example:
- `yarn create @waku/app <project-dir>`
- `npx @waku/create-app <project-dir>`
@ -60,4 +60,4 @@ Finally, if you want to learn how Waku works under the hoods, check the specs at
If you encounter any bug or would like to propose new features, feel free to [open an issue](https://github.com/waku-org/js-waku/issues/new/).
For general discussion, get help or latest news,
join **#js-waku** on [Vac Discord](https://discord.gg/j5pGbn7MHZ) or the [Waku Telegram Group](https://t.me/waku_org).
join **#js-waku** on [Vac Discord](https://discord.gg/Nrac59MfSX) or the [Waku Telegram Group](https://t.me/waku_org).