dappconnect-voting-sdk/packages/vote-react-components/README.md

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
}
```