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.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
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
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
Updated about 1 month ago