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
}