+
,
- document.getElementById('root')
-)
+ document.getElementById("root")
+);
```
{{< button relref="./01_create_dapp" >}}Back{{< /button >}}
diff --git a/content/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_useDapp.md b/content/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_useDapp.md
index a016ad5..9ffe59c 100644
--- a/content/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_useDapp.md
+++ b/content/docs/guides/vote_poll_sdk/dapp_creation/03_connect_walle_useDapp.md
@@ -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 (
-
-
-
-
-
-
- )
+ return (
+
+
+
+
+
+
+ );
}
```
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)
+ const { account, library, activateBrowserWallet, deactivate } = useEthers();
+ const [signer, setSigner] = useState(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 (
-
-
- //Place for poll or vote component
-
- )
+ return (
+
+
+ //Place for poll or vote component
+
+ );
}
function App() {
- return (
-
-
-
-
-
-
- )
+ return (
+
+
+
+
+
+
+ );
}
const Wrapper = styled.div`
diff --git a/content/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button.md b/content/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button.md
index 644f0ba..295da50 100644
--- a/content/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button.md
+++ b/content/docs/guides/vote_poll_sdk/poll_sdk/01_create-a-poll_button.md
@@ -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 (
-
- {
- setShowPollCreation(true)}>
- Create a poll
-
- }
-
- )
+ return (
+
+ {
+ setShowPollCreation(true)}
+ >
+ Create a poll
+
+ }
+
+ );
}
```
@@ -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 (
-
- )
+ return (
+
+ );
}
```
diff --git a/content/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation.md b/content/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation.md
index 3531a33..6f3fb77 100644
--- a/content/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation.md
+++ b/content/docs/guides/vote_poll_sdk/poll_sdk/02_poll_creation.md
@@ -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 (
-
- {showPollCreation && signer && (
-
- )}
- {
- setShowPollCreation(true)}>
- Create a poll
-
- }
-
- )
+ return (
+
+ {showPollCreation && signer && (
+
+ )}
+ {
+ setShowPollCreation(true)}
+ >
+ Create a poll
+
+ }
+
+ );
}
```
@@ -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 (
-
- )
+ return (
+
+ );
}
```
diff --git a/content/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list.md b/content/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list.md
index b853877..4099e88 100644
--- a/content/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list.md
+++ b/content/docs/guides/vote_poll_sdk/poll_sdk/03_poll_list.md
@@ -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 (
{showPollCreation && account && (
-
+
)}
{
setShowPollCreation(true)}
@@ -52,7 +71,7 @@ export function Poll({ appName, library, account, theme, tokenAddress, multicall
}
- )
+ );
}
```
@@ -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:
-
{{< button relref="./02_poll_creation" >}}Back{{< /button >}}
diff --git a/content/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract.md b/content/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract.md
index f2f6978..da7f70e 100644
--- a/content/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract.md
+++ b/content/docs/guides/vote_poll_sdk/vote_sdk/01_deploying_smart_contract.md
@@ -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();
}
```
diff --git a/content/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation.md b/content/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation.md
index 078d1cf..42c2b7d 100644
--- a/content/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation.md
+++ b/content/docs/guides/vote_poll_sdk/vote_sdk/02_voting_creation.md
@@ -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 (
-
-
-
-
-
- )
+ return (
+
+
+
+
+
+ );
}
```
@@ -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 >}}
-
diff --git a/content/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting.md b/content/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting.md
index 80f7e9a..c7280b1 100644
--- a/content/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting.md
+++ b/content/docs/guides/vote_poll_sdk/vote_sdk/03_using_voting.md
@@ -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 (
-
-
- {wakuVoting &&
- }
-
-)
+
+
+ {wakuVoting && (
+
+ )}
+
+);
```
## 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 (
-
-
- {wakuVoting &&
- }
-
- )
+ return (
+
+
+ {wakuVoting && (
+
+ )}
+
+ );
}
export function App() {
- return (
-
-
-
-
- )
+ return (
+
+
+
+
+ );
}
const Wrapper = styled.div`
height: 100%;
width: 100%;
-`
+`;
ReactDOM.render(
- ,
- document.getElementById('root')
-)
+ ,
+ document.getElementById("root")
+);
```
After starting a page you should be able to see a main page that looks like this:
-
You can then create a proposal:
diff --git a/content/docs/guides/vote_poll_sdk/vote_sdk/_index.md b/content/docs/guides/vote_poll_sdk/vote_sdk/_index.md
index 1c0f4e5..3868a69 100644
--- a/content/docs/guides/vote_poll_sdk/vote_sdk/_index.md
+++ b/content/docs/guides/vote_poll_sdk/vote_sdk/_index.md
@@ -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 >}}
diff --git a/content/docs/introduction.md b/content/docs/introduction.md
index 905f49a..b695a19 100644
--- a/content/docs/introduction.md
+++ b/content/docs/introduction.md
@@ -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/).
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ef3a4c5
--- /dev/null
+++ b/package.json
@@ -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 ",
+ "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"
+ }
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..f5d535f
--- /dev/null
+++ b/yarn.lock
@@ -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==