Getting Started

Suggest Edits

Installation

Install @lens-protocol/react and ethers dependency.

npm install @lens-protocol/react ethers

yarn add @lens-protocol/react ethers

pnpm add @lens-protocol/react ethers

Integrate with wagmi

Although @lens-protocol/react 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.

npm install wagmi @lens-protocol/wagmi

yarn add wagmi @lens-protocol/wagmi

pnpm add wagmi @lens-protocol/wagmi

Ensure you have Polygon in the wagmi chains configuration

import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { mainnet, polygon } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public'
const { provider, webSocketProvider } = configureChains([polygon, mainnet], [publicProvider()]);

const client = createClient({
  autoConnect: true,
  provider,
  webSocketProvider,
});

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

Create the LensConfig

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

const lensConfig: LensConfig = {
  bindings: wagmiBindings(),
  environment: staging,
  storage: localStorage(),
};

The example above uses localStorage() adapter for window.localStorage, which is available only on web browsers.
Later on we will provide guidance on how to provide a reliable storage solution for React Native or roll your own storage provider solution.

Wrap app with LensProvider

import { LensProvider } from '@lens-protocol/react';

<WagmiConfig client={client}>
  <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 perferct! We have a fully fledged example app showcasing the integration with wagmi. Our example app has authentication build in and is using all available Lens SDK hooks.

You can find it on github: https://github.com/lens-protocol/lens-sdk/tree/main/examples/web-wagmi

Updated 15 days ago

What’s Next