react_boostxyz_boost_ui_provider_wagmi_quest_card_quickstart.ts

1import React from 'react';
2import { BoostProvider, BoostCard } from '@boostxyz/boost-ui';
3import { WagmiConfig, createConfig, mainnet } from 'wagmi';
4import { createPublicClient, http } from 'viem';
5
6// 1. Setup Wagmi config (Boost UI requires a Wagmi context)
7const config = createConfig({
8  autoConnect: true,
9  publicClient: createPublicClient({
10    chain: mainnet,
11    transport: http(),
12  }),
13});
14
15// 2. Wrap your app with BoostProvider
16export default function App() {
17  return (
18    <WagmiConfig config={config}>
19      <BoostProvider>
20        <div style={{ padding: '20px' }}>
21          {/* 3. Use Boost UI components, such as a BoostCard for a specific quest */}
22          <BoostCard 
23            boostId="0x..." // Replace with a valid Boost ID
24            onSuccess={(hash) => console.log('Transaction successful:', hash)}
25            onError={(error) => console.error('Error:', error)}
26          />
27        </div>
28      </BoostProvider>
29    </WagmiConfig>
30  );
31}