lens_react_sdk_provider_setup_with_profile_fetch.ts

1import React from 'react';
2import { 
3  LensConfig, 
4  LensProvider, 
5  production, 
6  useProfile 
7} from '@lens-protocol/react-web';
8import { bindings as wagmiBindings } from '@lens-protocol/wagmi';
9
10// 1. Define the Lens configuration
11const lensConfig: LensConfig = {
12  bindings: wagmiBindings(),
13  environment: production,
14};
15
16// 2. Create a component that consumes Lens hooks
17function Profile() {
18  const { data: profile, loading, error } = useProfile({ 
19    forHandle: 'lens/stani' 
20  });
21
22  if (loading) return <p>Loading...</p>;
23  if (error) return <p>Error: {error.message}</p>;
24
25  return (
26    <div>
27      <h1>{profile?.name}</h1>
28      <p>{profile?.bio}</p>
29    </div>
30  );
31}
32
33// 3. Wrap your app with the LensProvider
34export default function App() {
35  return (
36    <LensProvider config={lensConfig}>
37      <Profile />
38    </LensProvider>
39  );
40}