@waku/vote-sdk-react-components

Package that contains react components for usage with WakuVoting

-VotingRoomListEmpty component showing that a list is empty with button. When user is connected button calls onCreateClick otherwise call onConnectClick.

type VotingRoomListEmptyProps = { theme: Theme account: string | null | undefined onCreateClick: () => void // callback when user is connected onConnectClick: () => void // callback when user is not connected }

-VoteModal modal that lets people vote in given voting room.

export interface VoteModalProps { setShowModal: (val: boolean) => void // function that sets showModal showModal: boolean // when true shows modal votingRoom: VotingRoom availableAmount: number // amount of tokens user holds selectedVote: number // selected vote 0:against 1:for wakuVoting: WakuVoting theme: Theme className?: string // defined to show mobile and tablet versions can be 'mobile' or 'tablet }

-VotingRoomList shows a list with all voting rooms on blockchain

type VotingRoomListProps = {
  theme: Theme
  wakuVoting: WakuVoting
  votes: number[] // array of ids of voting rooms to show
  availableAmount: number // available token amount of user
  account: string | null | undefined // address of user account
  mobileOnClick?: (votingRoom: VotingRoom) => void // callback when user clicks voting room card when list is in mobile mode
}

-VotingRoomCard a card used to show voting room

interface VotingRoomCardProps {
  votingRoomId: number // id of voting room to show
  theme: Theme
  availableAmount: number // token balance of current user
  wakuVoting: WakuVoting
  account: string | null | undefined // address of current user
  mobileOnClick?: (votingRoom: VotingRoom) => void // callback when user clicks on card in mobile mode
  CustomVoteModal?: (props: VoteModalProps) => ReactElement // custom react component to show when user clicks on vote for or against
  customAgainstClick?: () => void // custom callback for clicking Against button
  customForClick?: () => void // custom callback for clicking For button
}

export interface VoteModalProps {
  setShowModal: (val: boolean) => void // function setting state
  showModal: boolean // state defining whether to show modal
  votingRoom: VotingRoom
  availableAmount: number 
  selectedVote: number
  wakuVoting: WakuVoting
  theme: Theme
  className?: string // class name that defines mobile or tablet version
}

-VotingRoomListHeader a list header with button. When user is connected button calls onCreateClick otherwise call onConnectClick.

type VotingRoomListHeaderProps = {
  theme: Theme
  account: string | null | undefined // address of user account
  onCreateClick: () => void // callback when user is connected
  onConnectClick: () => void // callback when user is not connected
}

-NewVotingRoomModal modal that lets people create new voting room.

type NewVotingRoomModalProps = {
  theme: Theme
  showModal: boolean // state defining whether to show modal
  setShowModal: (val: boolean) => void // function that updates showModal state
  availableAmount: number // token balance of user
  wakuVoting: WakuVoting
}

-NewVotingRoomMobile component for smaller width screen that allows to create new voting room

interface NewVotingRoomMobileProps {
  availableAmount: number // token balance of user
  wakuVoting: WakuVoting
}

-VotingRoomMobile voting room information for smaller width with ability to vote on given voting room

interface VotingRoomMobileProps {
  wakuVoting: WakuVoting
  availableAmount: number // token balance of user
  account: string | null | undefined // address of user account
}