Developer Hub
🔮 For applications
SDK
Providers
Live

The LiveProvider is employed to store the live state and subsequently distribute this state to other components within the 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, arbitrumGoerli } 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.

Get stored context data.

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

The isLive state can only be true in supported chains. If you change the appChain to a different chain, isLive will automatically become false. Also, if you set the state of isLive to true, it will automatically switch the appChain to applicable network.

ℹ️

Supported chains:

  • Gnosis Mainnet
  • Polygon Mainnet
  • Polygon Amoy Testnet
ℹ️

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 function RootLayout(props: { children: React.ReactNode }) {
  const { children } = props
  const cookieStore = 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
}
ChainApollo