Developer Hub
🔮 For applications
Guides & Tutorials
Tutorial: build your dApp
Step 3: Switch Network and Change Mode

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:

'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( as ChainId)
  return (
    <select className='mr-4 cursor-pointer' value={} onChange={handleChange}>
      { => (
          <option key={} value={}>{}</option>

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:

'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>) => {
  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} />

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

'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">
          className="text-zinc-500 hover:text-black transition"
          className="text-zinc-500 hover:text-black transition ml-4"
          Bets History
      <div className="ml-auto flex items-center">
        <LiveSwitcher />
        <SelectAppChain />
        <ConnectButton chainStatus="none" />

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: