Skip to content
function AnvilProvider(props): ReactNode;

React context provider that makes one configured AnvilSDK available to every hook and component beneath it. Pass the instance as sdk and construct it once (module scope or useMemo) so hooks keyed on the SDK do not refetch on every render.

The provider deliberately accepts an SDK instance rather than raw AnvilDependencies: the caller owns its lifecycle and may update its wallet client or account in place without replacing active workflows or query identity.

useAnvilSDK reads it and throws outside the provider; useAnvilSDKOptional returns null instead. sdk may be null while the SDK is still being built (e.g. before a wallet connects) — components that call useAnvilSDK must not render until it is set.

The provider also supplies a TanStack QueryClient when the host application has none: an existing host client is reused untouched, so mounting this inside an app that already owns one does not fork its cache.

Parameters

ParameterTypeDescription
propsAnvilProviderPropsThe SDK instance to publish and the subtree to publish it to.

Returns

ReactNode

The subtree, wrapped in the SDK context and — only when the host supplies no query client — a QueryClientProvider.

Example

export function App() {
// Build the SDK once (module scope or useMemo); hooks key on it.
return (
<AnvilProvider sdk={sdk}>
<LOCBeneficiary id={1n} />
</AnvilProvider>
);
}
function LOCBeneficiary({ id }: { id: bigint }) {
// Throws if this component renders outside <AnvilProvider>.
const sdk = useAnvilSDK();
const [loc, setLoc] = useState<OutstandingLetterOfCredit>();
useEffect(() => {
void sdk.loc.getOutstandingLetterOfCredit({ id }).then(setLoc);
}, [sdk, id]);
return <p>Beneficiary: {loc?.beneficiary ?? 'loading'}</p>;
}