Getting Started
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
and ethers dependency.
For this configuration of packages we recommend installing using either yarn or pnpm.
yarn add @lens-protocol/react-web [email protected]
pnpm add @lens-protocol/react-web ethers
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/[email protected]
pnpm add @lens-protocol/[email protected]
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 [email protected] @lens-protocol/wagmi
pnpm add [email protected] @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, 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).
NOTE
Since v1.0.0 the staging
got replaced by development
. The staging
environment config variable is still available as alias but flagged as deprecated. It will be removed in the next major release of the Lens SDK.
See our react-native integration guide.
Wrap app with LensProvider
LensProvider
import { LensProvider } from '@lens-protocol/react-web';
<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 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 22 days ago