react_boostxyz_widget_provider_with_wagmi_tanstack_query.ts

1import React from 'react';
2import { BoostProvider, BoostWidget } from '@boostxyz/widgets';
3import { createConfig, WagmiProvider } from 'wagmi';
4import { mainnet } from 'wagmi/chains';
5import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
6
7// 1. Setup Wagmi and React Query (required dependencies)
8const config = createConfig({
9  chains: [mainnet],
10  // ... your wagmi transport configuration
11});
12
13const queryClient = new QueryClient();
14
15const App = () => {
16  return (
17    <WagmiProvider config={config}>
18      <QueryClientProvider client={queryClient}>
19        {/* 2. Wrap your app with BoostProvider */}
20        <BoostProvider>
21          <div className="container">
22            <h1>My Boost Integration</h1>
23            {/* 3. Render a BoostWidget with a specific Boost ID */}
24            <BoostWidget 
25              boostId="YOUR_BOOST_ID" 
26              onActionSuccess={(txHash) => console.log('Action complete:', txHash)}
27            />
28          </div>
29        </BoostProvider>
30      </QueryClientProvider>
31    </WagmiProvider>
32  );
33};
34
35export default App;