ChainProvider

ChainProvider manages the application’s active blockchain network and exposes functionality to switch between supported chains.

Usage

Wrap your app with ChainProvider. It must be nested inside WagmiProvider and QueryClientProvider.


import { ChainProvider } from '@azuro-org/sdk'
import { WagmiProvider, createConfig } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { polygonAmoy } from 'viem/chains'
 
 
const wagmiConfig = createConfig(config)
const queryClient = new QueryClient() 
 
function Providers(props: { children: React.ReactNode }) {
  const { children } = props
 
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}> 
        <ChainProvider initialChainId={polygonAmoy.id}>
          {children}
        </ChainProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

⚠️

ChainProvider requires WagmiProvider to function properly.

Accessing Chain Data


import { useChain } from '@azuro-org/sdk'
 
const {
  appChain,
  walletChain,
  contracts,
  betToken,
  isRightNetwork,
  setAppChainId
} = useChain()

ℹ️

ChainProvider stores the selected chain in a cookie under the key appChainId. This allows the app to restore the network after a page reload.


// Next.js example for app/layout.tsx
import { ChainProvider } from '@azuro-org/sdk'
import { cookies } from 'next/headers'
 
 
export default async function RootLayout(props: { children: React.ReactNode }) {
  const { children } = props
  const cookieStore = await cookies()
 
  const initialChainId = cookieStore.get('appChainId')?.value
 
  return (
    <html lang="en">
      <body>
        <WagmiProvider config={...}>
          <QueryClientProvider client={...}> 
            <ChainProvider initialChainId={initialChainId}>
              <main>
                {children}
              </main>
            </ChainProvider>
          </QueryClientProvider>
        </WagmiProvider>
      </body>
    </html>
  )
}

Props


{
  children: React.ReactNode
  initialChainId: ChainId // your initial chain id
}


type ChainId = 
  | 100     // Gnosis
  | 137     // Polygon
  | 80002   // Polygon Amoy
  | 88888   // Chiliz
  | 88882   // Chiliz Spicy
  | 8453    // Base
  | 84532   // Base Sepolia

Return Value


import { type Chain } from 'wagmi'
 
{
  appChain: Omit<Chain, 'id'> & { id: ChainId } // represents chain in whitch your application sends requests and receives data
  walletChain: Chain | undefined // user's wallet chain
  graphql: {
    bets: string // bets subgraph url
    feed: string // feed subgraph url
    legacyLive: string // @deprecated v2 live feed subgraph url
  }
  socket: string // azuro socket url
  api: string // azuro api url
  contracts: Contracts // contracts data based on appChain
  environment: Environment // current appChain environment for azuro api
  betToken: BetToken // bet token based on appChain
  isRightNetwork: boolean // true if appChain equeal to walletChain
  setAppChainId: (chainId: ChainId) => void // function for change appChain
}


enum Environment {
  GnosisDevXDAI = 'GnosisDevXDAI',
  GnosisXDAI = 'GnosisXDAI',
  PolygonUSDT = 'PolygonUSDT',
  PolygonAmoyUSDT = 'PolygonAmoyUSDT',
  ChilizWCHZ = 'ChilizWCHZ',
  ChilizSpicyWCHZ = 'ChilizSpicyWCHZ',
  BaseWETH = 'BaseWETH',
  BaseSepoliaWETH = 'BaseSepoliaWETH'
}
 
type Contracts = {
  lp: {
    address: Address
    abi: typeof lpAbi
  }
  core: {
    address: Address
    abi: typeof coreAbi
  }
  relayer: {
    address: Address
    abi: typeof relayerAbi
  }
  azuroBet: {
    address: Address
    abi: typeof azuroBetAbi
  },
  cashout?: {
    address: Address
    abi: typeof cashoutAbi
  }
}
 
type BetToken = {
  address?: `0x${string}` | undefined
  symbol: string
  decimals: number
}