useConditionState
The useConditionState
hook is used for maintain updated state for a condition.
Conditions have a state
field that indicates their current state. For instance, ConditionState.Created
signifies the condition is available for betting, while ConditionState.Stopped
indicates it has temporarily stopped accepting bets. This hook monitors this state and returns an isLocked
flag, indicating whether placing a bet on this condition is currently possible or not.
Usage
Before utilizing useConditionState
, it is essential to initialize the FeedSocketProvider
and ConditionUpdatesProvider
:
import { ChainProvider, FeedSocketProvider, ConditionUpdatesProvider, useWatchers } from '@azuro-org/sdk'
function Providers(props: { children: React.ReactNode }) {
const { children } = props
return (
<ChainProvider>
<FeedSocketProvider>
<ConditionUpdatesProvider>
{children}
</ConditionUpdatesProvider>
</FeedSocketProvider>
</ChainProvider>
)
}
Example of usage: Condition wrapper around Outcome buttons.
We've retrieved markets with outcomes and rendered a button for each outcome and need to make sure that condition in a state to accept bets. The useConditionState
hook offers a method to react to changes in the condition state. Full Example (opens in a new tab)
import { useConditionState } from '@azuro-org/sdk'
import { type Market } from '@azuro-org/toolkit'
type ConditionProps = {
condition: Market['conditions'][0]
}
const Condition: React.FC<ConditionProps> = (props) => {
const { condition } = props
const { conditionId, outcomes, state: initialState } = condition
const { data: state, isLocked } = useConditionState({
conditionId,
initialState,
})
return (
<div className="flex justify-between">
<div className="flex gap-2 w-full">
{
outcomes.map((outcome) => {
return (
<OutcomeButton
key={outcome.outcomeId}
outcome={outcome}
isLocked={isLocked}
/>
)
})
}
</div>
</div>
)
}
Props
{
conditionId: string
initialState?: ConditionState
}
The initialState
is optional. If it's not provided, the useConditionState
hook will automatically retrieve the initial value.
enum ConditionState {
Active = 'Active',
Canceled = 'Canceled',
Removed = 'Removed',
Resolved = 'Resolved',
Stopped = 'Stopped'
}
Return Value
{
data: ConditionState
isFetching // flag indicates initial state fetching
}