React SDK

Installation

To install the React SDK, use your preferred package manager from the command line. For example, if you use bun, execute the following command:

bun add @inverter-network/react wagmi@^2.5.7 viem@^2.7.6 @tanstack/react-query@^5.59.0

---

Initializing the React SDK

Since our React SDK uses @tanstack/react-query, wagmi and viem we need these instances to be present at the parent level and then we lastly add the InverterProvider.

@inverter-network/react SDK has the export paths @inverter-network/react and @inverter-network/react/client Client components and hooks are exported from */client this is done to ensure Next.js users have a separate import path for server components .

'use client'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider, createConfig, http } from 'wagmi'
import { sepolia } from 'viem/chains'
import { InverterProvider } from '@inverter-network/react/client'

const queryClient = new QueryClient()

const wagmiConfig = createConfig({
    chains: chains,
    multiInjectedProviderDiscovery: false,
    transports: {
        [sepolia.id]: http(<your_rpc_url or leave_empty_for_default_fallback>),
    },
    ssr: true, // If the user is using a SSR supporting framework
    cacheTime: 3000, // 3 seconds
  })

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig} reconnectOnMount>
        <InverterProvider
          themeConfig={{
            theme: 'dark',
            // The params below override the @inverter-network/react css theme
            baseTheme: {},
            lightTheme: {},
            darkTheme: {}
          }}
        >
            {children}
        </InverterProvider>
      </WagmiProvider>
    </QueryClientProvider>
  )
}