Awesome
<h1 align="center">lens-use 🌱</h1> <h2 align="center">Deprecation Notice</h2> <p align="center"> Lens Protocol is working on their own <a href="https://github.com/lens-protocol/lens-sdk">React SDK</a> which should be used instead of this library. </p> <h2 align="center">React Hooks for Lens Protocol</h2> <p align="center"> <a href="https://reactjs.org/">React</a> 🤝 <a href="https://www.lens.xyz/">Lens Protocol</a> </p>Standing on the shoulders of these chads (aka, dependencies):
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 queriesMutationTuple
for mutations.
-
The return value of any contract hook (e.g.
useContractProfile
,useContractCollect
) is a modification of a normal WagmiuseContractRead
oruseContractWrite
. -
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
- a write method with the same name as the hook action (e.g.
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
Hooks to help with authenticating against the Lens API.
useChallenge
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
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
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
Get a profile by handle
const { data } = useProfile(handle);
useProfiles
Get all profiles owned by an address
const { data } = useProfiles(address);
useDefaultProfile
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
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
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
Retrieve publications based on various parameters
// Get comments for a specific publication
const { data } = usePublicationComments(publicationId);
useSearch
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
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
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
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
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
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
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
Read profile from the Lens Hub Contract
const { data } = useContractProfile(profileId);
Made with 🫡 by memester.xyz