BiconomyProvider
@biconomy/use-aa • Provider
@biconomy/use-aa / BiconomyProvider
Provider: BiconomyProvider
Description
The BiconomyProvider component in TypeScript React sets up a context provider for managing BiconomySmartAccountV2 related state and functionality.
Parameters
type BiconomyProviderProps = {
/** The children of the provider */
children: ReactNode;
/** The Biconomy configuration */
config: { bundlerUrl: string; biconomyPaymasterApiKey: string };
/** The Tanstack Query client instance */
queryClient: QueryClient | undefined;
};
Returns
type BiconomyContextPayload = {
/** The BiconomySmartAccountV2 instance. This can be used to 'drop down' to the core SDK */
smartAccountClient: BiconomySmartAccountV2 | null;
/** The Tanstack Query client instance */
queryClient: QueryClient | undefined;
/** The address of the smart account for the user */
smartAccountAddress: Hex;
/** The URL of the Biconomy bundler. This can be retrieved from the Biconomy dashboard: https://dashboard.biconomy.io */
bundlerUrl: string;
/** The paymaster API key. This can be retrieved from the Biconomy dashboard: https://dashboard.biconomy.io */
biconomyPaymasterApiKey: string;
};
Example
import { BiconomyProvider } from "@biconomy/use-aa";
import { createConfig, http, WagmiProvider } from "wagmi";
import { polygonAmoy } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { bundlerUrl, biconomyPaymasterApiKey } from "./config";
const wagmiConfig = createConfig({
chains: [polygonAmoy],
transports: { [polygonAmoy.id]: http() },
});
const queryClient = new QueryClient();
ReactDOM.createRoot(document?.getElementById("root")!).render(
<StrictMode>
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<BiconomyProvider
config={{
biconomyPaymasterApiKey,
bundlerUrl,
}}
queryClient={queryClient}
>
<App />
</BiconomyProvider>
</QueryClientProvider>
</WagmiProvider>
</StrictMode>
);