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.

yarnpnpmnpm

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:

yarnpnpmnpm

yarn add @lens-protocol/wagmi@wagmi-v1

pnpm add @lens-protocol/wagmi@wagmi-v1

npm install @lens-protocol/wagmi@wagmi-v1

TypeScript

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

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

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