react: enable useLinkHandle and useUnlinkHandle hooks (#628)

lens-protocol · Oct 31, 2023 · 9490db8 · 9490db8
1 parent 1f28c6d
commit 9490db8
Show file tree

Hide file tree

Showing 29 changed files with 255 additions and 102 deletions.
diff --git a/.changeset/smooth-ties-roll.md b/.changeset/smooth-ties-roll.md
@@ -0,0 +1,8 @@
+---
+"@lens-protocol/api-bindings": minor
+"@lens-protocol/domain": minor
+"@lens-protocol/react": minor
+"@lens-protocol/react-web": minor
+---
+
+Added useLinkHandle and useUnlinkHandle hooks
diff --git a/examples/web/src/misc/UseNotifications.tsx b/examples/web/src/misc/UseNotifications.tsx
@@ -1,6 +1,6 @@
 import { useNotifications } from '@lens-protocol/react-web';
 
-import { WhenLoggedIn, WhenLoggedOut } from '../components/auth';
+import { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
 import { Loading } from '../components/loading/Loading';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
@@ -34,9 +34,7 @@ export function UseNotifications() {
       <WhenLoggedIn>
         <UseNotificationsInner />
       </WhenLoggedIn>
-      <WhenLoggedOut>
-        <p>You must be logged in to use this example.</p>
-      </WhenLoggedOut>
+      <UnauthenticatedFallback />
     </div>
   );
 }
diff --git a/examples/web/src/profiles/ProfilesPage.tsx b/examples/web/src/profiles/ProfilesPage.tsx
@@ -72,10 +72,8 @@ const profileHooks = [
     path: '/profiles/useUpdateFollowPolicy',
   },
   {
-    label: 'useOwHandles',
-    // label: 'useOwnedHandles & useLinkHandle & useUnlinkHandle',
-    // description: `Link and unlink handle from a profile.`,
-    description: `Fetch all handles owned by a wallet.`,
+    label: 'useOwnedHandles & useLinkHandle & useUnlinkHandle',
+    description: `Link and unlink handle from a profile.`,
     path: '/profiles/useOwnedHandles',
   },
   {

diff --git a/examples/web/src/profiles/UseFollowAndUnfollow.tsx b/examples/web/src/profiles/UseFollowAndUnfollow.tsx
@@ -6,7 +6,7 @@ import {
   useUnfollow,
 } from '@lens-protocol/react-web';
 
-import { UnauthenticatedFallback, WhenLoggedIn, WhenLoggedOut } from '../components/auth';
+import { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
 import { Loading } from '../components/loading/Loading';
 import { ProfileCard } from './components/ProfileCard';
@@ -74,9 +74,7 @@ export function UseFollowAndUnfollow() {
       <WhenLoggedIn>
         <UseFollowInner />
       </WhenLoggedIn>
-      <WhenLoggedOut>
-        <UnauthenticatedFallback />
-      </WhenLoggedOut>
+      <UnauthenticatedFallback />
     </>
   );
 }
diff --git a/examples/web/src/profiles/UseOwnedHandles.tsx b/examples/web/src/profiles/UseOwnedHandles.tsx
@@ -1,47 +1,71 @@
 import {
   EvmAddress,
+  HandleInfo,
   Profile,
+  ProfileId,
   useLinkHandle,
   useOwnedHandles,
   useProfiles,
   useUnlinkHandle,
 } from '@lens-protocol/react-web';
+import toast from 'react-hot-toast';
 
-import { UnauthenticatedFallback, WhenLoggedIn, WhenLoggedOut } from '../components/auth';
+import { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
 import { Loading } from '../components/loading/Loading';
 
 type LinkHandleButtonProps = {
-  handle: string;
+  handle: HandleInfo;
 };
 
 function LinkHandleButton({ handle }: LinkHandleButtonProps) {
   const { execute, error, loading } = useLinkHandle();
 
-  return (
-    <>
-      <button onClick={() => execute({ handle })} disabled={loading} style={{ padding: '1px 6px' }}>
+  if (error) {
+    toast.error(error.message);
+  }
+
+  const isLinkable = !handle.linkedTo;
+
+  if (isLinkable) {
+    return (
+      <button
+        onClick={() => execute({ handle })}
+        disabled={loading}
+        style={{ padding: '1px 6px', margin: 0 }}
+      >
         Link
       </button>
-      {error && <p>{error.message}</p>}
-    </>
-  );
+    );
+  }
+
+  return null;
 }
 
 type UnlinkHandleButtonProps = {
-  handle: string;
+  handle: HandleInfo;
+  profileId: ProfileId;
 };
 
-function UnlinkHandleButton({ handle }: UnlinkHandleButtonProps) {
+function UnlinkHandleButton({ handle, profileId }: UnlinkHandleButtonProps) {
   const { execute, error, loading } = useUnlinkHandle();
 
+  if (error) {
+    toast.error(error.message);
+  }
+
+  const isUnlinkable = handle.linkedTo?.nftTokenId === profileId;
+
+  if (!isUnlinkable) return null;
+
   return (
-    <>
-      <button onClick={() => execute({ handle })} disabled={loading} style={{ padding: '1px 6px' }}>
-        Unlink
-      </button>
-      {error && <p>{error.message}</p>}
-    </>
+    <button
+      onClick={() => execute({ handle })}
+      disabled={loading}
+      style={{ padding: '1px 6px', margin: 0 }}
+    >
+      Unlink
+    </button>
   );
 }
 
@@ -74,8 +98,13 @@ function UseOwnedProfiles({ address }: { address: EvmAddress }) {
   );
 }
 
-// eslint-disable-next-line
-function UseOwnedHandlesInner({ address }: { address: EvmAddress }) {
+function UseOwnedHandlesInner({
+  address,
+  profileId,
+}: {
+  address: EvmAddress;
+  profileId: ProfileId;
+}) {
   const {
     data: handleResult,
     loading,
@@ -94,9 +123,12 @@ function UseOwnedHandlesInner({ address }: { address: EvmAddress }) {
       <ul>
         {handleResult.map((handle, index) => (
           <li key={index}>
-            <div>{handle.fullHandle}</div>
-            <LinkHandleButton handle={handle.fullHandle} />{' '}
-            <UnlinkHandleButton handle={handle.fullHandle} />
+            <span>
+              {handle.fullHandle}{' '}
+              {handle.linkedTo ? `linked to ${handle.linkedTo.nftTokenId}` : 'NOT LINKED'}
+            </span>{' '}
+            <LinkHandleButton handle={handle} />{' '}
+            <UnlinkHandleButton handle={handle} profileId={profileId} />
           </li>
         ))}
       </ul>
@@ -112,13 +144,16 @@ type ContentProps = {
 function Content({ address, profile }: ContentProps) {
   return (
     <div>
-      <p>Wallet address: {address}.</p>
       <p>
-        Active profile: {profile.id}. Current handle {profile.handle?.fullHandle || 'NOT LINKED'}
+        Wallet address: <strong>{address}</strong>.
+      </p>
+      <p>
+        Active profile: <strong>{profile.id}</strong>. Current handle{' '}
+        <strong>{profile.handle?.fullHandle || 'NOT LINKED'}</strong>.
       </p>
       <div style={{ display: 'flex' }}>
         <UseOwnedProfiles address={address} />
-        {/* <UseOwnedHandlesInner address={address} /> */}
+        <UseOwnedHandlesInner address={address} profileId={profile.id} />
       </div>
     </div>
   );
@@ -128,17 +163,13 @@ export function UseOwnedHandles() {
   return (
     <div>
       <h1>
-        {/* <code>useOwnedHandles & useLinkHandle & useUnlinkHandle</code> */}
-        <code>useOwnedHandles</code>
+        <code>useOwnedHandles & useLinkHandle & useUnlinkHandle</code>
       </h1>
 
       <WhenLoggedIn>
         {({ address, profile }) => <Content address={address} profile={profile} />}
       </WhenLoggedIn>
-
-      <WhenLoggedOut>
-        <UnauthenticatedFallback />
-      </WhenLoggedOut>
+      <UnauthenticatedFallback />
     </div>
   );
 }
diff --git a/examples/web/src/profiles/UseProfileActionHistory.tsx b/examples/web/src/profiles/UseProfileActionHistory.tsx
@@ -1,6 +1,6 @@
 import { useProfileActionHistory } from '@lens-protocol/react-web';
 
-import { WhenLoggedIn, WhenLoggedOut } from '../components/auth';
+import { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
 import { Loading } from '../components/loading/Loading';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
@@ -41,9 +41,7 @@ export function UseProfileActionHistory() {
       <WhenLoggedIn>
         <UseProfileActionHistoryInner />
       </WhenLoggedIn>
-      <WhenLoggedOut>
-        <p>You must be logged in to use this example.</p>
-      </WhenLoggedOut>
+      <UnauthenticatedFallback />
     </div>
   );
 }
diff --git a/examples/web/src/profiles/UseSetProfileMetadata.tsx b/examples/web/src/profiles/UseSetProfileMetadata.tsx
@@ -2,7 +2,7 @@ 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 { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
 import { Loading } from '../components/loading/Loading';
 import { uploadJson } from '../upload';
 import { ProfileCard } from './components/ProfileCard';
@@ -139,10 +139,7 @@ export function UseSetProfileMetadata() {
       <WhenLoggedIn loadingElement={<Loading />}>
         {({ profile: activeProfile }) => <UpdateProfileForm activeProfile={activeProfile} />}
       </WhenLoggedIn>
-
-      <WhenLoggedOut>
-        <p>You need to be logged in to use this example.</p>
-      </WhenLoggedOut>
+      <UnauthenticatedFallback />
     </div>
   );
 }
diff --git a/examples/web/src/profiles/UseUpdateFollowPolicy.tsx b/examples/web/src/profiles/UseUpdateFollowPolicy.tsx
@@ -9,7 +9,7 @@ import {
 } from '@lens-protocol/react-web';
 import { useState } from 'react';
 
-import { UnauthenticatedFallback, WhenLoggedIn, WhenLoggedOut } from '../components/auth';
+import { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
 import { Loading } from '../components/loading/Loading';
 import { invariant, never } from '../utils';
@@ -221,9 +221,7 @@ export function UseUpdateFollowPolicy() {
         <code>useUpdateFollowPolicy</code>
       </h1>
       <WhenLoggedIn>{({ profile }) => <UpdateFollowPolicy profile={profile} />}</WhenLoggedIn>
-      <WhenLoggedOut>
-        <UnauthenticatedFallback />
-      </WhenLoggedOut>
+      <UnauthenticatedFallback />
     </>
   );
 }
diff --git a/examples/web/src/profiles/UseUpdateProfileManagers.tsx b/examples/web/src/profiles/UseUpdateProfileManagers.tsx
@@ -1,6 +1,6 @@
 import { Profile, useUpdateProfileManagers, useProfileManagers } from '@lens-protocol/react-web';
 
-import { UnauthenticatedFallback, WhenLoggedIn, WhenLoggedOut } from '../components/auth';
+import { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
 
 function UpdateProfileManagersForm({ profile }: { profile: Profile }) {
@@ -71,10 +71,7 @@ export function UseUpdateProfileManagers() {
       <WhenLoggedIn>
         {({ profile }) => <UpdateProfileManagersForm profile={profile} />}
       </WhenLoggedIn>
-
-      <WhenLoggedOut>
-        <UnauthenticatedFallback />
-      </WhenLoggedOut>
+      <UnauthenticatedFallback />
     </div>
   );
 }
diff --git a/examples/web/src/publications/UseBookmarkToggle.tsx b/examples/web/src/publications/UseBookmarkToggle.tsx
@@ -64,7 +64,7 @@ export function UseBookmarkToggle() {
       <WhenLoggedIn>
         <UseBookmarkToggleInner />
       </WhenLoggedIn>
-      <UnauthenticatedFallback message="Log in to run this demo." />
+      <UnauthenticatedFallback />
     </>
   );
 }
diff --git a/examples/web/src/publications/UseHidePublication.tsx b/examples/web/src/publications/UseHidePublication.tsx
@@ -7,7 +7,7 @@ import {
   usePublications,
 } from '@lens-protocol/react-web';
 
-import { LoginButton, WhenLoggedIn, WhenLoggedOut } from '../components/auth';
+import { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
 import { Loading } from '../components/loading/Loading';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
@@ -90,12 +90,7 @@ export function UseHidePublication() {
       <WhenLoggedIn>
         {({ profile, address }) => <Feed profile={profile} address={address} />}
       </WhenLoggedIn>
-      <WhenLoggedOut>
-        <div>
-          <p>You must be logged in to use this example.</p>
-          <LoginButton />
-        </div>
-      </WhenLoggedOut>
+      <UnauthenticatedFallback />
     </>
   );
 }
diff --git a/examples/web/src/publications/UseMyBookmarks.tsx b/examples/web/src/publications/UseMyBookmarks.tsx
@@ -39,7 +39,7 @@ export function UseMyBookmarks() {
       </h1>
 
       <WhenLoggedIn>{() => <MyBookmarks />}</WhenLoggedIn>
-      <UnauthenticatedFallback message="Log in to run this demo." />
+      <UnauthenticatedFallback />
     </div>
   );
 }
diff --git a/examples/web/src/publications/UseNotInterestedToggle.tsx b/examples/web/src/publications/UseNotInterestedToggle.tsx
@@ -63,7 +63,7 @@ export function UseNotInterestedToggle() {
       <WhenLoggedIn>
         <UseNotInterestedToggleInner />
       </WhenLoggedIn>
-      <UnauthenticatedFallback message="Log in mark publications as not interesting." />
+      <UnauthenticatedFallback />
     </>
   );
 }
diff --git a/examples/web/src/publications/UseReactionToggle.tsx b/examples/web/src/publications/UseReactionToggle.tsx
@@ -8,7 +8,7 @@ import {
   useReactionToggle,
 } from '@lens-protocol/react-web';
 
-import { WhenLoggedIn, WhenLoggedOut } from '../components/auth';
+import { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
 import { Loading } from '../components/loading/Loading';
 import { invariant } from '../utils';
@@ -78,9 +78,7 @@ export function UseReactionToggle() {
       <WhenLoggedIn>
         <UseReactionToggleInner />
       </WhenLoggedIn>
-      <WhenLoggedOut>
-        <p>You must be logged in to use this example.</p>
-      </WhenLoggedOut>
+      <UnauthenticatedFallback />
     </div>
   );
 }