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

Package containing react hooks and components helpers

## hooks

- `useTokenBalance(address: string | null | undefined, wakuVoting: WakuMessaging)` returns memoized token (token address is dervied from waku messaging object)balance of given address

- `useMobileVersion(sizeThreshold: number)` returns true if web browser width is below threshold

- `useRefMobileVersion(myRef: React.RefObject<HTMLHeadingElement>, sizeThreshold: number)` returns true if ref element width is below threshold

## theme 

Some of package components require theme object, package provides 2 themes

```
export type Theme = {
  primaryColor: string
  secondaryColor: string
  activeTextColor: string
  activeBackgroundColor: string
  backgroundColor: string
}

export const orangeTheme: Theme = {
  primaryColor: '#ffb571',
  secondaryColor: '#a53607',
  activeTextColor: '#ffffff',
  activeBackgroundColor: '#f4b77e',
  backgroundColor: '#fbfcfe',
}

export const blueTheme: Theme = {
  primaryColor: '#5d7be2',
  secondaryColor: '#0f3595',
  activeTextColor: '#7e98f4',
  activeBackgroundColor: '#7e98f4',
  backgroundColor: '#f8faff',
}
```

## components

- `Modal` 

Component that overlays over other components

```
type ModalProps = {
  heading: string   // text that shows on top of modal
  children: ReactNode // children to show in modal
  theme: Theme // theme of modal
  setShowModal: (val: boolean) => void // function that changes modal visibility
}
```

- `Input`

Input with a label

```
type InputProps = {
  label: string
  value: string
  onChange: (e: any) => void
  placeholder?: string
}
```

- `TopBar`

stylized topBar component with web3 connect button

```
type TopBarProps = {
  logo: string // logo icon
  title: string
  theme: Theme
  activate: () => void // function that connects web3 provider used if account is undefined
  deactivate: () => void // function that disconnects web3 provider used when account is defined
  account: string | undefined | null // user address
}
```

- `RadioGroup` 

Component that shows a list of radio buttons and only one possible select

```
type RadioGroupProps = {
  options: string[] // list of buttons labels
  setSelectedOption: (option: number) => void // state update function 
  selectedOption: number | undefined // state which holds selectedOption number
}
```

## buttons

Package also contains styled buttons
```Button, SmallButton, ConnectButton, CreateButton, ButtonDisconnect, Account```

## icons

Package contains following icons 

```checkCircleIcon, addIcon, checkIcon, closeIcon, dappIcon, metamaskIcon, statusIcon```

## functions

- `colorRouletteGenerator()`

generator which next function returns color from a roulette

### example usage

```
const colors = colorRouletteGenerator()
const color1 = colors.next().value
const color2 = colors.next().value
const color3 = colors.next().value
```