React Hooks SDK
The Lens React SDK is available for integrators as 2.0.0-alpha.x
build.
All documentation available is:
@lens-protocol/react-web
reference for web apps (e.g. NextJS, PWAs, browser based apps in general)@lens-protocol/react-native
reference for RN integrations.
Having some errors?
Have a look at our troubleshooting section which highlight some well know pain points that can happen during initial setup.
Installation
Install @lens-protocol/react-web
.
yarn add @lens-protocol/react-web
pnpm add @lens-protocol/react-web
npm install @lens-protocol/react-web
Early adopters
If you are eager to test new coming features offered by the Lens SDK, install the pre-release version via the
next
tag.yarn add @lens-protocol/react-web@next
pnpm add @lens-protocol/react-web@next
npm install @lens-protocol/react-web@next
Bear in mind that the pre-releases are not stable for production use and there could be breaking changes between different pre-releases before they get promoted into a stable release version.
Integrate with wagmi
We created a companion package called @lens-protocol/wagmi
which makes it easier to integrate it with the popular wagmi library.
yarn add wagmi viem @lens-protocol/wagmi
pnpm add wagmi viem @lens-protocol/wagmi
npm install wagmi viem @lens-protocol/wagmi
Ensure you have Polygon in the wagmi chains configuration.
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider, createConfig, http } from "wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
const queryClient = new QueryClient();
const wagmiConfig = createConfig({
chains: [polygonAmoy, polygon],
transports: {
[polygonAmoy.id]: http(),
[polygon.id]: http(),
},
});
Refer to wagmi docs to see how to set up custom chains, providers and work with their client.
Wagmi v1
If you need support for Wagmi v1, install:
yarn add @lens-protocol/wagmi@wagmi-v1
pnpm add @lens-protocol/wagmi@wagmi-v1
npm install @lens-protocol/wagmi@wagmi-v1
import { WagmiConfig, configureChains, createConfig } from 'wagmi'; import { polygon, polygonAmoy } from 'wagmi/chains'; import { InjectedConnector } from 'wagmi/connectors/injected'; import { publicProvider } from 'wagmi/providers/public'; const { publicClient, webSocketPublicClient } = configureChains( [polygonAmoy, polygon], [publicProvider()], ); const wagmiConfig = createConfig({ autoConnect: true, publicClient, webSocketPublicClient, connectors: [ new InjectedConnector({ options: { shimDisconnect: false, // see https://github.com/wagmi-dev/wagmi/issues/2511 }, }), ], });
Create the LensConfig
LensConfig
import { LensConfig, production } from '@lens-protocol/react-web';
import { bindings } from '@lens-protocol/wagmi';
const lensConfig: LensConfig = {
bindings: bindings(wagmiConfig),
environment: production,
};
import { LensConfig, development } from '@lens-protocol/react-web';
import { bindings as wagmiBindings } from '@lens-protocol/wagmi';
const lensConfig: LensConfig = {
bindings: wagmiBindings(wagmiConfig),
environment: development,
};
The environment variables comes in 2 flavours:
production
is the environment config variable to be used in the live instance of your application (real users, real profiles, real data).development
is the environment config variable to be used when you develop and test your application (test users, test profiles, test data).
See our react-native integration guide.
Wrap app with LensProvider
LensProvider
import { LensProvider } from '@lens-protocol/react-web';
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<LensProvider config={lensConfig}>{/* Your App */}</LensProvider>
</QueryClientProvider>
</WagmiProvider>
It's not strictly necessary to have the LensProvider
as a child of the WagmiConfig
.
You are good to go!
Prefer to learn from examples?
That's perfect! We have a fully fledged example app showcasing the integration with wagmi. Our example app has authentication built-in and it's using pretty much all Lens SDK hooks.
You can find it on GitHub: https://github.com/lens-protocol/lens-sdk/tree/main/examples/web-wagmi
For any question, join the conversation on Discord
Updated 17 days ago