Merge branch 'lens-v2' into v2/bookmark-toggle

.changeset/honest-drinks-try.md

@@ -0,0 +1,7 @@
+---
+"@lens-protocol/api-bindings": minor
+"@lens-protocol/react": minor
+"@lens-protocol/react-web": minor
+---
+
+adds publication bookmarks

.changeset/loud-pets-decide.md

@@ -0,0 +1,6 @@
+---
+"@lens-protocol/react": minor
+"@lens-protocol/react-web": minor
+---
+
+**feat:** implements `useLogout` hook

.changeset/olive-beans-double.md

@@ -0,0 +1,9 @@
+---
+"@lens-protocol/api-bindings": patch
+"@lens-protocol/domain": patch
+"@lens-protocol/react": patch
+---
+
+Rename useFollowProfile to useFollow
+Rename useUnfollowProfile to useUnfollow
+Add support for LensProfileManager to useFollow, useUnfollow and useUpdateFollowPolicy hooks

.changeset/pre.json

@@ -43,6 +43,7 @@
     "grumpy-coats-scream",
     "happy-pumpkins-clean",
     "heavy-dodos-raise",
+    "honest-drinks-try",
     "hot-hornets-drum",
     "large-cars-know",
     "late-clocks-rhyme",
@@ -51,11 +52,14 @@
     "long-carpets-marry",
     "nervous-papayas-design",
     "new-doors-sip",
+    "odd-cougars-poke",
     "old-carrots-breathe",
+    "olive-beans-double",
     "popular-pants-look",
     "shaggy-carrots-cry",
     "shy-pugs-taste",
     "six-feet-sparkle",
+    "six-tigers-serve",
     "slow-cats-dance",
     "slow-melons-fail",
     "tasty-houses-admire",

.changeset/six-tigers-serve.md

@@ -0,0 +1,8 @@
+---
+"@lens-protocol/gated-content": patch
+"@lens-protocol/api-bindings": patch
+"@lens-protocol/client": patch
+"@lens-protocol/react": patch
+---
+
+Updated to support the latest API schema

examples/node/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@bundlr-network/client": "^0.11.9",
     "@lens-protocol/client": "workspace:*",
-    "@lens-protocol/metadata": "0.1.0-alpha.29",
+    "@lens-protocol/metadata": "0.1.0-alpha.30",
     "dotenv": "^16.0.3",
     "ethers": "^5.7.2",
     "uuid": "^9.0.0",

examples/web/src/App.tsx

@@ -26,7 +26,7 @@ import {
 import { MiscPage, UseCurrencies } from './misc';
 import {
   ProfilesPage,
-  UseFollowAndUnfollowProfile,
+  UseFollowAndUnfollow,
   UseLazyProfile,
   UseMutualFollowers,
   UseProfile,
@@ -40,7 +40,7 @@ import {
   UseUpdateProfileManagers,
   UseWhoActedOnPublication,
 } from './profiles';
-import { UseUpdateProfileDetails } from './profiles/UseUpdateProfileDetails';
+import { UseSetProfileMetadata } from './profiles/UseSetProfileMetadata';
 import {
   PublicationsPage,
   UsePublication,
@@ -53,6 +53,7 @@ import { UseBookmarkToggle } from './publications/UseBookmarkToggle';
 import { UseCreateComment } from './publications/UseCreateComment';
 import { UseCreatePost } from './publications/UseCreatePost';
 import { UseHidePublication } from './publications/UseHidePublication';
+import { UseMyBookmarks } from './publications/UseMyBookmarks';
 
 const { publicClient, webSocketPublicClient } = configureChains(
   [polygonMumbai],
@@ -105,6 +106,7 @@ export function App() {
                       <Route path="useReportPublication" element={<UseReportPublication />} />
                       <Route path="useReactionToggle" element={<UseReactionToggle />} />
                       <Route path="useBookmarkToggle" element={<UseBookmarkToggle />} />
+                      <Route path="useMyBookmarks" element={<UseMyBookmarks />} />
                     </Route>
 
                     <Route path="/profiles">
@@ -115,7 +117,7 @@ export function App() {
                       <Route path="useProfileFollowers" element={<UseProfileFollowers />} />
                       <Route path="useProfileFollowing" element={<UseProfileFollowing />} />
                       <Route path="useMutualFollowers" element={<UseMutualFollowers />} />
-                      <Route path="useFollowProfile" element={<UseFollowAndUnfollowProfile />} />
+                      <Route path="useFollow" element={<UseFollowAndUnfollow />} />
                       <Route path="useRecommendedProfiles" element={<UseRecommendedProfiles />} />
                       <Route path="useProfileManagers" element={<UseProfileManagers />} />
                       <Route
@@ -127,7 +129,7 @@ export function App() {
                         element={<UseWhoActedOnPublication />}
                       />
                       <Route path="useProfileActionHistory" element={<UseProfileActionHistory />} />
-                      <Route path="useSetProfileMetadata" element={<UseUpdateProfileDetails />} />
+                      <Route path="useSetProfileMetadata" element={<UseSetProfileMetadata />} />
                       <Route path="useUpdateFollowPolicy" element={<UseUpdateFollowPolicy />} />
                     </Route>
 

examples/web/src/components/auth/LoginButton.tsx

@@ -1,6 +1,5 @@
 import { Link } from 'react-router-dom';
 
-// TODO render log out button once useSession is implemented
 export function LoginButton() {
   return <Link to="/login">Log in</Link>;
 }

examples/web/src/components/auth/LogoutButton.tsx

@@ -0,0 +1,10 @@
+import { useLogout } from '@lens-protocol/react-web';
+
+export function LogoutButton() {
+  const { execute: logout } = useLogout();
+  return (
+    <a href="javascript:false" onClick={() => logout()}>
+      Log out
+    </a>
+  );
+}

examples/web/src/components/auth/index.tsx

@@ -1,4 +1,5 @@
 export * from './LoginButton';
+export * from './LogoutButton';
 export * from './WhenLoggedIn';
 export * from './WhenLoggedOut';
 export * from './UnauthenticatedFallback';

examples/web/src/components/header/Header.tsx

@@ -2,7 +2,7 @@ import { SessionType, useSession } from '@lens-protocol/react-web';
 import { NavLink } from 'react-router-dom';
 
 import { CATEGORIES } from '../../config';
-import { LoginButton } from '../auth';
+import { LoginButton, LogoutButton } from '../auth';
 
 export function Header() {
   const { data: session } = useSession();
@@ -37,7 +37,7 @@ export function Header() {
             </strong>
           )}
 
-          <LoginButton />
+          {session?.authenticated ? <LogoutButton /> : <LoginButton />}
         </div>
       </div>
 

examples/web/src/profiles/ProfilesPage.tsx

@@ -32,9 +32,9 @@ const profileHooks = [
     path: '/profiles/useMutualFollowers',
   },
   {
-    label: 'useFollowProfile & useUnfollowProfile',
+    label: 'useFollow & useUnfollow',
     description: `Follow and unfollow a profile.`,
-    path: '/profiles/useFollowProfile',
+    path: '/profiles/useFollow',
   },
   {
     label: 'useRecommendedProfiles',

examples/web/src/profiles/UseFollowAndUnfollowProfile.tsx → examples/web/src/profiles/UseFollowAndUnfollow.tsx

@@ -1,9 +1,4 @@
-import {
-  Profile,
-  useExploreProfiles,
-  useFollowProfile,
-  useUnfollowProfile,
-} from '@lens-protocol/react-web';
+import { Profile, useExploreProfiles, useFollow, useUnfollow } from '@lens-protocol/react-web';
 
 import { UnauthenticatedFallback, WhenLoggedIn, WhenLoggedOut } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
@@ -15,13 +10,9 @@ type FollowButtonProps = {
 };
 
 function FollowButton({ followee }: FollowButtonProps) {
-  const { execute: follow, error: followError, loading: isFollowLoading } = useFollowProfile();
+  const { execute: follow, error: followError, loading: isFollowLoading } = useFollow();
 
-  const {
-    execute: unfollow,
-    error: unfollowError,
-    loading: isUnfollowLoading,
-  } = useUnfollowProfile();
+  const { execute: unfollow, error: unfollowError, loading: isUnfollowLoading } = useUnfollow();
 
   if (followee.operations.isFollowedByMe.value) {
     // or followee.operations.canFollow === TriStateValue.Yes
@@ -65,11 +56,11 @@ function UseFollowInner() {
   );
 }
 
-export function UseFollowAndUnfollowProfile() {
+export function UseFollowAndUnfollow() {
   return (
     <>
       <h1>
-        <code>useFollowProfile / useUnfollowProfile</code>
+        <code>useFollow / useUnfollow</code>
       </h1>
       <WhenLoggedIn>
         <UseFollowInner />

examples/web/src/profiles/UseUpdateProfileDetails.tsx → examples/web/src/profiles/UseSetProfileMetadata.tsx

@@ -1,5 +1,6 @@
 import { MetadataAttributeType, profile } from '@lens-protocol/metadata';
 import { Profile, useSetProfileMetadata } from '@lens-protocol/react-web';
+import { toast } from 'react-hot-toast';
 
 import { WhenLoggedIn, WhenLoggedOut } from '../components/auth';
 import { Loading } from '../components/loading/Loading';
@@ -18,35 +19,45 @@ function UpdateProfileForm({ activeProfile }: UpdateProfileFormProps) {
 
     const formData = new FormData(event.currentTarget);
 
-    const name = formData.get('name') as string;
+    const name = formData.get('name') as string | undefined;
     const bio = formData.get('bio') as string | undefined;
     const location = formData.get('location') as string | undefined;
     const website = formData.get('website') as string | undefined;
 
-    if (!location || !website) {
-      throw new Error('Location and website are required');
-    }
-
     const metadata = profile({
       name,
       bio,
       attributes: [
         {
           key: 'location',
-          value: location,
+          value: location ?? '',
           type: MetadataAttributeType.STRING,
         },
         {
           key: 'website',
-          value: website,
+          value: website ?? '',
           type: MetadataAttributeType.STRING,
         },
       ],
     });
 
     const metadataURI = await uploadJson(metadata);
 
-    await update({ metadataURI });
+    const result = await update({ metadataURI });
+
+    if (result.isFailure()) {
+      toast.error(result.error.message);
+      return;
+    }
+
+    const completion = await result.value.waitForCompletion();
+
+    if (completion.isFailure()) {
+      toast.error(completion.error.message);
+      return;
+    }
+
+    toast.success('Profile updated');
   }
 
   const location = activeProfile.metadata?.attributes?.find((a) => a.key === 'location');
@@ -60,7 +71,6 @@ function UpdateProfileForm({ activeProfile }: UpdateProfileFormProps) {
         Name:
         <br />
         <input
-          required
           type="text"
           placeholder="Your name"
           disabled={loading}
@@ -74,7 +84,6 @@ function UpdateProfileForm({ activeProfile }: UpdateProfileFormProps) {
         <br />
         <textarea
           rows={3}
-          required
           placeholder="Write a line about you"
           style={{ resize: 'none' }}
           disabled={loading}
@@ -88,11 +97,10 @@ function UpdateProfileForm({ activeProfile }: UpdateProfileFormProps) {
         <br />
         <input
           type="text"
-          required
           placeholder="Where are you?"
           disabled={loading}
           name="location"
-          defaultValue={location?.value ?? ''}
+          defaultValue={location?.value ?? undefined}
         />
       </label>
 
@@ -101,7 +109,6 @@ function UpdateProfileForm({ activeProfile }: UpdateProfileFormProps) {
         <br />
         <input
           type="text"
-          required
           placeholder="https://example.com"
           disabled={loading}
           name="website"
@@ -118,11 +125,11 @@ function UpdateProfileForm({ activeProfile }: UpdateProfileFormProps) {
   );
 }
 
-export function UseUpdateProfileDetails() {
+export function UseSetProfileMetadata() {
   return (
     <div>
       <h1>
-        <code>useUpdateProfileDetails</code>
+        <code>useSetProfileMetadata</code>
       </h1>
 
       <WhenLoggedIn loadingElement={<Loading />}>

examples/web/src/profiles/index.ts

@@ -1,5 +1,5 @@
 export * from './ProfilesPage';
-export * from './UseFollowAndUnfollowProfile';
+export * from './UseFollowAndUnfollow';
 export * from './UseLazyProfile';
 export * from './UseMutualFollowers';
 export * from './UseProfile';

examples/web/src/publications/PublicationsPage.tsx

@@ -46,6 +46,11 @@ const publicationHooks = [
     description: `Add or remove a bookmark to a publication.`,
     path: '/publications/useBookmarkToggle',
   },
+  {
+    label: 'useMyBookmarks',
+    description: `Fetch a list of publications that the current user has bookmarked.`,
+    path: '/publications/useMyBookmarks',
+  },
 ];
 
 export function PublicationsPage() {

examples/web/src/publications/UseHidePublication.tsx

@@ -23,7 +23,7 @@ function HidePublicationButton({ publication }: HidePublicationButtonProps) {
   if (publication.isHidden) return <p>Publication is hidden</p>;
 
   return (
-    <button onClick={hide} disabled={loading}>
+    <button onClick={() => hide()} disabled={loading}>
       Hide
     </button>
   );

examples/web/src/publications/UseMyBookmarks.tsx

@@ -0,0 +1,45 @@
+import { useMyBookmarks } from '@lens-protocol/react-web';
+
+import { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
+import { ErrorMessage } from '../components/error/ErrorMessage';
+import { Loading } from '../components/loading/Loading';
+import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
+import { PublicationCard } from './components/PublicationCard';
+
+export function MyBookmarks() {
+  const {
+    data: publications,
+    error,
+    loading,
+    hasMore,
+    observeRef,
+  } = useInfiniteScroll(useMyBookmarks());
+
+  if (loading) return <Loading />;
+
+  if (error) return <ErrorMessage error={error} />;
+
+  if (publications.length === 0) return <p>No bookmarks yet.</p>;
+
+  return (
+    <div>
+      {publications.map((publication) => (
+        <PublicationCard key={publication.id} publication={publication} />
+      ))}
+      {hasMore && <p ref={observeRef}>Loading more...</p>}
+    </div>
+  );
+}
+
+export function UseMyBookmarks() {
+  return (
+    <div>
+      <h1>
+        <code>useMyBookmarks</code>
+      </h1>
+
+      <WhenLoggedIn>{() => <MyBookmarks />}</WhenLoggedIn>
+      <UnauthenticatedFallback message="Log in to run this demo." />
+    </div>
+  );
+}