Getting Started

🚧

This section of docs is valid for Lens Protocol v1

React Hooks SDK v2 is coming soon but it's not available yet.

🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧

Installation

🚧

Having some errors?

Have a look at our troubleshooting section which highlight some well know pain points that can happen during initial setup.

Install @lens-protocol/react-web and ethers dependency.

For this configuration of packages we recommend installing using either yarn or pnpm.

yarn add @lens-protocol/react-web ethers@legacy-v5

pnpm add @lens-protocol/react-web ethers@legacy-v5

npm install @lens-protocol/react-web ethers@legacy-v5

🚧

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

Although @lens-protocol/react-web only depends on ethers (and React ofc), we created a companion package called @lens-protocol/wagmi which makes it easier to integrate it with the popular wagmi library.

yarn add wagmi @lens-protocol/wagmi

pnpm add wagmi @lens-protocol/wagmi

npm install wagmi @lens-protocol/wagmi

Ensure you have Polygon in the wagmi chains configuration

import { WagmiConfig, configureChains, createConfig } from 'wagmi';
import { polygon, polygonMumbai } from 'wagmi/chains';
import { InjectedConnector } from 'wagmi/connectors/injected';
import { publicProvider } from 'wagmi/providers/public';

const { publicClient, webSocketPublicClient } = configureChains(
  [polygonMumbai, polygon],
  [publicProvider()],
);

const config = createConfig({
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
  connectors: [
    new InjectedConnector({
      options: {
        shimDisconnect: false, // see https://github.com/wagmi-dev/wagmi/issues/2511
      },
    }),
  ],
});

Refer to wagmi docs to see how to set up custom chains, providers and work with their client.

📘

Older wagmi support

If your integration uses wagmi 0.x install @lens-protocol/[email protected] instead.

Create the LensConfig

import { LensConfig, development } from '@lens-protocol/react-web';
import { bindings as wagmiBindings } from '@lens-protocol/wagmi';

const lensConfig: LensConfig = {
  bindings: wagmiBindings(),
  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';

<WagmiConfig config={config}>
  <LensProvider config={lensConfig}>
    <YourRoutes />
  </LensProvider>
</WagmiConfig>

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