107 lines
3.6 KiB
Markdown
107 lines
3.6 KiB
Markdown
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
|
|
}
|
|
``` |