Useselection - Developer Hub

The useSelection is used for maintain updated odds for a selection and also monitors the suspension of bets for that selection.

Whenever a bet is placed on the Azuro protocol, the system updates the odds related to the outcomes influenced by this bet. Utilize this hook to subscribe to the updated odds for the outcomes displayed in your UI. This ensures that bettors can observe the current changes and make informed betting decisions.

Conditions have a status that indicates their current state. For instance, ConditionStatus.Created signifies the condition is available for betting, while ConditionStatus.Paused indicates it has temporarily stopped accepting bets. This hook monitors this state and returns an isLocked flag, indicating whether placing a bet on this outcome is currently possible or not.

Usage

⚠️

Before utilizing useSelection, it is essential to initialize event watchers and the SocketProvider:

  import { ChainProvider, SocketProvider, useWatchers } from '@azuro-org/sdk'
 
  export function Watchers() {
    useWatchers()
 
    return null
  }
 
  function Providers(props: { children: React.ReactNode }) {
    const { children } = props
 
    return (
      <ChainProvider>
        <SocketProvider>
          {children}
        </SocketProvider>
        <Watchers />
      </ChainProvider>
    )
  }

Subscribe to changes in your outcome.

import { type MarketOutcome, useSelection } from '@azuro-org/sdk'
 
const outcome: MarketOutcome = {...}
 
const { odds, isLocked, isOddsFetching, isStatusFetching } = useSelection({
  selection: outcome,
  initialOdds: outcome.odds,
  initialStatus: outcome.status,
})

ℹ️

Example of usage: Outcome button.

We've retrieved markets with outcomes and rendered a button for each outcome. The useSelection hook offers a method to maintain updated odds for the outcome button and react to changes in the condition status. Full Example (opens in a new tab)

import { type MarketOutcome, useSelection } from '@azuro-org/sdk'
 
type OutcomeProps = {
  outcome: MarketOutcome
}
 
export function OutcomeButton(props: OutcomeProps) {
  const { outcome } = props
 
  const { odds, isLocked } = useSelection({
    selection: outcome,
    initialOdds: outcome.odds,
    initialStatus: outcome.status,
  })
 
  return (
    <button
      disabled={isLocked} // disable outcome button if isLocked is true
    >
      <span>{outcome.selectionName}</span>
      <span>{odds}</span>
    </button>
  )
}

Props

{
  selection: Selection
  initialOdds?: string
  initialStatus?: ConditionStatus
}

ℹ️

The initialOdds and initialStatus fields are both optional. If either is not provided, the useSelection hook will automatically retrieve the initial values. The boolean flags isOddsFetching and isStatusFetching indicate whether the initial values are being fetched.

type Selection = {
  conditionId: string
  outcomeId: string
  coreAddress: string
}
 
enum ConditionStatus {
  Canceled = 'Canceled',
  Created = 'Created',
  Paused = 'Paused',
  Resolved = 'Resolved'
}

useSelectionOdds Return Value

{
  odds: number, // outcome's odds
  isLocked: boolean, // flag indicates whether placing a bet on this outcome is currently possible or not
  isOddsFetching, // flag indicates initial odds fetching
  isStatusFetching // flag indicates initial status fetching
}

useRedeemBet useOdds