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

107 lines
3.6 KiB
Markdown
Raw Normal View History

2021-09-23 22:08:32 +00:00
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`.
2021-09-23 22:08:32 +00:00
type VotingRoomListEmptyProps = {
2021-09-23 22:08:32 +00:00
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
2021-09-23 22:08:32 +00:00
```
type VotingRoomListProps = {
2021-09-23 22:08:32 +00:00
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
2021-09-23 22:08:32 +00:00
}
```
-`VotingRoomCard` a card used to show voting room
2021-09-23 22:08:32 +00:00
```
interface VotingRoomCardProps {
2021-09-23 22:08:32 +00:00
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`.
2021-09-23 22:08:32 +00:00
```
type VotingRoomListHeaderProps = {
2021-09-23 22:08:32 +00:00
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.
2021-09-23 22:08:32 +00:00
```
type NewVotingRoomModalProps = {
2021-09-23 22:08:32 +00:00
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
2021-09-23 22:08:32 +00:00
```
interface NewVotingRoomMobileProps {
2021-09-23 22:08:32 +00:00
availableAmount: number // token balance of user
wakuVoting: WakuVoting
}
```
-`VotingRoomMobile` voting room information for smaller width with ability to vote on given voting room
2021-09-23 22:08:32 +00:00
```
interface VotingRoomMobileProps {
2021-09-23 22:08:32 +00:00
wakuVoting: WakuVoting
availableAmount: number // token balance of user
account: string | null | undefined // address of user account
}
```