Getting Started
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
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
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