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


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
}