Switch Network and Change Mode

The SDK offers functionality to switch between different networks and transition between pre-match and live modes.

Let's add a component dedicated to network switching. Create component src/components/SelectAppChain.tsx:

src/components/SelectAppChain.tsx

'use client'
 
import { useChain, type ChainId } from '@azuro-org/sdk'
import { useChains } from 'wagmi'
 
 
export function SelectAppChain() {
  const { appChain, setAppChainId } = useChain()
  const chains = useChains()
 
  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setAppChainId(+event.target.value as ChainId)
  }
 
  return (
    <select className='mr-4 cursor-pointer' value={appChain.id} onChange={handleChange}>
      {
        chains.map((chain) => (
          <option key={chain.id} value={chain.id}>{chain.name}</option>
        ))
      }
    </select>
  )
}

⚠️

Don't forget to add export to src/components/index.ts.

The next step is to create a component for switching between application modes. Create component src/components/LiveSwitcher.tsx:

src/components/LiveSwitcher.tsx

'use client'
 
import type { ChangeEvent } from 'react'
import { useLive } from '@azuro-org/sdk'
 
 
export function LiveSwitcher() {
  const { isLive, changeLive } = useLive()
 
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    changeLive(event.target.checked)
  }
 
  return (
    <div className="flex items-center mr-4">
      <label className="mr-2" htmlFor="live">Live</label>
      <input id="live" type="checkbox" checked={isLive} onChange={handleChange} />
    </div>
  )
}

Now, let's add components to our Header, so final code for src/components/Header.tsx is:

src/components/Header.tsx

'use client'
 
import Link from 'next/link'
import { ConnectButton } from '@rainbow-me/rainbowkit'
 
import { SelectAppChain } from './SelectAppChain'
import { LiveSwitcher } from './LiveSwitcher'
 
 
export function Header() {
 
  return (
    <header className="container flex items-center py-3.5 border-b border-zinc-200">
      <div className="text-xl font-semibold">Azuro Betting App</div>
      <div className="flex ml-10">
        <Link
          className="text-zinc-500 hover:text-black transition"
          href="/events/top"
        >
          Events
        </Link>
        <Link
          className="text-zinc-500 hover:text-black transition ml-4"
          href="/bets"
        >
          Bets History
        </Link>
      </div>
      <div className="ml-auto flex items-center">
        <LiveSwitcher />
        <SelectAppChain />
        <ConnectButton chainStatus="none" />
      </div>
    </header>
  )
}

The resulting output should be:

Learn more

In our tutorial we're building simple betting app. If you're ready to go deeper, learn things from SDK that we used in this section:

Step 2: Prepare to Connect User Wallets Step 4: Create a Page With Sport Events