Poll List Component #
To display existing polls, the PollList
component is provided.
Simply add it to the Poll
function to render it.
It needs the account
variable that can be passed as a property to Poll
:
components/Poll.tsx
:
import 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:
And answering them:
You can find the resulting code in the examples folder.
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.
The final gif: