Use mod protocol metadata cache for Open Graph images about herocast

[sweep-ai]

🚀 Here's the PR! #98

See Sweep's progress at the progress dashboard!

⚡ Sweep Basic Tier: I'm using GPT-4. You have 5 GPT-4 tickets left for the month and 3 for the day. (tracking ID: 136703df26)

For more GPT-4 tickets, visit our payment portal. For a one week free trial, try Sweep Pro (unlimited GPT-4 tickets).

---

Actions (click)

• ↻ Restart Sweep

Sandbox Execution ✓

Here are the sandbox execution logs prior to making any changes:

Sandbox logs for 1736f8c

Checking src/common/components/NewPostEntry.tsx for syntax errors... ✅ src/common/components/NewPostEntry.tsx has no syntax errors! 1/1 ✓

Checking src/common/components/NewPostEntry.tsx for syntax errors...
✅ src/common/components/NewPostEntry.tsx has no syntax errors!

Sandbox passed on the latest main, so sandbox checks will be enabled for this issue.

---

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I think are relevant in decreasing order of relevance (click to expand). If some file is missing from here, you can mention the path in the ticket description.

https://github.com/hellno/herocast/blob/1736f8c7c634d5f9db4fafe5a1e0b666a97c3be3/src/common/components/NewPostEntry.tsx#L1-L163

https://github.com/hellno/herocast/blob/1736f8c7c634d5f9db4fafe5a1e0b666a97c3be3/package.json#L28-L140

I also found the following external resources that might be helpful:

Summaries of links found in the content:

https://docs.modprotocol.org/metadata-cache:

The page titled "Metadata Indexer - Mod Protocol Docs" provides information about the Metadata Indexer, which is an open-source and self-hostable service that indexes all the embed URLs mentioned in Farcaster casts and their metadata. The page explains why one should use this service instead of building their own or loading the data on pageload. It mentions that fetching metadata on pageload is slow and can introduce Cumulative Layout Shift. The Metadata Indexer supports special handlers for various URLs, including NFT-extended open graph spec, CAIP-19 URLs, Opensea, Zora, Images, and Arweave files. It also supports JSON Linked Data and provides additional metadata about the page. The page highlights that the Metadata Indexer is already indexing and caching the metadata of over 500,000 URLs shared on Farcaster. It is MIT licensed and can be self-hosted if desired. The page provides code snippets for using the Metadata Indexer, including endpoints to get metadata for a list of cast hashes and a list of URLs. It also includes the TypeScript type definition for the Metadata object.

---

Step 2: ⌨️ Coding

• Modify src/common/components/NewPostEntry.tsx ✓ 80b0289 Edit

Modify src/common/components/NewPostEntry.tsx with contents:
• Import the `fetchMetadataFromCache` function from the `@mod-protocol/core` package. This function fetches metadata from the mod protocol metadata cache.
• Replace the `fetchUrlMetadata` function with the `fetchMetadataFromCache` function in the `getResults` and `getModChannels` functions. This will make these functions fetch metadata from the mod protocol metadata cache instead of fetching metadata on pageload.
• Replace the `fetchUrlMetadata` function with the `fetchMetadataFromCache` function in the `useEditor` hook. This will make the `useEditor` hook use the `fetchMetadataFromCache` function to fetch metadata for URLs.

--- 
+++ 
@@ -7,7 +7,7 @@
 import { useHotkeys } from "react-hotkeys-hook";
 import { useEditor, EditorContent, Editor } from "@mod-protocol/react-editor";
 import { EmbedsEditor } from "@mod-protocol/react-ui-shadcn/dist/lib/embeds";
-import { fetchUrlMetadata } from "@mod-protocol/core";
+import { fetchMetadataFromCache } from "@mod-protocol/core";
 import {
   Channel,
   getFarcasterChannels,
@@ -22,7 +22,7 @@
 const API_URL = process.env.NEXT_PUBLIC_MOD_PROTOCOL_API_URL!;
 const getResults = getFarcasterMentions(API_URL);
 const getModChannels = getFarcasterChannels(API_URL);
-const getUrlMetadata = fetchUrlMetadata(API_URL);
+const getUrlMetadata = fetchMetadataFromCache(API_URL);
 
 const onError = (err) => {
   console.error(err);
@@ -106,7 +106,7 @@
     getChannel,
     handleSubmit,
   } = useEditor({
-    fetchUrlMetadata: getUrlMetadata,
+    fetchUrlMetadata: fetchMetadataFromCache,
     onError,
     onSubmit: onSubmitPost,
     linkClassName: "text-blue-300",

• Running GitHub Actions for src/common/components/NewPostEntry.tsx ✓ Edit

Check src/common/components/NewPostEntry.tsx with contents:

Ran GitHub Actions for 80b0289386adee5901c2573f0d2cc0314999b512:

---

Step 3: 🔁 Code Review

I have finished reviewing the code for completeness. I did not find errors for sweep/use_mod_protocol_metadata_cache_for_open_2.

---

🎉 Latest improvements to Sweep:

• We just released a dashboard to track Sweep's progress on your issue in real-time, showing every stage of the process – from search to planning and coding.
• Sweep uses OpenAI's latest Assistant API to plan code changes and modify code! This is 3x faster and significantly more reliable as it allows Sweep to edit code and validate the changes in tight iterations, the same way as a human would.
• Try using the GitHub issues extension to create Sweep issues directly from your editor! GitHub Issues and Pull Requests.

---

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request.
^{Join Our Discord}