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

Format with prettier (#34)

This commit is contained in:
Franck R 2022-02-11 22:11:16 +11:00 committed by GitHub
parent 5eb747ec7c
commit da15b6b74d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 515 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
.github/workflows/ci.yml vendored Normal file
View File

@ -0,0 +1,26 @@
name: CI
on:
push:
branches:
- 'develop'
- 'master'
pull_request:
jobs:
yarn_test:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2.3.3
- name: Install NodeJS
uses: actions/setup-node@v2
with:
node-version: 16
- name: Yarn install
run: yarn install --frozen-lockfile
- name: test
run: yarn test

1
.gitignore vendored
View File

@ -3,3 +3,4 @@ public
resources
node_modules
/.hugo_build.lock
/yarn-error.log

1
content.es/docs/introduccion.md
View File

@ -2,6 +2,7 @@
title: Introducción
weight: 1
---
# Introducción
TODO

1
content.pt/docs/introduccion.md
View File

@ -2,6 +2,7 @@
title: Introdução
weight: 1
---
# Introdução
TODO

2
content/docs/examples.md
View File

@ -57,7 +57,7 @@ Demonstrates:
## Ethereum Private Message Web App
Repo: [eth-pm](https://github.com/status-im/js-waku/tree/main/examples/eth-pm).
Live: https://js-waku.wakuconnect.dev/examples/eth-pm/
Live: https://js-waku.wakuconnect.dev/examples/eth-pm/
Demonstrates:

14
content/docs/guides/02_relay_receive_send_messages.md
View File

@ -36,15 +36,15 @@ Passing the `bootstrap` option will connect your node to predefined Waku nodes.
If you want to bootstrap to your own nodes, you can pass an array of multiaddresses instead:
```js
import {Waku} from "js-waku";
import { Waku } from "js-waku";
const waku = await Waku.create({
bootstrap: {
peers: [
"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm",
"/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ",
]
},
bootstrap: {
peers: [
"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm",
"/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ",
],
},
});
```

14
content/docs/guides/03_store_retrieve_messages.md
View File

@ -50,15 +50,15 @@ Passing the `bootstrap` option will connect your node to predefined Waku nodes.
If you want to bootstrap to your own nodes, you can pass an array of multiaddresses instead:
```js
import {Waku} from "js-waku";
import { Waku } from "js-waku";
const wakuNode = await Waku.create({
bootstrap: {
peers: [
"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm",
"/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ",
]
},
bootstrap: {
peers: [
"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm",
"/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ",
],
},
});
```

14
content/docs/guides/06_light_push_send_messages.md
View File

@ -50,15 +50,15 @@ Passing the `bootstrap` option will connect your node to predefined Waku nodes.
If you want to bootstrap to your own nodes, you can pass an array of multiaddresses instead:
```js
import {Waku} from "js-waku";
import { Waku } from "js-waku";
const waku = await Waku.create({
bootstrap: {
peers: [
"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm",
"/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ",
]
},
bootstrap: {
peers: [
"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm",
"/dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ",
],
},
});
```

5
content/docs/guides/09_debug.md
View File

@ -39,9 +39,8 @@ Here are guides for some modern browsers:
- [Firefox](https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector/Local_Storage_Session_Storage)
- [Chrome](https://developer.chrome.com/docs/devtools/storage/localstorage/)
| key | value | effect |
|---------|-----------------|--------------------------------------|
| `debug` | `waku*` | enable js-waku debug logs |
| ------- | --------------- | ------------------------------------ |
| `debug` | `waku*` | enable js-waku debug logs |
| `debug` | `waku*,libp2p*` | enable js-waku and libp2p debug logs |
| `debug` | `*` | enable **all** debug logs |

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

@ -43,25 +43,24 @@ The component uses `ethers` to connect to the user's wallet:
`MULTICALL_ADDRESS` is an address to mutical 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`
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
const MULTICALL_ADDRESS = "0xeefba1e63905ef1d7acba5a8513c70307c1ce441";
const SUPPORTED_CHAIN_ID = 1;
export function MainPage() {
const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID)
const { activate, deactivate, account, provider } =
useWeb3Connect(SUPPORTED_CHAIN_ID);
return (
<Wrapper>
<TopBar
logo={pollingIcon}
logoWidth={84}
title={'WakuConnect Poll Demo'}
title={"WakuConnect Poll Demo"}
theme={orangeTheme}
activate={activate}
account={account}
@ -69,7 +68,7 @@ export function MainPage() {
/>
//Place for poll or vote component
</Wrapper>
)
);
}
```
@ -81,12 +80,12 @@ export function MainPage() {
Create a `Wrapper` variable to use in the page component:
```tsx
import styled from 'styled-components'
import styled from "styled-components";
const Wrapper = styled.div`
height: 100%;
width: 100%;
`
`;
```
### Render
@ -98,38 +97,39 @@ export function App() {
return (
<Wrapper>
<GlobalStyle />
<MainPage/>
<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'
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
const MULTICALL_ADDRESS = "0xeefba1e63905ef1d7acba5a8513c70307c1ce441";
const SUPPORTED_CHAIN_ID = 1;
export function MainPage({ tokenAddress }: { tokenAddress: string }) {
const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID)
const { activate, deactivate, account, provider } =
useWeb3Connect(SUPPORTED_CHAIN_ID);
return (
<Wrapper>
<TopBar
logo={pollingIcon}
logoWidth={84}
title={'WakuConnect Poll Demo'}
title={"WakuConnect Poll Demo"}
theme={orangeTheme}
activate={activate}
account={account}
@ -137,36 +137,36 @@ export function MainPage({ tokenAddress }: { tokenAddress: string }) {
/>
//Place for poll or vote component
</Wrapper>
)
);
}
export function App() {
const location = useLocation()
const tokenAddress = new URLSearchParams(location.search).get('token')
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%' }}>
<div style={{ height: "100%" }}>
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
</Switch>
</BrowserRouter>
</div>,
document.getElementById('root')
)
document.getElementById("root")
);
```
{{< button relref="./01_create_dapp" >}}Back{{< /button >}}

150
content/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_useDapp.md
View File

@ -75,22 +75,22 @@ export function PollPage() {
Create a `config` variable that contains the Ethereum network parameters:
```tsx
import {ChainId, DAppProvider, useEthers} from '@usedapp/core';
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,
},
}
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).
@ -115,82 +115,82 @@ Finally, create the `App` component:
```tsx
function App() {
return (
<Wrapper>
<GlobalStyle/>
<DAppProvider config={config}>
<PollPage/>
</DAppProvider>
</Wrapper>
)
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'
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,
},
}
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)
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])
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>
)
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>
)
return (
<Wrapper>
<GlobalStyle />
<DAppProvider config={config}>
<PollPage />
</DAppProvider>
</Wrapper>
);
}
const Wrapper = styled.div`

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

@ -58,31 +58,36 @@ Upon clicking the button, we set `showPollCreation` to true.
`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'
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
}
account: string | null | undefined;
theme: Theme;
};
export function Poll({account, theme}: PollProps) {
const [showPollCreation, setShowPollCreation] = useState(false)
const disabled = useMemo(() => !account, [account])
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>
)
return (
<Wrapper>
{
<CreateButton
style={{
backgroundColor: disabled ? "lightgrey" : theme.primaryColor,
}}
theme={theme}
disabled={disabled}
onClick={() => setShowPollCreation(true)}
>
Create a poll
</CreateButton>
}
</Wrapper>
);
}
```
@ -92,22 +97,23 @@ Now update the `MainPage` component to render the new `Poll` component:
```tsx
export function MainPage() {
const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID)
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>
)
return (
<div>
<TopBar
logo={""}
logoWidth={84}
title={"Poll dApp"}
theme={orangeTheme}
activate={activateBrowserWallet}
account={account}
deactivate={deactivate}
/>
<Poll theme={orangeTheme} signer={signer} />
</div>
);
}
```

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

@ -24,42 +24,63 @@ 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'
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
}
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])
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>
)
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>
);
}
```
@ -73,32 +94,33 @@ Replace those with your own.
`index.tsx`
```tsx
const TOKEN_ADDRESS = '0x744d70FDBE2Ba4CF95131626614a1763DF805B9E'
const MULTICALL_ADDRESS = '0xeefba1e63905ef1d7acba5a8513c70307c1ce441'
const TOKEN_ADDRESS = "0x744d70FDBE2Ba4CF95131626614a1763DF805B9E";
const MULTICALL_ADDRESS = "0xeefba1e63905ef1d7acba5a8513c70307c1ce441";
export function MainPage() {
const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID)
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>
)
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>
);
}
```

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

@ -12,37 +12,56 @@ 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'
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
}
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])
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} />
<PollCreation
wakuPolling={wakuPolling}
setShowPollCreation={setShowPollCreation}
theme={theme}
/>
)}
{
<CreateButton
style={{ backgroundColor: disabled ? 'lightgrey' : theme.primaryColor }}
style={{
backgroundColor: disabled ? "lightgrey" : theme.primaryColor,
}}
theme={theme}
disabled={disabled}
onClick={() => setShowPollCreation(true)}
@ -52,7 +71,7 @@ export function Poll({ appName, library, account, theme, tokenAddress, multicall
}
<PollList wakuPolling={wakuPolling} account={account} theme={theme} />
</Wrapper>
)
);
}
```
@ -69,12 +88,11 @@ You can find the resulting code in the [examples folder](https://github.com/stat
{{< 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).
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 >}}

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

@ -35,44 +35,53 @@ Create a `tsconfig.json` with:
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';
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));
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)
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()
})
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()
console.log("Error creating smart contract");
rl.close();
}
```

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

@ -18,8 +18,8 @@ Let's start by creating a new folder `components` with file named `Voting.tsx` i
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'
import { blueTheme } from "@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes";
import styled from "styled-components";
const THEME = blueTheme;
@ -40,7 +40,7 @@ const Wrapper = styled.div`
@media (max-width: 425px) {
padding: 64px 16px 84px;
}
`
`;
```
## Adding react component
@ -48,51 +48,55 @@ const Wrapper = styled.div`
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'
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
}
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)
}, [])
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)
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>
)
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>
);
}
```
@ -100,4 +104,3 @@ 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 >}}

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

@ -15,9 +15,9 @@ Configure the dApp by setting:
- Your dApp name.
```tsx
const VOTING_ADDRESS = 'VOTING_ADDRESS'
const MULTICALL_ADDRESS = 'MULTICALL_ADDRESS'
const DAPP_NAME = 'YOUR_DAPP_NAME'
const VOTING_ADDRESS = "VOTING_ADDRESS";
const MULTICALL_ADDRESS = "MULTICALL_ADDRESS";
const DAPP_NAME = "YOUR_DAPP_NAME";
```
## Use Waku Voting
@ -26,44 +26,42 @@ Now, we need a Waku voting object.
For that, call `useWakuVoting`:
```tsx
import {useWakuVoting} from '@waku/vote-sdk-react-hooks'
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
)
const { activate, deactivate, account, provider } =
useWeb3Connect(SUPPORTED_CHAIN_ID);
const wakuVoting = useWakuVoting(
DAPP_NAME,
VOTING_ADDRESS,
provider,
MULTICALL_ADDRESS
);
}
```
## Display Voting Component
## 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>
)
<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
@ -71,76 +69,73 @@ return (
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'
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
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
)
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>
)
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>
)
return (
<Wrapper>
<GlobalStyle />
<MainPage />
</Wrapper>
);
}
const Wrapper = styled.div`
height: 100%;
width: 100%;
`
`;
ReactDOM.render(
<div style={{height: '100%'}}>
<App/>
</div>,
document.getElementById('root')
)
<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)

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

@ -32,7 +32,7 @@ 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
@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 >}}

3
content/docs/introduction.md
View File

@ -37,8 +37,7 @@ You can also try out some of the examples at the following locations:
- [eth-pm](https://js-waku.wakuconnect.dev/examples/eth-pm): End-to-end encrypted private messages
([docs](/docs/examples/#ethereum-private-message-web-app)).
- [eth-pm-wallet-encryption](https://js-waku.wakuconnect.dev/examples/eth-pm-wallet-encryption): Eth-pm using Web3 wallet encryption API
- ([dosc](/docs/examples/#ethereum-private-message-using-web3-wallet-encryption-api-web-app)).
([docs](/docs/examples/#ethereum-private-message-using-web3-wallet-encryption-api-web-app)).
Finally, if you want to learn how Waku works under the hoods, check the specs at [rfc.vac.dev](https://rfc.vac.dev/).

17
package.json Normal file
View File

@ -0,0 +1,17 @@
{
"name": "docs.wakuconnect.dev",
"version": "1.0.0",
"main": "\"\"",
"repository": "git@github.com:vacp2p/docs.wakuconnect.dev.git",
"author": "Franck Royer <franck@status.im>",
"license": "MIT",
"private": true,
"scripts": {
"fix": "prettier \"content*/**/*.md\" \"./*.json\" --write",
"test": "prettier \"content*/**/*.md\" \"./*.json\" --list-different",
"serve": "hugo server"
},
"dependencies": {
"prettier": "^2.5.1"
}
}

8
yarn.lock Normal file
View File

@ -0,0 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
prettier@^2.5.1:
version "2.5.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==