SDK
Setup

Here, we'll configure the essential components of the SDK to enable proper functionality for the hooks.

Providers

To start, the initial step involves setting up a Chain Provider with the network configuration. This provider informs other sections of the SDK about the current chain being used and also enables network change functionality.

For further details, refer to the Chain section.

import { ChainProvider } from '@azuro-org/sdk'
import { WagmiConfig, createConfig } from 'wagmi'
import { polygonMumbai } from 'viem/chains'
 
 
const wagmiConfig = createConfig(config)
 
function Providers(props: { children: React.ReactNode }) {
  const { children } = props
 
  return (
    <WagmiConfig config={wagmiConfig}>
      <ChainProvider initialChainId={polygonMumbai.id}>
        {children}
      </ChainProvider>
    </WagmiConfig>
  )
}
⚠️

The ChainProvider requires access to the Wagmi context.

Within the SDK, we utilize Data Hooks to fetch data from the subgraph. For this purpose, initializing the ApolloProvider is necessary.

For further details, refer to the Apollo section.

// For Next.js application
import { ApolloProvider } from '@azuro-org/sdk/nextjs/apollo'
 
// For React application
import { ApolloProvider } from '@azuro-org/sdk/react/apollo'
 
import { ChainProvider } from '@azuro-org/sdk'
import { WagmiConfig, createConfig } from 'wagmi'
import { polygonMumbai } from 'viem/chains'
 
 
const wagmiConfig = createConfig(config)
 
function Providers(props: { children: React.ReactNode }) {
  const { children } = props
 
  return (
    <WagmiConfig config={wagmiConfig}>
      <ChainProvider initialChainId={polygonMumbai.id}>
        <ApolloProvider>
          {children}
        </ApolloProvider>
      </ChainProvider>
    </WagmiConfig>
  )
}
⚠️

The ApolloProvider requires access to the chain context.

After completing the providers setup, you can begin using the Data Hooks and the Write Hooks.

Watchers

In your application, it's important to respond to changes in odds and condition statuses. Watchers play a key role in this process by subscribing to new contract events and signaling dependent hooks.

import { useWatchers } from '@azuro-org/sdk'
 
export function Watchers() {
  useWatchers()
 
  return null
}

After completing the watchers setup, you can begin using the Watch Hooks.