react: add useCreateQuote hook

.changeset/large-glasses-grin.md

@@ -0,0 +1,7 @@
+---
+"@lens-protocol/api-bindings": patch
+"@lens-protocol/domain": patch
+"@lens-protocol/react": patch
+---
+
+Added useCreateQuote hook

examples/web/src/App.tsx

@@ -23,9 +23,13 @@ import {
   UseSearchProfiles,
   UseSearchPublications,
 } from './discovery';
-import { MiscPage, UseCurrencies, UseNotifications } from './misc';
-import { UseApproveModule } from './misc/UseApproveModule';
-import { UseClaimHandle } from './misc/UseClaimHandle';
+import {
+  MiscPage,
+  UseApproveModule,
+  UseClaimHandle,
+  UseCurrencies,
+  UseNotifications,
+} from './misc';
 import {
   ProfilesPage,
   UseFollowAndUnfollow,
@@ -50,16 +54,17 @@ import {
   UseBookmarkToggle,
   UseCreateComment,
   UseCreatePost,
+  UseCreateQuote,
   UseHidePublication,
   UseMyBookmarks,
+  UseNotInterestedToggle,
   UseOpenAction,
   UsePublication,
   UsePublications,
   UseReactionToggle,
   UseReportPublication,
   UseWhoReactedToPublication,
 } from './publications';
-import { UseNotInterestedToggle } from './publications/UseNotInterestedToggle';
 import {
   RevenuePage,
   UseRevenueFromFollow,
@@ -108,6 +113,7 @@ export function App() {
                       <Route index element={<PublicationsPage />} />
                       <Route path="useCreatePost" element={<UseCreatePost />} />
                       <Route path="useCreateComment" element={<UseCreateComment />} />
+                      <Route path="useCreateQuote" element={<UseCreateQuote />} />
                       <Route path="usePublication" element={<UsePublication />} />
                       <Route path="usePublications" element={<UsePublications />} />
                       <Route

examples/web/src/discovery/UseFeed.tsx

@@ -6,7 +6,7 @@ import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
 import { PublicationCard } from '../publications/components/PublicationCard';
 
 export function UseFeed() {
-  const { data, error, loading, hasMore, observeRef, prev } = useInfiniteScroll(
+  const { data, error, loading, hasMore, beforeCount, observeRef, prev } = useInfiniteScroll(
     useFeed({
       where: {
         for: profileId('0x04'),
@@ -26,7 +26,7 @@ export function UseFeed() {
 
         {error && <ErrorMessage error={error} />}
 
-        <button disabled={loading} onClick={prev}>
+        <button disabled={loading || beforeCount === 0} onClick={prev}>
           Fetch newer
         </button>
 

examples/web/src/discovery/UseFeedHighlights.tsx

@@ -6,7 +6,7 @@ import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
 import { PublicationCard } from '../publications/components/PublicationCard';
 
 export function UseFeedHighlights() {
-  const { data, error, loading, hasMore, observeRef, prev } = useInfiniteScroll(
+  const { data, error, loading, hasMore, beforeCount, observeRef, prev } = useInfiniteScroll(
     useFeedHighlights({
       where: {
         for: profileId('0x04'),
@@ -26,7 +26,7 @@ export function UseFeedHighlights() {
 
         {error && <ErrorMessage error={error} />}
 
-        <button disabled={loading} onClick={prev}>
+        <button disabled={loading || beforeCount === 0} onClick={prev}>
           Fetch newer
         </button>
 

examples/web/src/misc/index.ts

@@ -1,3 +1,5 @@
 export * from './MiscPage';
+export * from './UseApproveModule';
+export * from './UseClaimHandle';
 export * from './UseCurrencies';
 export * from './UseNotifications';

examples/web/src/publications/PublicationsPage.tsx

@@ -11,6 +11,11 @@ const publicationHooks = [
     description: `Leave a comment on another publication.`,
     path: '/publications/useCreateComment',
   },
+  {
+    label: 'useCreateQuote',
+    description: `Quote another publication.`,
+    path: '/publications/useCreateQuote',
+  },
   {
     label: 'usePublication',
     description: `Fetch a single publication.`,

examples/web/src/publications/UseCreateQuote.tsx

@@ -0,0 +1,99 @@
+import { textOnly } from '@lens-protocol/metadata';
+import { publicationId, useCreateQuote, usePublication } from '@lens-protocol/react-web';
+import { toast } from 'react-hot-toast';
+
+import { UnauthenticatedFallback, WhenLoggedIn } from '../components/auth';
+import { ErrorMessage } from '../components/error/ErrorMessage';
+import { Loading } from '../components/loading/Loading';
+import { uploadJson } from '../upload';
+import { never } from '../utils';
+import { PublicationCard } from './components/PublicationCard';
+
+function QuoteComposer() {
+  const {
+    data: publication,
+    error: publicationError,
+    loading: publicationLoading,
+  } = usePublication({ forId: publicationId('0x04-0x0b') });
+
+  const { execute, loading, error } = useCreateQuote();
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const formData = new FormData(form);
+
+    // create post metadata
+    const metadata = textOnly({
+      content: formData.get('content') as string,
+    });
+
+    // publish post
+    const result = await execute({
+      quoteOn: publication?.id ?? never('publication is not loaded'),
+      metadata: await uploadJson(metadata),
+    });
+
+    // check for failure scenarios
+    if (result.isFailure()) {
+      toast.error(result.error.message);
+      return;
+    }
+
+    // wait for full completion
+    const completion = await result.value.waitForCompletion();
+
+    // check for late failures
+    if (completion.isFailure()) {
+      toast.error(completion.error.message);
+      return;
+    }
+
+    // quote was created
+    const quote = completion.value;
+    toast.success(`Quote ID: ${quote.id}`);
+  };
+
+  if (publicationLoading) return <Loading />;
+
+  if (publicationError) return <ErrorMessage error={publicationError} />;
+
+  return (
+    <form onSubmit={submit}>
+      <PublicationCard publication={publication} />
+
+      <fieldset>
+        <textarea
+          name="content"
+          minLength={1}
+          required
+          rows={3}
+          placeholder="What's happening?"
+          style={{ resize: 'none' }}
+          disabled={loading}
+        ></textarea>
+
+        <button type="submit" disabled={loading}>
+          Quote
+        </button>
+
+        {!loading && error && <pre>{error.message}</pre>}
+      </fieldset>
+    </form>
+  );
+}
+
+export function UseCreateQuote() {
+  return (
+    <div>
+      <h1>
+        <code>useCreateQuote</code>
+      </h1>
+
+      <WhenLoggedIn>
+        <QuoteComposer />
+      </WhenLoggedIn>
+      <UnauthenticatedFallback message="Log in to create a quote." />
+    </div>
+  );
+}

examples/web/src/publications/UsePublications.tsx

@@ -59,11 +59,11 @@ export function UsePublications() {
             </label>
           ))}
         </fieldset>
-        {beforeCount > 0 && (
-          <button disabled={loading} onClick={prev}>
-            Fetch newer
-          </button>
-        )}
+
+        <button disabled={loading || beforeCount === 0} onClick={prev}>
+          Fetch newer
+        </button>
+
         {publications.map((publication) => (
           <PublicationCard key={publication.id} publication={publication} />
         ))}

examples/web/src/publications/index.ts

@@ -2,8 +2,10 @@ export * from './PublicationsPage';
 export * from './UseBookmarkToggle';
 export * from './UseCreateComment';
 export * from './UseCreatePost';
+export * from './UseCreateQuote';
 export * from './UseHidePublication';
 export * from './UseMyBookmarks';
+export * from './UseNotInterestedToggle';
 export * from './UseOpenAction';
 export * from './UsePublication';
 export * from './UsePublications';

packages/api-bindings/src/lens/__helpers__/mutations/publication.ts

@@ -32,6 +32,9 @@ import {
   CreateMomokaPostTypedDataDocument,
   CreateMomokaPostTypedDataVariables,
   CreateMomokaPublicationResult,
+  CreateMomokaQuoteTypedDataData,
+  CreateMomokaQuoteTypedDataDocument,
+  CreateMomokaQuoteTypedDataVariables,
   CreateOnchainCommentTypedDataData,
   CreateOnchainCommentTypedDataDocument,
   CreateOnchainCommentTypedDataVariables,
@@ -41,6 +44,9 @@ import {
   CreateOnchainPostTypedDataData,
   CreateOnchainPostTypedDataDocument,
   CreateOnchainPostTypedDataVariables,
+  CreateOnchainQuoteTypedDataData,
+  CreateOnchainQuoteTypedDataDocument,
+  CreateOnchainQuoteTypedDataVariables,
   HidePublicationData,
   HidePublicationDocument,
   HidePublicationVariables,
@@ -59,6 +65,12 @@ import {
   PostOnMomokaData,
   PostOnMomokaDocument,
   PostOnMomokaVariables,
+  QuoteOnchainData,
+  QuoteOnchainDocument,
+  QuoteOnchainVariables,
+  QuoteOnMomokaData,
+  QuoteOnMomokaDocument,
+  QuoteOnMomokaVariables,
   RemovePublicationBookmarkData,
   RemovePublicationBookmarkDocument,
   RemovePublicationBookmarkVariables,
@@ -479,6 +491,128 @@ export function mockMirrorOnchainResponse<
   };
 }
 
+export function mockCreateOnchainQuoteTypedDataData({
+  nonce = mockNonce(),
+}: { nonce?: Nonce } = {}): CreateOnchainQuoteTypedDataData {
+  return {
+    result: mockCreateTypedDataResult('CreateOnchainQuoteBroadcastItemResult', {
+      types: {
+        Quote: [mockEIP712TypedDataField()],
+      },
+      domain: mockEIP712TypedDataDomain(),
+      message: {
+        nonce,
+        deadline: 1644303500,
+        profileId: mockProfileId(),
+        contentURI: 'ipfs://QmR5V6fwKWzoa9gevmYaQ11eMQsAahsjfWPz1rCoNJjN1K.json',
+        pointedProfileId: mockProfileId(),
+        pointedPubId: '0x01',
+        referrerProfileIds: [],
+        referrerPubIds: [],
+        referenceModuleData: '0x',
+        actionModules: [mockEvmAddress()],
+        actionModulesInitDatas: ['0x'],
+        referenceModule: '0x0000000000000000000000000000000000000000',
+        referenceModuleInitData: '0x',
+      },
+    }),
+  };
+}
+
+export function mockCreateOnchainQuoteTypedDataResponse<T extends CreateOnchainQuoteTypedDataData>({
+  variables,
+  data,
+}: {
+  variables: CreateOnchainQuoteTypedDataVariables;
+  data: T;
+}): MockedResponse<T> {
+  return {
+    request: {
+      query: CreateOnchainQuoteTypedDataDocument,
+      variables,
+    },
+    result: {
+      data,
+    },
+  };
+}
+
+export function mockQuoteOnchainResponse<
+  T extends QuoteOnchainData,
+  V extends QuoteOnchainVariables,
+>({ variables, data }: { variables: V; data: T }): MockedResponse<T, V> {
+  return {
+    request: {
+      query: QuoteOnchainDocument,
+      variables,
+    },
+    result: {
+      data,
+    },
+  };
+}
+
+export function mockCreateMomokaQuoteTypedDataData({
+  nonce = mockNonce(),
+}: { nonce?: Nonce } = {}): CreateMomokaQuoteTypedDataData {
+  return {
+    result: mockCreateTypedDataResult('CreateMomokaQuoteBroadcastItemResult', {
+      types: {
+        Quote: [mockEIP712TypedDataField()],
+      },
+      domain: mockEIP712TypedDataDomain(),
+      message: {
+        nonce,
+        deadline: 1644303500,
+        profileId: mockProfileId(),
+        contentURI: 'ipfs://QmR5V6fwKWzoa9gevmYaQ11eMQsAahsjfWPz1rCoNJjN1K.json',
+        pointedProfileId: mockProfileId(),
+        pointedPubId: '0x01',
+        referrerProfileIds: [],
+        referrerPubIds: [],
+        referenceModuleData: '0x',
+        actionModules: [mockEvmAddress()],
+        actionModulesInitDatas: ['0x'],
+        referenceModule: '0x0000000000000000000000000000000000000000',
+        referenceModuleInitData: '0x',
+      },
+    }),
+  };
+}
+
+export function mockCreateMomokaQuoteTypedDataResponse<T extends CreateMomokaQuoteTypedDataData>({
+  variables,
+  data,
+}: {
+  variables: CreateMomokaQuoteTypedDataVariables;
+  data: T;
+}): MockedResponse<T> {
+  return {
+    request: {
+      query: CreateMomokaQuoteTypedDataDocument,
+      variables,
+    },
+    result: {
+      data,
+    },
+  };
+}
+
+export function mockQuoteOnMomokaResponse<
+  T extends QuoteOnMomokaData,
+  V extends QuoteOnMomokaVariables,
+>({ variables, data }: { variables: V; data: T }): MockedResponse<T, V> {
+  return {
+    request: {
+      query: QuoteOnMomokaDocument,
+      variables,
+    },
+    result: {
+      data,
+    },
+  };
+}
+
 export function mockAddToMyBookmarksResponse(
   variables: AddPublicationBookmarkVariables,
 ): MockedResponse<AddPublicationBookmarkData> {