Merge pull request #907 from lens-protocol/T-19927/useLatestPaidActions

feat: adds useLatestPaidActions hook

.changeset/popular-sloths-shave.md

@@ -0,0 +1,8 @@
+---
+"@lens-protocol/react": minor
+"@lens-protocol/react-native": minor
+"@lens-protocol/react-web": minor
+"@lens-protocol/api-bindings": patch
+---
+
+**feat:** adds `useLatestPaidActions` hook

examples/web/src/App.tsx

@@ -32,6 +32,7 @@ import {
   UseClaimHandle,
   UseCurrencies,
   UseInviteWallets,
+  UseLatestPaidActions,
   UseNotifications,
   UseResolveAddress,
   UseSignFrameAction,
@@ -186,6 +187,7 @@ export function App() {
                   <Route path="useNotifications" element={<UseNotifications />} />
                   <Route path="useCurrencies" element={<UseCurrencies />} />
                   <Route path="useApproveModule" element={<UseApproveModule />} />
+                  <Route path="useLatestPaidActions" element={<UseLatestPaidActions />} />
                   <Route path="useClaimHandle" element={<UseClaimHandle />} />
                   <Route path="useInviteWallets" element={<UseInviteWallets />} />
                   <Route path="useResolveAddress" element={<UseResolveAddress />} />

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

@@ -2,6 +2,7 @@ import { profileId, useLogin, useProfilesManaged } from '@lens-protocol/react-we
 import { toast } from 'react-hot-toast';
 
 import { never } from '../../utils';
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
 import { ErrorMessage } from '../error/ErrorMessage';
 import { Loading } from '../loading/Loading';
 
@@ -23,7 +24,7 @@ export function LoginForm({ owner, onSuccess }: { owner: string; onSuccess?: ()
     });
 
     if (result.isSuccess()) {
-      toast.success(`Welcome ${String(result.value?.handle?.fullHandle ?? result.value?.id)}`);
+      toast.success(`Welcome ${String(result.value && formatProfileIdentifier(result.value))}`);
       return onSuccess?.();
     }
 
@@ -56,7 +57,7 @@ export function LoginForm({ owner, onSuccess }: { owner: string; onSuccess?: ()
               name="id"
               value={profile.id}
             />
-            {profile.handle?.fullHandle ?? profile.id}
+            {formatProfileIdentifier(profile)}
           </label>
         ))}
 

examples/web/src/components/cards.tsx

@@ -7,6 +7,7 @@ import {
 import { ReactNode } from 'react';
 
 import { ProfilePicture } from '../profiles/components/ProfilePicture';
+import { formatProfileIdentifier } from '../utils/formatProfileIdentifier';
 
 function MetadataSwitch({ metadata }: { metadata: PublicationMetadata }) {
   switch (metadata.__typename) {
@@ -89,10 +90,7 @@ export function PublicationCard({ publication, children }: PublicationCardProps)
       >
         <ProfilePicture picture={publication.by.metadata?.picture ?? null} />
         <p>
-          {publication.__typename} by{' '}
-          {publication.by.metadata?.displayName ??
-            publication.by.handle?.fullHandle ??
-            publication.by.id}
+          {publication.__typename} by {formatProfileIdentifier(publication.by)}
         </p>
       </div>
       <PublicationSwitch publication={publication} />
@@ -118,7 +116,7 @@ export function CommentCard({ comment }: CommentCardProps) {
         }}
       >
         <ProfilePicture picture={comment.by.metadata?.picture ?? null} />
-        <p>{comment.by.metadata?.displayName ?? comment.by.handle?.fullHandle ?? comment.by.id}</p>
+        <p>{formatProfileIdentifier(comment.by)}</p>
       </div>
       <MetadataSwitch metadata={comment.metadata} />
     </section>

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

@@ -3,6 +3,7 @@ import { Suspense } from 'react';
 import { NavLink } from 'react-router-dom';
 
 import { CATEGORIES } from '../../config';
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
 import { LoginButton, LogoutButton } from '../auth';
 
 function AuthenticationBar() {
@@ -20,9 +21,7 @@ function AuthenticationBar() {
       {session.authenticated && (
         <strong>
           {session.type === SessionType.WithProfile
-            ? session.profile?.metadata?.displayName ??
-              session.profile.handle?.fullHandle ??
-              session.profile.id
+            ? formatProfileIdentifier(session.profile)
             : session.address}
         </strong>
       )}

examples/web/src/inbox/components/ConversationCard.tsx

@@ -3,6 +3,7 @@ import { EnhancedConversation } from '@lens-protocol/react-web/inbox';
 import { ReactNode } from 'react';
 
 import { ProfilePicture } from '../../profiles/components/ProfilePicture';
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
 
 type PeerProfileProps = {
   profile: Profile;
@@ -12,7 +13,7 @@ function PeerProfile({ profile }: PeerProfileProps) {
   return (
     <div>
       <ProfilePicture picture={profile.metadata?.picture || null} />
-      <div>{profile.handle?.fullHandle || profile.id}</div>
+      <div>{formatProfileIdentifier(profile)}</div>
     </div>
   );
 }

examples/web/src/inbox/components/ConversationComposer.tsx

@@ -2,6 +2,7 @@ import { Profile } from '@lens-protocol/react-web';
 import { useStartLensConversation } from '@lens-protocol/react-web/inbox';
 
 import { never } from '../../utils';
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
 
 type ConversationComposerProps = {
   peerProfile: Profile;
@@ -40,7 +41,7 @@ export function ConversationComposer({ peerProfile }: ConversationComposerProps)
         ></textarea>
 
         <button type="submit" disabled={isLoading}>
-          {`Send a first message to ${peerProfile.handle?.fullHandle || peerProfile.id}`}
+          {`Send a first message to ${formatProfileIdentifier(peerProfile)}`}
         </button>
 
         {!!error && <div>Something went wrong</div>}

examples/web/src/inbox/components/ProfileSelector.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 
 import { ErrorMessage } from '../../components/error/ErrorMessage';
 import { invariant } from '../../utils';
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
 
 type ProfileSelectorProps = {
   onProfileSelected: (profile: Profile | null) => void;
@@ -68,7 +69,7 @@ export function ProfileSelector({ onProfileSelected }: ProfileSelectorProps) {
       <option value="default">Select a profile</option>
       {profilesOnXmtp.map((item) => (
         <option key={item.id} value={item.id}>
-          {item.handle?.fullHandle ?? item.id}
+          {formatProfileIdentifier(item)}
         </option>
       ))}
     </select>

examples/web/src/misc/MiscPage.tsx

@@ -16,6 +16,11 @@ const hooks = [
     description: `Pre-approves an ERC20 spend on a given collect/follow module.`,
     path: '/misc/useApproveModule',
   },
+  {
+    label: 'useLatestPaidActions',
+    description: `List all the latest paid actions for the authenticated profile.`,
+    path: '/misc/useLatestPaidActions',
+  },
   {
     label: 'useClaimHandle',
     description: `Allows to claim an handle for a whitelisted address.`,

examples/web/src/misc/UseClaimHandle.tsx

@@ -12,6 +12,7 @@ import { toast } from 'react-hot-toast';
 import { RequireWalletSession } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
 import { Loading } from '../components/loading/Loading';
+import { formatProfileIdentifier } from '../utils/formatProfileIdentifier';
 
 function ClaimHandleOptions() {
   const { data, loading, error } = useCanClaimHandle();
@@ -62,7 +63,7 @@ function ClaimHandleOptions() {
     }
 
     // successfully logged-in with new profile
-    toast.success(`Successfully logged-in as: ${profile.handle?.fullHandle ?? profile.id}`);
+    toast.success(`Successfully logged-in as: ${formatProfileIdentifier(profile)}`);
   };
 
   const claimReserved = (reserved: ReservedClaimable) => claim({ reserved });

examples/web/src/misc/UseLatestPaidActions.tsx

@@ -0,0 +1,41 @@
+import { useLatestPaidActions } from '@lens-protocol/react-web';
+
+import { RequireProfileSession } from '../components/auth';
+import { ErrorMessage } from '../components/error/ErrorMessage';
+import { Loading } from '../components/loading/Loading';
+import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
+import { PaidActionItem } from './components/PaidActionItem';
+
+function UseLatestPaidActionsInner() {
+  const { data, error, loading, hasMore, observeRef } = useInfiniteScroll(useLatestPaidActions());
+
+  if (loading) return <Loading />;
+
+  if (error) return <ErrorMessage error={error} />;
+
+  return (
+    <div>
+      {data.length === 0 && <p>No paid actions found.</p>}
+
+      {data.map((item) => (
+        <PaidActionItem key={item.latestActed[0].actedAt} action={item} />
+      ))}
+
+      {hasMore && <p ref={observeRef}>Loading more...</p>}
+    </div>
+  );
+}
+
+export function UseLatestPaidActions() {
+  return (
+    <div>
+      <h1>
+        <code>useLatestPaidActions</code>
+      </h1>
+
+      <RequireProfileSession message="Log in to view this example.">
+        <UseLatestPaidActionsInner />
+      </RequireProfileSession>
+    </div>
+  );
+}

examples/web/src/misc/components/NotificationItem.tsx

@@ -10,6 +10,8 @@ import {
 } from '@lens-protocol/react-web';
 import { ReactNode } from 'react';
 
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
+
 function NotificationItemWrapper({ children }: { children: ReactNode }) {
   return <article>{children}</article>;
 }
@@ -29,7 +31,7 @@ function NewCommentNotification({ notification }: { notification: CommentNotific
   return (
     <NotificationItemWrapper>
       <p>
-        Comment by {notification.comment.by.handle?.fullHandle ?? notification.comment.by.id} on{' '}
+        Comment by {formatProfileIdentifier(notification.comment.by)} on{' '}
         {notification.comment.commentOn.id}
       </p>
     </NotificationItemWrapper>
@@ -42,7 +44,7 @@ function NewFollowNotification({ notification }: { notification: FollowNotificat
       <p>
         Followed by{' '}
         {notification.followers.map((profile) => (
-          <div key={profile.id}>{profile.handle?.fullHandle ?? profile.id}</div>
+          <div key={profile.id}>{formatProfileIdentifier(profile)}</div>
         ))}
       </p>
     </NotificationItemWrapper>
@@ -54,7 +56,7 @@ function NewMentionNotification({ notification }: { notification: MentionNotific
     <NotificationItemWrapper>
       <p>
         Mentioned "{notification.publication.id}" by{' '}
-        {notification.publication.by.handle?.fullHandle ?? notification.publication.by.id}
+        {formatProfileIdentifier(notification.publication.by)}
       </p>
     </NotificationItemWrapper>
   );
@@ -82,7 +84,7 @@ function NewReactionNotification({ notification }: { notification: ReactionNotif
       <p>
         Publication {notification.publication.id} got new reactions:
         {notification.reactions.map((reaction, index) => (
-          <div key={index}>by {reaction.profile.handle?.fullHandle ?? reaction.profile.id}</div>
+          <div key={index}>by {formatProfileIdentifier(reaction.profile)}</div>
         ))}
       </p>
     </NotificationItemWrapper>

examples/web/src/misc/components/PaidActionItem.tsx

@@ -0,0 +1,32 @@
+import { AnyPaidAction, FollowPaidAction, OpenActionPaidAction } from '@lens-protocol/react-web';
+
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
+
+function FollowPaidActionItem({ action }: { action: FollowPaidAction }) {
+  return (
+    <div>
+      Followed {formatProfileIdentifier(action.followed)} on {action.latestActed[0].actedAt}
+    </div>
+  );
+}
+
+function OpenActionPaidActionItem({ action }: { action: OpenActionPaidAction }) {
+  return (
+    <div>
+      Acted on publication {action.actedOn.id} on {action.latestActed[0].actedAt}
+    </div>
+  );
+}
+
+type PaidActionItemProps = {
+  action: AnyPaidAction;
+};
+
+export function PaidActionItem({ action }: PaidActionItemProps) {
+  switch (action.__typename) {
+    case 'FollowPaidAction':
+      return <FollowPaidActionItem action={action} />;
+    case 'OpenActionPaidAction':
+      return <OpenActionPaidActionItem action={action} />;
+  }
+}

examples/web/src/misc/index.ts

@@ -4,6 +4,7 @@ export * from './UseApproveModule';
 export * from './UseClaimHandle';
 export * from './UseCurrencies';
 export * from './UseInviteWallets';
+export * from './UseLatestPaidActions';
 export * from './UseNotifications';
 export * from './UseResolveAddress';
 export * from './UseSignFrameAction';

examples/web/src/profiles/UseCreateProfile.tsx

@@ -2,6 +2,7 @@ import { useCreateProfile } from '@lens-protocol/react-web';
 import toast from 'react-hot-toast';
 
 import { RequireConnectedWallet } from '../components/auth';
+import { formatProfileIdentifier } from '../utils/formatProfileIdentifier';
 
 export function CreateProfileForm({ address }: { address: string }) {
   const { execute, loading } = useCreateProfile();
@@ -22,7 +23,7 @@ export function CreateProfileForm({ address }: { address: string }) {
 
     const profile = result.value;
 
-    toast.success(`Congratulations! You now own: ${profile.handle?.fullHandle}!`);
+    toast.success(`Congratulations! You now own: ${formatProfileIdentifier(profile)}!`);
     return;
   };
 

examples/web/src/utils/formatProfileIdentifier.ts

@@ -0,0 +1,11 @@
+import { HandleInfo, Profile } from '@lens-protocol/react-web';
+
+function formatHandle(handle: HandleInfo): string {
+  return `@${handle.fullHandle}`;
+}
+
+export function formatProfileIdentifier(profile: Profile): string {
+  return (
+    profile?.metadata?.displayName ?? (profile.handle ? formatHandle(profile.handle) : profile.id)
+  );
+}

examples/web/src/wallet/UseOwnedHandles.tsx

@@ -13,6 +13,7 @@ import { toast } from 'react-hot-toast';
 import { RequireProfileSession } from '../components/auth';
 import { ErrorMessage } from '../components/error/ErrorMessage';
 import { Loading } from '../components/loading/Loading';
+import { formatProfileIdentifier } from '../utils/formatProfileIdentifier';
 
 type LinkHandleButtonProps = {
   handle: HandleInfo;
@@ -105,9 +106,7 @@ function UseOwnedProfiles({ address }: { address: EvmAddress }) {
       <h4>Owned profiles</h4>
       <ul>
         {profiles.map((p, index) => (
-          <li key={index}>
-            {p.id} {p.handle?.fullHandle || 'NOT LINKED'}
-          </li>
+          <li key={index}>{formatProfileIdentifier(p)}</li>
         ))}
       </ul>
     </div>
@@ -167,7 +166,7 @@ function Content({ address, profile }: ContentProps) {
       </p>
       <p>
         Active profile: <strong>{profile.id}</strong>. Current handle{' '}
-        <strong>{profile.handle?.fullHandle || 'NOT LINKED'}</strong>.
+        <strong>{formatProfileIdentifier(profile)}</strong>.
       </p>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         <UseOwnedProfiles address={address} />

packages/api-bindings/src/apollo/cache/createTypePolicies.ts

@@ -9,6 +9,7 @@ import {
   createFeedHighlightsFieldPolicy,
   createFollowersFieldPolicy,
   createFollowingFieldPolicy,
+  createLatestPaidActionsFieldPolicy,
   createMutualFollowersFieldPolicy,
   createProfileActionHistoryFieldPolicy,
   createProfileFieldPolicy,
@@ -66,6 +67,7 @@ export function createTypePolicies(): StrictTypedTypePolicies & InheritedTypePol
         feedHighlights: createFeedHighlightsFieldPolicy(),
         followers: createFollowersFieldPolicy(),
         following: createFollowingFieldPolicy(),
+        latestPaidActions: createLatestPaidActionsFieldPolicy(),
         mutualFollowers: createMutualFollowersFieldPolicy(),
         profileActionHistory: createProfileActionHistoryFieldPolicy(),
         profileRecommendations: createProfileRecommendationsFieldPolicy(),

packages/api-bindings/src/apollo/cache/field-policies/createLatestPaidActionsFieldPolicy.ts

@@ -0,0 +1,5 @@
+import { cursorBasedPagination } from '../utils/cursorBasedPagination';
+
+export function createLatestPaidActionsFieldPolicy() {
+  return cursorBasedPagination(['where', 'filter']);
+}

packages/api-bindings/src/apollo/cache/field-policies/index.ts

@@ -5,10 +5,11 @@ export * from './createFeedFieldPolicy';
 export * from './createFeedHighlightsFieldPolicy';
 export * from './createFollowersFieldPolicy';
 export * from './createFollowingFieldPolicy';
+export * from './createLatestPaidActionsFieldPolicy';
 export * from './createMutualFollowersFieldPolicy';
 export * from './createProfileActionHistoryFieldPolicy';
-export * from './createProfileRecommendationsFieldPolicy';
 export * from './createProfileFieldPolicy';
+export * from './createProfileRecommendationsFieldPolicy';
 export * from './createProfilesFieldPolicy';
 export * from './createPublicationFieldPolicy';
 export * from './createPublicationsFieldPolicy';