LiveProvider

The LiveProvider is employed to store the live state and subsequently distribute this state to other components within the application.

ℹ️

The LiveProvider is optional. You can create your own source of truth, such as the URL /live in your application.

Usage

Wrap your application in LiveProvider.

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

⚠️

The LiveProvider requires access to the ChainProvider context.

Accessing Live State

import { useLive } from '@azuro-org/sdk'
 
const { isLive, changeLive } = useLive()

ℹ️

The LiveProvider stores the current state in a cookie under the key live to restore isLive state, for example, after a page refresh.

// Next.js example for app/layout.tsx
import { ChainProvider, LiveProvider } 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
  const initialLiveState = JSON.parse(cookieStore.get('live')?.value || '')
 
  return (
    <html lang="en">
      <body>
        <WagmiProvider config={...}>
          <QueryClientProvider client={...}> 
            <ChainProvider initialChainId={initialChainId}>
              <LiveProvider initialLiveState={initialLiveState}>
                <main>
                  {children}
                </main>
              </LiveProvider>
            </ChainProvider>
          </QueryClientProvider>
        </WagmiProvider>
      </body>
    </html>
  )
}

Props

{
  children: React.ReactNode
  initialLiveState?: boolean // your initial state
}

Return Value

{
  isLive: boolean
  changeLive: (value: boolean) => void
}

Chain Socket