lens-use 🌱

Deprecation Notice

Lens Protocol is working on their own React SDK which should be used instead of this library.

React Hooks for Lens Protocol

Standing on the shoulders of these chads (aka, dependencies):

Apollo GraphQL
wagmi
ethers

Jump straight to the Hooks Reference

Example

const { data: profileResponse } = useProfile("stani.lens");

const { data: publicationsResponse } = usePublications(profileResponse?.profile?.id);

const { collect } = useCollect(publicationsResponse?.publications?.items[0].id);

const onClick = () => {
  collect();
};

Installation

# npm
npm install --save @memester-xyz/lens-use

# yarn
yarn add @memester-xyz/lens-use

# pnpm
pnpm add @memester-xyz/lens-use

Usage

Basic

Your app must first be wrapped in a Wagmi context and a Apollo context (connected to the Lens API). e.g.:

function App() {
  return (
    <WagmiConfig client={client}>
      <ApolloProvider client={apolloClient}>
        <DApp />
      </ApolloProvider>
    </WagmiConfig>
  );
}

You can then use the Lens hooks in any components inside of your DApp component:

import { useProfile } from "@memester-xyz/lens-use";

// ...

const { data } = useProfile("stani.lens");

The return value of any API hook (e.g. useProfile, useChallenge) is a typed Apollo GraphQL return value. i.e.
- QueryResult for queries
- MutationTuple for mutations.
The return value of any contract hook (e.g. useContractProfile, useContractCollect) is a modification of a normal Wagmi useContractRead or useContractWrite.
The return value of any action hook (e.g. useCollect) is an object containing:
- a write method with the same name as the hook action (e.g. collect())
- a loading boolean when the request is in flight loading
- an Error object or undefined error

Full API specification is below in the hooks section.

Advanced

By default we use the currently known Polygon Mainnet Lens Hub Proxy address. There are two ways to override this but both require adding our LensProvider context to your app.

You can use the currently known Mumbai (testnet) address:

function App() {
  return (
    <WagmiConfig client={client}>
      <ApolloProvider client={apolloClient}>
        <LensProvider network="testnet">
          <DApp />
        </LensProvider>
      </ApolloProvider>
    </WagmiConfig>
  );
}

You can pass a custom Lens Hub contract address:

function App() {
  return (
    <WagmiConfig client={client}>
      <ApolloProvider client={apolloClient}>
        <LensProvider lensHubAddress="0x...">
          <DApp />
        </LensProvider>
      </ApolloProvider>
    </WagmiConfig>
  );
}

Hooks Reference

Login
Query
Write
- useCollect
- useComment
- useFollow
- useUnfollow
- useMirror
- usePost
Contract

Login

Hooks to help with authenticating against the Lens API.

useChallenge

Lens Reference

Get a challenge to be signed by the user

const { data: challengeData } = useChallenge(address);

// challengeData.challenge.text must be signed by the user's wallet

useAuthenticate

Lens Reference

Authenticate the signed challenge

const [authenticate, { data: authenticateData }] = useAuthenticate(address, signedChallenge);

// Call this method to start the authentication request
authenticate();

// After the request is complete
// authenticateData.authenticate.accessToken has access token
// authenticateData.authenticate.refreshToken has refresh token

useRefresh

Lens Reference

Refresh the JWT

const [refresh, { data: refreshData }] = useRefresh(refreshToken);

// Call this method to start the refresh request
refresh();

// After the request is complete
// refreshData.refresh.accessToken has access token
// refreshData.refresh.refreshToken has refresh token

Query

Hooks to query the Lens API. Note, some of these require authentication, check the Lens Reference.

useProfile

Lens Reference

Get a profile by handle

const { data } = useProfile(handle);

useProfiles

Lens Reference

Get all profiles owned by an address

const { data } = useProfiles(address);

useDefaultProfile

Lens Reference

Get default profile by address

const defaultProfile = useDefaultProfile(address);

useProfilePicture

The response body from useProfile and useDefaultProfile is slightly different, so this method helps to pull out the profile picture from one of those.

const defaultProfile = useDefaultProfile(address);
const pfpURL = useProfilePicture(defaultProfile);

useProfileHasDispatcher

A simple utility which returns true if the profile has the dispatcher enabled.

const dispatch = useProfileHasDispatcher(profileId);

usePublication

Lens Reference

Retrieve details for a specific publication

const { data } = usePublication(publicationId);

// Pass in profileId to get the mirrored status in your publication results
const { data } = usePublication(publicationId, profileId);

usePublications

Lens Reference

Retrieve publications based on various parameters

// Get posts from a specific profile
const { data } = usePublications(profileId);

// Get posts and comments from a specific profile
const { data } = usePublications(profileId, [PublicationType.POST, PublicationType.COMMENT]);

// Get posts from a specific profile and source
const { data } = usePublications(profileId, [PublicationType.POST], ["memester"]);

usePublicationComments

Lens Reference

Retrieve publications based on various parameters

// Get comments for a specific publication
const { data } = usePublicationComments(publicationId);

useSearch

Lens Reference

Search profiles

const { data } = useSearch("stani");

Write

Hooks to write to Lens using the dispatcher if enabled or the broadcaster if not. Note, your Apollo GraphQL client must be authenticated!

All write hooks take an optional final parameter which allows you to specify callback functions. An example is given for useCollect but the same applies to all hooks in this section.

useCollect

Collect a publication using the API

const { collect, loading, error } = useCollect(publicationId);

// Call this method to start the collect request
collect();

// You can also pass in callback functions
const { collect, loading, error } = useCollect(publicationId, {
  onBroadcasted(receipt) {
    // ...
  },
  onCompleted(receipt) {
    // receipt will be undefined if the request errored for some reason
  },
});

useComment

Comment on a publication. Requires a URL with the comment metadata already uploaded

const { collect, loading, error } = useComment(profileId, publicationId, commentURL);

// Call this method to start the comment request
comment();

useFollow

Follow a profile

const { follow, loading, error } = useFollow(profileIdToFollow);

// Call this method to start the follow request
follow();

useUnfollow

Unfollow a profile

const { unfollow, loading, error } = useUnfollow(profileIdToUnfollow);

// Call this method to start the unfollow request
unfollow();

useMirror

Mirror a publication

const { mirror, loading, error } = useMirror(profileId, publicationId);

// Call this method to start the mirror request
mirror();

usePost

Post. Requires a URL with the post metadata already uploaded

const { post, loading, error } = usePost(profileId, postURL);

// Call this method to start the post request
post();

Contract

useContractCollect

Lens Reference

Collect a publication using the Lens Hub Contract

const { write, data, prepareError, writeError, status } = useContractCollect(profileId, publicationId);

// Call this method to invoke the users connected wallet
write();

useContractComment

Lens Reference

Comment on a publication using the Lens Hub Contract

const { write, data, prepareError, writeError, status } = useContractCollect(
  profileId,
  contentURI,
  profileIdPointed,
  pubIdPointed,
  collectModule,
  collectModuleInitData,
  referenceModule,
  referenceModuleInitData,
  referenceModuleData,
);

// Call this method to invoke the users connected wallet
write();

useContractFollow

Lens Reference

Follow profiles using the Lens Hub Contract

const { write, data, prepareError, writeError, status } = useContractFollow(profileIds);

// Call this method to invoke the users connected wallet
write();

useContractUnfollow

Lens Reference

Unfollow a profile by burning the specific Follow NFT. You must pass in the relevant follow NFT address and tokenId

const { write, data, prepareError, writeError, status } = useContractUnfollow(followNFTAddress, tokenId);

// Call this method to invoke the users connected wallet
write();

useContractMirror

Lens Reference

Mirror a publication using the Lens Hub Contract

const { write, data, prepareError, writeError, status } = useContractMirror(
  profileId,
  profileIdPointed,
  pubIdPointed,
  referenceModuleData,
  referenceModule,
  referenceModuleInitData,
);

// Call this method to invoke the users connected wallet
write();

useContractPost

Lens Reference

Post using the Lens Hub Contract

const { write, data, prepareError, writeError, status } = useContractPost(
  profileId?,
  contentURI,
  collectModule,
  collectModuleInitData,
  referenceModule,
  referenceModuleInitData,
);

// Call this method to invoke the users connected wallet
write();

useContractProfile

Lens Reference

Read profile from the Lens Hub Contract

const { data } = useContractProfile(profileId);

Made with 🫡 by memester.xyz

Files

README.md

Latest commit

History

README.md

File metadata and controls

lens-use 🌱

Deprecation Notice

React Hooks for Lens Protocol

Example

Installation

Usage

Basic

Advanced

Hooks Reference

Login

useChallenge

useAuthenticate

useRefresh

Query

useProfile

useProfiles

useDefaultProfile

useProfilePicture

useProfileHasDispatcher

usePublication

usePublications

usePublicationComments

useSearch

Write

useCollect

useComment

useFollow

useUnfollow

useMirror

usePost

Contract

useContractCollect

useContractComment

useContractFollow

useContractUnfollow

useContractMirror

useContractPost

useContractProfile