Chain - Developer Hub

ChainProvider is used for storing information about application chain as well as to provide network change functionality.

Usage

Wrap your application in ChainProvider.

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>
  )
}

⚠️

The ChainProvider requires access to the Wagmi context.

Get stored context data.

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

ℹ️

The ChainProvider stores the current chain ID in a cookie under the key appChainId to restore appChain, for example, after a page refresh.

// Next.js example for app/layout.tsx
import { ChainProvider } from '@azuro-org/sdk'
import { cookies } from 'next/headers'
 
 
export default function RootLayout(props: { children: React.ReactNode }) {
  const { children } = props
  const cookieStore = 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 | 137 | 80002 | 88888 | 88882

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
  contracts: Contracts // contracts data based on appChain
  api: string // azuro api url
  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 {
  GnosisXDAI = 'GnosisXDAI',
  PolygonUSDT = 'PolygonUSDT',
  PolygonAmoyAZUSD = 'PolygonAmoyAZUSD',
  ChilizWCHZ = 'ChilizWCHZ',
  ChilizSpicyWCHZ = 'ChilizSpicyWCHZ'
}
 
type Contracts = {
  lp: {
    address: `0x${string}`
    abi: typeof lpAbi
  }
  prematchCore: {
    address: `0x${string}`
    abi: typeof prematchCoreAbi
  }
  prematchComboCore: {
    address: `0x${string}`
    abi: typeof prematchComboCoreAbi
  }
  proxyFront: {
    address: `0x${string}`
    abi: typeof proxyFrontAbi
  }
  liveRelayer?: {
    address: `0x${string}`
  }
}
 
type BetToken = {
  address?: `0x${string}` | undefined
  symbol: string
  decimals: number
}

AzuroSDK Live