SymmioProvider

The single React context every other SDK hook consumes. Builds the core Config, bridges wagmi’s viem clients into it, and exposes the config + connected chain via useSymmioConfig / useSymmioChainId.

Setup

import { SymmioProvider } from "@symmio/trading-react";
 
<SymmioProvider>{children}</SymmioProvider>;

Must be mounted inside a WagmiProvider and QueryClientProvider. The SDK reads wagmi’s connection state via useConfig() and shares the caller’s QueryClient; it does not mount either itself.

<WagmiProvider config={wagmiConfig}>
  <QueryClientProvider client={queryClient}>
    <SymmioProvider>{children}</SymmioProvider>
  </QueryClientProvider>
</WagmiProvider>

Props

chainOverrides

• Type: Partial<Record<number, DeepPartial<SymmioChainConfig>>>
• Default: undefined

Per-chain overrides deep-merged onto the SDK’s built-in registry. Use to point at a staging subgraph, override an address, or add a solver override without forking.

<SymmioProvider
  chainOverrides={{
    999: {
      subgraphs: {
        analytics: "https://staging.example/subgraphs/analytics",
      },
    },
  }}
>
  {children}
</SymmioProvider>

defaultChainId

• Type: number
• Default: first built-in supported chain

Chain used when an action or hook omits chainId. Set to pin the SDK in single-chain apps; wagmi’s active chain still overrides for the connected wallet.

getWalletClient

• Type: (parameters: { chainId: number; from?: Address }) => Promise<SymmioWalletClient>
• Default: wagmi-connected wallet resolver

Custom wallet-client resolver. Receives { chainId, from } from the SDK; the caller decides which wallet to return.

Use this to plug in a session-key wallet (return the session key when from matches it, wagmi otherwise) or a multi-signer flow (a router that picks based on from).

function useAppGetWalletClient() {
  return useCallback(
    async ({ chainId, from }) => {
      if (sessionKey && from?.toLowerCase() === sessionKey.address.toLowerCase()) {
        return sessionKey.walletClient;
      }
      return await getWalletClient(wagmiConfig, { chainId });
    },
    [sessionKey],
  );
}
 
<SymmioProvider getWalletClient={useAppGetWalletClient()}>{children}</SymmioProvider>;

When omitted, the provider falls back to wagmi/actions#getWalletClient — the SDK signs with whatever wallet wagmi has connected, ignoring from.

What the provider does

1. Reads the host wagmi config via useConfig().
2. Calls createConfig(...) once, memoized against the wagmi config reference.
3. Wires getClient to wagmi/actions#getPublicClient and getWalletClient to the prop (or wagmi’s default).
4. Exposes the Config via context.

The wagmi bridge is the only place the SDK touches wagmi — that’s why core stays wagmi-free and non-React consumers can pass their own viem clients.

Reading the config in a hook

useSymmioConfig(parameters?)

Reads the config from context. Every SDK hook accepts an optional config override via its parameters; useSymmioConfig mirrors that convention (parameters?.config ?? contextConfig).

import { useSymmioConfig } from "@symmio/trading-react";
 
const config = useSymmioConfig(); // from context
const configOverride = useSymmioConfig({ config: customConfig }); // override

Throws when called outside SymmioProvider and no config override was passed.

useSymmioChainId()

Reads the connected chain id from wagmi. Falls back to the provider’s defaultChainId when no wallet is connected.

import { useSymmioChainId } from "@symmio/trading-react";
 
const chainId = useSymmioChainId();

Chain-config utilities

Re-exported from core:

• SymmioSupportedChainId — enum of the SDK’s built-in chain ids.
• isSymmioSupportedChainId(id) — narrow an arbitrary id.
• getChainConfig(config, chainId?) / listSupportedChains(config) — standalone helpers on the resolved config.

Related

• Config — the underlying createConfig.
• Hook pattern — how every downstream hook consumes context.
• Wallet hooks — the higher-level wallet + chain-switch API.