Use Voting Component #

Define Configuration #

Configure the dApp by setting:

Address of the multicall smart contract of the target chain,
Address of the voting smart contract,
Your dApp name.

const VOTING_ADDRESS = "VOTING_ADDRESS";
const MULTICALL_ADDRESS = "MULTICALL_ADDRESS";
const DAPP_NAME = "YOUR_DAPP_NAME";

Use Waku Voting #

Now, we need a Waku voting object. For that, call useWakuVoting:

import { useWakuVoting } from "@waku/vote-sdk-react-hooks";

export function MainPage() {
  const { activate, deactivate, account, provider } =
    useWeb3Connect(SUPPORTED_CHAIN_ID);
  const wakuVoting = useWakuVoting(
    DAPP_NAME,
    VOTING_ADDRESS,
    provider,
    MULTICALL_ADDRESS
  );
}

Display Voting Component #

Modify the MainPage to render a Voting component. Before rendering the component, check if wakuVoting has initialized:

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:

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:

You can then create a proposal: Proposal creation

Here is a proposal card after votes have happened:

Back

Use Voting Component #

Define Configuration #

Use Waku Voting #

Display Voting Component #

Resulting index.tsx File #

Resulting `index.tsx` File #