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.

mkdir components
touch components/Poll.tsx

Styled-components #

Again, create a Wrapper for styling:

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:

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:

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:

Back Next: Poll Creation Component